/* ---- Self-hosted type ----------------------------------------------------
 * Was two preconnects and a render-blocking stylesheet on fonts.googleapis.com. These are the same files Google
 * serves, fetched 2026-10-06 and kept here, so the fonts come from the same origin as the page and the browser
 * needs no third-party connection before it can draw text.
 *
 * Both families are variable, which is why there is one file per style and not one per weight: Google sends the
 * identical bytes for 400, 500 and 600 of Instrument Sans, so the weight RANGE on each rule is what lets the
 * browser interpolate. Latin and Latin-Extended are split on the same unicode-range Google uses, so a page with
 * no accented characters never fetches the second file. Persian is not here: Vazirmatn is loaded only where
 * Persian is actually set. font-display:swap keeps text visible while they load, as the Google sheet did.
 */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/bodoni-moda-normal-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:'Bodoni Moda';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/bodoni-moda-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 600;font-display:swap;src:url(/fonts/bodoni-moda-italic-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:'Bodoni Moda';font-style:italic;font-weight:400 600;font-display:swap;src:url(/fonts/bodoni-moda-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/instrument-sans-normal-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:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/instrument-sans-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Vazirmatn, for Persian. These rules sit on every page, but a browser fetches a file only when a character in
 * its unicode-range is actually used, so an English page downloads nothing. The brand guideline reserves this
 * face for Persian; /fa is where that use lives. */
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/vazirmatn-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/vazirmatn-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}


:root{
    --espresso:#4A2B2B; --crema:#F6EEE5; --ink:#1C1412; --cacao:#6B4A3A;
    --pistachio:#5C6B42; --pistachio-l:#8A9A5B;
    --card:#FFFDFA; --rule:rgba(74,43,43,.14); --hair:rgba(74,43,43,.26);
    --muted:rgba(28,20,18,.62);
    --w:1120px; --gut:24px; --r:20px;
    --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
    --serif:'Bodoni Moda',Didot,'Times New Roman',serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{background:var(--crema);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  .wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--pistachio);outline-offset:3px;border-radius:4px}

  /* ---------- header ---------- */
  .hdr{position:sticky;top:0;z-index:50;height:52px;
       background:rgba(246,238,229,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
       border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
  .hdr.stuck{border-bottom-color:var(--rule)}
  .hdr .wrap{height:100%;display:flex;align-items:center;gap:28px}
  .brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
  .brand svg{width:30px;height:30px;display:block}
  .nav{flex:1;display:flex;justify-content:center;gap:clamp(18px,2.6vw,34px);list-style:none}
  .nav a{font-size:12.5px;font-weight:500;color:var(--ink);opacity:.86;white-space:nowrap;padding:6px 0;transition:opacity .15s}
  .nav a:hover{opacity:1;color:var(--espresso)}
  .tools{display:flex;align-items:center;gap:22px;flex:0 0 auto}
  .tools button,.tools a{display:grid;place-items:center;width:28px;height:28px;color:var(--espresso);opacity:.9}
  .tools button:hover,.tools a:hover{opacity:1}
  .tools svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .tools .burger{display:none}
  .mnav{display:none}
  @media (max-width:880px){
    .nav{display:none}
    .tools .burger{display:grid}
    .hdr .wrap{gap:16px}
    .brand{flex:1}
    .mnav{display:block;position:fixed;inset:52px 0 0 0;z-index:49;background:var(--crema);padding:12px var(--gut) 40px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;overflow:auto}
    .mnav.open{opacity:1;transform:none;pointer-events:auto}
    .mnav a{display:block;font-size:22px;font-weight:500;padding:14px 0;border-bottom:1px solid var(--rule)}
    .mnav a:last-child{border-bottom:0}
  }

  /* ---------- ribbon ---------- */
  .ribbon{background:var(--card);border-bottom:1px solid var(--rule);text-align:center;padding:12px var(--gut);font-size:13px;color:var(--ink)}
  .ribbon a{color:var(--pistachio);font-weight:500}
  .ribbon a:hover{text-decoration:underline}

  /* ---------- hero ---------- */
  .hero .wrap{display:grid;grid-template-columns:1fr auto;align-items:start;gap:32px;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(28px,4vw,44px)}
  .hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7vw,84px);line-height:.98;letter-spacing:.005em;color:var(--ink)}
  .hero h1 em{font-style:italic;color:var(--espresso)}
  .hero .side{text-align:right;padding-top:clamp(6px,1vw,14px);max-width:360px}
  .hero .side p{font-size:clamp(17px,1.7vw,21px);font-weight:600;line-height:1.25;color:var(--ink)}
  .hero .side .links{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
  .hero .side .links a{color:var(--pistachio);font-weight:500}
  .hero .side .links a:hover{text-decoration:underline}
  .hero .side .links a::after{content:" ↗";font-size:11px}
  @media (max-width:720px){
    .hero .wrap{grid-template-columns:1fr;gap:18px}
    .hero .side{text-align:left;max-width:none}
    .hero .side .links{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
  }

  /* ---------- category rail ---------- */
  .cats{padding:clamp(10px,2vw,20px) 0 clamp(36px,5vw,64px)}
  .cats ul{list-style:none;display:flex;gap:clamp(8px,1.5vw,18px);overflow-x:auto;scroll-snap-type:x proximity;padding:10px var(--gut) 8px;margin:0 auto;max-width:var(--w);scrollbar-width:none}
  .cats ul::-webkit-scrollbar{display:none}
  .cats li{flex:0 0 auto;scroll-snap-align:start;animation:cat-in .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 60ms)}
  .cats a{display:flex;flex-direction:column;align-items:center;gap:14px;width:clamp(92px,9.4vw,118px);text-align:center;font-size:12.5px;font-weight:500;color:var(--ink);transition:color .2s}
  .cats .ph{position:relative;display:block;width:clamp(64px,6.4vw,80px);height:clamp(64px,6.4vw,80px);color:var(--espresso);
            animation:cat-float 5.6s ease-in-out infinite;animation-delay:calc(var(--i) * -0.7s)}
  .cats .ph svg,.cats .ph img{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 62%;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
  /* the shadow the mark casts on the counter: shrinks and fades as the mark lifts */
  .cats .ph::after{content:"";position:absolute;left:18%;right:18%;bottom:-11px;height:9px;border-radius:50%;
            background:radial-gradient(ellipse at center,rgba(74,43,43,.26),rgba(74,43,43,0) 72%);
            animation:cat-shade 5.6s ease-in-out infinite;animation-delay:calc(var(--i) * -0.7s)}
  .cats a:hover{color:var(--espresso)}
  .cats a:hover .ph svg,.cats a:focus-visible .ph svg,.cats a:hover .ph img,.cats a:focus-visible .ph img{animation:cat-wobble .8s cubic-bezier(.34,1.56,.64,1) both}
  @keyframes cat-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-1.6deg)}}
  @keyframes cat-shade{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.72);opacity:.5}}
  @keyframes cat-wobble{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.14) rotate(-5deg)}60%{transform:scale(1.1) rotate(4deg)}100%{transform:scale(1.12) rotate(0)}}
  @keyframes cat-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .cats li,.cats .ph,.cats .ph::after,.cats a:hover .ph svg,.cats a:hover .ph img{animation:none}
    .cats a:hover .ph svg,.cats a:hover .ph img{transform:scale(1.08)}
  }

  /* ---------- sections ---------- */
  .sec{padding:clamp(28px,4vw,48px) 0 clamp(8px,1vw,12px)}
  .sec{--h2:clamp(22px,2.4vw,28px)}
  .sec h2{font-size:var(--h2);line-height:1.2;font-weight:600;letter-spacing:-.005em;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
  .sec h2 .lead{font-family:var(--serif);font-weight:400;font-size:1.22em;letter-spacing:0;color:var(--ink)}
  .sec h2 .sub{font-weight:400;color:var(--cacao);font-size:min(1em,calc((100vw - 48px) / 25));white-space:nowrap;line-height:1.25}
  .sec .wrap + .rail-wrap,.sec h2 + .grid{margin-top:calc(var(--h2) * .32)}

  /* rails */
  .rail-wrap{position:relative}
  .rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:var(--gut);padding:0 var(--gut) 28px;margin:0 auto;max-width:var(--w);scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail>*{flex:0 0 auto;scroll-snap-align:start}
  .arrow{position:absolute;top:calc(50% - 32px);right:max(8px,calc((100% - var(--w))/2 + 8px));width:36px;height:36px;border-radius:50%;
         background:rgba(255,253,250,.92);box-shadow:0 2px 10px rgba(74,43,43,.16);display:grid;place-items:center;color:var(--ink);opacity:0;transition:opacity .2s,background .15s;z-index:2}
  .arrow.prev{right:auto;left:max(8px,calc((100% - var(--w))/2 + 8px))}
  .arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .rail-wrap:hover .arrow,.arrow:focus-visible{opacity:1}
  .arrow[disabled]{opacity:0!important;pointer-events:none}
  @media (hover:none){.arrow{display:none}}

  /* cards */
  .card{background:var(--card);border-radius:var(--r);box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06);
        display:flex;flex-direction:column;overflow:hidden;position:relative;color:var(--ink);transition:transform .25s,box-shadow .25s}
  .card:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(74,43,43,.05),0 14px 34px rgba(74,43,43,.10)}
  .card.dark{background:var(--espresso);color:var(--crema)}
  .card.dark .price,.card.dark .eyebrow{color:rgba(246,238,229,.72)}
  .card.tint{background:#EFE3D6}
  .card .txt{padding:28px 28px 0}
  .eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--pistachio);margin-bottom:8px}
  .card h3{font-size:clamp(20px,1.9vw,23px);font-weight:600;line-height:1.2;letter-spacing:-.005em}
  .card .price{font-size:14px;color:var(--cacao);margin-top:8px}
  .card .desc{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:8px;max-width:30ch}
  .card.dark .desc{color:rgba(246,238,229,.78)}
  .card .ph{flex:1;display:flex;align-items:center;justify-content:center;padding:22px 28px 30px;min-height:0}
  .card .ph img{width:82%;height:100%;max-height:230px;object-fit:contain}
    .card.photo .ph img{width:78%;max-height:230px;aspect-ratio:1;object-fit:cover;border-radius:14px}
  .card.mark .ph img{width:44%;max-height:120px;opacity:.9}
  /* each variant's own picture decides how it sits: a cut-out whole, a photograph cropped square, a mark small */
  .card.prod .slide.ph-cut .ph img{width:82%;height:100%;max-height:230px;aspect-ratio:auto;object-fit:contain;border-radius:0}
  .card.prod .slide.ph-photo .ph img{width:78%;max-height:230px;aspect-ratio:1;object-fit:cover;border-radius:14px}
  .card.prod .slide.ph-mark .ph img{width:44%;max-height:120px;opacity:.9;aspect-ratio:auto;object-fit:contain;border-radius:0}
  .prod{width:clamp(250px,26vw,300px);height:clamp(400px,42vw,470px)}
  /* ---- product card: flip + variant scroll ---- */
  .card.prod{perspective:1400px;overflow:visible;background:transparent;box-shadow:none}
  .card.prod:hover{transform:none}
  .card.prod .flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.1,.2,1)}
  .card.prod.flipped .flip{transform:rotateY(180deg)}
  .card.prod .face{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;background:var(--card);
        box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:box-shadow .25s}
  .card.prod:hover .face{box-shadow:0 1px 0 rgba(74,43,43,.05),0 14px 34px rgba(74,43,43,.10)}
  .card.prod.dark .face{background:var(--espresso)}
  .card.prod.tint .face{background:#EFE3D6}
  .card.prod .face.back{transform:rotateY(180deg);display:flex;flex-direction:column}
  .card.prod .face.back .txt{padding:24px 24px 56px;overflow:hidden;height:100%;display:flex;flex-direction:column}
  .card.prod .face.back h3{font-size:clamp(18px,1.6vw,21px)}
  .card.prod .face.back .vdesc{display:none;margin-top:10px;min-height:0}
  .card.prod .face.back .vdesc.on{display:block}
  .card.prod .face.back .vname{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--cacao);margin-bottom:6px}
  .card.prod.dark .face.back .vname{color:rgba(246,238,229,.72)}
  .card.prod .face.back .desc{margin-top:0;font-size:clamp(12.5px,1vw,14px);line-height:1.45;color:var(--ink);max-width:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:12;overflow:hidden;text-wrap:pretty}
  .card.prod .face.back .note{margin-top:6px;font-size:clamp(11.5px,.9vw,12.5px);line-height:1.4;color:var(--cacao);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .card.prod.dark .face.back .note{color:rgba(246,238,229,.72)}
  .card.prod .face.back .txt{position:relative}
  .card.prod .face.back .meta.ings{position:absolute;left:24px;right:56px;bottom:14px;justify-content:flex-start;gap:6px}
  .card.prod .face.back .meta.ings .badge+.badge{margin-left:0}
  .card.prod.dark .face.back .desc{color:rgba(246,238,229,.86)}
  .card.prod .vscroll{height:100%;overflow:hidden;--i:0;touch-action:pan-y}
  .card.prod .slide{height:100%;display:flex;flex-direction:column;transform:translateY(calc(var(--i) * -100%));transition:transform .48s cubic-bezier(.2,.7,.2,1);will-change:transform}
  @media (prefers-reduced-motion:reduce){.card.prod .slide{transition:none}}
  .card.prod .slide .txt{padding-right:40px}
  .card.prod .price{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
  .card.prod .price .var{font-weight:600;color:var(--ink)}
  .card.prod.dark .price .var{color:var(--crema)}
  .card.prod h3 a{color:inherit}
  .card.prod h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
  .card.prod .dots{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;padding:4px}
  .card.prod .dots button{width:7px;height:7px;border-radius:50%;background:rgba(74,43,43,.22);padding:0;transition:background .2s,transform .2s}
  .card.prod .dots button.on{background:var(--espresso);transform:scale(1.25)}
  .card.prod.dark .dots button{background:rgba(246,238,229,.32)}
  .card.prod.dark .dots button.on{background:var(--crema)}
  .card.prod .info{position:absolute;right:14px;bottom:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
        background:rgba(255,253,250,.9);box-shadow:inset 0 0 0 1px var(--hair);color:var(--espresso);
        font-family:var(--serif);font-style:italic;font-size:15px;line-height:1;transition:background .15s,transform .15s}
  .card.prod .info:hover{background:#fff;transform:scale(1.06)}
  .card.prod .info svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .card.prod.dark .info{background:rgba(246,238,229,.14);box-shadow:inset 0 0 0 1px rgba(246,238,229,.35);color:var(--crema)}
  .card.prod.dark .info:hover{background:rgba(246,238,229,.24)}
  /* variant meta: size detail in small type, dietary badges — bottom right, left of the "i" */
  .card.prod .slide{position:relative}
  .card.prod .meta{position:absolute;left:56px;right:54px;bottom:14px;display:flex;align-items:center;justify-content:flex-end;gap:8px}
  .card.prod .meta .badge+.badge{margin-left:-4px}
  .card.prod .meta .detail{flex:1 1 auto;min-width:0}
  .card.prod .meta .badge{flex:0 0 auto}
  .card.prod:not(.has-info) .meta{right:16px}
  .card.prod.is-soldout .meta{left:150px}
  .card.prod .meta .detail{font-size:11.5px;line-height:1.3;font-weight:400;color:var(--cacao);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card.prod .badge{width:20px;height:20px;flex:0 0 auto;display:grid;place-items:center;position:relative;padding:0}
  .card.prod .badge svg{width:20px;height:20px;display:block}
  .card.prod .badge.vegan{--bd:var(--pistachio);--bg:var(--crema)}
  .card.prod .badge.gf{--bd:var(--espresso);--bg:var(--crema)}
  .card.prod.dark .meta .detail{color:rgba(246,238,229,.72)}
  .card.prod.dark .badge.gf{--bd:var(--crema);--bg:var(--espresso)}
  .card.prod.dark .badge.vegan{--bd:var(--pistachio-l);--bg:var(--ink)}
  @media (prefers-reduced-motion:reduce){.card.prod .flip{transition:none}}
  .wide{width:clamp(300px,40vw,470px);height:clamp(340px,32vw,400px)}
  .wide .ph img{width:70%;max-height:200px}
  .prod .ph img{max-height:210px}

  /* standard grid */
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:28px}
  .std{padding:28px;min-height:200px;display:flex;flex-direction:column;justify-content:flex-start}
  .std p{font-size:clamp(17px,1.7vw,20px);font-weight:600;line-height:1.3;letter-spacing:-.005em}
  .std p b{color:var(--pistachio);font-weight:600}
  .std small{display:block;margin-top:auto;padding-top:22px;font-size:13px;color:var(--muted);font-weight:400}
  @media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.grid{grid-template-columns:1fr}.std{min-height:0}}

  /* story band */
  .story{margin:clamp(32px,5vw,64px) auto 0;padding:0 var(--gut);max-width:var(--w)}
  .story .band{background:var(--espresso);color:var(--crema);border-radius:var(--r);padding:clamp(36px,5vw,64px) clamp(24px,5vw,72px);display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:center}
  .story svg{width:clamp(72px,9vw,110px);height:auto}
  .story h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:.005em}
  .story p{margin-top:16px;font-size:16px;line-height:1.55;color:rgba(246,238,229,.82);max-width:62ch;text-wrap:pretty}
  .story p b{color:var(--crema);font-weight:600}
  .story .gloss{margin-top:18px;font-style:italic;color:rgba(246,238,229,.6);font-size:14px}
  .story .gloss b{font-style:normal;color:var(--pistachio-l)}
  .story a.more{display:inline-block;margin-top:22px;background:var(--crema);color:var(--espresso);font-weight:500;font-size:14px;padding:11px 22px;border-radius:999px}
  .story a.more:hover{background:#fff}
  @media (max-width:640px){.story .band{grid-template-columns:1fr}.story svg{width:64px}}

  /* visit */
  .visit{padding:clamp(40px,6vw,72px) 0 0}
  .visit .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
  .visit h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,40px);line-height:1.05}
  .visit .addr{margin-top:14px;font-size:16px;line-height:1.55;color:var(--ink)}
  .visit .addr a{color:var(--pistachio);font-weight:500}
  .visit .addr a:hover{text-decoration:underline}
  .visit h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--cacao);margin-bottom:12px}
  .hours{list-style:none;font-size:15px;line-height:1.5}
  .hours li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--rule)}
  .hours li span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
  .today{color:var(--pistachio);font-weight:600}
  .cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;background:var(--espresso);color:var(--crema);font-weight:500;font-size:14.5px;padding:12px 24px;border-radius:999px;transition:background .15s}
  .cta:hover{background:#3d2323}
  .cta.ghost{background:transparent;color:var(--espresso);box-shadow:inset 0 0 0 1px var(--hair);margin-left:10px}
  .cta.ghost:hover{background:rgba(74,43,43,.06)}
  @media (max-width:820px){.visit .wrap{grid-template-columns:1fr 1fr}.visit .wrap>div:first-child{grid-column:1/-1}}
  @media (max-width:520px){.visit .wrap{grid-template-columns:1fr}}

  /* footer */
  .ftr{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--rule);padding:32px 0 44px;font-size:12.5px;color:var(--muted)}
  .ftr .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
  .ftr nav{display:flex;flex-wrap:wrap;gap:6px 20px}
  .ftr a:hover{color:var(--ink);text-decoration:underline}
  .ftr .lock{display:flex;align-items:center;gap:10px;color:var(--espresso)}
  .ftr .lock svg{width:18px;height:18px}
  .ftr .lock span{font-family:var(--serif);letter-spacing:.145em;font-size:11px;padding-top:2px}

/* ---------- category pages ---------- */
.cat-hero .wrap{padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(8px,1.5vw,16px);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,36px);align-items:center}
.cat-mark .ph{position:relative;display:block;width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);color:var(--espresso);animation:cat-float 5.6s ease-in-out infinite}
.cat-mark .ph svg{display:block;width:100%;height:100%;overflow:visible}
.cat-mark .ph::after{content:"";position:absolute;left:18%;right:18%;bottom:-13px;height:10px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(74,43,43,.26),rgba(74,43,43,0) 72%);animation:cat-shade 5.6s ease-in-out infinite}
.cat-title{display:flex;flex-direction:column;gap:6px;font-size:clamp(22px,2.4vw,28px);line-height:1.15;font-weight:600}
.cat-title .lead{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,60px);line-height:1;letter-spacing:.005em;color:var(--ink)}
.cat-title .sub{font-weight:400;color:var(--cacao);font-size:min(1em,calc((100vw - 48px) / 25));white-space:nowrap}
.cat-count{grid-column:2;font-size:13px;color:var(--muted);margin-top:-2px}
@media (max-width:560px){.cat-hero .wrap{grid-template-columns:1fr;gap:14px}.cat-count,.oos-filter,.cat-tools{grid-column:1}}
/* ---------- Feast Days: the page is dressed for whichever celebration is in season ----------
   One variable does the work: --glow, set inline per occasion by seasons.js. The mark is a lit candle,
   so the occasion is the COLOUR OF ITS LIGHT — an ember for Halloween, pomegranate for Yalda, pistachio
   for Nowruz — over a ground taken straight from the brand palette. Nothing else changes: same type,
   same grid, same cards. */
.feast-hero{position:relative;isolation:isolate}
.feast-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fbg)}
/* the glow is a pool of candlelight centred on the mark, not a wash over the whole band */
/* The pool of candlelight is anchored to the MARK, not to the band: a band-relative position has to be
   re-guessed at every breakpoint, and on a phone it ended up beside the candle instead of behind it.
   On .ph it is centred on the flame at any width, and it drifts with the mark's float, which is what
   candlelight does. */
.feast-hero .cat-mark .ph::before{content:"";position:absolute;z-index:-1;left:50%;top:38%;
  width:clamp(300px,40vw,520px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow) 72%,transparent) 0%,
    color-mix(in srgb,var(--glow) 36%,transparent) 26%,
    color-mix(in srgb,var(--glow) 11%,transparent) 50%,transparent 74%);
  animation:feast-flicker 4.2s ease-in-out infinite}
.feast-hero .cat-mark{position:relative;z-index:1}
.feast-hero .cat-mark .ph{isolation:isolate}
/* a second, very faint wash so the ground is not a flat slab of black behind the pool of light */
.feast-hero .wrap{position:relative}
.feast-hero.on-ink::before,.feast-hero.on-espresso::before{
  background:radial-gradient(120% 140% at 8% 50%,color-mix(in srgb,var(--glow) 16%,var(--fbg)) 0%,var(--fbg) 58%)}
.feast-hero.on-ink{--fbg:var(--ink)}
.feast-hero.on-espresso{--fbg:var(--espresso)}
.feast-hero.on-crema{--fbg:transparent}

/* ---- An occasion with artwork built for it -------------------------------
   The painted header replaces the plain ground. The ground colour stays underneath as the background-COLOUR,
   so the band is never a bright flash while a 550 KB painting loads, and the text sits on something dark from
   the first frame. Anchored to the bottom because the composition's horizon (hill, pumpkins, cat) lives there
   and is what must survive the crop; the sky at the top is the part that can be cut. */
.feast-hero.has-art::before{
  background-color:var(--fbg);
  background-image:var(--art-w);
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat}
/* the painting carries its own pool of light around the mark, so the CSS candle-glow would double it */
.feast-hero.has-art .cat-mark .ph::before{display:none}
.feast-hero.has-art .cat-mark .ph img{display:block;width:100%;height:100%}
/* the phone artwork is a taller crop of the same scene, not the wide one squeezed */

/* A scrim over the painting, under the text.
   Measured on the real render, not guessed: the moon turned out to be harmless (the title clears it at 4.2:1)
   while the EMBER GLOW beside the mark was the problem — the sub-line crossed rgb(179,100,41) and sat at
   2.96:1, and no amount of text opacity fixes that, because cream on that orange tops out at 3.8:1.
   26% ink is the gentlest layer that takes every line past its WCAG target with headroom. It is uniform rather
   than a clever left-weighted gradient because the crop, and so where the glow lands, changes with viewport
   width; a flat layer behaves the same at every size. */
.feast-hero.has-art::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--fbg) 26%,transparent)}
/* the occasion mark in the header: an <img> where the plain mark is inline SVG, sized to match exactly */
.brand img.brand-mark{width:30px;height:30px;display:block}
.feast-hero.on-ink .cat-title .lead,.feast-hero.on-espresso .cat-title .lead{color:var(--crema)}
.feast-hero.on-ink .cat-title .sub,.feast-hero.on-espresso .cat-title .sub{color:rgba(246,238,229,.78)}
.feast-hero.on-ink .cat-mark .ph,.feast-hero.on-espresso .cat-mark .ph{color:var(--crema)}
.feast-hero .cat-mark .ph{width:clamp(84px,9vw,118px);height:clamp(84px,9vw,118px)}
.feast-hero.on-ink .cat-mark .ph::after,.feast-hero.on-espresso .cat-mark .ph::after{display:none}
.feast-hero.on-ink .crumbs a,.feast-hero.on-espresso .crumbs a,
.feast-hero.on-ink .crumbs,.feast-hero.on-espresso .crumbs{color:rgba(246,238,229,.60)}
.feast-hero.on-ink .crumbs [aria-current],.feast-hero.on-espresso .crumbs [aria-current]{color:var(--crema)}
.feast-hero.on-ink .cat-count,.feast-hero.on-espresso .cat-count,
.feast-hero.on-ink .feast-note,.feast-hero.on-espresso .feast-note{color:rgba(246,238,229,.66)}
.feast-hero.on-ink .cat-sort select,.feast-hero.on-espresso .cat-sort select,
.feast-hero.on-ink .cat-sort span,.feast-hero.on-espresso .cat-sort span,
.feast-hero.on-ink .oos-filter,.feast-hero.on-espresso .oos-filter{color:rgba(246,238,229,.78)}
.feast-eyebrow{order:-1;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--glow);margin-bottom:2px}
/* The glow itself is not a text colour. On ink, Yalda's pomegranate measures 2.45:1 against the ground;
   on espresso, Valentine's red measures 1.92:1. On cream the pale ones fail the other way — Easter's
   gold is 2.80:1. So the eyebrow is mixed toward the OPPOSITE end until every season clears 4.5:1,
   measured, not judged by eye. The light the candle casts stays the true colour; only the lettering
   moves. Worst case after this: Valentine's 4.83 on espresso, Easter 4.70 on cream. */
.feast-hero.on-ink .feast-eyebrow,.feast-hero.on-espresso .feast-eyebrow{
  color:color-mix(in srgb,var(--glow) 50%,#F6EEE5)}
.feast-hero.on-crema .feast-eyebrow{color:color-mix(in srgb,var(--glow) 60%,#4A2B2B)}
.feast-eyebrow i{font-style:normal;opacity:.5;margin:0 4px}
.feast-note{grid-column:2;font-size:14px;color:var(--cacao);margin-top:7px;max-width:62ch;line-height:1.5}
@media (max-width:560px){.feast-note{grid-column:1}
  .feast-hero .cat-mark .ph::before{width:min(86vw,380px)}}
@keyframes feast-flicker{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  38%{opacity:.86;transform:translate(-50%,-50%) scale(1.045)}
  62%{opacity:.95;transform:translate(-50%,-50%) scale(.985)}}
@media (prefers-reduced-motion:reduce){.feast-hero .cat-mark .ph::before{animation:none}}

.cats a[aria-current="page"]{color:var(--espresso)}
.cats a[aria-current="page"]::after{content:"";display:block;width:5px;height:5px;border-radius:50%;background:var(--pistachio);margin:-6px auto 0}
.cat-list{padding-top:clamp(8px,1.5vw,16px)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;padding-bottom:28px}
.pgrid .card.prod{width:auto;height:clamp(400px,42vw,470px)}
@media (max-width:560px){.pgrid{grid-template-columns:1fr;gap:16px}.pgrid .card.prod{height:min(470px,118vw)}}
.empty{padding:clamp(24px,4vw,48px) 0 clamp(40px,6vw,72px);max-width:52ch;color:var(--muted);font-size:16px;line-height:1.55}
.empty .cta{margin-top:18px}
.card.prod .soldout{position:absolute;left:16px;bottom:14px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cacao);background:rgba(246,238,229,.9);padding:5px 9px;border-radius:999px}
.card.prod.is-soldout .ph img{opacity:.55;filter:grayscale(.3)}

/* ---------- product pages ---------- */
.crumbs{padding-top:clamp(18px,2.5vw,28px);font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
.pdp-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,72px);align-items:start;padding-top:clamp(20px,3vw,40px);padding-bottom:clamp(28px,4vw,48px)}
.pdp-media{background:var(--card);border-radius:var(--r);min-height:clamp(320px,38vw,520px);display:grid;place-items:center;padding:clamp(24px,4vw,48px);box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.pdp-media img{max-width:88%;max-height:clamp(260px,32vw,440px);object-fit:contain;transition:opacity .25s}
.pdp-media.photo img{width:88%;aspect-ratio:1;object-fit:cover;border-radius:16px}
.pdp-info h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.2vw,56px);line-height:1.02;letter-spacing:.005em;color:var(--ink);margin-top:6px;text-wrap:balance}
.pdp-priceline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px}
.pdp-price{font-size:22px;font-weight:600}
.pdp-detail{font-size:13px;color:var(--cacao)}
.pdp-badges{display:inline-flex;gap:6px}
.pdp-badges .badge{width:26px;height:26px;display:grid;place-items:center}
.pdp-badges .badge svg{width:24px;height:24px;display:block}
.pdp-badges .badge.vegan{--bd:var(--pistachio);--bg:var(--crema)}
.pdp-badges .badge.gf{--bd:var(--espresso);--bg:var(--crema)}
.pdp-soldout{margin-top:12px;font-size:14px;color:var(--cacao);font-weight:500}
.pdp-variants{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.pdp-variants button{display:grid;grid-template-columns:1fr auto;gap:2px 14px;text-align:left;padding:12px 16px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow .15s,background .15s}
.pdp-variants button:hover{box-shadow:inset 0 0 0 1px var(--hair)}
.pdp-variants button.on{box-shadow:inset 0 0 0 2px var(--espresso)}
.pdp-variants .vn{font-weight:600;font-size:15px}
.pdp-variants .vd{grid-column:1;font-size:12.5px;color:var(--cacao)}
.pdp-variants .vp{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:15px;color:var(--cacao)}
.pdp-desc{margin-top:22px;font-size:16px;line-height:1.6;color:var(--ink);max-width:56ch;text-wrap:pretty}
.pdp-note{margin-top:10px;font-size:14px;line-height:1.5;color:var(--cacao);max-width:56ch}
.pdp-ctas{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.pdp-ctas .cta{margin:0}
.pdp-facts{list-style:none;margin-top:22px;font-size:13.5px;color:var(--muted);display:grid;gap:6px}
.pdp-facts li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pistachio);margin-right:10px;vertical-align:middle}
@media (max-width:820px){.pdp-hero{grid-template-columns:1fr;gap:20px}.pdp-media{min-height:300px}.pdp-media img{max-height:280px}}

/* ---------- nav: Menu dropdown ---------- */
.nav .has-menu button{font-size:12.5px;font-weight:500;color:var(--ink);opacity:.86;padding:6px 0;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.nav .has-menu button svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nav .has-menu button:hover,.nav .has-menu button[aria-expanded="true"]{opacity:1;color:var(--espresso)}
.nav .has-menu button[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:rgba(246,238,229,.985);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--rule);box-shadow:0 18px 40px rgba(74,43,43,.10);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:48}
.hdr.menu-open .menu-panel{opacity:1;transform:none;pointer-events:auto}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 24px;padding:22px 0 26px}
.menu-grid a{display:flex;align-items:center;gap:14px;padding:10px 10px;border-radius:12px;color:var(--ink);transition:background .15s}
.menu-grid a:hover{background:rgba(255,253,250,.9)}
.menu-grid .mk{width:34px;height:34px;flex:0 0 auto;color:var(--espresso)}
.menu-grid .mk svg{width:100%;height:100%;display:block}
.menu-grid b{display:block;font-size:14px;font-weight:600}
.menu-grid small{display:block;font-size:12px;color:var(--cacao);line-height:1.3}
@media (max-width:1100px){.menu-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:880px){.menu-panel{display:none}}
.mnav .mgroup summary{display:block;font-size:22px;font-weight:500;padding:14px 0;border-bottom:1px solid var(--rule);cursor:pointer;list-style:none}
.mnav .mgroup summary::-webkit-details-marker{display:none}
.mnav .mgroup summary::after{content:"+";float:right;color:var(--cacao)}
.mnav .mgroup[open] summary::after{content:"–"}
.mnav .mgroup a{font-size:17px;font-weight:400;padding:11px 0 11px 18px;color:var(--ink)}

/* ---------- cart button + drawer ---------- */
.tools .cart-btn{position:relative}
.cart-count{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--pistachio);color:var(--crema);font-size:10px;font-weight:600;line-height:16px;text-align:center;font-variant-numeric:tabular-nums}
.cart-btn.bump .cart-count{animation:bump .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--crema);z-index:70;display:flex;flex-direction:column;box-shadow:-18px 0 50px rgba(74,43,43,.16);transform:translateX(102%);transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.cart.open{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 14px;border-bottom:1px solid var(--rule)}
.cart-head h2,.cart-head .cart-title{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1;margin:0}
.cart-close{width:32px;height:32px;display:grid;place-items:center;color:var(--espresso)}
.cart-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.cart-lines{list-style:none;flex:1;overflow:auto;padding:8px 24px}
.cart-lines li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.cart-lines img{width:64px;height:64px;object-fit:contain}
.cart-lines .ln b{display:block;font-size:15px;font-weight:600}
.cart-lines .ln small{display:block;font-size:12.5px;color:var(--cacao);margin-top:2px}
.cart-lines .ln .lp{font-size:13px;color:var(--muted);margin-top:4px}
.qty{display:inline-flex;align-items:center;gap:2px;background:var(--card);border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule)}
.qty button{width:28px;height:28px;display:grid;place-items:center;color:var(--espresso);font-size:16px;line-height:1}
.qty span{min-width:18px;text-align:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.cart-empty{padding:28px 24px;color:var(--muted);font-size:15px;line-height:1.5}
.cart:not(.has-items) .cart-lines,.cart:not(.has-items) .cart-foot{display:none}
.cart.has-items .cart-empty{display:none}
.cart-foot{padding:16px 24px 24px;border-top:1px solid var(--rule);display:grid;gap:10px}
.cart-sub{display:flex;justify-content:space-between;font-size:15px}
.cart-sub b{font-size:18px}
.cart-note{font-size:12.5px;color:var(--muted);line-height:1.45}
.cart-foot .cta{margin:0;text-align:center;justify-content:center}
.cart-foot .cta.ghost{margin-left:0}
.scrim{position:fixed;inset:0;background:rgba(28,20,18,.28);z-index:60;opacity:0;transition:opacity .3s}
.scrim.show{opacity:1}
body.cart-open{overflow:hidden}

/* ---------- add to order button on cards ---------- */
.card.prod .add{position:absolute;left:16px;bottom:12px;width:28px;height:28px;border-radius:50%;background:var(--espresso);color:var(--crema);display:grid;place-items:center;transition:transform .15s,background .15s}
.card.prod .add:hover{transform:scale(1.08);background:#3d2323}
.card.prod .add svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.card.prod .add .tick{display:none}
.card.prod .add.done{background:var(--pistachio)}
.card.prod .add.done .plus{display:none}.card.prod .add.done .tick{display:block}
.card.prod.dark .add{background:var(--crema);color:var(--espresso)}
.card.prod.dark .add:hover{background:#fff}
.card.prod.dark .add.done{background:var(--pistachio-l);color:var(--ink)}
.cta.add-pdp{border:0;cursor:pointer}
.cta.add-pdp.done{background:var(--pistachio)}

/* ---------- intro: the threshold ---------- */
/* Hold: espresso screen, cream mark. Open: screen turns cream, mark turns espresso and zooms until its opening
   has passed the edges of the screen; the cream screen then fades into the homepage. */
.intro{position:fixed;inset:0;z-index:200;background:var(--espresso);--s:200px;transition:background .32s ease,opacity .45s ease}
.intro.open{background:var(--crema)}
.intro.fade{opacity:0}
.intro-mark,.intro-door{position:absolute;width:var(--s);height:var(--s);left:calc(50vw - var(--s) * .5);top:calc(50vh - var(--s) * .511);display:block;overflow:visible}
.intro-mark{color:var(--crema);opacity:0;transform:scale(.94);transform-origin:50% 51.1%;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1),color .32s ease}
.intro-mark path{fill:currentColor;stroke:currentColor}
.intro.ready .intro-mark{opacity:1;transform:none}
.intro.open .intro-mark{color:var(--espresso)}
.intro-door{transition:opacity .32s ease}
.intro.open .intro-door{opacity:0}
.intro.done{display:none}

/* ---------- sub-brand cards on the homepage ---------- */
.card.submark .ph svg{width:62%;max-width:230px;height:auto}
#booktable .ph svg{width:40%;max-width:180px}
#brunch .ph{color:var(--espresso)}
#brunch .ph svg{width:36%;max-width:170px}   /* the Wellness category mark, sized to sit with the Catering and Book a Table marks */   /* portrait mark on a wide card: match the CremaClub arch height */
/* ---------- sub-brand pages: Catering, CremaClub ---------- */
.sub-hero .wrap{display:grid;grid-template-columns:minmax(200px,.7fr) 1.3fr;gap:clamp(24px,5vw,64px);align-items:center;padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(12px,2vw,24px)}
.sub-mark svg{width:100%;max-width:340px;height:auto;display:block;filter:drop-shadow(0 22px 28px rgba(74,43,43,.14))}
.sub-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,58px);line-height:1.02;letter-spacing:.005em;color:var(--ink);margin-top:8px;text-wrap:balance}
.sub-hero .lede{margin-top:18px;font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--ink);max-width:58ch;text-wrap:pretty}
.sub-hero .pdp-ctas{margin-top:22px}
@media (max-width:760px){.sub-hero .wrap{grid-template-columns:1fr}.sub-mark svg{max-width:220px}}
.pkg-wrap{overflow-x:auto;margin-top:clamp(16px,2vw,24px);border-radius:var(--r);background:var(--card);box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.pkg{width:100%;border-collapse:collapse;min-width:620px}
.pkg th,.pkg td{padding:14px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.45}
.pkg thead th{padding-top:24px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.pkg tbody th{width:22%;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cacao);padding-top:17px}
.pkg tbody tr:last-child th,.pkg tbody tr:last-child td{border-bottom:0}
.pkg td:nth-child(3){background:rgba(92,107,66,.06)}
.pkg-name{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1}
.pkg-price{display:block;font-size:22px;font-weight:600;margin-top:8px}
.pkg-tax{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.pkg .dash{color:var(--hair)}
.pkg-more{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.5}
.pkg-more b{color:var(--ink);font-weight:600}
.boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(16px,2vw,24px);padding-bottom:12px}
.box{background:var(--card);border-radius:var(--r);padding:24px 24px 26px;box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.box-ph{height:130px;display:grid;place-items:center;margin-bottom:12px}
.box-ph img{max-height:120px;max-width:70%;object-fit:contain}
.box h3{font-size:18px;font-weight:600}
.box p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:900px){.boxes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.boxes{grid-template-columns:1fr}}
.sub-cta p{margin-top:16px;font-size:16px;line-height:1.55;max-width:60ch;color:var(--ink)}
.sub-cta a{color:var(--pistachio);font-weight:500}
.sub-cta a:hover{text-decoration:underline}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(16px,2vw,24px)}
.step{background:var(--card);border-radius:var(--r);padding:24px;box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.step b{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pistachio)}
.step p{margin-top:10px;font-size:15px;line-height:1.5}
@media (max-width:700px){.steps{grid-template-columns:1fr}}
.tiers{list-style:none;margin-top:clamp(16px,2vw,24px);display:grid;gap:10px;padding-bottom:12px}
.tiers li{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;background:var(--card);border-radius:16px;padding:16px 22px;box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.tiers .pts{display:flex;flex-direction:column;align-items:flex-start}
.tiers .pts b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;color:var(--espresso)}
.tiers .pts small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pistachio);font-weight:600;margin-top:4px}
.tiers .what b{display:block;font-size:17px;font-weight:600}
.tiers .what span{display:block;font-size:14px;color:var(--muted);margin-top:3px}
.tiers li:last-child{background:var(--espresso);color:var(--crema)}
.tiers li:last-child .pts b{color:var(--crema)}.tiers li:last-child .pts small{color:var(--pistachio-l)}.tiers li:last-child .what span{color:rgba(246,238,229,.72)}
@media (max-width:520px){.tiers li{grid-template-columns:84px 1fr;padding:14px 16px}.tiers .pts b{font-size:28px}}

/* static product cards (no flip structure) still need a body */
.card.prod:not(:has(.flip)){background:var(--card);box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06);overflow:hidden}
.card.prod.tint:not(:has(.flip)){background:#EFE3D6}
.card.prod.dark:not(:has(.flip)){background:var(--espresso)}
.card.prod:not(:has(.flip)):hover{box-shadow:0 1px 0 rgba(74,43,43,.05),0 14px 34px rgba(74,43,43,.10)}

/* sub-brand pages: long sub-titles may wrap; packages stack on phones */
.sub .sec h2 .sub{white-space:normal;font-size:1em;line-height:1.3}
.pkg-stack{display:none}
@media (max-width:700px){
  .pkg-wrap{display:none}
  .pkg-stack{display:grid;gap:14px;margin-top:16px}
  .pkg-card{background:var(--card);border-radius:var(--r);padding:20px 20px 18px;box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
  .pkg-card.premium{box-shadow:inset 0 0 0 2px var(--pistachio),0 6px 22px rgba(74,43,43,.06)}
  .pkg-card header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--rule)}
  .pkg-card .pkg-name{font-size:24px}.pkg-card .pkg-price{margin:0;font-size:20px}.pkg-card .pkg-tax{margin:0}
  .pkg-card dl{margin-top:8px}
  .pkg-card dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cacao);margin-top:12px}
  .pkg-card dd{font-size:15px;line-height:1.45;margin-top:2px}
}

/* sale */
.card.prod .price s{color:var(--muted);text-decoration-thickness:1px}
.card.prod .price .now{color:var(--pistachio);font-weight:600}
.saletag{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--crema);background:var(--pistachio);padding:2px 7px;border-radius:999px;align-self:center}
.card.prod.dark .price .now{color:var(--pistachio-l)}

.card.prod .vsold{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cacao);align-self:center}
.card.prod .slide.vsoldout .ph img{opacity:.55}
.pdp-variants .vso{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cacao);margin-left:6px}
.pdp-variants .vp s{color:var(--muted);margin-right:6px}

/* ingredient marks on cards + the hover / tap label shared by every badge */
.badge.ing{color:var(--espresso)}
.badge.ing svg{width:20px;height:20px;display:block}
.card.prod.dark .badge.ing{color:var(--crema)}
.card.prod .meta .badge+.badge.ing{margin-left:-2px}
.badge[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);white-space:nowrap;
  background:var(--ink);color:var(--crema);font:600 11px/1 var(--sans);letter-spacing:.02em;padding:6px 8px;border-radius:7px;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;z-index:5}
.badge[data-tip]::before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink);border-bottom:0;opacity:0;transition:opacity .15s;pointer-events:none;z-index:5}
.badge[data-tip]:hover::after,.badge[data-tip]:focus-visible::after,.badge.tip::after{opacity:1;transform:translate(-50%,0)}
.badge[data-tip]:hover::before,.badge[data-tip]:focus-visible::before,.badge.tip::before{opacity:1}
.card.prod .meta{overflow:visible}
.card.prod .slide{overflow:visible}
/* product page: ingredient badges bottom-right of the image */
.pdp-media{position:sticky;top:76px}   /* the image starts level with the title and stays in view while long option lists scroll */
@media (max-width:820px){.pdp-media{position:relative;top:auto}}
.pdp-ings{position:absolute;right:16px;bottom:14px;display:flex;gap:6px}
.pdp-ings .badge{width:26px;height:26px;display:grid;place-items:center;position:relative;padding:0}
.pdp-ings .badge.ing svg{width:26px;height:26px}

/* ---- Book a table (/book) ---- */
.book .wrap.narrow{max-width:720px}
.bookform{max-width:760px;margin-top:6px}
.bookform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.step{margin:0 0 16px;padding:22px 24px 24px;border-radius:18px;background:var(--card);box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06);transition:opacity .25s}
.step.off{opacity:.45}
.sec .step .lg{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;font-size:clamp(18px,1.7vw,21px);font-weight:600;line-height:1.2;margin:0 0 4px;color:var(--ink);letter-spacing:0}
.step .lg em{font-style:normal;font-weight:400;font-size:13px;color:var(--cacao);margin-left:4px}
.step .lg .n{width:26px;height:26px;border-radius:50%;background:var(--espresso);color:var(--crema);font-size:13px;display:grid;place-items:center;flex:0 0 auto}
.step .fld input,.step .fld select,.step .fld textarea,.step .picker input,.step .chip,.step .slot,.step .event,.step .picked li,.step .summary{background:var(--crema)}
.step .chip.on,.step .slot.on{background:var(--espresso)}
.step .results{background:var(--card)}
@media (max-width:560px){.step{padding:18px 16px 20px;border-radius:14px}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-width:46px;height:44px;padding:0 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);font-weight:500;font-size:15px;color:var(--ink);transition:box-shadow .15s,background .15s,color .15s}
.chip:hover{box-shadow:inset 0 0 0 1px var(--hair)}
.chip.on{background:var(--espresso);color:var(--crema);box-shadow:none}
.event{margin-top:14px;padding:16px 18px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.event .hint{margin-top:0}
.fld{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--cacao);margin-top:12px}
.fld em{font-style:normal;font-weight:400;color:var(--muted)}
.fld input,.fld select,.fld textarea,.picker input{font:inherit;font-size:16px;font-weight:400;color:var(--ink);padding:12px 14px;border-radius:12px;border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus,.picker input:focus{outline:2px solid var(--pistachio);outline-offset:1px}
.fld.small{max-width:220px}
.fld textarea{resize:vertical;line-height:1.45}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.hours{margin-top:14px;font-size:13.5px;color:var(--cacao)}
.capnote{font-weight:400;font-size:12.5px;color:var(--cacao);line-height:1.4}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:10px}
.slot{height:42px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);font-size:14px;font-weight:500;color:var(--ink);transition:box-shadow .15s,background .15s,color .15s}
.slot:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--hair)}
.slot.on{background:var(--espresso);color:var(--crema);box-shadow:none}
.slot.off{opacity:.32;cursor:default}
.slots .loading{grid-column:1/-1;font-size:14px;color:var(--muted);padding:8px 0}
.book .hint{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:60ch}
.picker{position:relative;margin-top:4px}
.results{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 6px);list-style:none;background:var(--card);border-radius:14px;box-shadow:0 1px 0 rgba(74,43,43,.05),0 14px 34px rgba(74,43,43,.14);padding:6px;max-height:320px;overflow:auto}
.results button{width:100%;display:flex;justify-content:space-between;gap:12px;text-align:left;padding:10px 12px;border-radius:10px;font-size:14.5px;color:var(--ink)}
.results button:hover{background:rgba(74,43,43,.06)}
.results span{color:var(--muted);font-size:12.5px;white-space:nowrap}
.results .none{padding:10px 12px;font-size:13.5px;color:var(--muted)}
.picked{list-style:none;margin-top:10px;display:grid;gap:8px}
.picked li{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);font-size:14.5px}
.picked .pn{flex:1 1 auto;font-weight:500;min-width:0}
.picked select{font:inherit;font-size:13.5px;padding:6px 8px;border-radius:8px;border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink);max-width:40%}
.picked .qty{display:inline-flex;align-items:center;gap:2px}
.picked .qty button{width:28px;height:28px;border-radius:50%;background:rgba(74,43,43,.06);color:var(--espresso);font-size:16px;display:grid;place-items:center}
.picked .qty b{min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.picked .rm{width:28px;height:28px;border-radius:50%;color:var(--cacao);font-size:18px;display:grid;place-items:center}
.picked .rm:hover{background:rgba(74,43,43,.06)}
.summary{padding:16px 18px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);font-size:15px;line-height:1.55;display:grid;gap:2px}
.summary:empty{display:none}
.summary b{font-weight:600}
.book .err{margin-top:12px;font-size:14px;color:#8a3b2f;font-weight:500}
.book .pdp-ctas{margin-top:18px}
.book .pdp-ctas .cta{margin:0}
.done{max-width:640px;padding:8px 0 24px}
.done .sub-mark.small svg{max-width:120px;filter:none;margin-bottom:8px}
.done h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,44px);line-height:1.05;color:var(--ink)}
.done p{margin-top:14px;font-size:16px;line-height:1.55}
.done .cta{margin:0 8px 0 0}
.status h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,56px);line-height:1.02;color:var(--ink);margin-top:6px}
.status .lede{margin-top:14px;font-size:clamp(16px,1.3vw,18px);color:var(--ink)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin-top:22px;font-size:15px;line-height:1.5;max-width:60ch}
.facts dt{font-weight:600;color:var(--cacao);font-size:13px;padding-top:2px}
.facts dd{margin:0;color:var(--ink)}
.status .h{margin-top:28px;font-size:18px;font-weight:600}
.thread{list-style:none;margin-top:10px;display:grid;gap:10px;max-width:60ch}
.thread li{padding:14px 16px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.thread time{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.thread p{font-size:15px;line-height:1.5;white-space:pre-wrap}

/* ---- Our Story (/our-story) ---- */
.story-pg .sub-hero .wrap{grid-template-columns:minmax(180px,.55fr) 1.45fr}
.story-pg .sub-mark svg{max-width:280px}
@media (max-width:760px){.story-pg .sub-hero .wrap{grid-template-columns:1fr}.story-pg .sub-mark svg{max-width:150px}}
.story-pg .chapter{padding:clamp(28px,4vw,52px) 0 0}
.story-pg .chapter.last{padding-bottom:clamp(40px,6vw,80px)}
.story-pg .prose{max-width:720px}
.story-pg .prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,42px);line-height:1.08;letter-spacing:.005em;color:var(--ink);margin-bottom:18px;text-wrap:balance}
.story-pg .prose p{font-size:clamp(16.5px,1.3vw,18px);line-height:1.62;color:var(--ink);margin-top:14px;text-wrap:pretty}
.story-pg .prose p:first-of-type{margin-top:0}
.story-pg .pull{margin:28px 0 8px;padding-left:22px;border-left:3px solid var(--pistachio);font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,30px);line-height:1.25;color:var(--ink);letter-spacing:.005em;text-wrap:balance}
.story-pg .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(22px,3vw,36px)}
.story-pg .strip.two{grid-template-columns:repeat(2,1fr);max-width:560px}
.story-pg .strip img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:var(--card);border-radius:var(--r);padding:14%;box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
@media (max-width:640px){.story-pg .strip{grid-template-columns:repeat(2,1fr);gap:12px}}
.story-pg .band-wrap{padding:clamp(32px,5vw,60px) 0 0}
.story-pg .band{background:var(--espresso);color:var(--crema);border-radius:var(--r);padding:clamp(32px,5vw,64px) clamp(24px,5vw,72px);display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.story-pg .band-mark svg{width:clamp(90px,11vw,140px);height:auto;color:var(--crema);display:block}
.story-pg .band h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1.08;letter-spacing:.005em;color:var(--crema);margin-top:6px}
.story-pg .band p{margin-top:14px;font-size:clamp(15.5px,1.2vw,17px);line-height:1.6;color:rgba(246,238,229,.84);max-width:64ch;text-wrap:pretty}
.story-pg .band p b{color:var(--crema);font-weight:600}
.story-pg .band .gloss{font-style:italic;color:rgba(246,238,229,.6);font-size:14px;margin-top:18px}
.story-pg .eyebrow.light{color:var(--pistachio-l)}
@media (max-width:640px){.story-pg .band{grid-template-columns:1fr}.story-pg .band-mark svg{width:72px}}
.story-pg .markrow{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,30px);margin-top:clamp(22px,3vw,36px);color:var(--espresso)}
.story-pg .markrow svg{width:clamp(38px,4.2vw,54px);height:clamp(38px,4.2vw,54px);display:block;overflow:visible}
.story-pg .sec-h{font-size:var(--h2);line-height:1.2;font-weight:600;letter-spacing:-.005em;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.story-pg .sec-h .lead{font-family:var(--serif);font-weight:400;font-size:1.22em;letter-spacing:0;color:var(--ink)}
.story-pg .sec-h .sub{font-weight:400;color:var(--cacao);font-size:min(1em,calc((100vw - 48px) / 25));white-space:nowrap;line-height:1.25}
.story-pg .std-grid{margin-top:calc(var(--h2) * .5);padding-bottom:0}
.story-pg .card.std{background:var(--card);border-radius:var(--r);box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.story-pg .two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px);margin-top:calc(var(--h2) * .5)}
@media (max-width:700px){.story-pg .two-col{grid-template-columns:1fr}}
.story-pg .col{background:var(--card);border-radius:var(--r);padding:clamp(20px,2.4vw,30px);box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.story-pg .col h3{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--pistachio);margin-bottom:12px}
.story-pg .facts-list{list-style:none;display:grid;gap:12px}
.story-pg .facts-list li{display:grid;gap:2px;font-size:15px;line-height:1.5;padding-top:12px;border-top:1px solid var(--rule)}
.story-pg .facts-list li:first-child{border-top:0;padding-top:0}
.story-pg .facts-list b{font-weight:600;color:var(--ink)}
.story-pg .facts-list span{color:var(--muted)}
.story-pg .signoff{margin-top:28px;font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--ink)}
.story-pg .signoff span{font-family:var(--sans);font-size:13.5px;color:var(--cacao)}
.story-pg .pdp-ctas{margin-top:22px}
.story-pg .pdp-ctas .cta{margin:0}

/* ---- artwork cards: an illustration composed for the whole card (e.g. coffee beans falling beside the name) ---- */
.card.prod.art .slide .ph{position:absolute;inset:0;padding:0;z-index:0}
.card.prod.art .slide .ph img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:right bottom}
.card.prod.art .slide .txt{position:relative;z-index:1}
.card.prod.art .meta{z-index:1}
.pdp-media.art img{object-fit:contain;object-position:center bottom}

/* ---- Roaster House (/roaster-house) ---- */
.roast-pg .sub-mark svg{max-width:300px}
.roast-pg .sec-h,.roast-pg .band-wrap,.roast-pg .band,.roast-pg .band-mark svg,.roast-pg .band h2,.roast-pg .band p,.roast-pg .eyebrow.light{}
.roast-pg .sec-h{font-size:var(--h2);line-height:1.2;font-weight:600;letter-spacing:-.005em;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.roast-pg .sec-h .lead{font-family:var(--serif);font-weight:400;font-size:1.22em;letter-spacing:0;color:var(--ink)}
.roast-pg .sec-h .sub{font-weight:400;color:var(--cacao);font-size:min(1em,calc((100vw - 48px) / 25));white-space:nowrap;line-height:1.25}
.buy{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:clamp(20px,4vw,48px);align-items:center;background:var(--card);border-radius:var(--r);padding:clamp(20px,3vw,40px);box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.buy-ph img{display:block;width:100%;max-height:360px;object-fit:contain}
.buy-in h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,40px);line-height:1.08;color:var(--ink);margin-top:6px}
.buy-in>p{margin-top:12px;font-size:16px;line-height:1.55;color:var(--ink);max-width:52ch}
.buy-in .hint{font-size:13px;color:var(--muted);margin-top:12px}
.buy-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--rule);margin-top:4px}
.buy-row:first-of-type{margin-top:18px}
.buy-size b{display:block;font-size:17px;font-weight:600}
.buy-size span{display:block;font-size:13.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.buy-price{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.buy-price s{color:var(--muted);font-weight:400;font-size:14px}
.buy-row .cta{margin:0;padding:10px 18px}
.buy-row.out{opacity:.6}
.buy-out{font-size:13px;color:var(--cacao);font-weight:500}
.add-line.done{background:var(--pistachio)}
@media (max-width:700px){.buy{grid-template-columns:1fr}.buy-ph img{max-height:240px}.buy-row{grid-template-columns:1fr auto;grid-template-areas:"a b" "c c"}.buy-row .cta{grid-area:c;justify-content:center}}
.blend{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(20px,4vw,56px);margin-top:calc(var(--h2) * .5);align-items:start}
.blend .prose p{font-size:clamp(16px,1.25vw,17.5px);line-height:1.62;color:var(--ink);margin-top:12px;text-wrap:pretty}
.blend .prose p:first-child{margin-top:0}
.notes,.brew{list-style:none;display:grid;gap:10px}
.notes li,.brew li{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.notes b,.brew b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.notes span,.brew span{display:block;font-size:14px;line-height:1.5;color:var(--muted);margin-top:3px}
.brew{grid-template-columns:repeat(4,1fr);margin-top:calc(var(--h2) * .5)}
@media (max-width:900px){.blend{grid-template-columns:1fr}.brew{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.brew{grid-template-columns:1fr}}
.roast-pg .grid.three{grid-template-columns:repeat(3,1fr);margin-top:calc(var(--h2) * .5);padding-bottom:0}
@media (max-width:820px){.roast-pg .grid.three{grid-template-columns:1fr}}
.roast-pg .card.std.who{background:var(--card);border-radius:var(--r);box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.roast-pg .card.std.who p{font-size:16px;font-weight:400;line-height:1.55;margin-top:8px}
.roast-pg .card.std.who small{color:var(--cacao)}
.roast-pg .band-wrap{padding:clamp(32px,5vw,60px) 0 clamp(40px,6vw,80px)}
.roast-pg .band{background:var(--espresso);color:var(--crema);border-radius:var(--r);padding:clamp(32px,5vw,64px) clamp(24px,5vw,72px);display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.roast-pg .band-mark svg{width:clamp(90px,11vw,150px);height:auto;display:block}
.roast-pg .band-mark svg path[fill="#4A2B2B"]{fill:var(--crema)}
.roast-pg .band h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1.08;color:var(--crema);margin-top:6px}
.roast-pg .band p{margin-top:14px;font-size:clamp(15.5px,1.2vw,17px);line-height:1.6;color:rgba(246,238,229,.84);max-width:64ch}
.roast-pg .eyebrow.light{color:var(--pistachio-l)}
.roast-pg .cta.light{background:var(--crema);color:var(--espresso)}
.roast-pg .cta.ghost.light{color:var(--crema);box-shadow:inset 0 0 0 1px rgba(246,238,229,.45);background:transparent}
.roast-pg .pdp-ctas{margin-top:20px}.roast-pg .pdp-ctas .cta{margin:0}
@media (max-width:640px){.roast-pg .band{grid-template-columns:1fr}.roast-pg .band-mark svg{width:80px}}

/* ---- Gift Cards (/gift-cards) ---- */
.gift-pg .sub-mark svg{max-width:300px}
.gift-pg .sec-h{font-size:var(--h2);line-height:1.2;font-weight:600;letter-spacing:-.005em;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.gift-pg .sec-h .lead{font-family:var(--serif);font-weight:400;font-size:1.22em;letter-spacing:0;color:var(--ink)}
.gift-pg .sec-h .sub{font-weight:400;color:var(--cacao);font-size:min(1em,calc((100vw - 48px) / 25));white-space:normal;line-height:1.25}
.gift-show{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
.gift-card{display:block;width:100%;height:auto;border-radius:clamp(14px,2.2vw,28px);box-shadow:0 30px 60px rgba(74,43,43,.20),0 2px 0 rgba(255,255,255,.4) inset}
.gift-steps{display:grid;gap:18px}
.gstep{display:grid;grid-template-columns:30px 1fr;gap:4px 14px;align-items:baseline}
.gstep .n{width:28px;height:28px;border-radius:50%;background:var(--espresso);color:var(--crema);font-size:13px;display:grid;place-items:center;grid-row:span 2;align-self:start}
.gstep b{font-size:17px;font-weight:600}
.gstep p{font-size:15px;line-height:1.55;color:var(--muted);grid-column:2}
@media (max-width:760px){.gift-show{grid-template-columns:1fr}}
/* Square's form is a cross-origin frame we cannot style; multiplying it over our cream turns its white ground cream and leaves text and images intact */
.gift-embed{margin-top:calc(var(--h2) * .5);background:var(--crema);border-radius:var(--r);overflow:hidden;isolation:isolate}
.gift-embed iframe{display:block;width:100%;height:1560px;border:0;background:transparent;mix-blend-mode:multiply}
@media (max-width:600px){.gift-embed iframe{height:1800px}}
.gift-pg .hint{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.5}
.gift-pg .hint a{color:var(--cacao);text-decoration:underline;text-underline-offset:3px}
.gift-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:clamp(40px,6vw,80px)}
.gift-facts>div{background:var(--card);border-radius:var(--r);padding:22px 24px;box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.gift-facts b{display:block;font-size:16px;font-weight:600}
.gift-facts p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.gift-facts a{color:var(--cacao);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.gift-facts{grid-template-columns:1fr}}
.gift-pg .pdp-ctas{margin-top:20px}.gift-pg .pdp-ctas .cta{margin:0}

/* ---- CremAI ---- */
.cremai-fab{position:fixed;right:18px;bottom:18px;z-index:70;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--espresso);color:var(--crema);box-shadow:0 10px 30px rgba(74,43,43,.28);transition:transform .15s,background .15s}
.cremai-fab:hover{transform:translateY(-1px);background:#3d2323}
.cremai-fab svg{width:38px;height:38px;display:block}
.cremai-fab svg path{fill:var(--crema)}
.ai-open .cremai-fab{opacity:0;pointer-events:none}
.cremai-scrim{position:fixed;inset:0;z-index:80;background:rgba(28,20,18,.28)}
.cremai{position:fixed;z-index:90;right:18px;bottom:18px;width:min(440px,calc(100vw - 24px));height:min(720px,calc(100vh - 36px));background:var(--crema);border-radius:22px;box-shadow:0 30px 80px rgba(74,43,43,.30);display:flex;flex-direction:column;overflow:hidden;transform:translateY(16px) scale(.98);opacity:0;transition:transform .24s cubic-bezier(.2,.7,.2,1),opacity .2s}
.cremai.on{transform:none;opacity:1}
.cremai[hidden]{display:none}   /* the hidden attribute must win over display:flex, or the invisible panel swallows clicks on the button */
@media (max-width:520px){.cremai{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0}}
.ai-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px 16px;background:var(--espresso);color:var(--crema)}
.ai-title{display:flex;align-items:center;gap:10px}
.ai-title svg{width:38px;height:38px;display:block}.ai-title svg path{fill:var(--crema)}
.ai-title b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:.02em;line-height:1}
.ai-title small{display:block;font-size:11.5px;color:rgba(246,238,229,.7);margin-top:3px;letter-spacing:.04em}
.ai-tools{display:flex;gap:4px}
.ai-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--crema);background:rgba(246,238,229,.12)}
.ai-icon:hover{background:rgba(246,238,229,.22)}
.ai-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ai-filterhead{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 8px 16px;border-bottom:1px solid var(--rule);background:var(--card)}
#ai-filtertoggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink)}
#ai-filtertoggle em{font-style:normal;font-weight:400;color:var(--cacao)}
#ai-filtertoggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}
#ai-filtertoggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.ai-link{font-size:12.5px;color:var(--cacao);text-decoration:underline;text-underline-offset:3px}
.ai-filterwrap{padding:10px 16px 12px;background:var(--card);border-bottom:1px solid var(--rule);max-height:260px;overflow:auto}
.ai-hint{font-size:12.5px;color:var(--muted);line-height:1.45;margin-bottom:10px}
.ai-hint b{color:var(--ink)}
.ai-filters{display:flex;flex-wrap:wrap;gap:6px}
.fch{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px 0 6px;border-radius:999px;background:var(--crema);box-shadow:inset 0 0 0 1px var(--rule);font-size:12.5px;color:var(--ink);transition:background .15s,color .15s,box-shadow .15s}
.fch svg{width:18px;height:18px;color:var(--espresso)}
.fch.want{background:var(--pistachio);color:var(--crema);box-shadow:none}.fch.want svg{color:var(--crema)}
.fch.avoid{background:#EFE3D6;color:var(--cacao);text-decoration:line-through;box-shadow:inset 0 0 0 1px var(--hair)}.fch.avoid svg{color:var(--cacao);opacity:.6}
.ai-log{flex:1;overflow:auto;padding:16px 14px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.ai-m{display:flex;gap:10px;align-items:flex-start;max-width:100%}
.ai-m.user{justify-content:flex-end}
.ai-m.user p{background:var(--espresso);color:var(--crema);padding:10px 14px;border-radius:16px 16px 4px 16px;font-size:14.5px;line-height:1.45;max-width:85%}
.ai-m.house>svg{width:28px;height:28px;flex:0 0 auto;margin-top:2px}
.ai-body{background:var(--card);border-radius:4px 16px 16px 16px;padding:12px 14px;font-size:14.5px;line-height:1.5;color:var(--ink);max-width:calc(100% - 38px);box-shadow:0 1px 0 rgba(74,43,43,.05),0 4px 14px rgba(74,43,43,.06)}
.ai-body p+p{margin-top:8px}
.ai-body a{color:var(--cacao);text-decoration:underline;text-underline-offset:3px}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ai-chips .chip{height:32px;font-size:13px;padding:0 12px;min-width:0}
.ai-cards{display:grid;gap:8px;margin-top:10px}
.ai-card{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;padding:8px;border-radius:12px;background:var(--crema);box-shadow:inset 0 0 0 1px var(--rule);text-decoration:none!important;color:var(--ink)}
.ai-card:hover{box-shadow:inset 0 0 0 1px var(--hair)}
.ai-card img{width:56px;height:56px;object-fit:contain;display:block;background:var(--card);border-radius:8px}
.ai-card-t b{display:block;font-size:14px;font-weight:600;line-height:1.25}
.ai-card-t span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.ai-card.out{opacity:.7}
.ai-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px!important}
.ai-tags em{font-style:normal;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--cacao);background:rgba(74,43,43,.07);padding:2px 6px;border-radius:999px}
.ai-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ai-links .cta{margin:0;padding:9px 14px;font-size:13.5px}
.ai-draft{margin-top:12px;padding:12px;border-radius:12px;background:var(--crema);box-shadow:inset 0 0 0 1px var(--rule)}
.ai-draft b{display:block;font-size:14px;margin-top:4px}
.ai-draft pre{white-space:pre-wrap;font:inherit;font-size:13.5px;line-height:1.5;color:var(--ink);margin-top:8px}
.ai-m.typing .ai-body{display:flex;gap:5px;padding:14px 16px}
.ai-m.typing span{width:7px;height:7px;border-radius:50%;background:var(--cacao);opacity:.5;animation:aidot 1.1s infinite}
.ai-m.typing span:nth-child(2){animation-delay:.18s}.ai-m.typing span:nth-child(3){animation-delay:.36s}
@keyframes aidot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
.ai-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--rule);background:var(--card)}
.ai-form input{flex:1;font:inherit;font-size:15px;padding:12px 14px;border-radius:12px;border:0;background:var(--crema);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.ai-form input:focus{outline:2px solid var(--pistachio);outline-offset:1px}
.ai-form button{width:46px;border-radius:12px;background:var(--espresso);color:var(--crema);display:grid;place-items:center}
.ai-form button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ai-foot{font-size:11px;color:var(--muted);padding:6px 16px 10px;background:var(--card);line-height:1.4}
.ai-body ul{margin:6px 0 0 16px;display:grid;gap:4px}
.ai-body li{font-size:14.5px;line-height:1.45}

/* ---- modifiers and per-kg ordering ---- */
.card .price .unit{color:var(--muted);font-size:12px;margin-left:4px}
.pdp-unit{font-size:14px;color:var(--cacao)}
.pdp-mods{margin-top:20px;display:grid;gap:14px}
.mod{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--rule)}
.mod-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.mod-head b{font-size:15px;font-weight:600}
.mod-req{font-size:12.5px;color:var(--muted)}
.mod-count{font-size:12.5px;font-weight:600;color:var(--cacao);background:rgba(107,74,58,.10);padding:2px 8px;border-radius:999px}
.mod-count.ok{color:var(--crema);background:var(--pistachio)}
.mod-hint{font-size:13px;color:var(--muted);line-height:1.45;margin-top:4px}
.mod-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.mopt{height:38px;padding:0 14px;border-radius:999px;background:var(--crema);box-shadow:inset 0 0 0 1px var(--rule);font-size:14px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:6px;transition:background .15s,color .15s,box-shadow .15s}
.mopt em{font-style:normal;font-size:12px;color:var(--cacao)}
.mopt:hover{box-shadow:inset 0 0 0 1px var(--hair)}
.mopt.on{background:var(--espresso);color:var(--crema);box-shadow:none}
.mopt.on em{color:rgba(246,238,229,.75)}
/* flavours: the ingredient mark beside the name, the same marks as on the cards */
.mopt .mico{display:inline-flex;width:18px;height:18px;color:var(--cacao)}
.mopt .mico svg{width:18px;height:18px;fill:currentColor}
.mopt.on .mico{color:var(--crema)}
.mod-opts.flavours .mopt{padding-left:11px}
.mopt.out{opacity:.45;cursor:not-allowed;text-decoration:line-through;text-decoration-color:var(--hair)}
.mopt.out em{text-decoration:none}
/* a card for a drink that comes in flavours says so */
.card .choices{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;font-weight:500;color:var(--cacao)}
.card .choices .mini{display:inline-flex;gap:3px}
.card .choices .mini svg{width:14px;height:14px;fill:currentColor}
.mod-rows{display:grid;gap:6px;margin-top:10px}
.mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 6px 10px;border-radius:10px;font-size:14.5px}
.mrow.on{background:var(--crema)}
.mq{display:inline-flex;align-items:center;gap:2px}
.mq button{width:30px;height:30px;border-radius:50%;background:rgba(74,43,43,.06);color:var(--espresso);font-size:17px;display:grid;place-items:center}
.mq button:disabled{opacity:.3;cursor:default}
.mq b{min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
.kgfield{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--cacao);margin-left:4px}
.kgfield input{width:86px;font:inherit;font-size:15px;padding:8px 10px;border-radius:10px;border:0;background:var(--crema);box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink)}
.kgfield input:focus{outline:2px solid var(--pistachio);outline-offset:1px}
.mod-err{font-size:14px;color:#8a3b2f;font-weight:500}
.cart-lines .ln .mods{color:var(--muted)}

/* ---- product photo gallery ---- */
.pdp-gallery{position:sticky;top:76px;display:grid;gap:12px;align-self:start;min-width:0}
.pdp-gallery .pdp-media{position:relative;top:auto}
.pdp-thumbs{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 4px}
.pdp-thumb{flex:0 0 auto;width:72px;height:72px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);display:grid;place-items:center;padding:7px;transition:box-shadow .15s}
.pdp-thumb:hover{box-shadow:inset 0 0 0 1px var(--hair)}
.pdp-thumb.on{box-shadow:inset 0 0 0 2px var(--espresso)}
.pdp-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
@media (max-width:820px){.pdp-gallery{position:relative;top:auto}.pdp-thumb{width:60px;height:60px}}

/* ---- checkout (/checkout, /order/…) ---- */
.co-wrap{max-width:1080px}
.co-wrap.narrow{max-width:720px}
.co-test{margin-bottom:22px;padding:12px 16px;border-radius:12px;background:rgba(138,75,43,.10);color:#6b3a20;font-size:14.5px;line-height:1.45}
.co-head h1,.co h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,52px);line-height:1.04;color:var(--ink);margin:6px 0 0;text-wrap:balance}
.co-head .lede,.co .lede{margin-top:12px;font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--ink);max-width:60ch}
.co-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(20px,3vw,40px);margin-top:28px;align-items:start}
@media (max-width:880px){.co-grid{grid-template-columns:1fr}.co-sum{order:-1}}
.co-form .step{margin-bottom:16px;padding:22px 24px 24px;border-radius:18px;background:var(--card);box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.co-form .step .lg{display:flex;align-items:center;gap:12px;font-size:clamp(18px,1.7vw,21px);font-weight:600;line-height:1.2;margin:0 0 4px;color:var(--ink)}
.co-form .step .lg .n{width:26px;height:26px;border-radius:50%;background:var(--espresso);color:var(--crema);font-size:13px;display:grid;place-items:center;flex:0 0 auto}
.co-form .fld input,.co-form .fld select,.co-form .fld textarea{background:var(--crema)}
.co .hint{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.co .err{margin-top:12px;font-size:14px;color:#8a3b2f;font-weight:500}
.co .pdp-ctas{margin-top:16px}.co .pdp-ctas .cta{margin:0}
.co-sum{position:sticky;top:76px;background:var(--card);border-radius:18px;padding:22px 22px 18px;box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
@media (max-width:880px){.co-sum{position:relative;top:auto}}
.co-sum h2{font-size:17px;font-weight:600;margin:0 0 8px}
.co-lines{list-style:none;margin:0;padding:0;display:grid;gap:0}
.co-lines li{display:grid;grid-template-columns:48px 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.co-lines img{width:48px;height:48px;object-fit:contain}
.co-lines b{display:block;font-weight:600;line-height:1.3}
.co-lines small{display:block;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:2px}
.co-lines .q{color:var(--cacao);font-size:13.5px;white-space:nowrap}
.co-lines .a{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.co-lines .co-loading{display:block;color:var(--muted);border:0}
.co-lines.done{margin-top:22px}
.co-issues{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(138,75,43,.10);font-size:13.5px;color:#6b3a20}
.co-issues p+p{margin-top:4px}
.co-totals{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:14px 0 0;font-size:15px}
.co-totals dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.co-totals .muted{color:var(--muted);font-size:13.5px}
.co-totals .tot{font-weight:700;font-size:17px;padding-top:6px;border-top:1px solid var(--rule)}
.co-edit{display:inline-block;margin-top:14px;font-size:13.5px;color:var(--cacao);text-decoration:underline;text-underline-offset:3px}
.co-facts{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin-top:22px;font-size:15px}
.co-facts dt{font-size:13px;font-weight:600;color:var(--cacao);padding-top:2px}
.co-facts dd{margin:0}
.co-facts .muted{color:var(--muted);font-size:13.5px}
.co-empty{max-width:560px;margin-top:24px}
.co-empty h2{font-family:var(--serif);font-weight:400;font-size:32px}
.co-empty p{margin-top:8px}

/* ---------- checkout, stage 2: payment on the page ---------- */
.co [hidden]{display:none!important}
.co-club{margin:2px 0 18px;padding:14px 16px;border-radius:14px;background:rgba(92,107,66,.09);font-size:14.5px;line-height:1.45}
.co-club-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.co-club b{color:var(--pistachio);font-weight:600;margin-right:4px}
.co-club .hint{margin-top:8px}
.co-club-ok{margin-top:8px}
.co-club .err{margin-top:8px}
.linkish{color:var(--cacao);text-decoration:underline;text-underline-offset:3px;font-size:14px;cursor:pointer}
.co-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.co-check input{margin-top:4px;width:16px;height:16px;accent-color:var(--pistachio);flex:0 0 auto}
.co-code{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.co-code input{width:10ch;padding:10px 12px;border-radius:10px;border:1px solid var(--hair);background:var(--card);font:inherit;font-size:17px;letter-spacing:.18em}
.co-code .cta{margin:0}
.co-tiers{list-style:none;display:grid;gap:8px;margin-top:8px}
.co-tiers button{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);text-align:left;font-size:14.5px}
.co-tiers button:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--pistachio)}
.co-tiers button:disabled{opacity:.45;cursor:default}
.co-tiers small{color:var(--muted);white-space:nowrap;font-size:13px}
.co-tip{border:0;margin:0 0 18px;padding:0;min-width:0}
.co-tip legend{font-size:14.5px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.co-tip legend em{font-style:normal;font-weight:400;color:var(--muted);margin-left:4px}
.co-tips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media (max-width:520px){.co-tips{grid-template-columns:repeat(3,1fr)}}
.co-tips button{padding:9px 6px;border-radius:12px;background:var(--crema);box-shadow:inset 0 0 0 1px var(--rule);font-size:14px;font-weight:600;line-height:1.2;transition:background .15s}
.co-tips button small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.co-tips button[aria-pressed="true"]{background:var(--espresso);color:var(--crema);box-shadow:none}
.co-tips button[aria-pressed="true"] small{color:rgba(246,238,229,.75)}
.co-tip-other{margin-top:10px;max-width:220px}
.co-wallets{display:grid;gap:10px}
#apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;display:block;width:100%;height:48px;border-radius:12px;cursor:pointer}
#google-pay-button{min-height:48px}
.co-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;font-size:13px;color:var(--muted)}
.co-or::before,.co-or::after{content:"";flex:1;height:1px;background:var(--rule)}
#card-container{min-height:92px}
.co-paybtn{width:100%;justify-content:center;margin-top:6px;font-size:16px;padding:14px 24px}
.co-paybtn:disabled{opacity:.6;cursor:progress}
.co-gift{margin-top:18px;border-top:1px solid var(--rule);padding-top:12px}
.co-gift summary{cursor:pointer;font-size:14.5px;font-weight:600;color:var(--cacao)}
.co-gift[open] summary{margin-bottom:12px}
.co-gift .cta{margin:0 0 4px}
.co-giftok{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:rgba(92,107,66,.10);font-size:14px}
.co-secure{margin-top:14px}
.co-fallback button{color:var(--cacao);text-decoration:underline;text-underline-offset:3px;font-size:inherit}

/* ---------- legal pages (terms, refunds, privacy) ---------- */
.legal-wrap{max-width:760px}
.legal-draft{margin-bottom:22px;padding:12px 16px;border-radius:12px;background:rgba(138,75,43,.10);color:#6b3a20;font-size:14.5px;line-height:1.45}
.legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,52px);line-height:1.04;margin:6px 0 0;color:var(--ink)}
.legal .lede{margin-top:12px;font-size:clamp(16px,1.3vw,18px);line-height:1.55;max-width:60ch}
.legal-updated{margin-top:10px;font-size:13.5px;color:var(--muted)}
.legal-toc{display:flex;flex-wrap:wrap;gap:6px 16px;margin:22px 0 8px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:14px}
.legal-toc a{color:var(--cacao);text-decoration:underline;text-underline-offset:3px}
.legal section{margin-top:30px;scroll-margin-top:72px}
.legal h2{font-size:clamp(19px,1.8vw,22px);font-weight:600;line-height:1.25;margin-bottom:10px;color:var(--ink)}
.legal p,.legal li,.legal dd{font-size:16px;line-height:1.6;max-width:68ch}
.legal p+p{margin-top:10px}
.legal ul{margin:8px 0 0 20px;display:grid;gap:6px}
.legal a{color:var(--cacao);text-decoration:underline;text-underline-offset:3px}
.legal-dl{display:grid;gap:14px;margin-top:6px}
.legal-dl dt{font-weight:600;font-size:15px;color:var(--espresso)}
.legal-dl dd{margin:2px 0 0}
.legal mark.decide{background:rgba(214,170,60,.28);color:inherit;padding:1px 3px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.legal-foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--rule);font-size:14px!important;color:var(--muted)}
.co-secure a{color:var(--cacao);text-decoration:underline;text-underline-offset:3px}

/* ---------- catering request form ---------- */
.cat-req{max-width:780px}
.cat-req [hidden]{display:none!important}
.cat-form{margin-top:18px}
.cat-form .row2,.cat-form .row3{display:grid;gap:12px}
.cat-form .row2{grid-template-columns:1fr 1fr}
.cat-form .row3{grid-template-columns:1.3fr 1fr .8fr}
@media (max-width:640px){.cat-form .row2,.cat-form .row3{grid-template-columns:1fr}}
.cat-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cat-form .co-news{margin-top:18px;font-size:15px}
.cat-form .err{margin-top:12px;color:#8A3B2F;font-size:15px}
.cat-form .hint{margin-top:14px;font-size:14px;color:var(--muted)}
.cat-form .hint a{color:var(--cacao);text-decoration:underline;text-underline-offset:3px}
.cat-form .pdp-ctas{margin-top:18px}
.cat-done{margin-top:18px;padding:24px 26px;border-radius:18px;background:var(--card)}
.cat-done h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1}
.cat-done p{margin-top:10px}

/* "Just in.": the card's tag says why it is there */
.card .price .newtag{display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--pistachio);color:var(--crema);vertical-align:1px}
.card .price .newtag.back{background:rgba(92,107,66,.16);color:var(--pistachio)}
.card.dark .price .newtag.back{background:rgba(246,238,229,.18);color:var(--crema)}

/* a product card is one big link to its page: the controls on it keep their own cursor */
.card.prod[data-slug]{cursor:pointer}
.card.prod[data-slug] button,.card.prod[data-slug] a{cursor:pointer}

/* category page: hide sold out */
/* the sort control and the sold-out filter share a row under the count */
.cat-tools{grid-column:2;justify-self:start;display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;margin-top:2px}
.cat-sort{display:inline-flex;align-items:center;gap:9px;font-size:14px;line-height:1;color:var(--muted)}
.cat-sort span{letter-spacing:.04em;text-transform:uppercase;font-size:11px;font-weight:600}
.cat-sort select{font:inherit;font-size:14px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(74,43,43,.28);border-radius:0;padding:3px 20px 4px 2px;cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A2B2B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;background-size:13px}
.cat-sort select:hover{border-bottom-color:var(--espresso)}
.cat-sort select:focus-visible{outline:2px solid var(--pistachio);outline-offset:3px}
.cat-tools .oos-filter{grid-column:auto;margin-top:0}
/* The single-column phone rule for the category hero lives up at the ".cat-hero" block, ~750 lines
   above, and loses: these .cat-tools rules come later in the file and put the tools back in column 2,
   which makes grid create an implicit second column even where the template says 1fr. The mark then
   auto-places into it and is pushed off a narrow screen — worst on a category with no products, where
   .cat-tools is empty and the implicit column is only as wide as the mark. Restated here, after the
   rules that were overriding it, so the phone layout is actually one column. */
@media (max-width:560px){
  .cat-hero .wrap{grid-template-columns:1fr}
  .cat-hero .wrap > *{grid-column:1}
}
.oos-filter{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:9px;margin-top:2px;font-size:14px;line-height:1;color:var(--ink);cursor:pointer;user-select:none}
.oos-filter input{position:absolute;opacity:0;width:0;height:0}
.oos-filter .tick{width:18px;height:18px;flex:0 0 auto;border:1.5px solid var(--hair);border-radius:6px;background:var(--card);display:inline-block;position:relative;transition:background .15s,border-color .15s}
.oos-filter .tick::after{content:"";position:absolute;left:5.5px;top:2px;width:4px;height:9px;border:solid var(--crema);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s}
.oos-filter input:checked+.tick{background:var(--espresso);border-color:var(--espresso)}
.oos-filter input:checked+.tick::after{transform:rotate(45deg) scale(1)}
.oos-filter input:focus-visible+.tick{outline:2px solid var(--pistachio);outline-offset:2px}
body.hide-oos .pgrid .card.prod.is-soldout{display:none}

/* Custom cakes: the dietary tick boxes and the picture field on /custom-cakes */
.fld-set{border:0;padding:0;margin-top:12px}
.fld-set legend{padding:0;font-size:13px;font-weight:600;color:var(--cacao)}
.fld-set .checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 18px;margin-top:8px;font-weight:400;font-size:15px;color:var(--ink)}
.fld input[type=file]{padding:10px 12px;font-size:14px;background:var(--crema)}
.fld small.hint{font-weight:400;font-size:13px;color:var(--muted);margin-top:-2px}

/* Google reviews: the rating line, the review cards and the house's answer */
.grate{display:flex;align-items:baseline;gap:10px;margin-top:18px;flex-wrap:wrap}
.grate b{font-family:var(--serif);font-size:30px;line-height:1;color:var(--espresso)}
.grate span{font-size:14px;color:var(--muted)}
.gstars{display:inline-flex;gap:2px;align-items:center}
.gstars svg{fill:rgba(74,43,43,.16)}
.gstars svg.on{fill:#E8B54D}
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:22px}
.gcard{margin:0;padding:20px 22px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule);display:flex;flex-direction:column;gap:12px}
.ghead{display:flex;align-items:center;gap:10px}
.ghead img,.gav{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.gav{display:grid;place-items:center;background:var(--tile);color:var(--cacao);font-weight:600}
.ghead div{flex:1 1 auto;min-width:0}
.ghead b{display:block;font-size:15px}
.ghead small{display:block;font-size:12px;color:var(--muted)}
.gcard blockquote{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.greply{padding:12px 14px;border-radius:12px;background:var(--crema);font-size:14px;line-height:1.55}
.greply b{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--cacao);margin-bottom:4px}
.greply p{margin:0;color:var(--ink)}
.gcard figcaption{margin-top:auto;font-size:12.5px}
.gcard figcaption a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.foot-google{display:inline-flex;align-items:center;gap:8px}
.foot-google svg{width:22px;height:22px;flex:0 0 auto}
.ftr-say{margin:18px 0 0}
.ftr-say a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.ftr-say svg{width:40px;height:40px;flex:0 0 auto}
.ftr-say b{display:block;font-size:15px}
.ftr-say small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.ftr-say a:hover b{color:var(--pistachio)}


/* ---- /menu: the whole menu on one page ---------------------------------- */
.menu-page .lede{max-width:46ch}
.menu-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.menu-jump a{font-size:13px;letter-spacing:.02em;padding:5px 11px;border:1px solid var(--rule);border-radius:999px;color:var(--muted);text-decoration:none}
.menu-jump a:hover,.menu-jump a:focus-visible{color:var(--ink);border-color:var(--ink)}
.menu-wrap{display:grid;gap:clamp(30px,4vw,48px)}
.menu-sec{scroll-margin-top:84px}
.menu-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--rule);font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,32px);line-height:1.1}
.menu-h a{text-decoration:none;color:inherit}
.menu-h a:hover{text-decoration:underline}
.menu-h .menu-sub{font-family:var(--sans);font-size:14px;letter-spacing:0;color:var(--muted);font-weight:400}
.menu-list{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(24px,4vw,56px)}
.menu-list li{break-inside:avoid;display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:15px}
.menu-list li>a{text-decoration:none;color:var(--ink)}
.menu-list li>a:hover{text-decoration:underline}
.menu-list li::after{content:"";flex:1 1 auto;border-bottom:1px dotted var(--rule);transform:translateY(-3px);min-width:14px;order:2}
.menu-list .menu-price{order:3;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.menu-list .menu-oos{order:1;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.menu-list li.out>a{color:var(--muted)}
@media (max-width:720px){.menu-list{columns:1}}


/* ---- /persian and /fa/persian ------------------------------------------- */
.fa-page{font-family:'Vazirmatn',system-ui,sans-serif}
.fa-page h1,.fa-page h2,.fa-page h3,.fa-page .eyebrow,.fa-page .lede,.fa-page .pr-card h3{font-family:'Vazirmatn',system-ui,sans-serif;letter-spacing:0}
.fa-page h1{line-height:1.4}
.fa-page .lede{line-height:1.95}
.fa-page p,.fa-page li{line-height:2.05}
.fa-page .crumbs{direction:rtl}
.fa-page .pr-card h3{line-height:1.5}
.pr-lang{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:5px 13px;text-decoration:none}
.pr-lang:hover,.pr-lang:focus-visible{color:var(--ink);border-color:var(--ink)}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(16px,2.4vw,26px);margin-top:clamp(20px,3vw,32px)}
.pr-card{background:var(--card);border-radius:var(--r);padding:clamp(20px,2.6vw,28px);box-shadow:0 1px 0 rgba(74,43,43,.05),0 6px 22px rgba(74,43,43,.06)}
.pr-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.4vw,26px);line-height:1.15;margin:0 0 4px}
.pr-card .pr-native{display:block;font-size:14px;color:var(--cacao);margin-bottom:10px}
.pr-card p{margin:0 0 12px}
.pr-card a.pr-go{font-size:14px;text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:1px}
.pr-card a.pr-go:hover{border-bottom-color:var(--ink)}
.pr-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.pr-list a{font-size:13px;padding:5px 11px;border:1px solid var(--rule);border-radius:999px;text-decoration:none;color:var(--muted)}
.pr-list a:hover{color:var(--ink);border-color:var(--ink)}


/* ---- /faq ---------------------------------------------------------------- */
.faq-wrap{max-width:46rem}
.faq-q{border-bottom:1px solid var(--rule)}
.faq-q summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;padding:18px 0;font-size:clamp(17px,2vw,20px);font-weight:500}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;border-right:1.6px solid var(--cacao);border-bottom:1.6px solid var(--cacao);transform:rotate(45deg) translateY(-3px);transition:transform .18s}
.faq-q[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq-q summary:hover{color:var(--espresso)}
.faq-q p{margin:0 0 20px;max-width:42rem;color:var(--muted)}


/* The breadcrumb sits inside two hero wraps that are grids (.sub-hero and .cat-hero), where it would otherwise
   take a cell of its own and shunt the mark and the heading out of their columns. It spans the full row instead. */
.crumbs-in{padding:0;grid-column:1 / -1}
.sub-hero .wrap > .crumbs-in,.cat-hero .wrap > .crumbs-in{margin-bottom:-8px}
.menu-page .crumbs-in{margin-bottom:14px}

/* /persian and /faq: the mark is from the category alphabet and the sub-page default of 340px is too big for it */
.pr-pg .sub-mark svg,.faq-pg .sub-mark svg{max-width:220px}
@media (max-width:760px){.pr-pg .sub-mark svg,.faq-pg .sub-mark svg{max-width:130px}}

/* These lift the two lines measured short over the artwork, and they MUST stay after the .on-ink / .on-espresso
   text rules above: the selectors carry identical specificity, so source order is the only thing deciding it.
   Placed earlier in the file they lost silently and the sub-line stayed at .78 on an orange ground. */
.feast-hero.has-art .cat-title .sub{color:var(--crema)}
.feast-hero.has-art .feast-note{color:rgba(246,238,229,.85)}
/* full strength, not .85: the breadcrumb sits in the top-left corner where the COBWEB is, the palest thing
   in the painting, and .85 measured 3.92:1 there against a 4.5 target. */
.feast-hero.has-art .crumbs,.feast-hero.has-art .crumbs a{color:var(--crema)}

/* The phone overrides MUST live here, after every base .has-art rule above. They carry the same specificity,
   a media query adds none of its own, so source order is the only thing that decides. Sitting mid-file they
   lost silently: the scrim stayed at the desktop 26% and the eyebrow kept its ember. */
@media (max-width:760px){
  .feast-hero.has-art::before{background-image:var(--art-t)}
  /* The tall crop puts the MOON directly behind the eyebrow, and there is no room to move it out of the way:
     at 375px the artwork is scaled to the band's WIDTH, so it is only 21px taller than the band and shifting
     the position vertically changes nothing. Measured there, the ember eyebrow sat at 1.72:1 and no scrim
     rescues ember on a near-white moon, so on a phone the eyebrow goes cream and the scrim is weighted to the
     top, where the moon and all the text are. The hill and the pumpkins along the bottom stay as painted. */
  .feast-hero.has-art::after{background:linear-gradient(to bottom,
    color-mix(in srgb,var(--fbg) 72%,transparent) 0%,
    color-mix(in srgb,var(--fbg) 66%,transparent) 45%,
    color-mix(in srgb,var(--fbg) 18%,transparent) 100%)}
  .feast-hero.has-art .feast-eyebrow{color:var(--crema)}
}