/* Apex Cosmetics storefront (round 13): the approved preview design (Preview/assets/preview-site.css + preview-home.css)
   for the real app's storefront shell and home page. Loaded globally after app.css and the scoped-CSS bundle, but every
   rule is scoped to the storefront's own classes (.cs-header, .cs-footer, .cs-home, .cs-shell, .cs-banner, and since
   round 14 .cs-page for the storefront page bodies: shop, product, FAQ, policy pages; round 17 .cs-auth for the sign-in
   pages in Templates/Layouts/AuthLayout.razor), so the management area and the account page bodies are not restyled by
   this file.
   Tokens: navy #0b1f3a, cobalt #1f55d6, white cards and header, ice blue #f2f7fc page, pale blue #e4effb bands (round 31; was warm ivory #faf9f6 / sand #f2f1ec); serif headings as in the preview (system fonts only). */

.cs-header, .cs-footer, .cs-home, .cs-shell, .cs-page, .cs-auth {
    --cs-ice: #f2f7fc;      /* round 31: page / section background (was warm ivory #faf9f6) */
    --cs-soft: #e4effb;     /* round 31: pale-blue bands, notes and banners (was sand #f2f1ec) */
    --cs-white: #ffffff;
    --cs-navy: #0b1f3a;
    --cs-panel: #0a1a33;
    --cs-ink: #16213a;
    --cs-muted: #5d6b82;
    --cs-line: #dce5f0;     /* round 31: cool hairline (was warm #e4e2db) */
    --cs-tint: #eef2f8;
    --cs-cobalt: #1f55d6;
    --cs-cobalt-dark: #1743b0;
    --cs-wordmark: #1f4fd0;
    --cs-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --cs-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
}

/* Responsive photos (round 18, ProductPhoto.razor / ProductPhotoSources): the <picture> wrapper generates no box, so the <img>
   lays out as if it were the parent's own child (flex/grid item, height: 100%). Descendant selectors (".x img") still
   match; a child selector (".x > img") does not, so images styled that way stay plain <img> elements. */
.apx-picture { display: contents; }

/* app.css sets `* { font-family: Inter }`, so the storefront font has to be set on every element it owns. */
.cs-header, .cs-header *, .cs-footer, .cs-footer *, .cs-home, .cs-home * { font-family: var(--cs-sans); }
.cs-header :focus-visible, .cs-footer :focus-visible, .cs-home :focus-visible { outline: 2px solid var(--cs-cobalt); outline-offset: 3px; }
/* Round 19 (keyboard audit): a zero-specificity fallback so every focusable element in the storefront shell shows a ring
   (the scoped rules above and below still win where they set their own colour). */
:where(.cs-shell, .cs-auth) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #1f55d6; outline-offset: 2px; }
/* Skip link: first Tab stop on every storefront page; hidden until focused. */
.cs-skip-link { position: absolute; left: 16px; top: -200px; z-index: 2000; padding: 12px 18px; border-radius: 6px; background: #0b1f3a; color: #ffffff !important;
    font: 600 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; text-decoration: underline !important; }
.cs-skip-link:focus, .cs-skip-link:focus-visible { top: 8px; outline: 3px solid #1f55d6; outline-offset: 2px; }
#main-content:focus, #main-content:focus-visible { outline: none; }
.cs-footer a:focus-visible, .cs-home-build :focus-visible { outline-color: #9cc0ff; }
.cs-header ul, .cs-footer ul, .cs-home ul { list-style: none; margin: 0; padding: 0; }
.cs-header p, .cs-footer p, .cs-home p, .cs-home h1, .cs-home h2, .cs-home h3, .cs-footer h2 { margin: 0; }
.cs-header a, .cs-footer a, .cs-home a { text-decoration: none; }

.cs-container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ---------- Buttons and links ---------- */
.cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 6px; font-size: 15px; font-weight: 600; letter-spacing: .01em; border: 1.5px solid transparent; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s ease, box-shadow .15s ease; }
.cs-btn-small { height: 40px; padding: 0 18px; font-size: 14px; }
.cs-btn-cobalt { background: var(--cs-cobalt); color: var(--cs-white) !important; }
.cs-btn-cobalt:hover { background: var(--cs-cobalt-dark); }
/* Round 31: the ghost button sits on the light hero: navy text and outline on frosted white. */
.cs-btn-ghost { background: rgba(255, 255, 255, .72); color: var(--cs-navy) !important; border-color: var(--cs-navy); }
.cs-btn-ghost:hover { background: var(--cs-navy); color: var(--cs-white) !important; border-color: var(--cs-navy); }
.cs-btn-outline { background: var(--cs-white); color: var(--cs-navy) !important; border-color: var(--cs-navy); }
.cs-btn-outline:hover { background: var(--cs-navy); color: var(--cs-white) !important; }
.cs-text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--cs-cobalt) !important; font-size: 15px; font-weight: 600; white-space: nowrap; }
.cs-text-link:hover { text-decoration: underline !important; }
.cs-arrow { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
/* (round 23) The arrow nudge on hover and the card / tile / button lifts are in "Round 23: motion polish" at the end of
   this file: pointer-hover devices only, never with reduced motion. */
.cs-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--cs-cobalt); }

/* ---------- Wordmark ---------- */
.cs-wordmark { display: inline-flex; flex-direction: column; align-items: center; justify-self: start; line-height: 1; color: var(--cs-wordmark) !important; }
.cs-wordmark-main { font-weight: 900; font-size: 34px; letter-spacing: .03em; }
.cs-wordmark-sub { font-weight: 600; font-size: 10.5px; letter-spacing: .46em; margin-top: 3px; padding-left: .46em; }
.cs-wordmark-light { color: var(--cs-white) !important; }

/* ---------- Banners (admin-controlled system content), in the page flow above the header ---------- */
.cs-banner { position: relative; z-index: 1031; }

/* ---------- Announcement banner (round 15, setting 300; Layout/AnnouncementBannerBar.razor) ----------
   One informational bar above the header, in the page flow (it scrolls away; the header stays sticky). The colours come
   from the admin's preset / custom pair as an inline style (checked >= 4.5:1). A container query, not a media query, so
   the admin's 390px phone preview wraps exactly like a phone. */
.cs-announce { position: relative; z-index: 1031; container-type: inline-size; width: 100%;
    font-family: var(--cs-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif); }
.cs-announce * { font-family: inherit; }
.cs-announce-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 14px; row-gap: 2px;
    max-width: 1200px; margin: 0 auto; padding: 10px 32px; text-align: center; font-size: 14px; line-height: 1.45; }
.cs-announce-text { margin: 0; min-width: 0; max-width: 100%; font-weight: 500; letter-spacing: .01em; overflow-wrap: anywhere; }
.cs-announce .cs-announce-link { display: inline-flex; align-items: center; min-height: 28px; color: inherit !important; font-weight: 700;
    text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.cs-announce .cs-announce-link:hover { text-decoration-thickness: 2px; }
.cs-announce .cs-announce-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
@container (max-width: 600px) {
    .cs-announce-inner { padding: 9px 16px; font-size: 13.5px; line-height: 1.4; }
    .cs-announce .cs-announce-link { min-height: 32px; white-space: normal; }
}

/* ---------- Header ---------- */
/* Header (round 20 polish): 80px tall, content centred at 1200px with balanced padding, logo / navigation / icons on one
   centre line, navy links with a subtle blue underline on the current page, "Build a Bundle" as a compact blue button. */
.cs-header { position: sticky; top: 0; z-index: 1030; background: var(--cs-white); border-bottom: 1px solid var(--cs-line); color: var(--cs-navy); }
.cs-header-inner { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 32px; height: 80px; }
.cs-nav { display: flex; align-items: center; justify-content: center; gap: 28px; }
.cs-nav a { position: relative; display: inline-flex; align-items: center; height: 80px; font-size: 15px; font-weight: 500; color: var(--cs-navy) !important; white-space: nowrap; }
.cs-nav a:hover { color: var(--cs-cobalt) !important; }
.cs-nav a.active { color: var(--cs-cobalt) !important; }
.cs-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 2px; border-radius: 2px; background: var(--cs-cobalt); opacity: .85; }
.cs-nav a.cs-nav-build { height: 40px; padding: 0 16px; margin-left: 4px; border-radius: 6px; background: var(--cs-cobalt); color: var(--cs-white) !important; font-weight: 600; }
.cs-nav a.cs-nav-build:hover, .cs-nav a.cs-nav-build.active { background: var(--cs-cobalt-dark); color: var(--cs-white) !important; }
.cs-nav a.cs-nav-build.active::after { display: none; }
.cs-nav a.cs-nav-build:focus-visible { outline-offset: 3px; }
/* The sticky header never hides what a link, the skip link or keyboard focus scrolls to. */
html:has(.cs-header) { scroll-padding-top: 96px; }
/* Round 17: Home is in the phone menu only (the wordmark is the home link on desktop). */
.cs-nav a.cs-nav-home { display: none; }
.cs-header-icons { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.cs-icon-btn { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cs-navy); cursor: pointer; }
.cs-icon-btn:hover { background: var(--cs-tint); }
.cs-icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cs-cart-count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cs-cobalt); color: var(--cs-white); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.cs-account { position: relative; }
.cs-account-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1040; display: flex; flex-direction: column; min-width: 210px; padding: 8px; border: 1px solid var(--cs-line); border-radius: 10px; background: var(--cs-white); box-shadow: 0 12px 32px rgba(11, 31, 58, .14); }
.cs-account-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 6px; font-size: 15px; color: var(--cs-ink) !important; }
.cs-account-menu a:hover { background: var(--cs-tint); color: var(--cs-cobalt) !important; }
.cs-menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 12px; border: 0; background: transparent; cursor: pointer; }
.cs-menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--cs-ink); }
.cs-header-search { border-top: 1px solid var(--cs-line); background: var(--cs-white); padding: 14px 0; }
.cs-header-search form { display: flex; gap: 10px; }
.cs-header-search input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--cs-line); border-radius: 6px; font-size: 16px; color: var(--cs-ink); background: var(--cs-white); }

/* ---------- Page area (round 17): app.css ".content { padding-top: 81px; min-height: calc(100vh - 81px) }" (plus the phone
   margin-bottom and MainLayout's "mt-1") is the old fixed-navbar offset. The storefront header is sticky in the page flow,
   so on the storefront shell it only left an empty band of the black body background between the header / breadcrumb
   and the page (and under short pages). The shell is ivory and full height, so no dark body shows anywhere. ---------- */
.cs-shell { background: var(--cs-ice); min-height: 100vh; }
.cs-shell > #main-content, .cs-shell > #main-content.content { padding-top: 0; margin-top: 0 !important; margin-bottom: 0; min-height: auto; background: var(--cs-ice); }
/* Shop and product pages are always taller than a screen once loaded: reserve one screen from the start so the footer
   is below the fold while their data loads and is never pushed down in view when it arrives (hosted Lighthouse: footer
   shift, CLS 0.22 on shop / product). Short pages (policies, contact) keep the footer right after their content. */
.cs-shell > #main-content:has(.cs-shop, .cs-detail) { min-height: 100vh; }

/* ---------- Breadcrumbs (storefront pages other than home): in the flow, light, below the sticky header ---------- */
.cs-shell .breadcrumbs-container { position: static !important; top: auto !important; background: var(--cs-ice) !important; backdrop-filter: none !important; border-bottom: 1px solid var(--cs-line); min-height: 40px; padding: 8px 32px !important; font-family: var(--cs-sans) !important; }
.cs-shell .breadcrumbs-container * { font-family: var(--cs-sans) !important; }
.cs-shell .breadcrumbs-container .breadcrumb-link { color: var(--cs-cobalt) !important; }
.cs-shell .breadcrumbs-container .breadcrumb-current, .cs-shell .breadcrumbs-container .breadcrumb-separator { color: var(--cs-ink) !important; }
.cs-shell .breadcrumbs-container .breadcrumb-link::after { background: var(--cs-cobalt) !important; }
/* Round 17: app.css gives .content an 81px top padding (and the layout adds Bootstrap mt-1) to clear the OLD fixed navbar.
   The cosmetics header and breadcrumbs are in the page flow, so that space showed app.css's black body as an ~85px black
   band under the breadcrumbs (or under the header on the home page) on every storefront page. */

/* ---------- Footer ---------- */
.cs-footer { background: var(--cs-navy); color: rgba(255, 255, 255, .82); padding: 64px 0 40px; }
.cs-footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr) 1.3fr; gap: 32px; }
.cs-footer-brand p { margin-top: 14px; font-size: 14px; max-width: 26ch; }
.cs-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; }
.cs-footer h2 { margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-white); }
.cs-footer-col a, .cs-footer-legal a { color: rgba(255, 255, 255, .82) !important; }
.cs-footer-col a:hover, .cs-footer-legal a:hover { color: var(--cs-white) !important; text-decoration: underline; }
.cs-footer-help { display: flex; flex-direction: column; gap: 8px; padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .16); font-size: 14px; line-height: 1.6; }
.cs-footer-help h2 { margin-bottom: 2px; }
.cs-footer-help a { color: var(--cs-white) !important; text-decoration: underline !important; }
.cs-footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: rgba(255, 255, 255, .78); }
.cs-footer-legal nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* ---------- Home ---------- */
.cs-home { background: var(--cs-ice); color: var(--cs-ink); overflow-x: clip; }
.cs-home h1, .cs-home h2, .cs-home h3, .cs-home .cs-home-title, .cs-home .cs-home-tile-label { font-family: var(--cs-serif); font-weight: 500; letter-spacing: -.01em; }
/* `.cs-home *` sets sans-serif on every element, including the spans a heading is built from: they follow the heading. */
.cs-home h1 *, .cs-home h2 *, .cs-home h3 * { font-family: inherit; }

/* Hero (round 31, owner): light "ice water". The background layer (.cs-home-hero-water) spans the whole hero, behind the
   copy and the photo: ice-blue / white gradients, soft ripples and bubbles in CSS only (no image needed), optionally a
   poster still (HomeHeroWaterPoster, a <picture>) and the optional slow water clip (HomeHeroVideo, HeroVideo.razor, drawn
   in this layer). A white veil (.cs-home-hero-veil) fades the water out behind the copy: the text sits on >= 92% white
   whatever plays underneath (worst case, a black clip frame under the veil: navy 13.9:1, lead #26354f 10.3:1, eyebrow
   #1743b0 7.1:1; on the CSS water: 16.4 / 12.2 / 8.5). ONE product photograph (the real essential-bundle photo, uncropped) in a white card on the
   right; below the copy on phones. Copy and buttons unchanged; the solid background-color is what contrast checkers read. */
.cs-home-hero { position: relative; isolation: isolate; overflow: hidden; background-color: #f2f7fc; color: var(--cs-ink); }
.cs-home-hero-water { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background:
        radial-gradient(42% 60% at 86% 22%, rgba(206, 226, 247, .75) 0%, rgba(206, 226, 247, 0) 70%),
        radial-gradient(46% 55% at 74% 100%, rgba(178, 208, 240, .55) 0%, rgba(178, 208, 240, 0) 72%),
        radial-gradient(38% 46% at 8% 6%, rgba(220, 234, 249, .9) 0%, rgba(220, 234, 249, 0) 70%),
        linear-gradient(160deg, #ffffff 0%, #f2f7fc 42%, #e4effb 100%); }
/* Ripples and bubbles: an inline SVG (not a CSS background image, so it is never the page's LCP candidate). */
.cs-home-hero-ripples { position: absolute; right: -6vw; bottom: -4vw; width: max(760px, 64vw); height: auto; pointer-events: none; }
.cs-home-hero-water.has-poster .cs-home-hero-ripples { display: none; }   /* the still has its own water */
/* The optional poster still (HomeHeroWaterPoster): drawn over the CSS water. Round 33: a real <picture> (was a ::before
   background with the same box and crop: the whole layer, cover, centred), so it is in the snapshot page and is the early
   LCP candidate; the clip (same box) fades in over it. A still that fails to load leaves the CSS water showing. */
.cs-home-hero-still { position: absolute; inset: 0; display: block; pointer-events: none; }
.cs-home-hero-still img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Slow caustic light drifting across the water (transform / opacity only; still under reduced motion). */
.cs-hero-light { position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.cs-hero-light-a { width: 620px; height: 340px; right: -60px; top: 6%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); animation: cs-drift-a 26s ease-in-out infinite alternate; }
.cs-hero-light-b { width: 520px; height: 300px; right: 24%; bottom: -90px; background: radial-gradient(closest-side, rgba(160, 199, 240, .45), rgba(160, 199, 240, 0)); animation: cs-drift-b 32s ease-in-out infinite alternate; }
@keyframes cs-drift-a { from { transform: translate3d(0, 0, 0); opacity: .7; } to { transform: translate3d(-80px, 26px, 0); opacity: 1; } }
@keyframes cs-drift-b { from { transform: translate3d(0, 0, 0); opacity: .55; } to { transform: translate3d(70px, -30px, 0); opacity: .9; } }
.cs-home-hero-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    /* plus a soft bottom fade into the ice-blue page, so the water never ends in a hard line above the category tiles */
    background: linear-gradient(180deg, rgba(242, 247, 252, 0) 82%, #f2f7fc 100%), linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .92) 50%, rgba(255, 255, 255, .55) 60%, rgba(255, 255, 255, 0) 74%); }
.cs-home-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 48px;
    padding-top: 64px; padding-bottom: 84px; }
.cs-home-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 560px; }
.cs-home-hero-eyebrow { color: var(--cs-cobalt-dark); }   /* Apex blue, 7.1:1 even over the darkest clip frame under the veil */
.cs-home-hero h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.08; color: var(--cs-navy); }
.cs-home-hero-line { display: block; }
.cs-home-hero-lead { font-size: 19px; line-height: 1.5; font-weight: 500; color: #26354f; }
.cs-home-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.cs-home-hero-actions .cs-btn { min-width: 200px; }
.cs-home-hero-actions .cs-btn-cobalt { box-shadow: 0 8px 20px -8px rgba(31, 85, 214, .55); }
/* The one product image: the whole photograph in a clean white card with a soft shadow. */
.cs-home-hero-photo { position: relative; margin: 0; padding: 12px; border-radius: 22px; background: var(--cs-white);
    box-shadow: 0 34px 70px -28px rgba(11, 31, 58, .38), 0 10px 28px rgba(11, 31, 58, .08); }
.cs-home-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 1020; object-fit: contain; border-radius: 14px; }

/* Category tiles (round 31 follow-up, owner): a white card with the text on its own panel on the left and the whole
   product photograph beside it on the right (natural aspect ratio, no crop, nothing laid over the bottle or its label).
   The text sits on plain white: navy label 16.5:1, detail #2b3a55 11.4:1, "Shop ..." navy 16.5:1 / cobalt 6.3:1 on hover. */
.cs-home-tiles-band { padding: 12px 24px 0; }
.cs-home-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1392px; margin: 0 auto; }
.cs-home-tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 14px;
    min-height: 0; padding: 12px; overflow: hidden; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-white); isolation: isolate;
    transition: transform .2s ease, box-shadow .2s ease; }
.cs-home-tile-photo { order: 2; position: relative; z-index: 0; display: block; width: 100%; height: auto; aspect-ratio: 1000 / 760; object-fit: contain;
    border-radius: 8px; background: var(--cs-tint); transition: transform .35s ease; }
/* The text panel stays above the photo even while a hover zoom (<= 1.03) grows the photo by a few pixels. */
.cs-home-tile-body { order: 1; position: relative; z-index: 1; align-self: stretch; justify-content: center; display: flex; flex-direction: column; align-items: flex-start;
    gap: 8px; min-width: 0; padding: 14px 4px 14px 14px; background: var(--cs-white); }
.cs-home-tile-label { font-size: clamp(24px, 2.1vw, 32px); line-height: 1.1; color: var(--cs-ink); }
.cs-home-tile-detail { font-size: 15px; line-height: 1.45; color: #2b3a55; }
.cs-home-tile-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--cs-ink); }
.cs-home-tile:hover .cs-home-tile-cta { color: var(--cs-cobalt); }

/* Sections */
.cs-home-section { padding: 72px 0; }
.cs-home-soft { background: var(--cs-soft); }
.cs-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.cs-home-title { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.15; color: var(--cs-ink); }
.cs-home-subtitle { margin-top: 6px !important; font-size: 16px; color: var(--cs-muted); }

/* Featured products and bundles: the real ProductComponent (purchase controls unchanged), laid out in a grid */
.cs-home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.cs-home .product-card.cs-home-card { width: auto !important; max-width: none !important; height: 100%; padding: 10px 10px 16px; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-white); box-shadow: none; }
.cs-home .cs-home-card .image-container { width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--cs-tint); }
.cs-home .cs-home-card .image-container img { width: 100%; height: 100%; max-height: none !important; object-fit: cover; }
/* "No photo" placeholder: same square frame as a photo, icon contained rather than cropped */
.cs-home .cs-home-card .image-container img[src*="missingproductimage"] { object-fit: contain; padding: 18%; }
.cs-home .cs-home-card .image-container .image-text { color: var(--cs-muted); }
.cs-home .cs-home-card .product-name { font-family: var(--cs-serif) !important; font-size: 17px !important; font-weight: 500 !important; letter-spacing: 0; line-height: 1.25; color: var(--cs-ink) !important; text-align: center !important; }
.cs-home .cs-home-card .product-price { font-size: 15px !important; text-align: center !important; }
.cs-home .cs-home-card .product-info { align-items: center !important; }
.cs-home-bundle { display: flex; flex-direction: column; gap: 6px; }
.cs-home-bundle .product-card { flex: 1; }
.cs-home-bundle-link { align-self: center; }

/* Build Your Bundle (round 17): navy band, copy left and one product photograph right, both inside the 1200px container.
   The old panel padded the copy by a 100vw formula inside a 1440px-capped grid, so on screens wider than ~1440px the
   padding outgrew the copy column: the text was squeezed and the button spilled under four cover-cropped photos.
   Now: --build-h sets the copy block's height and caps the photo's height; the photo is contained (whole packaging, no
   crop, no stretch), never wider than its column or than --build-h allows, and sits in its own grid column (no overlap). */
.cs-home-build-band { background: var(--cs-panel); padding: 40px 0; }
.cs-home-build { --build-h: clamp(300px, 26vw, 380px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 56px; color: var(--cs-white); }
.cs-home-build-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; min-width: 0; min-height: var(--build-h); }
.cs-home-build-copy .cs-eyebrow { color: rgba(255, 255, 255, .82); }
.cs-home-build-copy h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; color: var(--cs-white); }
.cs-home-build-copy h2 span { display: block; }
.cs-home-build-lead { font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .88); max-width: 36ch; }
.cs-home-build-copy .cs-btn { margin-top: 10px; min-width: 210px; max-width: 100%; }
.cs-home-build-photo { margin: 0; width: calc(var(--build-h) * 1000 / 731); max-width: 100%; justify-self: end; }
.cs-home-build-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 731; max-height: var(--build-h); object-fit: contain; border-radius: 8px; background: var(--cs-panel); }

/* FAQ */
.cs-home-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 56px; align-items: start; }
.cs-home-faq-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cs-home-faq-intro p { color: var(--cs-muted); }
.cs-accordion details { border: 1px solid var(--cs-line); border-radius: 10px; background: var(--cs-white); margin-bottom: 10px; }
.cs-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 18px; font-size: 16px; font-weight: 600; color: var(--cs-ink); cursor: pointer; list-style: none; }
.cs-accordion summary::-webkit-details-marker { display: none; }
.cs-accordion summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--cs-cobalt); }
.cs-accordion details[open] summary::after { content: "\2212"; }
.cs-accordion p { padding: 0 18px 18px; color: #374151; line-height: 1.6; }
.cs-accordion a { color: var(--cs-cobalt) !important; text-decoration: underline !important; }

/* Wholesale callout */
.cs-home-wholesale-band { padding: 0 0 72px; background: var(--cs-soft); }
.cs-home-wholesale { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 32px; border-radius: 14px; background: var(--cs-white); border: 1px solid var(--cs-line); }
.cs-home-wholesale h2 { font-size: 24px; line-height: 1.25; color: var(--cs-ink); }
.cs-home-wholesale p { margin-top: 2px; font-size: 16px; color: var(--cs-muted); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
    .cs-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-home-build { gap: 40px; }
    .cs-footer-grid { grid-template-columns: repeat(3, 1fr); }
    .cs-footer-brand, .cs-footer-help { grid-column: 1 / -1; }
    .cs-footer-help { padding-left: 0; border-left: 0; }
}

/* Header collapses to a menu before the links get crowded (the full row needs ~1,000px) */
@media (max-width: 1100px) {
    .cs-header-inner { grid-template-columns: auto 1fr; height: 68px; }
    .cs-menu-toggle { display: flex; }
    .cs-nav { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 8px 32px 16px; background: var(--cs-white); border-bottom: 1px solid var(--cs-line); box-shadow: 0 12px 24px rgba(11, 31, 58, .08); }
    .cs-nav.open { display: flex; }
    .cs-nav a { height: 48px; border-bottom: 1px solid var(--cs-line); }
    .cs-nav a.cs-nav-home { display: inline-flex; }
    .cs-nav a.active::after { display: none; }
    .cs-nav a.active { font-weight: 600; }
    .cs-nav a.cs-nav-build { justify-content: center; height: 46px; margin: 12px 0 0; border-bottom: 0; }
    html:has(.cs-header) { scroll-padding-top: 84px; }
}

@media (max-width: 900px) {
    /* Copy first, then the one product photo below it; the veil covers the copy, the water shows around the card. */
    .cs-home-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 40px; padding-bottom: 36px; }
    .cs-home-hero.has-hero-video .cs-home-hero-inner { padding-bottom: 72px; }   /* room for the Pause button (class, not :has(), so the snapshot matches) */
    .cs-home-hero-veil { background: linear-gradient(180deg, rgba(242, 247, 252, 0) 90%, #f2f7fc 100%), linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .92) 52%, rgba(255, 255, 255, .5) 72%, rgba(255, 255, 255, .25) 100%); }
    .cs-home-hero-ripples { right: -180px; bottom: -120px; width: 760px; }
    .cs-home-hero-photo { padding: 8px; border-radius: 18px; max-width: 640px; }
    .cs-home-hero-photo img { border-radius: 12px; }
    .cs-home-tiles { grid-template-columns: 1fr; }
    .cs-home-tiles { max-width: 640px; }
    /* Copy and button first, the photo below it, aligned with the copy and at most 560px wide (the 1000px file stays >= 1.5x) */
    .cs-home-build { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .cs-home-build-copy { min-height: 0; }
    .cs-home-build-photo { width: 100%; max-width: 560px; justify-self: start; }
    .cs-home-build-photo img { max-height: none; }
    .cs-home-faq { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
    .cs-container { padding-left: 16px; padding-right: 16px; }
    .cs-nav { padding: 8px 16px 16px; }
    .cs-shell .breadcrumbs-container { padding: 8px 16px !important; }
    .cs-wordmark-main { font-size: 28px; }
    .cs-wordmark-sub { font-size: 9px; }
    .cs-header-inner { height: 64px; }
    .cs-nav { top: 64px; }
    .cs-header-icons { gap: 0; }

    .cs-home-hero h1 { font-size: 38px; }
    .cs-home-hero-lead { font-size: 18px; }
    .cs-home-hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .cs-home-hero-actions .cs-btn { width: 100%; }

    .cs-home-tiles-band { padding: 12px 16px 0; }
    .cs-home-tile { gap: 10px; padding: 8px; }
    .cs-home-tile-body { padding: 8px 0 8px 8px; gap: 4px; }
    .cs-home-tile-label { font-size: 24px; }
    .cs-home-tile-detail { font-size: 14px; }

    .cs-home-section { padding: 52px 0; }
    .cs-home-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 22px; }
    .cs-home-grid { gap: 12px; }
    .cs-home .product-card.cs-home-card { padding: 6px 6px 12px; }
    .cs-home .cs-home-card .product-name { font-size: 15px !important; }

    .cs-home-build-band { padding: 36px 0; }
    .cs-home-build { gap: 24px; }
    .cs-home-build-copy h2 { font-size: 34px; }
    .cs-home-build-lead { font-size: 17px; }
    .cs-home-build-copy .cs-btn { width: 100%; }

    .cs-home-wholesale-band { padding-bottom: 52px; }
    .cs-home-wholesale { flex-direction: column; align-items: stretch; padding: 22px 20px; gap: 16px; }
    .cs-home-wholesale .cs-btn { width: 100%; }

    .cs-footer { padding: 48px 0 32px; }
    .cs-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .cs-footer-col { gap: 0; }
    .cs-footer-col a, .cs-footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
    .cs-footer-legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reduced motion: everything static, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
    .cs-hero-light { animation: none; }
    .cs-btn, .cs-arrow, .cs-home-tile, .cs-home-tile-photo, .cs-home .product-card.cs-home-card { transition: none; }
    .cs-home-tile:hover, .cs-home-tile:hover .cs-home-tile-photo, .cs-home .product-card.cs-home-card:hover,
    .cs-home-hero-actions .cs-btn:hover, .cs-home-build .cs-btn:hover, a:hover > .cs-arrow { transform: none; }
}

/* =====================================================================================================================
   Storefront page bodies (round 14): Shop (/shop, /shop/{category}, search), /categories, product and bundle pages
   (/products/{slug}), FAQ and the database-managed policy pages. Same tokens and patterns as the preview
   (Preview/assets/preview-site.css: .ph-shop, .ph-detail, .ph-accordion, .ph-policy). Everything is under .cs-page.
   ===================================================================================================================== */
.cs-page { background: var(--cs-ice); color: var(--cs-ink); overflow-x: clip; min-height: 60vh; padding-bottom: 72px; font-size: 16px; line-height: 1.55; }
/* app.css sets `* { font-family: Inter }`; icon fonts (Font Awesome) are left alone. */
/* Headings (and the spans inside them) are left out so the serif rule below applies, as in the approved design: the
   :not() chain outranks `.cs-page h1`, which made every page heading sans-serif. */
.cs-page, .cs-page :not([class*="fa-"]):not(.fas):not(.far):not(.fab):not(.fa):not(h1, h2, h3):not(h1 *, h2 *, h3 *) { font-family: var(--cs-sans); }
.cs-page :is(h1, h2, h3) :not([class*="fa-"]):not(.fas):not(.far):not(.fab):not(.fa) { font-family: inherit; }
.cs-page h1, .cs-page h2, .cs-page h3 { margin: 0; font-family: var(--cs-serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: var(--cs-ink); text-transform: none; }
.cs-page p { margin: 0; }
.cs-page a { color: var(--cs-cobalt); }
.cs-page :focus-visible { outline: 2px solid var(--cs-cobalt) !important; outline-offset: 3px; box-shadow: none; }
.cs-page .cs-btn:focus-visible, .cs-page .apex-buy-btn:focus-visible { outline-offset: 2px; }
.cs-plain { list-style: none; margin: 0; padding: 0; }
.cs-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cs-muted { color: var(--cs-muted); }
.cs-small { font-size: 14px; }

/* Compact page hero: navy band, title left, optional framed product photo right (preview PageHero Compact) */
.cs-page-hero { background: radial-gradient(900px 520px at 78% 50%, #16346f 0%, rgba(22, 52, 111, 0) 70%), var(--cs-panel); color: var(--cs-white); }
.cs-page-hero-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 44px; padding-bottom: 48px; }
.cs-page-hero-inner.no-photo { grid-template-columns: minmax(0, 1fr); }
.cs-page-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.cs-page-hero .cs-eyebrow { color: #9cc0ff; }
.cs-page .cs-page-hero h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; color: var(--cs-white); overflow-wrap: anywhere; }
.cs-page-hero-lead { font-size: 18px; color: rgba(255, 255, 255, .86); max-width: 46ch; }
.cs-page-hero-photo { justify-self: end; width: 100%; max-width: 420px; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.cs-page-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; }

/* ---------- Shop ---------- */
.cs-shop { padding-top: 28px; }
/* Round 17: one compact category row above the results (StorefrontCategoryMenu; the explicit allow-list) instead of the
   240px sidebar, so the grid gets the full width. Phone: the row scrolls sideways inside itself (see the 760px block). */
.cs-shop-layout { display: flex; flex-direction: column; gap: 0; }
.cs-shop-layout > * { min-width: 0; }
.cs-cat-menu { margin: 0 0 22px; }
.cs-cat-row { position: relative; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cs-cat-row li { flex: 0 0 auto; }
.cs-cat-row a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--cs-line); background: var(--cs-white); font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--cs-ink) !important; text-decoration: none; white-space: nowrap; }
.cs-cat-row a:hover { border-color: #b8c4dc; background: var(--cs-soft); }
.cs-cat-row a:focus-visible { outline: 2px solid var(--cs-cobalt); outline-offset: 2px; }
.cs-cat-row a.active { background: var(--cs-cobalt); border-color: var(--cs-cobalt); color: var(--cs-white) !important; font-weight: 600; }
.cs-shop .cs-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.cs-toolbar > * { min-width: 0; }
.cs-search { position: relative; flex: 1; display: flex; gap: 8px; }
.cs-search svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--cs-muted); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.cs-search input { flex: 1; min-width: 0; height: 46px; padding: 0 14px 0 44px; border: 1px solid #8a94a6; border-radius: 6px; background: var(--cs-white); font-size: 16px; color: var(--cs-ink); }
.cs-search .cs-btn { height: 46px; }
.cs-count { font-size: 14px; color: var(--cs-muted); white-space: nowrap; }
.cs-search-summary { margin: -6px 0 18px !important; font-size: 15px; }
.cs-search-summary a { margin-left: 10px; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }
.cs-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 20px; border: 1px dashed #c9cdd6; border-radius: 12px; text-align: center; color: var(--cs-muted); background: var(--cs-white); }
.cs-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }

/* Product grid: the real ProductComponent (purchase controls unchanged) as a cosmetics card */
.cs-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.cs-page .product-card.cs-card { display: flex; flex-direction: column; width: auto !important; max-width: none !important; height: 100%; padding: 10px 10px 16px; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-white); box-shadow: none; cursor: default; }
.cs-page .cs-card .image-container { width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--cs-tint); cursor: pointer; }
.cs-page .cs-card .image-container img { width: 100%; height: 100%; max-height: none !important; object-fit: cover; border-radius: 0; }
.cs-page .cs-card .image-container img[src*="missingproductimage"] { object-fit: contain; padding: 18%; }
.cs-page .cs-card .image-container .image-text { color: var(--cs-ink); background: rgba(255, 255, 255, .85); }
.cs-page .cs-card .sale-tag { background: var(--cs-navy); color: var(--cs-white); }
.cs-page .cs-card .product-info { flex: 1; align-items: center !important; }
.cs-page .cs-card .product-name { margin: 12px 0 4px !important; font-family: var(--cs-serif) !important; font-size: 17px !important; font-weight: 500 !important; letter-spacing: 0; line-height: 1.25; text-transform: none; color: var(--cs-ink) !important; text-align: center !important; }
.cs-page .cs-card .product-name a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: inherit !important; text-decoration: none; font-family: inherit !important; }
.cs-page .cs-card .product-name a:hover { color: var(--cs-cobalt) !important; text-decoration: underline; }
.cs-page .cs-card .product-price { font-size: 15px !important; text-align: center !important; }
.cs-page .cs-card .product-actions { margin-top: 12px; }
.cs-page .cs-card .card-buy-btn { min-height: 44px; font-size: 13px; }
.cs-page .cs-card .card-size-chip { min-height: 44px; }
.cs-page .cs-card .card-size-chooser__close { min-width: 44px; min-height: 44px; }

/* Category index (/categories) */
.cs-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cs-cat-card { display: flex; flex-direction: column; gap: 6px; min-height: 120px; padding: 22px; border-radius: 12px; background: var(--cs-white); border: 1px solid var(--cs-line); color: var(--cs-ink) !important; text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.cs-cat-card strong { font-family: var(--cs-serif); font-size: 22px; font-weight: 500; }
.cs-cat-card span { font-size: 14px; color: var(--cs-muted); }
.cs-cat-card .cs-cat-cta { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--cs-cobalt); }

/* ---------- Product and bundle detail ---------- */
.cs-detail { padding-top: 28px; }
.cs-detail-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.cs-detail-layout > * { min-width: 0; }
.cs-gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }
.cs-gallery.single { grid-template-columns: minmax(0, 1fr); }
.cs-thumbs { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.cs-thumbs button { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--cs-tint); cursor: pointer; min-height: 44px; }
.cs-thumbs button[aria-pressed="true"] { border-color: var(--cs-cobalt); }
.cs-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.cs-gallery-main { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--cs-tint); border: 1px solid var(--cs-line); }
.cs-gallery-main img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.cs-gallery-main img[src*="missingproductimage"] { object-fit: contain; padding: 22%; }
/* ---- round 22: product photo framing (Preview/docs/IMAGE_CONSISTENCY.md) ------------------------------------------
   The square card copies (images/cosmetics/card/, ProductPhotoSources.ForCard) are already framed: whole packaging,
   the same share of the frame for every product. Show them whole and centred in any box (contain = cover in the square
   cards and gallery; a non-square legacy box letterboxes on the tint instead of cutting the packaging; [srcset] twice
   outranks the scoped ".image-container img" rule). The 1000 x 1000 width/height attributes and the boxes' aspect-ratio
   keep the space reserved (no layout shift). */
.image-container img[srcset][srcset*="/images/cosmetics/card/"],
.cs-gallery-main img[srcset*="/images/cosmetics/card/"],
.cs-thumbs img[srcset*="/images/cosmetics/card/"] { object-fit: contain; object-position: 50% 50%; background: var(--cs-tint, #eef2f8); }
/* ---- end round 22 product photo framing ---- */
.cs-badge { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 3px 10px; border-radius: 4px; background: var(--cs-navy); color: var(--cs-white); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cs-detail-info { display: flex; flex-direction: column; gap: 12px; }
.cs-page .cs-detail-info h1 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; overflow-wrap: anywhere; }
.cs-detail-sub { font-size: 15px; color: var(--cs-muted); }
.cs-detail-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 26px; }
.cs-detail-price .apx-price__was { font-size: 18px; }
.cs-detail-price .cs-save { font-size: 14px; font-weight: 600; color: var(--cs-ink); }
.cs-field { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.cs-field-label, .cs-field legend { margin: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--cs-ink); float: none; width: auto; }
.cs-size-options { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-size-option { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 48px; min-width: 88px; padding: 6px 16px; border: 1.5px solid #c9cdd6; border-radius: 6px; background: var(--cs-white); color: var(--cs-ink); font-size: 15px; line-height: 1.25; cursor: pointer; text-align: left; }
.cs-size-option:hover { border-color: var(--cs-cobalt); }
.cs-size-option[aria-checked="true"] { border-color: var(--cs-cobalt); background: #eef3fe; color: var(--cs-cobalt); font-weight: 600; box-shadow: 0 0 0 1px var(--cs-cobalt) inset; }
.cs-size-option small { font-size: 13px; font-weight: 500; color: var(--cs-muted); }
.cs-size-option[aria-checked="true"] small { color: var(--cs-ink); }
.cs-size-option .apx-price { font-size: 13px; }
.cs-option { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1.5px solid var(--cs-line); border-radius: 6px; background: var(--cs-white); font-size: 15px; cursor: pointer; }
.cs-option.active { border-color: var(--cs-cobalt); box-shadow: 0 0 0 1px var(--cs-cobalt) inset; }
.cs-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--cs-cobalt); }
.cs-option .apx-price { margin-left: auto; }
/* Round 23: purchase choice (One-time / Subscribe & Save) and Buy More, Save More next to the quantity. */
.cs-purchase { gap: 10px; }
.cs-option-sub { flex-direction: column; align-items: stretch; gap: 8px; cursor: default; }
.cs-option-row { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; cursor: pointer; }
.cs-option-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--cs-cobalt); }
.cs-option-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 600; }
.cs-soon { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--cs-tint); color: var(--cs-navy); font-size: 13px; font-weight: 700; }
.cs-soon svg, .cs-soon i { width: 12px; height: 12px; }
.cs-option-sub.is-unavailable { background: var(--cs-soft); border-style: dashed; border-color: #c9cdd6; }
.cs-option-sub.is-unavailable .cs-option-row { cursor: not-allowed; }
.cs-option-sub > .cs-sub-price { margin: 0 0 0 28px; font-size: 15px; color: var(--cs-ink); }
.cs-option-sub > .cs-sub-freq { margin: 0 0 0 28px; padding: 0; border: 0; min-width: 0; }
.cs-sub-freq legend { float: none; width: auto; margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 600; color: var(--cs-ink); }
.cs-sub-freq-options { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-freq { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1.5px solid #c9cdd6; border-radius: 6px; background: var(--cs-white); font-size: 14px; color: var(--cs-ink); cursor: pointer; }
.cs-freq input { width: 16px; height: 16px; margin: 0; accent-color: var(--cs-cobalt); }
.cs-freq.active { border-color: var(--cs-cobalt); box-shadow: 0 0 0 1px var(--cs-cobalt) inset; }
.cs-freq:has(input:disabled) { cursor: not-allowed; background: var(--cs-soft); }
.cs-option-sub > .cs-sub-help { margin: 0 0 0 28px; font-size: 13px; color: var(--cs-muted); }
.cs-tiers tr.active td { background: #eef3fe; font-weight: 700; }
.cs-tiers tr.active td:first-child { box-shadow: 3px 0 0 var(--cs-cobalt) inset; padding-left: 6px; }
.cs-tier-now { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--cs-ink); }
.cs-tier-now:empty { display: none; }
/* Round 23b: counting rule, sale-size note and the Subscribe & Save terms. */
.cs-tier-summary { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--cs-ink); }
.cs-tier-counting { margin: 2px 0 6px; font-size: 13px; color: var(--cs-ink); }
.cs-tier-sale-note { margin: 0; font-size: 13px; color: var(--cs-muted); }
.cs-option-sub > .cs-sub-terms { margin: 0 0 0 28px; font-size: 13px; line-height: 1.45; color: var(--cs-ink); }
/* Round 23c: short "Coming soon" box; details behind a native "See terms" disclosure. */
.cs-option-sub > .cs-sub-short { margin: 0 0 0 28px; font-size: 15px; color: var(--cs-ink); }
.cs-sub-short .cs-soon { margin-left: 4px; }
.cs-option-sub > .cs-sub-details { margin: 0 0 0 28px; }
.cs-sub-summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--cs-cobalt); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.cs-sub-summary::-webkit-details-marker { display: none; }
.cs-sub-summary::after { content: "\25BE"; margin-left: 6px; text-decoration: none; display: inline-block; }
.cs-sub-details[open] > .cs-sub-summary::after { transform: rotate(180deg); }
.cs-sub-summary:focus-visible { outline: 3px solid var(--cs-cobalt); outline-offset: 2px; border-radius: 4px; }
.cs-sub-details-body { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.cs-sub-details-body > .cs-sub-price, .cs-sub-details-body > .cs-sub-help, .cs-sub-details-body > .cs-sub-terms { margin: 0; }
.cs-sub-details-body > .cs-sub-price { font-size: 15px; color: var(--cs-ink); }
.cs-sub-details-body > .cs-sub-help { font-size: 13px; color: var(--cs-muted); }
.cs-sub-details-body > .cs-sub-terms { font-size: 13px; line-height: 1.45; color: var(--cs-ink); }
.cs-sub-details-body > .cs-sub-freq { margin: 0; padding: 0; border: 0; min-width: 0; }
.cs-option-sub > .cs-sub-freq.cs-sub-freq { margin-left: 28px; }
@media (max-width: 480px) {
    .cs-option-sub > .cs-sub-price, .cs-option-sub > .cs-sub-freq, .cs-option-sub > .cs-sub-help, .cs-option-sub > .cs-sub-terms,
    .cs-option-sub > .cs-sub-short, .cs-option-sub > .cs-sub-details, .cs-option-sub > .cs-sub-freq.cs-sub-freq { margin-left: 0; }
    /* Round 23c: keep the "Coming soon" line on one line at 390px. */
    .cs-option-sub > .cs-sub-short { font-size: 14px; }
    .cs-sub-short .cs-soon { padding: 1px 7px; margin-left: 2px; font-size: 12px; }
    .cs-option-sub.is-unavailable { gap: 4px; }
}
.cs-qty { display: inline-flex; align-items: center; align-self: flex-start; border: 1px solid #8a94a6; border-radius: 6px; background: var(--cs-white); }
.cs-qty button { width: 44px; height: 46px; border: 0; background: none; font-size: 20px; color: var(--cs-ink); cursor: pointer; }
.cs-qty button:disabled { color: #6b7280; cursor: not-allowed; }
.cs-qty input { width: 52px; height: 46px; padding: 0; border: 0; border-left: 1px solid var(--cs-line); border-right: 1px solid var(--cs-line); border-radius: 0; background: var(--cs-white); text-align: center; font-size: 16px; font-weight: 600; color: var(--cs-ink); -moz-appearance: textfield; box-shadow: none; }
.cs-qty input::-webkit-outer-spin-button, .cs-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-buy { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cs-buy .apex-buy-btn, .cs-sticky-bar .apex-buy-btn { text-transform: none; letter-spacing: .01em; font-size: 16px; }
.cs-page .apex-buy-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 14px; border-radius: 6px; background: #ecfdf3; color: #14532d; font-size: 14px; }
.cs-page .apex-buy-link { min-height: 44px; color: var(--cs-cobalt); }
.cs-notice { padding: 10px 14px; border-radius: 6px; background: #fef2f2; color: #991b1b; font-size: 14px; }
.cs-note-ok { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 6px; background: #ecfdf3; color: #14532d; font-size: 14px; }
.cs-promo { display: flex; gap: 12px; padding: 14px 16px; border-radius: 8px; background: var(--cs-white); border: 1px solid var(--cs-line); font-size: 14px; color: var(--cs-ink); }
.cs-promo > i { margin-top: 3px; color: var(--cs-cobalt); }
.cs-promo > div { min-width: 0; overflow-x: auto; }
.cs-promo table { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 13px; }
.cs-promo th, .cs-promo td { padding: 4px 6px 4px 0; text-align: left; border-bottom: 1px solid var(--cs-line); color: var(--cs-ink); background: transparent; }
.cs-promo-note { display: block; margin-top: 6px; color: var(--cs-muted); font-size: 13px; }
.cs-promo-code { padding: 1px 6px; border-radius: 4px; background: var(--cs-tint); font-weight: 700; }
.cs-rule { height: 1px; margin: 4px 0; background: var(--cs-line); }

/* Accordion: product details, ingredients, how to use, shipping & returns; the FAQ (base .cs-accordion rules above) */
.cs-page .cs-accordion { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.cs-page .cs-accordion details { margin: 0; border: 1px solid var(--cs-line); border-radius: 8px; background: var(--cs-white); }
.cs-page .cs-accordion summary { min-height: 52px; padding: 0 16px; font-family: var(--cs-sans); }
.cs-page .cs-accordion summary:focus-visible { outline-offset: -2px; border-radius: 8px; }
.cs-page .cs-accordion details > :not(summary) { padding: 0 16px; }
.cs-page .cs-accordion details > :last-child:not(summary) { padding-bottom: 16px; }
.cs-page .cs-accordion details > p + p { padding-top: 10px; }
.cs-page .cs-accordion p { color: #374151; line-height: 1.6; font-size: 15px; }
.cs-page .cs-accordion dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; margin: 0; padding-bottom: 12px; font-size: 15px; }
.cs-page .cs-accordion dt { font-weight: 500; color: var(--cs-muted); }
.cs-page .cs-accordion dd { margin: 0; }
.cs-page .cs-accordion a { display: inline-block; padding: 2px 0; }

.cs-related { margin-top: 64px; }
.cs-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.cs-page .cs-related-head h2 { font-size: clamp(26px, 2.6vw, 32px); }

/* Mobile sticky add-to-cart bar (the page script shows it only while the main button is scrolled out of view) */
.cs-sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--cs-white); border-top: 1px solid var(--cs-line); box-shadow: 0 -8px 24px rgba(11, 31, 58, .1); font-family: var(--cs-sans); }
.cs-sticky-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cs-sticky-bar-inner > div { min-width: 0; }
.cs-sticky-bar-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: #16213a; }
.cs-sticky-bar .apex-buy-btn { width: auto; min-width: 140px; }

/* ---------- FAQ ---------- */
.cs-faq { max-width: 860px; padding-top: 44px; }
.cs-faq-group + .cs-faq-group { margin-top: 36px; }
.cs-page .cs-faq-group h2 { font-size: 24px; margin-bottom: 12px; }
.cs-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 48px; padding: 28px 32px; border-radius: 16px; background: var(--cs-panel); color: var(--cs-white); }
.cs-page .cs-callout h2 { font-size: 28px; color: var(--cs-white); }
.cs-callout p { margin-top: 6px !important; color: rgba(255, 255, 255, .86); }
.cs-page .cs-callout a.cs-btn { color: var(--cs-white) !important; text-decoration: none; }
.cs-page .cs-callout :focus-visible { outline-color: #9cc0ff !important; }

/* ---------- Policy / system content (database-managed HTML, shown as stored) ---------- */
.cs-policy { max-width: 860px; padding-top: 36px; }
.cs-page .cs-policy > h1 { font-size: clamp(32px, 3.4vw, 44px); margin-bottom: 18px; }
.cs-policy-body { padding: 28px 32px; border-radius: 12px; background: var(--cs-white); border: 1px solid var(--cs-line); color: #374151; overflow-wrap: anywhere; }
.cs-policy-body .container-fluid, .cs-policy-body .row, .cs-policy-body [class*="col-"] { width: 100%; max-width: none; margin: 0; padding: 0; flex: none; }
.cs-policy-body * { color: inherit; background-color: transparent; }
.cs-policy-body h1, .cs-policy-body h2, .cs-policy-body h3, .cs-policy-body h4 { margin: 24px 0 8px !important; font-family: var(--cs-serif); font-weight: 500; color: var(--cs-ink) !important; }
.cs-policy-body h1 { font-size: 28px; }
.cs-policy-body h2 { font-size: 24px; }
.cs-policy-body h3, .cs-policy-body h4 { font-size: 20px; }
.cs-policy-body .slide-down > :first-child { margin-top: 0 !important; }
.cs-policy-body p, .cs-policy-body li { color: #374151 !important; background: transparent !important; line-height: 1.65; }
.cs-policy-body p { margin: 0 0 12px !important; }
.cs-policy-body a { color: var(--cs-cobalt) !important; text-decoration: underline; }
.cs-policy-body table { width: 100%; border-collapse: collapse; }
.cs-policy-body td, .cs-policy-body th { padding: 6px 8px; border: 1px solid var(--cs-line); }
.cs-policy-foot { margin-top: 18px !important; font-size: 14px; color: var(--cs-muted); }
/* Round 17: empty / unavailable policy text (PolicyEmptyState) instead of an empty box; the foot line would repeat it. */
.cs-policy-empty p { margin: 0 0 8px !important; }
.cs-policy-empty p:last-child { margin-bottom: 0 !important; }
.cs-policy-empty strong { color: var(--cs-ink); }
.cs-policy-body:has([data-test=policy-empty]) + .cs-policy-foot { display: none; }

@media (max-width: 1024px) {
    .cs-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-shop .cs-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cs-detail-layout { gap: 32px; }
}

@media (max-width: 900px) {
    .cs-page-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 32px; padding-bottom: 36px; }
    /* Stacked under the heading, the banner photo pushed the products below the fold on tablets: hide it from here
       down, as on phones (hosted review, Oct 11, 2026). */
    .cs-page-hero-photo { display: none; }
    .cs-detail-layout { grid-template-columns: minmax(0, 1fr); }
    .cs-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .cs-page { padding-bottom: 96px; }
    .cs-page-hero-photo { display: none; }
    .cs-page-hero-lead { font-size: 17px; }
    .cs-shop { padding-top: 18px; }
    .cs-shop .cs-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The chip row runs edge to edge and scrolls inside itself; the page never scrolls sideways. */
    .cs-cat-menu { margin: 0 -16px 16px; }
    .cs-cat-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
        padding: 2px 16px 6px; scroll-padding-inline: 16px; scrollbar-width: none; }
    .cs-cat-row::-webkit-scrollbar { display: none; }
    .cs-cat-row a { padding: 0 16px; }
    .cs-toolbar { flex-wrap: wrap; gap: 10px; }
    .cs-search { flex-basis: 100%; }
    .cs-product-grid { gap: 12px; }
    .cs-page .product-card.cs-card { padding: 6px 6px 12px; }
    .cs-page .cs-card .product-name { font-size: 15px !important; }
    .cs-page .cs-card .card-buy-btn { font-size: 12px; padding: 0 6px; white-space: normal; }
    .cs-cat-grid { grid-template-columns: minmax(0, 1fr); }
    .cs-detail { padding-top: 18px; }
    .cs-gallery { grid-template-columns: minmax(0, 1fr); }
    .cs-gallery .cs-thumbs { flex-direction: row; order: 2; }
    .cs-thumbs li { width: 64px; }
    .cs-page .cs-accordion dl { grid-template-columns: 90px minmax(0, 1fr); }
    .cs-faq { padding-top: 28px; }
    .cs-callout { padding: 22px 20px; }
    .cs-callout .cs-btn { width: 100%; }
    .cs-policy { padding-top: 24px; }
    .cs-policy-body { padding: 20px 16px; }
    .cs-related { margin-top: 48px; }
    .cs-related-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-cat-card, .cs-page .product-card.cs-card { transition: none; }
}

/* ---------- Sign-in pages (round 17): AuthLayout + sign in, create account, forgot / reset password, email links ----------
   Ivory canvas, the wordmark, one centred white card. Replaces the black signed-out screen these pages had. Inputs are
   16px (no zoom on iOS), controls are at least 44px tall, and every colour pair is >= 4.5:1 (borders >= 3:1). */
html:has(.cs-auth), body:has(.cs-auth) { background: #f2f7fc; }
.cs-auth { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--cs-ice); color: var(--cs-ink); overflow-x: clip;
    font-size: 16px; line-height: 1.5; }
.cs-auth, .cs-auth * { font-family: var(--cs-sans); }
.cs-auth :focus-visible { outline: 2px solid var(--cs-cobalt); outline-offset: 2px; }
.cs-auth p { margin: 0; }
.cs-auth-header { display: flex; justify-content: center; padding: 32px 16px 12px; }
.cs-auth-header .cs-wordmark { text-decoration: none; }
.cs-auth-main { flex: 1 0 auto; display: flex; justify-content: center; align-items: flex-start; padding: 16px 16px 40px; }
.cs-auth-card { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 448px; padding: 36px 36px 28px; background: var(--cs-white);
    border: 1px solid var(--cs-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(11, 31, 58, .04), 0 14px 36px rgba(11, 31, 58, .08); }
.cs-auth-card[data-page="register"] { max-width: 520px; }
.cs-auth-title { margin: 0; font-family: var(--cs-serif) !important; font-size: 30px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: var(--cs-navy); text-transform: none; }
.cs-auth-lead { margin-top: -8px !important; color: var(--cs-muted); font-size: 16px; }
.cs-auth-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.cs-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-auth-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-auth label { padding: 0; }  /* app.css pads every label by .375rem */
.cs-auth-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--cs-navy); }
.cs-auth-hint { color: var(--cs-muted); font-size: 13.5px; line-height: 1.45; }
.cs-auth-input { display: block; width: 100%; height: 48px; padding: 0 14px; border: 1px solid #7d8799; border-radius: 8px; background: var(--cs-white);
    color: var(--cs-ink); font-size: 16px; line-height: 1.2; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
/* Round 19 (contrast audit): the focus ring is a solid cobalt outline (6:1 on white); the old 22% tint was ~1.4:1. */
.cs-auth-input:focus { outline: 2px solid var(--cs-cobalt); outline-offset: 1px; border-color: var(--cs-cobalt); box-shadow: none; }
.cs-auth-input[readonly] { background: var(--cs-soft); color: var(--cs-muted); }
.cs-auth-input.invalid, .cs-auth-input[aria-invalid="true"] { border-color: #b42318; }
.cs-auth-input.invalid:focus, .cs-auth-input[aria-invalid="true"]:focus { border-color: #b42318; box-shadow: none; }
.cs-auth .validation-message, .cs-auth-error { margin: 0; color: #b42318; font-size: 14px; font-weight: 500; }
.cs-auth-password { position: relative; }
.cs-auth-password .cs-auth-input { padding-right: 92px; }
.cs-auth-reveal { position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 12px;
    border: 0; border-radius: 6px; background: transparent; color: var(--cs-cobalt); font-size: 14px; font-weight: 600; cursor: pointer; }
.cs-auth-reveal:hover { background: var(--cs-tint); }
.cs-auth-reveal svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-auth-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 0 20px; border: 0; border-radius: 8px;
    background: var(--cs-cobalt); color: var(--cs-white) !important; font-size: 16px; font-weight: 600; letter-spacing: .01em; text-decoration: none !important;
    cursor: pointer; transition: background .15s; }
.cs-auth-submit:hover { background: var(--cs-cobalt-dark); }
.cs-auth-submit:disabled { background: var(--cs-cobalt-dark); opacity: .75; cursor: progress; }
.cs-auth-link, .cs-auth-linkbtn { color: var(--cs-cobalt) !important; font-weight: 600; text-decoration: none; }
.cs-auth-link:hover, .cs-auth-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs-auth-linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font-size: 15px; cursor: pointer; text-align: left; }
.cs-auth-forgot { align-self: flex-start; display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; }
.cs-auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin-top: -8px; }
.cs-auth-alert { padding: 12px 14px; border: 1px solid #f1c3be; border-radius: 8px; background: #fdf0ee; color: #8a1c13; font-size: 15px; }
.cs-auth-alert span { display: block; margin-top: 4px; }
.cs-auth-notice { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid #d3ddec; border-radius: 8px; background: var(--cs-tint);
    color: var(--cs-ink); font-size: 15px; }
/* Round 30: email-dependent feature notice (EmailUnavailableNotice) and its loading placeholder (EmailFeatureGate). */
.cs-email-notice { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid #d3ddec; border-radius: 8px;
    background: var(--cs-tint); color: var(--cs-ink); font-size: 15px; line-height: 1.5; }
.cs-email-notice > svg { flex: none; margin-top: 2px; color: var(--cs-cobalt); }
.cs-email-notice p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* The support link keeps Apex cobalt (>= 6:1 on the tint) wherever the notice sits; on the sign-in pages the generic
   link colour (#5aa3f6, 2.3:1) otherwise wins (staging review 2026-10-21). */
.cs-email-notice a.cs-email-link { color: var(--cs-cobalt); }
.cs-email-gate-wait { min-height: 48px; }
.cs-auth-icon { display: flex; justify-content: center; color: var(--cs-cobalt); }
.cs-auth-spinner { width: 28px; height: 28px; border: 3px solid #c9d5ea; border-top-color: var(--cs-cobalt); border-radius: 50%; animation: cs-auth-spin .8s linear infinite; }
@keyframes cs-auth-spin { to { transform: rotate(360deg); } }
.cs-auth-check { display: flex; align-items: flex-start; gap: 10px; }
.cs-auth-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cs-cobalt); }
.cs-auth-check label { color: var(--cs-ink); font-size: 14px; line-height: 1.45; }
.cs-auth-divider { display: flex; align-items: center; gap: 12px; color: var(--cs-muted); font-size: 14px; }
.cs-auth-divider::before, .cs-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--cs-line); }
.cs-auth-social { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.cs-auth-google { display: flex; justify-content: center; min-height: 44px; }
.cs-auth-facebook { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; border: 0; border-radius: 8px;
    background: #1877f2; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.cs-auth-facebook:hover { background: #0f62cf; }
.cs-auth-switch { text-align: center; color: var(--cs-ink); font-size: 15px; }
.cs-auth-back { padding-top: 16px; border-top: 1px solid var(--cs-line); text-align: center; font-size: 15px; }
.cs-auth-back .cs-auth-link { display: inline-flex; align-items: center; min-height: 44px; }
.cs-auth-footer { padding: 8px 16px 28px; }
.cs-auth-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
.cs-auth-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cs-muted) !important; font-size: 14px; text-decoration: none; }
.cs-auth-footer a:hover { color: var(--cs-navy) !important; text-decoration: underline; }
@media (max-width: 520px) {
    .cs-auth-header { padding: 20px 16px 4px; }
    .cs-auth-main { padding: 12px 16px 28px; }
    .cs-auth-card { gap: 16px; padding: 24px 20px 20px; border-radius: 12px; }
    .cs-auth-title { font-size: 26px; }
    .cs-auth-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-auth-spinner { animation-duration: 2.4s; }
    .cs-auth-input, .cs-auth-submit { transition: none; }
}

/* =====================================================================================================================
   Build a Bundle (round 17, Pages/Shop/BuildABundle.razor): the approved preview builder (Preview/assets/preview-site.css
   .ph-routine-builder, .ph-pick, .ph-routine-summary, .ph-bundle-bar) in the storefront tokens. Product grid left, sticky
   "Your bundle" summary right; one column below 1024px with a sticky count / total bar at the bottom.
   ===================================================================================================================== */
.cs-bab-status { padding-top: 40px; }
.cs-bab-soon { max-width: 720px; margin: 0 auto; color: var(--cs-ink); }
.cs-page .cs-bab-soon h2 { font-size: clamp(24px, 2.6vw, 30px); }
.cs-bab-soon p { max-width: 52ch; color: var(--cs-muted); }
.cs-bab-soon-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cs-bab-builder { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 36px; }
.cs-bab-builder > * { min-width: 0; }
.cs-bab-editing, .cs-page .cs-bab-choose > .cs-notice { margin-bottom: 16px !important; }
.cs-bab-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cs-bab-chip { min-height: 44px; padding: 9px 18px; border-radius: 6px; border: 1.5px solid transparent; background: var(--cs-tint); color: var(--cs-ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.cs-bab-chip:hover { border-color: #b8c8e6; }
.cs-bab-chip.active { background: var(--cs-cobalt); color: var(--cs-white); }
.cs-bab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cs-bab-pick { display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 20px; border-radius: 12px; border: 1px solid var(--cs-line); background: var(--cs-white); transition: box-shadow .2s; }
.cs-bab-pick.selected { border-color: var(--cs-cobalt); box-shadow: 0 0 0 2px rgba(31, 85, 214, .18); }
.cs-bab-art { display: block; overflow: hidden; border-radius: 8px; background: var(--cs-tint); }
.cs-bab-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0; }
.cs-bab-art img[src*="missingproductimage"] { object-fit: contain; padding: 14%; }
.cs-bab-pick.unavailable .cs-bab-art { opacity: .6; }
.cs-bab-body { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; padding: 16px 6px 0; text-align: center; min-width: 0; }
.cs-page .cs-bab-body h3 { font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.cs-page .cs-bab-body h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cs-ink); text-decoration: none; }
.cs-page .cs-bab-body h3 a:hover { color: var(--cs-cobalt); text-decoration: underline; }
.cs-bab-size { font-size: 14px; color: var(--cs-muted); }
.cs-bab-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; margin: 4px 0 14px !important; font-size: 16px; }
.cs-bab-stock { display: flex; align-items: center; gap: 6px; margin-bottom: 10px !important; font-size: 13px; color: #9f1239; }
.cs-bab-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cs-bab-body > .cs-btn { width: 100%; margin-top: auto; }
.cs-page .cs-bab .cs-btn:disabled { background: #d5dae3; border-color: #d5dae3; color: #374151 !important; cursor: not-allowed; }
.cs-bab-pick-controls { display: flex; justify-content: center; width: 100%; margin-top: auto; }
.cs-bab-qty { align-self: auto; }
.cs-bab-qty span { min-width: 40px; text-align: center; font-size: 16px; font-weight: 600; color: var(--cs-ink); }
.cs-bab-summary { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 12px; border: 1px solid var(--cs-line); background: var(--cs-white); }
.cs-page .cs-bab-summary h2 { margin-bottom: 4px; font-size: 24px; }
.cs-bab-summary h2:focus { outline: none; }
.cs-bab-summary h2:focus-visible { outline: 2px solid var(--cs-cobalt); }
.cs-bab-lines { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cs-bab-lines li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 8px 10px; align-items: center; font-size: 14px; }
.cs-bab-lines li > img { grid-column: 1; grid-row: 1 / 3; align-self: start; }
.cs-bab-line-name { grid-column: 2; grid-row: 1; }
.cs-bab-lines .cs-bab-remove { grid-column: 3; grid-row: 1; }
.cs-bab-lines img { width: 48px; height: 48px; object-fit: cover; object-position: 50% 0; border-radius: 6px; background: var(--cs-tint); }
.cs-bab-line-name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.cs-bab-line-qty { grid-column: 2 / 4; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-bab-line-qty .cs-qty button { width: 34px; height: 36px; font-size: 18px; }
.cs-bab-line-qty .cs-qty span { min-width: 28px; font-size: 15px; }
.cs-bab-remove { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--cs-ink); cursor: pointer; }
.cs-bab-remove:hover { background: var(--cs-tint); color: var(--cs-cobalt); }
.cs-bab-remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cs-bab-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; }
.cs-bab-total { padding-top: 12px; border-top: 1px solid var(--cs-line); font-size: 17px; }
.cs-bab-limits { margin: 0; padding: 10px 14px; list-style: none; border-radius: 6px; background: var(--cs-tint); color: var(--cs-ink); font-size: 14px; }
.cs-bab-problems { padding: 14px 16px; border-radius: 6px; background: #fef3c7; color: #5b3a05; font-size: 15px; }
.cs-bab-problems ul { margin: 6px 0 0; padding-left: 18px; }
.cs-bab-submit { width: 100%; }
.cs-bab-link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--cs-cobalt); font-weight: 600; text-decoration: underline; cursor: pointer; }
.cs-bab-editing .cs-bab-link { min-height: 0; }
.cs-bab-clear { align-self: center; }
.cs-bab-added { flex-wrap: wrap; }
.cs-bab-added .cs-bab-link { min-height: 32px; color: #14532d; }
.cs-bab-bar { display: none; }

@media (max-width: 1024px) {
    .cs-bab-builder { grid-template-columns: minmax(0, 1fr); }
    .cs-bab-summary { position: static; }
    .cs-bab-bar { position: sticky; bottom: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cs-line); background: var(--cs-white);
        box-shadow: 0 -4px 16px rgba(11, 31, 58, .08); font-size: 15px; }
}
@media (max-width: 760px) {
    .cs-bab-status { padding-top: 24px; }
    .cs-bab-builder { gap: 24px; padding-top: 20px; }
    .cs-bab-chips { gap: 8px; margin-bottom: 16px; }
    .cs-bab-chip { padding: 8px 14px; }
    .cs-bab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cs-bab-pick { padding: 8px 8px 14px; }
    .cs-bab-body { padding: 12px 2px 0; }
    .cs-page .cs-bab-body h3 { font-size: 15px; }
    .cs-bab-price { font-size: 15px; }
    .cs-bab-body > .cs-btn { padding: 0 8px; font-size: 13px; white-space: normal; text-align: center; }
    .cs-bab-pick-controls .cs-qty button { width: 40px; }
    .cs-bab-pick-controls .cs-qty span { min-width: 30px; }
    .cs-bab-summary { padding: 20px 16px; }
    .cs-bab-lines li { grid-template-columns: 40px minmax(0, 1fr) 32px; gap: 8px; }
    .cs-bab-lines img { width: 40px; height: 40px; }
    .cs-bab-soon-actions .cs-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-bab-pick { transition: none; }
}

/* ---------- Cookie consent (round 19; js/consent.js, /cookies) ----------
   The banner and the "Cookie settings" dialog live outside #app (appended to <body> by consent.js), so they use literal
   colours instead of the .cs-* tokens. Reject and Accept share one button style: equal prominence by design. */
.cs-policy-body .cs-policy-linkbtn { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: #1f55d6 !important; text-decoration: underline; cursor: pointer; }
.cs-policy-body .cs-policy-linkbtn:focus-visible { outline: 3px solid #1f55d6; outline-offset: 2px; }
.cs-policy-body table { display: block; overflow-x: auto; margin: 0 0 16px; font-size: 14px; }
.cs-policy-body th { text-align: left; font-weight: 600; color: #16213a; }
.cs-policy-body code { font-size: 13px; color: #0b1f3a !important; background: #e4effb !important; padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
.cs-footer-legal .cs-footer-linkbtn { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: rgba(255, 255, 255, .82); cursor: pointer; }
.cs-footer-legal .cs-footer-linkbtn:hover { color: #ffffff; text-decoration: underline; }
.cs-footer-legal .cs-footer-linkbtn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; border-radius: 2px; }
.apx-consent, .apx-consent-dialog { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #16213a; font-size: 15px; line-height: 1.55; }
.apx-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99990; max-width: 1100px; margin: 0 auto; background: #ffffff; border: 1px solid #dce5f0; border-radius: 14px; box-shadow: 0 12px 40px rgba(11, 31, 58, .22); padding: 20px 24px; }
.apx-consent:focus { outline: none; }
.apx-consent:focus-visible { outline: 3px solid #1f55d6; outline-offset: 3px; }
.apx-consent-inner { display: flex; gap: 20px 28px; align-items: center; }
.apx-consent-copy { flex: 1 1 auto; min-width: 0; }
.apx-consent-copy p, .apx-consent-dialog p { margin: 0 0 8px; color: #374151; }
.apx-consent a { color: #1f55d6; text-decoration: underline; }
.apx-consent-title { font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif; font-weight: 500; font-size: 22px; margin: 0 0 6px; color: #16213a; }
.apx-consent-gpc { font-size: 14px; color: #0b1f3a !important; background: #eef2f8; border-radius: 8px; padding: 8px 10px; }
.apx-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 0 0 auto; }
.apx-consent .apx-consent-actions { flex-direction: column; align-items: stretch; min-width: 230px; }
.apx-consent-btn { appearance: none; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 2px solid #0b1f3a; background: #0b1f3a; color: #ffffff; font: inherit; font-weight: 600; cursor: pointer; }
.apx-consent-btn:hover { background: #16213a; }
.apx-consent-link { appearance: none; min-height: 44px; background: none; border: 0; color: #1f55d6; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 6px 10px; }
.apx-consent-btn:focus-visible, .apx-consent-link:focus-visible, .apx-consent-close:focus-visible, .apx-consent-dialog a:focus-visible,
.apx-consent a:focus-visible, .apx-consent-cat input:focus-visible { outline: 3px solid #1f55d6; outline-offset: 3px; }
.apx-consent-title:focus { outline: none; }
.apx-consent-title:focus-visible { outline: 3px solid #1f55d6; outline-offset: 3px; }
html.apx-consent-open { overflow: hidden; }
.apx-consent-backdrop { position: fixed; inset: 0; z-index: 100001; background: rgba(11, 31, 58, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.apx-consent-dialog { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 32px); overflow-y: auto; background: #ffffff; border-radius: 14px; padding: 26px 26px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.apx-consent-dialog .apx-consent-title { padding-right: 40px; }
.apx-consent-dialog a { color: #1f55d6; text-decoration: underline; }
.apx-consent-cats { margin: 14px 0 18px; display: grid; gap: 12px; }
.apx-consent-cat { display: grid; grid-template-columns: 24px 1fr; gap: 2px 10px; align-items: start; padding: 12px 14px; border: 1px solid #dce5f0; border-radius: 10px; }
.apx-consent-cat input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #1f55d6; }
.apx-consent-cat label { font-weight: 600; color: #16213a; }
.apx-consent-cat p { grid-column: 2; font-size: 14px; margin: 0; }
.apx-consent-dialog .apx-consent-actions .apx-consent-btn { flex: 1 1 160px; }
.apx-consent-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; font-size: 28px; line-height: 1; color: #16213a; cursor: pointer; }
.apx-consent-close:hover { background: #e4effb; }
@media (max-width: 760px) {
    .apx-consent { left: 8px; right: 8px; bottom: 8px; padding: 16px; max-height: calc(100vh - 16px); overflow-y: auto; }
    .apx-consent-inner { flex-direction: column; align-items: stretch; }
    .apx-consent .apx-consent-actions { min-width: 0; }
    .apx-consent-title { font-size: 20px; }
    .apx-consent-dialog { padding: 20px 16px 16px; }
    /* Owner (2026-10-14): the first-visit banner covered 54-72% of a phone screen. Compact on phones: the full text stays,
       in its own short scroll area (the Cookie policy link at its end scrolls it for keyboard users); Reject and Accept side by side with equal weight; Manage below.
       The page gets bottom padding while it is open (consent.js), so every control can be scrolled above it. */
    .apx-consent { padding: 12px 14px; font-size: 14px; line-height: 1.45; overflow: visible; max-height: none; }
    .apx-consent-inner { gap: 10px; }
    .apx-consent-title { font-size: 17px; margin-bottom: 4px; }
    .apx-consent-copy { max-height: min(18vh, 150px); overflow-y: auto; overscroll-behavior: contain; }
    .apx-consent .apx-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .apx-consent .apx-consent-actions .apx-consent-btn { padding: 8px 10px; font-size: 14px; }
    .apx-consent .apx-consent-actions .apx-consent-link { grid-column: 1 / -1; min-height: 32px; padding: 2px 8px; }
}
/* A spacer after the page while the banner is open (not body padding: admin layouts give body a fixed 100% height, so
   padding stays inside it and the page could not be scrolled far enough to bring the last controls above the banner). */
html.apx-consent-showing body::after { content: ""; display: block; flex: none; height: var(--apx-consent-h, 0px); }

/* ---------- Round 22: shop polish (owner) ---------- */
/* Compact shop header: heading and one line; a small photo on wide screens only (hidden from 900px down). */
.cs-page-hero--compact .cs-page-hero-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
.cs-page-hero--compact .cs-page-hero-copy { gap: 6px; }
.cs-page .cs-page-hero--compact h1 { font-size: clamp(26px, 2.6vw, 34px); }
.cs-page-hero--compact .cs-page-hero-lead { font-size: 16px; max-width: none; margin: 0; }
.cs-page-hero--compact .cs-page-hero-photo { width: 200px; max-width: 200px; border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
.cs-page-hero--compact .cs-page-hero-photo img { aspect-ratio: 16 / 10; }
.cs-page-hero--compact + .cs-shop { padding-top: 20px; }

/* Cards: sizes under the name, "From $X", bundle contents and savings. Text colours meet 4.5:1 on white. */
.product-card .card-sizes { margin: 0 0 4px; font-size: 13px; line-height: 1.35; color: var(--cs-muted, #5d6b82); text-align: center; }
.product-card .card-bundle-count { margin-bottom: 2px; font-weight: 600; color: var(--cs-ink, #16213a); }
.product-card .card-bundle-contents { list-style: none; margin: 0 0 6px; padding: 0; font-size: 13px; line-height: 1.4; color: var(--cs-muted, #5d6b82); text-align: center; }
.product-card .card-price-from { font-weight: 500; }
.product-card .card-bundle-save { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: #14532d; text-align: center; }
.cs-page .cs-card .product-name a, .cs-home .product-card .product-name a { text-transform: none; }
/* Names line up across a row whatever a card's actions are ("Choose a size" is one button, others two). */
.cs-page .cs-card .product-info, .cs-home .product-card.cs-home-card .product-info { justify-content: flex-start !important; }

/* Product page: one size as text; packaging note on the photo. */
.cs-single-size { display: flex; gap: 10px; align-items: baseline; margin: 0; }
.cs-single-size > span:last-child { font-size: 15px; color: var(--cs-ink); }
.cs-packaging-note { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, .94); color: var(--cs-ink); font-size: 13px; font-weight: 600; box-shadow: 0 2px 8px rgba(11, 31, 58, .12); }

/* Loading placeholders (StorefrontSkeleton): the content's own space, no overlay. */
.cs-skel { width: 100%; }
.cs-skel-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 10px 16px; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-white); }
.cs-skel-box, .cs-skel-line { background: linear-gradient(90deg, #eef0f4 0%, #f6f7f9 50%, #eef0f4 100%); background-size: 200% 100%; animation: cs-skel-shine 1.4s ease-in-out infinite; border-radius: 8px; }
.cs-skel-photo { width: 100%; aspect-ratio: 1; }
.cs-skel-line { width: 70%; height: 14px; border-radius: 4px; }
.cs-skel-line--title { width: 60%; height: 18px; margin-top: 6px; }
.cs-skel-line--short { width: 40%; }
.cs-skel-line--price { width: 30%; }
.cs-skel-line--heading { width: 80%; height: 30px; }
.cs-skel-button { width: 100%; height: 44px; border-radius: 999px; }
.cs-skel-sizes { width: 100%; height: 56px; }
.cs-skel-detail .cs-skel-photo { border-radius: 12px; }
.cs-skel-info { display: flex; flex-direction: column; gap: 14px; }
.cs-skel-info .cs-skel-line { width: 100%; }
.cs-skel-info .cs-skel-line--short { width: 30%; }
.cs-skel-info .cs-skel-line--heading { width: 75%; }
.cs-skel-info .cs-skel-line--price { width: 25%; }
.cs-skel-block { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 160px; color: var(--cs-muted, #5d6b82); font-size: 15px; }
.cs-skel--page .cs-skel-block { min-height: 50vh; }
.cs-skel-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c9d3e6; border-top-color: var(--cs-cobalt, #1f55d6); animation: cs-skel-spin .8s linear infinite; }
@keyframes cs-skel-shine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes cs-skel-spin { to { transform: rotate(360deg); } }
.cs-home .cs-skel--home { grid-column: 1 / -1; }
.cs-home .cs-skel--home .cs-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Build a Bundle feature above the shop footer. */
.cs-bab-promo-band { background: var(--cs-soft); border-top: 1px solid var(--cs-line); margin-top: 48px; }
.cs-bab-promo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding-top: 28px; padding-bottom: 28px; }
.cs-bab-promo-photos { display: flex; gap: 10px; }
.cs-bab-promo-photos picture, .cs-bab-promo-photos .apx-picture { display: contents; }
.cs-bab-promo-photo { display: block; width: 104px; height: 104px; object-fit: cover; border-radius: 10px; background: var(--cs-white); border: 1px solid var(--cs-line); }
.cs-bab-promo-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-bab-promo-copy .cs-eyebrow { margin: 0; }
.cs-page .cs-bab-promo-title { margin: 0; font-family: var(--cs-serif); font-size: 26px; font-weight: 500; line-height: 1.2; color: var(--cs-ink); }
.cs-bab-promo-lead { margin: 0; font-size: 16px; color: var(--cs-muted); }
.cs-bab-promo-cta { white-space: nowrap; }

@media (max-width: 900px) {
    .cs-page-hero--compact .cs-page-hero-inner { grid-template-columns: minmax(0, 1fr); padding-top: 18px; padding-bottom: 18px; }
    .cs-bab-promo { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: left; }
    .cs-bab-promo-cta { justify-self: start; }
}
@media (max-width: 760px) {
    .cs-page .cs-page-hero--compact h1 { font-size: 26px; }
    .cs-page-hero--compact .cs-page-hero-lead { font-size: 15px; }
    .cs-page-hero--compact .cs-page-hero-inner { padding-top: 14px; padding-bottom: 14px; }
    .cs-page-hero--compact .cs-eyebrow { display: none; }
    .product-card .card-sizes, .product-card .card-bundle-contents, .product-card .card-bundle-save { font-size: 12px; }
    .cs-bab-promo-band { margin-top: 32px; }
    .cs-bab-promo-photo { width: 84px; height: 84px; }
    .cs-bab-promo-cta { width: 100%; justify-content: center; }
    .cs-home .cs-skel--home .cs-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .cs-skel-box, .cs-skel-line, .cs-skel-spinner { animation: none; }
}

/* =====================================================================================================================
   Visual polish (round 23, owner): card lift and photo zoom, buy-button feedback, the optional home hero clip and
   on-request product video. Restrained on purpose:
   - cards (home featured + bundles, shop / category / search, Build a Bundle picks, /categories), home category tiles,
     the Build a Bundle feature and the hero buttons: a 2px lift, a soft shadow and a <=1.03 photo zoom INSIDE the
     photo's overflow-hidden frame, 150-250 ms. transform / box-shadow / opacity only: nothing moves in the layout (CLS 0).
   - the hover look only on devices that really hover (mouse / trackpad): a tap on a phone never leaves a card lifted.
   - keyboard users get the same look on focus (:focus-visible, or a card that holds the focused link / button).
   - prefers-reduced-motion: no lift, zoom, nudge, fade or slide anywhere in the storefront; shadows and colours stay, so
     every state is still visible. Loading indicators (spinners) keep turning; non-essential motion stops.
   - nothing is tied to scrolling (no parallax, no scroll hijacking, no smooth-scroll override), no 3D / WebGL.
   ===================================================================================================================== */
.cs-home .product-card.cs-home-card, .cs-page .product-card.cs-card, .cs-bab-pick, .cs-cat-card, .cs-home-tile {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cs-home .cs-home-card .image-container img, .cs-page .cs-card .image-container img, .cs-bab-art img { transition: transform .25s ease; }
.cs-text-link, .cs-cat-row a, .cs-bab-chip { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
/* Buy buttons: colour change plus a soft shadow on hover. */
.apex-buy-btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }

/* Keyboard focus: the hover look on any device. */
.cs-home .product-card.cs-home-card:has(:focus-visible), .cs-page .product-card.cs-card:has(:focus-visible),
.cs-bab-pick:has(:focus-visible), .cs-home-tile:focus-visible, .cs-cat-card:focus-visible { box-shadow: 0 10px 28px rgba(11, 31, 58, .14); }
.cs-cat-card:focus-visible { border-color: var(--cs-cobalt); }

@media (hover: hover) and (pointer: fine) {
    .cs-home .product-card.cs-home-card:hover, .cs-page .product-card.cs-card:hover, .cs-bab-pick:hover,
    .cs-home-tile:hover, .cs-cat-card:hover { box-shadow: 0 10px 28px rgba(11, 31, 58, .12); }
    .cs-page .product-card.cs-card:hover, .cs-home .product-card.cs-home-card:hover { border-color: var(--cs-line); }
    .cs-cat-card:hover { border-color: var(--cs-cobalt); }
    .cs-home-hero-actions .cs-btn:hover, .cs-home-build .cs-btn:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
    .cs-bab-promo-cta:hover { box-shadow: 0 6px 18px rgba(11, 31, 58, .18); }
    .apex-buy-btn--primary:hover:not(:disabled), .apex-buy-btn--outline:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(11, 31, 58, .16); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .cs-home .product-card.cs-home-card:hover, .cs-page .product-card.cs-card:hover, .cs-bab-pick:hover,
    .cs-home-tile:hover, .cs-cat-card:hover { transform: translateY(-2px); }
    .cs-home .product-card.cs-home-card:hover .image-container img, .cs-page .product-card.cs-card:hover .image-container img,
    .cs-bab-pick:hover .cs-bab-art img, .cs-home-tile:hover .cs-home-tile-photo { transform: scale(1.03); }
    .cs-home-hero-actions .cs-btn:hover, .cs-home-build .cs-btn:hover, .cs-bab-promo-cta:hover { transform: translateY(-1px); }
    a:hover > .cs-arrow, a:hover .cs-home-tile-cta .cs-arrow { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) {
    .cs-home .product-card.cs-home-card:has(:focus-visible), .cs-page .product-card.cs-card:has(:focus-visible),
    .cs-bab-pick:has(:focus-visible), .cs-home-tile:focus-visible, .cs-cat-card:focus-visible { transform: translateY(-2px); }
}

/* Optional hero clip (HeroVideo.razor, HomeHeroVideo; round 31): the slow water BACKGROUND, drawn inside
   .cs-home-hero-water (behind the veil, the copy and the product photo), covering the whole hero, invisible until it is
   actually playing (the CSS water / poster still shows until then and whenever it fails). The pause control sits in the
   hero's bottom-right corner, below the photo card and away from the shop buttons. */
.cs-hero-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
    opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.cs-home-hero-water.is-playing .cs-hero-video { opacity: 1; }
/* Round 23 audit: the copy layer must never take the clicks meant for the Pause button. */
.cs-home-hero-inner { pointer-events: none; }
.cs-home-hero-copy, .cs-home-hero-photo { pointer-events: auto; }
.cs-hero-video-toggle { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; background: rgba(11, 31, 58, .78);
    color: var(--cs-white); cursor: pointer; transition: background .15s; }
.cs-hero-video-toggle[hidden] { display: none; }
.cs-hero-video-toggle:hover { background: rgba(11, 31, 58, .94); }
.cs-hero-video-toggle:focus-visible { outline: 2px solid var(--cs-cobalt); outline-offset: 3px; }
.cs-hero-video-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cs-hero-video-icon--play { fill: currentColor; }
.cs-hero-video-toggle[aria-pressed="false"] .cs-hero-video-icon--play,
.cs-hero-video-toggle[aria-pressed="true"] .cs-hero-video-icon--pause { display: none; }
@media (max-width: 900px) {
    .cs-hero-video-toggle { right: 12px; bottom: 14px; }
}

/* Product video (ProductVideo.razor): poster photo and a Play button; the <video> exists only after the press. */
.cs-product-video { position: relative; margin: 0; overflow: hidden; border-radius: 8px; background: var(--cs-tint); }
.cs-product-video img, .cs-product-video video { display: block; width: 100%; height: auto; }
.cs-product-video-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(11, 31, 58, .86); color: var(--cs-white);
    font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; }
.cs-product-video-play:hover { background: var(--cs-navy); }
.cs-product-video-play:focus-visible { outline: 3px solid #1f55d6; outline-offset: 3px; }
.cs-product-video-play svg { width: 18px; height: 18px; fill: currentColor; }

/* Reduced motion: every transition in the storefront is instant (state changes still show), anchor jumps are not
   smoothed, and the non-essential animations stop. Spinners and the snapshot loading pill keep their own rules. */
@media (prefers-reduced-motion: reduce) {
    .cs-shell, .cs-shell *, .cs-shell *::before, .cs-shell *::after, .cs-auth, .cs-auth *, .cs-auth *::before, .cs-auth *::after,
    #apex-pre *, .cart-sidebar, .cart-sidebar *, .cart-overlay, .apx-consent, .apx-consent * {
        transition-duration: 0s !important; transition-delay: 0s !important; }
    html:has(.cs-shell), html:has(.cs-auth), html:has(#apex-pre) { scroll-behavior: auto; }
    .cs-shell .shake, .cs-shell .attention, .cs-shell .patriotic-flash, .pop-in, .pop-out { animation: none !important; }
    /* The clip never loads under reduced motion; if it was already playing it is shown without a fade. */
    .cs-home-hero-water.is-playing .cs-hero-video { opacity: 1; }
}