/* 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: calc(5 * var(--hp-u)); 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 > span { font: 750 calc(30 * var(--hp-u))/1 Arial, sans-serif; letter-spacing: -.04em; }
.hp-logo small { display: none; letter-spacing: .09em; font: 600 calc(10 * var(--hp-u))/1.6 Arial, sans-serif; }
.hp-logo__custom { max-width: calc(220 * var(--hp-u)); max-height: calc(70 * 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)); }
.hp-brands { height: calc(217 * var(--hp-u)); display: flex; align-items: center; overflow: hidden; }
.hp-brands__track { display: flex; align-items: center; width: max-content; direction: ltr; will-change: transform; animation: hp-brand-marquee 28s linear infinite; }
.hp-brands__group { display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; min-width: max-content; gap: clamp(28px, 3.5vw, 64px); padding-inline-end: clamp(28px, 3.5vw, 64px); }
.hp-brands :is(a, .hp-brand-clone) { display: grid; place-items: center; flex: 0 0 auto; min-width: calc(190 * var(--hp-u)); min-height: calc(78 * var(--hp-u)); padding: calc(8 * var(--hp-u)); border-radius: calc(8 * var(--hp-u)); filter: grayscale(1); opacity: .78; cursor: pointer; transition: background .18s, opacity .18s, transform .18s; }
.hp-brands :is(a, .hp-brand-clone):hover { background: var(--hp-soft); opacity: 1; transform: translateY(-2px); }
.hp-brands img { width: calc(190 * var(--hp-u)); height: calc(66 * var(--hp-u)); object-fit: contain; }
.hp-brands span { font: 700 calc(44 * var(--hp-u))/1 Arial, sans-serif; white-space: nowrap; }
@keyframes hp-brand-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hp-brands:hover .hp-brands__track, .hp-brands:focus-within .hp-brands__track { animation-play-state: paused; }
.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__head i { flex: 0 0 auto; width: calc(70 * var(--hp-u)); height: calc(70 * var(--hp-u)); border-radius: 50%; background: var(--hp-media); }
.hp-review__head strong, .hp-review__head span { display: block; }
.hp-review__head 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 > span { font-size: calc(58 * var(--hp-u)); }
.hp-footer .hp-logo small { display: block; text-align: center; }
.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 > span { font-size: 30px; }
    .hp-header .hp-logo__mark, .hp-nav { display: none; }
    .hp-header .hp-logo__custom { max-width: 112px; max-height: 42px; }
    .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-brands { height: 64px; }
    .hp-brands__group { min-width: max-content; gap: 16px; padding-inline-end: 16px; justify-content: flex-start; }
    .hp-brands :is(a, .hp-brand-clone) { min-width: 74px; min-height: 42px; padding: 5px; border-radius: 5px; }
    .hp-brands img { width: 65px; height: 22px; }
    .hp-brands span { font-size: 16px; }
    .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__head i { width: 25px; height: 25px; }
    .hp-review__head 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 > span { font-size: 34px; }
    .hp-footer .hp-logo small { font-size: 6px; line-height: 1.4; }
    .hp-footer .hp-logo__mark { width: 30px; height: 38px; }
    .hp-footer .hp-logo__custom { max-width: 154px; max-height: 54px; }
    .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 > span { font-size: 25px; }
    .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 > span { font-size: 27px; }
    .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-brands__track { animation: none; }
    .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: var(--st-surface-2);
    border: 1px solid var(--st-border);
}
:root[data-theme="dark"] .home-shell .hp-review__head strong { color: var(--st-text); }
:root[data-theme="dark"] .home-shell .hp-review__head 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);
}
:root[data-theme="dark"] .home-shell .hp-brands img {
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 1;
}
:root[data-theme="dark"] .home-shell .hp-brands :is(a, .hp-brand-clone) { opacity: .88; }
:root[data-theme="dark"] .home-shell .hp-brands :is(a, .hp-brand-clone):hover {
    background: var(--st-surface-2);
    opacity: 1;
}
: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:hover i {
    background: var(--st-primary-soft);
    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: var(--st-elevated); border-color: var(--st-border); 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: var(--st-surface-2); border-color: var(--st-primary-border); }
: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: var(--st-primary-soft); }
: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); }