/* ==========================================================================
   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 a soft version of the drink in front of it. The colours are
   worked out in app.js from the product's colour (see setTint) — this only
   decides where each one sits. Opaque, so it fully replaces the paper while a
   product is on screen; the vignette and grain still sit on top of it. */
.backdrop__tint{
  position:absolute; inset:0; opacity:0;
  --t-base:var(--bg); --t-glow:var(--bg); --t-edge:var(--bg); --t-deep:var(--bg);
  background:
    /* a soft lift of light where the product stands */
    radial-gradient(ellipse 54% 46% at 50% 36%,
      var(--t-glow) 0%,
      color-mix(in srgb, var(--t-glow) 55%, transparent) 38%,
      transparent 72%),
    /* the floor falls away a shade deeper */
    linear-gradient(180deg,
      transparent 0%, transparent 52%,
      color-mix(in srgb, var(--t-deep) 45%, transparent) 80%,
      color-mix(in srgb, var(--t-deep) 85%, transparent) 100%),
    /* and the field itself, settling toward the corners */
    radial-gradient(ellipse 120% 100% at 50% 38%,
      var(--t-base) 0%, var(--t-base) 50%, var(--t-edge) 115%);
  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; }
/* an open product can be picked up and turned */
#stage.is-turnable{ cursor:grab; }
#stage.is-turnable.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; }
/* English / Kurdish / Arabic */
.menu__langs{
  display:flex; gap:5px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line);
}
.langopt{
  font:inherit; cursor:pointer;
  padding:7px 13px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.01em;
  background:none; border:1px solid var(--line); color:var(--ink-3);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.langopt:hover{ color:var(--ink); background:rgba(255,255,255,.6); }
.langopt.is-on{
  color:var(--accent); background:#fff;
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- right to left ------------------------------------------------- */
/*  Kurdish and Arabic are a layout change, not a font change. `dir` on <html>
 *  already mirrors text, inline flow and every logical property; what is left
 *  is the handful of places that were written with physical sides — the drawer
 *  that slides from the left, the columns of the detail view, and the arrows
 *  that must point the other way to still mean "next".                       */

/* Kurdish and Arabic are set in Vazirmatn — drawn for the Arabic script, with
   Latin letters of its own that sit comfortably beside it, so a brand name in
   the middle of a Kurdish sentence does not jump to a different typeface.
   Everything else inherits from here (every control uses font:inherit). */
.is-rtl body{
  font-family:'Vazirmatn','Inter','Segoe UI',Tahoma,Arial,sans-serif;
}

.is-rtl .menu{
  left:auto; right:0;
  border-right:0; border-left:1px solid var(--line);
  transform:translateX(101%);
}
.is-rtl .menu.is-open{ transform:none; }
.is-rtl .menu__list button:hover,
.is-rtl .menu__list button.is-on,
.is-rtl .menu__link:hover,
.is-rtl .menu__nav button:hover{ transform:translateX(-5px); }
.is-rtl .menu__list li.is-temp button::before{ content:'·'; }

/* the product changes sides with the copy */
.is-rtl .detail__stage{ grid-column:2; }
.is-rtl .detail__info{ grid-column:1; }
.is-rtl .detail__cat{ flex-direction:row-reverse; }

/* an arrow means "onward", so it has to turn round */
.is-rtl .arrow svg{ transform:scaleX(-1); }
.is-rtl .cta svg{ transform:scaleX(-1); }
.is-rtl .menu__collapse .menu__list{ padding-right:0; }
.is-rtl .pickrow__kids{
  margin-left:0; margin-right:11px;
  padding-left:0; padding-right:9px;
  border-left:0; border-right:1px solid var(--line);
}
.is-rtl .picker__wrap--sub{ margin-left:0; margin-right:16px; }
.is-rtl .sheet__eyebrow{ flex-direction:row-reverse; }
.is-rtl .sheet__close{ right:auto; left:var(--pad); }

/* numbers stay left-to-right even inside right-to-left text */
.is-rtl .order__qty,
.is-rtl .cta__count,
.is-rtl .pickrow__n,
.is-rtl .order__total b{ direction:ltr; }

@media (max-width:900px){
  .is-rtl .detail.is-variants .detail__stage,
  .is-rtl .detail.is-variants .detail__info,
  .is-rtl .detail.is-variants .detail__variants{ grid-column:1; }
}

.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{
  /* the centred product's colour, set from app.js (paintHeroWord) — it fades
     in step with the background */
  color:var(--hero-word, var(--accent)); font-weight:800;
  transition:color var(--hero-fade, 1.1s) cubic-bezier(.37,0,.63,1);
}
@media (prefers-reduced-motion:reduce){ .hero__title b{ transition:none; } }
.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;
  /* The section covers the whole screen, canvas included, so left as-is it
     swallows every press aimed at the product behind it and the drag-to-turn
     never reaches the canvas. Same treatment the hero already gets: the section
     itself is transparent to the pointer, its actual controls take it back. */
  pointer-events:none;
}
.detail__info,
.detail__variants{ pointer-events:auto; }
.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; pointer-events:none; }

.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); }

/* ---------- carton or single ---------------------------------------------- */

.detail__pack{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.detail__pack[hidden]{ display:none; }
.detail__packlabel{
  font-size:9.5px; letter-spacing:.26em; font-weight:600; color:var(--ink-3);
  width:100%; margin-bottom:-2px;
}
.packopt{
  font:inherit; cursor:pointer; text-align:left;
  display:grid; gap:1px;
  padding:9px 16px; border-radius:13px;
  background:rgba(255,255,255,.55); border:1px solid var(--line); color:var(--ink);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.packopt b{ font-size:13px; font-weight:600; letter-spacing:-.01em; }
.packopt i{ font-style:normal; font-size:10px; letter-spacing:.1em; color:var(--ink-3); }
.packopt:hover{ transform:translateY(-1px); background:#fff; }
.packopt.is-on{
  background:#fff;
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 10px 22px -16px rgba(28,25,23,.6);
}
.packopt.is-on i{ color:var(--accent); }

/* ---------- the running order --------------------------------------------- */

.cta__count{
  display:grid; place-items:center;
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--accent); color:#fff;
  font-size:10.5px; font-weight:700; font-style:normal; letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.cta__count[hidden]{ display:none; }

.btn.is-added{
  background:color-mix(in srgb, var(--accent) 78%, #000);
  border-color:transparent;
}

.order{
  padding:16px 18px; border-radius:16px;
  background:rgba(255,255,255,.6); border:1px solid var(--line);
}
.order__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:9.5px; letter-spacing:.26em; font-weight:600; color:var(--ink-3);
}
.order__clear{
  font:inherit; font-size:9.5px; letter-spacing:.16em; font-weight:600;
  background:none; border:0; cursor:pointer; color:var(--ink-3); padding:0;
  transition:color .3s var(--ease);
}
.order__clear:hover{ color:var(--accent); }
.order__empty{ margin:10px 0 0 !important; font-size:12.5px !important; line-height:1.6 !important; }

.order__list{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px; }
.order__list li{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 0; border-top:1px solid var(--line);
}
.order__name{ flex:1 1 auto; min-width:150px; }
.order__name{ font-size:13.5px; font-weight:600; letter-spacing:-.01em; display:grid; gap:2px; }
.order__unit{ font-style:normal; font-size:10.5px; font-weight:500; letter-spacing:.06em; color:var(--ink-3); }

/* carton or single, switchable from the order itself */
.order__unitsel{ display:flex; gap:3px; flex:none; }
.unitopt{
  font:inherit; cursor:pointer; text-align:center;
  display:grid; gap:0; padding:5px 11px; border-radius:10px;
  background:rgba(255,255,255,.6); border:1px solid var(--line); color:var(--ink-2);
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.unitopt b{ font-size:11px; font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.unitopt i{ font-style:normal; font-size:9px; letter-spacing:.08em; color:var(--ink-3); line-height:1.2; }
.unitopt:hover{ background:#fff; }
.unitopt.is-on{
  background:#fff; color:var(--ink);
  border-color:color-mix(in srgb, var(--accent) 50%, transparent);
}
.unitopt.is-on i{ color:var(--accent); }

.order__total{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:0; padding:11px 0 0; border-top:1px solid var(--line);
}
.order__total span{ font-size:9.5px; letter-spacing:.26em; font-weight:600; color:var(--ink-3); }
.order__total b{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }

.order__qty{ display:flex; align-items:center; gap:4px; flex:none; }
.order__qty button{
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  font:inherit; font-size:14px; line-height:1; cursor:pointer;
  background:#fff; color:var(--ink); border:1px solid var(--line);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.order__qty button:hover{ border-color:var(--accent); color:var(--accent); }
.order__qty b{
  min-width:24px; text-align:center;
  font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums;
}

/* the whole range, reachable without leaving the order */
.picker{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.picker__head{
  display:block; margin-bottom:9px;
  font-size:9.5px; letter-spacing:.26em; font-weight:600; color:var(--ink-3);
}
.picker__menu{ position:relative; }

.picker__trigger{
  width:100%; font:inherit; font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; border-radius:13px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.75); color:var(--ink-2);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.picker__trigger:hover{ background:#fff; }
.picker__trigger[aria-expanded="true"]{
  background:#fff; color:var(--ink);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
}
.picker__chev{ width:16px; height:16px; stroke-width:2; color:var(--ink-3); flex:none;
  transition:transform .35s var(--ease); }
.picker__trigger[aria-expanded="true"] .picker__chev{ transform:rotate(180deg); color:var(--accent); }

.picker__panel{
  position:absolute; z-index:3; left:0; right:0; top:calc(100% + 5px);
  max-height:252px; overflow-y:auto; overscroll-behavior:contain;
  padding:5px; border-radius:13px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 22px 44px -22px rgba(28,25,23,.5);
}
.picker__panel[hidden]{ display:none; }

.pickrow{
  width:100%; font:inherit; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:9px;
  padding:10px 11px; border:0; border-radius:9px; background:none;
  font-size:13px; font-weight:500; letter-spacing:-.01em; color:var(--ink);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.pickrow:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); color:var(--accent); }
.pickrow__n{
  font-style:normal; margin-left:auto; flex:none;
  display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--accent); color:#fff;
  font-size:9.5px; font-weight:700; font-variant-numeric:tabular-nums;
}

/* a range: one row, with the arrow that opens it sitting at the far right */
.pickrow--group{ font-weight:600; }
.pickrow--group .pickrow__n{ margin-left:auto; }
.pickrow__chev{
  width:15px; height:15px; stroke-width:2; flex:none; color:var(--ink-3);
  margin-left:auto; transition:transform .3s var(--ease);
}
.pickrow--group .pickrow__n + .pickrow__chev{ margin-left:6px; }
.pickrow--group.is-open{ color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.pickrow--group.is-open .pickrow__chev{ transform:rotate(180deg); color:var(--accent); }

/* its editions, dropped in underneath and stepped in so the nesting reads */
.pickrow__kids{
  margin:1px 0 3px 11px; padding-left:9px;
  border-left:1px solid var(--line);
}
.pickrow--kid{ font-size:12.5px; font-weight:500; color:var(--ink-2); padding:8px 11px; }

.picker__hint{
  margin:9px 0 0 !important; font-size:11px !important; line-height:1.55 !important;
  color:var(--ink-3) !important;
}

/* ---------- our brands ----------------------------------------------------- */
/*  A short band under the showcase: one slow, endless strip of images. The loop
 *  mechanics are explained in app.js under "our brands".                     */

.brands{
  position:relative; z-index:5;
  padding:clamp(26px,3.6vw,46px) 0 clamp(28px,4vw,50px);
}
.brands[hidden]{ display:none; }

.brands__title{
  margin:0 0 clamp(12px,1.8vw,22px); padding:0 var(--pad);
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:10.5px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-2);
}
.brands__title::before,
.brands__title::after{ content:''; width:28px; height:1px; flex:none; background:var(--accent); }
/* Kurdish and Arabic are joined scripts — tracking pulls a word's letters apart,
   so the spacing that suits the Latin label is dropped for them */
.is-rtl .brands__title{ letter-spacing:0; text-transform:none; font-size:13px; }

.brands__viewport{
  position:relative; overflow:hidden;
  direction:ltr;                        /* same mechanics in every language */
  padding:14px 0 18px;                  /* room for a hovered tile to grow into */
  /* the strip dissolves at both ends rather than being cut off */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.brands__track{ display:flex; width:max-content; will-change:transform; }

.brand-tile{
  --tile:var(--accent);
  flex:none; position:relative;
  width:clamp(138px,14.5vw,212px);
  height:clamp(132px,13.2vw,190px);
  margin-right:clamp(12px,1.5vw,22px);  /* a margin, NOT `gap` — see app.js */
  border-radius:18px; overflow:hidden;
  background:
    radial-gradient(ellipse 68% 74% at 50% 60%,
      color-mix(in srgb, var(--tile) 20%, transparent) 0%,
      color-mix(in srgb, var(--tile) 6%, transparent) 48%,
      transparent 74%),
    rgba(255,255,255,.62);
  border:1px solid var(--line);
  box-shadow:0 14px 32px -24px rgba(28,25,23,.45);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.brand-tile img{
  /* placed against the tile itself: inside a grid cell a percentage height
     has nothing definite to resolve against, and the image came out at
     full size, cropped. `contain` keeps any shape whole and centred. */
  position:absolute; left:10%; top:6%; width:80%; height:88%;
  object-fit:contain;
  filter:drop-shadow(0 12px 14px rgba(28,25,23,.22));
  transition:transform .6s var(--ease);
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
/* only where there is a real hover — on touch it would stick after a tap */
@media (hover:hover){
  .brand-tile:hover{
    transform:scale(1.05);
    border-color:color-mix(in srgb, var(--tile) 38%, transparent);
    box-shadow:0 22px 42px -24px rgba(28,25,23,.55);
    z-index:1;
  }
  .brand-tile:hover img{ transform:translateY(-3px) scale(1.02); }
}

@media (max-width:900px){
  .brands__viewport{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
  .brand-tile{ border-radius:15px; }
}

/* motion off: nothing drifts, and the strip becomes something to swipe instead */
@media (prefers-reduced-motion:reduce){
  .brands__viewport{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}

/* In the hero the 3D stage now rides the page's own scroll, because there is
   finally something below it to scroll to. See app.js "the stage and the page". */
#stage.is-scrolling{ position:absolute; }
/* …and the header with it, so the logo stays above the headline instead of
   sliding across it. While the menu is open the burger is its close button,
   and that must never be scrolled out of reach. */
.site-head.is-scrolling{ position:absolute; }
body.menu-open .site-head.is-scrolling{ position:fixed; }

/* ---------- 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; }
}