/* ==========================================================================
   MAXIMUS.BIO — site chrome + shared components.
   Layering (spec §7): main 2 < blur bands 3 < footer 5 < capture bar 8 < header 9 < search 10.
   ========================================================================== */

/* ---------- Logo ---------------------------------------------------------- */
.logo { display: flex; align-items: flex-start; flex: none; height: 43px; color: var(--ink); }
.logo__mark { flex: none; width: 46.4px; height: 43px; color: var(--accent); }
.logo__word {
  position: relative; top: 14.3px; margin-left: 10.2px; white-space: nowrap;
  font-family: var(--font-nohemi-400); font-size: 19.3px; line-height: 1; letter-spacing: -.01em;
}
.logo__x { display: inline-block; height: .741em; width: auto; aspect-ratio: 53 / 67; margin: 0 .035em; color: var(--accent); vertical-align: baseline; }
.logo__dot { margin: 0 .06em; }
.logo--inverted { color: var(--white); }

/* (The fixed ticker strip that sat above the header was removed on 14 Oct 2026; the header now starts at top: 0.) */
:root { --mark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46.4 43' fill='none' stroke='%23000' stroke-width='4.2'%3E%3Cpath d='M0 21.8H46.4M23.5 7.6V35.2M2.6 42.6 44.6.6'/%3E%3C/svg%3E"); }

/* ---------- Progressive blur bands ----------------------------------------
   5 stacked backdrop blurs (1.328 → 16px) with staggered mask bands; strongest at the screen edge. */
.gblur { position: fixed; left: 0; right: 0; z-index: 3; height: 96px; pointer-events: none; }
.gblur--top { top: 0; --dir: to top; }
.gblur > div { position: absolute; inset: 0; }
.gblur > div:nth-child(1) { -webkit-backdrop-filter: blur(1.328px); backdrop-filter: blur(1.328px); --m: linear-gradient(var(--dir), transparent 0%, #000 20%, #000 40%, transparent 60%); }
.gblur > div:nth-child(2) { -webkit-backdrop-filter: blur(2.656px); backdrop-filter: blur(2.656px); --m: linear-gradient(var(--dir), transparent 20%, #000 40%, #000 60%, transparent 80%); }
.gblur > div:nth-child(3) { -webkit-backdrop-filter: blur(6.032px); backdrop-filter: blur(6.032px); --m: linear-gradient(var(--dir), transparent 40%, #000 60%, #000 80%, transparent 100%); }
.gblur > div:nth-child(4) { -webkit-backdrop-filter: blur(11.984px); backdrop-filter: blur(11.984px); --m: linear-gradient(var(--dir), transparent 60%, #000 80%, #000 100%); }
.gblur > div:nth-child(5) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); --m: linear-gradient(var(--dir), transparent 80%, #000 100%); }
.gblur > div { -webkit-mask-image: var(--m); mask-image: var(--m); }

/* ---------- Header --------------------------------------------------------
   One element, two states. Closed: 64px bar (desktop, 15px glaze). Open (html.menu-open): the bar grows to
   100vh while the black overlay drops from above — 0.4s --ease-menu; tablet/phone add a 100ms delay. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9; pointer-events: none; }
/* Scrolled surface (html.is-scrolled, set by the engine past 8px): once content runs under the bar it gets a
   near-opaque white glass and a hairline, so the logo and links never sit on top of headings or renders. Full-bleed
   (the bar itself is capped at 1520). At the top of the page the bar stays fully open, as designed. */
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px;
  background: rgba(255, 255, 255, .94); box-shadow: 0 1px 0 rgba(77, 29, 250, .12); /* violet-tinted hairline */
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; transition: opacity .3s var(--ease-btn);
}
html.is-scrolled .site-header::before { opacity: 1; }
html.menu-open .site-header::before { opacity: 0; transition-duration: .15s; }
@media (max-width: 1199.98px) {
  .site-header::before { height: 70px; }
}
/* The clip (.hdr) and its black overlay span the full viewport width, so the open menu is black edge to edge at any
   width (it used to stop at the 1520 container and leave white margins on wide screens); the content column inside
   (.hdr__menu) keeps the 1520 cap, so nothing in the bar or the menu moves. */
.hdr {
  position: relative; width: 100%; height: 64px; overflow: hidden;
  pointer-events: auto; color: var(--ink);
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%);
  transition: height .4s var(--ease-menu), backdrop-filter .4s var(--ease-menu), -webkit-backdrop-filter .4s var(--ease-menu);
}
.hdr__overlay {
  position: absolute; left: 0; right: 0; top: -60px; height: 60px; z-index: 0; background: var(--ink);
  transition: top .4s var(--ease-menu), height .4s var(--ease-menu);
}
.hdr__menu {
  position: relative; z-index: 2; max-width: var(--max); height: 100vh; margin-inline: auto; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 16px 39px 7px;
  transition: padding .4s var(--ease-menu);
}
.hdr__top { position: relative; z-index: 4; flex: none; width: 100%; height: 43px; display: flex; justify-content: space-between; align-items: center; }
.hdr__buttons { display: flex; align-items: center; gap: 32px; transition: gap .4s var(--ease-menu); }
.hdr__links { display: flex; gap: 40px; }
.hdr__icons, .menu-icons { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: inherit; }
.cart-link { width: 24px; height: 24px; display: grid; place-items: center; color: inherit; }

/* Nav link: two copies, the second parked 38px above; hover rolls both down (spring .4s / bounce .2). */
.navroll { position: relative; display: flex; flex-direction: column; overflow: hidden; white-space: pre; color: inherit; }
.navroll__a, .navroll__b { display: block; transition: transform var(--dur-spring) var(--ease-spring); }
.navroll__b { position: absolute; left: 0; top: -38px; }
.navroll:focus-visible span { transform: translateY(38px); }
@media (hover: hover) {
  .navroll:hover span { transform: translateY(38px); }
}

/* Burger: two 42×2 bars 8px apart → flat ±12° cross, white, when open. */
.burger { position: relative; flex: none; width: 42px; height: 12px; color: inherit; }
.burger::before { content: ""; position: absolute; inset: -14px -6px; } /* larger hit area, invisible */
.burger__bar {
  position: absolute; left: 0; width: 42px; height: 2px; background: currentColor;
  transition: transform var(--dur-spring) var(--ease-spring);
}
.burger__bar:first-child { top: 0; }
.burger__bar:last-child { top: 10px; }

/* Menu body (inside the header). Desktop: it sits at the menu's bottom edge and is simply uncovered by the growing
   clip (its 33px rise is the menu padding 7 → 40); only the SHOP list fades. Tablet/phone: the block fades and drops. */
.hdr__bottom {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; gap: 40px;
  visibility: hidden;
  transition: opacity .4s var(--ease-menu), transform .4s var(--ease-menu), visibility 0s linear .4s;
}
.menu-icons { display: none; }
.menu-group { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.menu-group--products { width: 100%; }
.menu-label { color: var(--white); }
.menu-links { display: flex; flex-direction: column; align-items: flex-start; }
.menu-links--shop { gap: 7px; opacity: 0; transition: opacity .4s var(--ease-menu); }
.menu-links--meet { gap: 0; }
.menu-links .navroll, .menu-link { color: var(--white); }
.menu-link { display: block; }

/* Open state */
html.menu-open .hdr { height: 100vh; color: var(--white); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); background: transparent; }
html.menu-open .hdr__overlay { top: 0; height: 100vh; } /* 100vh, not 100%: the parent is itself animating */
html.menu-open .hdr__menu { padding: 40px; }
html.menu-open .hdr__buttons { gap: 64px; }
html.menu-open .hdr__links { visibility: hidden; }
html.menu-open .logo { color: var(--white); }
html.menu-open .burger__bar:first-child { transform: translateY(5px) rotate(12deg); }
html.menu-open .burger__bar:last-child { transform: translateY(-5px) rotate(-12deg); }
html.menu-open .hdr__bottom { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html.menu-open .menu-links--shop { opacity: 1; }

/* ---------- Violet in the chrome --------------------------------------------
   Closed bar: the nav roll brings up a violet copy, search and burger turn violet on hover.
   Open menu (near-black): the mark glows, a violet hairline rules off the top bar, section labels carry the
   pill dot and --accent-bright (5.7:1 on #121212), links roll / turn to violet, the current page is violet,
   TOP PRODUCTS cards take a 2px violet frame on hover, and every focus ring switches to the bright violet. */
.hdr__links .navroll__b { color: var(--accent); }
.icon-btn, .burger { transition: color .3s var(--ease-btn); }
@media (hover: hover) {
  .hdr__icons .icon-btn:hover, .burger:hover { color: var(--accent); }
}

/* the whole visible surface is near-black while open: even the page scrollbar */
html.menu-open { scrollbar-color: #625b80 var(--ink); }
.logo__mark, .logo__x { transition: filter .4s var(--ease-menu); }
html.menu-open .hdr .logo__mark, html.menu-open .hdr .logo__x { filter: drop-shadow(0 0 7px rgba(124, 92, 255, .75)) drop-shadow(0 0 18px rgba(77, 29, 250, .45)); }
html.menu-open .hdr .burger, html.menu-open .hdr .icon-btn { color: var(--white); }
@media (hover: hover) {
  html.menu-open .hdr .burger:hover, html.menu-open .hdr .icon-btn:hover { color: var(--accent-bright); }
}
html.menu-open .hdr :focus-visible { outline-color: var(--accent-bright); }

/* hairline rule under the top bar (open only): violet fading out across the column */
.hdr__top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, var(--accent-bright) 0, rgba(148, 121, 255, .35) 120px, rgba(148, 121, 255, .12) 100%);
  opacity: 0; transform: scaleX(.2); transform-origin: left;
  transition: opacity .3s var(--ease-menu), transform .3s var(--ease-menu);
}
html.menu-open .hdr__top::after { opacity: 1; transform: none; transition-duration: .6s, .8s; transition-delay: .15s; }

.menu-label { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-bright); letter-spacing: .06em; }
.menu-label::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 30px; background: var(--accent-bright); }
.menu-links .navroll__b { color: var(--accent-bright); }
.menu-link { transition: color .3s var(--ease-btn); }
.menu-links [aria-current="page"], .menu-links [aria-current="page"] span { color: var(--accent-bright); }
@media (hover: hover) {
  .menu-link:hover { color: var(--accent-bright); }
}
.menu-link:focus-visible { color: var(--accent-bright); }

/* TOP PRODUCTS: violet frame on the hovered card, violet carousel arrows on hover */
.mcar .ccard--menu::after { box-shadow: inset 0 0 0 2px transparent; }
@media (hover: hover) {
  .mcar .ccard--menu:hover::after { box-shadow: inset 0 0 0 2px var(--accent); }
  .mcar__arrow:hover { background: var(--accent); }
}
.ccard--menu:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (max-width: 1199.98px) {
  .hdr__bottom .navroll .navroll__a { transition: color .3s var(--ease-btn); }
  .hdr__bottom .navroll:hover .navroll__a { color: var(--accent-bright); }
}

/* TOP PRODUCTS carousel: 4.5 cards visible, gap 10, arrows fade in on hover. The engine drags/translates the track. */
.mcar { position: relative; width: 100%; height: 246px; cursor: grab; user-select: none; }
.mcar:active { cursor: grabbing; }
.mcar__viewport { width: 100%; height: 100%; overflow: hidden; }
.mcar__track { display: flex; gap: 10px; height: 100%; padding-left: 3px; touch-action: pan-y; will-change: transform; }
.ccard--menu { flex: none; width: calc((100% - 33px) / 4.5); height: 100%; }
.mcar__arrow {
  position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; border-radius: 40px;
  display: grid; place-items: center; background: var(--ink); color: var(--white);
  opacity: 0; transition: opacity .7s var(--ease-backdrop), transform .15s var(--ease-btn), background-color .3s var(--ease-btn);
}
.mcar__arrow--prev { left: 20px; }
.mcar__arrow--next { right: 20px; }
.mcar__arrow:active { transform: scale(.9); }
.mcar:hover .mcar__arrow, .mcar:focus-within .mcar__arrow { opacity: 1; }

/* Tablet + phone: logo + burger only; the menu stacks from the top with search/cart first and no carousel. */
@media (max-width: 1199.98px) {
  .hdr { height: 70px; -webkit-backdrop-filter: none; backdrop-filter: none; background: none; }
  .hdr, .hdr__overlay { transition-delay: .1s; }
  .hdr__menu { padding: 24px; justify-content: flex-start; }
  html.menu-open .hdr__menu { padding: 24px; }
  html.menu-open .hdr { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hdr__links, .hdr__icons { display: none; }
  .hdr__bottom { padding: 32px 0 56px; gap: 80px; align-items: flex-start; opacity: 0; transition-delay: .1s, .1s, .5s;
    /* the fade trails the drop slightly: --ease-menu raised to the power 1.35 (fitted to the original) */
    transition-timing-function: linear(0, 0.0002, 0.0016, 0.0055, 0.0143, 0.0322, 0.0694, 0.1587, 0.3954, 0.6076, 0.727, 0.8051, 0.8606, 0.9016, 0.9324, 0.9555, 0.9726, 0.9848, 0.9931, 0.998, 1), var(--ease-menu), linear;
    /* closed, the original parks the block bottom-anchored (SHOP label at max(95, 100vh − 661)); open, the label is at 247 */
    transform: translateY(max(-152px, calc(100vh - 908px))); }
  html.menu-open .hdr__bottom { transition-delay: .1s, .1s, 0s; }
  .menu-links--shop { opacity: 1; transition: none; }
  .menu-icons { display: flex; }
  /* The original mounts the search/cart row 152px below its open spot (40px under the parked SHOP label), so it rises
     while the block drops; on close it is gone at once. */
  .menu-icons { transform: translateY(152px); opacity: 0; transition: transform 0s, opacity 0s; }
  html.menu-open .menu-icons { transform: none; opacity: 1; transition: transform .4s var(--ease-menu) .1s, opacity 0s; }
  .menu-links--shop { gap: 10px; }
  .hdr__bottom .navroll__b { display: none; }
  .hdr__bottom .navroll span { transform: none !important; }
  .menu-group--products { display: none; }
}

/* ---------- Category-style card (home categories, menu TOP PRODUCTS) ------- */
.ccard {
  position: relative; display: block; overflow: clip; isolation: isolate;
  background: var(--card); border-radius: 24px; filter: brightness(1);
  transition: filter var(--dur-card) var(--ease-card);
}
/* hover / focus frame: a violet hairline drawn inside the card (menu cards: 2px, see the chrome block) */
.ccard::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--dur-card) var(--ease-card);
}
@media (hover: hover) {
  .ccard:hover::after { box-shadow: inset 0 0 0 1px var(--accent-rule); }
}
.ccard:focus-visible::after { box-shadow: inset 0 0 0 1px var(--accent-rule); }
.ccard__img {
  position: absolute; left: 53px; right: 53px; top: 50%; aspect-ratio: 1.0546;
  transform: translateY(-50%); pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--dur-card) var(--ease-card), transform var(--dur-card) var(--ease-card);
}
.ccard__img img { width: auto; height: auto; max-width: var(--ccard-fit, 52%); max-height: var(--ccard-fit, 52%); }
.ccard__img--hover { opacity: 0; transform: translateY(-50%) scale(1.2); }
.ccard__float { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: translateY(-6%) rotate(14deg); }
.ccard__shadow {
  position: absolute; left: 50%; top: 74%; width: 30%; height: 12px; margin-left: -15%;
  border-radius: 50%; background: rgba(0, 0, 0, .18); filter: blur(8px);
}
/* Render-based cards (home categories): square renders with their own padding and contact shadow fill the image box
   (object-fit: cover, as the original); the hover layer is a separate pre-tilted render. */
.ccard--render .ccard__img img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.ccard--menu .ccard__img img { width: 74%; height: 74%; max-width: none; max-height: none; object-fit: contain; margin-top: 8%; }
.ccard__head { position: absolute; top: 20px; left: 20px; right: 20px; z-index: 2; display: flex; align-items: flex-start; gap: 16px; }
.ccard__title { flex: 1; min-width: 0; color: var(--ink-2); transition: color var(--dur-card) var(--ease-card); }
.ccard__plus { color: #000; transition: transform var(--dur-card) var(--ease-card), color var(--dur-card) var(--ease-card); }
@media (hover: hover) {
  .ccard:hover { filter: brightness(1.02); }
  .ccard:hover .ccard__img--rest { opacity: 0; }
  .ccard:hover .ccard__img--hover { opacity: 1; transform: translateY(-50%) scale(1); }
  .ccard:hover .ccard__title { color: var(--ink); }
  .ccard:hover .ccard__plus { color: var(--accent); transform: rotate(90deg); }
}

/* Spin cards (a product render with a turntable): one image layer that turns on hover; no tilt/cross-fade layer.
   The render's own framing (vial + contact shadow ≈ 89% of the square) sets the size via --ccard-spin. */
.ccard--spin { --spin-bg: var(--card); }
.ccard--spin .ccard__spin { flex: none; width: var(--ccard-spin, 74%); aspect-ratio: 1; }
.ccard--spin .ccard__img img { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; }
.ccard--menu.ccard--spin { --ccard-spin: 86%; }
.ccard--menu.ccard--spin .ccard__spin { margin-top: 12%; }
.ccard.ccard--spin:hover .ccard__img--rest, .ccard.ccard--spin.is-inview .ccard__img--rest { opacity: 1; }

/* ---------- Product card (shop grid, "You may also like") ------------------ */
/* Hover (fine pointers): the vial turns (spin hook) while the card lifts 4px onto white with a hairline and a soft
   shadow, name/sizes go to ink and a 40px ↗ chip slides into the top-right corner with a violet arrow. Nothing covers
   the vial. The still/turntable multiply onto --spin-bg, which follows the card colour with the same transition. */
.pcard {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 40px;
  background: var(--fill); border-radius: 24px; overflow: clip; color: var(--ink-2);
  transition: background-color .5s var(--ease-btn), box-shadow .5s var(--ease-btn), transform .5s var(--ease-btn);
}
.pcard::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .5s var(--ease-btn);
}
.pcard__visual { position: relative; width: 100%; aspect-ratio: 1; border-radius: 24px; overflow: hidden; }
.pcard__pad { position: absolute; inset: 0; padding: 24px; display: flex; }
.pcard__fig { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.pcard__spin { width: calc(var(--s, 1) * 100%); aspect-ratio: 1; --spin-bg: var(--fill); transition: background-color .5s var(--ease-btn), box-shadow .5s var(--ease-btn); }
.pcard__img { width: 100%; height: 100%; }
.pcard__hover {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; padding: 12px;
  display: flex; align-items: flex-start; justify-content: flex-end;
  opacity: 0; transition: opacity .4s var(--ease-btn);
}
.pcard__circle {
  width: 40px; height: 40px; border-radius: 40px; background: var(--white); color: var(--ink);
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--glass-border);
  transform: translate(-6px, 6px); transition: transform .5s var(--ease-btn), color .4s var(--ease-btn);
}
.pcard__circle svg { width: 20px; height: 20px; }
.pcard__texts { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.pcard__name-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.pcard__name, .pcard__price { color: var(--ink-2); transition: color .4s var(--ease-btn); }
.pcard__paren { color: var(--ink-2); }
@media (hover: hover) and (min-width: 810px) {
  .pcard:not(.pcard--similar):is(:hover, :focus-visible) { background: var(--white); transform: translateY(-4px); box-shadow: 0 28px 48px -30px rgba(52, 30, 160, .32); }
  .pcard:not(.pcard--similar):is(:hover, :focus-visible)::after { box-shadow: inset 0 0 0 1px var(--accent-rule); }
  .pcard:not(.pcard--similar):is(:hover, :focus-visible) .pcard__spin { --spin-bg: var(--white); }
  .pcard:not(.pcard--similar):is(:hover, :focus-visible) .pcard__hover { opacity: 1; }
  .pcard:not(.pcard--similar):is(:hover, :focus-visible) .pcard__circle { transform: none; }
  .pcard:not(.pcard--similar):is(:hover, :focus-visible) :is(.pcard__name, .pcard__price) { color: var(--ink); }
}
@media (hover: hover) and (min-width: 1200px) {
  .pcard--similar:is(:hover, :focus-visible) { background: var(--white); transform: translateY(-4px); box-shadow: 0 28px 48px -30px rgba(52, 30, 160, .32); }
  .pcard--similar:is(:hover, :focus-visible)::after { box-shadow: inset 0 0 0 1px var(--accent-rule); }
  .pcard--similar:is(:hover, :focus-visible) .pcard__spin { --spin-bg: var(--white); }
  .pcard--similar:is(:hover, :focus-visible) .pcard__hover { opacity: 1; }
  .pcard--similar:is(:hover, :focus-visible) .pcard__circle { transform: none; }
  .pcard--similar:is(:hover, :focus-visible) :is(.pcard__name, .pcard__price) { color: var(--ink); }
}
/* Below the hover breakpoints the chip is the "Mobile" variant: always visible, 4px from the corner (as the original).
   On hover-capable tablets the vial still turns and the card still lifts. */
@media (max-width: 1199.98px) {
  .pcard--similar .pcard__hover { opacity: 1; padding: 4px; }
  .pcard--similar .pcard__circle { transform: none; }
  .pcard--similar .pcard__name-row { flex-direction: column; align-items: flex-start; } /* paren drops under the name */
}
@media (max-width: 809.98px) {
  .pcard .pcard__hover { opacity: 1; padding: 4px; }
  .pcard .pcard__circle { transform: none; }
  .pcard .pcard__name-row { flex-direction: column; align-items: flex-start; }
}
@media (hover: hover) and (max-width: 1199.98px) {
  .pcard--similar:hover { background: var(--white); transform: translateY(-4px); box-shadow: 0 28px 48px -30px rgba(52, 30, 160, .32); }
  .pcard--similar:hover::after { box-shadow: inset 0 0 0 1px var(--accent-rule); }
  .pcard--similar:hover .pcard__spin { --spin-bg: var(--white); }
  .pcard--similar:hover .pcard__circle { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard:hover, .pcard:focus-visible { transform: none !important; }
}

/* ---------- Product row + rows section ------------------------------------ */
.prow { position: relative; display: block; color: var(--ink); }
.prow::after { content: ""; display: block; height: 1px; background: var(--line); }
.prow__inner { display: flex; align-items: center; justify-content: space-between; height: 108px; padding: 24px 12px; }
.prow__badge { flex: .5 0 0; min-width: 0; overflow: clip; transition: opacity .5s var(--ease-btn); }
.prow__main { flex: 1 0 0; min-width: 0; display: flex; align-items: center; }
.prow__work { position: relative; flex: 1 0 0; min-width: 0; height: 60px; overflow: clip; display: flex; align-items: center; }
.prow__in {
  position: absolute; left: -70px; top: 6px; width: 48px; height: 48px; border-radius: 8px;
  display: grid; place-items: center; transition: transform .5s var(--ease-btn);
}
.prow__shift { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; transition: transform .5s var(--ease-btn); }
.prow__thumb { flex: none; width: 60px; height: 60px; border-radius: 12px; object-fit: contain; }
.prow__titles { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; }
.prow__name { color: var(--ink); }
.prow__paren { color: var(--ink-2); }
.prow__out { flex: .2 0 0; display: flex; justify-content: flex-end; padding-right: 24px; overflow: clip; }
.prow__out-box { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; transition: transform .5s var(--ease-btn); }

/* Desktop variant hover (≥1440, or ≥810 for the product page rows) */
@media (hover: hover) and (min-width: 1440px) {
  .prow:hover .prow__badge { opacity: .3; }
  .prow:hover .prow__in { transform: translateX(70px); }
  .prow:hover .prow__shift { transform: translateX(56px); }
  .prow:hover .prow__out-box { transform: translateX(62px); }
}
@media (hover: hover) and (min-width: 810px) and (max-width: 1439.98px) {
  .prow--bp1200:hover .prow__badge { opacity: .3; }
  .prow--bp1200:hover .prow__in { transform: translateX(70px); }
  .prow--bp1200:hover .prow__shift { transform: translateX(56px); }
  .prow--bp1200:hover .prow__out-box { transform: translateX(62px); }
}
/* "Mobile" variant: no pill, 16px title, arrow in a 72px column, no hover. */
@media (max-width: 1439.98px) {
  .prow:not(.prow--bp1200) .prow__badge, .prow:not(.prow--bp1200) .prow__in { display: none; }
  .prow:not(.prow--bp1200) .prow__name { font-size: 16px; }
  .prow:not(.prow--bp1200) .prow__out { flex: 0 0 72px; padding-right: 0; justify-content: flex-start; }
}
@media (max-width: 809.98px) {
  .prow--bp1200 .prow__badge, .prow--bp1200 .prow__in { display: none; }
  .prow--bp1200 .prow__name { font-size: 16px; }
  .prow--bp1200 .prow__out { flex: 0 0 72px; padding-right: 0; justify-content: flex-start; }
}

/* (the home "Featured products" variant and the optional head link were removed with those rows, 14 Oct 2026) */
.rows { display: flex; flex-direction: column; }
.rows__wrap { display: flex; align-items: flex-start; gap: 16px; }
.rows__head { flex: 1 0 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.rows__list { flex: 2 0 0; min-width: 0; }
@media (max-width: 1199.98px) {
  .rows--product .rows__wrap { gap: 45px; }
}
@media (max-width: 809.98px) {
  .rows__wrap, .rows--product .rows__wrap { flex-direction: column; gap: 35px; }
  .rows__head, .rows__list { flex: none; width: 100%; }
  .rows__head { justify-content: flex-start; gap: 35px; }
  .rows--additionals .rows__wrap { gap: 16px; }
  .rows--additionals .rows__head { justify-content: center; gap: 0; }
}

/* ---------- FAQ ----------------------------------------------------------- */
.faq { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.faq__list { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.faq--split { flex-direction: row; align-items: flex-start; gap: 200px; }
.faq--split .faq__head { flex: none; width: 320px; }
.faq--split .faq__list { flex: 1; min-width: 0; }

.faq-item {
  position: relative; padding: 24px; border-radius: 12px; overflow: hidden;
  background: var(--fill); transition: background-color .8s var(--ease-out);
}
.faq-item__head { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--ink); text-align: left; }
.faq-item__head::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is the hit area */
.faq-item__head:focus-visible { outline: none; }
.faq-item:has(.faq-item__head:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq-item__text { flex: 1; min-width: 0; }
.faq-item__chev { color: #000; }
.faq-item__chev--up, .faq-item.is-open .faq-item__chev--down { display: none; }
.faq-item.is-open .faq-item__chev--up { display: block; }
.faq-item__panel { height: 0; overflow: hidden; }
.faq-item.is-open .faq-item__panel { height: auto; }
.faq-item__a {
  max-width: 98%; padding-top: 24px; color: var(--ink-2);
  /* closed, the original parks the answer at bottom:-138px of the item, i.e. (138px − its height) below its open
     position; the box includes the 24px padding-top, hence 162px − 100% */
  opacity: 0; transform: translateY(calc(162px - 100%));
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.faq-item.is-open .faq-item__a { opacity: 1; transform: none; }
@media (hover: hover) {
  .faq-item:not(.is-open):hover { background: var(--fill-hover); } /* the open variant has no hover state */
}
/* centre variant lives on 1440-breakpoint pages (home, shop); split on contact (1200) */
@media (max-width: 1439.98px) {
  .faq--center { gap: 45px; }
}
@media (max-width: 1199.98px) {
  .faq--split { flex-direction: column; gap: 45px; }
}
@media (max-width: 809.98px) {
  .faq--center { gap: 35px; }
  .faq--split { gap: 40px; }
  .faq--split .faq__head { width: 100%; max-width: none; }
}

/* ---------- CTA (inside the footer) --------------------------------------- */
.cta {
  position: relative; width: 100%; padding: 90px 0; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* pale underlay while the scene's poster loads (the original uses #000, which flashes a black card on first paint).
   Background: the ink-bloom scene (render/scenes4, 15 Oct 2026; replaced light-spectrum, which had replaced the
   petri-dish photograph). Violet ink blooms only at the edges round a near-white, text-safe centre, so the crop is
   centred and the card sits on the white; the pause button sits bottom-right, clear of the card. */
.cta__bg { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: var(--card); }
.cta__scene .scene__img, .cta__scene .scene__video { object-position: 50% 50%; }
.cta__inner { position: relative; z-index: 1; width: 90%; display: flex; justify-content: center; }
/* Frosted card: the original's near-invisible glass (10% white, 6px blur, 1px #EAEDF6 border) — the photo keeps the
   middle of the dish white, so the copy reads without a denser fill. */
.cta__glass {
  position: relative; width: 100%; max-width: 600px; padding: 24px; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cta__glass::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--glass-border); border-radius: inherit; pointer-events: none; }
.cta__title { width: 100%; text-wrap: balance; }
.cta__text { width: 100%; max-width: 500px; text-wrap: balance; }
@media (max-width: 1199.98px) {
  .cta { padding: 70px 0; }
  .cta__glass { max-width: 320px; padding: 80px 24px; }
  .cta__btn { flex: none; max-width: none; } /* 300px button overhangs the 272px column, as in the original */
}
@media (max-width: 809.98px) {
  .cta { padding: 60px 0; }
  .cta__glass { max-width: none; padding: 60px 24px; }
  .cta__btn { width: 100%; }
}

/* ---------- Footer -------------------------------------------------------- */
.site-footer { position: relative; z-index: 5; background: var(--white); overflow: hidden; }
.footer__inner {
  max-width: var(--max); margin-inline: auto; padding: 56px 39px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 56px;
}
.footer__bottom { width: 100%; padding-top: 24px; display: flex; flex-direction: column; gap: 30px; }
/* Footer without the CTA card (layout({ cta:false }), the checkout page): a hairline opens it instead. */
.site-footer--plain .footer__bottom { padding-top: 40px; border-top: 1px solid var(--glass-border); }
.footer__menus { display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); }
.footer__contact { max-width: 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer__socials { display: flex; gap: 10px; }
.footer__social { display: block; width: 24px; height: 24px; color: var(--ink); transition: opacity var(--dur-spring) var(--ease-spring); }
.footer__email { color: var(--ink); }
.footer__col { justify-self: end; }
.footer__col ul { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer__link { display: block; color: var(--ink); white-space: nowrap; }
.footer__link[aria-current="page"] { text-decoration: underline; }
@media (hover: hover) {
  .footer__social:hover { opacity: .5; }
  .footer__link:hover, .footer__email:hover { color: var(--ink-2); text-decoration: underline; }
}
/* Research-use-only notice: a hairline-ruled closing row under the menus, on every page. */
.footer__ruo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  padding-top: 20px; border-top: 1px solid var(--glass-border); color: var(--ink-2);
}
.footer__ruo-text { max-width: 720px; }
.footer__ruo-label { font-weight: 600; color: var(--ink); }
.footer__copy { flex: none; white-space: nowrap; }
@media (max-width: 809.98px) {
  .footer__ruo { flex-direction: column; gap: 12px; }
}
@media (max-width: 809.98px) {
  .footer__inner { padding: 56px 20px 30px; }
  .footer__menus { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
  .footer__col { justify-self: auto; }
  .footer__pages { order: 0; }
  .footer__legal { order: 1; }
  .footer__contact { order: 2; }
}

/* ---------- Search overlay (html.search-open) ------------------------------
   The engine fades the backdrop in (spring k500 c60) and pops the box .95 → 1 (spring k600 c40); closing is instant. */
.search { position: fixed; inset: 0; z-index: 10; display: none; justify-content: center; align-items: flex-start; }
html.search-open .search { display: flex; }
.search__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .8); }
.search__col { position: relative; width: 500px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.search__spacer { flex: none; height: 20vh; }
.search__modal {
  width: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border-radius: 16px; box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .2);

}
.search__bar { flex: none; height: 56px; padding: 12px 20px; display: flex; align-items: center; gap: 12px; }
.search__icon { color: rgba(0, 0, 0, .45); }
.search__input {
  flex: 1; min-width: 0; height: 32px; padding: 0; border: 0; background: none; outline: none; appearance: none;
  font-family: var(--font-inter); font-variation-settings: "opsz" 14; font-weight: 500; font-size: 16px; line-height: 32px;
  color: #333; caret-color: #333;
}
.search__input::placeholder { color: rgba(0, 0, 0, .4); opacity: 1; }
.search__input::-webkit-search-cancel-button, .search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search__clear { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: rgba(0, 0, 0, .45); }
.search__input:placeholder-shown + .search__clear { display: none; }
.search__results { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid rgba(51, 51, 51, .05); }
.search__results, .search__results > ul { display: flex; flex-direction: column; gap: 1px; margin: 0; padding-left: 0; list-style: none; }
.search__results:empty { display: none; }
.search__result { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; cursor: pointer; color: #333; }
.search__result::before { content: ""; position: absolute; inset: 0; background: #333; opacity: 0; }
.search__result.is-active::before { opacity: .06; }
.search__title, .search__path { position: relative; font-family: var(--font-inter); font-variation-settings: "opsz" 14; font-weight: 500; line-height: 1.4; }
.search__title { font-size: 14px; color: #333; }
.search__path { font-size: 12px; color: rgba(0, 0, 0, .4); }
.search__empty {
  margin: 0; padding: 11px 20px 12px; text-align: center; color: rgba(0, 0, 0, .4); /* 55 + the 1px divider = the reference 56 */
  font-family: var(--font-inter); font-variation-settings: "opsz" 14; font-weight: 500; font-size: 14px; line-height: 32px;
}
/* Narrow phones: full-bleed top sheet */
@media (max-width: 509.98px) {
  .search__col { width: 100%; }
  .search__spacer { display: none; }
  .search__modal { border-radius: 0; max-height: 80vh; }
  .search__results { max-height: calc(80vh - 57px); }
}

/* ---------- Blur bands per breakpoint ------------------------------------ */
@media (max-width: 1199.98px) {
  .gblur { height: 80px; }
}
@media (max-width: 809.98px) {
  .gblur { height: 70px; }
}

/* ==========================================================================
   Accent details (#4D1DFA as one token, --accent) + legibility fixes.
   Appended as one block so the component rules above stay as built; each rule only recolours or adds a hairline.
   ========================================================================== */

/* Category cards / product cards / rows: the arrow that answers the hover is the one violet thing in it. */
.pcard__circle { transition: transform .5s var(--ease-btn), color .4s var(--ease-btn); }
.prow__in { transition: transform .5s var(--ease-btn), color .5s var(--ease-btn); }
@media (hover: hover) and (min-width: 810px) {
  .pcard:not(.pcard--similar):hover .pcard__circle { color: var(--accent); }
  .prow:hover .prow__in { color: var(--accent); }
}
@media (hover: hover) and (min-width: 1200px) {
  .pcard--similar:hover .pcard__circle { color: var(--accent); }
}
.ccard:focus-visible .ccard__plus { color: var(--accent); transform: rotate(90deg); }

/* FAQ: the open item's chevron is violet (shape still changes ⌄ → ⌃, so state is not colour-only). */
.faq-item.is-open .faq-item__chev { color: var(--accent); }

/* CTA glass: the hairline picks up a faint violet tint. */
.cta__glass::after { border-color: var(--accent-line); }

/* Footer: hover/current underlines in violet; a short violet tick opens the research-use-only rule. */
@media (hover: hover) {
  .footer__link:hover, .footer__email:hover { text-decoration-color: var(--accent); }
}
.footer__link[aria-current="page"] { text-decoration-color: var(--accent); }
.footer__ruo { position: relative; }
.footer__ruo::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 1px; background: var(--accent); }

/* ---------- Violet pass: footer, rows, FAQ, search ------------------------- */
/* Footer: the violet brand mark heads the contact column; links and e-mail turn violet on hover (7.3:1); the
   research-use-only rule is a violet hairline with its solid 40px tick; its label is violet. */
.footer__contact::before {
  content: ""; display: block; width: 33px; height: 31px; margin-bottom: 14px; background: var(--accent);
  -webkit-mask: var(--mark-mask) center / contain no-repeat; mask: var(--mark-mask) center / contain no-repeat;
}
.footer__link, .footer__email { transition: color .3s var(--ease-btn); }
.footer__social { transition: color .3s var(--ease-btn); }
@media (hover: hover) {
  .footer__link:hover, .footer__email:hover { color: var(--accent); }
  .footer__social:hover { opacity: 1; color: var(--accent); }
}
.footer__ruo { border-top-color: var(--accent-line); }
.footer__ruo-label { color: var(--accent); }

/* Product rows: a violet rule draws across the row's divider on hover, and both arrows answer in violet. */
.prow::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-btn);
}
.prow__out-box { transition: transform .5s var(--ease-btn), color .5s var(--ease-btn); }
@media (hover: hover) {
  .prow:hover::before { transform: scaleX(1); }
  .prow:hover .prow__out-box { color: var(--accent); }
}
.prow:focus-visible::before { transform: scaleX(1); }

/* FAQ: the closed cards warm to a faint violet wash on hover (was a grey step). */
@media (hover: hover) {
  .faq-item:not(.is-open):hover { background: var(--accent-tint); }
}

/* Search: the active row's title reads in violet on its wash (6.4:1). */
.search__result.is-active .search__title { color: var(--accent); }

/* Search: readable meta text (paths, placeholder and "No results" were 2.85:1 at 12–16px), violet-washed active row. */
.search__input::placeholder { color: var(--ink-3); }
.search__path, .search__empty { color: var(--ink-3); }
.search__icon, .search__clear { color: var(--ink-3); }
.search__result::before { background: var(--accent-soft); }
.search__result.is-active::before { opacity: 1; }
.search__result:focus-visible { outline-offset: -2px; border-radius: 0; }

/* ---------- Forms: inline validation + status (engine: widgets.js bindForms) ----------
   Error text sits under its field, linked by aria-describedby; the field's own 1px border turns red. One status line
   under the form explains what happened (mail app opened / sent / could not send). */
.form-error {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--danger);
  font: 400 14px/1.35 var(--font-inter); font-variation-settings: "opsz" 14;
}
.form-error::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 1.5px; border-radius: 50%;
  background: var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.6v4.2' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.2' r='.95' fill='%23fff'/%3E%3C/svg%3E") center / 14px no-repeat;
}
[data-field]:has([aria-invalid="true"]) .cform__box::after,
[data-field]:has([aria-invalid="true"]) .af-field__box::after,
[data-field]:has([aria-invalid="true"]) .pdp-notify__box::after { border-color: var(--danger); }
[data-field]:has([aria-invalid="true"]) .af-check__box { border-color: var(--danger); }
.form-status {
  width: 100%; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--ink);
  font: 400 14px/1.45 var(--font-inter); font-variation-settings: "opsz" 14; text-wrap: pretty;
}
.form-status[data-tone="error"] { background: var(--danger-soft); color: var(--danger); }
.form-status[data-tone="success"] { background: var(--accent-soft); }

/* ==========================================================================
   Prices + email capture (14 Oct 2026). Partials: cards.js (cardMeta), rows.js (prow__price), capture.js
   (capture form, trust row, waitlist line, countdown, sticky bar). Behaviour: public/js/lib/capture.js.
   ========================================================================== */

/* ---------- Product card: sizes + price -----------------------------------
   Sizes on the left, the price on the right. Fine pointers with the card hover (grid >=810, similar >=1200): the price
   rises into place on hover / keyboard focus. Touch, phone and the "Mobile" variants: always visible. */
.pcard__meta { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.pcard__sizes { margin: 0; color: var(--ink-2); transition: color .4s var(--ease-btn); }
.pcard__meta .pcard__price {
  margin: 0; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; color: var(--ink);
  font-family: var(--font-nohemi-500); font-size: 20px; line-height: 32px; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.pcard__from { font-size: 14px; letter-spacing: .02em; color: var(--ink-2); }
.pcard__meta .pcard__price.is-tbc { font-size: 14px; color: var(--ink-3); letter-spacing: .02em; }
@media (hover: hover) and (pointer: fine) and (min-width: 810px) {
  .pcard:not(.pcard--similar) .pcard__meta .pcard__price { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-btn), transform .55s var(--ease-out); }
  .pcard:not(.pcard--similar):is(:hover, :focus-visible) .pcard__meta .pcard__price { opacity: 1; transform: none; transition-delay: .06s; }
  .pcard:not(.pcard--similar):is(:hover, :focus-visible) .pcard__sizes { color: var(--ink); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
  .pcard--similar .pcard__meta .pcard__price { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-btn), transform .55s var(--ease-out); }
  .pcard--similar:is(:hover, :focus-visible) .pcard__meta .pcard__price { opacity: 1; transform: none; transition-delay: .06s; }
  .pcard--similar:is(:hover, :focus-visible) .pcard__sizes { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .pcard .pcard__meta .pcard__price { transform: none !important; }
}

/* ---------- Product row price ("From £21.99" / "Price TBC") ---------- */
.prow__price {
  flex: none; margin: 0 20px 0 12px; white-space: nowrap; color: var(--ink);
  font-family: var(--font-nohemi-500); font-size: 16px; line-height: 1.3; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.prow__price { min-width: 7.5em; text-align: right; } /* one right edge for "From £21.99" and "Price TBC" */
.prow__price--inline { display: none; }
@media (max-width: 809.98px) {
  .prow__price--side { display: none; }
  .prow .prow__titles .prow__price.prow__price--inline { display: block; min-width: 0; margin: 3px 0 0; text-align: left; font-size: 14px; }
  .prow__work { height: auto; min-height: 60px; }
}
.prow__price.is-tbc { font-size: 14px; color: var(--ink-3); }
@media (max-width: 1439.98px) {
  .prow:not(.prow--bp1200) .prow__price { margin: 0 12px 0 8px; font-size: 14px; }
}
@media (max-width: 809.98px) {
  .prow--bp1200 .prow__price { margin: 0 12px 0 8px; font-size: 14px; }
}

/* ---------- Inline email capture ------------------------------------------ */
.capture { width: 100%; max-width: 520px; }
.capture__form { display: flex; flex-direction: column; gap: 10px; }
.capture__field { display: flex; flex-direction: column; gap: 8px; }
.capture__control {
  position: relative; display: flex; align-items: center; gap: 6px; height: 60px; padding: 6px; border-radius: 100px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--accent-field);
  transition: box-shadow .3s var(--ease-btn);
}
.capture__control:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
[data-field]:has([aria-invalid="true"]) > .capture__control { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 4px var(--danger-soft); }
.capture__input {
  flex: 1 0 0; min-width: 0; height: 100%; padding: 0 8px 0 20px; border: 0; border-radius: 100px; background: none;
  font: 400 16px/1.3 var(--font-nohemi-400); color: var(--ink);
}
.capture__input:focus { outline: none; }
.capture__input::placeholder { color: var(--ink-3); opacity: 1; }
.capture__btn {
  flex: none; position: relative; height: 48px; padding: 0 20px 0 24px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent); color: var(--white); font: 400 16px/1 var(--font-nohemi-400); white-space: nowrap;
  transition: background-color .3s var(--ease-btn), padding .4s var(--ease-btn);
}
.capture__btn-icon { display: grid; place-items: center; width: 22px; height: 22px; }
.capture__btn-icon svg { transform: rotate(45deg); transition: transform .4s var(--ease-btn); }
@media (hover: hover) {
  .capture__btn:not(.is-loading):hover { background: var(--accent-deep); padding: 0 16px 0 28px; }
}
.capture__btn:focus-visible { outline-offset: 2px; border-radius: 100px; }
.capture__btn.is-loading { cursor: progress; background: var(--accent-deep); }
.capture__btn.is-loading .capture__btn-icon svg { animation: capture-nudge .6s var(--ease-btn) infinite alternate; }
@keyframes capture-nudge { to { transform: rotate(45deg) translateY(-3px); } }
.capture__note { margin: 0; padding-left: 20px; color: var(--ink-2); max-width: 470px; text-wrap: pretty; }
/* "Privacy policy" after every capture note (hero, sticky bar, product notify). */
.privacy-link { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-field); text-underline-offset: 3px; transition: color .2s var(--ease-btn), text-decoration-color .2s var(--ease-btn); }
@media (hover: hover) { .privacy-link:hover { color: var(--ink); text-decoration-color: var(--accent); } }
.privacy-link:focus-visible { color: var(--ink); text-decoration-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.capture__status { margin: 0; padding-left: 20px; color: var(--danger); }
.capture__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.capture .form-error { padding-left: 20px; }
.capture__done {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 22px 10px 12px; border-radius: 30px;
  background: var(--accent-soft); color: var(--ink); outline: none;
  animation: capture-in .5s var(--ease-out) both;
}
.capture__done:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
@keyframes capture-in { from { opacity: 0; transform: translateY(6px); } }
.capture__tick { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--white); }
.capture__done-copy { font: 400 15px/1.35 var(--font-nohemi-400); color: var(--ink-2); }
.capture__done-title { font-family: var(--font-nohemi-500); color: var(--ink); }
@media (max-width: 809.98px) {
  .capture--hero .capture__control { flex-direction: column; align-items: stretch; height: auto; gap: 8px; padding: 0; background: none; box-shadow: none; }
  .capture--hero .capture__control:focus-within, .capture--hero [data-field]:has([aria-invalid="true"]) > .capture__control { box-shadow: none; }
  .capture--hero .capture__input { flex: none; height: 54px; background: var(--white); box-shadow: inset 0 0 0 1px var(--accent-field); transition: box-shadow .3s var(--ease-btn); }
  .capture--hero .capture__input:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
  .capture--hero .capture__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 4px var(--danger-soft); }
  .capture--hero .capture__btn { height: 54px; justify-content: space-between; padding: 0 22px 0 26px; }
  .capture__note, .capture__status, .capture .form-error { padding-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .capture__done { animation: none; }
  .capture__btn.is-loading .capture__btn-icon svg { animation: none; }
}

/* ---------- Trust row / waitlist / countdown ---------- */
.trust { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; margin: 0; padding: 0; list-style: none; } /* 2 × 2: never a lone badge */
.trust__item { justify-self: start; }
.trust__item {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px 0 10px; border-radius: 100px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--accent-line); color: var(--ink);
  font: 400 13px/1 var(--font-nohemi-500); letter-spacing: .02em; white-space: nowrap;
}
.trust__icon { flex: none; color: var(--accent); }
.waitlist, .countdown { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 400 14px/1.3 var(--font-inter); font-variation-settings: "opsz" 14; color: var(--ink-2); }
.waitlist[hidden] { display: none; }
.waitlist::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.countdown__value { font-family: "Fragment Mono", ui-monospace, monospace; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Sticky capture bar -------------------------------------------
   Floating glass bar at the foot of the screen. Slides up once the hero is gone; steps aside for the menu, search and
   any other form in view; dismissible for the visit. Phone: one slim row ("Ordering opens soon" + Register) that
   expands into the form, and moves out of the way while the visitor scrolls down. CSS transitions only (time-based). */
.cbar {
  position: fixed; z-index: 8; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(820px, calc(100% - 32px)); margin-inline: auto;
  opacity: 0; visibility: hidden; transform: translateY(calc(100% + 32px));
  transition: transform .55s var(--ease-out), opacity .35s var(--ease-btn), visibility 0s linear .55s;
}
.cbar.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html.menu-open .cbar, html.search-open .cbar { opacity: 0; visibility: hidden; transform: translateY(calc(100% + 32px)); transition-delay: 0s, 0s, .55s; }
.cbar__inner {
  display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 22px; border-radius: 32px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 0 0 1px var(--accent-line), 0 24px 48px -24px rgba(52, 30, 160, .35), 0 2px 8px rgba(18, 18, 18, .06);
}
.cbar__intro { flex: none; display: flex; align-items: center; gap: 12px; }
.cbar__dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cbar__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; animation: cbar-pulse 2.4s var(--ease-out) infinite; }
@keyframes cbar-pulse { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
.cbar__title { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.cbar__label { font: 400 15px/1.2 var(--font-nohemi-500); color: var(--ink); white-space: nowrap; }
.cbar__sub { font: 400 12px/1.3 var(--font-inter); font-variation-settings: "opsz" 14; color: var(--ink-2); white-space: nowrap; }
.cbar__panel { flex: 1 0 0; min-width: 0; }
.cbar__open, .cbar__ruo { display: none; }
.cbar .capture { max-width: none; }
.cbar .capture__control { height: 52px; padding: 4px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--accent-field); }
.cbar .capture__control:focus-within { background: var(--white); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft); }
.cbar .capture__input { padding-left: 16px; font-size: 15px; }
.cbar .capture__btn { height: 44px; font-size: 15px; }
.cbar .capture__status, .cbar .form-error { padding-left: 16px; }
.cbar .capture__done { min-height: 52px; border-radius: 26px; padding-block: 6px; }
.cbar .capture__tick { width: 32px; height: 32px; }
.cbar__close {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2);
  transition: background-color .3s var(--ease-btn), color .3s var(--ease-btn);
}
@media (hover: hover) { .cbar__close:hover { background: var(--fill-hover); color: var(--ink); } }
.cbar__close:focus-visible { outline-offset: 0; border-radius: 50%; }
/* Room under the footer so the bar never sits on the page's last line (set while the bar can appear). */
html.cbar-eligible .footer__inner { padding-bottom: 112px; }
@media (max-width: 999.98px) {
  .cbar__sub-text { display: none; }
}
@media (max-width: 809.98px) {
  .cbar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 20px); transform: translateY(calc(100% + 24px)); }
  html.menu-open .cbar, html.search-open .cbar { transform: translateY(calc(100% + 24px)); }
  .cbar__inner { flex-wrap: wrap; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 24px; }
  .cbar__intro { flex: 1 0 0; min-width: 0; }
  .cbar__label { font-size: 14px; }
  .cbar__sub { display: none; }
  .cbar__open {
    display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px 0 18px; border-radius: 100px;
    background: var(--accent); color: var(--white); font: 400 15px/1 var(--font-nohemi-400);
  }
  .cbar__open-icon { transition: transform .4s var(--ease-btn); }
  .cbar.is-expanded .cbar__open { background: var(--fill); color: var(--ink); }
  .cbar.is-expanded .cbar__open-icon { transform: rotate(180deg); }
  .cbar__panel { display: none; order: 3; flex: 0 0 100%; flex-direction: column; gap: 10px; padding: 4px 10px 6px 0; }
  .cbar.is-expanded .cbar__panel { display: flex; }
  .cbar__ruo { display: block; margin: 0; padding: 0 4px; color: var(--ink-2); }
  .cbar .capture__control { flex-direction: column; align-items: stretch; height: auto; gap: 8px; padding: 0; background: none; box-shadow: none; }
  .cbar .capture__control:focus-within, .cbar [data-field]:has([aria-invalid="true"]) > .capture__control { background: none; box-shadow: none; }
  .cbar .capture__input { flex: none; height: 50px; background: var(--white); box-shadow: inset 0 0 0 1px var(--accent-field); }
  .cbar .capture__input:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft); }
  .cbar .capture__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 3px var(--danger-soft); }
  .cbar .capture__btn { height: 50px; justify-content: space-between; padding: 0 20px 0 24px; }
  .cbar .capture__status, .cbar .form-error { padding-left: 4px; }
  html.cbar-eligible .footer__inner { padding-bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .cbar, html.menu-open .cbar, html.search-open .cbar { transform: none; transition: opacity .2s linear, visibility 0s linear .2s; }
  .cbar.is-shown { transform: none; transition-delay: 0s; }
  .cbar__dot::after { animation: none; }
}

/* ---------- Animated scene (sceneVideo(), src/partials/scene.js; behaviour public/js/lib/scene.js) ----------
   Fills its parent: size the parent (or .scene itself) in page CSS. Poster and video both cover the box, so nothing
   moves when the video takes over; the video stays transparent until its first frame is painted (.is-shown). */
.scene { position: relative; overflow: hidden; isolation: isolate; width: 100%; height: 100%; }
.scene__poster, .scene__img, .scene__video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block;
}
.scene__img { user-select: none; -webkit-user-drag: none; }
.scene__video { z-index: 1; opacity: 0; transition: opacity .6s var(--ease-out); pointer-events: none; }
.scene.is-shown .scene__video { opacity: 1; }
.scene__toggle {
  position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 36px; height: 36px; border-radius: 100px;
  display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 1px 2px rgba(18, 18, 18, .06);
  opacity: .72; transition: opacity .3s var(--ease-btn), background-color .3s var(--ease-btn);
}
.scene__toggle:hover, .scene__toggle:focus-visible { opacity: 1; background: rgba(255, 255, 255, .85); }
.scene__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scene__toggle--dark, .scene--dark .scene__toggle {
  color: var(--white); background: rgba(18, 18, 18, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.scene--dark .scene__toggle:hover, .scene--dark .scene__toggle:focus-visible { background: rgba(18, 18, 18, .6); }
.scene__icon { display: none; line-height: 0; }
.scene__toggle[data-state="pause"] .scene__icon--pause,
.scene__toggle[data-state="play"] .scene__icon--play,
.scene__toggle[data-state="replay"] .scene__icon--replay { display: block; }
.scene__icon--play .icon { transform: translateX(1px); }
@media (prefers-reduced-motion: reduce) { .scene__video { transition: none; } }

/* ---------- Basket (site.commerce, 15 Oct 2026) ----------------------------
   Header button: desktop beside search (.basket-btn--bar inside .hdr__icons); tablet / phone its own copy beside the
   burger (.basket-btn--compact), so the basket is in the closed bar and stays in the open full-black menu. The count is
   a violet chip with a ring in the surface colour; it bumps when items are added.
   Drawer (partials/basket.js, lib/basket.js): a white panel floating 12 px in from the right edge, sliding in on the
   menu's own curve (.4s --ease-menu) over a soft ink veil; a violet hairline fades out under its head, as under the
   open menu's top bar. Lines: the vial render multiplied onto a --fill tile, name + size chip, price each, a compact
   stepper, Remove, line total. Renders need a light surface, so the drawer is white even beside the black menu. */
.basket-btn {
  position: relative; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  color: inherit; transition: color .3s var(--ease-btn);
}
.basket-btn__icon { width: 24px; height: 24px; }
.basket-btn--compact { display: none; }
.basket-btn__count {
  position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 20px;
  display: grid; place-items: center; background: var(--accent); color: var(--white);
  font: 600 10px/1 var(--font-inter); font-variation-settings: "opsz" 14; font-variant-numeric: tabular-nums; letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--white); pointer-events: none;
  transition: background-color .3s var(--ease-btn), color .3s var(--ease-btn), box-shadow .3s var(--ease-btn);
}
.basket-btn__count.is-bump { animation: basket-bump .5s var(--ease-out); }
@keyframes basket-bump { 0% { transform: scale(1); } 30% { transform: scale(1.32); } 100% { transform: scale(1); } }
@media (hover: hover) { .basket-btn:hover { color: var(--accent); } }
html.menu-open .hdr .basket-btn { color: var(--white); }
html.menu-open .hdr .basket-btn__count { background: var(--accent-bright); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
@media (hover: hover) { html.menu-open .hdr .basket-btn:hover { color: var(--accent-bright); } }
@media (max-width: 1199.98px) {
  .basket-btn--compact { display: grid; margin-right: -10px; } /* 22 px to the burger instead of the bar's 32 */
}

html.basket-open { scrollbar-color: #8f7df0 var(--white); }
.basket { position: fixed; inset: 0; z-index: 12; visibility: hidden; transition: visibility 0s linear .4s; }
html.basket-open .basket { visibility: visible; transition-delay: 0s; }
.basket__backdrop {
  position: absolute; inset: 0; background: rgba(18, 18, 18, .36); opacity: 0;
  transition: opacity .4s var(--ease-menu);
}
html.basket-open .basket__backdrop { opacity: 1; }
.basket__panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(468px, calc(100vw - 24px));
  display: flex; flex-direction: column; overflow: hidden; outline: none;
  background: var(--white); border-radius: 24px;
  box-shadow: 0 40px 80px -32px rgba(18, 18, 18, .45), 0 12px 24px -16px rgba(58, 15, 224, .22);
  transform: translateX(calc(100% + 24px)); transition: transform .4s var(--ease-menu);
}
.basket__panel::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--glass-border); border-radius: inherit; pointer-events: none; }
html.basket-open .basket__panel { transform: none; }
/* the content follows the panel a beat later, as the menu body trails its clip */
.basket__head, .basket__body, .basket__foot { transition: opacity .3s var(--ease-btn) .12s, transform .45s var(--ease-menu) .08s; }
html:not(.basket-open) .basket__head, html:not(.basket-open) .basket__body, html:not(.basket-open) .basket__foot { opacity: 0; transform: translateX(24px); transition-delay: 0s; }

.basket__head { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 20px 20px 28px; }
.basket__head::after {
  content: ""; position: absolute; left: 28px; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, var(--accent) 0, rgba(77, 29, 250, .3) 120px, rgba(77, 29, 250, .08) 100%);
}
.basket__title { display: flex; align-items: baseline; gap: 12px; margin: 0; color: var(--ink); }
.basket__count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.basket__close {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fill); color: var(--ink); transition: background-color .3s var(--ease-btn), color .3s var(--ease-btn), transform .4s var(--ease-btn);
}
@media (hover: hover) { .basket__close:hover { background: var(--accent-soft); color: var(--accent); transform: rotate(90deg); } }

.basket__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px; scrollbar-width: thin; }
.basket__lines { margin: 0; }

/* One line (drawer variant; the checkout page re-lays the same markup: checkout.css) */
.bline { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 0 16px; align-items: start; padding: 18px 0; border-top: 1px solid #ebebeb; }
.bline:first-child { border-top: 0; }
.bline__thumb { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 16px; background: var(--fill); isolation: isolate; overflow: hidden; }
.bline__img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bline__info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding-top: 2px; }
.bline__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink); text-decoration: none; }
.bline__name-text { font-family: var(--font-nohemi-500); font-size: 18px; line-height: 1.3; letter-spacing: -.02em; font-feature-settings: var(--ff-nohemi, normal); }
.bline__size {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 30px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-nohemi-500); font-size: 12px; line-height: 1; letter-spacing: .04em;
}
@media (hover: hover) { .bline__name:hover .bline__name-text { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } }
.bline__meta { margin: 0; color: var(--ink-2); font-family: var(--font-nohemi-400); font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.bline__tag { margin: 2px 0 0; color: var(--danger); font-family: var(--font-nohemi-400); font-size: 13px; line-height: 1.4; }
.bline__controls { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.bline__total { margin: 2px 0 0; font-family: var(--font-nohemi-500); font-size: 16px; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bline__remove {
  color: var(--ink-2); font-family: var(--font-nohemi-400); font-size: 14px; line-height: 1;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
  transition: color .3s var(--ease-btn), text-decoration-color .3s var(--ease-btn);
}
@media (hover: hover) { .bline__remove:hover { color: var(--accent); text-decoration-color: var(--accent); } }

/* Compact stepper: 32 px pill, hairline drawn inside, tabular count */
.bqty { position: relative; display: flex; align-items: center; height: 32px; border-radius: 100px; }
.bqty::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--accent-field); border-radius: inherit; pointer-events: none; }
.bqty__btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); transition: color .3s var(--ease-btn), background-color .3s var(--ease-btn); }
.bqty__btn[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
@media (hover: hover) { .bqty__btn:not([aria-disabled="true"]):hover { color: var(--accent); background: var(--accent-tint); } }
.bqty__value { min-width: 24px; text-align: center; font-family: var(--font-nohemi-500); font-size: 15px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

.basket__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 8px 40px; }
.basket__empty-mark { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 8px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.basket__empty-title { margin: 0; color: var(--ink); }
.basket__empty-text { margin: 0 0 14px; max-width: 300px; color: var(--ink-2); }
.basket__empty-btn { width: auto; }

.basket__foot { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 20px 28px 24px; border-top: 1px solid #ebebeb; background: var(--white); }
.basket__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.basket__sum-label { color: var(--ink-2); }
.basket__sum-value { font-family: var(--font-nohemi-500); font-size: 26px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.basket__delivery { margin: -4px 0 4px; color: var(--ink-2); }
.basket__checkout { height: 54px; }
.basket__note { margin: 0; color: var(--ink-3); text-align: center; }

@media (max-width: 809.98px) {
  .basket__panel { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); border-radius: 20px; }
  .basket__head { padding: 16px 14px 16px 20px; }
  .basket__head::after { left: 20px; }
  .basket__body { padding: 0 20px; }
  .basket__foot { padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .bline { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 0 14px; }
}
/* Touch screens: the drawer's steppers grow to 44 px and Remove gets a 24 px+ tap height (padding, cancelled by a
   negative margin so the line keeps its layout). The /checkout steppers are 40 px already (checkout.css). */
@media (pointer: coarse) {
  .bline--drawer .bqty { height: 44px; }
  .bline--drawer .bqty__btn { width: 44px; height: 44px; }
  .bline--drawer .bline__remove { padding: 10px 6px; margin: -10px -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .basket, .basket__backdrop, .basket__panel, .basket__head, .basket__body, .basket__foot { transition-duration: 0s !important; transition-delay: 0s !important; }
  .basket__panel, html:not(.basket-open) .basket__head, html:not(.basket-open) .basket__body, html:not(.basket-open) .basket__foot { transform: none; }
  html:not(.basket-open) .basket__panel { opacity: 0; }
  .basket-btn__count.is-bump { animation: none; }
}