/** Shopify CDN: Minification failed

Line 2309:0 Unexpected "}"

**/
/* SNH prototype — tokens and components derived from references/FINDINGS.md §6
   Huel structure (container, rhythm, 8px radius, cream tiles, pills, card anatomy)
   + Beast punch (Inter 600 headlines, max contrast, density in commerce, urgency badges)
   + SNH orange as the single accent (#BF4512 since Round 13: #E0521C gave white text 3.89:1, under AA). Mobile first. */

/* ---------- tokens ---------- */
:root {
  --ink: #0C0C0D;
  --white: #FFFFFF;
  --cream: #F5F2EC;
  --grey-1: #4B4B4B;
  --grey-2: #6E6E6E;
  --grey-3: #A5A5A6;
  --line: rgba(12, 12, 13, .1);
  --line-dark: rgba(255, 255, 255, .14);
  --v-accent: #BF4512;
  --v-accent-hover: #A83A0E;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;

  /* type scale (Round 6): 12 13 14 15 16 18 20 24 28 36 44 56 72 96 only, stepped at 768 / 1200 instead of fluid */
  /* Round 14: fluid type — exactly the old scale at 390 and 1440 (and above), smooth in between */
  --t-display: clamp(44px, 33.6px + 2.667vw, 72px);
  --t-h1: clamp(36px, 28.57px + 1.905vw, 56px);
  --t-h2: clamp(28px, 22.06px + 1.524vw, 44px);
  --t-h3: clamp(24px, 19.54px + 1.143vw, 36px);
  --t-h4: clamp(20px, 17.03px + .762vw, 28px);
  --t-h5: clamp(18px, 15.77px + .571vw, 24px);
  --fs-display: var(--t-display);
  --fs-h1: var(--t-h1);
  --fs-h2: var(--t-h4);
  --fs-body: 16px;
  --fs-meta: 14px;
  --fs-eyebrow: 12px;

  /* container 1280 incl. gutters: 20px under 1024, 40px from 1024 */
  --container: 1240px;
  --gutter: 20px;
  --section: 48px;           /* vertical section padding: 48 mobile, 64 desktop */
  --gap: 12px;
  --v-radius: 8px;
  --pill: 999px;
  --btn-h: 48px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: 200ms;
  --t-reveal: 500ms;
}
@media (min-width: 900px) {
  :root { --gap: 24px; }
}
@media (min-width: 1024px) {
  :root { --section: 64px; --gutter: 40px; --container: 1200px; }
}

/* ---------- base (scoped: only inside v2 sections, zero specificity) ---------- */
:where(.v2) { font: 400 var(--fs-body)/1.5 var(--sans); color: var(--ink); letter-spacing: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.v2) img { display: block; max-width: 100%; height: auto; }
:where(.v2) a { color: inherit; text-decoration: none; }
:where(.v2) button { font: inherit; color: inherit; }
:where(.v2) :is(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; color: inherit; text-transform: none; }
:where(.v2) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.v2) :focus-visible { outline: 2px solid var(--v-accent); outline-offset: 3px; border-radius: 4px; }

.v-wrap { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.v-section { padding-block: var(--section); }
.v-section--dark { background: var(--ink); color: var(--white); }
.v-section--cream { background: var(--cream); }

/* ---------- type ---------- */
.display, .v-h1, .v-h2 { margin: 0; font-family: var(--sans); font-weight: 600; text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: 1.1; letter-spacing: -.02em; }
.v-h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -.02em; }
.v-h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.02em; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.lead { font-size: 18px; line-height: 1.5; color: var(--grey-1); max-width: 44ch; }
.v-section--dark .lead, .feature .lead { color: rgba(255, 255, 255, .72); }
.feature .eyebrow { color: rgba(255, 255, 255, .6); }
.meta { font-size: var(--fs-meta); color: var(--grey-2); }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-2); }
.v-section--dark .eyebrow { color: rgba(255, 255, 255, .6); }

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.head__text { display: grid; gap: 8px; }
@media (min-width: 900px) { .head { margin-bottom: 48px; } }
@media (max-width: 599px) { .head { flex-direction: column; align-items: flex-start; } }

/* ---------- buttons: one pill system ---------- */
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 0 24px; border: 0; border-radius: var(--pill); font: 600 15px/1.1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.v-btn:active { transform: scale(.98); }
.v-btn--accent { background: var(--v-accent); color: var(--white); }
.v-btn--accent:hover { background: var(--v-accent-hover); }
.v-btn--ink { background: var(--ink); color: var(--white); }
.v-btn--ink:hover { background: #2A2A2C; }
.v-btn--white { background: var(--white); color: var(--ink); }
.v-btn--white:hover { background: var(--cream); }
.v-btn--line { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.v-btn--line:hover { background: currentColor; }
.v-btn--line:hover span { color: var(--white); }
.v-section--dark .v-btn--line:hover span, .band .v-btn--line:hover span { color: var(--ink); }
.v-btn--sm { min-height: 36px; padding: 0 16px; font-size: 13px; }
.v-btn--block { width: 100%; }
.v-link { font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.v-link:hover { color: var(--v-accent); }
.arrow { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--white); color: var(--ink); flex: 0 0 auto; transition: transform var(--t) var(--ease); }
.arrow svg { width: 16px; height: 16px; }

/* ---------- placeholders (lifestyle imagery still to shoot) ---------- */
.ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 20px; background: repeating-linear-gradient(135deg, #D9D9D9 0 14px, #D3D3D3 14px 28px); color: #4B4B4B; text-align: center; }
.ph__label { max-width: 26ch; font: 500 13px/1.5 var(--sans); }
.ph__label b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }

/* ---------- packshots: cream tile, crop hides the baked-in frame of the source files ---------- */
.shot { position: relative; overflow: hidden; border-radius: var(--v-radius); background: var(--cream); aspect-ratio: 1 / 1; }
.shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.24); transition: transform 400ms var(--ease); }

/* ---------- 1. ticker ---------- */
.ticker { overflow: hidden; background: var(--ink); color: var(--white); font: 500 13px/1.1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.ticker__track { display: flex; width: max-content; animation: ticker var(--ticker-speed, 32s) linear infinite; }
.ticker__list { display: flex; flex: 0 0 auto; }
.ticker__item { display: flex; align-items: center; gap: 10px; padding: 12px 28px; white-space: nowrap; }
.ticker__item::after { content: ""; width: 4px; height: 4px; margin-left: 28px; border-radius: 50%; background: var(--v-accent); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- announcement slot (new products, separate from the ticker) ---------- */
.announce { background: var(--v-accent); color: var(--white); font-size: 13px; }
.announce__in { position: relative; display: grid; height: 34px; }
.announce__item { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 400ms var(--ease), transform 400ms var(--ease), visibility 0s linear 400ms; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce__item.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.announce__item b { padding: 2px 8px; border-radius: var(--pill); background: rgba(10, 10, 10, .22); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.announce__item:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: var(--white); color: var(--ink); border-bottom: 1px solid var(--line); transition: background-color 250ms var(--ease), color 250ms var(--ease), box-shadow 250ms var(--ease), border-color 250ms var(--ease); }
.hdr.is-solid { box-shadow: 0 6px 24px rgba(10, 10, 10, .08); }
/* homepage: transparent over the hero until scrolled or a menu opens */
.hdr--overlay { margin-bottom: calc(-1 * var(--hdr-h)); background: transparent; color: var(--white); border-color: transparent; }
.hdr--overlay::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 120%; background: linear-gradient(180deg, rgba(10, 10, 10, .45), rgba(10, 10, 10, 0)); pointer-events: none; transition: opacity 250ms var(--ease); }
.hdr--overlay.is-solid, .hdr--overlay.is-open { background: var(--white); color: var(--ink); border-color: var(--line); }
.hdr--overlay.is-solid::before, .hdr--overlay.is-open::before { opacity: 0; }
:root { --hdr-h: 64px; }
.hdr__in { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: var(--hdr-h); }
.hdr__logo { justify-self: center; }
.hdr__logo img { height: 22px; width: auto; }
.hdr__icons { display: flex; gap: 2px; justify-self: end; }
.hdr__menu { justify-self: start; }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color var(--t) var(--ease); }
.icon-btn:hover { background: rgba(127, 127, 127, .14); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn__count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--v-accent); color: var(--white); font: 600 12px/1.5 var(--sans); text-align: center; }
.nav { display: none; }
@media (max-width: 599px) { .hide-s { display: none; } }
@media (min-width: 1024px) {
  :root { --hdr-h: 72px; }
  .hdr__in { grid-template-columns: auto 1fr auto; }
  .hdr__menu { display: none; }
  .hdr__logo { justify-self: start; }
  .hdr__logo img { height: 24px; }
  .nav { display: block; justify-self: center; }
  .nav__list { display: flex; gap: 4px; }
  .nav__btn, .nav__link { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border: 0; border-radius: var(--pill); background: none; color: inherit; font: 500 15px/1.5 var(--sans); cursor: pointer; transition: background-color var(--t) var(--ease); }
  .nav__btn svg { width: 14px; height: 14px; opacity: .6; transition: transform var(--t) var(--ease); }
  .nav__btn[aria-expanded="true"] { background: rgba(127, 127, 127, .14); }
  .nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav__btn:hover, .nav__link:hover { background: rgba(127, 127, 127, .14); }
}

/* ---------- mega panel (round 4: 4 zones · need, type, brands, promos + bestsellers) ---------- */
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 41; height: auto; max-height: calc(100vh - var(--hdr-h, 72px) - 24px); background: var(--white); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 24px 48px rgba(10, 10, 10, .12); overflow: hidden auto; opacity: 0; transform: translateY(-8px); transition: opacity 200ms var(--ease), transform 220ms var(--ease); }
.mega.is-open { opacity: 1; transform: none; }
.mega__in { padding-block: 24px 28px; }
.mega__grid { display: grid; grid-template-columns: max-content max-content minmax(208px, max-content) minmax(0, 1fr); gap: 40px; align-items: start; }
.mz { display: flex; flex-direction: column; min-width: 0; }
.mz + .mz { padding-left: 40px; margin-left: -1px; border-left: 1px solid var(--line); }
/* Round 11: column headings read like the main nav items; links are compact uppercase */
.mz__h { margin: 0 0 16px; font: 500 15px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.mz__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mz__list a { display: block; padding: 0; font: 600 13px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--grey-1); transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
.mz__list a:hover, .mz__list a:focus-visible { color: var(--v-accent); transform: translateX(3px); }
.mz__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mz__all:hover { color: var(--v-accent); }
.mz__logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mz__logos .brand { aspect-ratio: 16 / 10; }
.mz__logos .brand__word { font-size: 12px; }
.mz--promo { gap: 0; }
.mz__promos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.mz__promos .mpromo { width: auto; height: auto; min-height: 0; aspect-ratio: 4 / 4.2; }
.mz__promos .mpromo__label { font-size: 15px; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mini { display: grid; gap: 4px; font-size: 13px; line-height: 1.5; }
.mini img, .mini__ph { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; background: var(--cream); object-fit: contain; }
.mini__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
.mini__p { color: var(--grey-1); font-weight: 600; }
.mini__p s { margin-left: 4px; color: var(--grey-2); font-weight: 400; }
.mini:hover .mini__t { color: var(--v-accent); }
.minis--list, .srch__list { grid-template-columns: 1fr; gap: 10px; }
.minis--list .mini, .srch__list .mini { grid-template-columns: 56px 1fr; column-gap: 12px; align-items: center; }
.minis--list .mini img, .srch__list .mini img, .srch__list .mini__ph { width: 56px; grid-row: span 2; }
.minis--list .mini__t, .srch__list .mini__t { align-self: end; }
.minis--list .mini__p, .srch__list .mini__p { align-self: start; }
/* Offers panel */
.mega__grid--offers { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }
.offers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.v-offer { position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--v-radius); overflow: hidden; background: var(--white); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.v-offer:hover { border-color: var(--ink); transform: translateY(-2px); }
.v-offer img, .v-offer__ph { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; background: var(--cream); }
.v-offer__ph { display: grid; place-items: center; background: linear-gradient(135deg, var(--v-accent), #A8350B); color: var(--white); font: 600 24px/1.1 var(--sans); letter-spacing: -.02em; }
.v-offer__b { display: grid; gap: 2px; padding: 12px; }
.v-offer__t { font-weight: 600; font-size: 14px; line-height: 1.1; }
.v-offer__n { font-size: 12px; color: var(--grey-2); }
.perks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.perks li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.perks svg { width: 20px; height: 20px; color: var(--v-accent); }
/* Brands A–Z */
.mega__brands { display: flex; flex-direction: column; }
.mega__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mega__head .mz__h, .mega__head .mz__all { margin: 0; }
.az { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.az__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.az__search { display: flex; align-items: center; gap: 8px; width: 260px; max-width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--pill); }
.az__search:focus-within { border-color: var(--ink); }
.az__search svg { width: 18px; height: 18px; color: var(--grey-2); flex: none; }
.az__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 15px/1.5 var(--sans); color: var(--ink); }
.az__bar { display: flex; flex-wrap: wrap; gap: 2px; }
.az__bar a, .az__bar span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.az__bar span { color: #C9C6C0; }
.az__bar a:hover { background: var(--ink); color: var(--white); }
.az__groups { flex: 1; min-height: 0; overflow-y: auto; padding-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px 28px; align-content: start; }
.az__g { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.az__L { font: 600 24px/1.1 var(--sans); color: var(--v-accent); padding-top: 6px; }
.az__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.az__tiles li { display: grid; gap: 4px; justify-items: center; font-size: 12px; font-weight: 500; text-align: center; }
.az__tiles .brand { width: 100%; aspect-ratio: 16 / 11; }
.az__tiles .brand__word { font-size: 12px; }
.az__none { margin: 16px 0 0; color: var(--grey-2); }
.brand { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: var(--v-radius); overflow: hidden; background: #fff; border: 1px solid var(--line); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.brand img { width: 100%; height: 100%; object-fit: contain; }
.brand img.brand__snh { width: 60%; height: auto; object-fit: contain; }
.brand__word { padding: 0 10px; font-weight: 600; font-size: 14px; line-height: 1.1; letter-spacing: 0; text-align: center; }
.brand:hover { border-color: var(--ink); transform: translateY(-2px); }
.mpromo { position: relative; display: block; width: clamp(200px, 17vw, 260px); height: 100%; min-height: 280px; border-radius: var(--v-radius); overflow: hidden; background: var(--cream); color: var(--white); isolation: isolate; }
.mpromo img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.mpromo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, 0) 55%); }
.mpromo:hover img { transform: scale(1.04); }
.mpromo__body { position: absolute; inset: auto 14px 14px; display: grid; gap: 4px; }
.mpromo .eyebrow { color: rgba(255, 255, 255, .78); }
.mpromo__label { font-weight: 600; font-size: 18px; line-height: 1.1; letter-spacing: 0; }
.mega-scrim, .srch-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(10, 10, 10, .3); opacity: 0; transition: opacity 200ms var(--ease); }
.mega-scrim.is-on, .srch-scrim.is-on { opacity: 1; }
@media (min-width: 1024px) {
  .nav__btn, .nav__link { position: relative; white-space: nowrap; }
  .nav__btn::after, .nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -16px; height: 2px; border-radius: 1px; background: var(--v-accent); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); }
  .nav__btn[aria-expanded="true"]::after { transform: scaleX(1); }
  .nav__btn[aria-expanded="true"] { background: none; color: var(--v-accent); }
}
@media (min-width: 1024px) and (max-width: 1199px) { .nav__x { display: none; } }
@media (min-width: 1024px) {
  .hdr__logo { min-width: max-content; }
  .nav__btn, .nav__link { padding: 0 10px; font-size: 14px; }
  .nav__btn::after, .nav__link::after { left: 10px; right: 10px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__list { gap: 0; }
  .nav__btn, .nav__link { padding: 0 9px; font-size: 14px; }
  .nav__btn::after, .nav__link::after { left: 9px; right: 9px; }
  .mega__grid { gap: 28px; }
  .mz + .mz { padding-left: 28px; }
  .offers { grid-template-columns: repeat(2, 1fr); }
  .offers .v-offer { grid-template-columns: 96px 1fr; grid-template-rows: none; }
  .offers .v-offer img, .offers .v-offer__ph { height: 100%; aspect-ratio: auto; min-height: 96px; font-size: 14px; }
}
@media (max-height: 760px) and (min-width: 1024px) { .mz__promos .mpromo { aspect-ratio: 4 / 3; } }

/* ---------- predictive search overlay ---------- */
.srch { position: fixed; inset: 0 0 auto 0; z-index: 90; max-height: 100dvh; display: flex; flex-direction: column; background: var(--white); color: var(--ink); box-shadow: 0 24px 48px rgba(10, 10, 10, .16); opacity: 0; transform: translateY(-12px); transition: opacity 200ms var(--ease), transform 220ms var(--ease); }
.srch.is-open { opacity: 1; transform: none; }
.srch-scrim { z-index: 85; }
.srch__bar { border-bottom: 1px solid var(--line); }
.srch__barin { display: flex; align-items: center; gap: 12px; height: var(--hdr-h); }
.srch__field { flex: 1; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; border-radius: var(--pill); background: var(--cream); }
.srch__field svg { width: 22px; height: 22px; flex: none; }
.srch__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 18px/1.5 var(--sans); color: var(--ink); }
.srch__field input::-webkit-search-cancel-button { cursor: pointer; }
.srch__body { overflow-y: auto; padding-block: 24px 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.chip { height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--white); font: 500 14px/1.5 var(--sans); color: var(--ink); cursor: pointer; transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.chip:hover, .chip:focus-visible { border-color: var(--ink); background: var(--cream); }
.minis--row { grid-template-columns: repeat(4, minmax(0, 160px)); }
.srch__res { display: grid; gap: 24px; }
.srch__res[hidden] { display: none; }
.srch__list { display: grid; margin: 0 0 24px; padding: 0; list-style: none; }
.srch__list--plain a { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.srch__list--plain a span { color: var(--grey-2); font-size: 13px; }
.srch__list--plain a:hover { color: var(--v-accent); }
.srch__nil { color: var(--grey-2); font-size: 14px; }
.srch__all { justify-self: start; }
@media (min-width: 900px) {
  .srch__res { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 48px; }
  .srch__res .srch__list[data-r="p"] { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .srch__all { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .srch { bottom: 0; }
  .srch__barin { padding-right: 4px; }
  .srch__field { height: 44px; padding: 0 14px; }
  .srch__field input { font-size: 16px; }
  .minis--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- mobile menu: full-screen drill-down ---------- */
.mmenu { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--white); transform: translateX(-100%); transition: transform 320ms var(--ease); }
.mmenu.is-open { transform: none; }
/* Round 11: logo dead centre, close on the right gutter; everything below shares one left edge (the gutter) */
.mmenu__top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 64px; padding: 0 var(--gutter); }
.mmenu__top > :first-child { grid-column: 2; justify-self: center; }
.mmenu__top img { height: 22px; width: auto; }
.mmenu__top .mmenu__close { grid-column: 3; justify-self: end; margin-right: -10px; }
.mmenu__search { display: flex; align-items: center; gap: 10px; height: 46px; margin: 0 var(--gutter) 8px; padding: 0 16px; border: 0; border-radius: var(--pill); background: var(--cream); font: 500 15px/1.5 var(--sans); color: var(--grey-2); text-align: left; cursor: pointer; }
.mmenu__search svg { width: 20px; height: 20px; color: var(--ink); flex: none; }
.mmenu__search span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }   /* R18: one line at 360 */
.mmenu__levels { position: relative; flex: 1; overflow: hidden; border-top: 1px solid var(--line); }
.mm__level { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--white); transform: translateX(100%); visibility: hidden; transition: transform 300ms var(--ease), visibility 0s linear 300ms; }
.mm__level.is-on { transform: none; visibility: visible; transition: transform 300ms var(--ease); }
.mm__level.is-behind { transform: translateX(-28%); }
.mm__scroll { flex: 1; overflow-y: auto; padding: 4px var(--gutter) 32px; }
.mm__root { margin: 0; padding: 0; list-style: none; }
.mm__go { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: 600 20px/1.5 var(--sans); letter-spacing: -.02em; color: var(--ink); text-align: left; cursor: pointer; }
.mm__go svg { width: 20px; height: 20px; color: var(--grey-2); }
.mm__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 52px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); }
.mm__head p { margin: 0; font-weight: 600; font-size: 18px; text-align: center; }
.mm__head::after { content: ""; width: 72px; }
.mm__back { display: inline-flex; align-items: center; gap: 2px; width: 72px; height: 44px; padding: 0; margin-left: -6px; border: 0; background: none; font: 500 15px/1.5 var(--sans); color: var(--ink); cursor: pointer; }
.mm__back svg { width: 22px; height: 22px; }
/* R18: segmented toggle: two equal segments, centred labels, a sliding pill inset 4px, flush with the list's left edge */
.mmenu .mm__tabs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; box-sizing: border-box; width: 100%; margin: 16px 0 8px; padding: 4px; border-radius: var(--pill); background: var(--cream); }
.mmenu .mm__tabs::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--pill); background: var(--white); box-shadow: 0 1px 4px rgba(10, 10, 10, .12); transition: transform 260ms cubic-bezier(.22, 1, .36, 1); }
.mmenu .mm__tabs:has(> [data-tab="1"][aria-selected="true"])::before { transform: translateX(100%); }
.mmenu .mm__tabs > button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 40px; margin: 0; padding: 0 10px; border: 0; border-radius: var(--pill); background: none; box-shadow: none; font: 600 14px/1.2 var(--sans); color: var(--grey-1); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color 200ms var(--ease); }
.mmenu .mm__tabs > button[aria-selected="true"] { color: var(--ink); background: none; box-shadow: none; }
.mmenu .mm__tabs > button:focus-visible { outline: 2px solid var(--v-accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .mmenu .mm__tabs::before { transition: none; } }
.mm__list { margin: 0 0 20px; padding: 0; list-style: none; }
.mm__list a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; }
.mm__list a.mm__all { border-bottom: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.mz__logos--m { grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; }
.mm__scroll .minis--list { margin-bottom: 22px; }
.offers--m { grid-template-columns: 1fr 1fr; margin-top: 16px; }
.mmenu__promos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.mmenu__promos .mpromo { width: auto; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
.mmenu__promos .mpromo__label { font-size: 15px; }
.mm__scroll .az__top { flex-direction: column; align-items: stretch; padding-top: 14px; }
.mm__scroll .az__search { width: 100%; }
.mm__scroll .az__groups { grid-template-columns: 1fr; overflow: visible; }
.mm__scroll .az__tiles { grid-template-columns: repeat(3, 1fr); }
@media (prefers-reduced-motion: reduce) { .mm__level, .mega, .srch { transition: none; } }
@media (min-width: 1024px) { .mmenu { display: none; } }
@media (max-width: 1023px) { .mega, .mega-scrim { display: none !important; } }

/* ---------- 2. full-screen hero ---------- */
.hero { position: relative; height: calc(100svh - var(--hero-offset, 97px)); min-height: 520px; max-height: 1000px; overflow: hidden; background: var(--ink); color: var(--white); }
.hero__stage { position: absolute; inset: 0; touch-action: pan-y; }
.hero__slide { position: absolute; inset: 0; display: block; visibility: hidden; opacity: 0; transition: opacity 700ms var(--ease), visibility 0s linear 700ms; }
.hero__slide.is-on { visibility: visible; opacity: 1; transition: opacity 700ms var(--ease); }
.hero__pic, .hero__pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__pic img { object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(1.03); transition: transform 1400ms var(--ease); }
.hero__slide.is-on .hero__pic img { transform: scale(1); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .35) 38%, rgba(10, 10, 10, 0) 62%); }
.hero__copy { position: absolute; left: 0; right: 0; bottom: 92px; display: grid; gap: 14px; justify-items: start; }
.hero__copy > * { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.hero__slide.is-on .hero__copy > * { opacity: 1; transform: none; }
.hero__slide.is-on .hero__copy > :nth-child(1) { transition-delay: 150ms; }
.hero__slide.is-on .hero__copy > :nth-child(2) { transition-delay: 210ms; }
.hero__slide.is-on .hero__copy > :nth-child(3) { transition-delay: 270ms; }
.hero__slide.is-on .hero__copy > :nth-child(4) { transition-delay: 330ms; }
.hero .eyebrow { color: rgba(255, 255, 255, .78); }
.hero .display { max-width: 13ch; color: var(--white); }
.hero__sub { max-width: 38ch; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.v-btn--on-dark { color: var(--white); }
.v-btn--on-dark:hover { background: var(--white); }
.v-btn--on-dark:hover span { color: var(--ink); }
.hero__controls { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 4; display: flex; align-items: center; gap: 24px; }
.hero__progress { display: flex; flex: 1; gap: 6px; max-width: 420px; }
.seg { flex: 1; height: 24px; padding: 10px 0; border: 0; background: none; cursor: pointer; }
.seg span { position: relative; display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.seg span::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.seg.is-done span::after { transform: scaleX(1); }
.seg.is-on span::after { animation: seg-fill var(--hero-interval, 6s) linear forwards; }
.hero.is-paused .seg.is-on span::after { animation-play-state: paused; }
@keyframes seg-fill { to { transform: scaleX(1); } }
.hero__arrows { display: flex; gap: 8px; margin-left: auto; }
.hero__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(10, 10, 10, .25); color: var(--white); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.hero__arrow:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.hero__arrow svg { width: 18px; height: 18px; }
.hero__arrow[data-dir="-1"] svg { transform: rotate(180deg); }
/* banner slides: baked-in text, full bleed, nothing on top; controls get a soft base so they stay legible */
.hero__slide--banner::after { content: ""; position: absolute; inset: auto 0 0 0; height: 110px; background: linear-gradient(0deg, rgba(10, 10, 10, .45), rgba(10, 10, 10, 0)); pointer-events: none; }
@media (max-width: 767px) {
  .hero__pic img { object-position: var(--mpos, 50% 30%); }
  .hero__shade { background: linear-gradient(0deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .7) 30%, rgba(10, 10, 10, .2) 52%, rgba(10, 10, 10, 0) 66%); }
  .hero__copy { bottom: 76px; gap: 12px; }
  .hero__sub { font-size: 15px; }
  .hero__controls { bottom: 18px; gap: 12px; }
  .hero__arrow { width: 38px; height: 38px; }
}
@media (min-width: 768px) {
  .hero__shade { background: linear-gradient(90deg, rgba(10, 10, 10, .75) 0%, rgba(10, 10, 10, .35) 45%, rgba(10, 10, 10, 0) 70%), linear-gradient(0deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, 0) 40%); }
  .hero__copy { bottom: 112px; gap: 18px; }
  .hero__controls { bottom: 40px; }
}

/* goal strip directly under the hero */
.goalbar { background: var(--white); border-bottom: 1px solid var(--line); }
.goalbar__in { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.goalbar__in > .eyebrow { flex: 0 0 auto; }
.goals { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 12px; }
.goals::-webkit-scrollbar { display: none; }
.goal { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: var(--pill); background: var(--cream); font-size: 14px; font-weight: 500; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.goal:hover { background: var(--ink); color: var(--white); }
@media (max-width: 767px) { .goalbar__in { padding-right: 0; } .goalbar__in > .eyebrow { display: none; } .goals { padding-right: var(--gutter); } }

/* packshot tiles: official renders shown whole on their own backdrop */
.shot--pack { background: var(--tile, var(--cream)); }
.shot--pack img { object-fit: contain; transform: none; padding: 9%; }
.card:hover .shot--pack img { transform: scale(1.03); }
.shot--pack .ph { padding: 12px; }

/* permanent SiS distributor strip */
.sis-strip { background: var(--ink); color: var(--white); }
.sis-strip__in { display: flex; align-items: center; gap: 14px; min-height: 64px; padding-block: 12px; font-size: 14px; }
.sis-strip__logo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 6px; }
.sis-strip p { flex: 1; color: rgba(255, 255, 255, .7); }
.sis-strip strong { color: var(--white); font-weight: 600; }
.sis-strip .v-link { color: var(--white); white-space: nowrap; }
@media (max-width: 599px) { .sis-strip p span { display: none; } }

/* brand spotlight */
.spot__grid { display: grid; gap: 28px; }
.spot__media { border-radius: var(--v-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream); }
.spot__media img { width: 100%; height: 100%; object-fit: cover; }
.spot__text { display: grid; gap: 28px; align-content: center; }
.spot__text > .v-btn { justify-self: start; }
.spot__cards { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .spot__grid { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; } .spot__media { aspect-ratio: 4 / 5; } .spot__cards { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

/* ---------- 3. shop your way ---------- */
.ways { display: grid; gap: 8px; }
.way { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 12px 8px 8px; border-radius: var(--pill); background: var(--cream); font-size: 18px; font-weight: 600; letter-spacing: 0; transition: background-color var(--t) var(--ease); }
.way__img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--white); }
.way__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
.way__ph { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, #D9D9D9 0 6px, #D3D3D3 6px 12px); }
.way__name { flex: 1; }
.way:hover { background: #ECE7DE; }
.way:hover .arrow { transform: translateX(3px); }
@media (min-width: 600px) { .ways { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(4, 1fr); gap: 16px; } .way { min-height: 72px; } }

/* ---------- 4. benefits (black band) ---------- */
.benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; margin-top: 8px; }
.benefit { display: grid; gap: 6px; align-content: start; }
.benefit svg { width: 28px; height: 28px; color: var(--v-accent); margin-bottom: 6px; }
.benefit__title { font: 600 var(--t-h3)/1.1 var(--sans); letter-spacing: -.02em; }
.benefit__text { font-size: 14px; color: rgba(255, 255, 255, .66); }
@media (min-width: 900px) { .benefits { grid-template-columns: repeat(3, 1fr); gap: 56px 32px; } }

/* ---------- 5. why SNH ---------- */
.why { display: grid; gap: var(--gap); }
.why-card { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: var(--v-radius); background: var(--cream); overflow: hidden; }
.why-card__img { margin: 4px auto 8px; width: min(220px, 70%); }
.why-card__img .shot { background: transparent; }
.why-card--big .why-card__img { width: 100%; max-width: 520px; }
.why-card--big .why-card__img > .shot { flex: 1; }
.why-card .v-h2 { margin-top: 4px; }
@media (min-width: 900px) {
  .why { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; }
  .why-card--big { grid-row: span 2; align-content: space-between; padding: 32px; }
}

/* ---------- 6. athletes ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 600px) { .rail { grid-auto-columns: 42%; } }
@media (min-width: 900px) { .rail { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); margin-inline: 0; padding-inline: 0; } }
.athlete { position: relative; border-radius: var(--v-radius); overflow: hidden; aspect-ratio: 9 / 16; }
.athlete__cap { position: absolute; inset: auto 12px 12px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 6px; background: rgba(12, 12, 13, .78); color: var(--white); }
.athlete__cap strong { font-size: 16px; font-weight: 600; }
.athlete__cap span { font-size: 13px; color: rgba(255, 255, 255, .7); }

/* ---------- 7. reviews ---------- */
.v-rating { display: flex; align-items: center; gap: 10px; }
.stars { display: inline-flex; gap: 2px; color: var(--v-accent); }
.stars svg { width: 18px; height: 18px; }
.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
.quotes::-webkit-scrollbar { display: none; }
.quote { scroll-snap-align: start; display: grid; gap: 16px; align-content: space-between; min-height: 220px; padding: 24px; border-radius: var(--v-radius); background: var(--cream); }
.quote__text { font: 400 20px/1.5 var(--serif); font-style: italic; color: var(--grey-1); }
.quote__who { font-size: 14px; font-weight: 600; }
.quote__who span { display: block; font-weight: 400; color: var(--grey-2); }
@media (min-width: 900px) { .quotes { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; overflow: visible; } }

/* ---------- 8. promo tiles ---------- */
.promos { display: grid; gap: var(--gap); }
.promo { position: relative; display: block; border-radius: var(--v-radius); overflow: hidden; aspect-ratio: 4 / 5; color: var(--white); isolation: isolate; }
.promo__media { position: absolute; inset: 0; z-index: -1; }
.promo__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.promo:hover .promo__media img { transform: scale(1.03); }
.promo__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 12, 13, .55) 0%, rgba(12, 12, 13, 0) 40%, rgba(12, 12, 13, 0) 60%, rgba(12, 12, 13, .55) 100%); }
.promo__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; }
.promo__title { font: 600 24px/1.1 var(--sans); letter-spacing: -.02em; max-width: 18ch; }
.promo__kicker { display: block; margin-bottom: 6px; }
.promo .v-btn { align-self: stretch; }
.promo--ph { color: var(--ink); }
.promo--ph .promo__shade { display: none; }
@media (min-width: 900px) { .promos { grid-template-columns: repeat(3, 1fr); } .promo__body { padding: 24px; } }
@media (max-width: 899px) { .promos { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; } .promos > * { scroll-snap-align: start; } }

/* ---------- 9. product card ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 40px 24px; } }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card__media { position: relative; display: block; }
.card:hover .shot img { transform: scale(1.29); }
.v-badge { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--pill); background: var(--ink); color: var(--white); font: 600 12px/1.1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.v-badge--accent { background: var(--v-accent); }
.quick { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ink); color: var(--white); cursor: pointer; transition: background-color var(--t) var(--ease), transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.quick svg { width: 18px; height: 18px; }
.quick:hover { background: var(--v-accent); }
.quick.is-added { background: var(--v-accent); }
@media (hover: hover) and (min-width: 900px) { .quick { opacity: 0; transform: translateY(6px); } .card:hover .quick, .card:focus-within .quick { opacity: 1; transform: none; } }
.card__body { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; flex: 1; }
.card__brand { font-size: 12px; }
.card__name { font: 600 15px/1.5 var(--sans); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__stats { display: grid; gap: 4px; margin: 8px 0; padding-block: 8px; border-block: 1px solid var(--line); font-size: 13px; color: var(--grey-1); }
.card__stats li { display: flex; align-items: center; gap: 8px; }
.card__stats li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v-accent); flex: 0 0 auto; }
.card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: auto; }
.card__now { font-size: 18px; font-weight: 600; letter-spacing: 0; }
.card__per { font-size: 13px; color: var(--grey-2); }
.card__koko { font-size: 12px; color: var(--grey-2); }
.card__koko b { font-weight: 600; color: var(--ink); }
@media (max-width: 599px) { .card__name { font-size: 14px; } .card__stats { font-size: 12px; } .card__now { font-size: 16px; } .quick { width: 36px; height: 36px; right: 8px; bottom: 8px; } }

/* product rail variant (mobile scroller for bestsellers) */
@media (max-width: 899px) { .grid--rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; } .grid--rail::-webkit-scrollbar { display: none; } .grid--rail > * { scroll-snap-align: start; } }

/* tabs (Beast density, Huel restraint) */
.v-tabs { display: flex; gap: 6px; margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.tab { flex: 0 0 auto; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--pill); background: var(--cream); font: 500 14px/1.1 var(--sans); cursor: pointer; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--white); }

/* ---------- 10. SNH Elite band (the one orange section) ---------- */
.band { background: var(--v-accent); color: var(--white); }
.band__grid { display: grid; gap: 28px; }
.band .eyebrow { color: rgba(255, 255, 255, .8); }
.band .lead { color: rgba(255, 255, 255, .88); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tier { display: grid; gap: 2px; padding: 16px 12px; border-radius: var(--v-radius); background: rgba(255, 255, 255, .12); text-align: center; }
.tier strong { font: 600 var(--t-h3)/1.1 var(--sans); letter-spacing: -.02em; }
.tier span { font-size: 13px; color: rgba(255, 255, 255, .85); }
.band__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .band__grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 64px; } }

/* ---------- 11. full-bleed SiS feature ---------- */
.feature { position: relative; min-height: 560px; display: grid; align-items: end; color: var(--white); isolation: isolate; background: var(--ink); }
.feature__media { position: absolute; inset: 0; z-index: -1; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 12, 13, .78) 0%, rgba(12, 12, 13, .2) 55%, rgba(12, 12, 13, 0) 100%); }
.feature__media .ph { align-items: start; padding-top: 48px; background: repeating-linear-gradient(135deg, #2A2A2C 0 14px, #252527 14px 28px); color: rgba(255, 255, 255, .7); }
.feature__media .ph__label b { color: var(--white); }
.feature__body { display: grid; gap: 16px; padding-block: 56px; max-width: 560px; }
.feature__products { display: flex; gap: 10px; margin-top: 8px; }
.feature__products .shot { width: 72px; background: rgba(255, 255, 255, .92); }
@media (min-width: 900px) { .feature { min-height: 680px; } .feature__body { padding-block: 96px; } }

/* ---------- 12. newsletter ---------- */
.news { display: grid; gap: 20px; }
.news__form { display: flex; gap: 8px; }
.v-input { flex: 1; min-width: 0; height: var(--btn-h); padding: 0 20px; border: 1.5px solid var(--line); border-radius: var(--pill); background: var(--white); font: 400 15px/1.5 var(--sans); color: var(--ink); }
.v-input:focus { outline: none; border-color: var(--ink); }
@media (min-width: 900px) { .news { grid-template-columns: 1fr 1fr; align-items: end; gap: 64px; } }
@media (max-width: 599px) { .news__form { flex-direction: column; } .news__form .v-input { flex: none; } }

/* ---------- 13. stores ---------- */
.stores { display: grid; gap: var(--gap); }
.store { display: grid; gap: 14px; }
.store__img { border-radius: var(--v-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream); }
.store__img img { width: 100%; height: 100%; object-fit: cover; }
.store__body { display: grid; gap: 4px; }
.store__body .v-link { margin-top: 6px; justify-self: start; }
@media (min-width: 768px) { .stores { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) and (max-width: 899px) { .stores { gap: 14px; } .store__body { font-size: .92em; } }

/* ---------- 14. footer ---------- */
.ftr { background: var(--ink); color: var(--white); padding-top: 64px; overflow: hidden; }
.ftr__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
.ftr__col { display: grid; gap: 10px; align-content: start; font-size: 14px; color: rgba(255, 255, 255, .68); }
.ftr__col h3 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--white); letter-spacing: .04em; text-transform: uppercase; }
.ftr__col a:hover { color: var(--white); }
.ftr__stores { grid-column: 1 / -1; }
.ftr__stores p { display: grid; gap: 2px; line-height: 1.5; }
.ftr__stores strong { color: var(--white); font-weight: 600; }
.ftr__stores a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
.ftr__hours { font-size: 13px; color: rgba(255, 255, 255, .5); }
.ftr__pay { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: 13px; color: rgba(255, 255, 255, .62); }
.ftr__pay b { color: var(--white); font-weight: 600; }
.ftr__social { display: flex; gap: 16px; }
.ftr__social a:hover { color: var(--v-accent); }
/* round 4: the logo spans the full viewport, edge to edge, at the very bottom. Its lower ~18% is cropped by the page edge
   and a black gradient (solid at the bottom, clear at 60% height) sits over it. Wipe-in + orange dot pop are kept;
   the dot sits on the crop line, above the gradient. */
.ftr__mark { position: relative; display: flex; align-items: flex-start; gap: 1.2%; width: 100%; aspect-ratio: 100 / 22.3; margin-top: clamp(24px, 4vw, 56px); overflow: hidden; }
.ftr__mark::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, var(--ink) 0%, rgba(12, 12, 13, .85) 18%, rgba(12, 12, 13, 0) 60%); pointer-events: none; }
.ftr__mark .ftr__dot { position: relative; z-index: 2; align-self: flex-end; margin: 0 .8% 1.2% 0; }
.ftr__wipe { display: block; flex: 1; }
.ftr__wipe img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
.ftr__dot { flex: 0 0 auto; width: 5.4%; aspect-ratio: 1; border-radius: 50%; background: var(--v-accent); }
.v-js .ftr__wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1200ms cubic-bezier(.65, 0, .35, 1); }
.v-js .ftr__mark.is-in .ftr__wipe { clip-path: inset(0 0 0 0); }
.v-js .ftr__dot { transform: scale(0); }
.v-js .ftr__mark.is-in .ftr__dot { animation: dot-pop 900ms cubic-bezier(.34, 1.56, .64, 1) 1100ms both, dot-glow 1600ms ease-out 1700ms 1 both; }
@keyframes dot-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dot-glow { 0% { box-shadow: 0 0 0 0 rgba(224, 82, 28, .7); } 100% { box-shadow: 0 0 0 28px rgba(224, 82, 28, 0); } }
.ftr__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 20px; padding-block: 20px; border-top: 1px solid var(--line-dark); font-size: 12px; color: rgba(255, 255, 255, .5); }
@media (min-width: 768px) { .ftr__cols { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .ftr__cols { grid-template-columns: 1.5fr repeat(4, 1fr); } .ftr__stores { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .v-js .ftr__wipe { clip-path: none; } .v-js .ftr__dot { transform: none; animation: none; } }

/* ---------- shared: split layout, prose, tick list, accordion ---------- */
.split { display: grid; gap: 24px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.3fr; gap: 64px; } }
.v-prose { display: grid; gap: 14px; color: var(--grey-1); font-size: 16px; line-height: 1.5; max-width: 62ch; }
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--ink); }
.ticks li::before { content: ""; flex: 0 0 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--v-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; }
.faq__wa { margin-top: 24px; }
.faq__wa svg { width: 18px; height: 18px; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 600 18px/1.1 var(--sans); letter-spacing: 0; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-weight: 400; font-size: 24px; transition: transform var(--t) var(--ease); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc__body { padding-bottom: 24px; }
.acc summary { list-style: none; }
.v-section--dark .ticks li { color: var(--white); }

/* ---------- product page (round 3): 12-col grid, gallery 7 / buy box 5, 8px rhythm ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 16px; font-size: 13px; color: var(--grey-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 56px; }
@media (min-width: 1024px) {
  .pdp { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; padding-bottom: 80px; }
  .pg { grid-column: 1 / span 7; position: sticky; top: calc(var(--hdr-h) + 16px); }
  .buy { grid-column: 8 / span 5; position: sticky; top: calc(var(--hdr-h) + 16px); }
}
@media (min-width: 1280px) { .pdp { column-gap: 32px; } .buy { padding-left: 16px; } }

/* gallery: thumbs column exactly as tall as the square main image (4 rows of 1fr) */
.pg { display: grid; gap: 12px; }
.pg__main { position: relative; overflow: hidden; border-radius: var(--v-radius); background: #CDCDCD; aspect-ratio: 1 / 1; }
.pg__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pg__track::-webkit-scrollbar { display: none; }
.pg__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.pg__slide img { width: 100%; height: 100%; object-fit: cover; }
.pg__badge { top: 16px; left: 16px; }
.pg__bar { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 3px; border-radius: 2px; background: rgba(10, 10, 10, .15); overflow: hidden; }
.pg__bar span { display: block; height: 100%; width: 25%; background: var(--v-accent); border-radius: 2px; transition: transform 250ms var(--ease); }
.pg__thumbs { display: none; }
.pg__thumb { padding: 0; border: 1.5px solid transparent; border-radius: 8px; background: #CDCDCD; overflow: hidden; cursor: pointer; transition: border-color var(--t) var(--ease); }
.pg__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pg__thumb[aria-current="true"] { border-color: var(--ink); }
@media (max-width: 1023px) {
  /* mobile: full-bleed swipe gallery, orange progress bar, floating thumb rail */
  .pg { margin-inline: calc(var(--gutter) * -1); }
  .pg__main { border-radius: 0; }
  .pg__thumbs { position: absolute; z-index: 3; left: 12px; top: 50%; display: grid; gap: 6px; transform: translateY(-50%); }
  .pg { position: relative; }
  .pg__thumb { width: 44px; height: 44px; border-color: rgba(255, 255, 255, .7); box-shadow: 0 2px 8px rgba(10, 10, 10, .18); }
  .pg__thumb[aria-current="true"] { border-color: var(--v-accent); }
}
@media (min-width: 1024px) {
  .pg { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .pg__thumbs { display: grid; grid-template-rows: repeat(4, 1fr); gap: 12px; height: 100%; }
  .pg__thumb { width: 100%; height: 100%; }
  .pg__bar { display: none; }
}

/* buy box: one left edge, 8px-based spacing */
.buy { display: grid; gap: 16px; align-content: start; min-width: 0; }
.buy__title { margin: 0; font: 600 var(--t-h3)/1.1 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.buy__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.buy__brand { width: 84px; height: 36px; object-fit: cover; border-radius: 4px; }
.buy__rating { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey-2); }
.buy__rating .stars { color: var(--grey-3); }
.buy__rating .stars svg { width: 15px; height: 15px; }
.stock { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border-radius: var(--pill); background: #E7F6EC; color: #157A3A; font-size: 12px; font-weight: 600; }
.stock i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock--out { background: #F4E4E0; color: #A3361A; }
.buy__sub { color: var(--grey-2); font-size: 14px; line-height: 1.5; }
.buy__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.buy__now { font: 600 36px/1.1 var(--sans); letter-spacing: -.02em; }
.buy__per { font-size: 14px; color: var(--grey-2); }
.save { padding: 4px 10px; border-radius: var(--pill); background: var(--v-accent); color: var(--white); font-size: 12px; font-weight: 600; }
.buy__perks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.perk { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--pill); background: var(--cream); font: 400 13px/1.5 var(--sans); color: var(--grey-1); }
.perk strong { color: var(--ink); font-weight: 600; }
.perk .koko { padding: 2px 6px; border-radius: 4px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 600; }
.perk--pts { cursor: pointer; }
.perk--pts svg { width: 16px; height: 16px; color: var(--v-accent); }
.perk--pts:hover { background: #ECE6DC; }
.opt { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.opt legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; }
.opt legend span { font-weight: 400; color: var(--grey-2); }
.vpills { display: flex; flex-wrap: wrap; gap: 8px; }
.vpill { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--pill); background: var(--white); color: var(--ink); font: 500 13px/1.5 var(--sans); cursor: pointer; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.vpill:hover { border-color: var(--grey-3); }
.vpill[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.vpill.is-out { color: var(--grey-3); text-decoration: line-through; text-decoration-thickness: 1px; background: #FAFAF8; }
.vpill.is-out[aria-checked="true"] { box-shadow: 0 0 0 1.5px var(--grey-3); border-color: var(--grey-3); }
.vpill__out { position: absolute; top: -8px; right: -4px; padding: 1px 6px; border-radius: var(--pill); background: var(--grey-1); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.vpill__is { padding: 1px 5px; border-radius: 4px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-decoration: none; }
.buy__qty { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.buy__label { font-size: 14px; font-weight: 600; }
.qty { display: inline-flex; align-items: center; height: 44px; border: 1.5px solid var(--line); border-radius: var(--pill); }
.qty button { width: 44px; height: 100%; border: 0; background: none; font-size: 18px; cursor: pointer; }
.qty output { min-width: 28px; text-align: center; font-weight: 600; }
.buy__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v-btn[disabled] { opacity: .45; cursor: not-allowed; }
.v-btn--wa { min-height: 48px; background: var(--white); color: #128C4B; box-shadow: inset 0 0 0 1.5px #BFE3CC; }
.v-btn--wa svg { width: 20px; height: 20px; }
.v-btn--wa:hover { background: #F1FAF4; }
.bnd { display: grid; gap: 12px; padding: 16px; border-radius: var(--v-radius); background: var(--cream); }
.bnd__head { display: flex; justify-content: space-between; align-items: center; }
.bnd__tag { padding: 2px 8px; border-radius: var(--pill); background: var(--v-accent); color: var(--white); font-size: 12px; font-weight: 600; }
.bnd__row { display: flex; align-items: center; gap: 8px; }
.bnd__row img { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; background: #CDCDCD; }
.bnd__plus { font-weight: 600; color: var(--grey-2); }
.bnd__txt { display: grid; gap: 2px; margin-left: 8px; font-size: 14px; }
.bnd__txt span { color: var(--grey-2); font-size: 13px; }
.eyebrow--accent { color: var(--v-accent) !important; }
.buy .why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--v-radius); }
.buy .why .ticks li { font-size: 14px; }
.estrip { border-radius: var(--v-radius); background: var(--ink); color: var(--white); overflow: hidden; }
.estrip__top { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.estrip__top > span:nth-child(2) { display: grid; flex: 1; }
.estrip__top strong { font-size: 14px; font-weight: 600; }
.estrip__top small { font-size: 12px; color: rgba(255, 255, 255, .6); }
.estrip__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--v-accent); }
.estrip__icon svg { width: 18px; height: 18px; color: var(--white); }
.estrip__links { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); }
.estrip__links button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; background: none; color: rgba(255, 255, 255, .82); font: 500 13px/1.5 var(--sans); cursor: pointer; }
.estrip__links button + button { border-left: 1px solid var(--line-dark); }
.estrip__links button:hover { color: var(--white); background: rgba(255, 255, 255, .06); }
.estrip__links svg { width: 16px; height: 16px; color: var(--v-accent); }
.buy__desc { font-size: 15px; line-height: 1.5; color: var(--grey-1); }
.clamp.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.buy__more { justify-self: start; padding: 0; border: 0; background: none; font: 600 14px/1.5 var(--sans); cursor: pointer; }
@media (min-width: 1024px) { .buy__more { display: none; } }

/* Elite-style dark modals */
.emodal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(10, 10, 10, .55); }
.emodal[hidden] { display: none; }
.emodal__card { position: relative; display: grid; gap: 16px; width: min(440px, 100%); padding: 28px 24px 24px; border-radius: 16px; background: var(--ink); color: var(--white); box-shadow: 0 24px 64px rgba(0, 0, 0, .4); animation: pop 220ms var(--ease); }
.emodal .eyebrow { color: var(--v-accent); }
.emodal .ticks li { color: rgba(255, 255, 255, .86); font-weight: 400; font-size: 15px; }
.emodal__x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--white); font-size: 24px; cursor: pointer; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 599px) { .emodal { align-items: end; padding: 0; } .emodal__card { width: 100%; border-radius: 16px 16px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); } }

/* below the fold */
.pstats__in { display: grid; grid-template-columns: repeat(2, 1fr); }
.label-img { max-width: 420px; border-radius: var(--v-radius); overflow: hidden; }
.fbt { display: grid; gap: 24px; }
.fbt__items { display: grid; gap: 12px; }
.fbt__item { display: grid; grid-template-columns: auto 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: var(--v-radius); background: var(--cream); cursor: pointer; }
.fbt__item input { width: 18px; height: 18px; accent-color: var(--v-accent); }
.fbt__img img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; background: #CDCDCD; }
.fbt__name { font-weight: 600; font-size: 14px; line-height: 1.5; }
.fbt__price { font-weight: 600; font-size: 14px; }
.fbt__sum { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: var(--v-radius); border: 1px solid var(--line); }
.fbt__sum strong { font: 600 28px/1.1 var(--sans); letter-spacing: -.02em; }
.fbt__sum .v-btn { margin-top: 10px; }
@media (min-width: 1024px) { .fbt { grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; } .fbt__items { grid-template-columns: repeat(3, 1fr); } .fbt__item { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; align-content: start; } .fbt__item input { grid-row: 1; } .fbt__img { grid-column: 1 / -1; grid-row: 2; } .fbt__img img { width: 100%; height: auto; aspect-ratio: 1; } .fbt__name, .fbt__price { grid-column: 1 / -1; } }

/* sticky mobile add-to-cart */
.sticky-atc { position: fixed; inset: auto 0 0 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(10, 10, 10, .06); transform: translateY(110%); transition: transform 300ms var(--ease); }
.sticky-atc.is-on { transform: none; }
.sticky-atc img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: #CDCDCD; }
.sticky-atc__info { display: grid; min-width: 0; flex: 1; }
.sticky-atc__info strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__info span { font-size: 12px; color: var(--grey-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) { .sticky-atc { display: none; } }

/* toast */
.toast { visibility: hidden; position: fixed; left: 50%; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--pill); background: var(--ink); color: var(--white); font-size: 14px; font-weight: 500; transform: translate(-50%, 140%); transition: transform 300ms var(--ease); }
.toast.is-on { visibility: visible; transform: translate(-50%, 0); }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v-accent); }

/* ---------- motion: reveal on scroll ---------- */
.v-js .v-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.v-js .v-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .v-js .v-reveal { opacity: 1; transform: none; }
  .hero__copy > *, .hero__media img { opacity: 1 !important; transform: none !important; }
  .ticker__track { flex-wrap: wrap; width: auto; }
  .ticker__list + .ticker__list { display: none; }
}


/* ================= round 3 · homepage components ================= */
/* brand rail */
.logos { background: var(--white); border-bottom: 1px solid var(--line); }
.logos__in { display: flex; align-items: center; gap: 32px; padding-block: 20px; }
.logos__in > .eyebrow { flex: 0 0 auto; max-width: 160px; line-height: 1.5; }
.logos__track { display: flex; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logos__run { display: flex; flex: 0 0 auto; gap: 12px; padding-right: 12px; animation: logos var(--logos-speed, 48s) linear infinite; }
.logos__track:hover .logos__run { animation-play-state: paused; }
.logo { flex: 0 0 auto; width: 88px; height: 88px; border-radius: var(--v-radius); overflow: hidden; border: 1px solid var(--line); background: #fff; transition: transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.logo:hover { transform: translateY(-2px); border-color: var(--ink); }
@keyframes logos { to { transform: translateX(-100%); } }
@media (max-width: 767px) { .logos__in { flex-direction: column; align-items: stretch; gap: 12px; padding-block: 16px; } .logos__in > .eyebrow { max-width: none; } .logo { width: 72px; height: 72px; } }

/* shop your way: collection tiles (live deck packshots on dark) */
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
.tiles::-webkit-scrollbar { display: none; }
.tile { position: relative; display: block; scroll-snap-align: start; aspect-ratio: 4 / 5; border-radius: var(--v-radius); overflow: hidden; background: var(--ink); color: var(--white); isolation: isolate; }
.tile img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, 0) 45%); }
.tile:hover img { transform: scale(1.04); }
.tile__body { position: absolute; inset: auto 16px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile__title { font: 600 20px/1.1 var(--sans); letter-spacing: -.02em; }
.tile .arrow { background: var(--v-accent); color: var(--white); }
.tile:hover .arrow { transform: translateX(3px); }
@media (min-width: 768px) { .tiles { grid-auto-columns: 32%; } }
@media (min-width: 1024px) { .tiles { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; overflow: visible; } }

/* why choose us (ink) */
.why-head { display: grid; gap: 28px; margin-bottom: 40px; }
.stats-inline { display: flex; gap: 32px; }
.stats-inline div { display: grid; gap: 2px; }
.stats-inline strong { font: 600 var(--t-h1)/1.1 var(--sans); letter-spacing: -.02em; }
.stats-inline .star { color: var(--v-accent); }
.stats-inline span { font-size: 14px; color: rgba(255, 255, 255, .62); }
@media (min-width: 1024px) { .why-head { grid-template-columns: 1.2fr auto; align-items: end; margin-bottom: 56px; } }

/* brand of the month: shop-the-look hotspots */
.hs__grid { display: grid; gap: 24px; }
.hs__media { position: relative; border-radius: var(--v-radius); overflow: visible; }
.hs__media > img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--v-radius); }
.hs__dot { position: absolute; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); font: 600 13px/1.5 var(--sans); cursor: pointer; box-shadow: 0 4px 14px rgba(10, 10, 10, .3); transition: transform var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease); }
.hs__dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); animation: pulse 2s var(--ease) infinite; }
.hs__dot:hover, .hs__dot[aria-expanded="true"], .hs__dot.is-hot { background: var(--v-accent); color: var(--white); transform: scale(1.08); }
@keyframes pulse { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.hs__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hs__item { display: grid; grid-template-columns: 28px 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: var(--v-radius); background: var(--white); border: 1.5px solid transparent; transition: border-color var(--t) var(--ease); }
.hs__item.is-hot { border-color: var(--v-accent); }
.hs__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 600; }
.hs__img img { width: 72px; height: 72px; object-fit: contain; border-radius: 6px; background: var(--cream); }
.hs__info { display: grid; gap: 2px; min-width: 0; }
.hs__name { font-weight: 600; font-size: 15px; line-height: 1.1; }
.hs__name:hover { color: var(--v-accent); }
.hs__price { font-size: 14px; color: var(--grey-1); }
/* desktop: floating card next to the dot */
.hs__pop { position: absolute; z-index: 5; width: 260px; display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 12px; border-radius: var(--v-radius); background: var(--white); color: var(--ink); box-shadow: 0 16px 40px rgba(10, 10, 10, .22); }
.hs__pop img { width: 88px; height: 88px; object-fit: contain; background: var(--cream); border-radius: 6px; }
.hs__popbody { display: grid; gap: 4px; align-content: start; min-width: 0; }
.hs__popcta { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.hs__close { position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; border: 0; background: none; font-size: 20px; line-height: 1.1; cursor: pointer; color: var(--grey-2); }
@media (min-width: 1024px) { .hs__grid { grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; } }
/* mobile: the card is a bottom sheet */
@media (max-width: 767px) {
  .hs__pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; width: auto; grid-template-columns: 96px 1fr; padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(10, 10, 10, .25); z-index: 90; animation: sheet 260ms var(--ease); }
  .hs__pop img { width: 96px; height: 96px; }
  .hs__list { display: none; }
}
@keyframes sheet { from { transform: translateY(100%); } }

/* shop by goal */
.gtiles { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
.gtiles::-webkit-scrollbar { display: none; }
.gtiles[hidden] { display: none; }
.gtile { position: relative; display: block; scroll-snap-align: start; aspect-ratio: 3 / 4; border-radius: var(--v-radius); overflow: hidden; color: var(--white); isolation: isolate; }
.gtile img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.gtile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 10, 10, .7) 0%, rgba(10, 10, 10, 0) 45%); }
.gtile:hover img { transform: scale(1.04); }
.gtile span { position: absolute; inset: auto 14px 14px; font: 600 18px/1.1 var(--sans); letter-spacing: 0; }
@media (min-width: 768px) { .gtiles { grid-auto-columns: 30%; } }
@media (min-width: 1024px) { .gtiles { grid-auto-flow: row; grid-template-columns: repeat(var(--n, 6), 1fr); margin: 0; padding: 0; overflow: visible; } .gtiles[data-goal-panel="train"] { --n: 4; } .gtiles[data-goal-panel="train"] .gtile { aspect-ratio: 4 / 5; } }
.head .v-tabs { margin-bottom: 0; }

/* SiS distributor band (ink, dense, no empty zones) */
.sis { background: var(--ink); color: var(--white); padding-block: var(--section); }
.sis__top { display: grid; gap: 28px; margin-bottom: 32px; }
.sis__text { display: grid; gap: 14px; align-content: center; justify-items: start; }
.sis__logo { width: 64px; height: 64px; border-radius: var(--v-radius); }
.sis .eyebrow { color: rgba(255, 255, 255, .6); }
.sis .lead { color: rgba(255, 255, 255, .72); }
.sis__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 6px; }
.sis .v-link { color: var(--white); }
.sis__media { border-radius: var(--v-radius); overflow: hidden; aspect-ratio: 16 / 9; }
.sis__media img { width: 100%; height: 100%; object-fit: cover; }
.sis__cards .card__body { color: var(--white); }
.sis__cards .card__stats { border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .78); }
.sis__cards .card__per, .sis__cards .card__koko { color: rgba(255, 255, 255, .6); }
.sis__cards .card__koko b { color: var(--white); }
.sis__cards .eyebrow { color: rgba(255, 255, 255, .55); }
.sis__cards .quick { background: var(--v-accent); }
@media (min-width: 1024px) { .sis__top { grid-template-columns: 1fr 1.25fr; gap: 56px; margin-bottom: 48px; } .sis__media { aspect-ratio: 16 / 10; } }
@media (max-width: 1023px) { .sis__cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; } .sis__cards > * { scroll-snap-align: start; } }
@media (min-width: 768px) and (max-width: 1023px) { .sis__cards { grid-auto-columns: 40%; } }

/* bundles */
.promos--wide .promo { aspect-ratio: 16 / 10; }
.promo__badge { position: static; align-self: flex-start; }
@media (min-width: 900px) { .promos--wide { grid-template-columns: repeat(3, 1fr); } }

/* SNH Elite */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; padding: 0; list-style: none; }
.chips-row li { padding: 6px 12px; border-radius: var(--pill); background: rgba(10, 10, 10, .16); font-size: 13px; font-weight: 600; }
.tier { gap: 4px; padding: 20px 14px; }
.tier small { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.band .v-btn--ink { background: var(--ink); }
@media (max-width: 599px) { .tiers { grid-template-columns: 1fr; } .tier { grid-template-columns: auto 1fr; text-align: left; align-items: center; column-gap: 16px; } .tier strong { grid-row: span 2; } }

/* buying guides */
.posts { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
.posts::-webkit-scrollbar { display: none; }
.post { display: grid; gap: 10px; align-content: start; scroll-snap-align: start; }
.post__img { border-radius: var(--v-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.post:hover .post__img img { transform: scale(1.03); }
.post__title { font-size: 20px; }
.post:hover .post__title { color: var(--v-accent); }
@media (min-width: 900px) { .posts { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; overflow: visible; } }

/* FAQ on ink */
.acc--dark { border-color: var(--line-dark); }
.acc--dark details { border-color: var(--line-dark); }
.acc--dark .acc__body.v-prose { color: rgba(255, 255, 255, .72); }
.v-section--dark .split { align-items: start; }
@media (prefers-reduced-motion: reduce) { .logos__run { animation: none; } .hs__dot::before { animation: none; } }
.hs__pop[hidden] { display: none; }
.sis__logo { width: 88px; height: 88px; border: 1px solid rgba(255, 255, 255, .18); }
/* blog images are the store's framed product shots: crop the frame out */
.post__img img { transform: scale(1.22); }
.post:hover .post__img img { transform: scale(1.26); }
@media (min-width: 600px) and (max-width: 899px) { .grid--rail { grid-auto-columns: 40%; } .promos { grid-auto-columns: 46%; } .quotes { grid-auto-columns: 46%; } .posts { grid-auto-columns: 46%; } }
.split { align-items: start; }
.split > .head__text { align-content: start; }
@media (max-width: 599px) {
  .buy__top { flex-wrap: nowrap; gap: 10px; }
  .buy__brand { width: 64px; }
  .buy__rating > span:not(.stars) { display: none; }
  .buy__perks { flex-wrap: nowrap; gap: 6px; }
  .perk { flex: 1 1 auto; min-width: 0; padding: 0 10px; font-size: 12px; white-space: nowrap; }
  .perk--pts .perk__long { display: none; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .fbt__items { grid-template-columns: repeat(3, 1fr); }
  .fbt__item { grid-template-columns: auto 1fr; align-content: start; }
  .fbt__img { grid-column: 1 / -1; grid-row: 2; }
  .fbt__img img { width: 100%; height: auto; aspect-ratio: 1; }
  .fbt__name, .fbt__price { grid-column: 1 / -1; }
  .fbt__sum { grid-template-columns: 1fr auto; align-items: center; }
  .fbt__sum .v-btn { grid-column: 1 / -1; }
}

/* ================= round 4 · SiS full-screen slider ================= */
.sisx { background: var(--ink); color: var(--white); }
.hero--sis { height: 100svh; max-height: none; min-height: 560px; }
.sisx__badge { position: absolute; left: 0; right: 0; top: 28px; z-index: 4; display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.sisx__badge img { width: 88px; height: auto; }
.sisx__badge .sep { margin: 0 8px; opacity: .5; }
.sisv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* tiles slide: 5 portrait SiS category images, never larger than their 540px source */
.hero__slide--tiles { background: radial-gradient(120% 80% at 50% 0%, #1d1d1f 0%, var(--ink) 70%); }
.stiles__wrap { position: absolute; inset: 104px 0 96px 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 24px; }
.stiles__head { display: grid; gap: 8px; }
.stiles__head .eyebrow { color: rgba(255, 255, 255, .6); }
.stiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; min-height: 0; }
.stile { position: relative; display: block; min-height: 0; max-width: 540px; border-radius: var(--v-radius); overflow: hidden; background: #1a1a1b; isolation: isolate; }
.stile img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.stile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 10, 10, .75), rgba(10, 10, 10, 0) 45%); }
.stile:hover img { transform: scale(1.04); }
.stile__l { position: absolute; inset: auto 14px 14px; display: flex; align-items: center; justify-content: space-between; font: 600 18px/1.1 var(--sans); letter-spacing: 0; }
.stile .arrow { background: var(--v-accent); color: var(--white); }
/* trust slide: McColgan at native size + quote */
.hero__slide--trust { background: radial-gradient(90% 70% at 25% 60%, #2a1208 0%, var(--ink) 65%); }
.trust__wrap { position: absolute; inset: 104px 0 96px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; }
.trust__img { margin: 0; width: min(353px, 30vw); border-radius: var(--v-radius); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.trust__img img { width: 100%; height: auto; }
.trust__copy { display: grid; gap: 16px; justify-items: start; max-width: 560px; }
.trust__copy .eyebrow { color: var(--v-accent); }
.sisx__strip { padding-block: 40px 56px; }
.sisx__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sisx__head .eyebrow { color: rgba(255, 255, 255, .6); }
.sisx .v-link { color: var(--white); }
@media (max-width: 1023px) {
  .stiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
  .stile--x { display: none; }
  .trust__wrap { grid-template-columns: 1fr; gap: 24px; align-content: center; justify-items: start; }
  .trust__img { width: min(220px, 55vw); }
}
@media (max-width: 767px) {
  .sisx__badge { top: 18px; font-size: 12px; flex-wrap: wrap; gap: 8px 12px; }
  .sisx__badge img { width: 64px; }
  .stiles__wrap, .trust__wrap { inset: 84px 0 76px 0; gap: 16px; }
  .stiles { gap: 10px; }
  .stile__l { font-size: 15px; inset: auto 10px 10px; }
  .stile .arrow { width: 26px; height: 26px; }
}
/* the sticky header (64/72px) sits over the top of the SiS screen once scrolled to: keep content below it */
.sisx__badge { top: calc(var(--hdr-h) + 20px); }
.stiles__wrap, .trust__wrap { top: calc(var(--hdr-h) + 108px); }
.trust__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(.3) saturate(.8); transform: scale(1.1); }
.trust__wrap { grid-template-columns: auto minmax(0, 1fr) minmax(220px, 300px); }
.trust__proof { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.trust__proof li { display: grid; gap: 2px; padding: 18px 0; border-bottom: 1px solid var(--line-dark); }
.trust__proof strong { font-weight: 600; font-size: 16px; }
.trust__proof span { font-size: 14px; color: rgba(255, 255, 255, .65); }
@media (max-width: 1023px) { .trust__wrap { grid-template-columns: 1fr; } .trust__proof { display: none; } }
@media (max-width: 767px) { .stiles__wrap, .trust__wrap { top: calc(var(--hdr-h) + 64px); } .sisx__badge { top: calc(var(--hdr-h) + 14px); } }
@media (max-width: 599px) { .sisx__badge { flex-wrap: wrap; white-space: normal; } .sisx__badge .sep { margin: 0 5px; } .stiles__wrap, .trust__wrap { top: calc(var(--hdr-h) + 72px); } }
@media (min-width: 600px) and (max-width: 1023px) { .stiles__wrap, .trust__wrap { top: calc(var(--hdr-h) + 104px); } }

/* ================= round 4 · SNH Elite glass ================= */
.elite { position: relative; overflow: hidden; isolation: isolate; background: #C9410F; color: var(--white); padding-block: var(--section); }
#elite-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(135deg, #F26A2E 0%, var(--v-accent) 45%, #A8350B 100%); }
#elite-bg i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: .7; mix-blend-mode: soft-light; animation: mesh 22s ease-in-out infinite alternate; }
#elite-bg i:nth-child(1) { left: -20vmax; top: -30vmax; background: #FFB27A; }
#elite-bg i:nth-child(2) { right: -25vmax; bottom: -35vmax; background: #6E1F02; animation-duration: 28s; animation-delay: -6s; }
#elite-bg i:nth-child(3) { left: 30%; top: 20%; width: 40vmax; height: 40vmax; background: #FF8A3D; animation-duration: 34s; animation-delay: -12s; }
@keyframes mesh { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vmax, 6vmax) scale(1.12); } 100% { transform: translate(-6vmax, 4vmax) scale(.94); } }
@media (prefers-reduced-motion: reduce) { #elite-bg i { animation: none; } }
.glass { position: relative; border-radius: 24px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 60px rgba(80, 20, 0, .25); }
.elite__grid { display: grid; gap: 24px; align-items: center; }
.elite__card { display: grid; gap: 24px; padding: 24px 20px; }
.elite__copy, .elite__tiers { display: grid; gap: 14px; align-content: start; }
.elite__card .eyebrow { color: rgba(255, 255, 255, .9); }
.elite__card .v-h2 { font-size: var(--t-h2); line-height: 1.1; }
.elite__card .lead { color: rgba(255, 255, 255, .95); }
.elite .chips-row li { background: rgba(10, 10, 10, .24); }
.elite .v-btn--line:hover span { color: var(--ink); }
.ladder__bar { position: relative; height: 6px; margin: 0 7px; border-radius: 3px; background: linear-gradient(90deg, #C98A55, #D9DDE3 66%, #F4C95D); }
.ladder__bar i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px rgba(10, 10, 10, .18); }
.ladder__labels { position: relative; height: 18px; margin-top: 8px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.ladder__labels span { position: absolute; top: 0; }
.ladder__labels span:first-child { left: 0; }
.ladder__labels span:nth-child(2) { transform: translateX(-50%); }
.ladder__labels span:last-child { right: 0; }
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.tcard { position: relative; display: grid; gap: 2px; align-content: start; padding: 14px 12px 12px; border-radius: 14px; background: rgba(40, 10, 0, .16); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); overflow: hidden; }
.tcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tier); }
.tcard--bronze { --tier: linear-gradient(90deg, #B8743F, #E2A56E); }
.tcard--silver { --tier: linear-gradient(90deg, #A9B0B8, #EEF1F4); }
.tcard--gold { --tier: linear-gradient(90deg, #D9A521, #FFE08A); }
.tcard__name { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tcard strong { font: 600 var(--t-h3)/1.1 var(--sans); letter-spacing: -.02em; }
.tcard__th { font-size: 12px; font-weight: 600; }
.tcard__perk { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
/* visual: live register-page cutout + CSS membership card */
.elite__visual { position: relative; min-height: 220px; }
.elite__girl { position: absolute; right: 0; bottom: -40px; width: auto; height: 125%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(80, 20, 0, .35)); }
.elite__gift, .elite__coins { position: absolute; width: 72px; height: auto; animation: float 6s ease-in-out infinite; }
.elite__gift { left: 52%; top: 0; }
.elite__coins { left: 2%; bottom: 0; animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-10px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .elite__gift, .elite__coins { animation: none; } }
@media (max-width: 767px) {
  .elite__visual { order: -1; min-height: 190px; }
  .elite__coins { left: 46%; bottom: -6px; width: 64px; z-index: 2; }
  .elite__gift { z-index: 2; }
  .elite__card .lead { font-size: 16px; }
  .tcard { padding: 12px 10px 10px; }
  .tcard__perk { font-size: 12px; }
}
@media (min-width: 768px) {
  .elite__card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; padding: 32px; align-items: center; }
  .tcards { grid-template-columns: 1fr; }
  .tcard { grid-template-columns: 76px 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; }
  .tcard__name { grid-column: 1; grid-row: 1; }
  .tcard strong { grid-column: 1; grid-row: 2 / span 2; align-self: start; }
  .tcard__th, .tcard__perk { grid-column: 2; }
  .tcard__th { grid-row: 1 / span 2; align-self: end; }
  .tcard__perk { grid-row: 3; }
}
@media (min-width: 768px) and (max-width: 1023px) { .elite__visual { display: none; } }
@media (min-width: 1024px) {
  .elite__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
  .elite__visual { min-height: 400px; align-self: stretch; }
  .elite__girl { height: calc(100% + 56px); bottom: -56px; right: -26%; }
  .elite__gift { left: 6%; top: 6%; width: 84px; }
  .elite__coins { left: 50%; bottom: 2%; width: 72px; z-index: 2; }
}
.srch[hidden], .az__g[hidden], .az__tiles li[hidden], .mm__list[hidden], .srch__empty[hidden] { display: none; }
/* logo tiles with a non-square box: pin the image to the tile so `contain` letterboxes instead of clipping */
.mz__logos .brand, .az__tiles .brand { position: relative; }
.mz__logos .brand img, .az__tiles .brand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mz__logos .brand img.brand__snh, .az__tiles .brand img.brand__snh { inset: 0; margin: auto; width: 60%; height: auto; object-fit: contain; }

/* ================= round 4 · PDP upgrade ================= */
/* gallery: all 17 live images; thumbs scroll inside the main image height (desktop), horizontal strip (mobile) */
@media (min-width: 1024px) {
  .pg__thumbs { grid-template-rows: none; grid-auto-rows: 88px; height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
}
@media (max-width: 1023px) {
  .pg__thumbs { position: static; transform: none; display: flex; gap: 8px; padding: 10px var(--gutter) 0; overflow-x: auto; scrollbar-width: none; }
  .pg__thumbs::-webkit-scrollbar { display: none; }
  .pg__thumb { flex: 0 0 56px; width: 56px; height: 56px; box-shadow: none; border-color: var(--line); }
}
/* purchase option radio cards */
.popt { display: grid; gap: 8px; }
.popt__card { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 4px 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--v-radius); cursor: pointer; transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.popt__card input { position: absolute; opacity: 0; pointer-events: none; }
.popt__dot { width: 20px; height: 20px; border: 2px solid var(--grey-3); border-radius: 50%; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.popt__card.is-on { border-color: var(--ink); background: #FBFAF7; }
.popt__card.is-on .popt__dot { border-color: var(--v-accent); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 10px var(--v-accent); }
.popt__card:has(input:focus-visible) { outline: 2px solid var(--v-accent); outline-offset: 2px; }
.popt__t { font-weight: 600; font-size: 15px; }
.popt__p { font-weight: 600; font-size: 15px; }
.popt__more { grid-column: 2 / -1; display: none; align-items: center; gap: 10px; font-size: 13px; color: var(--grey-2); }
.popt__card.is-on .popt__more { display: flex; }
.popt__more select { flex: 1; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); font: 500 14px/1.5 var(--sans); color: var(--ink); }
.ph-tag { margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: #FFF1C2; color: #6B4B00; font: 600 12px/1.5 var(--sans); font-style: normal; letter-spacing: .04em; white-space: nowrap; }
/* bundle module */
.bx { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--v-radius); background: var(--cream); }
.bx__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; }
.bx__pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.bx__pills [role="tab"] { flex: none; display: grid; gap: 1px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); font: 600 13px/1.5 var(--sans); color: var(--ink); text-align: left; cursor: pointer; }
.bx__pills [role="tab"] span { font-size: 12px; font-weight: 600; color: var(--v-accent); }
.bx__pills [aria-selected="true"] { border-color: var(--ink); }
.bx__panel { display: grid; gap: 12px; }
.bx__panel[hidden] { display: none; }
.bx__hero { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.bx__hero img { width: 112px; height: 112px; border-radius: 8px; object-fit: cover; background: var(--white); }
.bx__hero strong { display: block; font-size: 18px; letter-spacing: 0; }
.bx__hero span { font-size: 13px; color: var(--grey-2); }
.bx__items { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bx__items li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--white); font-size: 13px; }
.bx__items img { width: 40px; height: 40px; object-fit: contain; }
.bx__items b { font-weight: 600; white-space: nowrap; }
.bx__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; color: var(--grey-2); }
.bx__price { font: 600 24px/1.1 var(--sans); color: var(--ink); letter-spacing: -.02em; }
/* Learn more: live blog posts */
.posts { display: grid; gap: var(--gap); }
.post { display: grid; gap: 6px; align-content: start; }
.post__img { display: block; overflow: hidden; border-radius: var(--v-radius); aspect-ratio: 16 / 10; background: var(--white); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.post:hover .post__img img { transform: scale(1.03); }
.post__cat { margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--v-accent); }
.post__t { font-weight: 600; font-size: 18px; line-height: 1.5; letter-spacing: 0; }
.post:hover .post__t { text-decoration: underline; text-underline-offset: 3px; }
.post__m { font-size: 13px; color: var(--grey-2); }
@media (min-width: 768px) { .posts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 479px) { .bx__head .meta { display: none; } }
/* QA: readability over the animated mesh. The measured worst case was ~2.5:1 for white text, so the mesh is deeper and the
   glass carries a faint warm-dark tint under its content (the spec'd .12 white fill, border and blur are unchanged). */
#elite-bg { background: linear-gradient(135deg, #D2521D 0%, #B8400F 45%, #7A2607 100%); }
#elite-bg i:nth-child(1) { background: #F28A4E; opacity: .4; }
#elite-bg i:nth-child(3) { background: #E8642A; opacity: .45; }
.elite__card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(58, 14, 0, .26); pointer-events: none; }
.elite__card { isolation: isolate; }
.elite .tcard { background: rgba(40, 10, 0, .2); }
.elite__card .eyebrow, .elite__card .lead, .ladder__labels, .tcard__perk { color: var(--white); }


/* =====================================================================================================
   THEME LAYER (round 5): what the Shopify build needs on top of the ported prototype styles
   ===================================================================================================== */
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("instrument-serif-italic-latin.woff2") format("woff2"); }
:root { --sans: var(--text-font-family, "Inter"), system-ui, -apple-system, "Segoe UI", sans-serif; }

/* header: the section wrapper is the sticky element; the ticker + announcement scroll away (negative top) */
.snh-hdr-sec { position: sticky; top: calc(-1 * var(--v-bars, 0px)); z-index: 50; }
.v2 .hdr { position: relative; top: auto; }
.hdr__logo { display: block; }
.hdr__logo img, .v2 .hdr__logo img { width: var(--logo-w, 82px); height: auto; }
.hdr__logo-img--light { display: none !important; }
.hdr--overlay:not(.is-solid):not(.is-open) .hdr__logo-img--light { display: block !important; }
.hdr--overlay:not(.is-solid):not(.is-open) .hdr__logo-img:not(.hdr__logo-img--light):has(+ .hdr__logo-img--light) { display: none; }
.hdr__logo-text { font: 600 18px/1.5 var(--sans); letter-spacing: -.02em; }
.icon-btn__count { display: block; transition: opacity var(--t) var(--ease); }
.icon-btn__count.opacity-0 { opacity: 0; }
.mini__ph { display: block; }
.mega[hidden], .mega-scrim[hidden], .srch-scrim[hidden], .mmenu[hidden], .az__none[hidden], .srch__res[hidden], .srch__empty[hidden] { display: none !important; }
.v2 input[type="search"] { -webkit-appearance: none; appearance: none; box-shadow: none; padding: 0; min-height: 0; }
.v2 input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.srch__barin { margin-block: 0; }
.srch__list .mini__t { -webkit-line-clamp: 2; }
.brand--contain img { object-fit: contain !important; padding: 14%; }
.mz__logos .brand.brand--contain img, .az__tiles .brand.brand--contain img { inset: 0; margin: auto; width: 100%; height: 100%; }

/* ---------- R7 · account button + panel (snippets/snh-acct-button, snh-acct-panel) ---------- */
[data-tier="bronze"] { --tier: linear-gradient(90deg, #B8743F, #E2A56E); --tier-c: #D49461; }
[data-tier="silver"] { --tier: linear-gradient(90deg, #A9B0B8, #EEF1F4); --tier-c: #C9CED4; }
[data-tier="gold"] { --tier: linear-gradient(90deg, #D9A521, #FFE08A); --tier-c: #F0C04A; }
.hdr__start { display: contents; }
.show-s { display: none; }
@media (max-width: 599px) {
  .hdr__start { display: flex; gap: 2px; justify-self: start; }
  .show-s { display: grid; }
}
.acct-ini { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--white); font: 600 13px/1.1 var(--sans); }
.hdr--overlay.is-overlay:not(.is-solid):not(.is-open) .acct-ini { background: var(--white); color: var(--ink); }
.tdot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--tier-c, #D49461); box-shadow: 0 0 0 2px var(--white); }

.acp { position: fixed; inset: 0 0 0 auto; z-index: 95; width: min(420px, 100%); color: var(--white); background: radial-gradient(120% 60% at 100% 0%, rgba(224, 82, 28, .32), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(255, 178, 122, .14), transparent 60%), rgba(14, 12, 12, .9); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); border-left: 1px solid var(--line-dark); box-shadow: -24px 0 60px rgba(10, 10, 10, .28); transform: translateX(100%); transition: transform 320ms var(--ease); }
.acp.is-open { transform: none; }
.acp[hidden] { display: none; }
.acp-scrim { position: fixed; inset: 0; z-index: 94; background: rgba(10, 10, 10, .4); opacity: 0; transition: opacity 200ms var(--ease); }
.acp-scrim.is-on { opacity: 1; }
.acp-scrim[hidden] { display: none; }
.acp__sheet { display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.acp__top { display: flex; align-items: center; justify-content: space-between; flex: none; height: var(--hdr-h); padding: 0 12px 0 24px; border-bottom: 1px solid var(--line-dark); }
.acp__brand { font: 600 16px/1.1 var(--sans); letter-spacing: -.02em; }
.acp__brand em, .acp__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: #FFB27A; }
.acp__close:hover { background: rgba(255, 255, 255, .12); }
.acp__body { display: grid; gap: 24px; align-content: start; padding: 24px 24px 32px; }
.acp__who { display: flex; align-items: center; gap: 16px; }
.acp__av { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px var(--tier-c); font: 600 24px/1.1 var(--sans); }
.acp__id { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.acp__name { font: 600 20px/1.1 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.tierb { display: inline-flex; align-items: center; height: 24px; white-space: nowrap; padding: 0 10px; border-radius: var(--pill); background: var(--tier); color: var(--ink); font: 600 12px/1.1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.tierb--bronze { --tier: linear-gradient(90deg, #B8743F, #E2A56E); }
.tierb--silver { --tier: linear-gradient(90deg, #A9B0B8, #EEF1F4); }
.tierb--gold { --tier: linear-gradient(90deg, #D9A521, #FFE08A); }
.acp__card { position: relative; display: grid; gap: 4px; padding: 24px 20px 20px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); overflow: hidden; }
.acp__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tier); }
.acp__lbl, .acp__perks span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.acp__pts { font: 600 44px/1.1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.acp__val { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.acp__prog { display: grid; gap: 8px; margin-top: 16px; }
.acp__bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.acp__bar i { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: var(--tier); }
.acp__next { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.acp__next b { color: var(--white); }
.acp__est { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.acp__links { display: grid; border-top: 1px solid var(--line-dark); }
.acp__links a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 28px 0 4px; border-bottom: 1px solid var(--line-dark); font: 500 16px/1.5 var(--sans); transition: color var(--t) var(--ease), padding var(--t) var(--ease); }
.acp__links a::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; opacity: .45; transform: translateY(-50%) rotate(45deg); transition: opacity var(--t) var(--ease), right var(--t) var(--ease); }
.acp__links a:hover, .acp__links a:focus-visible { color: #FFB27A; }
.acp__links a:hover::after { opacity: 1; right: 0; }
.acp__links svg { width: 20px; height: 20px; flex: none; opacity: .8; }
.acp__out { justify-self: start; }
.acp .v-btn--line:hover span { color: var(--ink); }
.acp__h { font: 600 36px/1.1 var(--sans); letter-spacing: -.02em; }
.acp__lead { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.acp__perks { display: grid; gap: 8px; }
.acp__perks li { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); }
.acp__perks b { font: 600 20px/1.1 var(--sans); letter-spacing: -.02em; color: #FFB27A; }
.acp__perks span { letter-spacing: 0; text-transform: none; font-size: 14px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.acp__ctas { display: grid; gap: 12px; }
.acp__more { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font: 600 15px/1.5 var(--sans); }
.acp__more svg { width: 16px; height: 16px; }
.acp__more:hover { color: #FFB27A; }
.acp--static { position: relative; inset: auto; z-index: auto; transform: none; height: auto; border: 1px solid var(--line-dark); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(10, 10, 10, .22); }
.acp--static .acp__top { height: 64px; }
@media (max-width: 599px) { .acp { width: 100%; border-left: 0; } }
@media (prefers-reduced-motion: reduce) { .acp, .acp-scrim { transition: none; } }

/* footer */
.snh-ftr-sec { margin-top: 0; }
.ftr__links { display: grid; gap: 10px; }
.ftr__policies { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ftr__policies a:hover { color: var(--white); }
.ftr__mark img { max-width: none; }
/* sections sit on white like the prototype page (Impact's canvas colour is cream) */
.v-section:not(.v-section--cream):not(.v-section--dark):not(.elite) { background: var(--white); }
@media (max-width: 767px) { .hs__side:not(:has(.hs__pts)) { display: none; } }
.card__stats li { min-width: 0; }
.card__stats li span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.news__form { flex-wrap: wrap; }
.news__msg { flex-basis: 100%; font-size: 14px; color: var(--grey-1); }
.news__msg--err { color: #A3361A; }
.v2 ::placeholder { color: #757575; opacity: 1; }

/* ================= phase 3 · Shop the Look, calm (R18) ================= */
/* The image is static: no zoom or pan. Hover / focus on a dot or a product row only highlights its partner. */
.hs__frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--v-radius); background: #E9E4DC; isolation: isolate; }
.hs__frame > .hs__img-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; transform: none; }
.hs__frame > .hs__ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs .hs__dot { transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease); }
.hs .hs__dot:hover { background: var(--white); color: var(--ink); }
.hs .hs__dot.is-hot, .hs .hs__dot[aria-expanded="true"] { background: var(--v-accent); color: var(--white); z-index: 3; box-shadow: 0 0 0 4px rgba(224, 82, 28, .25); }
.hs__dot.is-hot::before, .hs__dot[aria-expanded="true"]::before { border-color: rgba(224, 82, 28, .85); }
.hs__dot:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* list: the active row gets an orange edge and its number fills; nothing moves */
.hs__item { position: relative; transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
.hs__item.is-hot { border-color: var(--v-accent); box-shadow: 0 0 0 1px var(--v-accent); }
.hs__n { transition: background-color 200ms var(--ease); }
.hs__item.is-hot .hs__n { background: var(--v-accent); }
.hs__img img { aspect-ratio: 1; }

/* add buttons: loading + success tick (V2.add toggles is-busy / is-added) */
.v-btn { position: relative; }
.v-btn .v-tick { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity 200ms var(--ease), transform 260ms cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.v-btn .v-tick svg { width: 18px; height: 18px; }
.v-btn.is-busy > span { opacity: 0; }
.v-btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: v-spin 700ms linear infinite; }
.v-btn.is-added { background: #157A3A; color: var(--white); }
.v-btn.is-added > span { opacity: 0; }
.v-btn.is-added .v-tick { opacity: 1; transform: none; }
@keyframes v-spin { to { transform: rotate(360deg); } }
.quick .quick__tick { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.quick.is-busy svg:first-child { animation: v-spin 700ms linear infinite; }
.quick.is-added > svg { opacity: 0; }
.quick.is-added .quick__tick { opacity: 1; }
.quick.is-added { background: #157A3A; }

/* SNH Elite points strip under the list */
.hs__side { display: grid; gap: 12px; align-content: start; }
.hs__pts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-radius: var(--v-radius); background: var(--ink); color: rgba(255, 255, 255, .82); font-size: 13px; line-height: 1.5; }
.hs__pts strong { color: var(--white); }
.hs__pts-tag { padding: 3px 8px; border-radius: var(--pill); background: var(--v-accent); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
a.hs__pts:hover { color: var(--white); }

/* phones: the list stacks under the image; tapping a dot opens a bottom sheet over a scrim */
.hs__scrim { position: fixed; inset: 0; z-index: 88; background: rgba(10, 10, 10, .42); animation: v-fade 200ms var(--ease); }
@keyframes v-fade { from { opacity: 0; } }
@media (max-width: 767px) {
  .hs__side:not(:has(.hs__pts)) { display: grid; }
  .hs__list { display: grid; }
  .hs__item { grid-template-columns: 26px 60px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px 10px 10px; }
  .hs__img img { width: 60px; height: 60px; }
  .hs__name { font-size: 14px; }
  .hs__pop { z-index: 90; }
  .hs .hs__dot { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
}
@media (min-width: 768px) { .hs__scrim { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .hs .hs__dot { transition: none; }
}

/* ================= phase 4 · brand marquee: seamless, uniform tiles, scrubbable ================= */
.mq .mq__track { position: relative; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.mq .mq__track.is-dragging { cursor: grabbing; }
.mq__rail { display: flex; width: max-content; will-change: transform; transform: translate3d(0, 0, 0);
  animation: mq var(--mq-dur, 48s) linear infinite; }
.mq--right .mq__rail { animation-direction: reverse; }
@keyframes mq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--mq-shift, -50%), 0, 0); } }
.mq .logos__run { animation: none; gap: 12px; padding-right: 12px; }
@media (hover: hover) { .mq .mq__track:hover .mq__rail { animation-play-state: paused; } }
.mq .mq__track.is-dragging .mq__rail { animation-play-state: paused; }
/* uniform tiles: one size, one radius, white with a hairline; logos read evenly by max-height */
.mq { --mq-tile-h: calc(var(--mq-logo-h) + 24px); }
.mq .logo { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: calc(var(--mq-logo-h) * 1.75); height: var(--mq-tile-h);
  border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease); }
.mq .logo img { position: absolute; left: 50%; top: 50%; width: calc(100% * var(--ls, 1)); height: calc(100% * var(--ls, 1)); max-width: none; translate: -50% -50%; object-fit: contain; mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.2) brightness(1.06); opacity: .7; transition: filter 260ms var(--ease), opacity 260ms var(--ease); -webkit-user-drag: none; pointer-events: none; }
.mq .logo--dark img { filter: grayscale(1) invert(1) contrast(1.5) brightness(1.06); }
.mq .logo:hover, .mq .logo:focus-visible { transform: translateY(-2px); border-color: rgba(12, 12, 13, .22); box-shadow: 0 8px 22px rgba(10, 10, 10, .08); }
.mq .logo:hover img, .mq .logo:focus-visible img { filter: contrast(1.05) brightness(1.03); opacity: 1; }
.mq .logo--dark:hover img, .mq .logo--dark:focus-visible img { filter: invert(1) contrast(1.5); }
.mq .brand__word { font-size: 13px; color: var(--grey-1); }
@media (max-width: 767px) { .mq { --mq-logo-h: 52px !important; --mq-tile-h: calc(var(--mq-logo-h) + 16px); } .mq .logo { width: calc(var(--mq-logo-h) * 1.5); } }
/* reduced motion: a static row you scroll sideways */
@media (prefers-reduced-motion: reduce) {
  .mq .mq__track { overflow-x: auto; cursor: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .mq .mq__track::-webkit-scrollbar { display: none; }
  .mq__rail { animation: none; transform: none; }
  .mq .logos__run[aria-hidden] { display: none; }
  .mq .logo { scroll-snap-align: start; }
}
/* the footer also carries Impact's .footer class: the theme's sticky add-to-cart bar uses it as its end marker */
.ftr.footer { background: var(--ink); color: var(--white); padding-block: 64px 0; }

/* =====================================================================================================================
   Round 5 polish layer
   ===================================================================================================================== */
/* Elite band: real athlete photo in a frame (cutout still supported) */
.elite__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; border-radius: 22px; overflow: hidden; background: #2a1206; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 30px 60px -24px rgba(60, 15, 0, .6); }
.elite__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.elite__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14, 14, 14, .35)); pointer-events: none; }
@media (max-width: 767px) {
  .elite__visual:has(.elite__photo) { min-height: 280px; }
  .elite__photo ~ .elite__gift { left: 28%; top: -4px; }
  .elite__photo ~ .elite__coins { left: 52%; }
}
@media (min-width: 1024px) {
  .elite__grid:has(.elite__photo) { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
  .elite__photo { width: 84%; }
  .elite__photo ~ .elite__gift { left: 0; top: 4%; }
  .elite__photo ~ .elite__coins { left: 70%; bottom: -4%; }
}

/* ---------- R5 · product card (one card everywhere) ---------- */
.v-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
product-card.card { display: flex; flex-direction: column; min-width: 0; height: 100%; color: var(--ink); text-align: left; }
.card__media { position: relative; }
.card__tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--v-radius, 14px); background: #F5F2EC; }
.card__img { position: absolute; inset: 0; display: block; transition: opacity 320ms var(--ease), transform 420ms var(--ease); }
.card__img img, .card__img svg { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(.8); }
/* assets/snh-v2.js sizes each pack from its pixels; hold the image back until then (no jump) */
.v-lift .card__img img[data-v2-lift] { opacity: 0; transition: opacity 260ms var(--ease); }
.v-lift .card__img img[data-v2-lift].is-ready { opacity: 1; }
/* SNH's framed packshots: scale past the orange frame and its logo, the pack stays centred */
.card__img.is-framed img { transform: scale(1.12); }
.card__img--alt { opacity: 0; }
@media (hover: hover) and (min-width: 900px) {
  .card:hover .card__img { transform: scale(1.03); }
  .card:hover .card__img--alt { opacity: 1; }
  .card:hover .card__img:has(+ .card__img--alt) { opacity: 0; }
}
/* sold out: dim the pack itself (opacity on a wrapper would isolate it from the tile and break the blend) */
.v-lift .card--out .card__img:not(.card__img--alt) img.is-ready, .card--out .card__img:not(.card__img--alt) img { opacity: .5; }
.card__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 20px); pointer-events: none; }
.card__badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12px/1.1 var(--sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.card__badge--sale { background: var(--v-accent); }
.card__badge--new { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .12); }
.card__badge--informed-sport { background: #0B5F3A; }
.card__badge--sold-out { background: #fff; color: var(--grey-2, #6b6b6b); box-shadow: inset 0 0 0 1px rgba(14, 14, 14, .12); }
.card__chip { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 500 12px/1.1 var(--sans); box-shadow: 0 1px 2px rgba(14, 14, 14, .08); pointer-events: none; }
.card .quick { right: 10px; bottom: 10px; width: 40px; height: 40px; box-shadow: 0 4px 12px -4px rgba(14, 14, 14, .35); }
.card__body { display: flex; flex-direction: column; flex: 1; gap: 0; padding-top: 12px; }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 16px; margin-bottom: 4px; }
.card__brand { flex: 1 1 auto; min-width: 0; margin: 0; font: 600 12px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--grey-2, #6b6b6b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__rating { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; margin: 0; font: 600 12px/1.5 var(--sans); color: var(--ink); }
.card__star { color: #F2A93B; font-size: 13px; line-height: 1.1; }
.card__count { font-weight: 400; color: var(--grey-2, #6b6b6b); }
/* names and facts wrap only between words: each word is an inline-block, extra lines are clipped */
.card__name { display: block; -webkit-line-clamp: none; line-clamp: none; margin: 0; font: 600 15px/1.5 var(--sans); letter-spacing: 0; height: 40px; overflow: hidden; }
.card__name a { color: inherit; text-decoration: none; }
.card__name span { display: inline-block; }
.card__name a:hover { color: var(--v-accent); }
.card__fact { margin: 6px 0 0; font: 400 13px/1.5 var(--sans); color: var(--grey-1, #4a4a4a); height: 18px; overflow: hidden; }
.card__fact-l { display: none; }
.card__body { container-type: inline-size; }
@container (min-width: 250px) { .card__fact-l { display: inline; } .card__fact-s { display: none; } }
.card__foot { margin-top: auto; padding-top: 12px; }
.card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.card__now { font: 600 18px/1.1 var(--sans); letter-spacing: 0; }
.card__now.is-sale { color: var(--v-accent); }
.card__from { font-size: 12px; font-weight: 500; color: var(--grey-2, #6b6b6b); }
.card__was { font: 400 13px/1.5 var(--sans); color: var(--grey-2, #6b6b6b); }
.card__koko { margin: 4px 0 0; font: 400 12px/1.5 var(--sans); color: var(--grey-2, #6b6b6b); }
@media (max-width: 599px) {
  .card__badges { top: 8px; left: 8px; }
  .card__badge { height: 20px; padding: 0 7px; font-size: 12px; }
  .card__chip { left: 8px; bottom: 8px; height: 22px; font-size: 12px; padding: 0 7px; }
  .card .quick { right: 8px; bottom: 8px; width: 36px; height: 36px; }
  .card__name { font-size: 14px; line-height: 1.5; height: 38px; }
  .card__fact { font-size: 12px; line-height: 1.5; height: 17px; }
  .card__now { font-size: 16px; }
  .card__koko { font-size: 12px; }
}
/* dark contexts (SiS strip) */
.sis__cards .card__brand, .sis__cards .card__fact, .sis__cards .card__koko, .sis__cards .card__was, .sis__cards .card__from, .sis__cards .card__count { color: rgba(255, 255, 255, .7); }
.sis__cards .card__name, .sis__cards .card__now, .sis__cards .card__rating { color: #fff; }

/* ---------- R5 · product details band: tabs (desktop) / accordions (phones), normalised merchant rich text ---------- */

/* ---------- R5 · sticky add to cart: a slim full-width bar, only after the main button has scrolled away
   (Impact's product-quick-add logic), gone while the footer is in view; the page reserves room for it ---------- */

/* ---------- R5 · product page lower sections from Impact/apps, brought into the v2 type and rhythm ---------- */
.shopify-section--product-recommendations, .shopify-section--recently-viewed-products { background: #fff; }
.shopify-section--product-recommendations .section, .shopify-section--recently-viewed-products .section { padding-block: var(--section) !important; }
:is(.shopify-section--product-recommendations, .shopify-section--recently-viewed-products) .section-header { margin-bottom: 32px; }
:is(.shopify-section--product-recommendations, .shopify-section--recently-viewed-products) .section-header .h2 { font: 600 var(--fs-h1, clamp(32px, 4vw, 52px))/1.1 var(--sans) !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--ink) !important; }
:is(.shopify-section--product-recommendations, .shopify-section--recently-viewed-products) .section-header .subheading { font: 600 12px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--grey-2, #6b6b6b); }
:is(.shopify-section--product-recommendations, .shopify-section--recently-viewed-products) .product-list { --product-list-column-gap: 24px; --product-list-row-gap: 32px; }
@media (max-width: 699px) { :is(.shopify-section--product-recommendations, .shopify-section--recently-viewed-products) .product-list { --product-list-column-gap: 12px; } }
/* Judge.me widget: v2 heading, cream band, no extra chrome */
.shopify-section--apps:has(.jdgm-widget) { background: #FBF9F5; }
.shopify-section--apps:has(.jdgm-widget) .section { padding-block: var(--section) !important; }
.jdgm-rev-widg__title { font: 600 var(--fs-h1, clamp(32px, 4vw, 52px))/1.1 var(--sans) !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--ink) !important; }
.shopify-section--apps:has(.jdgm-widget) .section { padding-block: 56px !important; }
.shopify-section--apps .jdgm-widget.jdgm-review-widget, .shopify-section--apps .jdgm-rev-widg { box-sizing: border-box !important; width: auto !important; max-width: var(--container) !important; margin: 0 auto !important; }
.shopify-section--apps:has(.jdgm-widget) .container { max-width: calc(var(--container) + var(--gutter) * 2); padding-inline: var(--gutter); }
:is(.shopify-section--product-recommendations, .shopify-section--recently-viewed-products) .section { background: transparent !important; }

/* ---------- R5 · brand marquee: ink band, big heading + count, white monochrome logos, two rows ---------- */
.mqd { position: relative; overflow: hidden; background: radial-gradient(70% 140% at 0% 50%, rgba(224, 82, 28, .34), rgba(224, 82, 28, 0) 62%), #0E0E0E; color: #fff; padding-block: var(--section); }
@media (min-width: 1024px) { .mqd { padding-block: 96px; } }
.mqd__in { display: grid; gap: 32px; align-items: center; }
.mqd__title { margin: 0; font: 600 var(--t-h1)/1.1 var(--sans); letter-spacing: -.02em; color: #fff; max-width: 13ch; }
.mqd__title .serif { color: #fff; }
.mqd__count { margin: 16px 0 0; font: 600 var(--t-h5)/1.1 var(--sans); color: #F26A32; letter-spacing: 0; }
.mqd__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font: 600 14px/1.1 var(--sans); color: rgba(255, 255, 255, .8); border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 4px; }
.mqd__link:hover { color: #fff; border-color: #fff; }
.mqd__rows { display: grid; gap: clamp(24px, 3vw, 40px); min-width: 0; }
.mqd .mq__track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); padding-block: 6px; }
.mqd .logos__run { display: flex; align-items: center; gap: clamp(40px, 4.5vw, 64px); padding-right: clamp(40px, 4.5vw, 64px); }
.mqd .logo { position: relative; display: block; flex: 0 0 auto; width: var(--lw, calc(var(--mq-logo-h) * 2.4)); height: var(--mq-logo-h); border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; transition: transform 240ms var(--ease); }
.mqd .logo img { position: absolute; left: var(--ll, 0); top: var(--lt, 0); width: var(--liw, 100%); height: var(--lih, 100%); max-width: none; translate: none; object-fit: contain; mix-blend-mode: normal;
  /* opaque logo on white → white mark on #0E0E0E: threshold, invert, then lift black to the band colour */
  filter: grayscale(1) brightness(.78) contrast(14) invert(1) contrast(.89); opacity: .8; transition: opacity 240ms var(--ease); -webkit-user-drag: none; pointer-events: none; }
.mqd .logo--dark img { filter: grayscale(1) brightness(.9) contrast(14) contrast(.89); }
.mqd .logo:hover, .mqd .logo:focus-visible { transform: translateY(-3px); border: 0; box-shadow: none; }
.mqd .logo:hover img, .mqd .logo:focus-visible img { opacity: 1; filter: grayscale(1) brightness(.78) contrast(14) invert(1) contrast(.89); }
.mqd .logo--dark:hover img, .mqd .logo--dark:focus-visible img { filter: grayscale(1) brightness(.9) contrast(14) contrast(.89); }
.mqd .logo:focus-visible { outline: 2px solid #F26A32; outline-offset: 6px; }
.mqd .brand__word { font: 600 18px/1.1 var(--sans); color: rgba(255, 255, 255, .8); white-space: nowrap; }
.mqd .logo:not(.is-fit) img { opacity: 0; }
@media (min-width: 1024px) {
  .mqd__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
  .mqd__rows { margin-right: calc(var(--gutter, 24px) * -1); }
}
@media (max-width: 1023px) {
  .mqd { background: radial-gradient(120% 70% at 0% 0%, rgba(224, 82, 28, .34), rgba(224, 82, 28, 0) 60%), #0E0E0E; }
  .mqd__rows { margin-inline: calc(var(--gutter, 16px) * -1); }
  .mqd .logo { --mq-logo-h: 32px; }
}
@media (prefers-reduced-motion: reduce) { .mqd .logo:not(.is-fit) img { opacity: .8; } }
.mqd__row { min-width: 0; }
.mqd .mq__track { overflow: hidden; }

/* ---------- R5 · anchors land below the sticky header (only the nav row stays pinned) ---------- */
html { scroll-padding-top: 0; }
.shopify-section, .v2[id], .v2 [id], [id^="shop"], .snh-sec { scroll-margin-top: calc(var(--v-hdr, 64px) + 16px); }

/* ---------- R5 · Shop the Look: list top-aligned with the image, one connected card stack ---------- */
.hs .head { margin-bottom: 24px; }
@media (min-width: 900px) { .hs .head { margin-bottom: 32px; } }
@media (min-width: 1024px) { .hs__grid { align-items: start; gap: 32px; } }
.hs__stack { overflow: hidden; border: 1px solid rgba(12, 12, 13, .08); border-radius: var(--v-radius, 14px); background: #fff; box-shadow: 0 1px 2px rgba(12, 12, 13, .04); }
.hs__side { gap: 0; }
.hs__stack .hs__list { gap: 0; }
.hs__stack .hs__item { grid-template-columns: 28px 64px minmax(0, 1fr) auto; gap: 14px; padding: 14px 16px 14px 20px; border: 0; border-bottom: 1px solid rgba(12, 12, 13, .08); border-radius: 0; background: #fff; box-shadow: none; transform: none; cursor: pointer; transition: background-color 220ms var(--ease); }
.hs__stack .hs__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--v-accent); transform: scaleY(0); transform-origin: 50% 50%; transition: transform 260ms var(--ease); }
.hs__stack .hs__item.is-hot { transform: none; box-shadow: none; border-color: rgba(12, 12, 13, .08); background: #FFF7F2; }
.hs__stack .hs__item.is-hot::before { transform: scaleY(1); }
.hs__stack .hs__n { width: 28px; height: 28px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(12, 12, 13, .18); transform: none; }
.hs__stack .hs__item.is-hot .hs__n { background: var(--v-accent); color: #fff; box-shadow: none; transform: none; }
.hs__stack .hs__img { position: relative; display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 10px; background: #F5F2EC; }
.hs__stack .hs__img img { width: 100%; height: 100%; border-radius: 0; background: none; }
.hs__stack .hs__info .eyebrow { font-size: 12px; }
.hs__stack .hs__name { font: 600 15px/1.5 var(--sans); }
.hs__stack .hs__price { font: 500 14px/1.5 var(--sans); color: var(--grey-1, #4a4a4a); }
.hs__stack .hs__pts { margin: 0; border-radius: 0; padding: 14px 20px; }
@media (max-width: 767px) {
  .hs__stack .hs__item { grid-template-columns: 26px 56px minmax(0, 1fr) auto; gap: 10px; padding: 12px 12px 12px 16px; }
  .hs__stack .hs__img { width: 56px; height: 56px; }
}

/* ---------- R5 · reviews: reserve the Google widget's final height so nothing jumps when it loads ---------- */
.rev__app { min-height: 470px; }
@media (min-width: 1024px) { .rev__app { min-height: 409px; } }
.rev__app:not(:has(.reputon-google-reviews-widget > *)) { border-radius: var(--v-radius, 14px); background: linear-gradient(90deg, rgba(12, 12, 13, .03), rgba(12, 12, 13, .06), rgba(12, 12, 13, .03)); }

/* ---------- R5 · SiS trust badges: white on dark, over the slider ---------- */
.sisx__badge { flex-wrap: wrap; gap: 12px 20px; }
.sisx__trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tbadge { display: inline-flex; align-items: center; gap: 12px; padding: 7px 18px 7px 7px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(14, 14, 14, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.tbadge__ic { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--v-accent); color: #fff; }
.tbadge__ic svg { width: 22px; height: 22px; }
.tbadge__ic--logo { background: none; }
.tbadge__ic--logo img { width: 40px; height: 40px; }
.tbadge__t { display: grid; gap: 1px; line-height: 1.1; }
.tbadge__t b { font: 600 15px/1.1 var(--sans); letter-spacing: 0; }
.tbadge__t span { font: 400 12px/1.5 var(--sans); color: rgba(255, 255, 255, .78); }
@media (max-width: 767px) {
  .sisx__badge { gap: 10px; }
  .sisx__badge > img { width: 64px; }
  .sisx__trust { gap: 8px; width: 100%; }
  .tbadge { gap: 8px; padding: 5px 12px 5px 5px; }
  .tbadge__ic, .tbadge__ic--logo img { flex-basis: 30px; width: 30px; height: 30px; }
  .tbadge__ic svg { width: 17px; height: 17px; }
  .tbadge__t b { font-size: 13px; }
  .tbadge__t span { display: none; }
}
@media (max-width: 767px) {
  .sisx__trust { display: grid; grid-template-columns: 1fr 1fr; }
  .tbadge { min-width: 0; padding-right: 10px; border-radius: 16px; }
  .tbadge__t b { font-size: 12px; line-height: 1.1; white-space: normal; }
  .stiles__wrap, .trust__wrap { top: calc(var(--hdr-h) + 126px) !important; }
}

/* ---------- R5 · homepage audit: nothing under 12px, AA contrast on small orange labels, one padding rhythm ---------- */
:root { --v-accent-ink: #C2410C; } /* white on this is 5.2:1; the brand orange stays for large type and fills */
.card__brand, .hs__stack .hs__info .eyebrow, .tcard__name, .mqd__link { font-size: 12px; }
.card__badge { font-size: 12px; height: 24px; }
.card__badge--sale, .hs__pts-tag, .offer .v-badge, .v-badge--accent { background: var(--v-accent-ink); }
.card__chip { font-size: 12px; }
.tcard__perk { font-size: 12px; }
.hs__pts-tag { font-size: 12px; }
.offer .v-badge, .v-badge { font-size: 12px; }
@media (max-width: 599px) {
  .card__badge { font-size: 12px; height: 22px; }
  .card__chip { font-size: 12px; }
  .card__koko { font-size: 12px; }
  .tcard__perk { font-size: 12px; }
}

/* ---------- R5 · font swap without a jump: a local fallback with Inter's metrics until Inter arrives ---------- */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; size-adjust: 107.4%; }
:root { --sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ---------- R5 · brand logo tiles: one white tile, every mark trimmed and sized alike (snh-v2.js [data-mark]) ---------- */
.brand { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1px solid rgba(12, 12, 13, .1); }
.brand:hover { border-color: rgba(12, 12, 13, .3); }
.bmark { --mh: 26px; --mw: 92px; position: relative; display: block; flex: 0 0 auto; width: var(--lw, calc(var(--mh) * 2.4)); height: var(--lh, var(--mh)); }
.brand .bmark img, .az__mini .bmark img, .mz__logos .brand .bmark img { position: absolute; inset: auto; left: var(--ll, 0); top: var(--lt, 0); width: var(--liw, 100%); height: var(--lih, 100%); max-width: none; margin: 0; object-fit: contain; mix-blend-mode: multiply; opacity: 0; transition: opacity 200ms var(--ease); }
.bmark.is-fit img { opacity: 1 !important; }
/* light logo on a dark square → dark mark on the white tile */
.brand--dark .bmark img { filter: grayscale(1) contrast(14) invert(1); }
.brand__word { font: 700 15px/1.1 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--ink); text-align: center; padding: 0 8px; }
.brand__n { font: 500 12px/1.1 var(--sans); color: var(--grey-2, #6b6b6b); }
.mz__logos .brand { aspect-ratio: 16 / 10; }
.mz__logos .bmark { --mh: 22px; --mw: 84px; }

/* ---------- R5 · Brands panel: featured tiles, A–Z directory in 4 columns, hover preview ---------- */
.mega:has(.mega__brands) { height: auto; max-height: calc(100vh - var(--v-hdr, 72px) - 24px); overflow-y: auto; }
.mega__brands { height: auto; }
.az { display: grid; gap: 24px; }
.az__feat .mz__h { margin-bottom: 12px; }
.az__ftiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.brand--lg { aspect-ratio: 16 / 10; border-radius: 14px; }
.brand--lg .bmark { --mh: 34px; --mw: 132px; }
.brand--lg:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(12, 12, 13, .25); }
.az__main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; padding-top: 20px; border-top: 1px solid rgba(12, 12, 13, .08); }
.az__top { padding-bottom: 0; border-bottom: 0; }
.az__cols { column-count: 4; column-gap: 28px; padding-top: 16px; }
.az__g { break-inside: avoid; margin: 0 0 14px; }
.az__g.is-flash { animation: az-flash 1.1s var(--ease); border-radius: 10px; }
@keyframes az-flash { 0%, 40% { background: #FFF1E9; } 100% { background: transparent; } }
.az__L { margin: 0 0 4px; padding-left: 6px; font: 700 13px/1.5 var(--sans); letter-spacing: .04em; color: var(--v-accent-ink, #C2410C); }
.az__list { margin: 0; padding: 0; list-style: none; }
.az__link { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; font: 500 14px/1.1 var(--sans); color: var(--ink); }
.az__link:hover, .az__link:focus-visible { background: #F5F2EC; }
.az__mini { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid rgba(12, 12, 13, .1); border-radius: 8px; background: #fff; overflow: hidden; }
.az__mini .bmark { --mh: 16px; --mw: 32px; }
.az__link.brand--dark .bmark img { filter: grayscale(1) contrast(14) invert(1); }
.az__ini { font: 700 13px/1.1 var(--sans); color: var(--grey-2, #6b6b6b); }
.az__name { min-width: 0; }
.az__n { margin-left: auto; padding-left: 8px; font: 500 12px/1.1 var(--sans); color: var(--grey-2, #6b6b6b); }
.az__pv { padding-left: 28px; border-left: 1px solid rgba(12, 12, 13, .08); transition: opacity 160ms var(--ease); }
.az__pv.is-loading { opacity: .5; }
.az__pvhint { margin: 8px 0 0; font: 400 14px/1.5 var(--sans); color: var(--grey-2, #6b6b6b); }
.az__pv .mz__h { margin-bottom: 12px; }
.az__pvl { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.az__pvl a { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.az__pvi { grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 10px; background: #F5F2EC; overflow: hidden; }
.az__pvi img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.18); }
.az__pvt { align-self: end; font: 600 13px/1.5 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.az__pvp { align-self: start; font: 500 13px/1.5 var(--sans); color: var(--grey-1, #4a4a4a); }
@media (max-width: 1199px) { .az__cols { column-count: 3; } .az__main { grid-template-columns: minmax(0, 1fr) 240px; } }
/* phones: the same panel in the drill-down menu */
.mm__scroll .az__ftiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mm__scroll .brand--lg .bmark { --mh: 24px; --mw: 84px; }
.mm__scroll .az__main { grid-template-columns: 1fr; padding-top: 14px; }
.mm__scroll .az__pv { display: none; }
.mm__scroll .az__cols { column-count: 1; }

/* ---------- R5 · collection page: v2 hero, filter bar, grid, pagination ---------- */
.colhero { background: #fff; padding: 20px 0 8px; }
.colhero__in { display: grid; gap: 12px; }
.colhero__crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font: 400 13px/1.5 var(--sans); color: var(--grey-2, #6b6b6b); }
.colhero__crumbs a:hover { color: var(--ink); }
.colhero__copy { display: grid; justify-items: start; }
.colhero__title { margin: 0; font: 600 var(--t-h1)/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink); text-transform: none; }
.colhero__desc { position: relative; max-width: 68ch; margin-top: 12px; }
.colhero__text { font: 400 15px/1.5 var(--sans); color: var(--grey-1, #4a4a4a); max-height: 4.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.colhero__text :is(h1, h2, h3, h4) { font-size: 16px !important; margin: 0 0 .4em !important; }
.colhero__text p { margin: 0 0 .6em; }
.colhero__desc:not(:has(button)) .colhero__text { -webkit-mask-image: none; mask-image: none; }
.colhero__desc.is-open .colhero__text { max-height: none; -webkit-mask-image: none; mask-image: none; }
.colhero__more { margin-top: 4px; padding: 0; border: 0; background: none; font: 600 14px/1.5 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--v-accent); text-underline-offset: 4px; cursor: pointer; }
.colhero__count { order: -1; margin: 0 0 8px; font: 600 12px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--grey-2, #6b6b6b); }
.colhero__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Round 12 · photo: full width, gradient, our copy over it */
.colhero--photo { position: relative; display: grid; min-height: 320px; padding: 0; background: var(--ink); color: var(--white); overflow: hidden; }
.colhero--photo .colhero__pic, .colhero--photo .colhero__shade { position: absolute; inset: 0; }
.colhero--photo .colhero__shade { background: linear-gradient(0deg, rgba(12, 12, 13, .82) 0%, rgba(12, 12, 13, .45) 50%, rgba(12, 12, 13, .25) 100%); }
.colhero--photo .colhero__in { position: relative; align-content: space-between; width: 100%; padding-block: 20px 32px; }
.colhero--photo :is(.colhero__crumbs, .colhero__count, .colhero__text) { color: rgba(255, 255, 255, .82); }
.colhero--photo .colhero__crumbs a:hover, .colhero--photo .colhero__title, .colhero--photo .colhero__more { color: var(--white); }
@media (min-width: 1024px) {
  .colhero { padding: 28px 0 12px; }
  .colhero--photo { min-height: 400px; padding: 0; }
  .colhero--photo .colhero__shade { background: linear-gradient(90deg, rgba(12, 12, 13, .82) 0%, rgba(12, 12, 13, .5) 45%, rgba(12, 12, 13, 0) 80%); }
  .colhero--photo .colhero__in { padding-block: 28px 48px; }
  .colhero--photo .colhero__copy { max-width: 600px; }
}
/* Round 12 · artwork (a banner with its own text): shown whole, our title row under it */
.colhero__banner { overflow: hidden; border-radius: 16px; background: var(--cream); }
.colhero__banner img { height: auto; max-height: 360px; object-fit: cover; object-position: var(--hero-focal-m, 50% 75%); }
@media (min-width: 768px) { .colhero__banner img { max-height: 400px; object-position: var(--hero-focal, 50% 50%); } }
.colhero__copy--below { margin-top: 24px; }
/* the merchant's artwork banner (slideshow) above the hero stays; Impact's own collection banner stays off */

/* filter bar: styled in snippets/facets-vertical (Round 11) */
@keyframes v-sheet { from { transform: translateY(24px); opacity: 0; } }

/* grid: white canvas, 4 / 3 / 2 columns, v2 gaps */
.shopify-section--main-collection { background: #fff; }
.shopify-section--main-collection .product-list { --product-list-column-gap: 24px; --product-list-row-gap: 40px; }
@media (min-width: 700px) and (max-width: 999px) { .shopify-section--main-collection .product-list { --product-list-items-per-row: 3 !important; } }
@media (min-width: 1000px) { .shopify-section--main-collection .product-list { --product-list-items-per-row: 4 !important; } }
@media (max-width: 699px) { .shopify-section--main-collection .product-list { --product-list-column-gap: 12px; --product-list-row-gap: 28px; --product-list-items-per-row: 2 !important; } }
.shopify-section--main-collection .collection__results > .v-stack > .md\:hidden > p.text-center { display: none; }
/* pagination: v2 pills */
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 48px; }
.pagination__item { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(12, 12, 13, .14); border-radius: 50%; background: #fff; color: var(--ink); }
.pagination__item:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination__item--disabled { opacity: .35; pointer-events: none; }
.pagination__current { font: 600 14px/1.5 var(--sans); color: var(--ink); }
form.snh-bar-form .snh-drop__pill > span { display: inline-block; text-transform: lowercase; }
form.snh-bar-form .snh-drop__pill > span::first-letter { text-transform: uppercase; }
.shopify-section--main-collection, .shopify-section--main-collection .container, .shopify-section--main-collection .collection, .shopify-section--main-collection .collection__results { background: #fff !important; }
.shopify-section--main-collection { --background: 255 255 255; }
form.snh-bar-form.is-condensed :is(.snh-find, .snh-goals, .snh-brands, .snh-nomatch, .snh-recs) { display: none !important; }
form.snh-bar-form.is-condensed { box-shadow: 0 10px 24px -18px rgba(12, 12, 13, .35); }
/* Round 12: stuck under the header; phones keep a "Filter & sort" pill row + the active chips on one swipeable line */
form.snh-bar-form.is-condensed { border-bottom: 1px solid var(--line); }
@media (max-width: 999px) {
  form.snh-bar-form.is-condensed .snh-active { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 8px; scrollbar-width: none; }
  form.snh-bar-form.is-condensed .snh-active::-webkit-scrollbar { display: none; }
  form.snh-bar-form.is-condensed .snh-active__chips { flex-wrap: nowrap; }
  form.snh-bar-form.is-condensed .snh-chip, form.snh-bar-form.is-condensed .snh-active__clear { flex: none; white-space: nowrap; }
}
.shopify-section--main-collection > .container { padding-inline: 0; }   /* Impact's .container margins already sit on the grid (Round 6 tokens) */

/* cart drawer: assets/snh-cart.css (Round 11) */
/* ---------- R5 · cart page in the drawer's language (same type, tiles, pills, summary card) ---------- */
.snh-cart-page { font-family: var(--sans); padding-inline: 0; padding-block: var(--section); }
.snh-cart-page .cart-header h1, .snh-cart-page .empty-state .h4 { font: 600 var(--t-h2)/1.1 var(--sans) !important; letter-spacing: -.02em !important; text-transform: none !important; }
.snh-cart-page .order-summary__header th { font: 600 12px/1.5 var(--sans) !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--grey-2, #6b6b6b) !important; }
.snh-cart-page .order-summary__body td { font: 500 15px/1.5 var(--sans); border-color: rgba(12, 12, 13, .08) !important; }
.snh-cart-page .line-item__media-wrapper, .snh-cart-page .line-item img { border-radius: 10px !important; background: #F5F2EC; }
.snh-cart-page .line-item .product-title, .snh-cart-page .line-item__info a { font: 600 15px/1.5 var(--sans) !important; color: var(--ink) !important; text-transform: none !important; }
.snh-cart-page .cart-form { border-radius: 16px !important; background: #FBF9F5 !important; border: 1px solid rgba(12, 12, 13, .08) !important; }
.snh-cart-page button[name="checkout"] { min-height: 52px !important; border-radius: 999px !important; background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; font: 600 16px/1.1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
.snh-cart-page button[name="checkout"]:hover { background: var(--v-accent-ink, #C2410C) !important; border-color: var(--v-accent-ink, #C2410C) !important; }
.snh-cart-page .empty-state .button, .snh-cart-page .empty-state a.button { border-radius: 999px !important; background: var(--ink) !important; color: #fff !important; font: 600 15px/1.1 var(--sans) !important; text-transform: none !important; }

/* ---------- R5 · search: v2 heading, tabs, article and collection results ---------- */
.shopify-section--main-search { background: #fff; }
.shopify-section--main-search h1.h2 { font: 600 var(--t-h2)/1.1 var(--sans) !important; letter-spacing: -.02em !important; text-transform: none !important; }
.shopify-section--main-search .search-input input { font: 500 18px/1.5 var(--sans) !important; border-radius: 999px !important; }
.srtabs { display: flex; justify-content: center; gap: 4px; margin: 4px auto 0; padding: 4px; width: max-content; max-width: 100%; overflow-x: auto; border-radius: 999px; background: #F5F2EC; }
.srtab { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: 600 14px/1.1 var(--sans); color: var(--grey-1, #4a4a4a); cursor: pointer; white-space: nowrap; }
.srtab:hover { color: var(--ink); }
.srtab.is-on { background: var(--ink); color: #fff; }
.srtab b { font-weight: 600; opacity: .7; }
.srposts { margin-bottom: 32px; }
.srcol { max-width: var(--container); margin: 24px auto 48px; }
.srcol__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.srcol__item { display: grid; gap: 10px; }
.srcol__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #F5F2EC; }
.srcol__img img { width: 100%; height: 100%; object-fit: cover; }
.srcol__t { font: 600 16px/1.5 var(--sans); color: var(--ink); }
.srcol__msg { grid-column: 1 / -1; text-align: center; font: 400 15px/1.5 var(--sans); color: var(--grey-2, #6b6b6b); }
.shopify-section--main-search .container { padding-inline: 0; }
@media (min-width: 1000px) { .shopify-section--main-search .product-list { --product-list-items-per-row: 4 !important; --product-list-column-gap: 24px; --product-list-row-gap: 40px; } }
@media (min-width: 700px) and (max-width: 999px) { .shopify-section--main-search .product-list { --product-list-items-per-row: 3 !important; } }
@media (max-width: 699px) { .shopify-section--main-search .product-list { --product-list-items-per-row: 2 !important; --product-list-column-gap: 12px; } }
.shopify-section--main-search, .shopify-section--main-search .container, .shopify-section--main-search .collection, .shopify-section--main-search .collection__results, .shopify-section--main-cart, .snh-cart-page { background: #fff !important; }
.shopify-section--main-search > .v-stack, .shopify-section--main-search form.snh-bar-form { margin-top: 24px; }
.shopify-section--main-search:has(.srtab.is-on[href*="type=article"]) form.snh-bar-form, .shopify-section--main-search:has(.srtab.is-on[href*="type=article"]) .collection__top-bar { display: none !important; }
.srposts { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 32px 24px !important; overflow: visible !important; }
.srposts > * { width: auto !important; min-width: 0 !important; }
html body .snh-cart-page .empty-state :is(.h4, p.h4) { font: 600 var(--t-h2)/1.1 var(--sans) !important; letter-spacing: -.02em !important; text-transform: none !important; }
.srhead { padding-top: var(--section); padding-bottom: 8px; }
.shopify-section--main-search .page-spacer { padding-top: 24px !important; }
.shopify-section--main-search .container:not(.srhead) .page-spacer { padding-top: 8px !important; }
.shopify-section--main-search .collection { margin-top: 0 !important; row-gap: 0 !important; }
/* the serif word never sets its line's height: the line box comes from the heading's own font, so Instrument Serif
   arriving (or not) can't move anything below it */
.serif { line-height: inherit; }

/* ===================== Round 6: one scale for the whole store =====================
   Impact's own type tokens (snippets/css-variables) re-pointed at the SNH scale, so Impact sections (about, locations,
   account, policy pages) set type on the same steps as the v2 sections. Body copy 1.5, headings 1.1, headings -0.02em. */
:root {
  --heading-letter-spacing: -.02em;
  --text-h0: 44px; --text-h1: 36px; --text-h2: 28px; --text-h3: 24px; --text-h4: 20px; --text-h5: 18px; --text-h6: 16px;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px;
}
@media screen and (min-width: 700px) {
  :root { --text-h0: 56px; --text-h1: 44px; --text-h2: 36px; --text-h3: 28px; --text-h4: 24px; --text-h5: 20px; --text-h6: 18px; }
}
@media screen and (min-width: 1200px) {
  :root { --text-h0: 72px; --text-h1: 56px; --text-h2: 44px; --text-h3: 36px; --text-h4: 28px; --text-h5: 24px; --text-h6: 20px; }
}
body { line-height: 1.5; }
:is(.h0, .h1, .h2, .h3, .h4, .h5, .h6, .heading, .split-lines) { line-height: 1.1; letter-spacing: -.02em; }
/* Impact's container and section rhythm on the SNH grid: 1280 incl. 20 / 40px gutters, 48 / 64px section padding,
   top and bottom alike (Impact drops the top padding when two sections share a background) */
:root { --container-max-width: 1200px; --container-narrow-max-width: 1200px; --container-gutter: 20px; --section-outer-spacing-block: 48px; }   /* narrow sections share the one left edge */
@media screen and (min-width: 1024px) {
  :root { --container-max-width: 1200px; --container-gutter: 40px; --section-outer-spacing-block: 64px; }
}
.section { padding-block-start: var(--calculated-section-spacing-block-end); }
.text-subdued, .timeline__nav-label { line-height: 1.5; }
/* collection templates set to Impact's sidebar filters (the brand collections): the SNH filter bar replaces the
   sidebar, so they lay out like the horizontal ones (bar full width above a 4-column grid) */
.collection--filters-sidebar:has(.snh-bar-form) { grid-template-columns: minmax(0, 1fr); }
.collection--filters-sidebar:has(.snh-bar-form) .collection__top-bar { display: none; }
.collection--filters-sidebar:has(.snh-bar-form) .collection__facets-scroller { position: static; }
@media (min-width: 1000px) { .collection--filters-sidebar:has(.snh-bar-form) form.snh-bar-form .snh-bar { max-width: none; padding-inline: 0; } }

/* SNH page (Round 11): title + admin content in the reading column */
.spage__in { display: grid; gap: 32px; }
.spage__head { display: grid; gap: 12px; max-width: 760px; }
.spage__body { max-width: 72ch; }
.spage__body h2, .spage__body h3 { margin-top: 16px; font: 600 var(--t-h4)/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.spage__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.spage__body ul, .spage__body ol { display: grid; gap: 8px; padding-left: 20px; }

/* Round 11 landing blocks: feature, collection tiles, steps, contact form */
.ft__in { display: grid; gap: 32px; align-items: center; }
.ft__media { position: relative; border-radius: var(--v-radius); overflow: hidden; background: var(--cream); aspect-ratio: 4 / 3; }
.ft__media img, .ft__media video, .ft__ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.ft__text { display: grid; gap: 16px; align-content: center; justify-items: start; max-width: 600px; }
.ft__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (min-width: 900px) {
  .ft--left .ft__in, .ft--right .ft__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .ft--right .ft__media { order: 2; }
}
.ft--overlay { position: relative; padding: 0; }
.ft--overlay .ft__in { position: relative; display: block; max-width: none; padding: 0; }
.ft--overlay .ft__media { aspect-ratio: auto; height: clamp(480px, 70vh, 720px); border-radius: 0; }
.ft--overlay .ft__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 12, 13, .82) 0%, rgba(12, 12, 13, .35) 60%, rgba(12, 12, 13, .1) 100%); }
.ft--overlay .ft__text { position: absolute; left: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter))); bottom: 48px; z-index: 1; max-width: min(600px, calc(100% - 2 * var(--gutter))); color: var(--white); }
.ft--statement .ft__text { max-width: 900px; margin-inline: auto; justify-items: center; text-align: center; }
.ft__big { font-size: var(--t-display); }

.ctl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ctl__grid { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .ctl__grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 24px; } }
.ctl__tile { display: grid; gap: 8px; color: var(--ink); }
.ctl__img { position: relative; display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--cream); }
.ctl__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.ctl__tile:hover .ctl__img img { transform: scale(1.04); }
.ctl__t { font: 600 16px/1.5 var(--sans); }
.ctl__n { margin-top: -8px; font-size: 13px; line-height: 1.5; color: var(--grey-2); }
.ctl--logos .ctl__img { aspect-ratio: 3 / 2; background: var(--white); border: 1px solid var(--line); }
.ctl--logos .ctl__img img { object-fit: contain; padding: 16%; filter: grayscale(1); opacity: .8; }
.ctl--logos .ctl__tile:hover .ctl__img img { filter: none; opacity: 1; transform: none; }
.ctl--logos .ctl__t { text-align: center; font-size: 14px; }

.stp__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .stp__list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } }
.stp__i { display: grid; gap: 16px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.stp__n { display: inline-grid; place-items: center; justify-self: start; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--pill); background: var(--ink); color: var(--white); font: 600 14px/1.1 var(--sans); }
.stp__b { display: grid; gap: 8px; }
.stp__img { display: block; margin-bottom: 8px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--cream); }
.stp__img img { width: 100%; height: 100%; object-fit: cover; }
.stp__t { font: 600 var(--t-h5)/1.1 var(--sans); letter-spacing: -.02em; }
.stp__list--tl .stp__n { background: var(--v-accent); }

.cf__in { display: grid; gap: 32px; }
@media (min-width: 1024px) { .cf__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.cf__side { display: grid; gap: 16px; align-content: start; }
.cf__facts { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.cf__facts li { display: flex; align-items: center; gap: 12px; font: 600 15px/1.5 var(--sans); }
.cf__facts svg { width: 20px; height: 20px; flex: none; color: var(--v-accent); }
.cf__card { padding: 24px 20px; border-radius: 24px; background: var(--cream); }
@media (min-width: 768px) { .cf__card { padding: 32px; } }
.cf__form { display: grid; gap: 16px; }
.cf__t { font: 600 var(--t-h4)/1.1 var(--sans); letter-spacing: -.02em; }
.cf__form textarea { width: 100%; padding: 12px 16px; border: 1px solid rgba(12, 12, 13, .2); border-radius: 12px; background: var(--white); font: 400 16px/1.5 var(--sans); }
.cf__go { justify-self: start; }
.cf__ok { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 16px; background: #E3F3E8; color: #14532D; font: 600 16px/1.5 var(--sans); }
.cf__ok svg { width: 20px; height: 20px; }

.acp__prog .acp__next { margin-top: 0; }

/* ---------- product card (Round 11): your old card (OLD-COMPONENTS.md §1) in v2 type and spacing ----------
   bordered card · inset 1:1 tile · fixed-height text rows so a row of cards lines up */
.pc { height: 100%; border: 1px solid #ECE6DD; border-radius: 12px; background: var(--white); overflow: hidden; transition: border-color 600ms var(--ease), box-shadow 700ms var(--ease), transform 700ms var(--ease); }
.pc:hover { border-color: rgba(23, 19, 15, .16); transform: translateY(-3px); box-shadow: 0 16px 38px rgba(23, 19, 15, .08); }
.pc__frame { position: relative; padding: 8px 8px 0; }
.pc .card__tile { border-radius: 8px; }
.pc:hover .card__img { transform: scale(1.04); }
.pc__badge { position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex; align-items: center; height: 28px; max-width: calc(100% - 32px); padding: 0 12px; border-radius: var(--pill); background: #C02A1B; color: var(--white); font: 600 12px/1.1 var(--sans); white-space: nowrap; }
.pc__badge--note { background: var(--ink); }
.pc__status { position: absolute; top: 16px; right: 16px; z-index: 3; display: grid; justify-items: end; gap: 4px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.pc__st { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--pill); background: rgba(23, 19, 15, .86); color: var(--white); font: 600 12px/1.1 var(--sans); }
.pc__st--sold-out { background: var(--white); color: var(--grey-1); box-shadow: inset 0 0 0 1px var(--line); }
.pc__chip { position: absolute; left: 16px; bottom: 8px; z-index: 3; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--pill); background: rgba(255, 255, 255, .94); color: var(--ink); font: 500 12px/1.1 var(--sans); box-shadow: 0 1px 2px rgba(14, 14, 14, .08); pointer-events: none; }
.pc__peek { position: absolute; right: 16px; bottom: 8px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(23, 19, 15, .1); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); cursor: pointer; box-shadow: 0 3px 12px rgba(23, 19, 15, .08); transition: transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.pc__peek:hover { transform: scale(1.06); border-color: rgba(23, 19, 15, .25); }
.pc__peek svg { width: 16px; height: 16px; }
.pc__body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 16px; }
.pc__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 18px; }
.pc__brand { min-width: 0; overflow: hidden; font: 600 12px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: var(--grey-2); }
.pc__rating { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1.5 var(--sans); color: var(--ink); }
.pc__star { color: #F2A93B; font-size: 13px; line-height: 1.1; }
.pc__count { font-weight: 400; color: var(--grey-2); }
.pc__name { height: 48px; margin: 8px 0 0; overflow: hidden; font: 600 16px/1.5 var(--sans); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: pretty; }
.pc__name a { color: inherit; }
.pc__name a:hover { color: var(--v-accent); }
.pc__sub { height: 20px; margin-top: 4px; overflow: hidden; font: 400 13px/1.5 var(--sans); white-space: nowrap; text-overflow: ellipsis; color: var(--grey-2); }
.pc__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 16px; }
.pc__price { display: inline-flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 44px; padding: 4px 16px; border-radius: 22px; background: #F2EEE7; }
.pc__now { font: 600 16px/1.1 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc__from { font-weight: 400; font-size: 12px; color: var(--grey-2); }
.pc__was { font: 400 12px/1.5 var(--sans); color: var(--grey-2); white-space: nowrap; }
.pc__price--sale { background: rgba(192, 42, 27, .06); }
.pc__price--sale .pc__now { color: #C02A1B; }
.pc__add { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 16px; border: 0; border-radius: var(--pill); background: var(--ink); color: var(--white); font: 600 14px/1.1 var(--sans); cursor: pointer; white-space: nowrap; transition: background-color var(--t) var(--ease); }
.pc__add:hover { background: var(--v-accent); }
.pc__add.is-added { background: #157A3A; }
.pc__dot { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0c0d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform var(--t) var(--ease); }
.pc__add:hover .pc__dot { transform: translateX(2px); }
.pc__sold { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: var(--pill); background: #F2EEE7; color: var(--grey-1); font: 600 14px/1.1 var(--sans); }
.pc__koko { margin-top: 8px; font: 400 12px/1.5 var(--sans); color: var(--grey-2); }
.pc__kk { display: inline-block; vertical-align: middle; height: 14px; width: auto; margin-top: -2px; }
.pc__earn { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ECE6DD; font: 400 12px/1.5 var(--sans); color: var(--grey-2); }
.pc__earn strong { font-weight: 600; color: var(--v-accent); }
a.pc__earn:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.pc--out { opacity: .72; }
@container (max-width: 240px) { .pc__foot { flex-direction: column; align-items: stretch; } }
.pc { container-type: inline-size; }
@media (max-width: 767px) {
  .pc, .pc:hover { transform: none; box-shadow: none; }
  .pc__frame { padding: 6px 6px 0; }
  .pc__badge, .pc__status { top: 12px; }
  .pc__badge { left: 12px; height: 24px; padding: 0 8px; }
  .pc__status { right: 12px; }
  .pc__chip { left: 12px; }
  .pc__peek { right: 12px; width: 32px; height: 32px; }
  .pc__body { padding: 12px 12px 12px; }
  .pc__name { height: 42px; font-size: 14px; }
  .pc__sub { font-size: 12px; height: 18px; }
  .pc__foot { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; }
  .pc__price { min-height: 40px; padding: 4px 12px; border-radius: 20px; }
  .pc__add { justify-content: space-between; height: 40px; padding: 0 4px 0 14px; font-size: 13px; }
  .pc__dot { width: 30px; height: 30px; background-size: 14px; }
  .pc__sold { justify-content: center; height: 40px; }
  .pc__earn { margin-top: 8px; padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pc, .pc:hover { transition: none; transform: none; } .pc:hover .card__img { transform: none; } }

/* Collection grid (Round 11): cards ordered by position so guide tiles land after rows 3, 5, then every 4 rows at
   2 / 3 / 4 columns (orders computed in sections/main-collection) */
.product-list > .pc { order: var(--o, 0); }
.product-list > .art-tile { order: var(--om); }
@media (min-width: 1000px) { .product-list > .art-tile { order: var(--ot); } }
@media (min-width: 1200px) { .product-list > .art-tile { order: var(--od); } }
.art-tile { min-width: 0; height: 100%; }
.art-tile__in { display: flex; flex-direction: column; height: 100%; border-radius: 12px; overflow: hidden; background: var(--ink); color: var(--white); transition: transform 700ms var(--ease); }
.art-tile__in:hover { transform: translateY(-3px); }
.art-tile__img { display: block; flex: 1 1 auto; min-height: 160px; overflow: hidden; background: #1C1A18; }
.art-tile__img img, .art-tile__ph { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform 700ms var(--ease); }
.art-tile__in:hover .art-tile__img img { transform: scale(1.04); }
.art-tile__b { display: grid; gap: 8px; padding: 20px 16px; }
.art-tile__eb { font: 600 12px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: #FFB27A; }
.art-tile__t { font: 400 var(--t-h5)/1.1 var(--serif); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.art-tile__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 600 14px/1.5 var(--sans); }
.art-tile__go svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.art-tile__in:hover .art-tile__go svg { transform: translateX(4px); }
@media (max-width: 767px) { .art-tile__b { padding: 16px 12px; } .art-tile__t { font-size: 18px; } }

/* Shop the Look (Round 11): your horizontal product cards + the dark SNH Elite strip (OLD-COMPONENTS.md §3) */
.hs__brandh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.hs__logo { display: block; height: 56px; width: auto; max-width: 240px; object-fit: contain; }
@media (max-width: 767px) { .hs__logo { height: 40px; } }
.hs__item.hpc { grid-template-columns: 28px 80px minmax(0, 1fr) auto; gap: 16px; padding: 12px 16px 12px 12px; }
.hpc .hs__img img { width: 80px; height: 80px; border-radius: 8px; }
.hpc__brand { font: 600 12px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--grey-2); }
.hpc .hs__name { font: 600 15px/1.5 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hpc .hs__price { font: 600 15px/1.5 var(--sans); color: var(--ink); }
.hpc .hs__price s { margin-left: 4px; font-weight: 400; font-size: 13px; color: var(--grey-2); }
.hpc__koko { font: 400 12px/1.5 var(--sans); color: var(--grey-2); }
.hpc__koko b { font-weight: 600; letter-spacing: .04em; color: #5B4BD5; }
.hpc__add { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 0; border-radius: var(--pill); background: var(--cream); color: var(--ink); font: 600 14px/1.1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.hpc__add:hover, .hs__item.is-hot .hpc__add { background: var(--ink); color: var(--white); }
.hpc__add[disabled] { opacity: .5; cursor: not-allowed; }
.hs__stack .hs__pts { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px 16px; border: 1px solid rgba(255, 122, 50, .22); border-radius: 8px; background: linear-gradient(105deg, #17130F 0%, #241209 100%); color: rgba(255, 242, 230, .82); }
.hs__stack .hs__pts-tag { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; font: 600 12px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 242, 230, .55); }
.hs__stack .hs__pts-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v-accent); }
.hs__pts-t { font: 500 13px/1.5 var(--sans); text-align: right; }
.hs__stack .hs__pts strong { color: #FF8A3D; font-weight: 600; }
a.hs__pts:hover .hs__pts-t { color: #FFF2E6; }
/* phones: the cards as a swipe rail under the image (the old mobile layout), the strip under the rail */
@media (max-width: 1023px) {
  .hs__side, .hs__side:not(:has(.hs__pts)) { display: grid; }
  .hs__list { display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .hs__list::-webkit-scrollbar { display: none; }
  .hs__item.hpc { flex: 0 0 min(86%, 360px); grid-template-columns: 24px 64px minmax(0, 1fr); grid-template-rows: auto auto; scroll-snap-align: start; }
  .hpc .hs__img img { width: 64px; height: 64px; }
  .hpc .hs__n { width: 24px; height: 24px; }
  .hpc__add { grid-column: 3; justify-self: start; height: 36px; }
  .hs__stack .hs__pts { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hs__pts-t { text-align: left; }
}

/* SiS (Round 11): trust badges right above the eyebrow, 12px (phones) / 16px gaps (reduced motion: assets/snh-v2.js keeps the poster) */
.sisx__trust--inline { margin: 0; }
.hero--sis .hero__copy { gap: 12px; }
@media (min-width: 768px) { .hero--sis .hero__copy { gap: 16px; } }

/* SNH Elite band (Round 11): full-bleed photo/video, orange → black gradient, minimal foreground */
.eband { position: relative; display: grid; align-items: end; min-height: clamp(520px, 72vh, 720px); overflow: hidden; isolation: isolate; color: var(--white); background: #0C0C0D; }
.eband__bg { position: absolute; inset: 0; z-index: -1; }
.eband__img, .eband__vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.eband__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(224, 82, 28, .55) 0%, rgba(224, 82, 28, .18) 32%, rgba(12, 12, 13, .72) 62%, rgba(12, 12, 13, .96) 100%); }
.eband__in { display: grid; gap: 16px; justify-items: start; padding-block: 48px; max-width: calc(var(--container, 1280px) + var(--gutter) * 2); }
.eband .eyebrow { color: #FFB27A; }
.eband__h { max-width: 14ch; }
.eband__lead { max-width: 52ch; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .84); }
.eband__tiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.eband__chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--pill); background: rgba(12, 12, 13, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 14px/1.1 var(--sans); }
.eband__chip b { font-weight: 600; }
.eband__chip i { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(140deg, #C47B45, #5E3417); box-shadow: inset 0 1px 0 rgba(255, 224, 190, .6); }
.eband__chip--silver i { background: linear-gradient(140deg, #AAB6C4, #3F4A58); }
.eband__chip--gold i { background: linear-gradient(140deg, #E3AB3D, #5F3F0C); }
.eband__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (min-width: 1024px) { .eband__in { padding-block: 96px; } }
@media (max-width: 599px) { .eband__lead { font-size: 16px; } .eband__cta .v-btn { flex: 1 1 auto; justify-content: center; } }
@media (max-width: 599px) { .eband__tiers { flex-wrap: nowrap; gap: 6px; } .eband__chip { height: 36px; padding: 0 10px 0 8px; gap: 6px; font-size: 13px; } .eband__chip i { width: 12px; height: 12px; } }

/* Round 12: +94 phone fields (assets/snh-phone.js) */
.tel94 { position: relative; display: block; }
.tel94__cc { position: absolute; left: 1px; top: 1px; bottom: 1px; display: flex; align-items: center; padding: 0 12px 0 16px; border-right: 1px solid rgba(12, 12, 13, .12); border-radius: 12px 0 0 12px; background: var(--cream, #F6F3EE); font: 500 16px/1.5 var(--sans); color: var(--ink); pointer-events: none; }
.tel94 input { padding-left: 76px !important; }
.colhero--art .colhero__title { font-size: var(--t-h2); }
.colhero--photo { margin-bottom: 24px; }
/* Round 12: announcement colours (Announcement blocks + campaigns, assets/snh-campaigns.js) */
.announce[hidden] { display: none; }
.announce[data-tone="ink"] { background: var(--ink); }
.announce[data-tone="cream"] { background: var(--cream); color: var(--ink); }
.announce[data-tone="cream"] .announce__item b { background: rgba(12, 12, 13, .08); }
.announce[data-tone="green"] { background: #14532D; }
.announce { transition: background-color 400ms var(--ease); }
.announce__code { font-weight: 600; letter-spacing: .04em; }

/* Round 13: full-bleed collection hero (sections/main-collection): 100vw, the image's own ratio, mobile image + ratio,
   title + count over a bottom gradient */
.colhero--bleed { padding: 16px 0 0; }
.colhero--bleed .colhero__crumbs { margin-bottom: 16px; }
.colhero__media { position: relative; width: 100%; aspect-ratio: var(--ar-m); background: var(--cream); overflow: hidden; }
@media (min-width: 768px) { .colhero__media { aspect-ratio: var(--ar); } }
.colhero--bleed .colhero__pic, .colhero--bleed .colhero__pic img { display: block; width: 100%; height: 100%; }
.colhero--bleed .colhero__pic img { object-fit: contain; max-height: none; }
.colhero--bleed .colhero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 12, 13, .72) 0%, rgba(12, 12, 13, .3) 28%, rgba(12, 12, 13, 0) 50%); pointer-events: none; }
.colhero__over { position: absolute; inset: auto 0 0; display: grid; justify-items: start; gap: 4px; padding-block: 0 20px; }
.colhero--bleed .colhero__title { color: var(--white); text-shadow: 0 1px 16px rgba(12, 12, 13, .35); }
.colhero--bleed .colhero__count { order: 0; margin: 0; color: rgba(255, 255, 255, .88); }
.colhero__below { padding-top: 16px; }
@media (min-width: 768px) { .colhero__over { padding-block-end: 32px; } .colhero--bleed { padding-top: 24px; } }
.snh-hdr-sec.is-pinned { padding-bottom: var(--v-hdr, 64px); }
.snh-hdr-sec.is-pinned .hdr { position: fixed; top: 0; left: 0; right: 0; }
.colhero__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-top: 20px; }
.colhero__head .colhero__count { order: 0; margin: 0; }
.colhero__head .colhero__title { color: var(--ink); text-shadow: none; }
.colhero__head .colhero__count { color: var(--grey-2, #6b6b6b); }

/* Round 13: compact product card (snippets/snh-v2-card). Rows: brand · rating / name (2 lines) / meta / price +
   compare-at with Koko under it. Quick add is the round "+" on the image; points show on desktop hover only. */
.pc__peek { display: none; }
.pc__plus { position: absolute; right: 16px; bottom: 8px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--white); cursor: pointer; box-shadow: 0 4px 12px rgba(12, 12, 13, .18); transition: background-color var(--t) var(--ease), transform var(--t) var(--ease); }
.pc__plus svg { width: 18px; height: 18px; }
.pc__plus:hover { background: var(--v-accent); transform: scale(1.06); }
.pc__plus.is-busy, .pc__plus[aria-busy="true"] { opacity: .6; }
.pc__plus.is-added { background: #157A3A; }
.pc__body { padding: 12px 16px 16px; }
.pc__top { height: 18px; }
.pc__brand { letter-spacing: .04em; }
.pc__name { height: 48px; margin-top: 6px; }
.pc__sub { height: 20px; margin-top: 2px; white-space: normal; text-overflow: clip; overflow: hidden; }
.pc__per { white-space: nowrap; }
.pc__foot { display: grid; justify-items: start; text-align: left; gap: 2px; margin-top: auto; padding-top: 12px; }
.pc__price { flex-direction: row; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-height: 0; padding: 0; border-radius: 0; background: none; }
.pc__price--sale { background: none; }
.pc__now { font: 700 18px/1.3 var(--sans); }
.pc__koko { height: 18px; margin: 0; overflow: hidden; font: 400 12px/1.5 var(--sans); white-space: nowrap; text-overflow: clip; color: var(--grey-2); }
.pc__koko--out { font-weight: 600; color: var(--grey-1); }
.pc__kk { letter-spacing: 0; }
.pc__earn { max-height: 0; margin-top: 0; padding-top: 0; border-top: 0; overflow: hidden; opacity: 0; transition: max-height 300ms var(--ease), opacity 300ms var(--ease), margin 300ms var(--ease), padding 300ms var(--ease); }
@media (hover: hover) and (min-width: 768px) {
  .pc:hover .pc__earn, .pc:focus-within .pc__earn { max-height: 40px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #ECE6DD; opacity: 1; }
}
@media (max-width: 767px) {
  .pc__plus { right: 12px; width: 36px; height: 36px; }
  .pc__body { padding: 10px 12px 12px; }
  .pc__top { height: 16px; }
  .pc__brand { font-size: 11px; letter-spacing: .04em; }
  .pc__rating { font-size: 11px; gap: 2px; }
  .pc__name { height: 42px; margin-top: 4px; }
  .pc__sub { height: 36px; font-size: 12px; line-height: 1.5; }
  .pc__foot { padding-top: 8px; }
  .pc__now { font-size: 16px; }
  .pc__koko { font-size: 11px; height: 17px; }
  .pc__earn { display: none; }
}
/* names / brands are word-clamped by assets/snh-v2.js (fitCard); the CSS clamp stays as the no-JS fallback */
.pc--tight .pc__count { display: none; }
.pc__brand { text-overflow: ellipsis; } /* audit: a single long brand word at 320px ends in … instead of being cut mid-letter */
/* Round 13 audit: the compact card on the type scale (sizes 12+, letter-spacing 0 / .06 / .12em, line-height 1.1 / 1.5) */
.pc__brand { letter-spacing: .04em; }
.pc__now { line-height: 1.1; }
@media (max-width: 767px) {
  .pc__brand { font-size: 12px; letter-spacing: 0; }
  .pc__rating { font-size: 12px; }
  .pc__koko { font-size: 12px; height: 18px; }
  .pc__koko .pc__with { display: none; }
}

/* Round 14: SNH quick-buy sheet (assets/snh-quick.js) — bottom sheet on phones, centred card on desktop */
.sqb { width: min(480px, 100vw); max-width: 100vw; max-height: 90vh; margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--white); color: var(--ink); font-family: var(--sans); box-shadow: 0 24px 60px rgba(12, 12, 13, .24); }
.sqb::backdrop { background: rgba(12, 12, 13, .5); }
.sqb__in { position: relative; padding: 24px; overflow-y: auto; max-height: 90vh; }
.sqb__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; font: 400 28px/1 var(--sans); color: var(--ink); cursor: pointer; }
.sqb__x:hover { background: var(--cream); }
.sqb__head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding-right: 32px; }
.sqb__img { width: 96px; height: 96px; border-radius: 12px; background: var(--cream); overflow: hidden; }
.sqb__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sqb__brand { font: 600 12px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--grey-2); }
.sqb__t { margin-top: 4px; font: 600 16px/1.5 var(--sans); }
.sqb__price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.sqb__price b { font: 700 18px/1.5 var(--sans); }
.sqb__price s { font: 400 14px/1.5 var(--sans); color: var(--grey-2); }
.sqb__koko { font: 400 13px/1.5 var(--sans); color: var(--grey-1); }
.sqb__opt { margin: 20px 0 0; padding: 0; border: 0; }
.sqb__opt legend { padding: 0; margin-bottom: 8px; font: 400 14px/1.5 var(--sans); color: var(--grey-1); }
.sqb__opt legend b { color: var(--ink); font-weight: 600; }
.sqb__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sqb__pill { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--white); font: 500 14px/1.5 var(--sans); color: var(--ink); cursor: pointer; }
.sqb__pill:hover { border-color: var(--ink); }
.sqb__pill.is-on { border-color: var(--ink); background: var(--ink); color: var(--white); }
.sqb__pill.is-out { color: var(--grey-2); text-decoration: line-through; }
.sqb__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-top: 24px; }
.sqb__qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--pill); }
.sqb__qty button { width: 44px; height: 48px; border: 0; background: none; font: 500 18px/1 var(--sans); cursor: pointer; }
.sqb__qty output { min-width: 24px; text-align: center; font: 600 16px/1.5 var(--sans); }
.sqb__add { min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--pill); background: var(--v-accent); color: var(--white); font: 600 16px/1.1 var(--sans); cursor: pointer; }
.sqb__add:hover { background: var(--v-accent-hover); }
.sqb__add:disabled { background: var(--cream); color: var(--grey-1); cursor: default; }
.sqb__more { display: inline-block; margin-top: 16px; font: 500 14px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 4px; }
.sqb__low { margin-top: 8px; font: 600 13px/1.5 var(--sans); color: #A3271D; }
.sqb__wait { padding: 32px 0; text-align: center; color: var(--grey-1); }
@media (max-width: 767px) {
  .sqb { width: 100vw; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .sqb__in { padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
}

/* Round 14: where the one card sits */
.eband__copy { display: grid; gap: 16px; justify-items: start; }
.eband__in--card { justify-items: stretch; }
.eband__card { order: 2; justify-self: center; width: 100%; max-width: 420px; }
@media (min-width: 1024px) { .eband__in--card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; column-gap: 64px; } .eband__card { justify-self: end; } }
.app__mini { margin: 0 0 8px; }
.app__side .app__tier, .app__side .app__pts { display: none; }
.app__ecard { margin-bottom: 24px; max-width: 420px; }
/* Round 14: the shared recommendation widget (assets/snh-cart.js) */
.snh-reco[hidden] { display: none; }
.snh-reco { margin-block: 32px; }
.snh-reco__h { margin-bottom: 12px; font: 600 var(--t-h4, 20px)/1.1 var(--sans); letter-spacing: -.02em; }
.snh-reco .ssugs { margin: 0; padding: 0 0 4px; grid-auto-columns: minmax(150px, 180px); }
@media (min-width: 1024px) { .snh-reco--pdp .ssugs, .nf .snh-reco .ssugs, .snh-reco--app .ssugs { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
/* Round 14 (parity): long mega-menu columns flow into two columns on desktop */
@media (min-width: 1024px) { .mz__list:has(> li:nth-child(13)) { columns: 2; column-gap: 24px; } .mz__list:has(> li:nth-child(13)) > li { break-inside: avoid; } }
/* Round 14 (CRO): phones get a "Shop N products ↓" jump in the hero title row, above the fold under tall banners */
.colhero__jump { display: none; }
@media (max-width: 767px) {
  .colhero__jump { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: auto; padding: 0 16px; border-radius: var(--pill); background: var(--ink); color: var(--white); font: 600 14px/1.1 var(--sans); }
  .colhero__jump--over { margin: 8px 0 0; background: var(--white); color: var(--ink); }
  .colhero__head { align-items: center; }
}
#facet-form { scroll-margin-top: var(--header-height, 64px); }

/* Round 14: the brand rail inside the phone "Filter & sort" sheet (moved there by facets-vertical while it's open) */
form.snh-bar-form [data-snh-sheet].is-open .snh-brands.is-in-sheet { display: grid !important; border-block-end: 1px solid var(--snh-line, #e5e5e5); padding-block: 4px 12px; }
.snh-brands.is-in-sheet::before { content: "Brand"; display: block; padding: 12px 0 8px; font-weight: 600; font-size: 16px; }
.snh-brands.is-in-sheet .snh-brands__nudge { display: none; }
.snh-brandtog { display: none !important; }
@media (min-width: 1000px) {
  form.snh-bar-form.is-condensed:has(.snh-brands) .snh-brandtog { display: inline-flex !important; }
  form.snh-bar-form.is-condensed.show-brands .snh-bar .snh-brands { display: grid !important; }
  .snh-brandtog[aria-expanded="true"] { background: var(--ink, #0c0c0d); color: #fff; }
}

/* Round 14 P2 (responsive sweep 360–1920): body sentences ≥ 16 px; small tap targets ≥ 24 px (WCAG 2.5.8).
   Meta text (eyebrows, badges, per-serving, Koko line, legal) stays small on purpose. */
.hero__sub, .benefit__text, .store__body .meta { font-size: 16px; }   /* product, campaign and cart sizes are set in their own files */
.ftr__col a { display: inline-flex; align-items: center; min-height: 24px; }
.hdr__logo { min-height: 44px; display: inline-flex; align-items: center; }
.colhero__crumbs a, .sp-crumbs a, .crumbs a, .mqd__link, .sp-eyebrow, .sp-stars, .hs__name { display: inline-flex; align-items: center; min-height: 24px; }
.sp-line { min-height: 24px; }
.ftr__social a { display: inline-flex; align-items: center; min-height: 24px; }
button.seg { height: 24px !important; min-width: 24px; }   /* slider segments: 24 px tap height everywhere (the SiS strip squeezed them to 12) */

/* Round 15: the Koko logo (snippets/snh-koko-logo, SNH.kokoImg) sits on the text line */
img.snh-koko { display: inline-block; width: auto; vertical-align: middle; margin-top: -2px; }
.hpc__koko img.snh-koko { height: 13px; }
.sqb__koko img.snh-koko { height: 14px; }
.ftr__koko { display: inline-flex; align-items: center; gap: 6px; }
.ftr__koko img.snh-koko { height: 14px; padding: 2px 4px; border-radius: 4px; background: #fff; box-sizing: content-box; }

/* Round 15: product card contrast. Warm tile edge to edge (pack shot on #F5F2EC), white body under a hairline,
   bold ink price, compare-at struck grey + the saving in orange, black quick-add. Structure unchanged. */
.pc { border-color: #E3DCD0; background: #fff; }
.pc:hover { border-color: #D6CDBE; box-shadow: 0 14px 32px -10px rgba(14, 14, 14, .18); }
.pc__frame { padding: 0; }
.pc .card__tile { border-radius: 0; background: #F5F2EC; }
.pc .card__tile::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: #E3DCD0; }
.pc__badge, .pc__status { top: 12px; }
.pc__badge { left: 12px; }
.pc__status { right: 12px; }
.pc__chip { left: 12px; bottom: 12px; }
.pc__plus { right: 12px; bottom: 12px; background: #0E0E0E; box-shadow: 0 6px 16px -6px rgba(14, 14, 14, .45); }
.pc__brand { color: #5C574F; }
.pc__now, .pc__price--sale .pc__now { font-weight: 700; font-size: 20px; color: #0E0E0E; }
.pc__was { color: #6B665E; }
.pc__save { font: 600 12px/1.5 var(--sans); color: #BF4512; white-space: nowrap; }
@media (max-width: 767px) {
  .pc__now, .pc__price--sale .pc__now { font-size: 18px; }
  .pc__plus { right: 10px; bottom: 10px; }
}
/* on cream sections the tile would match the page: a touch deeper so the card reads as a card */
.v-section--cream .pc .card__tile { background: #ECE5D9; }

/* ---------- Round 15: the SNH Elite card (snippets/snh-elite-card). One static design, any size: text scales with the
   card width (container units, never under 12px). No tilt, rotation or 3D. Hover (desktop): a subtle sheen. ---------- */
.elc-wrap { position: relative; width: 100%; max-width: 440px; }
.elc-wrap--compact { max-width: 340px; }
.elc-wrap--small { max-width: 260px; }
.elc { --e1: #A2603A; --e2: #8A4B23; --e3: #5C3114; --ei: #FFFFFF; --echip: #E9C98F; --eline: rgba(255, 255, 255, .28);
  position: relative; container-type: inline-size; width: 100%; aspect-ratio: 1.586 / 1; border-radius: 16px; color: var(--ei);
  box-shadow: 0 18px 40px -18px rgba(14, 14, 14, .55), 0 2px 6px rgba(14, 14, 14, .12); }
.elc[data-tier="silver"] { --e1: #E6EAEF; --e2: #C3CBD5; --e3: #9AA5B3; --ei: #111418; --echip: #D9C389; --eline: rgba(17, 20, 24, .22); }
.elc[data-tier="gold"] { --e1: #F5D98A; --e2: #E0B04F; --e3: #C08A2B; --ei: #1A1206; --echip: #FFF1C8; --eline: rgba(26, 18, 6, .22); }
.elc__face { position: absolute; inset: 0; display: grid; overflow: hidden; border-radius: inherit; isolation: isolate;
  background: linear-gradient(135deg, var(--e1) 0%, var(--e2) 52%, var(--e3) 100%); transition: opacity 250ms ease; }
.elc__face::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 85% 0%, rgba(255, 255, 255, .22), transparent 55%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px); }
.elc__front { grid-template-rows: auto auto 1fr auto auto; gap: 2.4cqw; padding: 5.2cqw 5.6cqw 4.8cqw; }
.elc__sheen { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .2) 48%, transparent 60%); transform: translateX(-120%); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .elc:hover .elc__sheen { transition: transform 1.1s ease; transform: translateX(120%); }
}
.elc__face > :not(.elc__sheen):not(.elc__stripe) { position: relative; z-index: 1; }
.elc__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.elc__brand { display: inline-flex; align-items: center; gap: 1.8cqw; }
.elc__logo { display: block; width: 17cqw; min-width: 44px; aspect-ratio: 600 / 175; background: var(--ei);
  -webkit-mask: var(--snh-logo) center / contain no-repeat; mask: var(--snh-logo) center / contain no-repeat; }
.elc__brand em { font-family: var(--serif, 'Instrument Serif', serif); font-style: italic; font-weight: 400; font-size: max(14px, 6.4cqw); line-height: 1; }
.elc__tier { font: 700 max(12px, 3.6cqw)/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.elc__chip { width: 11.5cqw; min-width: 30px; height: auto; fill: var(--echip); stroke: rgba(60, 38, 8, .55); stroke-width: 1.2; }
.elc__no { align-self: end; font: 600 max(12px, 4.6cqw)/1.2 var(--sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.elc__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.elc__who, .elc__pts { display: grid; gap: 2px; min-width: 0; }
.elc__pts { justify-items: end; text-align: right; }
.elc__lbl { font: 600 max(12px, 2.9cqw)/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.elc__name { overflow: hidden; font: 600 max(12px, 4.2cqw)/1.3 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.elc__pts strong { font: 700 max(16px, 6.6cqw)/1.05 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.elc__val { font: 500 max(12px, 3.2cqw)/1.3 var(--sans); }
.elc__rail { height: max(3px, .9cqw); border-radius: 4px; background: var(--eline); overflow: hidden; }
.elc__rail i, .elc__bar i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--ei); }
/* back */
.elc__back { grid-template-rows: auto 1fr auto; padding: 0 0 4cqw; }
.elc__stripe { display: block; height: 10cqw; margin-top: 5cqw; background: linear-gradient(180deg, #2A251E 0%, #0E0C09 55%, #1C1914 100%); }
.elc__rows { display: grid; align-content: center; gap: 2.4cqw; margin: 0; padding: 3cqw 5.6cqw 0; }
.elc__rows > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
.elc__rows dt { font: 600 max(12px, 3cqw)/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.elc__rows dd { margin: 0; text-align: right; font: 700 max(12px, 3.6cqw)/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.elc__next .elc__bar { grid-column: 1 / -1; display: block; height: max(3px, .9cqw); margin-top: 1cqw; border-radius: 4px; background: var(--eline); overflow: hidden; }
.elc__link { justify-self: end; margin: 0 5.6cqw; font: 700 max(12px, 3.4cqw)/1.3 var(--sans); color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Round 16: the flip card (side both). A click / tap / Enter / Space turns it over in 3D; no pointer tilt or parallax.
   Reduced motion: an instant crossfade. */
.elc__in { position: absolute; inset: 0; border-radius: inherit; }
.elc[data-side="both"] { perspective: 1400px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.elc[data-side="both"] .elc__in { transform-style: preserve-3d; transition: transform 700ms cubic-bezier(.22, .7, .18, 1); }
.elc[data-side="both"] .elc__face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.elc[data-side="both"] .elc__back { transform: rotateY(180deg); }
.elc[data-side="both"].is-flipped .elc__in { transform: rotateY(180deg); }
.elc[data-side="both"]:focus-visible { outline: 3px solid var(--v-accent, #BF4512); outline-offset: 4px; }
.elc-hint { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; font: 600 13px/1.4 var(--sans); color: var(--grey-1, #4A453E); }
.elc-hint svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .elc[data-side="both"] .elc__in { transform: none !important; transition: none; }
  .elc[data-side="both"] .elc__back { transform: none; opacity: 0; visibility: hidden; }
  .elc[data-side="both"] .elc__face { -webkit-backface-visibility: visible; backface-visibility: visible; transition: opacity 200ms linear; }
  .elc[data-side="both"].is-flipped .elc__back { opacity: 1; visibility: visible; }
  .elc[data-side="both"].is-flipped .elc__front { opacity: 0; visibility: hidden; }
}
/* Round 16: front foot = member name (one line) bottom-left · "500 POINTS · Rs 500" on one line bottom-right */
.elc__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.elc .elc__pts { display: flex; align-items: baseline; justify-content: flex-end; gap: .35em; margin: 0; white-space: nowrap; text-align: right; }
.elc .elc__pts strong { font: 700 max(16px, 6cqw)/1 var(--sans); }
.elc .elc__pts .elc__lbl { font-size: max(12px, 2.7cqw); }
.elc .elc__pts .elc__dot { font: 600 max(12px, 3.2cqw)/1 var(--sans); }
.elc .elc__pts .elc__val { font: 600 max(12px, 3.2cqw)/1 var(--sans); }
.elc--small .elc__pts .elc__dot, .elc--small .elc__pts .elc__val { display: none; }
@media (prefers-reduced-motion: reduce) { .elc__face { transition: none; } .elc__sheen { display: none; } }
/* Round 15 placements */
.acp .elc-wrap { margin: 4px 0 8px; }
.app__mini .elc-wrap { max-width: 100%; }
.app__hero.app__hero--cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.app__hero--cards .elc-wrap { max-width: 520px; }
@media (min-width: 1200px) {
  .app__hero.app__hero--cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .app__hero--cards .elc-wrap { max-width: none; }
  /* the points panel takes the card's ratio, so both are exactly the same height */
  .app__hero--cards .rwd { aspect-ratio: 1.586 / 1; min-height: 0; padding: 24px 28px; border-radius: 16px; justify-content: flex-end; }
  .app__hero--cards .rwd__in { padding-top: 0; gap: 4px; }
  .app__hero--cards .rwd__pts { font-size: clamp(36px, 3.4vw, 48px); }
  .app__hero--cards .rwd__p { font-size: 15px; line-height: 1.45; }
  .app__hero--cards .rwd .rwd__btn { margin-top: 6px; }
}
}

/* card text always takes the tier ink (the account app and pages colour p / strong / dd / a) */
.elc .elc__face :is(p, span, strong, em, dt, dd, a, small) { color: inherit !important; }
.elc .elc__face { color: var(--ei); }
/* Overview grid wins over snh-app.css's .app__hero columns */


/* small (sidebar): same design, tighter spacing so 12px text fits */
.elc--small .elc__front { gap: 1.2cqw; padding: 4.4cqw 5cqw 4cqw; }
.elc--small .elc__chip { width: 9cqw; min-width: 22px; }
.elc--small .elc__foot { gap: 8px; }
.elc--small .elc__val { display: none; }

/* Round 16: the Koko logo is an inline mark on the text baseline, never a hero (any img rule elsewhere can't grow it) */
img.snh-koko { max-height: 20px !important; width: auto !important; max-width: none !important; object-fit: contain; vertical-align: -0.2em; margin-top: 0; }
.pc__koko img.snh-koko, .sft__koko img.snh-koko, .sqb__koko img.snh-koko, .hpc__koko img.snh-koko { max-height: 16px !important; }
/* the shadow turns with the card (it sat on the non-rotating box and showed as a pale slab mid-flip) */
.elc { box-shadow: none; }
.elc__face { box-shadow: 0 18px 40px -18px rgba(14, 14, 14, .55), 0 2px 6px rgba(14, 14, 14, .12); }

/* Round 17: "For business" column in the Offers mega menu (+ the mobile Offers panel) */
.mega__grid--offers:has(.mz--biz) { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(160px, .55fr); }
.mm__level .mz--biz { margin-top: 22px; }

/* ---------- Round 17: footer polish ---------- */
@media (min-width: 1024px) { .ftr__cols { grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 768px) and (max-width: 1023px) { .ftr__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ftr__col { font-size: 15px; line-height: 1.5; }
.ftr__col h3 { font-size: 12px; line-height: 1.5; }
.ftr__pay { align-items: center; font-size: 14px; }
.ftr__payments { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.ftr__payments li { display: inline-flex; align-items: center; gap: 6px; }
.ftr__card { display: block; width: 44px; height: 28px; border-radius: 4px; }
.ftr__kk, .ftr__cod { min-height: 28px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; font: 600 13px/1 var(--sans); color: rgba(255, 255, 255, .86); }
.ftr__cod svg { width: 18px; height: 18px; }
/* the Koko logo is transparent: no chip on the dark footer */
.ftr__pay img.snh-koko, .ftr__koko img.snh-koko { padding: 0 !important; background: none !important; border-radius: 0; }
/* the big SNH mark: a quick fade + slide (≤ 400 ms, GPU transforms only), static with reduced motion; no decorative dot */
.ftr__dot { display: none !important; }
.v-js .ftr__wipe { clip-path: none !important; opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 360ms ease-out, transform 360ms cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.v-js .ftr__mark.is-in .ftr__wipe { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v-js .ftr__wipe { opacity: 1; transform: none; transition: none; } }

/* ================= R18 · The SNH standard: bento ================= */
.sbx__head { display: grid; gap: 8px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.sbx__grid { display: grid; gap: 14px; }
.sbx__big { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-height: 300px; padding: clamp(24px, 3vw, 40px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(160deg, #1A1412 0%, #0F0D0C 70%); }
.sbx__glow { position: absolute; z-index: -1; right: -20%; top: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(224, 82, 28, .55) 0%, rgba(224, 82, 28, .18) 40%, transparent 70%); filter: blur(10px); pointer-events: none; }
.sbx__stat { display: grid; gap: 4px; margin: 0; }
.sbx__num { font: 600 clamp(56px, 8vw, 104px)/.95 var(--sans); letter-spacing: -.04em; color: var(--white); font-variant-numeric: tabular-nums; }
.sbx__lbl { font: 500 clamp(16px, 1.6vw, 20px)/1.3 var(--sans); color: #FFB27A; }
.sbx__lead { max-width: 44ch; margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.sbx__rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; color: rgba(255, 255, 255, .72); }
.sbx__rating strong { color: var(--white); }
.sbx__stars { color: #FF8A4C; letter-spacing: 1px; }
.sbx__list { display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.sbx__list::-webkit-scrollbar { display: none; }
.sbx__card { position: relative; flex: 0 0 min(72%, 260px); scroll-snap-align: start; display: grid; align-content: start; gap: 6px; padding: 22px 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); transition: transform 280ms cubic-bezier(.22, 1, .36, 1), border-color 280ms ease, box-shadow 280ms ease, background-color 280ms ease; }
.sbx__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px; background: rgba(224, 82, 28, .14); color: #FF8A4C; }
.sbx__ic svg { width: 22px; height: 22px; }
.sbx__title { margin: 0; font: 600 18px/1.2 var(--sans); letter-spacing: -.01em; color: var(--white); }
.sbx__text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .64); }
@media (hover: hover) {
  .sbx__card:hover { transform: translateY(-4px); border-color: rgba(255, 138, 76, .45); background: rgba(255, 255, 255, .06); box-shadow: 0 18px 40px -18px rgba(224, 82, 28, .55); }
}
@media (min-width: 900px) {
  .sbx__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
  .sbx__big { min-height: 100%; }
  .sbx__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; overflow: visible; }
  .sbx__card { padding: 26px 24px; }
}
/* staggered reveal (only once JS has armed it, so no-JS still shows everything) */
.sbx.is-armed .sbx__t { opacity: 0; transform: translateY(18px); }
.sbx.is-armed.is-in .sbx__t { opacity: 1; transform: none; transition: opacity 600ms ease calc(var(--i, 0) * 80ms), transform 700ms cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 80ms), border-color 280ms ease, box-shadow 280ms ease, background-color 280ms ease; }
@media (hover: hover) { .sbx.is-armed.is-in .sbx__card:hover { transform: translateY(-4px); transition-delay: 0s; } }
@media (prefers-reduced-motion: reduce) { .sbx__card, .sbx__t { transition: none !important; transform: none !important; opacity: 1 !important; } }

/* ================= R18 · mobile homepage pass ================= */
@media (max-width: 1023px) {
  /* Shop the Look rail: each card is its own card (the shared white stack made the next card's number look like part of this one) */
  .hs__grid { grid-template-columns: minmax(0, 1fr); }
  .hs__grid > *, .hs__side, .hs__stack { min-width: 0; }
  .hs__stack { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .hs__stack .hs__list { gap: 10px; padding-bottom: 6px; }
  .hs__stack .hs__item.hpc { flex: 0 0 min(84%, 340px); border: 1px solid rgba(12, 12, 13, .08); border-radius: 12px; overflow: hidden; }
  .hs__stack .hs__item.is-hot { border-color: var(--v-accent); }
  .hs__stack .hs__pts { margin-top: 12px; border-radius: 10px; }
}
@media (max-width: 767px) {
  /* Elite band: the copy sits over the photo on phones; darken the top so it reads */
  .eband__bg::after { background: linear-gradient(180deg, rgba(12, 12, 13, .62) 0%, rgba(12, 12, 13, .74) 45%, rgba(12, 12, 13, .94) 100%), linear-gradient(200deg, rgba(224, 82, 28, .4) 0%, transparent 40%); }
  /* stores: a swipe rail instead of three full-width cards stacked (~1450px) */
  .stores { display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .stores::-webkit-scrollbar { display: none; }
  .stores > .store { flex: 0 0 min(82%, 320px); scroll-snap-align: start; }
}
/* the homepage already ends with the "First to know" band: don't repeat the same signup in the footer right under it */
body:has(.news__form) .ftr__news { display: none; }
@media (max-width: 767px) { .ftr__sep { display: none; } .ftr__tel { display: table; margin-top: 2px; } }   /* footer stores: phone on its own line, no dangling "·" */

/* ================= R18 · "Not sure what to buy?" quiz band + full-screen quiz (sections/snh-quiz-band) ================= */
.qzb { position: relative; overflow: hidden; background: linear-gradient(100deg, #17110D 0%, #2A1408 55%, #BF4512 140%); color: var(--white); }
.qzb::before { content: ""; position: absolute; right: -10%; top: -60%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 122, 50, .35), transparent 65%); pointer-events: none; }
.qzb__in { position: relative; display: grid; gap: 18px; padding-block: 28px; }
.qzb__h { margin: 0; font: 600 clamp(22px, 2.6vw, 32px)/1.15 var(--sans); letter-spacing: -.02em; }
.qzb__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: #FFB27A; letter-spacing: 0; }
.qzb__p { margin: 6px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .74); }
.qzb__act { display: grid; gap: 8px; justify-items: start; }
.qzb__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border: 0; border-radius: var(--pill); background: var(--v-accent); color: var(--white); font: 600 17px/1 var(--sans); cursor: pointer; box-shadow: 0 10px 30px -10px rgba(224, 82, 28, .8); transition: background-color 200ms var(--ease), transform 200ms var(--ease); }
.qzb__cta svg { width: 20px; height: 20px; transition: transform 250ms cubic-bezier(.22, 1, .36, 1); }
.qzb__cta:hover { background: #D4501A; }
.qzb__cta:hover svg { transform: translateX(4px); }
.qzb__cta:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.qzb__note { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
@media (max-width: 767px) { .qzb__act { justify-items: stretch; } .qzb__cta { width: 100%; } .qzb__note { text-align: center; } }
@media (min-width: 900px) { .qzb__in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding-block: 36px; } .qzb__act { justify-items: center; } }
/* the full-screen flow */
html.qzb-open, html.qzb-open body { overflow: hidden; }
.qzb__ov { position: fixed; inset: 0; z-index: 130; overflow-y: auto; overscroll-behavior: contain; background: var(--white); color: var(--ink); animation: v-fade 200ms var(--ease); }
.qzb__ov[hidden] { display: none; }
.qzb__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 var(--gutter); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.qzb__brand { font: 700 18px/1 var(--sans); letter-spacing: -.02em; color: var(--v-accent); }
.qzb__brand em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink); }
.qzb__x { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.qzb__x svg { width: 22px; height: 22px; }
.qzb__body { width: min(100%, 760px); margin: 0 auto; padding: 24px var(--gutter) calc(48px + env(safe-area-inset-bottom)); }
.qzb__intro { display: grid; gap: 4px; margin-bottom: 20px; }
.qzb__intro .eyebrow { color: var(--v-accent); }
.qzb__ih { margin: 0; font: 600 clamp(24px, 3vw, 32px)/1.15 var(--sans); letter-spacing: -.02em; }
.qzb__ih em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.qzb__loading { padding: 40px 0; text-align: center; color: var(--grey-2); }

/* ---------- Round 19 #1: crisp, true-colour packshots. The warm #F5F2EC / #ECE5D9 tile + mix-blend multiply turned
   every white backdrop (and the pack's own whites) cream/yellow, and the hover crossfade swapped in a second photo
   with a different backdrop (the tile "flipped to white"). Now: one neutral #F7F7F7 tile (multiply on a neutral grey
   only darkens 3 %, no colour cast), grey studio shots still tint the tile to their sampled grey (snh-v2.js), and
   hover is a soft shadow + 3 px lift only: no image zoom, swap, filter or background change. */
:root { --snh-tile: #F7F7F7; }
.card__tile, .pc .card__tile, .v-section--cream .pc .card__tile { background: var(--snh-tile); }
.card__img, .pc:hover .card__img, .card:hover .card__img { transform: none; transition: none; filter: none; opacity: 1; }
.card__img--alt { display: none; }
.pc { transition: box-shadow 260ms var(--ease), transform 260ms var(--ease), border-color 260ms var(--ease); }
.pc:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(14, 14, 14, .22); }
.pc .card__tile::after { background: #E7E7E7; }
@media (hover: none), (max-width: 767px) { .pc:hover { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .pc, .pc:hover { transform: none; transition: none; } }

/* Round 19 #8: SNH standard band background video (snippets/snh-bg-video) */
.sbx--video { position: relative; isolation: isolate; overflow: hidden; }
.sbx--video > .v-wrap { position: relative; z-index: 1; }
.sbx--video-section .sbx__big { background: rgba(20, 16, 13, .55); backdrop-filter: blur(2px); }
.sbx--video-section .sbx__card { background: rgba(20, 16, 13, .5); }
.sbx--video-tile .sbx__big > :not(.snh-bgv) { position: relative; z-index: 1; }
.sbx--video .sbx__num, .sbx--video .sbx__title { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }

/* ---------- Round 19 #10, photo version (10 Nov 2026): the real SNH shaker (assets/snh-v2.js SNH.shaker) ----------
   .shk__img = the bottle photo with see-through walls (on top); .shk__box = the inside of the bottle (mask) holding
   .shk__liq, which rises to --fill (0–1). Liquid spans 31.2 % (neck) → 98 % (base) of the photo's height. */
.shk { --fill: 0; --shk-h: 120px; --shk-l1: #FF9A5A; --shk-l2: #D2470C; position: relative; display: inline-block; flex: none; width: calc(var(--shk-h) * .4358); height: var(--shk-h); vertical-align: middle; }
.shk[data-tier="bronze"] { --shk-l1: #F0A86A; --shk-l2: #A4521C; }
.shk[data-tier="silver"] { --shk-l1: #DCE3EC; --shk-l2: #8593A6; }
.shk[data-tier="gold"], .shk[data-tier="maxed-out"] { --shk-l1: #FFD970; --shk-l2: #CF8F10; }
.shk[data-tier="green"] { --shk-l1: #7BE3A2; --shk-l2: #1F7A44; }
.shk__img, .shk__box { position: absolute; inset: 0; }
.shk__img { background: var(--shk-glass-img) center / 100% 100% no-repeat; filter: drop-shadow(0 6px 10px rgba(14, 14, 14, .16)); pointer-events: none; }
.shk__box { overflow: hidden; -webkit-mask: var(--shk-mask-img) center / 100% 100% no-repeat; mask: var(--shk-mask-img) center / 100% 100% no-repeat; }
.shk__liq { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: linear-gradient(180deg, var(--shk-l1), var(--shk-l2) 70%); opacity: .94;
  transform: translateY(calc(31.2% + 66.8% * (1 - var(--fill)) + 2px)); transition: transform 900ms cubic-bezier(.3, 1.25, .45, 1), opacity 200ms; }
.shk__surf { position: absolute; left: 0; bottom: 100%; width: 200%; height: 8%; margin-bottom: -1px; display: block; }
.shk__wave { fill: var(--shk-l1); animation: shk-wave 1.6s linear infinite; }
.shk__wave--b { opacity: .55; animation-duration: 2.3s; animation-direction: reverse; }
.shk__bub { position: absolute; bottom: 6%; left: 34%; width: 5%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .7); opacity: 0; animation: shk-bub 2.4s ease-in infinite; }
.shk__bub--2 { left: 58%; width: 3.5%; animation-delay: .8s; animation-duration: 2s; }
.shk__bub--3 { left: 46%; width: 6%; animation-delay: 1.5s; animation-duration: 2.8s; }
.shk__bub--4 { left: 68%; width: 4%; animation-delay: 2.1s; animation-duration: 2.2s; }
.shk[data-level="0"] .shk__bub { display: none; }
.shk[data-level="0"] .shk__liq { opacity: 0; }
@keyframes shk-wave { to { transform: translateX(-50%); } }
@keyframes shk-bub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(calc(var(--shk-h) * -.55)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .shk__wave, .shk__bub { animation: none; } .shk__bub { display: none; } .shk__liq { transition: none; } }
/* level rows: shaker + text */
.shk-row { display: flex; align-items: center; gap: 14px; }
.shk-row__t { display: grid; gap: 2px; min-width: 0; }
.shk-row__k { margin: 0; font: 600 12px/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--grey-2); }
.shk-row__v { margin: 0; font: 700 22px/1.15 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.shk-row__s { margin: 0; font-size: 14px; line-height: 1.45; color: var(--grey-1); }

/* Round 19 #10: the header account panel's progress line with the shaker */
.acp__prog.acp__prog--shk { display: flex; align-items: center; gap: 12px; }
.acp__prog--shk .shk { --shk-h: 64px; }
.acp__prog--shk .acp__next { margin: 0; }
/* Round 20: sitewide offer highlight (assets/snh-campaigns.js sets html[data-offer] and --offer-label while it's live) */
html[data-offer] .pc__frame::after { content: var(--offer-label); position: absolute; left: 16px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--pill); background: var(--orange, #BF4512); color: #fff; font: 700 12px/1 var(--sans); letter-spacing: .01em; pointer-events: none; box-shadow: 0 2px 8px rgba(14, 14, 14, .18); }
@media (max-width: 749px) { html[data-offer] .pc__frame::after { left: 10px; bottom: 8px; height: 22px; padding: 0 8px; font-size: 11px; } }
html[data-offer] .pc--out .pc__frame::after { display: none; }
/* audit: the search page's submit icon gets a 44px tap area */
.main-search-form .search-input button[type="submit"] { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
/* audit (320–480px): the orange announcement ends in … instead of being cut on both sides */
@media (max-width: 480px) {
  .announce__item { display: block; padding: 0 12px; line-height: 34px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .announce__item b { display: inline-block; margin-right: 6px; line-height: 1.35; vertical-align: 1px; }
  .announce__item > span[aria-hidden] { margin-left: 4px; }
}
/* audit (short phones, e.g. 320×568): the hero copy no longer slides up under the transparent header */
@media (max-width: 400px) and (max-height: 700px) {
  .hero { min-height: 580px; }
  .hero .display { font-size: clamp(34px, 10.6vw, 40px); }
  .hero__copy { gap: 10px; }
}

/* ---------- Post-launch: "too zoomed in" — the UI one step smaller (≈ −12% phones, −8% desktop) ----------
   Fluid type re-anchored at 390 → 1440: display 38→66, h1 32→52, h2 25→40, h3 21→33, h4 18→26, h5 16→22.
   Body 15px on phones (16 from 768), section rhythm 40/56, buttons 44px (still the minimum tap size). */
:root {
  --t-display: clamp(38px, 27.6px + 2.667vw, 66px);
  --t-h1: clamp(32px, 24.57px + 1.905vw, 52px);
  --t-h2: clamp(25px, 19.43px + 1.429vw, 40px);
  --t-h3: clamp(21px, 16.54px + 1.143vw, 33px);
  --t-h4: clamp(18px, 15.03px + .762vw, 26px);
  --t-h5: clamp(16px, 13.77px + .571vw, 22px);
  --fs-body: 15px;
  --section: 40px;
  --btn-h: 44px;
  --hdr-h: 56px;
}
@media (min-width: 768px) { :root { --fs-body: 16px; } }
@media (min-width: 1024px) { :root { --section: 56px; --hdr-h: 66px; } }
.v-btn { padding: 0 20px; font-size: 14px; }
.hero__sub { font-size: 16px; }
@media (min-width: 1024px) { .hero__sub { font-size: 17px; } }
.lead { font-size: 16px; }
@media (max-width: 767px) {
  /* header stack ≤ 120px on phones: ticker 28 + announcement 30 + header 56 */
  .ticker { font-size: 12px; }
  .ticker__item { padding: 8px 22px; }
  .ticker__item::after { margin-left: 22px; }
  .announce, .announce__item { font-size: 12.5px; }
  .announce__in { height: 30px; }
  .announce__item { line-height: 30px; }
  .lead { font-size: 15px; }
}

/* 10 Nov (phones): the collection banner is capped at ~58 % of the screen width tall (it was up to a full screen of
   artwork before the products); the photo is cropped from the top, the title + count sit under it as before. */
@media (max-width: 767px) {
  .colhero--bleed .colhero__media { aspect-ratio: auto; height: min(calc(100vw / var(--ar-m)), 58vw); }
  .colhero--bleed .colhero__pic img { object-fit: cover; object-position: 50% 22%; }
  .colhero--bleed { padding-top: 10px; }
  .colhero--bleed .colhero__crumbs { margin-bottom: 10px; }
}

/* 10 Nov: the one announcement bar (ticker lines rotate in it): slimmer and calmer — 30 px (28 px on phones),
   12.5 px text, a small label, no underline jump; the delivery/Koko notes aren't links */
.announce__in { height: 30px; }
.announce, .announce__item { font: 500 12.5px/1 var(--sans); letter-spacing: .01em; }
.announce__item { line-height: 30px; gap: 8px; }
.announce__item b { padding: 3px 7px; font-size: 10.5px; letter-spacing: .06em; line-height: 1; border-radius: 4px; background: rgba(10, 10, 10, .2); }
.announce__item > span[aria-hidden] { opacity: .8; }
.announce__item--note { cursor: default; }
.announce__item--note:hover { text-decoration: none; }
@media (max-width: 749px) {
  .announce__in { height: 28px; }
  .announce, .announce__item { font-size: 12px; }
  .announce__item { line-height: 28px; }
}

/* 10 Nov (phones): "The SNH standard" in one screen — the brand video plays behind (MP4 now), the big tile is just the
   counter (no paragraph, no rating line), and the benefits are a 2-column grid of icon + title (no sideways swipe, no
   descriptions). Desktop is unchanged. */
@media (max-width: 767px) {
  .sbx.v-section { padding-block: 36px; }
  .sbx__head { margin-bottom: 16px; gap: 4px; }
  .sbx__grid { gap: 10px; }
  .sbx__big { min-height: 0; gap: 4px; padding: 18px 20px; border-radius: 16px; }
  .sbx__num { font-size: 46px; }
  .sbx__lbl { font-size: 15px; }
  .sbx__lead, .sbx__big .sbx__rating { display: none; }
  .sbx__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; overflow: visible; }
  .sbx__card { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; }
  .sbx__ic { flex: none; width: 32px; height: 32px; margin: 0; border-radius: 9px; }
  .sbx__ic svg { width: 17px; height: 17px; }
  .sbx__title { font-size: 12.5px; line-height: 1.25; letter-spacing: 0; }
  .sbx__text { display: none; }
  .sbx--video .snh-bgv__ov { opacity: .82; }
}