@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;
src:url('/fonts/fraunces-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;
src:url('/fonts/fraunces-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;
src:url('/fonts/fraunces-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;
src:url('/fonts/fraunces-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;
src:url('/fonts/publicsans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;
src:url('/fonts/publicsans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;
src:url('/fonts/publicsans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;
src:url('/fonts/publicsans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;
src:url('/fonts/publicsans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;
src:url('/fonts/publicsans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;
src:url('/fonts/publicsans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;
src:url('/fonts/publicsans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   Turkish Sweet Centre — v3
   Palette is fixed: green, gold, white. The work is making it
   Ottoman rather than generic.
   ============================================================ */

:root{
  /* ── Green carries the mass ───────────────────────────────
     Two greens, not one. Cypress for surfaces and type;
     pistachio is the colour of the raw nut inside fıstıklı.
     Values below are the "verdigris" glaze — the no-JS fallback
     and the first firing of the six-palette cycle set up below. */
  --cypress:#1E4A3A;
  --cypress-deep:var(--cypress);      /* headers, footers, large fields */
  --cypress-lift:#14907A;             /* hover on dark */
  --pistachio:var(--cypress-lift);    /* GRAPHIC ONLY, never text */
  --pistachio-ink:var(--cypress);     /* the text-safe pistachio */
  --pistachio-wash:#EDF2E4;   /* tint field — fixed across glazes */

  /* ── Gold is gilding, not a fill ──────────────────────────
     Budget: under 5% of any screen. Hairlines, strokes,
     small-caps labels, one border. */
  --gold:#A9761F;
  --gold-type:#E4C766;        /* labels on dark only */
  --gold-lo:#8B5A17;          /* hover/pressed on gold fills */
  --gold-ghost:rgba(201,162,39,.22);  /* fixed across glazes */

  /* ── White is structure ───────────────────────────────────
     Warm plaster, not cool paper — the zellij glaze needs a
     ground it can sit in. */
  --paper:#F3EADB;
  --paper-2:#F2E9D8;
  --paper-3:#E7ECE7;          /* fixed across glazes */

  /* Neutrals carry the glaze's own bias */
  --ink:#241B12;
  --ink-2:#3D4F46;            /* fixed across glazes */
  --ink-3:#705F49;
  --rule:#D6C7AC;
  --rule-2:rgba(18,32,25,.26);        /* fixed across glazes */

  /* Tertiary: syrup. Dark and brown — deliberately far from
     terracotta. Tray builder only, at small scale. Fixed across glazes. */
  --syrup:#9A5B18;
  --syrup-wash:#FBF3E7;

  --danger:#A4471F; --danger-wash:#FBEEE7;
  --ok:#1C6B43;     --ok-wash:#EDF7F1;

  --display:'Amiri',Georgia,'Times New Roman',serif;
  --body:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --num:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Type scale — 1.25 minor third, fluid */
  --t-xs:clamp(.72rem,.70rem + .10vw,.78rem);
  --t-sm:clamp(.82rem,.79rem + .14vw,.90rem);
  --t-md:clamp(.95rem,.92rem + .16vw,1.03rem);
  --t-lg:clamp(1.12rem,1.05rem + .32vw,1.28rem);
  --t-xl:clamp(1.35rem,1.20rem + .70vw,1.75rem);
  --t-2xl:clamp(1.70rem,1.40rem + 1.40vw,2.60rem);
  --t-3xl:clamp(2.30rem,1.55rem + 3.40vw,4.60rem);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --nav-h:60px;
  --wide:1280px;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* Corner + elevation. Flat hairline joinery is right for wide panels,
     but zero radius and zero shadow anywhere reads unfinished on the
     small tactile things — buttons, chips, inputs. Used only there. */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(14,50,34,.06),0 2px 6px rgba(14,50,34,.06);
  --sh-2:0 8px 24px rgba(14,50,34,.14);
  --sh-gold:0 8px 22px rgba(201,162,39,.28);

  /* Glass — frosted panels in the site's own palette, not generic
     purple-tinted glassmorphism. Dark glass sits on the hero/footer;
     light glass sits on the paper ground (nav, sticky toolbar). */
  --glass-dark-bg:rgba(14,50,34,.52);
  --glass-dark-border:rgba(232,204,106,.22);
  --glass-light-bg:rgba(252,253,252,.72);
  --glass-light-border:rgba(18,32,25,.09);
  --blur-sm:blur(10px) saturate(150%);
  --blur-md:blur(18px) saturate(160%);

  color-scheme:light;

  /* Additive aliases for the hero/signature port — these all derive from
     the base tokens above via var() indirection, so the six glaze blocks
     below only need to set the base tokens once and everything downstream
     (buttons, nav mark, progress thread, marquee, signature headings)
     re-glazes with them automatically. */
  --emerald:var(--cypress); --emerald-deep:var(--cypress-deep); --emerald-lift:var(--cypress-lift);
  --gold-2:var(--gold-type); --gold-soft:rgba(169,118,31,.34);
  --gold-grad:linear-gradient(135deg,var(--gold-lo) 0%,var(--gold-2) 38%,var(--gold) 55%,#F4E2A0 78%,var(--gold-lo) 100%);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --glass-light:rgba(252,251,247,.78); --glass-dark:rgba(36,27,18,.55); --blur:blur(14px) saturate(150%);
  --arabic:'Amiri','Geeza Pro','Traditional Arabic',serif;
}

/* ── Six glazes — the hero mosaic (and, via the aliases above, the rest
   of the site's gold/green accents) cycle through one of these on every
   visit. See app.js for the localStorage rotation that sets data-palette
   on <html> before first paint. */
html[data-palette="jade"]{
  --cypress:#124A38; --cypress-lift:#16B583; --gold:#916A1E; --gold-type:#E7C766; --gold-lo:#7A5616;
  --paper:#F2ECDC; --paper-2:#F4EDDD; --ink:#21301F; --ink-3:#6E6350; --rule:#D5C9AE;
  --danger:#A4471F; --ok:#12714B;
}
html[data-palette="cedar"]{
  --cypress:#1B3324; --cypress-lift:#4C7139; --gold:#805715; --gold-type:#DDBB63; --gold-lo:#6E4A12;
  --paper:#F1EDDC; --paper-2:#F4EEDF; --ink:#2A2416; --ink-3:#6E644D; --rule:#D2C8AC;
  --danger:#9E421C; --ok:#2F5B3B;
}
html[data-palette="lapis"]{
  --cypress:#173B63; --cypress-lift:#1F7E8C; --gold:#A2761E; --gold-type:#E5C46A; --gold-lo:#835D16;
  --paper:#F0E9DA; --paper-2:#F4EDDF; --ink:#1E2430; --ink-3:#655F51; --rule:#D1C4AA;
  --danger:#A34024; --ok:#1C6B55;
}
html[data-palette="saffron"]{
  --cypress:#7A3F14; --cypress-lift:#C47A1F; --gold:#9A6A16; --gold-type:#E9C766; --gold-lo:#7C5410;
  --paper:#F6ECDC; --paper-2:#F8EFE1; --ink:#302012; --ink-3:#79624B; --rule:#DEC8A8;
  --danger:#9E3218; --ok:#6F6A1E;
}
html[data-palette="pomegranate"]{
  --cypress:#5E1F2D; --cypress-lift:#9A3B4E; --gold:#A9791F; --gold-type:#E4C766; --gold-lo:#875D17;
  --paper:#F2E8DC; --paper-2:#F5EDE1; --ink:#2C1B1D; --ink-3:#715A55; --rule:#D7C3B4;
  --danger:#8F2F1F; --ok:#315A43;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  font-family:var(--body);font-size:var(--t-md);line-height:1.6;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
body.locked{overflow:hidden}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.015em;
  text-wrap:balance;font-optical-sizing:auto}
h4,h5{font-family:var(--body);font-weight:650;line-height:1.3}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Small-caps label — one of the few places gold sets type, and only on dark */
.label{font-family:var(--body);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.label-gold{color:var(--gold-type)}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
.eyebrow-dark{color:var(--pistachio-ink)}
.eyebrow-dark .eyebrow-star{stroke:var(--gold)}
.eyebrow-star{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:4;flex:none;
  animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.eyebrow-star{animation:none}}
.eyebrow .ar{font-family:var(--arabic);font-size:1.15em;letter-spacing:0;text-transform:none;
  color:var(--gold-2);opacity:.9}
.eyebrow-dark .ar{color:var(--gold)}
.label-ink{color:var(--ink-3)}

.glass{background:var(--glass-light-bg);-webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
  border:1px solid var(--glass-light-border)}
.glass-dark{background:var(--glass-dark-bg);-webkit-backdrop-filter:var(--blur-md);backdrop-filter:var(--blur-md);
  border-color:var(--glass-dark-border)}
.glass-chip{background:rgba(201,162,39,.12);-webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
  border:1px solid var(--gold-ghost);padding:6px 14px;border-radius:var(--r-pill);display:inline-block}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass-dark{background:var(--cypress-deep)}   /* Safari-old / Firefox-old fallback: solid, still legible */
}

.skip{position:absolute;top:-60px;left:12px;z-index:200;background:var(--cypress);
  color:var(--gold-type);padding:12px 20px;font-weight:600;transition:top .18s}
.skip:focus{top:8px}

/* ── Scroll progress ──────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:130;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--gold-grad);
  transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px rgba(201,162,39,.55)}

/* ── Girih ornament ───────────────────────────────────────── */
.girih{stroke:var(--gold);fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.rule-mark{display:flex;align-items:center;gap:18px;max-width:var(--wide);margin:0 auto;
  padding:0 clamp(16px,4vw,32px)}
.rule-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rule-2) 15%,var(--rule-2) 85%,transparent)}
.rule-mark svg{flex:none;opacity:.85}

/* Loading skeleton: the pattern constructs itself edge-inward, the way the
   geometry is actually built. Not a spinner. */
.constructing line{stroke:var(--gold);stroke-width:1.2;fill:none;
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:draw 1.6s var(--ease) infinite;animation-delay:calc(var(--i) * 55ms)}
@keyframes draw{0%{stroke-dashoffset:120}45%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.constructing line{stroke-dashoffset:0;animation:none}}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:12px 22px;font-size:var(--t-sm);font-weight:650;border-radius:var(--r-sm);
  border:1px solid transparent;will-change:transform;
  transition:background .18s,color .18s,border-color .18s,box-shadow .22s,
             transform .16s cubic-bezier(.34,1.56,.64,1);
  white-space:nowrap;letter-spacing:.005em}
.btn:hover:not([disabled]):not([aria-disabled="true"]){transform:translateY(-2px)}
.btn:active:not([disabled]):not([aria-disabled="true"]){
  transform:translateY(0) scale(.97);transition-duration:.08s}
.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed}
.btn-primary[disabled]{background:transparent;color:var(--ink-3);border-color:var(--rule)}
.btn-gold[disabled],.btn-line[disabled]{opacity:.45}
.btn-primary{background:var(--cypress);color:var(--paper);box-shadow:var(--sh-1)}
.btn-primary:hover:not([disabled]){background:var(--cypress-lift);box-shadow:var(--sh-2)}
.btn-gold{background:var(--gold-grad);background-size:200% 200%;color:var(--cypress-deep);
  box-shadow:var(--sh-gold);animation:goldpulse 3.4s ease-in-out infinite;position:relative;overflow:hidden}
@keyframes goldpulse{0%,100%{box-shadow:0 10px 30px -6px rgba(201,162,39,.5)}
  50%{box-shadow:0 12px 44px -4px rgba(201,162,39,.8),0 0 24px rgba(228,199,102,.35)}}
@media (prefers-reduced-motion:reduce){.btn-gold{animation:none}}
.btn-gold:hover:not([disabled]){box-shadow:0 16px 38px -6px rgba(201,162,39,.62)}
.btn-gold::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease);pointer-events:none}
.btn-gold:hover:not([disabled])::after{left:130%}
@media (prefers-reduced-motion:reduce){.btn-gold::after{display:none}}
.btn-ghost{border:1.5px solid rgba(252,251,247,.5);color:var(--paper);background:rgba(252,251,247,.04);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-ghost:hover:not([disabled]){border-color:var(--gold-2);color:var(--gold-2);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.btn-line{border-color:var(--rule-2);color:var(--ink);background:var(--paper)}
.btn-line:hover:not([disabled]){border-color:var(--cypress);background:var(--paper-2);box-shadow:var(--sh-1)}
.btn-onDark{border:1.5px solid rgba(252,253,252,.55);color:var(--paper);background:transparent}
.btn-onDark:hover:not([disabled]){border-color:var(--paper);background:rgba(252,253,252,.1);
  box-shadow:0 10px 26px rgba(0,0,0,.28)}
@media (prefers-reduced-motion:reduce){
  .btn:hover:not([disabled]),.btn:active:not([disabled]){transform:none}
}
.btn-block{width:100%}
.btn-sm{min-height:40px;padding:8px 16px;font-size:var(--t-xs)}
.btn-lg{min-height:54px;padding:16px 28px;font-size:var(--t-md)}

/* ── Nav ──────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);background:var(--paper);
  border-bottom:1px solid var(--rule);transition:background .25s,box-shadow .25s,border-color .25s}
.nav.glassed{background:rgba(252,253,252,.78);-webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
  border-color:var(--glass-light-border);box-shadow:var(--sh-1)}
.nav-home{background:transparent;border-bottom-color:transparent}
.nav-home.glassed{background:var(--glass-light);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-color:var(--rule)}
.nav-home:not(.glassed) .brand b{color:var(--ink)}
.nav-home:not(.glassed) .nav-links a{color:var(--ink-2)}
.nav-home:not(.glassed) .nav-links a:hover{color:var(--cypress)}
.nav-home:not(.glassed) .ibtn,.nav-home:not(.glassed) .burger{color:var(--ink)}
.nav-home:not(.glassed) .ibtn:hover{background:rgba(36,27,18,.08)}
.nav-home:not(.glassed) .status{color:var(--ink-2)}
@media (max-width:880px){.nav-home:not(.glassed) .nav-links{background:var(--paper)}
  .nav-home:not(.glassed) .nav-links a{color:var(--ink-2)}}
.nav-in{display:flex;align-items:center;gap:var(--s-5);height:100%}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0;min-height:44px}
.brand-mark{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--emerald-deep);box-shadow:inset 0 0 0 1px var(--gold-soft);
  transition:transform .5s var(--ease)}
.brand:hover .brand-mark{transform:rotate(45deg)}
.brand svg{width:22px;height:22px;flex:none}
.brand b{font-family:var(--display);font-size:var(--t-md);font-weight:700;
  letter-spacing:-.01em;color:var(--cypress);white-space:nowrap}
.nav-links{display:flex;gap:var(--s-1)}
.nav-links a{padding:8px 12px;font-size:var(--t-sm);font-weight:500;color:var(--ink-2)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--cypress);font-weight:650}
.nav-act{display:flex;align-items:center;gap:var(--s-2)}
.ibtn{position:relative;width:44px;height:44px;display:grid;place-items:center;color:var(--cypress);
  border-radius:var(--r-pill);transition:background .16s,transform .14s cubic-bezier(.34,1.56,.64,1)}
.ibtn:hover{background:var(--paper-2);transform:scale(1.08)}
.ibtn:active{transform:scale(.92);transition-duration:.08s}
@media (prefers-reduced-motion:reduce){.ibtn:hover,.ibtn:active{transform:none}}
.ibtn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6}
.dot{position:absolute;top:6px;right:5px;min-width:18px;height:18px;padding:0 5px;
  background:var(--cypress);color:var(--gold-type);font-size:11px;font-weight:700;
  display:none;place-items:center;border-radius:9px;line-height:1}
.dot.on{display:grid}
.burger{display:none}
@media (max-width:860px){
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;background:var(--paper);
    border-bottom:1px solid var(--rule);padding:var(--s-2) var(--s-4) var(--s-4);
    transform:translateY(calc(-100% - var(--nav-h) - 8px));visibility:hidden;
    transition:transform .26s var(--ease),visibility .26s;z-index:-1}
  .nav-links.open{transform:none;visibility:visible;z-index:1}
  .nav-links a{padding:14px 8px;font-size:var(--t-md);border-bottom:1px solid var(--rule)}
  .nav-links a:last-child{border-bottom:0}
  .burger{display:grid;place-items:center;width:44px;height:44px;color:var(--cypress)}
  .burger span{display:block;width:19px;height:1.5px;background:currentColor;transition:.22s var(--ease)}
  .burger span+span{margin-top:5px}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* Open/closed — computed Europe/London, single source of truth */
.status{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-xs);font-weight:600}
.status i{width:7px;height:7px;border-radius:50%;background:var(--pistachio);flex:none}
.status.shut i{background:var(--ink-3)}
/* The nav has no room for this on a phone, and the hero caption
   already carries it. Keep it for screen readers either way. */
@media (max-width:620px){
  .nav .status span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav .status{gap:0}
}

/* ── Hero — the hand-cut zellij panel ────────────────────────
   Ported from the final zellij-hero reference. A canvas mosaic lays
   itself down behind a torn plaster panel; the panel carries the
   copy. Colour comes entirely from the six glaze tokens above, so
   this needs no palette-specific rules of its own. */
@property --reveal{syntax:'<percentage>';inherits:false;initial-value:0%}
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:var(--paper)}
/* position:fixed + inset:0, not absolute-inside-.hero — the art is the page
   background, full stop. This is deliberately decoupled from .hero's own box:
   min-height:100svh inside a flex layout was measuring short on some mobile
   browsers (dynamic toolbar / viewport-unit timing), leaving a blank strip
   at the bottom. Fixed positioning against the real viewport can't do that. */
.mosaic{position:fixed;inset:0;z-index:0;transform:scale(1.055);
  animation:settle 2600ms cubic-bezier(.19,.72,.28,1) forwards}
#mosaic{display:block;width:100%;height:100%;
  -webkit-mask-image:radial-gradient(140% 140% at 50% 50%, #000 var(--reveal), transparent calc(var(--reveal) + 24%));
  mask-image:radial-gradient(140% 140% at 50% 50%, #000 var(--reveal), transparent calc(var(--reveal) + 24%));
  animation:lay 2400ms cubic-bezier(.24,.62,.3,1) forwards}
@keyframes lay{from{--reveal:0%}to{--reveal:100%}}
@keyframes settle{from{transform:scale(1.055)}to{transform:scale(1)}}
.lume{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(340px 340px at var(--mx,-999px) var(--my,-999px),
    rgba(255,231,171,.85), rgba(255,231,171,.22) 42%, transparent 72%);
  opacity:0; transition:opacity .5s ease}
.lume.on{opacity:1}

.hero-wrap{position:relative;z-index:3;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(22px,3.4vw,48px)}
.hero-wrap.wrap{max-width:none;margin-inline:0}

/* The "sheet" — just big enough to sit behind the words, not a full panel. */
.hero-copy{position:relative;width:fit-content;max-width:min(680px,86vw);
  text-align:center;
  padding:clamp(28px,6vw,52px) clamp(28px,7vw,60px);border-radius:var(--r-lg);
  background:
    radial-gradient(120% 80% at 18% 12%, rgba(251,245,233,.95) 0%, rgba(251,245,233,0) 58%),
    radial-gradient(90% 70% at 70% 90%, rgba(234,223,200,.9) 0%, rgba(234,223,200,0) 60%),
    linear-gradient(168deg,var(--paper-2) 0%,var(--paper) 58%,#E9DDC6 100%);
  box-shadow:0 14px 40px rgba(58,36,12,.24);
  opacity:0; animation:panelIn 900ms 380ms cubic-bezier(.2,.7,.3,1) forwards}
.hero-copy::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;mix-blend-mode:multiply;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E")}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero-title{font-size:var(--t-3xl);line-height:.94;color:var(--ink);margin:0;font-weight:400}
.hero-title .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.hero-title .w > i{display:inline-block;font-style:normal;will-change:transform}
.hero-title em{display:block;font-style:italic;color:var(--cypress)}
@media (max-width:640px){
  .hero-title{font-size:clamp(2rem,10vw,2.8rem)}
}
@media (prefers-reduced-motion:reduce){
  .mosaic,#mosaic,.hero-copy{animation:none!important;transform:none!important;opacity:1!important;
    -webkit-mask-image:none!important;mask-image:none!important}
  .lume{display:none}
}

/* ── Marquee ──────────────────────────────────────────────── */
.marquee{position:relative;overflow:hidden;background:var(--emerald);color:var(--paper);
  border-block:1px solid var(--gold-soft);padding-block:16px}
.marquee-track{display:flex;align-items:center;gap:clamp(26px,4vw,54px);width:max-content;
  animation:marquee 34s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.7rem);font-weight:500;
  letter-spacing:.04em;white-space:nowrap;font-style:italic}
.marquee-track svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:4;flex:none;
  animation:spin 18s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee-track svg{animation:none}}

/* ── Signature collection ─────────────────────────────────────
   No background photo here — a mosaic texture sat directly behind this
   heading in the source design and made it hard to read. Plain paper. */
.sec-sig{background:var(--paper);overflow:hidden}
.sig-grid{display:grid;gap:clamp(18px,2.6vw,30px);margin-top:clamp(28px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.sig-card{position:relative;border-radius:var(--r-md);background:var(--paper);
  border:1px solid var(--rule);overflow:hidden;box-shadow:0 1px 0 rgba(16,29,21,.04);
  transition:box-shadow .4s var(--ease),border-color .4s var(--ease);
  transform-style:preserve-3d;will-change:transform}
.sig-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--gold),transparent 30%,transparent 70%,var(--gold));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s}
.sig-card:hover{box-shadow:var(--sh-2);border-color:transparent}
.sig-card:hover::before{opacity:1}
.sig-link{position:absolute;inset:0;z-index:5}
.sig-fig{position:relative;aspect-ratio:4/3.2;overflow:hidden;background:var(--paper-3)}
.sig-fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.sig-card:hover .sig-fig img{transform:scale(1.07)}
.sig-rank{position:absolute;top:14px;right:18px;z-index:3;font-family:var(--display);
  font-size:2.4rem;font-weight:700;color:rgba(252,251,247,.85);
  text-shadow:0 2px 14px rgba(0,0,0,.35)}
.sig-body{position:relative;z-index:1;padding:22px 22px 24px}
.sig-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pistachio-ink);background:var(--pistachio-wash);padding:5px 10px;border-radius:var(--r-sm);
  margin-bottom:12px}
.sig-body h3{font-size:var(--t-xl);color:var(--emerald);margin-bottom:8px;font-weight:600;
  font-family:var(--display)}
.sig-body p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55;max-width:38ch}
.sig-price{display:flex;align-items:baseline;gap:8px;margin-top:16px;font-size:var(--t-xs);color:var(--ink-3)}
.sig-price b{font-family:var(--display);font-size:var(--t-lg);color:var(--gold);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);
    transition-delay:calc(var(--d,0) * 110ms);will-change:opacity,transform}
  [data-reveal].in{opacity:1;transform:none}
}

/* Google rating */
.stars{display:inline-flex;align-items:center;gap:6px}
.stars svg{width:13px;height:13px;fill:var(--gold-type);stroke:none}

/* ── Section furniture ────────────────────────────────────── */
.sec{padding-block:clamp(40px,6vw,80px)}
.sec-head{margin-bottom:var(--s-6);max-width:60ch}
.sec-head h2{font-size:var(--t-2xl);color:var(--cypress)}
.sec-head p{margin-top:var(--s-3);color:var(--ink-2);font-size:var(--t-md)}

/* ── Menu toolbar ─────────────────────────────────────────── */
.toolbar{position:sticky;top:var(--nav-h);z-index:50;background:var(--glass-light-bg);
  -webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
  border-block:1px solid var(--rule);padding-block:var(--s-3)}
.toolbar-row{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.search{position:relative;flex:1 1 260px;min-width:0}
.search input{width:100%;height:46px;padding:0 40px 0 42px;border:1px solid var(--rule-2);border-radius:var(--r-pill);
  background:var(--paper);font-size:var(--t-sm)}
.search input:focus{outline:none;border-color:var(--cypress);box-shadow:inset 0 0 0 1px var(--cypress)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  stroke:var(--ink-3);fill:none;stroke-width:1.6;pointer-events:none}
.sel{height:46px;padding:0 34px 0 14px;border:1px solid var(--rule-2);border-radius:var(--r-pill);background:var(--paper);
  font-size:var(--t-sm);font-weight:500;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B62' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.chips{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;padding-top:var(--s-3)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:44px;padding:0 15px;display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);
  border:1px solid var(--rule-2);font-size:var(--t-sm);font-weight:500;color:var(--ink-2);
  background:var(--paper);transition:.14s}
.chip{transition:border-color .16s,background .16s,color .16s,transform .14s cubic-bezier(.34,1.56,.64,1)}
.chip:hover{border-color:var(--cypress);transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.96);transition-duration:.08s}
.chip[aria-pressed="true"]{background:var(--cypress);border-color:var(--cypress);color:var(--paper);font-weight:650}
.chip-warn[aria-pressed="true"]{background:var(--danger);border-color:var(--danger)}
.chip-warn[aria-pressed="true"] .n{color:rgba(255,255,255,.85)}
.chip .n{font-size:var(--t-xs);color:var(--ink-3)}
.chip[aria-pressed="true"] .n{color:var(--gold-type)}

/* ── Kündekari grid ───────────────────────────────────────────
   Interlocking panels that meet on shared edges. No floating
   cards, no drop shadows — the joinery is the structure. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.card{position:relative;display:flex;flex-direction:column;background:var(--paper);
  transition:background .16s,box-shadow .2s,transform .2s;z-index:0}
.card:hover{background:var(--paper);box-shadow:var(--sh-2);transform:translateY(-2px);z-index:1}
.card-fig{position:relative;aspect-ratio:4/3;background:var(--paper-3);overflow:hidden}
.card-fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card-fig img{transform:scale(1.04)}
.card-flags{position:absolute;top:0;left:0;display:flex;flex-wrap:wrap;gap:1px}
.flag{padding:5px 9px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.flag-local{background:var(--cypress-deep);color:var(--gold-type)}
.flag-gram{background:var(--pistachio-wash);color:var(--pistachio-ink)}
.flag-out{position:absolute;inset:0;display:grid;place-items:center;background:rgba(252,253,252,.86)}
.flag-out span{background:var(--cypress);color:var(--paper);padding:7px 14px;font-size:var(--t-xs);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.card-body{display:flex;flex-direction:column;flex:1;gap:var(--s-2);padding:var(--s-4)}
.card-cat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pistachio-ink)}
.card h3{font-size:var(--t-lg);color:var(--cypress)}
.card-desc{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-link{position:absolute;inset:0;z-index:1}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:var(--s-2)}
.tag{padding:3px 8px;font-size:11px;font-weight:600;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--rule)}

/* ── Gallery — showcase only, no price, no buy ─────────────────
   Same kündekari joinery as the shopping grid, minus everything
   commerce-shaped. Cart/checkout stay in the codebase, inert;
   this is what actually ships while ordering is phone/WhatsApp only. */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.gal-card{position:relative;display:flex;flex-direction:column;background:var(--paper);
  transition:background .16s,box-shadow .2s,transform .2s}
.gal-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);z-index:1}
.gal-fig{position:relative;aspect-ratio:4/3;background:var(--paper-3);overflow:hidden}
.gal-fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal-card:hover .gal-fig img{transform:scale(1.04)}
.gal-card figcaption{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4)}
.gal-card h3{font-size:var(--t-lg);color:var(--cypress)}
.gal-card figcaption p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Rate + inline stepper live in the grid — the brief's 1.3 */
.card-buy{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--s-4) var(--s-4);border-top:1px solid var(--rule);position:relative;z-index:2}
.rate{line-height:1.15}
.rate b{display:block;font-family:var(--display);font-size:var(--t-lg);font-weight:700;
  color:var(--cypress);font-variant-numeric:tabular-nums}
.rate span{display:block;font-size:11px;color:var(--ink-3);font-weight:500;margin-top:2px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--rule-2);background:var(--paper);border-radius:var(--r-pill);overflow:hidden}
.stepper button{width:44px;height:44px;display:grid;place-items:center;color:var(--cypress);
  transition:background .14s,transform .12s cubic-bezier(.34,1.56,.64,1)}
.stepper button:hover:not([disabled]){background:var(--paper-2)}
.stepper button:active:not([disabled]){transform:scale(.85);transition-duration:.06s}
@media (prefers-reduced-motion:reduce){.stepper button:active{transform:none}}
.stepper button[disabled]{opacity:.3;cursor:not-allowed}
.stepper svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.stepper .v{min-width:52px;text-align:center;font-size:var(--t-sm);font-weight:700;
  font-variant-numeric:tabular-nums}
.card-add{margin:0 var(--s-4) var(--s-4);position:relative;z-index:2}

/* Skeleton matches the real card, never a bare "Loading…" */
.sk{background:var(--paper)}
.sk-fig{aspect-ratio:4/3;background:var(--paper-3)}
.sk-body{padding:var(--s-4);display:grid;gap:10px}
.sk-l{height:11px;background:var(--paper-3)}
.sk-l.w40{width:40%}.sk-l.w70{width:70%}.sk-l.w55{width:55%}

.empty{grid-column:1/-1;padding:var(--s-8) var(--s-4);text-align:center;background:var(--paper)}
.empty h3{font-size:var(--t-xl);color:var(--cypress);margin-bottom:var(--s-2)}
.empty p{color:var(--ink-3);margin-bottom:var(--s-4)}

.count-line{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  flex-wrap:wrap;padding-block:var(--s-4);font-size:var(--t-sm);color:var(--ink-3)}
.count-line b{color:var(--ink);font-weight:650}
.linkish{color:var(--pistachio-ink);font-weight:650;text-decoration:underline;text-underline-offset:3px}

/* ── Tray builder ─────────────────────────────────────────── */
.tray-layout{display:grid;gap:var(--s-6)}
@media(min-width:1000px){.tray-layout{grid-template-columns:1fr 380px;align-items:start}}
.tray-step{border:1px solid var(--rule);background:var(--paper);margin-bottom:var(--s-4)}
.tray-step > h2{font-size:var(--t-lg);color:var(--cypress);padding:var(--s-4);
  border-bottom:1px solid var(--rule);display:flex;align-items:baseline;gap:10px}
.tray-step > h2 .label{color:var(--pistachio-ink)}
.tray-body{padding:var(--s-4)}
.sizes,.mixes{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.opt{border:1px solid var(--rule-2);background:var(--paper);padding:var(--s-4);text-align:left;border-radius:var(--r-md);
  transition:border-color .16s,background .16s,color .16s,transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .16s;
  min-height:48px}
.opt:hover{border-color:var(--cypress);transform:translateY(-2px);box-shadow:var(--sh-1)}
.opt:active{transform:translateY(0) scale(.98);transition-duration:.08s}
.opt[aria-pressed="true"]{border-color:var(--cypress);background:var(--cypress);color:var(--paper)}
.opt b{display:block;font-family:var(--display);font-size:var(--t-lg);font-weight:700}
.opt span{display:block;font-size:var(--t-xs);opacity:.75;margin-top:3px}

/* The signature: fill bar as girih tessellation.
   Tiles are claimed by variety; the gold linework only completes
   when the tray is exactly full. */
.fill{border:1px solid var(--rule);background:var(--cypress-deep);padding:var(--s-4);position:relative}
.fill svg{width:100%;height:auto;display:block}
.fill .cell{fill:transparent;transition:fill .28s var(--ease)}
.fill .strap{stroke:var(--gold-ghost);stroke-width:.6;fill:none;vector-effect:non-scaling-stroke;transition:stroke .3s var(--ease)}
.fill.complete .strap{stroke:var(--gold)}
.fill.over .strap{stroke:var(--danger)}
.fill-read{display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  margin-top:var(--s-3);font-size:var(--t-sm);color:rgba(252,253,252,.82)}
.fill-read b{color:var(--gold-type);font-weight:700}
.fill.over .fill-read b{color:#F0A79A}

.variety{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-3);align-items:center;
  padding:var(--s-3) 0;border-bottom:1px solid var(--rule)}
.variety:last-child{border-bottom:0}
.swatch{width:22px;height:22px;border:1px solid var(--rule-2)}
.variety-name{font-weight:600;font-size:var(--t-sm);color:var(--ink)}
.variety-rate{font-size:11px;color:var(--ink-3)}

.summary{border:1px solid var(--rule);background:var(--paper)}
@media(min-width:1000px){.summary{position:sticky;top:calc(var(--nav-h) + 16px)}}
.summary h2{font-size:var(--t-lg);color:var(--cypress);padding:var(--s-4);border-bottom:1px solid var(--rule)}
.summary-body{padding:var(--s-4)}
.srow{display:flex;justify-content:space-between;gap:var(--s-3);font-size:var(--t-sm);
  padding-block:6px;color:var(--ink-2)}
.srow.total{border-top:1px solid var(--rule-2);margin-top:var(--s-2);padding-top:var(--s-3);
  font-size:var(--t-md);color:var(--ink);font-weight:700}
.srow.total b{font-family:var(--display);font-size:var(--t-xl)}
.srow span:last-child{font-variant-numeric:tabular-nums}

.msg{display:flex;gap:10px;padding:11px 13px;font-size:var(--t-sm);line-height:1.5;
  border:1px solid transparent;margin-block:var(--s-3)}
.msg svg{width:16px;height:16px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.7}
.msg-info{background:var(--pistachio-wash);border-color:rgba(122,154,78,.35);color:var(--pistachio-ink)}
.msg-warn{background:var(--syrup-wash);border-color:rgba(154,91,24,.3);color:var(--syrup)}
.msg-err{background:var(--danger-wash);border-color:rgba(155,44,34,.3);color:var(--danger)}
.msg-ok{background:var(--ok-wash);border-color:rgba(28,107,67,.3);color:var(--ok)}

/* ── Drawer / dialogs ─────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(14,50,34,.4);-webkit-backdrop-filter:var(--blur-sm);
  backdrop-filter:var(--blur-sm);opacity:0;visibility:hidden;
  transition:opacity .26s,visibility .26s;z-index:90}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--glass-light-bg);
  -webkit-backdrop-filter:var(--blur-md);backdrop-filter:var(--blur-md);
  display:flex;flex-direction:column;transform:translateX(101%);visibility:hidden;
  transition:transform .3s var(--ease),visibility .3s;z-index:91;border-left:1px solid var(--glass-light-border);
  box-shadow:var(--sh-2)}
.drawer.on{transform:none;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-4);border-bottom:1px solid var(--rule);flex:none}
.drawer-head h2{font-size:var(--t-lg);color:var(--cypress)}
.drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--s-4)}
.drawer-foot{flex:none;border-top:1px solid var(--rule);padding:var(--s-4);
  padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom))}

.line{display:grid;grid-template-columns:56px 1fr auto;gap:var(--s-3);
  padding-block:var(--s-3);border-bottom:1px solid var(--rule)}
.line:last-child{border-bottom:0}
.line img{width:56px;height:56px;object-fit:cover;background:var(--paper-3)}
.line-name{font-size:var(--t-sm);font-weight:600;color:var(--cypress);line-height:1.3}
.line-meta{font-size:11px;color:var(--ink-3);margin-top:2px}
.line-price{font-size:var(--t-sm);font-weight:700;font-variant-numeric:tabular-nums;color:var(--cypress)}
.line-rm{width:30px;height:30px;display:grid;place-items:center;color:var(--ink-3);align-self:start}
.line-rm:hover{color:var(--danger);background:var(--danger-wash)}
.line-rm svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ── Mobile action bar — thumb-first ──────────────────────── */
.thumb{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;gap:var(--s-3);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--paper);
  border-top:1px solid var(--rule-2);transform:translateY(110%);transition:transform .26s var(--ease)}
.thumb.on{transform:none}
.thumb-info{flex:1;min-width:0;line-height:1.2}
.thumb-info span{display:block;font-size:11px;color:var(--ink-3);font-weight:600}
.thumb-info b{font-family:var(--display);font-size:var(--t-lg);color:var(--cypress);
  font-variant-numeric:tabular-nums}
@media (max-width:860px){.thumb{display:flex}}

.toasts{position:fixed;left:50%;transform:translateX(-50%);z-index:120;display:grid;gap:8px;
  justify-items:center;pointer-events:none;width:max-content;max-width:92vw;
  bottom:calc(20px + env(safe-area-inset-bottom))}
@media (max-width:860px){.toasts{top:calc(var(--nav-h) + 10px);bottom:auto}}
.toast{display:flex;align-items:center;gap:9px;padding:11px 18px;background:var(--cypress);border-radius:var(--r-sm);box-shadow:var(--sh-2);
  color:var(--paper);font-size:var(--t-sm);font-weight:600;border:1px solid var(--gold-ghost);
  animation:tin .26s var(--ease)}
.toast svg{width:16px;height:16px;stroke:var(--gold-type);fill:none;stroke-width:2}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Product page ─────────────────────────────────────────── */
.crumbs{font-size:var(--t-xs);color:var(--ink-3);padding-block:var(--s-4)}
.crumbs a:hover{color:var(--cypress);text-decoration:underline}
.crumbs span{margin-inline:6px;color:var(--rule-2)}
.pdp{display:grid;gap:var(--s-6);padding-bottom:var(--s-8)}
@media(min-width:900px){.pdp{grid-template-columns:1fr 1fr;align-items:start}}
.pdp-fig{aspect-ratio:1;background:var(--paper-3);border:1px solid var(--rule);overflow:hidden}
.pdp-fig img{width:100%;height:100%;object-fit:cover}
.pdp h1{font-size:var(--t-2xl);color:var(--cypress);margin-block:var(--s-2) var(--s-3)}
.pdp-rate{font-family:var(--display);font-size:var(--t-xl);font-weight:700;color:var(--cypress)}
.pdp-rate small{font-family:var(--body);font-size:var(--t-sm);font-weight:500;color:var(--ink-3)}
.pdp-desc{margin-block:var(--s-4);color:var(--ink-2);line-height:1.7}
.pdp-buy{border:1px solid var(--rule);padding:var(--s-4);margin-top:var(--s-4)}
.weights{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:var(--s-2);
  margin-bottom:var(--s-4)}
.weight{border:1px solid var(--rule-2);padding:11px 8px;text-align:center;min-height:48px;border-radius:var(--r-sm);
  transition:border-color .16s,background .16s,color .16s,transform .14s cubic-bezier(.34,1.56,.64,1)}
.weight:hover{border-color:var(--cypress);transform:translateY(-2px)}
.weight:active{transform:translateY(0) scale(.96);transition-duration:.08s}
.weight[aria-pressed="true"]{border-color:var(--cypress);background:var(--cypress);color:var(--paper)}
.weight b{display:block;font-size:var(--t-sm);font-weight:700}
.weight span{display:block;font-size:11px;opacity:.8;font-variant-numeric:tabular-nums}

/* ── Footer ───────────────────────────────────────────────── */
/* ── Footer — one slim band, not four columns of prose.
   Solid, not glass: nothing sits behind the footer for a blur to catch,
   so a translucent tint here just blends toward the page background and
   fails contrast. Glass is for panels that overlay other content. */
.foot{background:var(--cypress-deep);color:rgba(252,253,252,.86);border-top:1px solid var(--gold-ghost)}
.foot-row{display:flex;align-items:center;gap:var(--s-5) var(--s-6);flex-wrap:wrap;
  padding-block:var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom))}
.foot-brand{display:flex;align-items:center;gap:14px;flex:none}
.foot-brand strong{font-family:var(--display);font-size:var(--t-sm);color:var(--paper);white-space:nowrap}
.foot-dim{color:rgba(252,253,252,.55)}
.foot-links{display:flex;flex-wrap:wrap;gap:2px 8px;flex:1;font-size:var(--t-xs)}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:2px 6px}
.foot-links a:hover{color:var(--gold-type);text-decoration:underline}
.foot-copy{font-size:var(--t-xs);color:rgba(252,253,252,.5);white-space:nowrap;flex:none}
.foot-je{display:inline-flex;align-items:center;min-height:44px;color:rgba(252,253,252,.55);text-decoration:underline;text-underline-offset:2px}
.foot-je:hover{color:rgba(252,253,252,.65)}
@media (max-width:860px){
  .foot-row{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .foot-copy{width:100%;order:9}
}

/* Page-load: one orchestrated sequence, not scattered effects */
@media (prefers-reduced-motion:no-preference){
  .enter{opacity:0;transform:translateY(10px);animation:enter .5s var(--ease) forwards;
    animation-delay:calc(var(--d,0) * 70ms)}
  @keyframes enter{to{opacity:1;transform:none}}
}