/* doe-behaviour.css — the reference's own CSS carries the page; this file pins only the states the
   removed Shopify/app JS would have set, the text wordmark in the reference header's type, and the
   visible HELD markers. No palette, no fonts, no chassis. */
.doe-wordmark { display: inline-block; font-family: "Perfectly Nineties", "Hanken Grotesk", serif; font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; color: #25425d; text-transform: lowercase; }
.footer__intro .doe-wordmark { font-size: 2rem; }
.doe-held { color: #9a3b1a; background: #fdece4; border-radius: 4px; padding: 0 .35em; font-family: ui-monospace, Menlo, monospace; font-size: .85em; }
.product-subscriptions__option--pack-1 .product-subscriptions__badge,
.product-subscriptions__option--pack-2 .product-subscriptions__badge,
.product-subscriptions__option--pack-3 .product-subscriptions__badge { display: inline-block; }
.card-collapsible__title img { width: 4rem; height: 4rem; object-fit: contain; }
.quote__media img { border-radius: 50%; }
.comparison__row-col .doe-held { display: inline-block; }
.faqs__avatar img { object-fit: cover; }
.product-bar__image img { object-fit: contain; }
.header__search.doe-hidden { display: none !important; }
/* the client's header: the reference theme also styles .announcement-bar (height/min-height), so pin the client's bar
   to its own contract (absolute strip along the top of the header); the header itself goes sticky so it occupies its
   own height in the flow (the client theme pads <body> for its fixed header; our body is the reference's) */
.doe-chrome .announcement-bar { position: absolute !important; top: 0 !important; left: 0; right: 0; bottom: auto !important; height: auto !important; min-height: 0 !important; padding: 10px 0 !important; z-index: 1000; display: block !important; }
.doe-chrome .announcement-bar .page-width { max-width: none; padding: 0; }
.doe-chrome .b-header { position: sticky !important; top: 0; z-index: 1002; }
.doe-chrome .b-header .hamburger .bar1, .doe-chrome .b-header .hamburger .bar2, .doe-chrome .b-header .hamburger .bar3 { min-width: 2.2rem; }
/* five ingredient cards on the donor's 3-column grid: a 6-track grid so the last row of two sits centred */
@media screen and (min-width: 990px) {
  .collapsible-cards__grid { grid-template-columns: repeat(6, 1fr) !important; }
  .collapsible-cards__grid > .card-collapsible { grid-column: span 2; }
  .collapsible-cards__grid > .card-collapsible:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
}
.doe-chrome { font-family: "sofia-pro", "Hanken Grotesk", sans-serif; }

/* the client's off-canvas mobile nav sits at left:100% when closed: hide it from focus and hit-testing until the hamburger opens it */
@media (max-width: 1023px) {
  .doe-chrome .c-nav:not(.in-view) { visibility: hidden; }
  .doe-chrome .c-nav.in-view { visibility: visible; }
}

/* the client's header reserves a fixed 3rem for its promo strip (hasPromo); the strip wraps to two or three lines here,
   so every hasPromo offset reads the strip's measured height from --promo-h (set by doe-behaviour.js) instead */
.doe-chrome header.b-header.hasPromo { padding-top: calc(1.7rem + var(--promo-h, 3rem)); }
.doe-chrome header.b-header.hasPromo .logo { top: calc(2.8rem + var(--promo-h, 3rem)); }
.doe-chrome header.b-header.hasPromo.stuck .logo { top: calc(2.4rem + var(--promo-h, 3rem)); }
.doe-chrome header.b-header.hasPromo .in-view, .doe-chrome header.b-header.hasPromo .c-nav { top: calc(5.9rem + var(--promo-h, 3rem)); }
.doe-chrome header.b-header.hasPromo .c-search { top: var(--promo-h, 3rem); }
@media (min-width: 1024px) {
  .doe-chrome header.b-header.hasPromo { padding-top: calc(3.3rem + var(--promo-h, 3rem)); }
  .doe-chrome header.b-header.hasPromo.stuck { padding-top: calc(1.5rem + var(--promo-h, 3rem)); }
  .doe-chrome header.b-header.hasPromo .logo { top: calc(4.2rem + var(--promo-h, 3rem)); }
  .doe-chrome header.b-header.hasPromo.stuck .logo { top: calc(2.7rem + var(--promo-h, 3rem)); }
  .doe-chrome header.b-header.hasPromo .c-nav .submenu { top: calc(8rem + var(--promo-h, 3rem)); }
  .doe-chrome header.b-header.hasPromo.stuck .c-nav .submenu { top: calc(5.8rem + var(--promo-h, 3rem)); }
}
/* the reference theme's base.css hides every empty div (div:empty{display:none}); the client's hamburger bars are empty divs */
.doe-chrome .b-header .hamburger div:empty { display: block; }
/* the reference theme underlines anchors; the client's account icon is an icon-only anchor */
.doe-chrome .b-header .account-controls a { text-decoration: none; }
.doe-chrome .c-newsletter__note { margin: .6rem 0 0; font-size: 1.3rem; color: #9a3b1a; }
.doe-chrome .contact-form.is-sent .c-newsletter__input-wrapper { opacity: .5; }
/* the reference colours its selector badges by option modifier (--monthly blue, --quarterly pink); ours are --pack-1/2/3 */
.product-subscriptions__option--pack-1 .product-subscriptions__badge,
.product-subscriptions__option--pack-2 .product-subscriptions__badge { background-color: rgb(var(--color-brand-blue-300)); }
.product-subscriptions__option--pack-3 .product-subscriptions__badge { background-color: rgb(var(--color-brand-pink-300)); }
/* the client's desktop nav at 18px overruns its 87% track at 1280px and the last item lands under the account icons */
@media (min-width: 1024px) and (max-width: 1439px) {
  .doe-chrome .c-nav .nav-links .links-item > a, .doe-chrome .c-nav .nav-links .links-item > span { font-size: 1.6rem; }
  .doe-chrome .c-nav { width: calc(100% - 30rem); }
}
/* round-3: reference header carries the client's SVG wordmark; the support aside carries it too */
.header__heading-logo.doe-logo-svg { width: 104px; height: 40px; display: block; }
.faqs__avatar-logo { width: 72px; height: 28px; display: block; }
/* round-3 ruling 3: the timeline list reserved 204px under the last step for the sticky image; the icon row now follows the last step */
@media screen and (min-width: 750px) { .timeline__list { padding-bottom: 1.6rem !important; } }
/* round-3 ruling 2: the reference's Customer reviews list, static (its widget CSS lived on an app host) */
.doe-reviews__summary { text-align: center; margin: 0 0 3.2rem; }
.doe-reviews__summary .doe-stars { display: inline-flex; gap: .3rem; vertical-align: middle; margin-right: .8rem; }
.doe-reviews__avg { font-size: 1.4rem; color: #25425d; vertical-align: middle; }
.doe-reviews__rec { font-size: 1.3rem; color: #25425d; margin: .8rem 0 0; }
.doe-star { width: 1.8rem; height: 1.8rem; } .doe-star.is-on { fill: #4fb3a3; } .doe-star.is-off { fill: #d9e2e6; }
.doe-reviews { max-width: 96rem; margin: 0 auto; border-top: 1px solid #e3e8eb; }
.doe-review { display: grid; grid-template-columns: 22rem 1fr; gap: 2.4rem; padding: 2.4rem 0; border-bottom: 1px solid #e3e8eb; }
.doe-review__side { display: grid; grid-template-columns: 4.4rem 1fr; column-gap: 1.2rem; align-content: start; }
.doe-review__avatar { width: 4.4rem; height: 4.4rem; border-radius: 50%; background: #e8f4f2; color: #25425d; font-weight: 600; font-size: 1.4rem; display: inline-flex; align-items: center; justify-content: center; grid-row: span 2; }
.doe-review__name { font-size: 1.4rem; color: #25425d; align-self: center; }
.doe-review__rec { grid-column: 2; font-size: 1.2rem; color: #25425d; margin-top: .4rem; }
.doe-review__top { display: flex; align-items: center; gap: 1.2rem; margin-bottom: .8rem; }
.doe-review__top .doe-stars { display: inline-flex; gap: .2rem; }
.doe-review__date { font-size: 1.2rem; color: #6b7b88; }
.doe-review__title { font-weight: 600; font-size: 1.5rem; color: #25425d; margin-bottom: .4rem; }
.doe-review__body { font-size: 1.4rem; line-height: 1.6; color: #25425d; margin: 0; }
@media screen and (max-width: 749px) { .doe-review { grid-template-columns: 1fr; gap: 1.2rem; } }
/* round-5 ruling 1: thinner mobile header, thinner wordmark */
@media screen and (max-width: 749px) {
  header.header, .header { padding-top: 2px !important; padding-bottom: 2px !important; }
  .header__heading-logo.doe-logo-svg { width: 74px; height: 28px; }
  .header__icon, .header__heading-link { padding-top: .4rem; padding-bottom: .4rem; }
}

/* round-6 ruling 1: no scrollbars anywhere on our pages (standing rule) */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
.swiper-scrollbar, .product__thumbs .swiper-scrollbar { display: none !important; }
/* round-6 ruling 2: the wordmark sits centred in the Manufacturing column */
.comparison__logo.doe-logo-svg { margin: 0 auto; display: block; width: 104px; height: 40px; }
/* round-6 ruling 2, second pass: the reference's brand cell is 68px wide on desktop; the wordmark fits the cell and centres in it */
.comparison__logo.doe-logo-svg { width: 100%; max-width: 68px; height: auto; margin: 0 auto; display: block; }
/* round-7: gallery arrows in the reference's own button style (white circle, thin grey ring, navy chevron) */
media-gallery .doe-gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: flex !important; visibility: visible !important; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid #e9ecef; color: #25425d; cursor: pointer; padding: 0; box-shadow: 0 2px 8px rgba(37,66,93,.12); transition: opacity .2s; }
media-gallery .doe-gal-arrow--prev { left: 12px; }
media-gallery .doe-gal-arrow--next { right: 12px; }
media-gallery .doe-gal-arrow.is-disabled { opacity: .35; pointer-events: none; }
@media screen and (max-width: 749px) { media-gallery .doe-gal-arrow { width: 36px; height: 36px; } media-gallery .doe-gal-arrow--prev { left: 8px; } media-gallery .doe-gal-arrow--next { right: 8px; } }

/* round-9 (Kalp 2026-09-18): the community testimonial cards SWIPE on mobile with arrows
   instead of stacking three-high — a deliberate departure from the reference, which stacks. */
#community .doe-cc-nav { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
#community .doe-cc-arrow { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid #e9ecef; color: #25425d; cursor: pointer; padding: 0; box-shadow: 0 2px 8px rgba(37,66,93,.12); transition: opacity .2s; }
#community .doe-cc-arrow.is-disabled { opacity: .35; pointer-events: none; }
#community .doe-cc-dots { display: flex; align-items: center; gap: 7px; }
#community .doe-cc-dot { width: 7px; height: 7px; border-radius: 50%; background: #25425d; opacity: .25; border: none; padding: 0; cursor: pointer; }
#community .doe-cc-dot.is-active { opacity: 1; }
/* the theme's own grid--1-col-tablet-down stacks to 989px, so the carousel must reach 989px too —
   at 749px it left a 750-989px band showing three stacked cards (Kalp saw exactly that band). */
@media screen and (max-width: 989px) {
  /* justify-content:flex-start is load-bearing: the theme centres this grid, and a CENTRED flex
     row that overflows spills equally to BOTH sides — the left spill sits before the scroll origin
     and scrollLeft can never reach it. Measured 2026-09-18 at 375px: card 1 at offsetLeft -308,
     scrollWidth 683 against 993px of content, so card 1 was unreachable (Kalp hit exactly that).
     The 7% inline padding is the other half: with scroll-snap-align:center under 'x mandatory',
     the first and last cards can only come to rest if there is room to centre them. */
  #community .multicolumn-list { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 12px; margin: 0;
    padding-inline: 7%; scroll-padding-inline: 7%; }
  #community .multicolumn-list__item { flex: 0 0 86%; max-width: 86%; scroll-snap-align: center; }
  #community .doe-cc-nav { display: flex; }
}

/* round-10 (Kalp 2026-09-18): the before/after comparison slider, cloned from the
   What-it-Targets slider on doebeauty.com/pages/brightening-deodorant. Two stacked
   object-fit:cover frames clipped against each other, a draggable handle at the seam.
   Geometry read off the donor: 5px divider bar and a 60px circle, both rgb(145,184,202),
   two 20px white arrows, cursor ew-resize. It replaces the stylized product shot that
   used to sit above the four how-it-works steps. */
.doe-compare-slot { display: block; position: static; width: 100%; height: auto; aspect-ratio: auto; overflow: visible; background: none; }
.doe-compare { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.doe-compare__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.doe-compare__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doe-compare__frame--after  { clip-path: inset(0 calc(100% - var(--doe-cmp, 50%)) 0 0); }
.doe-compare__frame--before { clip-path: inset(0 0 0 var(--doe-cmp, 50%)); }
/* the handle is moved by TRANSFORM, not by left: it keeps the drag on the compositor, and it is
   the only property a DOM-signature checker can see change — with left/clip-path alone the
   interactive gate reads the whole slider as a dead control (measured 2026-09-18). */
.doe-compare__handle { position: absolute; top: 0; bottom: 0; left: 0; width: 60px; transform: translateX(calc(var(--doe-cmp-px, 50%) - 30px)); background: none; border: none; padding: 0; cursor: ew-resize; z-index: 2; display: flex; align-items: center; justify-content: center; }
.doe-compare__bar { position: absolute; top: 0; bottom: 0; left: 50%; width: 5px; transform: translateX(-2.5px); background: rgb(145, 184, 202); }
.doe-compare__knob { position: relative; width: 60px; height: 60px; border-radius: 100%; background: rgb(145, 184, 202); display: flex; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 2px 10px rgba(37,66,93,.18); }
.doe-compare__knob svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.doe-compare__handle:focus-visible .doe-compare__knob { outline: 2px solid #25425d; outline-offset: 3px; }
.doe-compare__label { position: absolute; bottom: 14px; z-index: 1; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #25425d; background: rgba(255,255,255,.88); border-radius: 100px; padding: 5px 12px; pointer-events: none; }
.doe-compare__label--after { left: 14px; }
.doe-compare__label--before { right: 14px; }
@media screen and (max-width: 749px) {
  .doe-compare { max-width: none; }
  .doe-compare__knob { width: 48px; height: 48px; }
  .doe-compare__knob svg { width: 16px; height: 16px; }
  .doe-compare__label { font-size: 11px; bottom: 10px; padding: 4px 10px; }
}