body {
  max-width: 1400px;
  margin: 0px auto 0;
  color: var(--dark-text-color);   /* default text is Charcoal #333, not browser black */
}


dt,dd {
    margin:0;
    padding:0;
}
li {
    list-style: none;
}

/*links*/
a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 400;
  cursor: pointer;
}

  a:focus, a:hover {
    text-decoration: underline;
  }


.breadcrumb {
  padding: 4rem 3%;
  font-size: 1.5rem;
}

  .breadcrumb > ul {
    margin: 0;
    padding: 0;
  }

    .breadcrumb > ul li {
      display: inline-block;
    }

      .breadcrumb > ul li > * {
        display: inline-block;
        margin: 0 .5rem;
      }


/*headers*/
h1, h2 {
  font-family: var(--secondary-font);
  font-weight: normal;
  margin-bottom: 1.5rem;
  margin-top: 0;
}

h3, h4, h5, h6, .h7 {
  font-family: var(--secondary-font);
  font-weight: normal;
  margin-bottom: 1.5rem;
  margin-top: 0;
}

.darkBackground h1,
.darkBackground h2,
.darkBackground h3,
.darkBackground h4,
.darkBackground h5,
.darkBackground h6,
.darkBackground div,
.darkBackground span,
.darkBackground p,
.darkBackground p1,
.darkBackground p2,
.darkBackground p3,
.darkBackground p4,
.darkBackground p5,
.darkBackground p6,
.darkBackground p7 {
  color: var(--light-text-color);
}

h1 { /* Homepage Top Carousel (Featured Promo) */
  font-size: 4.8rem;
  line-height: 1.2;
}

.product-details-page h1,
.category-page h1,
.manufacturerPageWrapper h1,
.search-page .page-body h1 { /* Product Detail Page & Category Page h1 */
  font-family: var(--secondary-font);
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 0;
  font-size: 3.2rem;
  letter-spacing: -.05rem;
  line-height: 1.3;
}

.p1 { /* About Cokesbury (Intro Copy) */
  font-size: 2.0rem;
  line-height: 1.5;
}

.p2 { /* About Cokesbury (Timeline stats) */
  font-size: 1.8rem;
}

.p3 { /* Standard Body Copy Size */
  font-size: 1.6rem;
}

.p4 { /* Price Large (product detail page) */
  font-size: 3.2rem;
  line-height: 1.3;
  font-weight: 600;
}

.p5 { /* Strikethrough Price Large (product detail page) */
  font-size: 2.4rem;
  line-height: 1.4;
  color: var(--tertiary-color-3);
  text-decoration: line-through;
}

.p6 { /* Price Small */
  font-size: 2.4rem;
  line-height: 1.4;
}

.p7 { /* Strikethrough Price Small / Timestamp (Reviews) */
  font-size: 1.6rem;
  color: var(--tertiary-color-3);
  text-decoration: line-through;
}

.p8 { /* Input directions */
  font-size: 1.6rem;
  color: var(--tertiary-color-3);
  font-style: italic;
  margin-top: 1rem;
}

.p9 { /* special notes */
  font-size: 1.6rem;
  color: var(--tertiary-color-3);
  margin-top: 1rem;
}

h2 { /* Homepage Top Carousel (Company Quote) */
  font-style: italic;
  font-size: 4.4rem;
  line-height: 1.25;
}

h3 { /* Page Titles */
  font-size: 3.6rem;
  line-height: 1.3;
}

h4 { /* Promo Quotes, Promo Headlines */
  font-size: 3.2rem;
  letter-spacing: -.08rem;
  line-height: 1.3;
}

h5 { /* Section Headers, Product Detail Page Titles, Search Results Title */
  font-size: 2.8rem;
  letter-spacing: -.05rem;
  line-height: 1.3;
}

h6 {
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 1.4;
}

.h7 { /* Section Headers, Product Detail Page Titles, Search Results Title */
  font-size: 2.2rem;
  letter-spacing: -.05rem;
  line-height: 1.3;
  color: var(--tertiary-color-3);
}

/*secondary headers — s1, s3, s7 retired 2026-07 (no usage in views, JS, or authored content)*/
.s2 {
  margin-top: 0;
  margin-bottom: 2.0rem;
  font-weight: 600;
}

.s4,
.s5,
.s6 {
  margin-top: 0;
  margin-bottom: 2.0rem;
  font-weight: 700;
}

.s2 { /* Name of Author (Hero promo quotes) */
  font-family: var(--secondary-font);
  font-size: 3.6rem;
  line-height: 1.25;
}

.s4 { /* Promo Description Header */
  font-size: 2.4rem;
  line-height: 1.35;
  text-transform: uppercase;
}

.s5 { /* Section Headers Large */
  font-size: 2.4rem;
  line-height: 1.5;
}

.s6 { /* Section Headers Small */
  font-size: 1.6rem;
  line-height: 1.4;
  text-transform: uppercase;
}

blockquote {
  border-left: 0.3rem solid var(--tertiary-color-2);
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.5rem;
}

  blockquote *:last-child {
    margin-bottom: 0;
  }

code {
  background: var(--tertiary-color-1);
  border-radius: .4rem;
  font-size: 86%;
  margin: 0 .2rem;
  padding: .2rem .5rem;
  white-space: nowrap;
}

pre {
  background: var(--tertiary-color-1);
  border-left: 0.3rem solid #9b4dca;
  overflow-y: hidden;
}

  pre > code {
    border-radius: 0;
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
  }

hr {
  border: 0;
  border-top: 1px solid var(--tertiary-color-2);
  margin: 8rem 0;
  position: relative;
}

  hr.noIcon {
    margin: 2rem 0;
  }

  hr:after {
    content: url('/Themes/Cokesbury/Content/images/cokesbury_divider_line_icon.svg');
    padding: 0 15px;
    background-color: var(--surface-color);
    position: absolute;
    top: -34px;
    left: calc(50% - 42px);
    max-width: 67px;
  }

  hr.alt1:after {
    content: url('/Themes/Cokesbury/Content/images/flame_divider_line_icon.svg');
  }

  hr.noIcon:after {
    content: none;
  }


/*#endregion*/

.darkBackground h1,
.darkBackground h2,
.darkBackground h3,
.darkBackground h4,
.darkBackground h5,
.darkBackground h6 {
  color: var(--light-text-color);
}
.darkBackground a,
.darkBackground span,
.darkBackground l1,
.darkBackground l2,
.darkBackground l3,
.darkBackground l4,
.darkBackground l5,
.darkBackground l6,
.darkBackground l7 {
  color: var(--light-text-color);
}

.l1 { /* Product Detail Page */
  font-size: 2rem;
  color: var(--link-color);
}


/* l2, l6, l7 retired 2026-07 (no usage in views, JS, or authored content) */

.l3 { /* Left Rail Link Navigation for Help and Contact Pages */
  font-size: 1.8rem;
  color: var(--link-color);
}

.l4 { /* Product Title Links */
  color: var(--dark-text-color);
  font-size: 1.6rem;
  font-weight: 600;
}

.l5 { /* Product Title Links */
  color: var(--dark-text-color);
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.l8 {
  font-size: 1.6rem;
  color: var(--tertiary-color-3);
}

.l9 { /* Product Detail Take a look */
  font-size: 1.8rem;
  color: var(--link-color);
  font-weight: 600;
  text-transform: uppercase;
}


#small-search-box-form .search-box-text {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--surface-color);
  border: 1px solid var(--tertiary-color-2);
  box-shadow: none;
  box-sizing: inherit;
  width: 100%;
  position: relative;
  font-size: 1.6rem;
  color: var(--tertiary-color-3);
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
  border-radius: 5px;
}

.search-box-button {
  display: none !important;
}

.searchBoxIcon {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  z-index: 1;
}

/*#region Form Elements ******************************************************************************************************************************************************************************/

.linkStyling, input[type='button'].linkStyling, input[type='submit'].linkStyling, button.linkStyling {
  background-color: initial;
  border: 1px solid var(--link-color);
  border-radius: 2px;
  color: var(--link-color);
  cursor: pointer;
  display: inline-block;
  font-size: 2rem;
  font-weight: normal;
  height: auto;
  width: auto;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  padding: .5rem 2rem .5rem 2rem;
  margin: 1rem;
}

  input[type='button'].linkStyling:focus, input[type='button'].linkStyling:hover, input[type='submit'].linkStyling:focus, input[type='submit'].linkStyling:hover, button.linkStyling:focus, button.linkStyling:hover {
    text-decoration: underline;
    background-color: initial;
    border-color: none;
    outline: 0;
    box-shadow: none
  }

  /* keyboard focus stays visible on link buttons (AGENTS.md / atoms.css rule):
     the :focus rule above zeroes the outline for mouse clicks, so re-assert the
     brand ring for :focus-visible -- same specificity, later in the file wins */
  input[type='button'].linkStyling:focus-visible, input[type='submit'].linkStyling:focus-visible, button.linkStyling:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
  }

label {
  font-size: 1.6rem;
  color: var(--dark-text-color);
  font-weight: 700;
  display: inline-block;
  margin-right: 1.5rem;
}


/* paging */

.pager {
    border-top: 1px solid var(--tertiary-color-2);
    padding: 2rem 0 0 2rem;
}
.k-pager-wrap,
.pager {
    margin-top: 4rem;
    display: flex;
    flex-direction: row;
}

    .k-pager-numbers,
    .pager ul {
        margin: 0;
        padding: 0 1rem;
    }

    .k-pager-numbers li,
    .pager li {
        display: inline-block;
        padding: 0 1rem;
        font-size: 2rem;
        text-align: center;
        font-weight: 700;
        line-height: 5rem;
    }

        .k-pager-numbers li.k-current-page {
            display: none;
        }

.k-pager-nav.k-state-disabled {
    opacity: .2;
}

.k-pager-nav {
    padding: 1.6rem 1rem;
}
.pager li {
    vertical-align:middle;
}

.pager li a,
.pager li span {
    background-color: transparent;
    background-image: none;
    border: none;
    min-width: unset;
    height: auto;
    padding: 0;
    display: inline;
}

.pager li a:hover,
.pager li a:focus {
    background-color: transparent;
    border-color: transparent;
}

.k-i-arrow-end-left,
.pager li.first-page a {
    transform: rotate(90deg);
    width: 1.4rem;
    height: 1.6rem;
    background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg');
    display: block;
    font-size: 0;
}

.k-i-arrow-60-left,
.pager li.previous-page a {
    transform: rotate(90deg);
    width: 2rem;
    height: 1.6rem;
    background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg') center center no-repeat;
    display: block;
    font-size: 0;
}

.k-i-arrow-60-right,
.pager li.next-page a {
    transform: rotate(-90deg);
    width: 2rem;
    height: 1.6rem;
    background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg') center center no-repeat;
    display: block;
    font-size: 0;
}

.k-i-arrow-end-right,
.pager li.last-page a {
    transform: rotate(-90deg);
    width: 1.4rem;
    height: 1.6rem;
    background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg');
    display: block;
    font-size: 0;
}

/* select styling is owned by atoms.css (theme arrow + padding); k-* are Kendo leftovers */
.k-dropdown,
.k-multiselect {
    padding-right: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    transition: all 0.3s ease;
    outline: none;
}

.k-dropdown .k-icon,
.k-multiselect .k-icon {
    background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg') center center no-repeat;
    position: absolute;
    right: 1.4rem;
    height: 2rem;
    width: 2rem;
    top: 1.4rem;
}

.k-pager-sizes {
    display: flex;
    line-height: 5rem;
    margin-left: 4rem;
}

    .k-pager-sizes .k-dropdown {
        margin-right: 1rem;
    }

.k-pager-info {
    margin-left: auto;
    line-height: 5rem;
}

/* DataTables pager for the storefront grids that replaced the kendo grids -
   mirrors the .k-pager-* rules above */
.cokesbury-dt .dt-container .dt-layout-row:not(.dt-layout-table) {
    margin-top: 4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.cokesbury-dt .dt-layout-cell {
    display: flex;
    align-items: center;
}

    .cokesbury-dt .dt-layout-cell.dt-layout-end {
        margin-left: auto;
    }

.cokesbury-dt .dt-paging {
    padding: 0 1rem;
    flex-shrink: 0;
}

    .cokesbury-dt .dt-paging nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

.cokesbury-dt button.dt-paging-button {
    display: inline-block;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0 1rem;
    font-size: 2rem;
    font-family: inherit;
    color: inherit;
    text-align: center;
    font-weight: 700;
    line-height: 5rem;
    min-width: unset;
    height: auto;
    cursor: pointer;
    vertical-align: middle;
}

    .cokesbury-dt button.dt-paging-button.current {
        text-decoration: underline;
    }

    .cokesbury-dt button.dt-paging-button.disabled {
        opacity: .2;
        cursor: default;
    }

    .cokesbury-dt .dt-nav-icon {
        display: inline-block;
        width: 2rem;
        height: 1.6rem;
        background: url('/Themes/Cokesbury/Content/images/filter_dropdown_arrow.svg') center center no-repeat;
        vertical-align: middle;
        font-size: 0;
    }

    .cokesbury-dt .dt-nav-first,
    .cokesbury-dt .dt-nav-previous {
        transform: rotate(90deg);
    }

    .cokesbury-dt .dt-nav-next,
    .cokesbury-dt .dt-nav-last {
        transform: rotate(-90deg);
    }

    .cokesbury-dt .dt-nav-first,
    .cokesbury-dt .dt-nav-last {
        width: 1.4rem;
    }

.cokesbury-dt .dt-length {
    display: flex;
    align-items: center;
    line-height: 5rem;
    margin-left: 4rem;
}

    .cokesbury-dt .dt-length select {
        margin-right: 1rem;
        padding-right: 3rem;
        width: auto;
        /* room for the value + the theme dropdown arrow — at its intrinsic width
           the arrow overlaps the number (fits the 3-digit "100" option too) */
        min-width: 8rem;
    }

    .cokesbury-dt .dt-length label {
        white-space: nowrap;
    }

.cokesbury-dt button.dt-refresh {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0 1rem;
    font-size: 2.4rem;
    line-height: 5rem;
    min-width: unset;
    height: auto;
    color: inherit;
    cursor: pointer;
}

.cokesbury-dt .dt-info {
    line-height: 5rem;
}

/* sort indicators for the grids that allow sorting (participant admin) */
.cokesbury-dt th.dt-orderable-asc,
.cokesbury-dt th.dt-orderable-desc {
    cursor: pointer;
}

.cokesbury-dt th.dt-ordering-asc .dt-column-order:after {
    content: "\25B2";
    font-size: 1.2rem;
    color: #ff6358;
    padding-left: .5rem;
}

.cokesbury-dt th.dt-ordering-desc .dt-column-order:after {
    content: "\25BC";
    font-size: 1.2rem;
    color: #ff6358;
    padding-left: .5rem;
}

/* end paging */
/* radio buttons and checkbox */
.largeFormWrapper label.customInputWrapper {
    width: 30px;
    height: 30px;
}

label.customInputWrapper {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    line-height: 1rem;
    display: inline-block;
}
    label.customInputWrapper.selectableRadioWrapper {
        line-height: normal;
    }

    .customInputWrapper.disabled {
        opacity: .4;
    }

/* Hide the browser's default checkbox */
label.customInputWrapper input {
    position: absolute;
    opacity: 0;
    z-index: -1;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    width: 20px;
    height: 20px;
    background-color: var(--surface-color);
    border: 1px solid var(--tertiary-color-2);
    border-radius: 5px;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
}

    .checkmark.radio {
        border-radius: 50%;
    }

.largeFormWrapper .checkmark {
    width: 30px;
    height: 30px;
}

label.customInputWrapper:hover input ~ .checkmark {
    background-color: var(--tertiary-color-1);
}

label.customInputWrapper.facet-selected:hover .checkmark,
label.customInputWrapper.facet-selected .checkmark,
label.customInputWrapper:hover input:checked ~ .checkmark,
label.customInputWrapper input:checked ~ .checkmark {
    background-color: var(--main-color);
}

label.customInputWrapper .checkmark:after {
    content: '';
    color: var(--light-text-color);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    
}

label.customInputWrapper.facet-selected .checkmark:after,
label.customInputWrapper input:checked ~ .checkmark:after {
    content: url('/Themes/Cokesbury/Content/images/checkbox_checkmark_sm.svg');
    max-width: 14px;
}

.largeFormWrapper label.customInputWrapper.facet-selected .checkmark:after,
.largeFormWrapper label.customInputWrapper input:checked ~ .checkmark:after {
    content: url('/Themes/Cokesbury/Content/images/checkbox_checkmark_lg.svg');
    max-width: 22px;
}

.radioButton {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--surface-color);
    border: 1px solid var(--tertiary-color-2);
    border-radius: 50%;
    flex-shrink: 0;
    flex-grow: 0;
}

label.customInputWrapper:hover:not(.selectableRadioWrapper) input ~ .radioButton {
    background-color: var(--tertiary-color-1);
}
label.customInputWrapper.selectableRadioWrapper:hover input ~ .radioButton {
    border-color: var(--tertiary-color-3);
}

label.customInputWrapper .radioButton:after {
    content: '';
    color: transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.largeFormWrapper .radioButton,
.radioButton.large {
    width: 30px;
    height: 30px;
}

    .largeFormWrapper .radioButton:after,
    .radioButton.large:after {
        width: 30px;
        height: 30px;
    }


.selectableRadioWrapper {
    border: 1px solid var(--tertiary-color-2);
    border-radius: 5px;
    background: var(--surface-color);
    padding: 1rem;
}
    .selectableRadioWrapper:hover {
        border: 1px solid var(--tertiary-color-3);
    }
/* Show the circle when selected */
label.customInputWrapper .radioButton.checked:after,
label.customInputWrapper input:checked ~ .radioButton:after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--main-color);
}

.largeFormWrapper label.customInputWrapper .radioButton.checked:after,
.largeFormWrapper label.customInputWrapper input:checked ~ .radioButton:after,
label.customInputWrapper .radioButton.large.checked:after,
label.customInputWrapper input:checked ~ .radioButton.large:after {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--main-color);
}

span.checkboxLabelText {
    margin: 0;
    vertical-align: top;
}

.login-page,
.password-recovery-page {
    padding-top: 3rem;
}

.focusedLargeForm .fieldset,
.focusedLargeForm .page-title,
.focusedLargeForm .buttons,
.focusedLargeForm.address-edit-page {
    max-width: 600px;
    margin: 0 auto;
}

    /* the address add/edit pages host the two-column layout (MyAccount.css) -
       release the shared 600px measure there only; login/password-recovery
       keep it */
    .focusedLargeForm.address-edit-page,
    .focusedLargeForm.address-edit-page .fieldset,
    .focusedLargeForm.address-edit-page .page-title,
    .focusedLargeForm.address-edit-page .buttons {
        max-width: none;
    }

/* (redundant .password-recovery-page .fieldset !important measure removed - both
   recovery pages carry focusedLargeForm, whose shared 600px rule governs) */

.password-recovery-page .result {
    font-size: 1.6rem;
    line-height: 1.4;
    font-family: 'Open Sans', sans-serif;
}

.centeredStackedFormFields {
    text-align: center;
}

    .centeredStackedFormFields .inputs { /* registration form radio buttons */
        width: 40%;
        text-align: center;
        display: inline-block;
    }

    .centeredStackedFormFields .checkboxLabelText {
        display: block;
    }

    .centeredStackedFormFields label {
        margin: 0 0 1rem;
    }


.segmentedControl {
    border: 2px solid var(--main-color);
    border-radius: 5px;
    color: var(--main-color);
    cursor: pointer;
    font-size: 2rem;
    font-weight: bold;
    height: 60px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    margin: 2rem 0;
    transition: all 0.3s ease;
    display: flex;
    width: 536px;
}
    .segmentedControl:hover {
        color: var(--main-color-darken);
    }
    .segmentedControl > div {
        width: 50%;
        background: var(--surface-color);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .segmentedControl > div.firstButton {
        border-radius: 4px 0 0 4px;
    }
    .segmentedControl > div.secondButton {
        border-radius: 0 4px 4px 0;
    }
    .segmentedControl > div.active {
        background: var(--main-color);
        color:var(--light-text-color);
    }


.fullWidthStackedForm .inputs {
    width: 100%;
    margin: 2rem 0;
    /* the stock .inputs base centers inline content — stacked F1 labels sit left */
    text-align: left;
}
.fullWidthStackedForm label {
    margin-bottom: .3rem;
    /* inline-block, not block: the required asterisk sits BESIDE the label (style
       guide F1) and the 100%-width field still wraps to its own line below. The
       margin-right:0 undoes the global label margin (Cokesbury.css) that pushed
       the asterisk away from the label text. */
    display: inline-block;
    margin-right: 0;
}
/* radios/checkboxes stay their natural size — a 100%-wide native radio pushes its
   label off the row wherever one still renders (gender, radio/checkbox customer
   attributes) */
.fullWidthStackedForm input:not([type='radio']):not([type='checkbox']),
.fullWidthStackedForm select,
.fullWidthStackedForm textarea {
    width: 100%;
}

/* the required asterisk hugs the label (the global .required carries a -8px
   sibling-offset hack that misplaces it in stacked forms) */
.fullWidthStackedForm .required {
    margin: 0 3px 0 0;
}

.fullWidthStackedForm .multiInputLine select {
    width: auto;
}

/* login/register */

    .external-authentication .title {
        font-size: 1.6rem;
        color: var(--tertiary-color-3);
        font-style: italic;
        margin-top: 1rem;
    }

    /* the plugin's stylesheet sizes this at the PNG's natural 150x23 and loads after
       the theme head CSS - the extra specificity here wins; 1.3x keeps the logo ratio */
    .external-authentication .facebook-btn {
        width: 195px;
        height: 30px;
        background-size: 100% 100%;
    }

.login-page .new-wrapper > .buttons {
    margin: 3rem 0 6rem 0;
}

/* required asterisk hugs the label (style guide F1): undo the global label
   margin-right, the fixed 110px label width (the asterisk sits at the box edge,
   not the text), and the .required -8px sibling-offset hack for the login form */
.login-page .returning-wrapper label {
    margin-right: 0;
    width: auto;
}

.login-page .returning-wrapper .required {
    margin: 0 3px 0 0;
}

/* same F1 treatment for the create-account form; the :not keeps the checkbox/radio
   wrapper labels (account type, newsletter) at their global gap */
.registration-page .inputs > label:not(.customInputWrapper) {
    margin-right: 0;
}

.registration-page .required {
    margin: 0 3px 0 0;
}

/* and the password recovery / reset forms, and the multi-factor verification form
   (it reuses .login-page but sits outside .returning-wrapper) */
.password-recovery-page .inputs > label,
.provider-verification .inputs > label {
    margin-right: 0;
}

.password-recovery-page .required,
.provider-verification .required {
    margin: 0 3px 0 0;
}

    /* asterisk sits between the label and the help icon - give the icon its own gap */
    .registration-page .required + .helpIcon {
        margin-left: .6rem;
    }

/* email-wishlist form: F1 — left-aligned stacked labels (the stock .inputs base
   in styles.css centers inline content, which shoved the label/asterisk pair
   into the middle of the column), asterisk hugging the label */
.email-a-friend-page .inputs {
    text-align: left;
}

.email-a-friend-page .inputs > label {
    margin-right: 0;
}

.email-a-friend-page .inputs .required {
    margin: 0 3px 0 0;
}

/* …and the My Account forms (Phase 2f): Info / Change Password / gift card
   balance keep their side-label desktop layout, but the required asterisk
   moves out of its old after-the-input position (where it wrapped under the
   field once the inputs stack on phones) to hug the label, F1-style */
.account-page .inputs > label:first-of-type {
    margin-right: 0;
}

.account-page .inputs .required {
    margin: 0 3px 0 0;
}

/* product page "enter your price" (variable gift cards, donations): F1 — the label was
   display:block, which dropped the required asterisk onto its own line; inline-block
   keeps the asterisk beside the label while the block-level input still wraps below
   (the gift card fields above it get the same treatment from fullWidthStackedForm) */
.customer-entered-price .price-input label {
    display: inline-block;
    margin-right: 0;
}

.customer-entered-price .price-input .required {
    margin: 0 3px 0 0;
}

    /* (dead .loginBtn--facebook rules removed - the live control is the plugin's
       .facebook-btn anchor, sized above) */


/*#region NOTIFICATIONS & POPUPS ******************************************************************************************************************************************************************************/

.bar-notification-container {
    width: 800px;
    left: 50%;
    transform: translateX(-50%);
    top: 5%;
    border: 1px solid var(--tertiary-color-2);
    border-radius: 5px;
    position: fixed;
    z-index: 16777262;
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
    background-color: var(--surface-color);
    visibility: hidden;
    opacity: 0;
    padding: 4rem;
    text-align: center;
    max-width: 60vw;
}

    .bar-notification-container.success,
    .bar-notification-container.error,
    .bar-notification-container.warning {
        top: 10%;
        visibility: visible;
        opacity: 1;
    }

    .bar-notification-container .successMessage,
    .bar-notification-container .warningMessage,
    .bar-notification-container .errorMessage {
        display: none;
    }

    .bar-notification-container.success .successMessage {
        color: var(--success-green-color);
        display: block;
    }

    .bar-notification-container.warning .warningMessage {
        color: var(--warning-yellow-color);
        display: block;
    }

    .bar-notification-container.error .errorMessage {
        color: var(--error-red-color);
        display: block;
    }

    .bar-notification-container .icon {
        display: block;
        width: 8rem;
        height: 8rem;
        max-width: 8rem;
        max-height: 8rem;
        margin: 0 auto 1rem;
        border: 2px solid;
        border-radius: 50%;
    }

    .bar-notification-container.success .icon {
        border-color: var(--success-green-color);
        color: var(--success-green-color); /* svg strokes/fills use currentColor */
        padding: 1.4rem;
    }

    .bar-notification-container.warning .icon {
        border-color: var(--warning-yellow-color);
        color: var(--warning-yellow-color);
        padding: 1.2rem;
    }

    .bar-notification-container.error .icon {
        border-color: var(--error-red-color);
        color: var(--error-red-color);
        padding: 2rem;
    }

    .bar-notification-container.success .icon svg {
        padding-top: .7rem;
    }


    .bar-notification-container .content {
        margin: 0 0 2rem;
        padding: 1rem 0 0;
        color: var(--tertiary-color-3);
        font-size: 2rem;
    }

    .bar-notification-container .close {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        margin: 7px;
        background: url('/Themes/Cokesbury/Content/images/search_dropdown_close_x.svg');
        opacity: 0.3;
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: 50% 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        /* .close is a real <button> for keyboard access; undo atoms' bare-button skin */
        border: 0;
        border-radius: 0;
        padding: 0;
        font-size: 0;
    }

        .bar-notification-container .close:hover {
            opacity: 0.8;
            transition: all 0.3s ease;
            box-shadow: none;
            background-color: transparent;
        }

    .bar-notification-container .button {
        font-size: 1.8rem;
        padding: 1rem 2rem;
        width: auto;
        min-width: unset;
        margin: 0 1rem;
    }

.notificationOverlay {
    display: none;
    transition: all 0.3s ease;
}

    .notificationOverlay.active {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        z-index: 16777259;
        background: #000;
        opacity: .2;
        width: 100%;
        height: 100%;
        display: block;
    }

/* Inline message cards (persistent page copy or server-side error blocks rather than
   action results - the notification card handles those); the circled exclamation
   mirrors the card's warning icon. .message-warning is a card by default (the class
   had no other styling); .message-error is a site-wide legacy class (plain centered
   red text), so error blocks opt in by adding .messageCard beside it. */
.message-warning,
.message-error.messageCard {
    overflow: hidden; /* contain the floated icon */
    margin: 1.5rem 0;
    padding: 1.2rem 1.5rem;
    border: 1px solid currentColor;
    border-radius: var(--element-border-radius);
    color: var(--warning-yellow-color);
}

.message-error.messageCard {
    color: var(--error-red-color);
    /* undo the legacy .message-error text treatment */
    text-align: left;
    font-size: 1.6rem;
}

    /* MVC renders the validation-summary div even when there is nothing to say -
       no bordered box around nothing */
    .message-error.messageCard.validation-summary-valid {
        display: none;
    }

    .message-error.messageCard ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .message-warning::before,
    .message-error.messageCard::before {
        content: "!";
        float: left;
        width: 2.4rem;
        height: 2.4rem;
        margin-right: 1.2rem;
        border: 2px solid currentColor;
        border-radius: 50%;
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 2rem; /* icon height minus the 2px borders */
        text-align: center;
    }

/* success sibling of the cards above (server-rendered action results that redisplay
   the page, e.g. the contact form's sent confirmation); circled check mirrors the
   warning/error icons. Like .message-error, pages opt in by adding .messageCard. */
.message-success.messageCard {
    overflow: hidden;
    margin: 1.5rem 0;
    padding: 1.2rem 1.5rem;
    border: 1px solid currentColor;
    border-radius: var(--element-border-radius);
    color: var(--success-green-color);
    text-align: left;
    font-size: 1.6rem;
}

    .message-success.messageCard::before {
        content: "\2713";
        float: left;
        width: 2.4rem;
        height: 2.4rem;
        margin-right: 1.2rem;
        border: 2px solid currentColor;
        border-radius: 50%;
        font-size: 1.7rem;
        font-weight: 700;
        line-height: 2rem;
        text-align: center;
    }

/* the cancel-shipment control (renewals _RenewalDetails + supply autoship edit) */
#js-link-autoship-cancel {
    margin: 1rem 0;
}

/* Saved-card expired state + inline edit controls (TsysCreditCard PaymentInfo
   component). Global because the component renders on checkout, autoship edit,
   renewals, and subscription management; .js-expired-cc is the class the account
   pages' scripts emit for the same state. */
.cc-expired,
.js-expired-cc {
    color: var(--error-red-color);
    font-weight: bold;
    font-style: normal;
}

#js-cc-edit-buttons {
    text-align: right;
    margin-top: 1rem;
}

    #js-cc-edit-buttons button {
        margin-left: 1rem;
    }

/* Field-scoped validation messages hug their field, so they read left-aligned like the
   field's own label (span. prefix outranks styles.css's centered legacy rule). */
span.field-validation-error {
    text-align: left;
}

/* Two form groups sharing one line (payment forms' Expiration + CVV). Global for the
   same reason as above — checkout doesn't load MyAccount.css, where this used to live;
   .fullWidthStackedForm .multiInputLine select (width:auto) releases the stacked-form
   100% width so the selects stay compact. */
.multiInputLine {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

    .multiInputLine .ExpirationYears {
        width: 100%;
    }

        /* wide enough for the MM / YYYY placeholders beside the chevron */
        .multiInputLine .ExpirationYears select {
            min-width: 10rem;
        }

        .multiInputLine .ExpirationYears select#ExpirationYear {
            min-width: 11rem;
        }

        .multiInputLine .ExpirationYears > div {
            display: flex;
            max-width: 50rem;
        }

            .multiInputLine .ExpirationYears > div > span {
                margin-right: 2rem;
            }

    .multiInputLine .securityCode {
        margin-left: auto;
        width: auto;
        min-width: 25%;
    }

/* #region Sticky totals rails ************************************************************************************************************************/

/* One sticky system for every desktop side rail: the shipment-edit pages
   (calendars / supply subscriptions / curriculum / bulletins share the
   #orderTotalsForm flex child via managesubs-page), the one-page checkout
   (same id), the cart, the supply autoship edit page, the pay-your-bill account
   panel (.rightSideFlexContainer) and the statements account-summary panel
   (.divStatementsAccountSummaryWrapper). Everything about it lives HERE - do
   not re-add per-page copies:
   - top offset clears the fixed header via --fixed-header-height, which
     public.common.js measures on load/resize (admin bar and breakpoints vary it);
     matches the legacy myAccount.js mobile-pinning convention of header + gap.
   - align-self releases the flex stretch (a stretched item has no room to stick).
   - NO transition on top: transitioning top on a position:sticky element breaks
     Chrome's sticky offset resolution (the used value freezes at the interpolation
     start and the rail never leaves normal flow).
   - The legacy DESKTOP scroll-pinners in cart.js and public.onepagecheckout.js are
     retired (their per-scroll offset() math fought this); MOBILE pinning there and
     in myAccount.js is untouched, and the phone tier unsticks these rails in
     mediaqueries.css (767 block). */
.managesubs-page #orderTotalsForm,
.html-checkout-page #orderTotalsForm,
.html-shopping-cart-page .divShoppingCartWrapper > .CartStickyRight,
.update-automatic-shipment .divCheckOutPageWrapper > .CartStickyRight,
.payYourBillWrapper > .rightSideFlexContainer,
.divStatementsWrapper > .divStatementsAccountSummaryWrapper {
    position: sticky;
    top: calc(var(--fixed-header-height, 0px) + 1rem);
    align-self: flex-start;
}

/* the header hides on scroll-down (.nav-up, Header.css top:-185px) - the rails
   ride up with it; same pattern as the mobile pinned bar in mediaqueries.css */
:root:has(.divHeaderWrapper.nav-up) .managesubs-page #orderTotalsForm,
html.html-checkout-page:has(.divHeaderWrapper.nav-up) #orderTotalsForm,
html.html-shopping-cart-page:has(.divHeaderWrapper.nav-up) .divShoppingCartWrapper > .CartStickyRight,
:root:has(.divHeaderWrapper.nav-up) .update-automatic-shipment .divCheckOutPageWrapper > .CartStickyRight,
:root:has(.divHeaderWrapper.nav-up) .payYourBillWrapper > .rightSideFlexContainer,
:root:has(.divHeaderWrapper.nav-up) .divStatementsWrapper > .divStatementsAccountSummaryWrapper {
    top: 1rem;
}

/* BaseStructure's overflow-x:hidden on #main promotes overflow-y to auto, making
   #main a non-scrolling scroll container that sticky can never engage against -
   release the clip only where the rails live */
.master-wrapper-content:has(.managesubs-page),
.master-wrapper-content:has(.update-automatic-shipment),
.master-wrapper-content:has(.payYourBillWrapper),
.master-wrapper-content:has(.divStatementsWrapper),
.html-checkout-page .master-wrapper-content,
.html-shopping-cart-page .master-wrapper-content {
    overflow-x: visible;
}

/* #endregion */

/* save-for-future checkbox line (payment forms): the sentence is a flex item -
   release min-content sizing so it wraps at the column edge instead of overflowing */
.SaveForFutureCardWrapper {
    max-width: 100%;
}

    .SaveForFutureCardWrapper .p2 {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
    }


/* #region Help Icon **********************************************************************************************************************************************************************************/

.helpIcon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('/Themes/Cokesbury/Content/images/helpIcon.svg') center center var(--main-color) no-repeat;
    background-size: 10px 10px;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
}

/* #endregion Help Icon *******************************************************************************************************************************************************************************/
/* #region jQuery Modal ******************************************************************************************************************************************************************************/

.ui-dialog .divButtonWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.ui-dialog .button-1,
.ui-dialog .button-2 {
    /* uniform floor, but a long label (e.g. "Update Automatic Shipment
       Information") widens its button instead of clipping */
    width: auto;
    min-width: 240px;
    max-width: 100%;
}

.ui-widget-overlay {
    background: #000;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    z-index: 102;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
}

    .ui-widget-overlay.ui-front {
        opacity: .5;
        visibility: visible;
        width: 100%;
        height: 100%;
        transition: visibility 0s, height 0s, width 0s, opacity 0.5s linear;
    }


.divMainVideo iframe {
    width: 50vw;
    height: calc(50vw * .5625);
}

.ui-dialog .ui-dialog-content {
    padding: 4rem 4rem 3rem;
}

    .ui-dialog .ui-dialog-content.seeInsideModal {
        padding: 4rem;
    }

.ui-widget-content.ProductDetailVideoPopup {
    color: var(--dark-text-color);
    z-index: 103;
    background: var(--surface-color);
    border: none;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    outline: none;
    box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.3);
}

.ui-dialog {
    max-width: 780px;
    border: 1px solid var(--tertiary-color-2);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    background-color: var(--surface-color);
    border-radius: 5px;
    padding: 0;
    font: normal 14px Arial, Helvetica, sans-serif;
}

.ui-dialog-titlebar {
    background-color: var(--tertiary-color-2) !important;
    border: none; /* keep jQuery UI's .ui-widget-header 1px #ddd border off the top/sides */
    border-bottom: 1px solid var(--tertiary-color-2) !important;
    border-radius: 5px 5px 0 0;
    padding: 10px 60px 10px 12px !important;
    position: relative !important;
    font-size: 0; /* suppress stray whitespace; .ui-dialog-title sets its own size */
}

.ui-dialog-title {
    color: var(--dark-text-color) !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    display: block;
}

.ui-dialog-titlebar-close {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    opacity: 0.6;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1;
    min-width: 0;
    font-size: 0;
}

.ui-dialog-titlebar-close:hover {
    opacity: 1;
    background: rgba(0,0,0,0.08) !important;
}

.ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog-titlebar-close .ui-icon {
    position: relative;
    top: 10px;
    left: 10px;
}

.ui-dialog-titlebar-close:hover .ui-button-icon,
.ui-dialog-titlebar-close:hover .ui-icon {
    top: 10px;
    left: 10px;
}

.ui-button .ui-icon.ui-icon-closethick {
    background: url('/Themes/Cokesbury/Content/images/search_dropdown_close_x.svg') no-repeat center;
    background-position: 0 0;
    display: block;
    width: 24px;
    height: 24px;
}

    .ui-button .ui-icon.ui-icon-closethick:hover {
        background: url('/Themes/Cokesbury/Content/images/search_dropdown_close_x_hover.svg') no-repeat center;
        background-position: 0 0;
        display: block;
        width: 24px;
        height: 24px;
    }

.ui-dialog-content {
    line-height: 20px;
    background-color: var(--surface-color) !important;
    padding: 15px 15px 20px 15px !important;
    color: var(--gray-color);
    min-height: 200px;
}

.ui-dialog-content .page {
    min-height: 0;
}

.ui-dialog-content .page-title {
    min-height: 0;
    margin: 0 0 15px;
    padding: 0px 10px 10px 10px;
    text-align: center;
}

.ui-dialog-content .page-title h1 {
    font-size: 24px;
    line-height: 30px;
}

.ui-dialog-content .back-in-stock-subscription-page {
    text-align: center;
}

/* dialog button pane — strip jQuery UI widget chrome so our button classes show through */
.ui-dialog .ui-dialog-buttonpane {
    background: transparent;
    border-top: 1px solid var(--tertiary-color-2);
    padding: 12px 16px;
    margin: 0;
    text-align: right;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ui-dialog .ui-dialog-buttonpane button.button-1,
.ui-dialog .ui-dialog-buttonpane button.button-2 {
    /* strip jQuery UI button widget styles */
    all: unset;
    display: inline-block;
    cursor: pointer;
    /* shared button base */
    padding: 1rem 2.5rem;
    font-size: 1.6rem;
    font-weight: 600;
    border-radius: var(--element-border-radius, 0);
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
}

.ui-dialog .ui-dialog-buttonpane button.button-1 {
    background: var(--main-action-color);
    border: 2px solid var(--main-action-color);
    color: var(--dark-text-color);   /* dark on gold: 7.06:1 */
}

.ui-dialog .ui-dialog-buttonpane button.button-1:hover,
.ui-dialog .ui-dialog-buttonpane button.button-1:focus {
    background: var(--main-action-color-darker);
    border-color: var(--main-action-color-darker);
    color: var(--dark-text-color);
}

.ui-dialog .ui-dialog-buttonpane button.button-2 {
    background: transparent;
    border: 2px solid var(--tertiary-color-3);
    color: var(--dark-text-color);
}

.ui-dialog .ui-dialog-buttonpane button.button-2:hover,
.ui-dialog .ui-dialog-buttonpane button.button-2:focus {
    background: var(--tertiary-color-1);
    border-color: var(--tertiary-color-3);
    color: var(--dark-text-color);
}


/* #region product detail video strip Modal ******************************************************************************************************************************************************************************/

.divVideoStrip {
    display: inline-block;
    padding: 0 1rem;
    font-size: 1.4rem;
    max-width: 180px;
    vertical-align: top;
    max-height: calc(50vw * .5625);
    overflow-y: auto;
}

.divVideoStripThumbnail {
    padding-bottom: 1rem;
    position: relative;
}

    .divVideoStripThumbnail img {
        border: 1px solid var(--tertiary-color-1);
        box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.3);
    }

        .divVideoStripThumbnail img:hover {
            border: 1px solid var(--tertiary-color-2);
            box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.5);
        }

.divMainVideo {
    display: inline-block;
}


/* browser reject modal */
.Reject.bar-notification {
    max-width: 80rem !important;
}

    .Reject.bar-notification .close > a {
        text-decoration: none;
        width: 4rem;
        height: 4rem;
        display: block;
    }

    .Reject.bar-notification ul {
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

        .Reject.bar-notification ul li {
            padding: 0 2rem;
        }

            .Reject.bar-notification ul li a {
                font-size: 1.6rem;
                white-space: nowrap;
            }

    .Reject.bar-notification .jr_icon {
        display: block;
        width: 100px;
        height: 100px;
        background-size: contain;
        margin: 0 auto;
    }

    .Reject.bar-notification #jr_firefox .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/firefox.png");
    }

    .Reject.bar-notification #jr_msedge .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/edge.png");
    }

    .Reject.bar-notification #jr_chrome .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/chrome.png");
    }

    .Reject.bar-notification #jr_safari .jr_icon {
        background-image: url("/Themes/Cokesbury/Content/images/browserIcons/safari.png");
    }


/* 767px jQuery UI dialog tweaks centralized in mediaqueries.css */
/* #region minicart floating cart + jiggle ******************************************************************************************************************************************************/

div.floating-cart {
    box-sizing: border-box;
    position: absolute;
    opacity: .9;
}

    div.floating-cart img {
        max-width: 100%;
        max-height: 100%;
    }

    div.floating-cart.moveToCart {
        width: 30px !important;
        height: 45px !important;
        transition: all 800ms ease-in-out;
        z-index: 1111;
        opacity: .6;
    }

body.MakeFloatingCart div.floating-cart.moveToCart {
    width: 20px !important;
    height: 30px !important;
    box-shadow: 0px 5px 31px -1px rgba(0, 0, 0, 0);
    transition: all 200ms ease-out;
    opacity: 0;
}

#topcartlink.jiggle {
    animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
    transform: rotate(0deg);
    backface-visibility: hidden;
    perspective: 1000px;
    animation-iteration-count: 1;
}

@keyframes shake { /* used on minicart */
    10% {
        transform: translate3d(2px, 0, 0) rotate(7deg);
    }

    30% {
        transform: translate3d(-1px, 0, 0) rotate(-4deg);
    }

    40%, 60% {
        transform: translate3d(0, 0, 0) rotate(-2deg);
    }

    50%, 80% {
        transform: translate3d(0, 0, 0) rotate(1deg);
    }
}