/* Homepage only. Geometry is measured from the 1728px desktop and 402px mobile
   handoffs. Real content may grow a section; it is never clipped to fake a match. */
.home-shell.site-shell {
    --hp-u: min(1px, calc(100vw / 1728));
    /* The content column. Every section between the header and the footer aligns to it; the footer
       and five of the sections already agreed on 100u, while the hero (80u) and the two promo bands
       (64u) had each been transcribed separately from the handoff and sat outside that column. */
    --hp-gutter: calc(100 * var(--hp-u));
    --hp-line: #d9d9d9;
    --hp-media: #d9d9d9;
    --hp-soft: #eaeaea;
    --hp-ink: #353535;
    --hp-teal: #2cc3b3;
    --hp-mint: #a7e5d9;
    color: var(--hp-ink); background: #fff; color-scheme: light;
    font-family: Peyda, var(--st-font-fa), sans-serif;
    min-height: 100vh; overflow-x: clip; position: relative;
}
.home-shell *, .home-shell *::before, .home-shell *::after { box-sizing: border-box; }
.home-shell.site-shell .st-main { padding: 0; flex: none; }
.home-shell.site-shell .st-main > .st-container { padding: 0; width: 100%; max-width: 1728px; margin: 0 auto; }
.home-shell a { color: inherit; text-decoration: none; }
.home-shell button { font: inherit; color: inherit; cursor: pointer; }
.home-shell :is(a, button, summary):focus-visible { outline: 2px solid #168d85; outline-offset: 4px; }
.home-shell :is(h1, h2, h3, p) { margin: 0; }
.home-shell .st-img { display: block; width: 100%; height: 100%; background: transparent; border-radius: inherit; }
.home-shell .st-img picture { display: block; width: 100%; height: 100%; }
.home-shell .st-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.home-shell .st-img__ph { visibility: hidden; }
.hp-menu-toggle, .hp-mobile-link { display: none; }
.hp-header { height: calc(160 * var(--hp-u)); max-width: 1728px; width: 100%; margin: auto; position: relative; background: #fff; z-index: 201; }
.hp-header__row { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(50 * var(--hp-u)); direction: ltr; }
.hp-logo { display: inline-flex; align-items: center; direction: ltr; gap: 0; color: #1b5962 !important; line-height: 1; }
.hp-logo__mark { width: calc(30 * var(--hp-u)); height: calc(36 * var(--hp-u)); object-fit: contain; }
.hp-logo__wordmark { display: block; width: calc(150 * var(--hp-u)); height: auto; max-height: calc(22 * var(--hp-u)); margin-left: calc(-6 * var(--hp-u)); object-fit: contain; }
.hp-nav { display: flex; align-items: center; gap: calc(46 * var(--hp-u)); direction: rtl; font-size: max(10px, calc(13 * var(--hp-u))); }
.hp-nav button { background: none; border: 0; display: flex; align-items: center; gap: 3px; padding: 8px 0; }
.hp-header__actions { display: flex; gap: calc(30 * var(--hp-u)); align-items: center; color: #60666a; }
.hp-header__actions > :is(a, button) { position: relative; display: grid; place-items: center; border: 0; background: none; padding: 0; min-width: 20px; min-height: 26px; }
.hp-header__actions > .hp-menu-toggle { display: none; }
.hp-header__actions svg { width: max(16px, calc(20 * var(--hp-u))); height: max(16px, calc(20 * var(--hp-u))); }
.hp-cart__count { position: absolute; inset: -8px -8px auto auto; font-size: 10px; border-radius: 50%; min-width: 14px; background: var(--hp-mint); color: #164e56; }
.hp-focus-backdrop { position: absolute; inset: 0; width: 100%; background: #0005; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0; z-index: 200; }
.hp-header.is-focused { position: relative; background: transparent; }
/* Sheet height follows the panel: the handoff geometry leaves 112u above the panel and 44u below it.
   The panel itself has a pixel floor, so a real category tree is never clipped to match the mock. */
.hp-header.is-focused::before { content: ""; position: absolute; top: calc(48 * var(--hp-u)); left: calc(32 * var(--hp-u)); right: calc(32 * var(--hp-u)); height: calc(calc(156 * var(--hp-u)) + 440px); border-radius: calc(10 * var(--hp-u)); background: #fff; z-index: -1; }
.hp-focus-panel { position: absolute; top: 100%; right: calc(80 * var(--hp-u)); left: calc(80 * var(--hp-u)); height: 440px; padding: calc(28 * var(--hp-u)) calc(40 * var(--hp-u)) calc(32 * var(--hp-u)); font-size: max(12px, calc(16 * var(--hp-u))); }
/* Category mega menu. Roots sit in the right rail; the hovered root's branches fill the panel.
   Every root's group is in the DOM so the narrow layout, which has no hover, can stack them all. */
.hp-mega { display: grid; grid-template-columns: max(220px, calc(300 * var(--hp-u))) minmax(0, 1fr); gap: calc(32 * var(--hp-u)); height: 100%; }
.hp-mega__roots { display: flex; flex-direction: column; overflow: hidden; padding-left: calc(20 * var(--hp-u)); border-left: 1px solid #ebeeee; }
.hp-mega__rootlist { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: calc(2 * var(--hp-u)); }
.hp-mega__root { display: flex; align-items: center; gap: calc(10 * var(--hp-u)); padding: calc(9 * var(--hp-u)) calc(12 * var(--hp-u)); border-radius: calc(8 * var(--hp-u)); font-weight: 600; line-height: 1.6; transition: background .15s, color .15s; }
.hp-mega__root:hover, .hp-mega__root.is-active { background: #e9f8f5; color: #14867c; }
.hp-mega__root-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hp-mega__root > svg:last-child { flex: 0 0 auto; opacity: 0; transition: opacity .15s; }
.hp-mega__root:hover > svg:last-child, .hp-mega__root.is-active > svg:last-child { opacity: 1; }
.hp-mega__ic { flex: 0 0 auto; display: grid; place-items: center; width: calc(34 * var(--hp-u)); height: calc(34 * var(--hp-u)); min-width: 26px; min-height: 26px; border-radius: calc(8 * var(--hp-u)); background: #e9f8f5; color: #14867c; overflow: hidden; }
.hp-mega__ic img { max-width: 70%; max-height: 70%; object-fit: contain; }
.hp-mega__all { flex: 0 0 auto; display: flex; align-items: center; gap: calc(8 * var(--hp-u)); padding: calc(11 * var(--hp-u)) calc(12 * var(--hp-u)); font-weight: 700; color: #14867c; border-top: 1px solid #ebeeee; }
.hp-mega__all:hover { background: #e9f8f5; border-radius: calc(8 * var(--hp-u)); }
.hp-mega__panel { min-width: 0; overflow: auto; }
.hp-mega__group { display: none; }
.hp-mega__group.is-active { display: block; }
.hp-mega__head { display: flex; align-items: center; gap: calc(10 * var(--hp-u)); padding-bottom: calc(14 * var(--hp-u)); border-bottom: 1px solid #ebeeee; font-size: max(13px, calc(18 * var(--hp-u))); }
.hp-mega__head strong { font-weight: 700; }
.hp-mega__head > a { margin-right: auto; display: flex; align-items: center; gap: calc(5 * var(--hp-u)); font-size: max(11px, calc(13 * var(--hp-u))); font-weight: 600; color: #14867c; }
.hp-mega__head > a:hover { text-decoration: underline; }
.hp-mega__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: calc(18 * var(--hp-u)) calc(28 * var(--hp-u)); padding-top: calc(18 * var(--hp-u)); align-content: start; }
.hp-mega__col { min-width: 0; }
.hp-mega__branch { display: block; font-size: max(12px, calc(15 * var(--hp-u))); font-weight: 700; line-height: 1.6; color: #2f3838; overflow-wrap: anywhere; }
.hp-mega__branch:hover { color: #14867c; }
.hp-mega__leaves { list-style: none; margin: calc(7 * var(--hp-u)) 0 0; padding: 0; display: flex; flex-direction: column; gap: calc(5 * var(--hp-u)); }
.hp-mega__leaves a { display: block; font-size: max(11px, calc(13 * var(--hp-u))); line-height: 1.8; color: #6b7575; overflow-wrap: anywhere; }
.hp-mega__leaves a:hover { color: #14867c; }
.hp-mega__links { display: none; }
body:has(.home-shell .hp-header.is-focused) { overflow: hidden; }
.hp-hero { min-height: calc(840 * var(--hp-u)); padding: calc(91 * var(--hp-u)) var(--hp-gutter) calc(185 * var(--hp-u)); display: grid; grid-template-columns: minmax(0, 770fr) minmax(0, 718fr); gap: calc(80 * var(--hp-u)); align-items: center; }
.hp-hero__copy { text-align: right; transform: translateY(calc(-25 * var(--hp-u))); }
.hp-hero__copy h1, .hp-promo__card h2 { font-size: calc(56 * var(--hp-u)); font-weight: 800; line-height: 1.5; background: linear-gradient(100deg, #2bcdc0, #24878b); color: transparent; background-clip: text; -webkit-background-clip: text; }
.hp-hero__copy h1 { font-size: calc(54 * var(--hp-u)); white-space: nowrap; }
.hp-hero__copy p { font-size: calc(28 * var(--hp-u)); line-height: 1.8; margin-top: calc(8 * var(--hp-u)); }
/* Real buttons, sized by their label. The frames were fixed-width boxes because the handoff drew
   them empty; a width chosen for a shape cannot hold copy an administrator can change. */
.hp-hero__actions { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; gap: calc(12 * var(--hp-u)); margin-top: calc(26 * var(--hp-u)); }
.hp-hero__cta { display: inline-flex; align-items: center; justify-content: center; min-height: calc(48 * var(--hp-u)); min-width: calc(180 * var(--hp-u)); padding: 0 calc(30 * var(--hp-u)); border-radius: calc(6 * var(--hp-u)); background: var(--hp-teal); color: #fff !important; font-size: max(13px, calc(17 * var(--hp-u))); font-weight: 700; line-height: 1; transition: background .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s cubic-bezier(.22,.61,.36,1), transform .2s cubic-bezier(.22,.61,.36,1); }
.hp-hero__cta:hover { background: #22a89b; box-shadow: 0 calc(8 * var(--hp-u)) calc(20 * var(--hp-u)) #2cc3b340; transform: translateY(calc(-2 * var(--hp-u))); }
.hp-hero__cta--ghost { background: #fff; color: #14867c !important; border: 1.5px solid var(--hp-mint); min-width: calc(150 * var(--hp-u)); }
.hp-hero__cta--ghost:hover { background: #e9f8f5; border-color: var(--hp-teal); box-shadow: none; }
.hp-hero__mosaic { direction: ltr; display: grid; grid-template-columns: repeat(100, 1fr); grid-template-rows: 1fr 1fr; height: calc(564 * var(--hp-u)); gap: calc(16 * var(--hp-u)) 0; }
.hp-hero__tile { display: block; min-width: 0; background: var(--hp-media); border-radius: calc(10 * var(--hp-u)); overflow: hidden; }
.hp-hero__tile--1 { grid-column: 1 / 63; margin-right: calc(8 * var(--hp-u)); }
.hp-hero__tile--2 { grid-column: 63 / 101; margin-left: calc(8 * var(--hp-u)); }
.hp-hero__tile--3 { grid-column: 1 / 76; margin-right: calc(8 * var(--hp-u)); }
.hp-hero__tile--4 { grid-column: 76 / 101; margin-left: calc(8 * var(--hp-u)); }
.hp-section { border-top: calc(8 * var(--hp-u)) solid var(--hp-line); }
.hp-section > h2 { text-align: center; font-weight: 700; font-size: calc(28 * var(--hp-u)); line-height: 1.5; }
/* Category board. The homepage used to show six flat icon tiles, which hid both the
   hierarchy and every root past the sixth. One card per root category, its branches
   listed inside it, keeps the tree readable and shows all of them. */
/* Category icons, one per root. The frames used to be flat #d9d9d9 squares, which read as missing
   images because every category here is configured with an icon rather than a picture; they now
   carry the brand tint and invert to solid teal on hover so the whole tile is the affordance. */
.hp-categories { padding: calc(82 * var(--hp-u)) var(--hp-gutter) calc(92 * var(--hp-u)); }
.hp-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(132px, calc(186 * var(--hp-u)))), 1fr)); gap: calc(44 * var(--hp-u)) calc(24 * var(--hp-u)); margin-top: calc(60 * var(--hp-u)); }
.hp-category { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(18 * var(--hp-u)); min-width: 0; }
.hp-category__image { display: grid; place-items: center; width: calc(112 * var(--hp-u)); height: calc(112 * var(--hp-u)); min-width: 78px; min-height: 78px; border-radius: calc(26 * var(--hp-u)); background: linear-gradient(145deg, #eefaf7 0%, #dff2f1 100%); color: #14867c; box-shadow: inset 0 0 0 1px #14867c1f; overflow: hidden; transition: background .28s cubic-bezier(.22,.61,.36,1), color .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1); }
.hp-category__image img { max-width: 54%; max-height: 54%; object-fit: contain; }
.hp-category:hover .hp-category__image { background: linear-gradient(145deg, #2cc3b3 0%, #14867c 100%); color: #fff; transform: translateY(calc(-2 * var(--hp-u))); box-shadow: none; }
.hp-category__title { font-size: max(12px, calc(17 * var(--hp-u))); font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; transition: color .28s cubic-bezier(.22,.61,.36,1); }
.hp-category:hover .hp-category__title { color: #14867c; }
.hp-cat-more { display: flex; width: fit-content; margin: calc(52 * var(--hp-u)) auto 0; align-items: center; gap: calc(8 * var(--hp-u)); font-size: max(13px, calc(16 * var(--hp-u))); font-weight: 600; color: #14867c; border: 1px solid var(--hp-mint); border-radius: calc(8 * var(--hp-u)); padding: calc(10 * var(--hp-u)) calc(26 * var(--hp-u)); transition: background .2s, color .2s, border-color .2s; }
.hp-cat-more:hover { background: var(--hp-teal); border-color: var(--hp-teal); color: #fff; }
.hp-products { min-height: calc(1247 * var(--hp-u)); padding: calc(95 * var(--hp-u)) var(--hp-gutter) calc(100 * var(--hp-u)); }
.hp-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: calc(98 * var(--hp-u)); }
.hp-products-more { display: flex; width: fit-content; min-height: calc(48 * var(--hp-u)); margin: calc(52 * var(--hp-u)) auto 0; align-items: center; justify-content: center; gap: calc(8 * var(--hp-u)); padding: 0 calc(28 * var(--hp-u)); border: 1px solid var(--hp-teal); border-radius: calc(8 * var(--hp-u)); background: var(--hp-teal); color: #fff !important; font-size: max(13px, calc(16 * var(--hp-u))); font-weight: 700; transition: background .2s, border-color .2s, transform .2s; }
.hp-products-more:hover { background: #168d85; border-color: #168d85; transform: translateY(calc(-2 * var(--hp-u))); }
.hp-product { display: block; min-width: 0; border: 1px solid #e9e9e9; padding: calc(15 * var(--hp-u)); border-radius: calc(12 * var(--hp-u)); background: white; }
.hp-product__image { position: relative; height: calc(304 * var(--hp-u)); background: var(--hp-soft); }
.hp-product__discount, .hp-product__stock { position: absolute; left: calc(18 * var(--hp-u)); top: calc(18 * var(--hp-u)); font-size: calc(12 * var(--hp-u)); line-height: 1.5; background: #ff5359; color: #fff; border-radius: 3px; padding: 1px 5px; }
.hp-product__stock { background: #666; }
.hp-product__info { min-height: calc(85 * var(--hp-u)); display: flex; justify-content: space-between; gap: 6px; padding-top: calc(20 * var(--hp-u)); }
.hp-product__title { min-width: 0; }
.hp-product__title h3 { font-size: calc(16 * var(--hp-u)); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.hp-product__title > span { display: block; font-size: calc(12 * var(--hp-u)); color: #969696; line-height: 1.6; }
.hp-product__price { text-align: left; display: flex; flex-direction: column; flex-shrink: 0; font-size: calc(13 * var(--hp-u)); line-height: 1.6; }
.hp-product__price strong { font-weight: 600; }
.hp-product__price del { font-size: calc(11 * var(--hp-u)); color: #aaa; }
.hp-showcase { min-height: calc(1111 * var(--hp-u)); padding: calc(103 * var(--hp-u)) calc(64 * var(--hp-u)) calc(100 * var(--hp-u)); }
.hp-banner { height: calc(900 * var(--hp-u)); position: relative; background: var(--hp-media); border-radius: calc(10 * var(--hp-u)); overflow: hidden; }
.hp-banner > a { display: block; height: 100%; }
.hp-dots { display: flex; direction: ltr; gap: calc(10 * var(--hp-u)); position: absolute; left: calc(48 * var(--hp-u)); bottom: calc(48 * var(--hp-u)); }
.hp-dots > * { display: block; height: calc(20 * var(--hp-u)); width: calc(20 * var(--hp-u)); padding: 0; border: none; border-radius: 2px; background: #ffffff55; }
.hp-dots .is-active { background: #fff; }
.hp-benefits { min-height: calc(544 * var(--hp-u)); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: calc(60 * var(--hp-u)); padding: calc(100 * var(--hp-u)) var(--hp-gutter); }
.hp-benefit { min-height: calc(336 * var(--hp-u)); border-radius: calc(10 * var(--hp-u)); background: var(--hp-media); text-align: center; padding: calc(56 * var(--hp-u)) calc(22 * var(--hp-u)) calc(30 * var(--hp-u)); }
.hp-benefit__circle { display: grid; place-items: center; color: #14867c; width: calc(140 * var(--hp-u)); height: calc(140 * var(--hp-u)); background: #fff; border-radius: 50%; margin: 0 auto calc(20 * var(--hp-u)); }
.hp-benefit h2 { font-size: calc(24 * var(--hp-u)); font-weight: 800; line-height: 1.5; }
.hp-benefit p { font-size: calc(14 * var(--hp-u)); line-height: 1.65; margin-top: calc(7 * var(--hp-u)); }
/* Sliding brand rail: the marks and nothing else. Framing each logo in a bordered chip put a box
   round artwork that already carries its own shape, so the slot is bare now and the mark is
   centred in it; a brand with no logo uploaded rides the rail as its name. */
/* Anchor the oversized track at the LEFT edge even on the RTL storefront. */
.hp-brandrail { height: calc(190 * var(--hp-u)); display: flex; align-items: center; overflow: hidden; direction: ltr; }
.hp-brandrail__track { display: flex; flex: 0 0 auto; align-items: center; width: max-content; direction: ltr; will-change: transform; }
.hp-brandrail__group, .hp-brandrail__sequence { display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; min-width: max-content; }
/* The trailing padding replaces the last gap, including at both cycle seams. */
.hp-brandrail__sequence { gap: clamp(16px, 2vw, 40px); padding-inline-end: clamp(16px, 2vw, 40px); }
.hp-brandrail :is(a, .hp-brandrail-clone) { display: grid; place-items: center; flex: 0 0 auto; min-width: calc(156 * var(--hp-u)); min-height: calc(76 * var(--hp-u)); padding: calc(6 * var(--hp-u)); background: transparent; border-radius: calc(8 * var(--hp-u)); cursor: pointer; }
/* object-fit centres the mark in this box whatever its aspect ratio; sizing the image itself
   smaller than the box would leave it parked against one corner instead.
   The selector has to outrank `.home-shell .st-img img` a few lines up, which crops every image on
   the page to fill its frame. That is right for a banner and wrong for a logo: it was cutting the
   sides off every square mark on the rail. */
.hp-brandrail__media { display: grid; place-items: center; width: calc(136 * var(--hp-u)); height: calc(54 * var(--hp-u)); min-width: 86px; min-height: 34px; }
.hp-brandrail__media .st-img { background: transparent; }
.hp-brandrail__media .st-img__ph { align-items: center; justify-content: center; background: transparent; color: var(--st-muted); }
.home-shell .hp-brandrail__media .st-img img { width: 100%; height: 100%; object-fit: contain; padding: 0; border-radius: 0; filter: grayscale(1) contrast(.9); opacity: .74; transition: filter .18s, opacity .18s; }
.hp-brandrail__name { color: var(--st-muted); font-size: max(13px, calc(26 * var(--hp-u))); font-weight: 700; line-height: 1.4; white-space: nowrap; transition: color .18s; }
.hp-brandrail :is(a, .hp-brandrail-clone):hover img, .hp-brandrail :is(a, .hp-brandrail-clone):focus-visible img { filter: none; opacity: 1; }
.hp-brandrail :is(a, .hp-brandrail-clone):hover .hp-brandrail__name, .hp-brandrail :is(a, .hp-brandrail-clone):focus-visible .hp-brandrail__name { color: var(--st-primary); }
.hp-reviews { min-height: calc(679 * var(--hp-u)); padding-top: calc(90 * var(--hp-u)); padding-bottom: calc(98 * var(--hp-u)); }
.hp-review-track { display: flex; gap: calc(48 * var(--hp-u)); overflow-x: auto; scrollbar-width: none; padding: 0 var(--hp-gutter); margin-top: calc(103 * var(--hp-u)); }
.hp-review-track::-webkit-scrollbar { display: none; }
/* `safe` keeps the first card reachable if the few cards still overflow a narrow viewport; the plain
   keyword before it is the fallback for engines that do not know the safe/unsafe alignment words. */
.hp-review-track--few { justify-content: center; justify-content: safe center; }
.hp-review { width: calc(420 * var(--hp-u)); min-height: calc(336 * var(--hp-u)); flex: 0 0 auto; background: #f3f7f6; border: 1px solid #dfe9e7; border-radius: calc(9 * var(--hp-u)); padding: calc(30 * var(--hp-u)); scroll-snap-align: center; }
.hp-review__head { display: flex; align-items: center; gap: calc(16 * var(--hp-u)); min-height: calc(78 * var(--hp-u)); margin-bottom: calc(10 * var(--hp-u)); font-size: calc(17 * var(--hp-u)); }
.hp-review__avatar { display: grid; place-items: center; flex: 0 0 auto; width: calc(70 * var(--hp-u)); height: calc(70 * var(--hp-u)); border-radius: 50%; background: var(--hp-media); color: var(--st-primary); }
.hp-review__avatar svg { display: block; }
.hp-review__head strong, .hp-review__head > div > span { display: block; }
.hp-review__head > div > span { font-size: calc(12 * var(--hp-u)); }
.hp-review__rating { margin-inline-start: auto; background: #fff; border-radius: 2px; padding: 1px 6px; direction: ltr; unicode-bidi: isolate; font-family: Peyda, var(--st-font-fa), sans-serif; font-size: calc(20 * var(--hp-u)); font-weight: 700; line-height: 1.4; }
.hp-review p { min-height: calc(180 * var(--hp-u)); padding: calc(24 * var(--hp-u)); background: #fff; font-size: calc(15 * var(--hp-u)); line-height: 1.8; overflow-wrap: anywhere; }
.hp-promo { padding: calc(100 * var(--hp-u)) var(--hp-gutter); }
/* Same carousel, the frame the middle of the page had as a plain banner: a taller 16:9 band whose
   slides are edge-to-edge artwork unless copy was written for them. */
.hp-promo--middle { padding: calc(103 * var(--hp-u)) var(--hp-gutter) calc(100 * var(--hp-u)); }
.hp-promo--middle .hp-promo__deck { aspect-ratio: 16 / 9; background: var(--hp-media); }
.hp-promo--middle .hp-promo__card { padding: calc(70 * var(--hp-u)) calc(80 * var(--hp-u)); }
/* Slides stack in one frame and cross-fade; only the active one takes pointer events, so a hidden
   slide's button can never be clicked or tabbed into. */
.hp-promo__deck { position: relative; aspect-ratio: 3.5 / 1; border-radius: calc(10 * var(--hp-u)); overflow: hidden; background: var(--hp-soft); }
.hp-promo__deck > .hp-promo__card { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .55s cubic-bezier(.22,.61,.36,1); }
.hp-promo__deck > .hp-promo__card.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.hp-promo__card .st-img { position: absolute; inset: 0; z-index: 0; }
.hp-promo__card .st-img img { width: 100%; height: 100%; object-fit: cover; }
.hp-promo__copy { position: relative; z-index: 1; }
/* Copy sits on artwork now, so it cannot rely on the frame's own colour. A scrim from the text side
   keeps it legible whatever the administrator uploads, and the heading drops the gradient fill that
   the hero shares - gradient text over a photograph is unreadable at any size. */
/* The scrim exists to keep copy legible over artwork. A slide with no copy — the usual case for
   the middle band, whose wording is part of the image — must not be dimmed for nothing. */
.hp-promo__card.has-copy::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to left, #0a2e2de0 0%, #0a2e2d94 44%, transparent 74%); }
/* A destination with no button label turns the whole frame into the link. */
.hp-promo__cover { position: absolute; inset: 0; z-index: 2; }
.hp-promo__card h2 { background: none; background-clip: border-box; -webkit-background-clip: border-box; color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 calc(2 * var(--hp-u)) calc(12 * var(--hp-u)) #04201f5c; }
.hp-promo__card p { color: #e6f5f2; }
.hp-promo__card { padding: calc(100 * var(--hp-u)) calc(110 * var(--hp-u)) calc(100 * var(--hp-u)) calc(48 * var(--hp-u)); background: var(--hp-media); border-radius: calc(10 * var(--hp-u)); display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; }
.hp-promo__card h2 { font-size: calc(54 * var(--hp-u)); }
.hp-promo__card p { font-size: calc(27 * var(--hp-u)); line-height: 1.7; margin-top: calc(10 * var(--hp-u)); }
.hp-promo__card > a { position: relative; z-index: 1; background: #fff; padding: calc(12 * var(--hp-u)) calc(25 * var(--hp-u)); font-size: calc(14 * var(--hp-u)); border-radius: 2px; flex-shrink: 0; }
.hp-blog { min-height: calc(679 * var(--hp-u)); padding: calc(95 * var(--hp-u)) var(--hp-gutter) calc(100 * var(--hp-u)); }
.hp-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(50 * var(--hp-u)); margin-top: calc(98 * var(--hp-u)); }
.hp-blog-card { display: flex; flex-direction: column; gap: calc(18 * var(--hp-u)); min-width: 0; }
.hp-blog-card__media { display: block; height: calc(336 * var(--hp-u)); background: var(--hp-soft); border-radius: calc(10 * var(--hp-u)); overflow: hidden; transition: box-shadow .35s cubic-bezier(.22,.61,.36,1), transform .35s cubic-bezier(.22,.61,.36,1); }
.hp-blog-card__media .st-img img { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.hp-blog-card:hover .hp-blog-card__media { transform: translateY(calc(-4 * var(--hp-u))); box-shadow: 0 calc(14 * var(--hp-u)) calc(30 * var(--hp-u)) #1f37451f; }
.hp-blog-card:hover .hp-blog-card__media .st-img img { transform: scale(1.055); }
/* Muted by default so the picture leads; the title resolves to full contrast on hover, with the
   rule drawn from the right so it reads in the same direction as the text. */
.hp-blog-card__title { font-size: max(12px, calc(17 * var(--hp-u))); font-weight: 600; line-height: 1.8; color: #8d9696; transition: color .3s cubic-bezier(.22,.61,.36,1); }
.hp-blog-card__title > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* A bar rather than a text underline: the clamped title is a block, so an underline would run the
   full card width under a short last line. The bar grows from the inline start, which is the right. */
.hp-blog-card__title::after { content: ""; display: block; width: 0; height: 2px; margin-top: calc(10 * var(--hp-u)); border-radius: 2px; background: var(--hp-teal); transition: width .45s cubic-bezier(.22,.61,.36,1); }
.hp-blog-card:hover .hp-blog-card__title::after { width: max(34px, calc(48 * var(--hp-u))); }
.hp-blog-card:hover .hp-blog-card__title { color: #2f3838; }
.hp-faq { min-height: calc(1066 * var(--hp-u)); padding: calc(98 * var(--hp-u)) var(--hp-gutter) calc(100 * var(--hp-u)); }
.hp-faq__list { display: grid; gap: calc(32 * var(--hp-u)); margin-top: calc(95 * var(--hp-u)); }
.hp-faq details { background: var(--hp-soft); border-radius: calc(10 * var(--hp-u)); padding: 0 calc(14 * var(--hp-u)); }
.hp-faq summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; min-height: calc(80 * var(--hp-u)); font-size: calc(22 * var(--hp-u)); font-weight: 700; padding: calc(12 * var(--hp-u)) calc(16 * var(--hp-u)) calc(12 * var(--hp-u)) 0; gap: 16px; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary i { width: calc(52 * var(--hp-u)); height: calc(52 * var(--hp-u)); border-radius: 50%; background: var(--hp-media); flex-shrink: 0; display: grid; place-items: center; color: #3f4a4a; transition: transform .25s ease, background .2s ease, color .2s ease; }
.hp-faq summary i svg { width: max(14px, calc(26 * var(--hp-u))); height: max(14px, calc(26 * var(--hp-u))); }
.hp-faq details[open] summary i { transform: rotate(180deg); background: var(--hp-teal); color: #fff; }
.hp-faq summary:hover i { background: var(--hp-mint); color: #14867c; }
.hp-faq details[open] summary { min-height: calc(90 * var(--hp-u)); }
.hp-faq__answer { background: #fff; border-radius: calc(6 * var(--hp-u)); padding: calc(34 * var(--hp-u)); margin: 0 calc(16 * var(--hp-u)) calc(28 * var(--hp-u)); min-height: calc(269 * var(--hp-u)); font-size: calc(22 * var(--hp-u)); line-height: 1.75; white-space: pre-line; }
.hp-empty { grid-column: 1 / -1; width: 100%; align-self: center; text-align: center; color: #777; font-size: max(12px, calc(18 * var(--hp-u))); padding: 20px; }
.hp-data-notice { background: #fff8e5; text-align: center; padding: 12px; font-size: 14px; }
.hp-data-notice button { border: 0; background: none; text-decoration: underline; }
.hp-footer { max-width: 1728px; width: 100%; min-height: calc(886 * var(--hp-u)); margin: auto; border-top: calc(8 * var(--hp-u)) solid var(--hp-line); padding: calc(250 * var(--hp-u)) calc(100 * var(--hp-u)) calc(160 * var(--hp-u)); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; column-gap: calc(80 * var(--hp-u)); row-gap: calc(80 * var(--hp-u)); direction: ltr; position: relative; }
.hp-footer__links { grid-column: 2; grid-row: 1 / 3; direction: rtl; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(35 * var(--hp-u)); text-align: center; }
.hp-footer__links h2 { color: #a1a1a1; font-size: calc(13 * var(--hp-u)); font-weight: 400; margin-bottom: calc(20 * var(--hp-u)); }
.hp-footer__links a { display: block; font-size: calc(14 * var(--hp-u)); font-weight: 600; line-height: 1.8; margin-top: calc(14 * var(--hp-u)); }
.hp-footer__logo { grid-column: 1; grid-row: 1; }
.hp-footer .hp-logo__mark { width: calc(52 * var(--hp-u)); height: calc(64 * var(--hp-u)); }
.hp-footer .hp-logo__wordmark { width: calc(220 * var(--hp-u)); max-height: calc(26 * var(--hp-u)); }
.hp-footer__seals { grid-column: 1; grid-row: 2; display: flex; gap: calc(20 * var(--hp-u)); }
.hp-footer__seals > * { width: calc(98 * var(--hp-u)); height: calc(98 * var(--hp-u)); border: 1px solid #aaa; border-radius: calc(6 * var(--hp-u)); display: grid; place-items: center; }
.hp-footer__seals img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hp-footer__bar { grid-column: 1 / -1; grid-row: 3; background: var(--hp-mint); border-radius: calc(8 * var(--hp-u)); min-height: calc(80 * var(--hp-u)); }
.hp-footer__copyright { grid-column: 1; grid-row: 3; align-self: center; margin-left: calc(32 * var(--hp-u)); font-size: calc(14 * var(--hp-u)); color: #25616a; z-index: 1; }
.hp-footer__contact { grid-column: 2; grid-row: 3; display: flex; align-items: center; justify-content: flex-end; gap: calc(50 * var(--hp-u)); padding-right: calc(200 * var(--hp-u)); font: 500 calc(14 * var(--hp-u))/1.5 Arial, sans-serif; color: #25616a; z-index: 1; }
.hp-footer__socials { grid-column: 2; grid-row: 3; display: flex; justify-self: end; align-self: center; gap: calc(30 * var(--hp-u)); margin-right: calc(48 * var(--hp-u)); color: #25616a; z-index: 1; }
.hp-footer__socials a { display: grid; place-items: center; }
.hp-footer__seal-html { grid-column: 1 / -1; }

@media (max-width: 767px) {
    .home-shell { --hp-u: 1px; }
    .hp-header { height: 88px; }
    .hp-header__row { padding: 0 24px; justify-content: center; }
    .hp-header .hp-logo__wordmark { width: 140px; max-height: 18px; }
    .hp-header .hp-logo__mark, .hp-nav { display: none; }
    .hp-header__actions { position: absolute; inset: 0 24px; gap: 0; pointer-events: none; }
    .hp-header__actions > :is(a, button) { position: absolute; top: 26px; width: 32px; height: 36px; pointer-events: auto; }
    .hp-header__actions svg { width: 20px; height: 20px; }
    .hp-header__actions .hp-account { left: 2px; }
    .hp-header__actions .hp-cart { left: 47px; }
    .hp-header__actions .hp-search { right: 47px; }
    .hp-header__actions .hp-menu-toggle { right: 2px; display: grid; }
    /* The white sheet covers only the header row here; the panel carries its own so the menu is as
       tall as the categories actually are, instead of a fixed box with dead space under a short list. */
    .hp-header.is-focused::before { top: 8px; left: 12px; right: 12px; height: 80px; border-radius: 8px 8px 0 0; }
    .hp-focus-panel { top: 88px; left: 12px; right: 12px; height: auto; max-height: min(72vh, 560px); overflow: auto; padding: 12px; font-size: 12px; background: #fff; border-radius: 0 0 8px 8px; }
    /* Phones show the top-level categories only: no hover to drive a branch panel, and a stacked
       tree buries the roots the menu exists to reach. Branches stay one tap away on the category page. */
    .hp-mega { display: block; height: auto; }
    .hp-mega__panel { display: none; }
    .hp-mega__roots { overflow: visible; padding-left: 0; border-left: 0; }
    .hp-mega__rootlist { overflow: visible; gap: 2px; }
    .hp-mega__root { padding: 9px 8px; font-size: 13px; }
    /* Nothing is being previewed here, so the rail carries no selected state. */
    .hp-mega__root.is-active { background: none; color: inherit; }
    .hp-mega__root > svg:last-child { opacity: 1; margin-right: auto; color: #9aa3a3; }
    .hp-mega__ic { width: 30px; height: 30px; border-radius: 7px; }
    .hp-mega__all { margin-top: 6px; padding: 10px 8px; font-size: 12px; }
    .hp-mega__links { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #ebeeee; }
    .hp-mobile-link { display: block; font-size: 12px; font-weight: 600; padding: 5px 0; }
    .home-shell { --hp-gutter: 24px; }
    .hp-hero { min-height: 530px; display: flex; flex-direction: column; gap: 48px; padding: 36px var(--hp-gutter) 50px; }
    .hp-hero__copy { text-align: center; width: 100%; transform: none; }
    .hp-hero__copy h1 { font-size: 20px; line-height: 1.5; white-space: normal; }
    .hp-hero__copy p { font-size: 12px; margin-top: 10px; line-height: 1.5; }
    .hp-hero__actions { justify-content: center; gap: 8px; margin-top: 20px; }
    .hp-hero__cta { min-height: 38px; min-width: 0; padding: 0 18px; border-radius: 6px; font-size: 13px; }
    .hp-hero__cta--ghost { min-width: 0; }
    .hp-hero__mosaic { width: 100%; height: 278px; flex: 0 0 auto; gap: 8px 0; }
    .hp-hero__tile { border-radius: 10px; }
    .hp-hero__tile--1, .hp-hero__tile--3 { margin-right: 4px; }
    .hp-hero__tile--2, .hp-hero__tile--4 { margin-left: 4px; }
    .hp-section { border-top-width: 4px; }
    .hp-section > h2 { font-size: 16px; line-height: 1.5; }
    .hp-categories { min-height: 0; padding: 40px var(--hp-gutter) 46px; }
    .hp-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; margin-top: 30px; }
    .hp-category { min-height: 124px; gap: 8px; padding: 10px 4px; border: 1px solid #c9ebe4; border-radius: 12px; background: #fff; box-shadow: 0 2px 7px #167e7810; transition: border-color .18s, background .18s, box-shadow .18s, transform .18s; }
    .hp-category:hover, .hp-category:focus-visible { border-color: #2cc3b3; background: #f2fbf9; box-shadow: none; transform: translateY(-2px); }
    .hp-category:active { transform: translateY(0); background: #e5f8f4; }
    .hp-category__image { width: 62px; height: 62px; min-width: 0; min-height: 0; border-radius: 15px; }
    .hp-category__title { font-size: 11px; line-height: 1.5; }
    .hp-cat-more { margin-top: 26px; font-size: 12px; padding: 9px 20px; border-radius: 7px; }
    .hp-products { min-height: 0; padding: 40px var(--hp-gutter); }
    .hp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
    .hp-products-more { min-height: 44px; margin-top: 28px; padding: 0 22px; border-radius: 7px; font-size: 13px; }
    .hp-product { border-radius: 5px; padding: 7px; }
    .hp-product__image { height: auto; aspect-ratio: 1 / 1; }
    .hp-product__discount, .hp-product__stock { top: 8px; left: 8px; font-size: 7px; padding: 1px 3px; border-radius: 2px; }
    .hp-product__info { display: block; min-height: 59px; padding-top: 8px; }
    .hp-product__title h3 { font-size: 12px; line-height: 1.4; }
    .hp-product__title > span { font-size: 7px; line-height: 1.5; }
    .hp-product__price { flex-direction: row; align-items: baseline; direction: ltr; gap: 5px; margin-top: 7px; font-size: 9px; }
    .hp-product__price strong { direction: rtl; }
    .hp-product__price del { font-size: 7px; direction: rtl; }
    .hp-showcase { min-height: 282px; padding: 40px 27px; }
    .hp-banner { height: 198px; border-radius: 4px; }
    .hp-dots { left: 14px; bottom: 14px; gap: 5px; }
    .hp-dots > * { width: 7px; height: 7px; border-radius: 1px; }
    .hp-benefits { min-height: 432px; padding: 40px var(--hp-gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .hp-benefit { min-height: 162px; border-radius: 8px; padding: 18px 10px 20px; }
    .hp-benefit__circle { width: 68px; height: 68px; margin-bottom: 14px; }
    .hp-benefit h2 { font-size: 16px; line-height: 1.5; }
    .hp-benefit p { font-size: 9px; line-height: 1.5; margin-top: 4px; }
    .hp-brandrail { height: 68px; }
    .hp-brandrail__sequence { gap: 14px; padding-inline-end: 14px; }
    .hp-brandrail :is(a, .hp-brandrail-clone) { min-width: 78px; min-height: 44px; padding: 4px; border-radius: 5px; }
    .hp-brandrail__media { width: 64px; height: 24px; min-width: 0; min-height: 0; }
    .hp-brandrail__name { font-size: 13px; }
    .hp-reviews { min-height: 270px; padding: 24px 0 38px; }
    .hp-review-track { margin-top: 30px; padding: 0 var(--hp-gutter); gap: 16px; }
    .hp-review { width: 150px; min-height: 150px; padding: 10px; border-radius: 4px; }
    .hp-review__head { gap: 6px; min-height: 30px; margin-bottom: 7px; font-size: 10px; }
    .hp-review__avatar { width: 25px; height: 25px; }
    .hp-review__avatar svg { width: 14px; height: 14px; }
    .hp-review__head > div > span { font-size: 6px; }
    .hp-review__rating { font-size: 10px; padding: 0 3px; }
    .hp-review p { min-height: 93px; font-size: 8px; line-height: 1.6; padding: 10px; }
    .hp-promo { padding: 40px var(--hp-gutter); }
    .hp-promo--middle { padding: 40px var(--hp-gutter); }
    .hp-promo--middle .hp-promo__card { padding: 16px 14px; }
    .hp-promo__deck { border-radius: 4px; }
    .hp-promo__card { padding: 22px 14px 25px; gap: 10px; }
    .hp-promo__card h2 { font-size: 12px; line-height: 1.5; }
    .hp-promo__card p { font-size: 7px; line-height: 1.5; margin-top: 2px; }
    .hp-promo__card > a { padding: 6px 8px; font-size: 7px; }
    .hp-promo__deck .hp-dots { bottom: 10px; }
    .hp-blog { min-height: 236px; padding: 22px var(--hp-gutter) 40px; }
    .hp-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; gap: 16px; }
    .hp-blog-card { gap: 9px; }
    .hp-blog-card__media { height: 116px; border-radius: 4px; }
    .hp-blog-card__title { font-size: 11px; line-height: 1.7; }
    .hp-blog-grid > :nth-child(n+3) { display: none; }
    .hp-faq { min-height: 478px; padding: 22px var(--hp-gutter) 40px; }
    .hp-faq__list { gap: 16px; margin-top: 30px; }
    .hp-faq details { border-radius: 4px; padding: 0 6px; }
    .hp-faq summary, .hp-faq details[open] summary { min-height: 40px; font-size: 11px; padding: 5px 4px 5px 0; gap: 10px; }
    .hp-faq summary i { width: 28px; height: 28px; }
    .hp-faq summary i svg { width: 14px; height: 14px; }
    .hp-faq__answer { margin: 0 0 12px; padding: 12px; min-height: 130px; border-radius: 2px; font-size: 10px; line-height: 1.55; }
    .hp-footer { min-height: 637px; border-top-width: 4px; padding: 70px 24px 36px; grid-template-columns: 1fr 1fr; grid-template-rows: auto 102px 56px 50px auto; gap: 20px 16px; }
    .hp-footer__links { grid-column: 1 / -1; grid-row: 1; gap: 16px; margin-bottom: 20px; }
    .hp-footer__links h2 { font-size: 9px; margin-bottom: 18px; }
    .hp-footer__links a { font-size: 10px; line-height: 1.6; margin-top: 10px; }
    .hp-footer__seals { grid-column: 1 / -1; grid-row: 2; gap: 24px; }
    .hp-footer__seals > * { height: 102px; width: auto; flex: 1 1 0; border-radius: 2px; }
    .hp-footer__logo { grid-column: 1; grid-row: 3; align-self: end; }
    .hp-footer .hp-logo { gap: 5px; }
    .hp-footer .hp-logo__wordmark { width: 180px; max-height: 22px; }
    .hp-footer .hp-logo__mark { width: 30px; height: 38px; }
    .hp-footer__socials { grid-column: 2; grid-row: 3; gap: 8px; margin: 0; align-self: end; }
    .hp-footer__socials a { width: 50px; height: 50px; border-radius: 3px; background: var(--hp-mint); }
    .hp-footer__contact { grid-column: 1 / -1; grid-row: 4; padding: 0; gap: 8px; justify-content: stretch; font: 500 12px/1.4 Arial, sans-serif; }
    .hp-footer__contact a { flex: 1 1 0; min-width: 0; height: 50px; display: grid; place-items: center; background: var(--hp-mint); border-radius: 3px; overflow-wrap: anywhere; padding: 4px; }
    .hp-footer__bar { display: none; }
    .hp-footer__copyright { grid-column: 1 / -1; grid-row: 5; font-size: 10px; text-align: center; margin: 16px 0 0; }
}
@media (max-width: 374px) {
    .hp-header__row { padding: 0 12px; }
    .hp-header__actions { left: 12px; right: 12px; }
    .hp-header .hp-logo__wordmark { width: 108px; max-height: 13px; }
    .hp-hero__copy h1 { font-size: 18px; }
    .hp-benefits { gap: 16px; }
    .hp-footer__links { gap: 8px; }
    .hp-footer__links a { font-size: 9px; }
    .hp-footer .hp-logo__wordmark { width: 160px; max-height: 19px; }
    .hp-footer__socials a { width: 42px; height: 46px; }
    .hp-footer__contact { font-size: 10px; }
}

/* The homepage has its own shell class, so the reduced-motion block in storefront.css never reaches
   it. Motion added here has to opt out on its own; the hover transforms are dropped, not sped up. */
@media (prefers-reduced-motion: reduce) {
    .hp-brandrail__track { transform: none !important; }
    .home-shell *, .home-shell *::before, .home-shell *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .hp-blog-card:hover .hp-blog-card__media,
    .hp-blog-card:hover .hp-blog-card__media .st-img img { transform: none; }
}
/* ---- empty banner slots ---------------------------------------------------
   A slot with no banner configured used to paint flat #d9d9d9, which reads as a
   broken image rather than a deliberate gap. These carry the brand's own teal and
   mint at low saturation, with a soft light source and a faint diagonal weave, so
   an unfilled frame looks like part of the design until artwork arrives. Purely
   decorative: the markup stays aria-hidden and gains no text a customer could
   mistake for content. */
.hp-ph { position: relative; overflow: hidden; background: linear-gradient(135deg, #e4f5f2 0%, #cfe8ec 50%, #ddf1e8 100%); box-shadow: inset 0 0 0 1px #14867c26; }
.hp-ph::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(58% 68% at 78% 16%, #9fe3d6 0%, transparent 62%),
        radial-gradient(52% 60% at 12% 88%, #2cc3b352 0%, transparent 60%);
}
.hp-ph::after {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background-image: repeating-linear-gradient(135deg, transparent 0 13px, #ffffff8c 13px 14px);
}
/* Each tile shifts the light so four empty frames do not read as one flat block. */
.hp-ph--2::before { background: radial-gradient(66% 72% at 22% 20%, #b2e7dc 0%, transparent 64%), radial-gradient(56% 64% at 88% 86%, #2cc3b352 0%, transparent 62%); }
.hp-ph--3::before { background: radial-gradient(48% 78% at 50% 8%, #a7e5d9 0%, transparent 66%), radial-gradient(60% 66% at 6% 92%, #24878b45 0%, transparent 60%); }
.hp-ph--4::before { background: radial-gradient(84% 46% at 50% 88%, #b2e7dc 0%, transparent 62%), radial-gradient(70% 44% at 50% 6%, #2cc3b34d 0%, transparent 58%); }

/* The homepage has its own measured visual system, but it must still honour the storefront theme.
   Keep its geometry and teal identity while replacing the light-only canvas and inset panels with
   the shared dark tokens. */
:root[data-theme="dark"] .home-shell {
    --hp-line: var(--st-border);
    --hp-media: var(--st-surface-2);
    --hp-soft: color-mix(in srgb, var(--st-surface-2) 88%, var(--st-elevated));
    --hp-ink: var(--st-text);
    --hp-teal: var(--st-primary);
    --hp-mint: var(--st-primary-soft);
    background: var(--st-bg);
    color: var(--st-text);
    color-scheme: dark;
}
:root[data-theme="dark"] .home-shell .hp-header,
:root[data-theme="dark"] .home-shell .hp-hero__cta--ghost,
:root[data-theme="dark"] .home-shell .hp-product,
:root[data-theme="dark"] .home-shell .hp-benefit__circle,
:root[data-theme="dark"] .home-shell .hp-review__rating,
:root[data-theme="dark"] .home-shell .hp-review p,
:root[data-theme="dark"] .home-shell .hp-promo__card > a,
:root[data-theme="dark"] .home-shell .hp-faq__answer {
    background: var(--st-surface);
}
:root[data-theme="dark"] .home-shell .hp-header.is-focused::before,
:root[data-theme="dark"] .home-shell .hp-focus-panel {
    /* The focused category sheet is a modal surface, not glass: its content must never
       reveal the hero beneath it in dark mode. */
    background: var(--st-elevated);
}
:root[data-theme="dark"] .home-shell .hp-header__actions,
:root[data-theme="dark"] .home-shell .hp-mega__branch,
:root[data-theme="dark"] .home-shell .hp-mega__leaves a,
:root[data-theme="dark"] .home-shell .hp-blog-card__title,
:root[data-theme="dark"] .home-shell .hp-footer__links h2 {
    color: var(--st-text-2);
}

/* Homepage calls to action used light-only teal and white literals. In dark mode their fill,
   foreground and idle outlines must all come from the active storefront palette. */
:root[data-theme="dark"] .home-shell .hp-hero__cta,
:root[data-theme="dark"] .home-shell .hp-products-more {
    background: var(--st-primary);
    border-color: var(--st-primary);
    color: var(--st-on-grad) !important;
}
:root[data-theme="dark"] .home-shell .hp-hero__cta:hover,
:root[data-theme="dark"] .home-shell .hp-products-more:hover {
    background: var(--st-primary-soft);
    border-color: var(--st-primary);
    color: var(--st-text) !important;
}
:root[data-theme="dark"] .home-shell .hp-hero__cta--ghost,
:root[data-theme="dark"] .home-shell .hp-cat-more,
:root[data-theme="dark"] .home-shell .hp-promo__card > a {
    background: var(--st-elevated);
    border-color: var(--st-primary-border);
    color: var(--st-primary) !important;
}
:root[data-theme="dark"] .home-shell .hp-hero__cta--ghost:hover,
:root[data-theme="dark"] .home-shell .hp-cat-more:hover {
    background: var(--st-primary-soft);
    border-color: var(--st-primary);
    color: var(--st-text) !important;
}

:root[data-theme="dark"] .home-shell .hp-review {
    background: transparent;
    border-color: transparent;
}
:root[data-theme="dark"] .home-shell .hp-review__head strong { color: var(--st-text); }
:root[data-theme="dark"] .home-shell .hp-review__head > div > span { color: var(--st-muted); }
:root[data-theme="dark"] .home-shell .hp-review__rating {
    background: var(--st-elevated);
    color: var(--st-text);
}
:root[data-theme="dark"] .home-shell .hp-review p {
    background: var(--st-elevated);
    color: var(--st-text-2);
}
/* Most brand logos are dark marks made for white paper, so they are inverted in the dark theme
   rather than left to disappear into the page; hovering restores the real artwork. */
:root[data-theme="dark"] .home-shell .hp-brandrail img {
    filter: grayscale(1) brightness(0) invert(1);
    opacity: .82;
}
/* Hovering used to hand the mark back its own artwork, which on a dark page is how a logo drawn
   for white paper turns into a dark smudge - and with its neighbours still white, the one under the
   pointer was the hardest of the row to see. The hovered mark takes the brand teal instead: one
   colour, legible against the dark surface, whatever the logo's own palette is. */
:root[data-theme="dark"] .home-shell .hp-brandrail :is(a, .hp-brandrail-clone):hover img,
:root[data-theme="dark"] .home-shell .hp-brandrail :is(a, .hp-brandrail-clone):focus-visible img {
    filter: brightness(0) saturate(100%) invert(52%) sepia(31%) saturate(1278%) hue-rotate(124deg) brightness(91%) contrast(88%);
    opacity: 1;
}
:root[data-theme="dark"] .home-shell .hp-brandrail__name { color: var(--st-text-2); }
:root[data-theme="dark"] .home-shell .hp-brandrail :is(a, .hp-brandrail-clone):hover .hp-brandrail__name,
:root[data-theme="dark"] .home-shell .hp-brandrail :is(a, .hp-brandrail-clone):focus-visible .hp-brandrail__name { color: var(--st-primary); }
:root[data-theme="dark"] .home-shell .hp-review__avatar { background: var(--st-surface-2); color: var(--st-primary); }
:root[data-theme="dark"] .home-shell .hp-benefit__circle,
:root[data-theme="dark"] .home-shell .hp-faq summary i { color: var(--st-primary); }
:root[data-theme="dark"] .home-shell .hp-faq summary i {
    /* Keep the disclosure affordance inside the dark surface family. A solid mint disc
       became visually disconnected from the surrounding FAQ rows, especially on mobile. */
    background: color-mix(in srgb, var(--st-primary) 14%, var(--st-elevated));
    box-shadow: inset 0 0 0 1px var(--st-primary-border);
}
:root[data-theme="dark"] .home-shell .hp-faq details[open] summary i {
    background: color-mix(in srgb, var(--st-primary) 22%, var(--st-elevated));
    color: var(--st-primary);
    box-shadow: inset 0 0 0 1px var(--st-primary-border);
}
:root[data-theme="dark"] .home-shell .hp-faq summary:hover i {
    background: color-mix(in srgb, var(--st-primary) 28%, var(--st-elevated));
    color: var(--st-primary);
}
:root[data-theme="dark"] .home-shell .hp-blog-card:hover .hp-blog-card__title { color: var(--st-primary); }
:root[data-theme="dark"] .home-shell .hp-data-notice {
    background: var(--st-warning-soft);
    color: var(--st-warning);
}
:root[data-theme="dark"] .home-shell :is(.hp-footer__copyright, .hp-footer__contact, .hp-footer__socials) {
    color: var(--sf-mint-ink);
}
:root[data-theme="dark"] .home-shell .hp-hero__cta--ghost,
:root[data-theme="dark"] .home-shell .hp-promo__card > a { color: var(--st-primary) !important; }
:root[data-theme="dark"] .home-shell .hp-product { border-color: var(--st-border); }
:root[data-theme="dark"] .home-shell .hp-product__title > span,
:root[data-theme="dark"] .home-shell .hp-product__price del,
:root[data-theme="dark"] .home-shell .hp-empty { color: var(--st-muted); }
:root[data-theme="dark"] .home-shell .hp-category__image { background: var(--st-primary-soft); color: var(--st-primary); box-shadow: none; }
:root[data-theme="dark"] .home-shell .hp-category { background: transparent; border-color: transparent; box-shadow: none; }
:root[data-theme="dark"] .home-shell .hp-category__title { color: var(--st-text); }
:root[data-theme="dark"] .home-shell .hp-category:hover,
:root[data-theme="dark"] .home-shell .hp-category:focus-visible { background: transparent; border-color: transparent; }
:root[data-theme="dark"] .home-shell .hp-category:hover .hp-category__image,
:root[data-theme="dark"] .home-shell .hp-category:focus-visible .hp-category__image {
    background: var(--st-primary);
    color: var(--st-on-grad);
    box-shadow: none;
}
:root[data-theme="dark"] .home-shell .hp-category:active { background: transparent; }
:root[data-theme="dark"] .home-shell .hp-mega__root:hover,
:root[data-theme="dark"] .home-shell .hp-mega__root.is-active,
:root[data-theme="dark"] .home-shell .hp-mega__ic,
:root[data-theme="dark"] .home-shell .hp-mega__all:hover { background: var(--st-primary-soft); }