/* ============================================================
   MAZE NO — Product Page
   ============================================================ */
:root{
  --paper:#F1E8D3;
  --paper-2:#E8DEC4;
  --paper-3:#F7F0DE;
  --kraft:#D4BE94;
  --kraft-2:#BFA477;
  --kraft-3:#A98B5C;

  --ink:#1E1610;
  --ink-2:#3D2E24;
  --ink-3:#6E5A4A;
  --ink-4:#9B877A;

  --paprika:#A63723;
  --paprika-2:#7A2414;
  --paprika-3:#C24B32;
  --amber:#C58A2E;
  --amber-2:#E0A93F;
  --sage:#6F7A5A;

  --twine:#8B6F47;
  --twine-2:#6B5233;
  --brass:#B08835;
  --brass-2:#8B6820;
  --brass-3:#D9B85A;

  --counter:#EFE6D2;
  --counter-edge:#B94A34;
  --counter-shadow:#C9B896;

  --ff-display:'Lalezar', serif;
  --ff-body:'Vazirmatn', system-ui, sans-serif;

  --gutter:clamp(20px, 4vw, 56px);
  --maxw:1320px;

  --r-1:2px;
  --r-2:6px;
  --r-3:14px;
  --r-4:32px;

  --sh-tag:0 1px 0 rgba(30,22,16,.06), 0 18px 30px -22px rgba(30,22,16,.35);
  --sh-tag-h:0 2px 0 rgba(30,22,16,.06), 0 32px 50px -22px rgba(30,22,16,.45);
  --sh-card:0 1px 0 rgba(30,22,16,.05), 0 12px 22px -18px rgba(30,22,16,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-body);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
::selection{background:var(--paprika); color:var(--paper)}

.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.mono{font-variant-numeric:tabular-nums}

.skip{
  position:absolute; inset-inline-start:-9999px; top:8px;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:6px; z-index:1000;
  font-size:13px; font-weight:600;
}
.skip:focus{inset-inline-start:16px}

:focus-visible{
  outline:2.5px solid var(--paprika);
  outline-offset:3px;
  border-radius:2px;
}

h1,h2,h3,h4{margin:0; font-weight:800; line-height:1.15; letter-spacing:-.01em}
p{margin:0}
.kicker{
  font-size:12px; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--paprika);
}
.kicker::before{content:"● "; opacity:.6; letter-spacing:0}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; inset-inline:0; z-index:200;
  padding:14px 0;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav.is-solid{
  background:rgba(241,232,211,.88);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 1px 0 rgba(30,22,16,.08);
  padding:10px 0;
}
.nav-inner{display:flex; align-items:center; gap:24px; justify-content:space-between}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--ff-display);
  font-size:26px; line-height:1; color:var(--ink);
}
.brand-mark{
  width:42px; height:42px; flex:none;
  border-radius:50%;
  background:var(--paprika); color:var(--paper);
  display:grid; place-items:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.16), 0 2px 0 rgba(30,22,16,.2);
  transform:rotate(-6deg);
  transition:transform .5s cubic-bezier(.2,.9,.2,1.4);
}
.brand-mark svg{width:24px;height:24px}
.brand:hover .brand-mark{transform:rotate(6deg) scale(1.05)}

.nav-links{display:flex; gap:6px; align-items:center; font-size:14px; font-weight:500}
.nav-links a{
  padding:8px 14px; border-radius:999px; color:var(--ink-2);
  transition:color .2s ease, background .2s ease; position:relative;
}
.nav-links a:hover{color:var(--ink); background:rgba(30,22,16,.06)}

.nav-right{display:flex; align-items:center; gap:8px}

.nav-basket{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px;
  background:var(--ink); color:var(--paper);
  border-radius:999px;
  font-size:13px; font-weight:600;
  transition:transform .2s ease, background .2s ease;
  box-shadow:0 6px 0 -2px rgba(30,22,16,.25);
}
.nav-basket:hover{background:var(--paprika); transform:translateY(-1px)}
.nav-basket svg{width:15px;height:15px}
.nav-basket .count{
  display:inline-grid; place-items:center;
  min-width:20px; height:20px;
  padding-inline:5px;
  background:var(--amber-2); color:var(--ink);
  border-radius:999px;
  font-size:11px; font-weight:800;
  font-variant-numeric:tabular-nums;
  transition:transform .4s cubic-bezier(.2,.9,.2,1.5);
}
.nav-basket .count.bump{transform:scale(1.35)}

.nav-toggle{display:none}
@media (max-width: 980px){
  .nav-links{
    position:fixed; inset:64px 12px auto 12px;
    flex-direction:column; align-items:stretch;
    background:var(--paper-3);
    border:1px solid rgba(30,22,16,.1);
    border-radius:var(--r-3);
    padding:8px;
    box-shadow:var(--sh-tag);
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav-links.is-open{opacity:1; transform:none; pointer-events:auto}
  .nav-links a{padding:12px 16px; border-radius:10px}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%;
    background:rgba(30,22,16,.06);
  }
}

/* ============================================================
   BREADCRUMB STRIP
   ============================================================ */
.breadcrumb{
  padding-top:104px;
  padding-bottom:6px;
  font-size:12.5px;
  font-weight:500;
  color:var(--ink-3);
}
.breadcrumb-inner{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}
.breadcrumb a{
  color:var(--ink-3);
  transition:color .2s;
  display:inline-flex; align-items:center; gap:6px;
}
.breadcrumb a:hover{color:var(--paprika)}
.breadcrumb-sep{opacity:.4}
.breadcrumb-current{color:var(--ink); font-weight:700}
.breadcrumb-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700;
  color:var(--ink-2);
  padding:4px 10px;
  background:rgba(30,22,16,.05);
  border-radius:999px;
  margin-inline-end:auto;
  transition:background .2s, color .2s;
}
.breadcrumb-back:hover{background:var(--ink); color:var(--paper)}
.breadcrumb-back svg{width:12px;height:12px}

/* ============================================================
   PRODUCT HERO — behind the counter
   ============================================================ */
.hero-product{
  padding-block:clamp(20px,3vw,40px) clamp(40px,5vw,72px);
  position:relative;
}
.hero-product::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(166,55,35,.05), transparent 50%),
    radial-gradient(ellipse at 15% 90%, rgba(212,190,148,.3), transparent 55%);
  pointer-events:none;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(28px,4vw,72px);
  align-items:start;
  position:relative;
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:36px}
}

/* ---------- Left (in RTL: right side) — the display case ---------- */
.case-column{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* the actual glass case */
.case{
  position:relative;
  background:
    linear-gradient(180deg, #2A1C12 0%, #1E1610 3%, #1E1610 97%, #2A1C12 100%);
  border-radius:var(--r-3);
  padding:clamp(18px,2vw,26px);
  box-shadow:
    0 2px 0 rgba(0,0,0,.15),
    0 40px 60px -32px rgba(30,22,16,.55),
    0 80px 100px -60px rgba(30,22,16,.4);
  isolation:isolate;
}
/* inner wood frame around the glass */
.case::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(255,200,150,.06);
  border-radius:calc(var(--r-3) - 4px);
  pointer-events:none;
}

/* the glass pane */
.case-glass{
  position:relative;
  aspect-ratio:5/4;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(212,190,148,.55), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(169,139,92,.4), transparent 50%),
    linear-gradient(180deg, var(--paper-2), var(--kraft-2));
  border-radius:var(--r-2);
  overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,220,180,.15),
    inset 0 -20px 40px -20px rgba(30,22,16,.35);
}

/* reflective glass gradient overlay */
.case-glass::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.08) 15%,
      transparent 30%,
      transparent 70%,
      rgba(255,255,255,.04) 85%,
      transparent 100%),
    linear-gradient(180deg,
      transparent 0%,
      transparent 60%,
      rgba(30,22,16,.08) 100%);
  z-index:5;
}
/* thin diagonal glass streak */
.case-glass::before{
  content:"";
  position:absolute;
  top:-20%;
  inset-inline-start:12%;
  width:40px; height:140%;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.18) 55%,
    transparent);
  transform:rotate(22deg);
  pointer-events:none;
  z-index:6;
  opacity:.65;
}

/* the marble shelf inside */
.shelf{
  position:absolute;
  inset-inline:0;
  bottom:0;
  height:34%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.5), transparent 45%),
    linear-gradient(180deg, #F4EBDA 0%, #E8DEC4 30%, #C9B896 100%);
  border-top:2px solid rgba(30,22,16,.15);
  z-index:2;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -20px 30px -20px rgba(30,22,16,.3);
}
/* marble veins */
.shelf::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(115deg, transparent 30%, rgba(139,111,71,.08) 40%, transparent 55%),
    linear-gradient(-100deg, transparent 45%, rgba(139,111,71,.06) 55%, transparent 70%),
    linear-gradient(160deg, transparent 60%, rgba(139,111,71,.07) 70%, transparent 85%);
  pointer-events:none;
}

/* back wall of the case (kraft paper) */
.case-wall{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(169,139,92,.35), transparent 55%),
    linear-gradient(180deg, var(--kraft-2), var(--kraft-3));
  z-index:0;
}
.case-wall::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0 28px,
      rgba(30,22,16,.05) 28px 29px);
  opacity:.6;
}

/* the hanging rail inside the case (echo of the brand motif) */
.case-rail{
  position:absolute;
  inset-inline:14px;
  top:34px;
  height:1.5px;
  background:rgba(30,22,16,.35);
  z-index:3;
}
.case-rail::before,
.case-rail::after{
  content:"";
  position:absolute; top:-2px;
  width:5px; height:5px; border-radius:50%;
  background:rgba(30,22,16,.4);
}
.case-rail::before{inset-inline-start:0}
.case-rail::after{inset-inline-end:0}

/* the hero product display area */
.case-product{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:32%;
  transition:opacity .5s ease, transform .8s cubic-bezier(.2,.9,.2,1.2);
}
.case-product svg{
  max-width:82%;
  max-height:82%;
  width:auto;
  height:auto;
  filter:drop-shadow(0 12px 18px rgba(30,22,16,.35));
  transition:transform .8s cubic-bezier(.2,.9,.2,1.2);
}
.case-product.swapping{
  opacity:0;
  transform:translateY(6px);
}
.case-product.swapping svg{
  transform:scale(.96) rotate(-2deg);
}

/* hanging tag on the product inside the case */
.case-price-tag{
  position:absolute;
  top:52px;
  inset-inline-start:16px;
  z-index:4;
  transform:rotate(-4deg);
  filter:drop-shadow(0 3px 5px rgba(30,22,16,.3));
}
.case-price-tag::before{
  content:"";
  position:absolute;
  top:-20px;
  inset-inline-start:50%;
  width:1px;
  height:20px;
  background:linear-gradient(180deg, transparent, rgba(30,22,16,.35));
  transform:translateX(-50%);
}
.case-price-tag-inner{
  background:linear-gradient(180deg, var(--paper-3), var(--paper-2));
  border:1px solid rgba(30,22,16,.2);
  border-radius:var(--r-2);
  padding:8px 12px 10px;
  min-width:88px;
  text-align:center;
  position:relative;
}
.case-price-tag-inner::before{
  content:"";
  position:absolute;
  top:3px;
  inset-inline-start:50%;
  width:5px; height:5px; border-radius:50%;
  background:var(--paper);
  box-shadow:inset 0 1px 1.5px rgba(30,22,16,.3);
  transform:translateX(-50%);
}
.case-price-tag-kicker{
  display:block;
  font-size:9px;
  font-weight:800;
  letter-spacing:.24em;
  color:var(--paprika);
  text-transform:uppercase;
  margin-top:4px;
  margin-bottom:2px;
}
.case-price-tag-value{
  font-family:var(--ff-display);
  font-size:18px;
  line-height:1;
  color:var(--ink);
  font-weight:400;
  font-variant-numeric:tabular-nums;
}

/* the brass scale at the front of the case */
.scale{
  position:absolute;
  bottom:12px;
  inset-inline-end:22px;
  z-index:4;
  width:78px;
  height:78px;
  filter:drop-shadow(0 4px 6px rgba(30,22,16,.35));
}
.scale-needle{
  transform-origin:50% 50%;
  transition:transform .7s cubic-bezier(.3,.9,.2,1.3);
}

/* the counter edge below the case — signature element */
.counter-edge{
  position:relative;
  height:12px;
  margin-inline:-6px;
  margin-top:-2px;
  background:
    linear-gradient(180deg,
      var(--counter-edge) 0 3px,
      rgba(0,0,0,.12) 3px 4px,
      var(--counter-shadow) 4px 6px,
      var(--counter) 6px 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 4px 8px -4px rgba(30,22,16,.35);
  border-radius:0 0 var(--r-3) var(--r-3);
  z-index:8;
}

/* in-case small labels (like price tags on real products) */
.case-mini-labels{
  position:absolute;
  top:52px;
  inset-inline-end:14px;
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}
.case-mini-label{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  background:rgba(247,240,222,.85);
  border:1px solid rgba(30,22,16,.15);
  border-radius:999px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--ink-2);
  text-transform:uppercase;
  box-shadow:0 2px 4px rgba(30,22,16,.12);
}
.case-mini-label::before{
  content:"";
  width:4px;height:4px;border-radius:50%;
  background:var(--sage);
}
.case-mini-label.hot::before{background:var(--paprika)}
.case-mini-label.amber::before{background:var(--amber)}

/* polaroid thumbnails */
.thumbs{
  display:flex;
  gap:14px;
  padding-inline:4px;
  justify-content:center;
  flex-wrap:wrap;
}
.thumb{
  position:relative;
  width:90px;
  height:90px;
  background:var(--paper-3);
  border:1px solid rgba(30,22,16,.15);
  border-radius:var(--r-2);
  padding:5px;
  cursor:pointer;
  transform:rotate(var(--rot, 0deg));
  box-shadow:var(--sh-card);
  transition:transform .3s cubic-bezier(.2,.9,.2,1.2),
             border-color .2s ease,
             box-shadow .3s ease;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.thumb:nth-child(1){--rot:-2.5deg}
.thumb:nth-child(2){--rot:1.8deg}
.thumb:nth-child(3){--rot:-1.2deg}
.thumb:nth-child(4){--rot:2.2deg}

.thumb:hover{
  transform:rotate(0) translateY(-3px);
  border-color:rgba(166,55,35,.4);
  box-shadow:0 2px 0 rgba(30,22,16,.06), 0 18px 24px -18px rgba(30,22,16,.45);
}
.thumb[aria-pressed="true"]{
  transform:rotate(0);
  border-color:var(--paprika);
  box-shadow:0 2px 0 rgba(30,22,16,.06), 0 18px 24px -18px rgba(30,22,16,.45);
}
.thumb[aria-pressed="true"]::after{
  content:"";
  position:absolute;
  inset:-4px;
  border:1.5px solid var(--paprika);
  border-radius:calc(var(--r-2) + 4px);
  opacity:.4;
}
.thumb svg{
  width:100%; height:100%;
  max-width:76px; max-height:76px;
}

/* ---------- Right (in RTL: left side) — the info column ---------- */
.info-column{
  padding-top:6px;
  position:sticky;
  top:96px;
  align-self:start;
}
@media (max-width:980px){
  .info-column{position:static; top:auto; padding-top:0}
}

.info-head{position:relative; margin-bottom:22px}

.info-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.28em;
  color:var(--paprika);
  text-transform:uppercase;
  margin-bottom:14px;
}
.info-kicker::before{
  content:"";
  width:24px; height:1px;
  background:var(--paprika);
}

.info-name{
  font-family:var(--ff-display);
  font-size:clamp(38px, 4.6vw, 68px);
  line-height:.96;
  color:var(--ink);
  font-weight:400;
  letter-spacing:-.008em;
  margin-bottom:14px;
}
.info-name em{font-style:normal; color:var(--paprika)}

/* rating row */
.info-rating{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--ink-3);
  margin-bottom:22px;
  flex-wrap:wrap;
}
.stars{display:inline-flex; gap:2px; color:var(--amber)}
.stars svg{width:14px;height:14px}
.info-rating b{
  color:var(--ink);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.info-rating .dot{opacity:.4}

/* badges row */
.info-badges{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:26px;
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px;
  background:rgba(30,22,16,.05);
  border:1px solid rgba(30,22,16,.12);
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  color:var(--ink-2);
  letter-spacing:.02em;
}
.badge::before{
  content:"";
  width:5px;height:5px;border-radius:50%;
  background:var(--sage);
}
.badge.hot::before{background:var(--paprika)}
.badge.smoked::before{background:var(--amber)}
.badge.fresh::before{background:#4CAF50}

/* the short description */
.info-desc{
  font-size:15px;
  line-height:1.9;
  color:var(--ink-2);
  margin-bottom:26px;
  max-width:52ch;
}
.info-desc b{color:var(--ink); font-weight:600}

/* the price panel — a kraft paper strip */
.price-panel{
  position:relative;
  background:
    radial-gradient(circle at 20% 15%, rgba(169,139,92,.22), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(169,139,92,.16), transparent 50%),
    linear-gradient(180deg, var(--kraft), var(--kraft-2));
  border-radius:var(--r-3);
  padding:22px 24px 20px;
  margin-bottom:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 0 rgba(30,22,16,.06),
    0 20px 30px -22px rgba(30,22,16,.45);
}
.price-panel::before,
.price-panel::after{
  content:"";
  position:absolute;
  inset-inline:20px;
  height:6px;
  background:
    radial-gradient(circle at 3px 8px, transparent 4px, var(--paper) 4.5px) 0 0/8px 6px repeat-x;
}
.price-panel::before{top:-1px}
.price-panel::after{
  bottom:-1px;
  background:
    radial-gradient(circle at 3px -2px, transparent 4px, var(--paper) 4.5px) 0 0/8px 6px repeat-x;
}

.price-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px;
  padding-bottom:12px;
  border-bottom:1.5px dashed rgba(30,22,16,.24);
  margin-bottom:14px;
}
.price-main{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.price-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.price-value{
  font-family:var(--ff-display);
  font-size:clamp(38px,4vw,52px);
  line-height:.9;
  color:var(--ink);
  font-weight:400;
  font-variant-numeric:tabular-nums;
  transition:color .3s ease, transform .25s cubic-bezier(.2,.9,.2,1.4);
}
.price-value small{
  font-family:var(--ff-body);
  font-size:13px;
  font-weight:600;
  color:var(--ink-3);
  letter-spacing:0;
  margin-inline-start:8px;
}
.price-panel.pulse .price-value{
  animation:pricePop .45s cubic-bezier(.2,.9,.2,1.5);
}
@keyframes pricePop{
  0%{transform:scale(1)}
  40%{transform:scale(1.06); color:var(--paprika)}
  100%{transform:scale(1)}
}

.price-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  font-size:12px;
  color:var(--ink-2);
  font-weight:600;
}
.price-meta span{
  display:inline-flex; align-items:center; gap:6px;
}
.price-meta span::before{
  content:"";
  width:4px;height:4px;border-radius:50%;
  background:var(--paprika);
}

/* option groups (weight, slice) */
.option-group{
  margin-bottom:22px;
}
.option-label{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.option-label span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.option-label b{
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.weight-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.weight-btn{
  position:relative;
  padding:14px 6px 12px;
  background:var(--paper-3);
  border:1.5px solid rgba(30,22,16,.14);
  border-radius:var(--r-2);
  font-size:13px;
  font-weight:700;
  color:var(--ink-2);
  transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
  font-variant-numeric:tabular-nums;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  cursor:pointer;
}
.weight-btn:hover{
  border-color:rgba(30,22,16,.32);
  transform:translateY(-1px);
}
.weight-btn[aria-pressed="true"]{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.weight-btn[aria-pressed="true"]::after{
  content:"";
  position:absolute;
  bottom:-1px; inset-inline:16px;
  height:3px;
  background:var(--amber-2);
  border-radius:2px 2px 0 0;
}
.weight-btn small{
  font-size:9.5px;
  font-weight:600;
  opacity:.7;
  font-variant-numeric:tabular-nums;
}
.weight-btn[aria-pressed="true"] small{opacity:.75}

.slice-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.slice-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 6px 10px;
  background:var(--paper-3);
  border:1.5px solid rgba(30,22,16,.14);
  border-radius:var(--r-2);
  cursor:pointer;
  transition:border-color .2s, background .2s, transform .2s;
}
.slice-btn:hover{border-color:rgba(30,22,16,.32); transform:translateY(-1px)}
.slice-btn[aria-pressed="true"]{
  border-color:var(--paprika);
  background:rgba(166,55,35,.05);
}
.slice-btn svg{
  width:42px; height:26px;
  color:var(--ink-2);
}
.slice-btn[aria-pressed="true"] svg{color:var(--paprika)}
.slice-btn span{
  font-size:11.5px;
  font-weight:700;
  color:var(--ink-2);
  letter-spacing:.02em;
}
.slice-btn[aria-pressed="true"] span{color:var(--ink)}

/* quantity + add row */
.action-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:stretch;
  margin-top:8px;
}

.qty{
  display:flex; align-items:center;
  background:var(--paper-3);
  border:1.5px solid rgba(30,22,16,.16);
  border-radius:999px;
  padding:4px;
  gap:2px;
}
.qty-btn{
  width:38px; height:38px;
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-2);
  transition:background .2s, color .2s;
  flex:none;
}
.qty-btn:hover{background:var(--ink); color:var(--paper)}
.qty-btn:disabled{opacity:.3; cursor:not-allowed}
.qty-btn:disabled:hover{background:transparent; color:var(--ink-2)}
.qty-btn svg{width:13px;height:13px}
.qty-display{
  min-width:44px;
  text-align:center;
  font-size:16px;
  font-weight:800;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.add-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 24px;
  background:var(--paprika); color:var(--paper-3);
  border-radius:999px;
  font-size:14.5px; font-weight:800;
  transition:transform .18s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 8px 0 -3px var(--paprika-2), 0 18px 26px -16px rgba(122,36,20,.6);
  position:relative;
  overflow:hidden;
}
.add-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 0 -3px var(--paprika-2), 0 24px 32px -16px rgba(122,36,20,.7);
}
.add-btn:active{
  transform:translateY(2px);
  box-shadow:0 4px 0 -3px var(--paprika-2);
}
.add-btn svg{width:16px;height:16px;flex:none}
.add-btn.is-added{
  background:var(--sage);
  box-shadow:0 8px 0 -3px #4A5238, 0 18px 26px -16px rgba(74,82,56,.6);
}
.add-btn .lbl{position:relative; z-index:1}

/* secondary actions */
.info-actions{
  display:flex; gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.ghost-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  background:transparent;
  border:1.5px solid rgba(30,22,16,.2);
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-2);
  transition:background .2s, color .2s, border-color .2s;
}
.ghost-btn:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.ghost-btn svg{width:14px;height:14px}
.ghost-btn.is-fav{border-color:var(--paprika); color:var(--paprika)}

/* shipping note */
.ship-note{
  display:flex; align-items:center; gap:12px;
  margin-top:22px;
  padding:14px 16px;
  background:rgba(30,22,16,.04);
  border:1px dashed rgba(30,22,16,.2);
  border-radius:var(--r-3);
  font-size:12.5px;
  color:var(--ink-2);
  line-height:1.7;
}
.ship-note svg{width:20px;height:20px; color:var(--sage); flex:none}
.ship-note b{color:var(--ink); font-weight:700}

/* ============================================================
   SPECS — kraft papers with stamps
   ============================================================ */
.specs-section{
  padding-block:clamp(48px,6vw,84px);
  background:var(--paper-2);
  position:relative;
  overflow:hidden;
}
.specs-section::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(166,55,35,.05), transparent 38%),
    radial-gradient(circle at 92% 88%, rgba(197,138,46,.06), transparent 40%);
  pointer-events:none;
}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  margin-bottom:clamp(32px,4vw,56px);
}
.section-title{
  font-family:var(--ff-display);
  font-size:clamp(34px,4.4vw,60px);
  line-height:.95;
  font-weight:400;
  letter-spacing:-.005em;
}
.section-title .sm{
  display:block;
  font-family:var(--ff-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--paprika);
  margin-bottom:14px;
  text-transform:uppercase;
}
.section-note{
  max-width:44ch;
  font-size:14.5px;
  color:var(--ink-3);
  line-height:1.85;
}

.specs-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px,2.4vw,28px);
  position:relative;
}
@media (max-width:900px){.specs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.specs-grid{grid-template-columns:1fr}}

.spec-card{
  position:relative;
  background:
    radial-gradient(circle at 25% 15%, rgba(169,139,92,.16), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(169,139,92,.1), transparent 55%),
    linear-gradient(180deg, var(--paper-3), var(--paper-2));
  border:1px solid rgba(30,22,16,.14);
  border-radius:var(--r-3);
  padding:26px 22px 22px;
  box-shadow:var(--sh-card);
  transform:rotate(var(--rot, 0deg));
  transition:transform .4s cubic-bezier(.2,.9,.2,1.2), box-shadow .35s ease;
}
.spec-card:hover{
  transform:rotate(0) translateY(-3px);
  box-shadow:0 2px 0 rgba(30,22,16,.06), 0 24px 34px -22px rgba(30,22,16,.45);
}
.spec-card:nth-child(1){--rot:-.7deg}
.spec-card:nth-child(2){--rot:.5deg}
.spec-card:nth-child(3){--rot:-.4deg}

/* the amber pin */
.spec-card::before{
  content:"";
  position:absolute;
  top:-8px;
  inset-inline-start:50%;
  transform:translateX(-50%);
  width:14px; height:14px;
  border-radius:50%;
  background:var(--amber-2);
  box-shadow:
    inset 0 -2px 3px rgba(0,0,0,.24),
    0 2px 4px rgba(0,0,0,.28);
}
/* the tape strip */
.spec-card::after{
  content:"";
  position:absolute;
  top:-2px;
  inset-inline-start:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:44px; height:13px;
  background:rgba(255,255,255,.28);
  border-radius:2px;
}

.spec-kicker{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.26em;
  color:var(--paprika);
  text-transform:uppercase;
  margin-bottom:8px;
}
.spec-title{
  font-family:var(--ff-display);
  font-size:clamp(20px,1.9vw,26px);
  line-height:1.15;
  color:var(--ink);
  font-weight:400;
  letter-spacing:-.005em;
  margin-bottom:16px;
}
.spec-title em{font-style:normal; color:var(--paprika)}

/* ingredient list */
.ing-list{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column;
  gap:8px;
}
.ing-list li{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:12px;
  padding-bottom:7px;
  border-bottom:1px dashed rgba(30,22,16,.16);
  font-size:13.5px;
  color:var(--ink-2);
}
.ing-list li:last-child{border-bottom:0}
.ing-list li b{
  font-weight:800;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  font-size:13px;
}
.ing-list li.primary b{color:var(--paprika)}

/* nutrition stats */
.nut-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.nut-stat{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px;
  background:rgba(30,22,16,.04);
  border-radius:var(--r-2);
}
.nut-stat .v{
  font-family:var(--ff-display);
  font-size:24px;
  line-height:1;
  color:var(--ink);
  font-weight:400;
  font-variant-numeric:tabular-nums;
}
.nut-stat .v small{
  font-family:var(--ff-body);
  font-size:10.5px;
  font-weight:600;
  color:var(--ink-3);
  margin-inline-start:3px;
}
.nut-stat .k{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink-3);
}

/* storage */
.store-list{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column;
  gap:14px;
}
.store-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:flex-start;
}
.store-icon{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  display:grid; place-items:center;
  flex:none;
}
.store-icon svg{width:15px;height:15px}
.store-list li b{
  display:block;
  font-size:13.5px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:2px;
  font-variant-numeric:tabular-nums;
}
.store-list li span{
  font-size:12.5px;
  color:var(--ink-3);
  line-height:1.65;
}

/* ============================================================
   PAIRINGS — with what
   ============================================================ */
.pairings{
  padding-block:clamp(56px,7vw,96px);
  background:var(--paper);
  position:relative;
}
.pairings::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(212,190,148,.25), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(166,55,35,.04), transparent 55%);
  pointer-events:none;
}

.pairings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,40px);
  position:relative;
}
@media (max-width:820px){.pairings-grid{grid-template-columns:1fr}}

.pairing-card{
  position:relative;
  background:
    radial-gradient(circle at 20% 15%, rgba(169,139,92,.15), transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(169,139,92,.1), transparent 50%),
    linear-gradient(180deg, var(--paper-3), var(--paper-2));
  border:1px solid rgba(30,22,16,.14);
  border-radius:var(--r-3);
  padding:clamp(24px,3vw,36px);
  box-shadow:var(--sh-card);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:22px;
  align-items:center;
  transition:transform .35s cubic-bezier(.2,.9,.2,1.2), box-shadow .3s;
}
.pairing-card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 0 rgba(30,22,16,.06), 0 24px 34px -22px rgba(30,22,16,.4);
}

.pairing-art{
  width:100px; height:100px;
  display:grid; place-items:center;
  flex:none;
  background:var(--paper);
  border-radius:50%;
  border:1px dashed rgba(30,22,16,.2);
  padding:14px;
}
.pairing-art svg{width:100%;height:100%}

.pairing-body{
  display:flex; flex-direction:column; gap:6px;
}
.pairing-kicker{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.24em;
  color:var(--paprika);
  text-transform:uppercase;
}
.pairing-title{
  font-family:var(--ff-display);
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.1;
  color:var(--ink);
  font-weight:400;
  letter-spacing:-.005em;
}
.pairing-text{
  font-size:13.5px;
  color:var(--ink-3);
  line-height:1.75;
}

/* ============================================================
   RELATED PRODUCTS — on a rail
   ============================================================ */
.related{
  padding-block:clamp(56px,7vw,96px) clamp(72px,10vw,120px);
  background:var(--paper-2);
  position:relative;
  overflow:hidden;
}
.related::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 5% 20%, rgba(166,55,35,.04), transparent 35%),
    radial-gradient(circle at 95% 80%, rgba(197,138,46,.05), transparent 40%);
  pointer-events:none;
}

/* the rail */
.related-rail{
  position:relative;
  height:2px;
  background:var(--ink);
  margin-bottom:0;
  margin-top:36px;
}
.related-rail::before, .related-rail::after{
  content:""; position:absolute; top:-4px;
  width:9px; height:9px; border-radius:50%;
  background:var(--ink);
}
.related-rail::before{inset-inline-start:14px}
.related-rail::after{inset-inline-end:14px}

.related-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(16px,2vw,28px);
  padding-top:0;
  position:relative;
}
@media (max-width:1000px){.related-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.related-grid{grid-template-columns:repeat(2,1fr); gap:20px 14px}}

.related-tag{
  position:relative;
  padding-top:var(--string, 44px);
  display:flex;
  flex-direction:column;
  transform:rotate(var(--rot, 0deg));
  transition:transform .5s cubic-bezier(.2,.9,.2,1.2);
}
.related-tag:hover{transform:rotate(0) translateY(-4px)}

.related-string{
  position:absolute;
  top:0; inset-inline-start:50%;
  width:1px;
  height:var(--string, 44px);
  background:linear-gradient(to bottom, var(--ink-4) 0 60%, var(--ink-3));
  transform:translateX(-50%);
}
.related-string::before{
  content:"";
  position:absolute;
  bottom:-3px; left:50%;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--ink);
  transform:translateX(-50%);
}

.related-body{
  position:relative;
  background:
    radial-gradient(circle at 25% 15%, rgba(169,139,92,.18), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(169,139,92,.12), transparent 55%),
    linear-gradient(180deg, var(--paper-3), var(--paper-2));
  border:1px solid rgba(30,22,16,.14);
  border-radius:var(--r-3);
  padding:22px 18px 18px;
  box-shadow:var(--sh-tag);
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:box-shadow .35s ease, border-color .35s ease;
}
.related-tag:hover .related-body{
  box-shadow:var(--sh-tag-h);
  border-color:rgba(166,55,35,.35);
}
.related-body::before{
  content:"";
  position:absolute;
  top:11px;
  inset-inline-start:50%;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--paper);
  box-shadow:inset 0 1px 2px rgba(30,22,16,.28);
  transform:translateX(-50%);
}
.related-body::after{
  content:"";
  position:absolute;
  inset-inline:18px;
  bottom:-1px;
  height:6px;
  background:
    radial-gradient(circle at 3px -2px, transparent 4px, var(--paper-3) 4.5px) 0 0/8px 6px repeat-x;
  pointer-events:none;
}

.related-art{
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 0;
}
.related-art svg{
  max-width:80%;
  max-height:100%;
  width:auto;
  filter:drop-shadow(0 4px 6px rgba(30,22,16,.14));
  transition:transform .5s cubic-bezier(.2,.9,.2,1.2);
}
.related-tag:hover .related-art svg{transform:translateY(-4px) rotate(-1.5deg)}

.related-kicker{
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  color:var(--paprika);
  text-align:center;
  margin-top:4px;
}
.related-title{
  font-family:var(--ff-display);
  font-size:clamp(19px,1.8vw,24px);
  line-height:1.1;
  font-weight:400;
  text-align:center;
  color:var(--ink);
  letter-spacing:-.005em;
  min-height:2.3em;
}
.related-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:12px;
  border-top:1px dashed rgba(30,22,16,.22);
  margin-top:auto;
}
.related-price{
  font-weight:800;
  font-size:13.5px;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.related-price small{
  display:block;
  font-size:9.5px;
  font-weight:600;
  color:var(--ink-3);
  letter-spacing:.06em;
}
.related-go{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  transition:transform .25s ease, background .25s ease;
  flex:none;
}
.related-go:hover{background:var(--paprika); transform:rotate(-90deg)}
.related-go svg{width:12px;height:12px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--ink);
  color:var(--paper);
  padding-top:clamp(56px,7vw,96px);
  padding-bottom:32px;
  position:relative;
  overflow:hidden;
}
.footer-rail{
  position:absolute;
  top:0; inset-inline:0;
  height:2px;
  background:rgba(241,232,211,.2);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:56px;
  border-bottom:1px solid rgba(241,232,211,.12);
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

.footer h4{
  font-family:var(--ff-body);
  font-size:11px; font-weight:800; letter-spacing:.22em;
  color:rgba(241,232,211,.55);
  text-transform:uppercase;
  margin-bottom:20px;
}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.footer ul a, .footer ul span{
  font-size:14px;
  color:rgba(241,232,211,.85);
  transition:color .2s ease;
  font-variant-numeric:tabular-nums;
}
.footer ul a:hover{color:var(--amber-2)}
.footer-brand{display:flex; flex-direction:column; gap:16px; max-width:38ch}
.footer-brand .brand{color:var(--paper)}
.footer-brand p{
  font-size:14px;
  color:rgba(241,232,211,.72);
  line-height:1.8;
}
.footer-bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:32px;
  font-size:12.5px;
  color:rgba(241,232,211,.5);
}
.footer-bottom .dot{color:var(--paprika-3)}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;
  bottom:28px;
  inset-inline-start:50%;
  transform:translateX(-50%) translateY(120%);
  background:var(--ink);
  color:var(--paper);
  padding:14px 22px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  box-shadow:0 20px 34px -14px rgba(0,0,0,.55);
  transition:transform .5s cubic-bezier(.2,.9,.2,1.2), opacity .35s ease;
  z-index:500;
  display:inline-flex; align-items:center; gap:10px;
  opacity:0;
  pointer-events:none;
  max-width:min(92vw, 420px);
}
.toast svg{width:15px;height:15px; color:var(--amber-2); flex:none}
.toast.is-on{transform:translateX(-50%) translateY(0); opacity:1}

/* flying slip animation */
.flying-slip{
  position:fixed;
  z-index:400;
  padding:10px 14px;
  background:var(--paper-3);
  border:1px solid rgba(30,22,16,.2);
  border-radius:4px;
  font-size:12px;
  font-weight:700;
  color:var(--ink);
  box-shadow:0 12px 20px -10px rgba(30,22,16,.5);
  pointer-events:none;
  transform-origin:50% 50%;
  will-change:transform, opacity;
  white-space:nowrap;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.flying-slip::before{
  content:"";
  position:absolute;
  top:2px;
  inset-inline-start:50%;
  width:6px;height:6px;border-radius:50%;
  background:var(--paper);
  box-shadow:inset 0 1px 2px rgba(30,22,16,.25);
  transform:translateX(-50%);
}

/* reveal */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.9,.2,1), transform .9s cubic-bezier(.2,.9,.2,1);
  transition-delay:var(--rd, 0s);
}
.reveal.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1; transform:none}
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* small mobile adjustments */
@media (max-width:520px){
  .weight-grid{grid-template-columns:repeat(2, 1fr)}
  .case-price-tag{transform:rotate(-4deg) scale(.9)}
  .case-mini-labels{display:none}
  .info-name{font-size:38px}
  .breadcrumb-back{width:100%; justify-content:center; margin-inline-end:0}
}