/* ==========================================================================
   Sardar S.H.M — interactive 3D product showcase
   Colours come from LOOK in js/data.js and are injected at runtime.
   ========================================================================== */

:root{
  --bg:#f6f1ea;
  --pool:#ffffff;
  --accent:#c8102e;
  --ink:#1c1917;
  --ink-2:rgba(28,25,23,.62);
  --ink-3:rgba(28,25,23,.38);
  --line:rgba(28,25,23,.12);
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(18px,3.4vw,52px);
  --head:clamp(64px,7vw,92px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--bg); -webkit-text-size-adjust:100%; scroll-behavior:auto; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.is-locked{ overflow:hidden; }

svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- backdrop ------------------------------------------------------ */

.backdrop{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:var(--bg); }

/*  EVERY LAYER IS FULL-BLEED, ON PURPOSE.
 *  A layer sized to part of the screen shows its own edge wherever its gradient
 *  has not already faded out by the time the box ends. The floor used to be
 *  `height:58%` with its colour at full strength on its top edge, which drew a
 *  hard line straight across the screen at the 42% mark. Sizing every layer to
 *  the whole viewport and letting the gradient stops do the shaping means there
 *  is no edge left to see.                                                    */

/* the cone of light the products stand in */
.backdrop__pool{
  position:absolute; inset:-12%;
  background:radial-gradient(ellipse 50% 44% at 50% 35%,
      color-mix(in srgb, var(--pool) 95%, transparent) 0%,
      color-mix(in srgb, var(--pool) 62%, transparent) 30%,
      color-mix(in srgb, var(--pool) 22%, transparent) 54%,
      transparent 78%);
  filter:blur(8px);
  animation:pool 19s var(--ease) infinite;
}
@keyframes pool{
  0%,100%{ transform:scale(1) translateY(0); opacity:.92; }
  50%    { transform:scale(1.045) translateY(1.2%); opacity:1; }
}

/* the ground the products float above: one continuous falloff, top to bottom,
   so it arrives without ever announcing where it began */
.backdrop__floor{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
      transparent 0%,
      transparent 44%,
      color-mix(in srgb, var(--ink) 1.5%, transparent) 64%,
      color-mix(in srgb, var(--ink) 4%,   transparent) 82%,
      color-mix(in srgb, var(--ink) 8%,   transparent) 100%);
}

/* corners sit back a little, so the middle of the room carries the eye */
.backdrop__vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 72% at 50% 42%,
      transparent 48%,
      color-mix(in srgb, var(--ink) 2%, transparent) 74%,
      color-mix(in srgb, var(--ink) 6%, transparent) 100%);
}

/* the room takes the colour of the drink in front of it — see LOOK.tint */
.backdrop__tint{
  position:absolute; inset:0; opacity:0;
  background:
    /* a pool of the product's colour behind it */
    radial-gradient(ellipse 56% 44% at 50% 32%,
      color-mix(in srgb, var(--c, transparent) 30%, transparent) 0%,
      color-mix(in srgb, var(--c, transparent) 11%, transparent) 44%,
      transparent 74%),
    /* and a wash rising off the floor it stands on */
    radial-gradient(ellipse 130% 54% at 50% 106%,
      color-mix(in srgb, var(--c, transparent) 24%, transparent) 0%,
      color-mix(in srgb, var(--c, transparent) 9%, transparent) 42%,
      transparent 78%);
  will-change:opacity;
}

.backdrop__grain{
  position:absolute; inset:-100px; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the shared 3D canvas ----------------------------------------- */

#stage{
  position:fixed; inset:0; z-index:1;
  width:100%; height:100%; display:block;
  touch-action:pan-y;
  cursor:grab;
}
#stage.is-grabbing{ cursor:grabbing; }
#stage.is-over{ cursor:pointer; }

/* ---------- a photographed variant, standing in for the 3D can ------------ */
/* Fixed like the canvas, and sized each frame from the 3D can's own projected
   bounding box, so it lands exactly where the can was rather than in a slot of
   its own. z-index 2 puts it over the canvas but under the copy. */
.detail__photo{
  position:fixed; z-index:2;
  left:0; top:0;              /* it is placed entirely by `transform` — see below */
  transform-origin:0 0;
  opacity:0; visibility:hidden;
  pointer-events:none;
  object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(28,25,23,.30));
  /* Promote it to its own layer. Position and size are driven by a transform
     rather than left/top/width/height: those are layout properties, and writing
     them every frame makes the browser re-lay-out and re-rasterise the image
     sixty times a second, which reads as the photo lagging behind. */
  will-change:transform;
  backface-visibility:hidden;
}
.detail__photo.is-on{ visibility:visible; }

/* ---------- header -------------------------------------------------------- */

.site-head{
  position:fixed; z-index:23; inset:0 0 auto 0;
  height:var(--head);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 var(--pad);
  pointer-events:none;
}
.site-head > *{ pointer-events:auto; }

.burger{
  justify-self:start;
  width:40px; height:40px; padding:9px 6px;
  display:grid; align-content:space-between;
  background:none; border:0; cursor:pointer;
}
.burger span{
  display:block; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .42s var(--ease), opacity .28s var(--ease), width .42s var(--ease);
}
.burger span:nth-child(1){ width:100%; }
.burger span:nth-child(2){ width:72%; }
.burger span:nth-child(3){ width:88%; }
.burger.is-open span:nth-child(1){ transform:translateY(9px) rotate(45deg); width:100%; }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); width:100%; }

/* while the category menu is open, only the close button stays on top */
body.menu-open .brand,
body.menu-open .cta{ opacity:0; pointer-events:none; }
.brand,.cta{ transition:opacity .38s var(--ease); }

.brand{ justify-self:center; display:block; line-height:0; }
.brand img{
  height:clamp(30px,3.1vw,42px); width:auto; display:block;
  transition:transform .5s var(--ease);
}
.brand:hover img{ transform:translateY(-1px) scale(1.02); }

.cta{
  justify-self:end;
  display:inline-flex; align-items:center; gap:10px;
  height:42px; padding:0 8px 0 18px;
  border:1px solid var(--line); border-radius:999px;
  font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:var(--ink); text-decoration:none;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.cta svg{ width:16px; height:16px; padding:7px; box-sizing:content-box; border-radius:50%;
          background:var(--accent); color:#fff; stroke-width:2.2; }
.cta:hover{ border-color:color-mix(in srgb, var(--accent) 40%, transparent); transform:translateY(-1px); }

/* ---------- category menu ------------------------------------------------- */

.menu{
  position:fixed; z-index:22; top:0; left:0; bottom:0;
  width:min(380px,86vw);
  padding:calc(var(--head) + 8px) clamp(22px,3vw,42px) 32px;
  background:color-mix(in srgb, var(--bg) 92%, #fff);
  border-right:1px solid var(--line);
  transform:translateX(-101%);
  transition:transform .62s var(--ease);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.menu.is-open{ transform:none; }

/* The four things the menu offers, all the same weight: Products (which opens
   into the brands) and the three pages. */
.menu__link,
.menu__nav button{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:11px 0; font:inherit;
  font-size:clamp(17px,2vw,21px); font-weight:600; letter-spacing:-.015em;
  color:var(--ink); opacity:.6;
  display:flex; align-items:center; gap:10px;
  transition:opacity .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
}
.menu__link:hover,
.menu__nav button:hover{ opacity:1; transform:translateX(5px); color:var(--accent); }

.menu__chev{
  width:17px; height:17px; margin-left:auto; stroke-width:2;
  transition:transform .45s var(--ease), color .35s var(--ease);
}
.menu.is-products .menu__link--toggle{ opacity:1; }
.menu.is-products .menu__chev{ transform:rotate(180deg); color:var(--accent); }

/* the fold. 0fr → 1fr animates cleanly and needs no measured height */
.menu__collapse{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease), opacity .35s var(--ease);
  opacity:0;
}
.menu__collapse > ul{ overflow:hidden; min-height:0; }
.menu.is-products .menu__collapse{ grid-template-rows:1fr; opacity:1; }

/* The brands, nested one level in and a size down from the four above.
   Padding here would survive the fold — the row collapses to zero but the
   box's own padding does not — so the breathing room is margin on the items. */
.menu__list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; }
.menu__list li:first-child{ margin-top:4px; }
.menu__list li:last-child{ margin-bottom:12px; }
.menu__list button{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:8px 0 8px 4px; font:inherit;
  font-size:clamp(14px,1.5vw,16px); font-weight:500; letter-spacing:-.01em;
  color:var(--ink); opacity:.55;
  display:flex; align-items:baseline; gap:11px;
  transition:opacity .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
}
.menu__list button::before{
  content:attr(data-n); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  color:var(--ink-3); width:20px; flex:none;
}
.menu__list button:hover,
.menu__list button.is-on{ opacity:1; transform:translateX(5px); }
.menu__list button.is-on{ color:var(--accent); }
.menu__list button.is-empty{ opacity:.28; }
.menu__list button.is-empty:hover{ transform:none; opacity:.4; }
.menu__list em{ font-style:normal; font-size:9px; letter-spacing:.16em; color:var(--ink-3); font-weight:600; }

/* the temporary home for products that are not one of the ten brands: no
   number, and set off by a rule so it reads as the odd one out that it is */
.menu__list li.is-temp{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.menu__list li.is-temp button::before{ content:'·'; opacity:.5; }

.menu__nav{ list-style:none; margin:0; padding:0; display:grid; gap:1px; }
.menu__foot{ margin:auto 0 0; padding-top:26px; font-size:10px; letter-spacing:.24em; color:var(--ink-3); }

.menu-scrim{
  position:fixed; inset:0; z-index:21;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.menu-scrim.is-on{ opacity:1; visibility:visible; }

/* ---------- hero ---------------------------------------------------------- */

.hero{
  position:relative; z-index:5;
  min-height:100svh;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:calc(var(--head) + 6px) var(--pad) calc(var(--pad) + 14px);
  pointer-events:none;
}
.hero > *{ pointer-events:auto; }

.hero__type{ grid-row:1; text-align:center; display:grid; gap:10px; justify-items:center; }
.hero__title{
  margin:0;
  font-size:clamp(30px,5.4vw,64px);
  line-height:1.02; font-weight:800; letter-spacing:-.038em;
}
.hero__title b{ color:var(--accent); font-weight:800; }
.hero__sub{
  margin:0; font-size:clamp(12px,1.15vw,15px); font-weight:400; color:var(--ink-2);
  letter-spacing:.01em;
}
.hero__sub i{ font-style:normal; color:var(--accent); margin:0 .5em; }

/* arrows sit either side of the product row */
.hero__controls{ position:absolute; inset:0; pointer-events:none; }
.arrow{
  position:absolute; top:52%; translate:0 -50%;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.6); color:var(--ink);
  border:1px solid var(--line); cursor:pointer;
  pointer-events:auto;
  backdrop-filter:blur(8px);
  transition:transform .4s var(--ease), background .4s var(--ease), opacity .4s var(--ease);
}
.arrow svg{ width:19px; height:19px; }
.arrow--prev{ left:calc(var(--pad) * .55); }
.arrow--next{ right:calc(var(--pad) * .55); }
.arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.07); }
.arrow:active{ transform:translateY(-50%) scale(.95); }

.hero__foot{ grid-row:3; align-self:end; display:grid; justify-items:center; align-content:end; gap:13px; }

.pill{
  border:0; cursor:pointer; font:inherit;
  padding:13px 30px; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  color:#fff; font-size:13px; font-weight:600; letter-spacing:.03em;
  box-shadow:0 14px 34px -18px rgba(28,25,23,.7);
  transition:transform .45s var(--ease), background .45s var(--ease);
}
.pill:hover{ transform:translateY(-2px); background:var(--accent); }

.dots{ display:flex; gap:9px; align-items:center; }
.dots button{
  width:6px; height:6px; padding:0; border:0; border-radius:50%;
  background:var(--ink-3); cursor:pointer;
  transition:transform .45s var(--ease), background .45s var(--ease), width .45s var(--ease);
}
.dots button.is-on{ background:var(--accent); width:20px; border-radius:99px; }

.hint{
  margin:0; font-size:10px; letter-spacing:.2em; color:var(--ink-3); font-weight:500;
  transition:opacity .6s var(--ease);
}
.hint.is-hidden{ opacity:0; }

/* ---------- detail -------------------------------------------------------- */

.detail{
  position:relative; z-index:5;
  min-height:100svh;
  /* stays out of the document until a product is opened, so the hero is
     exactly one screen tall and there is nothing empty to scroll into */
  display:none;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr;
  align-items:center;
  gap:clamp(24px,4vw,64px);
  padding:calc(var(--head) + 20px) var(--pad) calc(var(--pad) + 20px);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.detail.is-on{ display:grid; opacity:1; visibility:visible; }

/* a product with a range gets a strip along the bottom, under both columns.
   It costs vertical room, so the section breathes a little less when it is on */
.detail.is-variants{
  grid-template-rows:1fr auto;
  row-gap:clamp(10px,1.6vw,22px);
  padding-block:calc(var(--head) + 8px) calc(var(--pad) + 6px);
}

/* left half stays empty — the 3D product occupies it */
.detail__stage{ min-height:40vh; grid-column:1; grid-row:1; }
.detail__info{ grid-column:2; grid-row:1; }

.detail__info{ display:grid; gap:14px; align-content:center; max-width:46ch; }

.detail__cat{
  margin:0; font-size:10px; letter-spacing:.34em; font-weight:600; color:var(--accent);
  display:flex; align-items:center; gap:12px;
}
.detail__cat::before{ content:''; width:28px; height:1px; background:var(--accent); flex:none; }

.detail__name{
  margin:0; font-size:clamp(34px,5vw,62px); line-height:.98;
  font-weight:800; letter-spacing:-.04em;
}
.detail__tag{
  margin:0; font-size:clamp(15px,1.5vw,20px); font-weight:500; color:var(--ink-2);
  letter-spacing:-.01em;
}
.detail__desc{
  margin:6px 0 0; font-size:clamp(13px,1.05vw,15px); line-height:1.72;
  font-weight:300; color:var(--ink-2); max-width:42ch;
}

.detail__specs{
  margin:14px 0 0; padding:16px 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px);
}
.detail__specs div{ display:grid; gap:5px; }
.detail__specs dt{ font-size:9.5px; letter-spacing:.26em; font-weight:600; color:var(--ink-3); }
.detail__specs dd{ margin:0; font-size:clamp(14px,1.3vw,17px); font-weight:600; letter-spacing:-.01em; }

.detail__features{
  list-style:none; margin:4px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.detail__features li{
  font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--ink-2);
  padding:7px 14px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.5);
}

.detail__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.btn{
  font:inherit; cursor:pointer; border-radius:999px;
  padding:14px 26px; font-size:12.5px; font-weight:600; letter-spacing:.03em;
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn--solid{ background:var(--accent); color:#fff; border:1px solid var(--accent); }
.btn--solid:hover{ transform:translateY(-2px); background:color-mix(in srgb, var(--accent) 84%, #000); }
.btn--ghost{ background:transparent; color:var(--ink-2); border:1px solid var(--line); }
.btn--ghost:hover{ color:var(--ink); border-color:var(--ink-3); transform:translateY(-2px); }

/* ---------- the range strip ---------------------------------------------- */

.detail__variants{
  grid-column:1 / -1; grid-row:2;
  display:flex; gap:clamp(8px,1vw,14px);
  justify-content:center; align-items:stretch;
  /* six cards do not always fit — the row scrolls rather than squashing */
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding:2px 2px 6px;
  margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);
}
.detail__variants::-webkit-scrollbar{ display:none; }
.detail__variants:empty{ display:none; }

.variant{
  flex:0 0 clamp(104px,11vw,146px);
  scroll-snap-align:center;
  display:grid; grid-template-rows:1fr auto auto; gap:5px; justify-items:center;
  padding:12px 10px 11px;
  font:inherit; text-align:center; cursor:pointer;
  border:1px solid transparent; border-radius:18px;
  background:rgba(255,255,255,.5);
  color:var(--ink);
  transition:transform .42s var(--ease), background .42s var(--ease),
             border-color .42s var(--ease), box-shadow .42s var(--ease);
}
.variant:hover{ transform:translateY(-4px); background:rgba(255,255,255,.85); }
.variant.is-on{
  background:#fff;
  border-color:color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow:0 18px 34px -22px rgba(28,25,23,.55);
}

/* the drawn can — overrides the global `svg{ fill:none; stroke:currentColor }` */
.variant__can{
  width:auto; height:clamp(58px,5.6vw,80px);
  fill:initial; stroke:none;
  filter:drop-shadow(0 8px 12px rgba(28,25,23,.18));
  transition:transform .42s var(--ease);
}
.variant img.variant__can{ object-fit:contain; }
.variant:hover .variant__can,
.variant.is-on .variant__can{ transform:translateY(-2px) scale(1.04); }

.variant__name{
  font-size:11.5px; font-weight:600; letter-spacing:-.005em; line-height:1.3;
  max-width:13ch;
}
.variant__size{ font-size:10px; font-weight:500; color:var(--ink-3); letter-spacing:.06em; }
.variant.is-on .variant__size{ color:var(--accent); }

/* ---------- About / Contact / Order panel --------------------------------- */
/* One panel, three sets of content. It covers the showcase rather than being a
   section further down the page: the canvas is fixed and the 3D keeps running
   behind it, so nothing has to unload and nothing scrolls out of frame. */

.sheet{
  position:fixed; inset:0; z-index:40;
  overflow-y:auto; overscroll-behavior:contain;
  padding:calc(var(--head) + clamp(20px,4vh,56px)) var(--pad) calc(var(--pad) + 40px);
  background:color-mix(in srgb, var(--bg) 93%, #fff);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.sheet.is-on{ opacity:1; visibility:visible; }
body.sheet-open{ overflow:hidden; }

.sheet__close{
  position:fixed; z-index:2;
  top:calc(var(--head) / 2); right:var(--pad); translate:0 -50%;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.7); color:var(--ink);
  border:1px solid var(--line); cursor:pointer;
  backdrop-filter:blur(8px);
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.sheet__close svg{ width:17px; height:17px; stroke-width:1.8; }
.sheet__close:hover{ background:#fff; transform:translateY(-50%) rotate(90deg); }

.sheet__inner{ max-width:64ch; margin:0 auto; }

.sheet__eyebrow{
  margin:0 0 14px; font-size:10px; letter-spacing:.34em; font-weight:600; color:var(--accent);
  display:flex; align-items:center; gap:12px;
}
.sheet__eyebrow::before{ content:''; width:28px; height:1px; background:var(--accent); flex:none; }

.sheet__title{
  margin:0; font-size:clamp(30px,5vw,58px); line-height:1.0;
  font-weight:800; letter-spacing:-.04em;
}
.sheet__lead{
  margin:18px 0 0; font-size:clamp(15px,1.6vw,20px); line-height:1.55;
  font-weight:400; color:var(--ink-2); max-width:44ch;
}
.sheet__lead:empty{ display:none; }

.sheet__body{ margin-top:clamp(26px,4vh,44px); display:grid; gap:22px; }
.sheet__body p{
  margin:0; font-size:clamp(13.5px,1.05vw,15.5px); line-height:1.78;
  font-weight:300; color:var(--ink-2); max-width:52ch;
}
.sheet__body p.is-note{
  padding:16px 18px; border-radius:14px; background:rgba(255,255,255,.6);
  border:1px solid var(--line); font-size:13px; line-height:1.7;
}

/* the figures under About */
.sheet__facts{
  list-style:none; margin:8px 0 0; padding:22px 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:clamp(22px,4vw,54px);
}
.sheet__facts div{ display:grid; gap:6px; }
.sheet__facts dt{ font-size:9.5px; letter-spacing:.26em; font-weight:600; color:var(--ink-3); }
.sheet__facts dd{ margin:0; font-size:clamp(20px,2.6vw,30px); font-weight:800; letter-spacing:-.03em; }

/* the contact rows */
.sheet__rows{ display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.sheet__row{
  display:grid; grid-template-columns:minmax(90px,140px) 1fr; align-items:baseline;
  gap:clamp(12px,2vw,26px);
  padding:15px 0; border-bottom:1px solid var(--line);
}
.sheet__row dt{ font-size:9.5px; letter-spacing:.26em; font-weight:600; color:var(--ink-3); }
.sheet__row dd{ margin:0; font-size:clamp(15px,1.5vw,19px); font-weight:600; letter-spacing:-.015em; }
.sheet__row a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.sheet__row a:hover{ color:var(--accent); border-color:currentColor; }

/* the order form */
.sheet__form{ display:grid; gap:16px; max-width:46ch; }
.sheet__field{ display:grid; gap:7px; }
.sheet__field label{ font-size:9.5px; letter-spacing:.26em; font-weight:600; color:var(--ink-3); }
.sheet__field input,
.sheet__field textarea{
  font:inherit; font-size:15px; color:var(--ink);
  padding:13px 15px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.7);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.sheet__field textarea{ min-height:104px; resize:vertical; line-height:1.6; }
.sheet__field input:focus,
.sheet__field textarea:focus{
  outline:none; background:#fff;
  border-color:color-mix(in srgb, var(--accent) 50%, transparent);
}
.sheet__field.is-missing input,
.sheet__field.is-missing textarea{ border-color:var(--accent); }

.sheet__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.sheet__hint{
  margin:0; font-size:11.5px; line-height:1.6; color:var(--ink-3);
}
.sheet__hint.is-warn{ color:var(--accent); }

/* ---------- footer -------------------------------------------------------- */

.site-foot{
  position:relative; z-index:5;
  padding:22px var(--pad) 30px;
  text-align:center;
  font-size:9.5px; letter-spacing:.28em; color:var(--ink-3); font-weight:600;
}

/* ---------- loader -------------------------------------------------------- */

.loader{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center; align-content:center; gap:22px;
  background:var(--bg);
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__logo{ width:min(200px,52vw); height:auto; }
.loader__bar{ width:min(200px,52vw); height:2px; background:var(--line); overflow:hidden; border-radius:2px; }
.loader__bar i{ display:block; height:100%; width:0%; background:var(--accent); transition:width .4s var(--ease); }
.loader__pct{ font-size:10px; letter-spacing:.3em; color:var(--ink-3); font-weight:600; font-variant-numeric:tabular-nums; }

/* a laptop screen has no room to spare once the strip is in — claw some back
   from the copy rather than pushing the cards below the fold */
@media (min-width:901px) and (max-height:900px){
  .detail.is-variants .detail__info{ gap:11px; }
  .detail.is-variants .detail__desc{ font-size:13.5px; line-height:1.6; margin-top:2px; }
  .detail.is-variants .detail__specs{ margin-top:10px; padding-top:12px; }
  .detail.is-variants .variant__can{ height:64px; }
  .detail.is-variants .variant{ padding:10px 9px 9px; }
}

/* ==========================================================================
   MOBILE — designed for touch first, not a shrunken desktop
   ========================================================================== */

@media (max-width:900px){
  :root{ --pad:18px; --head:62px; }

  .cta{ height:38px; padding:0 6px 0 14px; font-size:11.5px; }
  .cta span{ display:none; }
  .cta{ padding:0 6px; }

  /* type sits at the very top, the product row owns the middle of the screen,
     controls sit in the thumb zone at the bottom */
  .hero{
    grid-template-rows:auto 1fr auto;
    padding:calc(var(--head) + 4px) var(--pad) calc(var(--pad) + 8px);
  }
  .hero__title{ font-size:clamp(26px,8.4vw,38px); }
  .hero__sub{ font-size:12px; }

  /* arrows would sit on top of the products — swipe is the primary control */
  .arrow{ display:none; }

  .hero__foot{ gap:12px; }
  .pill{ padding:12px 24px; font-size:12px; }
  .hint{ font-size:9px; letter-spacing:.14em; }

  .detail.is-on{ grid-template-columns:1fr; }
  .detail{
    grid-template-columns:1fr;
    grid-template-rows:minmax(38svh,1fr) auto;
    gap:6px;
    padding:calc(var(--head) + 4px) var(--pad) calc(var(--pad) + 16px);
    align-items:end;
  }
  /* The strip takes a row of its own. A phone screen has no slack, so with a
     range on show everything else gives up a few pixels to keep the whole
     section inside one screen — nothing is hidden, just tightened. */
  .detail.is-variants{
    grid-template-rows:minmax(26svh,1fr) auto auto;
    row-gap:4px;
    padding-block:calc(var(--head) + 2px) calc(var(--pad) + 6px);
  }
  .detail.is-variants .detail__variants{ grid-column:1; grid-row:3; }
  .detail.is-variants .detail__info{ grid-column:1; grid-row:2; gap:9px; }
  .detail.is-variants .detail__name{ font-size:clamp(24px,7.6vw,34px); }
  .detail.is-variants .detail__desc{ font-size:13px; line-height:1.55; }
  .detail.is-variants .detail__specs{ margin-top:6px; padding-top:10px; }
  .detail.is-variants .variant{ padding:9px 8px 8px; }
  .detail.is-variants .variant__can{ height:54px; }
  .detail.is-variants .variant__name{ font-size:10.5px; }

  .detail__stage{ min-height:0; grid-column:1; grid-row:1; }
  .detail__info{ max-width:100%; gap:11px; text-align:left; }

  /* left-aligned to match the copy, and swiped rather than centred */
  .detail__variants{ justify-content:flex-start; gap:8px; padding-bottom:2px; }
  .variant{ flex-basis:96px; padding:11px 8px 10px; border-radius:15px; }
  .variant__can{ height:64px; }
  .variant__name{ font-size:11px; }
  .detail__name{ font-size:clamp(28px,9vw,40px); }
  .detail__tag{ font-size:15px; }
  .detail__desc{ font-size:13.5px; line-height:1.62; max-width:100%; }
  .detail__specs{ margin-top:10px; padding-top:12px; gap:22px; }
  .detail__actions{ margin-top:6px; }
  .btn{ flex:1 1 auto; text-align:center; padding:15px 20px; }

  .menu{ width:min(340px,88vw); }
  .menu__list button{ padding:9px 0; }
  .menu__nav{ margin-top:16px; padding-top:14px; }

  .sheet{ padding:calc(var(--head) + 16px) var(--pad) calc(var(--pad) + 32px); }
  .sheet__lead{ font-size:15px; }
  .sheet__row{ grid-template-columns:1fr; gap:5px; padding:13px 0; }
  .sheet__facts{ gap:20px 34px; }
  .sheet__form{ max-width:100%; }
  .sheet__actions .btn{ flex:1 1 auto; text-align:center; }
}

/* short phones in landscape */
@media (max-height:520px) and (orientation:landscape){
  .hero__type{ display:none; }
  .detail{ grid-template-columns:1fr 1fr; align-items:center; }
  .detail__desc{ display:none; }
  /* not enough vertical room for a strip on top of everything else */
  .detail.is-variants{ grid-template-rows:1fr; }
  .detail__variants{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .backdrop__pool{ animation:none; }
  *{ transition-duration:.01ms !important; }
}