/* Copied verbatim from the approved prototype, concept-5-unboxed.html (its main <style> block). Do not tidy it: see docs/domains/storefront.md. */
/* Concept 5, "Unboxed": concept 1's white page, double black rules and gold, with the cyan studio sweep of her tea shoot as luminous stages. The tin tells the story: open it, see the leaf, steep a glass, shop. */
:root{
  --paper:#ffffff;--ink:#141716;--ink-2:#4d5856;--line:#d9e6e5;--teal:#88c9c6;--mint:#d7f0ef;--mint-2:#eef8f7;--velvet:#0e4f4b;--saffron:#b8321a;--gold-solid:#b8892d;
  --gold:linear-gradient(90deg,#9a7224 0%,#f3d98b 28%,#b88a2c 52%,#f6e3a1 74%,#8a6420 100%);
  --sweep:radial-gradient(58% 44% at 50% 60%,rgba(255,255,255,.5),rgba(255,255,255,0) 72%),linear-gradient(180deg,#a8e1ed 0%,#96dae9 42%,#82d2e4 60%,#6fcbe0 80%,#5cc6dc 100%);
  --photo-cyan:#86d4e4;
  --display:"Bodoni Moda","Bodoni 72","Didot",Georgia,serif;
  --deco:"Josefin Sans","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --fa:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,48px);--max:1360px;--ease:cubic-bezier(.2,.75,.15,1);
  --hh:78px;--inset:clamp(10px,1.1vw,16px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth .layer[data-lenis-prevent],.lenis.lenis-smooth .layer [data-lenis-prevent]{overscroll-behavior:contain}
main{transition:opacity .28s ease}
html.is-jumping main{opacity:0;transition-duration:.12s}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--deco);font-size:17px;line-height:1.6;font-weight:400;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
input,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--velvet);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:400}
p{margin:0}
.eyebrow{display:inline-block;font-family:var(--deco);font-weight:700;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--velvet)}
.fa{font-family:var(--fa);direction:rtl}
.h2{font-family:var(--display);font-size:clamp(40px,5vw,70px);line-height:1.02;letter-spacing:-.01em}
.h2 em{font-style:italic}
.lede{font-size:clamp(16.5px,1.3vw,18.5px);color:var(--ink-2);max-width:52ch;line-height:1.65}
.section{padding-block:clamp(64px,7.5vw,108px)}
section[id]{scroll-margin-top:var(--hh)}
.tabbar,.grip,.qv-bar-price{display:none}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- buttons (concept 1) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:16px 28px 13px;font-family:var(--deco);font-weight:600;font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease)}
.btn-gold{border:2px solid transparent;border-image:var(--gold) 1;background:var(--paper)}
.btn-gold::after{content:"";position:absolute;left:14px;right:14px;bottom:-8px;height:3px;background:var(--gold);transition:left .45s var(--ease),right .45s var(--ease)}
.btn-gold:hover{background:var(--mint)}
.btn-gold:hover::after{left:-2px;right:-2px}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--velvet)}
.btn-full{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding-block:12px 9px;border-bottom:1px solid currentColor;white-space:nowrap}
.link-arrow svg{transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}
.price{font-family:var(--display);font-size:22px;font-variant-numeric:lining-nums tabular-nums}
.add{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 14px 8px;border:1.5px solid transparent;border-image:var(--gold) 1;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;background:var(--paper);transition:background .25s}
.add:hover{background:var(--mint)}
.add .ico{width:16px;height:16px}
.seg{position:relative;z-index:2;display:inline-flex;border:1px solid var(--ink)}
.seg button{min-width:44px;min-height:36px;padding:8px 10px 5px;font-size:12px;font-weight:700;letter-spacing:.1em}
.seg button[aria-pressed="true"]{background:var(--velvet);border-color:var(--gold-solid);color:#fff;box-shadow:inset 0 0 0 1px rgba(243,217,139,.5)}
.badge{display:inline-block;padding:7px 10px 5px;background:var(--paper);border:1px solid transparent;border-image:var(--gold) 1;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.2}

/* ---------- announcement + header (concept 1) ---------- */
.announce{background:var(--teal);color:var(--ink);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.announce ul{list-style:none;margin:0 auto;padding:10px var(--gutter) 8px;display:flex;justify-content:center;gap:clamp(18px,4vw,56px);max-width:var(--max)}
.announce li{display:flex;align-items:center;gap:10px;white-space:nowrap}
.announce .ico{width:17px;height:17px}
.hdr{position:sticky;top:0;z-index:50;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.hdr::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--progress,0));background:var(--gold)}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:74px;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.hdr-left,.hdr-right{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.hdr-right{justify-content:flex-end}
.burger{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.burger span.lines{display:grid;gap:5px;width:28px}
.burger span.lines i{display:block;height:2px;background:var(--ink)}
.nav{display:flex;gap:clamp(14px,1.8vw,28px)}
.nav a{font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding-block:12px 9px;background:linear-gradient(var(--gold-solid),var(--gold-solid)) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--ease)}
.nav a:hover,.nav a[aria-current="true"]{background-size:100% 1.5px}
.reserve{font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding-block:10px 4px;background:linear-gradient(90deg,#d8b24a,#f1d27a,#c99a33) 0 100%/100% 4px no-repeat}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px}
.icon-btn .ico{width:24px;height:24px}
.count{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--teal);color:var(--ink);font-size:11.5px;font-weight:700;display:grid;place-items:center;line-height:1;border:1.5px solid var(--paper);font-variant-numeric:tabular-nums;transition:transform .3s var(--ease)}
.count.bump,.tab-count.bump{transform:scale(1.35)}
.logo{position:relative;display:block;width:112px;height:74px}
.logo img{position:absolute;left:50%;top:50%;width:104px;height:auto;transform:translate(-50%,-50%);transition:width .45s var(--ease);filter:drop-shadow(0 2px 0 var(--paper))}
.hdr.compact .logo img{width:78px}
.hdr .logo img.hold{opacity:0;animation:failsafe 0s linear 2s forwards}
@keyframes failsafe{to{opacity:1}}

/* ---------- HERO: open the tin ---------- */
.hero{position:relative;padding:var(--inset) var(--inset) 0;background:var(--paper);
  --tw:clamp(150px,min(22vw,calc(53svh - 167px)),350px);--th:calc(var(--tw) * 1.379);--ls:calc(var(--tw) * .5);--tin-b:150px}
.stage{position:relative;height:calc(100svh - var(--hh) - var(--inset));min-height:620px;overflow:hidden;background:var(--sweep);isolation:isolate}
.stage::before{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:34%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.12) 30%,rgba(40,140,170,.08));pointer-events:none}
.stage::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(20,110,140,.16);pointer-events:none;z-index:6}
.h-top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px clamp(18px,2.4vw,34px)}
.h-eyebrow{display:flex;align-items:center;gap:12px;font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--velvet);white-space:nowrap}
.h-eyebrow i{width:5px;height:5px;transform:rotate(45deg);background:var(--gold-solid)}
.h-eyebrow #hTopName{color:var(--ink)}
.h-dots{display:flex;align-items:center;gap:6px}
.h-dots .lbl{font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--velvet);margin-right:10px;white-space:nowrap}
.dot{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:50%}
.dot::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.85);transition:transform .35s var(--ease),box-shadow .35s}
.dot:hover::before{transform:scale(1.2)}
.dot[aria-pressed="true"]::before{transform:scale(1.25);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--gold-solid)}
.dot::after{content:attr(data-name);position:absolute;top:calc(100% + 8px);right:50%;transform:translateX(50%) translateY(-4px);padding:7px 10px 5px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease)}
.dot:hover::after,.dot:focus-visible::after{opacity:1;transform:translateX(50%)}
.h-dots .dot:last-child::after{right:0;transform:translateY(-4px)}
.h-dots .dot:last-child:hover::after{transform:none}

.h-title{position:absolute;inset:0;z-index:1;margin:0;pointer-events:none;font-family:var(--display);font-weight:400;color:var(--velvet);font-size:calc(var(--th) * .4);line-height:.9;letter-spacing:-.035em;white-space:nowrap}
.h-title .l{position:absolute;display:block}
.h-title .l1{right:calc(50% + var(--tw) * .45);bottom:calc(var(--tin-b) + var(--th) * .52)}
.h-title .l2{left:calc(50% + var(--tw) * .43);bottom:calc(var(--tin-b) + var(--th) * .1)}
.h-title em{font-style:italic}
.h-sub{position:absolute;z-index:1;right:calc(50% + var(--tw) * .62);bottom:calc(var(--tin-b) + var(--th) * .16);max-width:21ch;text-align:right;font-size:15.5px;line-height:1.5;color:var(--velvet)}

.tin{position:absolute;z-index:3;left:calc(50% - var(--tw) / 2);bottom:var(--tin-b);width:var(--tw);display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tin:focus-visible{outline-offset:8px}
.tin-float{display:block;position:relative}
.lid{position:relative;display:block;z-index:2;transform-origin:50% 90%}
.lid img,.tbody img{width:100%;height:auto;transition:opacity .28s ease}
.lid-under{position:absolute;z-index:-1;left:14.5%;right:14.5%;bottom:calc(var(--tw) * -.035);height:calc(var(--tw) * .07);border-radius:50%;background:radial-gradient(60% 70% at 50% 35%,#3b2a10,#7a5a22 70%,#c59a45);opacity:0}
.glint{position:absolute;inset:0;overflow:hidden;-webkit-mask:var(--lid-url) center/100% 100% no-repeat;mask:var(--lid-url) center/100% 100% no-repeat;mix-blend-mode:screen;pointer-events:none}
.glint i{position:absolute;top:-10%;bottom:-10%;left:0;width:38%;background:linear-gradient(100deg,rgba(255,240,200,0) 0%,rgba(255,244,214,.9) 50%,rgba(255,240,200,0) 100%);transform:translateX(-130%) skewX(-12deg)}
.tbody{position:relative;display:block;z-index:1;margin-top:calc(var(--tw) * -.011)}
/* the client's tins open at the cap: with it off, the plain gold neck stands on the shoulder, cut from her own
   photo of an opened Sultans Earl Grey tin (it sits under the cap, so it only shows once the cap lifts) */
.neck{position:absolute;z-index:2;left:13.34%;width:73.33%;top:calc(var(--tw) * -.1253);pointer-events:none}
.neck img{display:block;width:100%;height:auto;transition:opacity .28s ease}
.reflect{position:absolute;z-index:2;left:calc(50% - var(--tw) / 2);width:var(--tw);top:calc(100% - var(--tin-b) + 1px);height:calc(var(--tw) * .4);overflow:hidden;opacity:.16;pointer-events:none;-webkit-mask:linear-gradient(#000,rgba(0,0,0,0) 85%);mask:linear-gradient(#000,rgba(0,0,0,0) 85%)}
.reflect img{display:block;width:100%;height:auto;transform:scaleY(-1)}
html:not(.js-anim) .reflect{top:auto;bottom:calc(var(--tin-b) - var(--tw) * .4 - 1px)}
.tin-shadow{position:absolute;z-index:2;left:calc(50% - var(--tw) * .62);width:calc(var(--tw) * 1.24);bottom:calc(var(--tin-b) - var(--tw) * .07);height:calc(var(--tw) * .15);border-radius:50%;background:radial-gradient(closest-side,rgba(6,70,88,.42),rgba(6,70,88,.16) 60%,rgba(6,70,88,0));pointer-events:none}

.loupe{position:absolute;z-index:4;margin:0;width:var(--ls);left:calc(50% + var(--lx) * var(--tw) - var(--ls) / 2);top:calc(100% - var(--tin-b) - var(--th) / 2 + var(--ly) * var(--tw) - var(--ls) / 2)}
.loupe:nth-child(1){--lx:-1.32;--ly:-.6}
.loupe:nth-child(2){--lx:-1.3;--ly:.22}
.loupe:nth-child(3){--lx:1.58;--ly:-.66}
.loupe:nth-child(4){--lx:1.32;--ly:.16}
.lens{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--photo-cyan);box-shadow:0 0 0 5px rgba(255,255,255,.5),0 26px 44px -20px rgba(6,60,74,.6)}
.lens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,3)) translate(calc((.5 - var(--fx,.5)) * 100%),calc((.5 - var(--fy,.5)) * 100%));transition:opacity .28s ease}
.lens::after{content:"";position:absolute;inset:0;border-radius:50%;padding:2px;background:conic-gradient(from 210deg,#8a6420,#f3d98b,#b88a2c,#f6e3a1,#9a7224,#8a6420);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.lens::before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;background:radial-gradient(70% 55% at 30% 20%,rgba(255,255,255,.32),rgba(255,255,255,0) 60%)}
.loupe figcaption{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(var(--ls) * 1.5);display:grid;justify-items:center;gap:3px;text-align:center}
.loupe figcaption b{font-family:var(--display);font-style:italic;font-weight:500;font-size:15px;line-height:1;color:#7c5a17}
.loupe figcaption span{font-weight:700;font-size:11.5px;line-height:1.35;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);transition:opacity .28s}
.leaders{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:visible}
.leaders path{fill:none;stroke:#9b7425;stroke-width:1.2}
.leaders circle{fill:#fff;stroke:#9b7425;stroke-width:1.2}

.h-cta{position:absolute;z-index:5;left:0;right:0;bottom:22px;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);padding:14px 16px 14px 26px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 30px 50px -30px rgba(6,60,74,.55)}
.h-cta::before{content:"";position:absolute;inset:6px;border:1px solid transparent;border-image:var(--gold) 1;pointer-events:none}
.hc-name{display:grid;gap:2px;min-width:0}
.hc-name small{font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.hc-name strong{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1.05;white-space:nowrap}
.hc-name .fa{font-size:14px;color:var(--velvet);line-height:1.2;justify-self:start}
.h-cta .price{font-size:30px}
.h-cta .btn{min-height:50px}
.h-cta .btn-gold::after{bottom:-6px;left:10px;right:10px;height:2px}
.h-cue{position:absolute;z-index:5;left:0;right:0;bottom:24px;display:grid;justify-items:center;gap:12px;font-weight:700;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--velvet);pointer-events:none}
.h-cue i{display:block;width:1.5px;height:44px;background:linear-gradient(180deg,rgba(14,79,75,.15),rgba(14,79,75,.15));position:relative;overflow:hidden}
.h-cue i::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:var(--gold-solid);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(260%)}}


/* the tin chooser, as in concept 4: white round chips in a frosted pill */
.h-dots{gap:4px;padding:6px;border-radius:999px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);border:1px solid rgba(255,255,255,.75);box-shadow:0 22px 40px -26px rgba(4,62,72,.6)}
.h-dots .lbl{margin:0 6px 0 10px}
.dot{flex:none;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:none;transition:transform .35s var(--ease),box-shadow .3s ease}
.dot::before{content:none}
.dot img{width:auto;height:31px;transition:transform .45s var(--ease)}
.dot:hover img{transform:translateY(-2px) scale(1.06)}
.dot[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gold-solid),0 10px 18px -10px rgba(4,62,72,.7)}
.loupe.is-empty{display:none!important}
/* static (no GSAP / reduced motion): the finished, opened composition */
html:not(.js-anim) .h-cue,html:not(.js-anim) .h-sub{display:none}
html:not(.js-anim) .stage{height:auto;min-height:0;padding-top:86px}
html:not(.js-anim) .h-title{position:relative;inset:auto;text-align:center;font-size:clamp(44px,6vw,84px);white-space:normal}
html:not(.js-anim) .h-title .l{position:static;display:inline}
html:not(.js-anim) .h-comp{position:relative;height:clamp(560px,calc(var(--th) * 1.9),760px)}
html:not(.js-anim) .lid{transform:translate(calc(var(--tw) * .3),calc(var(--tw) * -.4)) rotate(12deg)}
html:not(.js-anim) .lid-under{opacity:1}
.h-comp{position:absolute;inset:0}
.js-anim .neck,.js-anim .lid-under{opacity:0}
.js-anim .h-cta,.js-anim .loupe,.js-anim .leaders{opacity:0}
.js-anim .h-cta,.js-anim .h-cta *{pointer-events:none}
.js-anim .hero.is-open .h-cta,.js-anim .hero.is-open .h-cta *{pointer-events:auto}

/* ---------- MEET THE TEN: concept 4's "look closer" look (shelf, rounded cards, the leaf close up), with concept 5's tasting notes ---------- */
.bx{position:relative;background:var(--mint-2);overflow:hidden}
.bx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 60px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.bx-head .eyebrow{display:block;margin-bottom:14px}
.bx-head .lede{max-width:42ch}
.bx-tins{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;border-bottom:1px solid var(--line);margin-bottom:clamp(26px,3vw,40px)}
.bx-tins::-webkit-scrollbar{display:none}
.bx-tin{position:relative;flex:1 0 96px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 4px 16px;color:var(--ink-2);scroll-snap-align:center;transition:color .3s}
.bx-tin img{height:62px;width:auto;transition:transform .55s var(--ease),filter .4s;filter:saturate(.8)}
.bx-tin span{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;text-align:center;line-height:1.35;max-width:12ch}
.bx-tin::after{content:"";position:absolute;left:16%;right:16%;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .5s var(--ease)}
.bx-tin:hover{color:var(--ink)}
.bx-tin:hover img{transform:translateY(-4px);filter:none}
.bx-tin[aria-selected="true"]{color:var(--ink)}
.bx-tin[aria-selected="true"] img{transform:translateY(-7px) scale(1.06);filter:drop-shadow(0 10px 8px rgba(4,62,72,.25))}
.bx-tin[aria-selected="true"]::after{transform:scaleX(1)}
.bx-top{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(12px,1.6vw,22px)}
.bx-photo{position:relative;aspect-ratio:3/2;border-radius:26px;overflow:hidden;background:var(--photo-cyan);touch-action:pan-y}
.bx-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease,transform 1.2s var(--ease)}
.bx-photo>img.is-back{opacity:0;transform:scale(1.03)}
.bx-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:46px;height:46px;margin-top:-23px;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 0 0 1px rgba(184,137,45,.55),0 10px 26px -14px rgba(8,50,48,.55);transition:transform .3s var(--ease),background .3s}
.bx-arrow:hover{background:#fff;transform:scale(1.07)}
.bx-arrow .ico{width:19px;height:19px}
.bx-prev{left:14px}
.bx-prev .ico{transform:scaleX(-1)}
.bx-next{right:14px}
.bx-macro{position:relative;margin:0;border-radius:26px;overflow:hidden;background:var(--photo-cyan);min-height:100%}
.bx-macro>img,.bx-crop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .55s ease}
.bx-crop{background-repeat:no-repeat}
.bx-macro .is-off{opacity:0}
.bx-pill{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 13px 6px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--velvet);white-space:nowrap;pointer-events:none}
.bx-pill{left:16px;top:16px;color:var(--velvet)}
.bx-co{position:absolute;inset:0;pointer-events:none}
.bx-co .co-line{position:absolute;z-index:1;width:1px;margin-left:-.5px;background:linear-gradient(180deg,#b8892d,#e9cf86 50%,#b8892d);transform:scaleY(0);transition:transform .7s var(--ease)}
.bx-co .co-line.on{transform:scaleY(1)}
.bx-co .co-dot{position:absolute;z-index:2;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:2px solid var(--gold-solid);box-shadow:0 0 0 5px rgba(255,255,255,.35);transform:scale(0);transition:transform .45s var(--ease)}
.bx-co .co-dot.on{transform:scale(1)}
.bx-co .co-lab{position:absolute;z-index:2;transform:translate(-50%,-50%) translateY(6px);display:flex;align-items:center;gap:8px;width:max-content;max-width:42%;padding:8px 12px 6px;background:rgba(255,255,255,.9);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.25;text-align:center;box-shadow:0 12px 24px -16px rgba(4,50,58,.5);opacity:0;transition:opacity .35s ease,transform .55s var(--ease)}
.bx-co .co-lab b{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:0;color:#a27a2a}
.bx-co .co-lab.on{opacity:1;transform:translate(-50%,-50%)}
.bx-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.4vw,52px);margin-top:clamp(28px,3vw,44px);align-items:start;transition:opacity .22s ease,transform .32s var(--ease)}
.bx-info.is-out{opacity:0;transform:translateY(8px)}
.bx-kind{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--velvet)}
.bx-name{font-family:var(--display);font-size:clamp(34px,3.2vw,48px);line-height:1.02;margin-top:12px;letter-spacing:-.01em}
.bx-fa{display:block;margin-top:8px;font-family:var(--fa);font-size:20px;line-height:1.4;color:var(--velvet);text-align:left}
.bx-note{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.bx-taste{margin:0;border-top:1px solid var(--line)}
.bx-taste div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:baseline;padding:13px 0 11px;border-bottom:1px solid var(--line)}
.bx-taste dt{font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-solid)}
.bx-taste dd{margin:0;font-size:16px;line-height:1.5}
.bx-taste .nose dd{font-family:var(--display);font-style:italic;font-size:clamp(20px,1.6vw,24px);line-height:1.25}
.bx-buy{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:24px}
.bx-buy .price{font-size:30px}
@media (max-width:980px){
  .bx-top{grid-template-columns:minmax(0,1fr)}
  .bx-macro{aspect-ratio:4/3;min-height:0}
  .bx-info{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .bx-tins{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .bx-tin{flex:0 0 84px}
  .bx-tin img{height:54px}
  .bx-photo,.bx-macro{border-radius:18px}
  .bx-arrow{width:40px;height:40px;margin-top:-20px}
  .bx-prev{left:10px}
  .bx-next{right:10px}
  .bx-pill{left:12px;top:12px;padding:7px 11px 5px;font-size:10px}
  .bx-co .co-lab{font-size:9.5px;padding:6px 8px 4px;letter-spacing:.08em;max-width:46%}
  .bx-co .co-lab b{font-size:11px}
  .bx-name{font-size:38px}
  .bx-taste div{grid-template-columns:92px minmax(0,1fr);gap:12px}
}

.qv-taste{margin-top:4px}
.qv-taste .nose dd{font-size:20px}

/* ---------- BEYOND THE TIN: concept 3's "shop the house", in daylight ---------- */
.house{background:var(--mint-2)}
.cats{display:flex;gap:12px;height:clamp(460px,42vw,580px)}
.cat{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:26px;background:var(--photo-cyan);transition:flex-grow .8s var(--ease)}
.cat.is-open{flex-grow:4}
.cat__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.4s var(--ease)}
.cat.is-open .cat__img{transform:none}
.cat--gifts{background:url(../pattern/butterfly-floral.webp) center/420px auto,#bfe7ef}
.cat--gifts .cat__img{object-fit:contain;padding:10% 16% 36%;filter:drop-shadow(0 22px 22px rgba(6,60,74,.3))}
.cat::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,42,40,.18) 0%,rgba(6,42,40,0) 26%,rgba(6,42,40,0) 44%,rgba(6,42,40,.62) 74%,rgba(6,42,40,.9) 100%)}
.cat::before{content:"";position:absolute;inset:8px;z-index:4;pointer-events:none;border:1px solid rgba(255,255,255,.5);border-radius:19px;transition:border-color .5s}
.cat.is-open::before{border-color:rgba(243,217,139,.85)}
.cat__hit{position:absolute;inset:0;z-index:2;width:100%;color:#fff;text-align:left}
.cat__num{position:absolute;top:20px;left:22px;font-family:var(--display);font-style:italic;font-size:22px;line-height:1}
.cat__label{position:absolute;left:50%;bottom:30px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font-family:var(--display);font-size:30px;line-height:1;transition:opacity .45s}
.cat.is-open .cat__label{opacity:0}
.cat__body{position:absolute;left:0;bottom:0;z-index:3;width:min(500px,100%);padding:clamp(24px,2.6vw,36px);color:#fff;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .4s,transform .6s var(--ease)}
.cat.is-open .cat__body{opacity:1;transform:none;pointer-events:auto;transition-delay:.2s}
.cat__meta{font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#f3d98b}
.cat__title{margin:10px 0;font-family:var(--display);font-size:clamp(34px,3.2vw,46px);line-height:1}
.cat__text{max-width:38ch;margin-bottom:22px;color:rgba(255,255,255,.9)}
.cat__body .btn{background:#fff;color:var(--ink)}
.cat__body .btn:hover{background:var(--mint)}

/* ---------- FIND YOUR BLEND (from concept 4) ---------- */
.finder{background:var(--teal);position:relative;overflow:hidden}
.finder::before{content:"";position:absolute;inset:0;background:url(../pattern/floral-border.webp) 0 100%/600px auto repeat-x;opacity:.26;pointer-events:none}
.finder-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:start}
.finder .eyebrow{color:var(--velvet);display:block;margin-bottom:16px}
.finder .lede{color:var(--ink)}
.q{margin-top:30px;border:0;padding:0}
.q legend{font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{min-height:44px;padding:12px 18px 9px;background:rgba(255,255,255,.55);border:1px solid rgba(20,23,22,.25);font-size:15px;transition:background .2s,border-color .2s,color .2s}
.opt:hover{background:#fff}
.opt[aria-pressed="true"]{background:var(--velvet);border-color:var(--gold-solid);color:#fff;box-shadow:inset 0 0 0 1px rgba(243,217,139,.5)}
.ask{display:flex;margin-top:30px;background:#fff;border:1px solid var(--ink)}
.ask input{flex:1;min-width:0;border:0;padding:15px 16px 13px;font-size:16px;background:transparent}
.ask input:focus{outline:none}
.ask:focus-within{outline:2px solid var(--velvet);outline-offset:2px}
.ask button{padding-inline:20px;background:var(--velvet);color:#fff;box-shadow:inset 0 0 0 1px rgba(243,217,139,.55);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;min-height:50px}
.toggle{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-weight:600;font-size:14px;letter-spacing:.06em;min-height:44px}
.toggle .sw{width:46px;height:26px;border-radius:13px;background:rgba(20,23,22,.25);position:relative;transition:background .25s}
.toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .3s var(--ease)}
.toggle[aria-pressed="true"] .sw{background:var(--velvet)}
.toggle[aria-pressed="true"] .sw::after{transform:translateX(20px)}
.result{background:var(--paper);padding:clamp(22px,3vw,40px);position:relative;box-shadow:0 30px 60px -30px rgba(8,50,48,.45)}
.result::before{content:"";position:absolute;inset:10px;border:1px solid transparent;border-image:var(--gold) 1;pointer-events:none}
.result-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center}
.radar{width:100%;max-width:290px;height:auto;overflow:visible;justify-self:center}
.radar text{font-family:var(--deco);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-2)}
.match-ph{position:relative;aspect-ratio:1;border-radius:0;overflow:hidden;background:var(--sweep)}
.match-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%;transition:opacity .35s ease,transform .7s var(--ease)}
.match-ph img.swap{opacity:0;transform:scale(1.04)}
.pct{position:absolute;left:10px;top:10px;padding:8px 12px 5px;background:rgba(255,255,255,.88);font-family:var(--display);font-size:30px;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.pct small{font-family:var(--deco);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-left:4px;color:var(--ink-2)}
.result h3{font-family:var(--display);font-size:clamp(28px,2.6vw,38px);line-height:1.05;margin-top:20px}
.result .kind{display:block;font-size:12.5px;margin-top:6px}
.why{margin-top:14px;min-height:5.2em;font-size:16px;line-height:1.6;color:var(--ink)}
.why .w{opacity:0;animation:wordIn .3s ease forwards}
@keyframes wordIn{to{opacity:1}}
.thinking{display:inline-flex;gap:5px;align-items:center;height:1.6em}
.thinking i{width:6px;height:6px;border-radius:50%;background:var(--velvet);animation:dot 1s infinite ease-in-out}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-5px);opacity:.4}}
.result .buy{margin-top:18px;justify-content:flex-start;gap:24px}
.alts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);align-items:center}
.alts span{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-right:4px}
.alts button{min-height:40px;padding:9px 12px 7px;border:1px solid var(--line);font-size:14px}
.alts button:hover{border-color:var(--ink)}

.result .buy,.mini .buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:8px}
.result .kind{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.price small{font-family:var(--deco);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-right:4px}

/* ---------- SAFFRON (from concept 4) ---------- */
.saffron{position:relative;overflow:hidden}
.saf-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.crocus-wrap{position:relative;aspect-ratio:1/1.05;max-width:540px;width:100%;margin-inline:auto}
.crocus-wrap::before{content:"";position:absolute;inset:4% 6% 12%;border-radius:50%;background:radial-gradient(closest-side,var(--mint-2),rgba(238,248,247,0))}
.crocus{position:relative;width:100%;height:100%;overflow:visible}
.saf-copy .eyebrow{color:var(--saffron);display:block;margin-bottom:16px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px;border-block:1px solid var(--line)}
.stat{padding:20px 14px 16px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(30px,3vw,44px);line-height:1;color:var(--saffron);font-variant-numeric:lining-nums tabular-nums}
.stat span{display:block;margin-top:8px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:34px}
.mini{position:relative;display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;align-items:center;padding:12px;background:var(--paper);border:1px solid var(--line)}
.mini .thumb{position:relative;width:108px;height:124px;border-radius:12px;overflow:hidden;background:var(--sweep)}
.mini .thumb img{position:absolute;left:50%;bottom:10%;height:78%;width:auto;max-width:84%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 10px 10px rgba(4,62,72,.28))}
.mini h3{font-weight:700;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.mini h3 button{text-align:left;text-transform:inherit;letter-spacing:inherit}
.mini h3 button::after{content:"";position:absolute;inset:0;z-index:1}
.mini p{font-size:13.5px;color:var(--ink-2);line-height:1.45;margin-top:3px}
.mini .buy{margin-top:8px;flex-wrap:wrap;gap:8px}
.mini .add span{display:none}
.mini .add{padding:0;width:44px;justify-content:center}
.minis.lg{gap:18px}
.minis.lg .mini{grid-template-columns:168px minmax(0,1fr);gap:22px;padding:14px;align-items:stretch}
.minis.lg .thumb{width:168px;height:auto;min-height:180px}
.minis.lg .mini>div{display:flex;flex-direction:column;justify-content:center}
.minis.lg h3{font-size:16px}
.mini-note{margin-top:8px!important;font-size:14.5px!important;max-width:46ch}
/* saffron + gift product cards on cyan studio stages */
.studio-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(44px,6vw,72px)}
.studio{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:#fff;border:1px solid var(--line);position:relative}
.studio-stage{position:relative;aspect-ratio:1;background:var(--sweep);overflow:hidden;display:grid;place-items:center}
.studio-stage::after{content:"";position:absolute;left:22%;right:22%;bottom:13%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(6,70,88,.32),rgba(6,70,88,0))}
.studio-stage img{position:relative;z-index:1;width:64%;height:72%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(6,60,74,.28));transition:transform .8s var(--ease)}
.studio:hover .studio-stage img{transform:translateY(-6px) scale(1.03)}
.studio-info{display:flex;flex-direction:column;gap:6px;padding:clamp(18px,2vw,28px)}
.studio-info .kind{font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.studio-info h3{font-family:var(--display);font-size:clamp(24px,2vw,30px);line-height:1.05}
.studio-info h3 button{text-align:left}
.studio-info .fa{font-size:14px;color:var(--velvet);align-self:flex-start}
.studio-info p.note{font-size:14.5px;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.studio-info .buy{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.studio-info .buy .add{margin-left:auto}
.studio .tagnew{position:absolute;top:12px;left:12px;z-index:2}

/* ---------- GIFTS ---------- */
.gifts{position:relative;overflow:hidden}
.gifts-bg{position:absolute;inset:0;background:url(../pattern/butterfly-floral.webp) 100% 0/760px auto no-repeat;opacity:.11;pointer-events:none;-webkit-mask:linear-gradient(90deg,transparent 30%,#000 75%);mask:linear-gradient(90deg,transparent 30%,#000 75%)}
.gift-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.deck{position:relative;height:clamp(320px,34vw,470px);perspective:1300px}
.deck-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s var(--ease)}
.gcard{position:absolute;left:50%;top:50%;width:min(74%,440px);aspect-ratio:502/325;margin:calc(min(74%,440px) * -.324) 0 0 calc(min(74%,440px) * -.5);overflow:hidden;cursor:pointer;box-shadow:0 34px 50px -26px rgba(8,50,48,.5);transition:transform .9s var(--ease),filter .5s;border-radius:10px}
.gcard img{width:100%;height:100%;object-fit:cover}
.gcard::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.55),rgba(255,255,255,0) 60%);mix-blend-mode:soft-light;opacity:.9;pointer-events:none}
.gcard[data-pos="0"]{transform:translate3d(6%,-4%,60px) rotate(4deg);z-index:3}
.gcard[data-pos="1"]{transform:translate3d(-14%,2%,0) rotate(-5deg);z-index:2;filter:brightness(.97)}
.gcard[data-pos="2"]{transform:translate3d(-24%,10%,-50px) rotate(-12deg);z-index:1;filter:brightness(.93)}
.deck:hover .gcard[data-pos="1"]{transform:translate3d(-22%,0,0) rotate(-8deg)}
.deck:hover .gcard[data-pos="2"]{transform:translate3d(-34%,12%,-50px) rotate(-16deg)}
.gift-copy .eyebrow{display:block;margin-bottom:16px}
.gift-copy .lede{margin-top:18px}
.gc-pick{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.gc-pick button{min-height:44px;padding:12px 18px 9px;border:1px solid var(--ink);font-weight:600;font-size:14px;letter-spacing:.08em}
.gc-pick button[aria-pressed="true"]{background:var(--velvet);border-color:var(--gold-solid);color:#fff;box-shadow:inset 0 0 0 1px rgba(243,217,139,.5)}
.gc-detail{margin-top:20px;display:grid;gap:6px}
.gc-detail h3{font-family:var(--display);font-size:30px;line-height:1.05}
.gc-detail p{color:var(--ink-2)}
.gc-detail .buy{display:flex;align-items:center;gap:24px;margin-top:12px;flex-wrap:wrap}

/* ---------- VISIT ---------- */
.visit{padding-block:clamp(40px,6vw,80px) clamp(72px,9vw,120px)}
.visit-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);align-items:center}
.visit-photo{position:relative;margin:0;height:clamp(420px,46vw,620px);overflow:hidden;background:var(--mint);border-radius:26px}
.visit-pill{left:16px;top:16px;z-index:2}
.visit-pill .ico{width:15px;height:15px}
.gift-minis{margin-top:clamp(40px,5vw,64px);position:relative}
.visit-photo img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover}
.visit-card{position:relative;z-index:1;margin-left:clamp(-120px,-8vw,-40px);background:#fff;padding:clamp(26px,3.4vw,46px);box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
.visit-card::before{content:"";position:absolute;inset:10px;border:1px solid transparent;border-image:var(--gold) 1;pointer-events:none}
.visit-card .eyebrow{display:block;margin-bottom:12px}
.visit-card h2{font-family:var(--display);font-size:clamp(32px,3.2vw,46px);line-height:1.04}
.visit-card h2 em{font-style:italic}
.open-now{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-weight:600;font-size:14px;letter-spacing:.06em}
.open-now i{width:9px;height:9px;border-radius:50%;background:#2f9e6a;box-shadow:0 0 0 4px rgba(47,158,106,.18)}
.hours{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px;font-variant-numeric:tabular-nums}
.hours td{padding:8px 0 6px;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right}
.hours tr.today td{font-weight:700}
.hours tr.today td:first-child::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;transform:rotate(45deg) translateY(-2px);background:var(--gold-solid)}
.addr{margin-top:14px;font-size:15px;color:var(--ink-2);line-height:1.55}
.perks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.perks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45}
.perks .ico{width:20px;height:20px;color:var(--velvet);margin-top:1px}
.perks b{font-weight:700}
.visit-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:22px}

/* ---------- FOOTER ---------- */
.foot{background:var(--mint)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);padding-block:clamp(48px,6vw,72px) 36px;align-items:start}
.foot h4{margin:0 0 14px;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.foot-col{border-left:2px solid var(--ink);padding-left:18px;font-size:15px;line-height:1.7}
.foot-col a{text-decoration:none}
.foot-mid{display:grid;justify-items:center;gap:12px;text-align:center}
.foot-mid img{width:84px}
.foot-mid p{font-weight:700;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--velvet)}
.socials{display:flex;gap:6px}
.socials a{display:grid;place-items:center;width:44px;height:44px}
.foot-nav{border-top:3px solid;border-image:var(--gold) 1;padding-block:20px}
.foot-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0}
.foot-nav li a{display:block;padding:8px 18px 6px;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-left:1.5px solid var(--gold-solid)}
.foot-nav li:first-child a{border-left:0}
.foot-base{background:var(--teal);text-align:center;font-size:13px;font-weight:600;padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom,0px))}

/* ---------- LAYERS (concept 1) ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(10,30,29,.42);opacity:0;transition:opacity .35s ease;pointer-events:none}
.scrim.on{opacity:1;pointer-events:auto}
.layer{position:fixed;z-index:90;background:var(--paper);visibility:hidden;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s linear .42s}
.layer.on{visibility:visible;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.close{display:grid;place-items:center;width:44px;height:44px}
.drawer{top:0;right:0;bottom:0;width:min(460px,100%);transform:translateX(100%);display:flex;flex-direction:column}
.drawer.on{transform:none}
.menu{top:0;left:0;bottom:0;width:min(860px,100%);transform:translateX(-100%);display:flex;flex-direction:column;overflow:auto;contain:layout paint}
.menu.on{transform:none}
/* menu: the shop and the restaurant, side by side, few words */
.mn{flex:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.mn-col{display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3vw,36px)}
.mn-rest{background:var(--mint-2);border-left:1px solid var(--line)}
.mn-k{font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--velvet)}
.mn-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mn-tile{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);transition:border-color .25s,transform .3s var(--ease),box-shadow .3s}
.mn-tile:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 16px 30px -22px rgba(8,50,48,.5)}
.mn-img{position:relative;display:block;aspect-ratio:16/11;background:var(--sweep);overflow:hidden}
.mn-img img{position:absolute;inset:0;margin:auto;width:80%;height:72%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(6,60,74,.25))}
.mn-card .mn-img img{width:78%;height:76%}
.mn-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 14px 10px;font-family:var(--display);font-size:24px;line-height:1.1}
.mn-t small{font-family:var(--deco);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.mn-find{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:14px 18px 12px;background:var(--velvet);color:#fff;text-decoration:none;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;transition:background .25s}
.mn-find:hover{background:var(--ink)}
.mn-photo{aspect-ratio:16/10;overflow:hidden;background:var(--mint)}
.mn-photo img{width:100%;height:100%;object-fit:cover}
.mn-links{list-style:none;margin:0;padding:0}
.mn-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px 10px;border-bottom:1px solid var(--line);font-family:var(--display);font-size:24px;line-height:1.15;text-decoration:none;transition:color .2s,padding .3s var(--ease)}
.mn-links a::after{content:"";flex:none;width:7px;height:7px;margin-right:4px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.45}
.mn-links a:hover{color:var(--velvet);padding-left:6px}
.mn-book{align-self:stretch;margin-top:4px}
.mn-hours{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.mn-hours i{flex:none;width:8px;height:8px;border-radius:50%;background:#3aa76d}
.menu.on .mn-tile,.menu.on .mn-find,.menu.on .mn-links li{animation:mnIn .5s var(--ease) backwards;animation-delay:calc(var(--i,0) * 40ms + 100ms)}
@keyframes mnIn{from{opacity:0;transform:translateY(12px)}}
.layer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:2px solid var(--ink)}
.layer-head h2{font-weight:700;font-size:14px;letter-spacing:.2em;text-transform:uppercase}
.search{top:0;left:0;right:0;transform:translateY(-100%);max-height:88vh;display:flex;flex-direction:column}
.search.on{transform:none}
.search-bar{display:flex;align-items:center;gap:14px;max-width:960px;width:100%;margin:0 auto;padding:24px var(--gutter);border-bottom:2px solid var(--ink)}
.search-bar input{flex:1;min-width:0;border:0;font-family:var(--display);font-size:clamp(26px,3.4vw,40px);padding:6px 0;background:transparent}
.search-bar input:focus{outline:none}
.search-bar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.results{list-style:none;margin:0 auto;padding:10px var(--gutter) 28px;max-width:960px;width:100%;overflow:auto}
.results button{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
.results button:hover,.results button:focus-visible{background:var(--mint-2)}
.thumb{display:block;width:64px;height:64px;overflow:hidden;background:var(--sweep)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb img.ill{object-fit:contain;padding:7px}
.results b{display:block;font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.results small{display:block;color:var(--ink-2);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.results .price{font-size:19px}
.results .none{padding:24px 8px;color:var(--ink-2)}
.modal{left:50%;top:50%;width:min(1100px,calc(100% - 32px));max-height:calc(100% - 48px);transform:translate(-50%,-46%) scale(.98);opacity:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.modal.on{transform:translate(-50%,-50%);opacity:1}
.modal .close{position:absolute;top:10px;right:10px;z-index:3;background:var(--paper)}
.modal{align-items:start}
.qv-media{position:sticky;top:0;background:var(--sweep);height:min(760px,calc(100vh - 48px));min-height:520px;overflow:hidden}
.qv-media .main{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.qv-media .main.ill{object-fit:contain;padding:12%;filter:drop-shadow(0 24px 26px rgba(6,60,74,.3))}
.qv-media .main.gc{object-fit:contain;padding:14%;transform:rotate(-5deg)}
.qv-thumbs{position:absolute;left:16px;bottom:16px;display:flex;gap:8px;z-index:2}
.qv-thumbs button{width:62px;height:62px;background:#fff;border:2px solid #fff;padding:0;overflow:hidden;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
.qv-thumbs button[aria-pressed="true"]{border-color:var(--ink)}
.qv-thumbs img{width:100%;height:100%;object-fit:cover}
.qv-info{padding:clamp(26px,3.4vw,46px);display:grid;gap:13px;align-content:start}
.qv-info .kind{font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--velvet)}
.qv-info h2{font-family:var(--display);font-size:clamp(34px,3.4vw,50px);line-height:1}
.qv-info .fa{font-size:20px;color:var(--velvet)}
.qv-info .price{font-size:30px}
.qv-info .note{color:var(--ink-2);font-size:16px}
.qv-size{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.qv-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.qty{display:inline-flex;align-items:center;border:1px solid var(--ink)}
.qty button{width:44px;height:48px;display:grid;place-items:center}
.qty output{min-width:30px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.qv-row .btn{flex:1}
details.acc{border-top:1px solid var(--line)}
details.acc:last-of-type{border-bottom:1px solid var(--line)}
details.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:52px;padding-top:4px;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";font-family:var(--display);font-size:24px;font-weight:400;transition:transform .3s}
details.acc[open] summary::after{transform:rotate(45deg)}
details.acc .acc-body{padding:0 0 18px;font-size:15px;color:var(--ink-2)}
.brew{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.brew div{border:1px solid var(--line);padding:12px 8px 9px;text-align:center;display:grid;justify-items:center;gap:4px}
.brew .ico{width:22px;height:22px;color:var(--velvet)}
.brew b{font-family:var(--display);font-size:22px;color:var(--ink);font-weight:500;line-height:1;font-variant-numeric:lining-nums}
.brew span{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.bars{display:grid;gap:10px}
.bar{display:grid;grid-template-columns:86px minmax(0,1fr) 26px;gap:12px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.bar .track{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.bar .track i{height:7px;background:var(--line)}
.bar .track i.on{background:var(--velvet)}
.bar output{font-family:var(--display);font-size:15px;letter-spacing:0;text-align:right;color:var(--ink)}
.cart-body{flex:1;overflow:auto;padding:6px 24px}
.ship{padding:16px 24px 18px;background:var(--mint-2);border-bottom:1px solid var(--line)}
.ship p{font-size:14.5px}
.ship-track{position:relative;height:4px;background:#fff;margin-top:14px}
.ship-fill{position:absolute;inset:0 auto 0 0;width:var(--pct,0%);background:var(--gold);transition:width .7s var(--ease)}
.ship-fill svg{position:absolute;right:-11px;top:-10px;width:22px;height:22px;fill:var(--velvet)}
.line{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}
.line .lthumb{width:78px;height:90px;background:var(--mint-2);display:grid;place-items:center}
.line .lthumb img{max-width:84%;max-height:84%;object-fit:contain}
.line h3{font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.line small{display:block;color:var(--ink-2);font-size:13px}
.line .qty{margin-top:8px}
.line .qty button{width:36px;height:36px}
.line .right{display:grid;justify-items:end;gap:8px;align-self:start}
.line .price{font-size:19px}
.rm{font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;color:var(--ink-2);min-height:32px}
.empty{padding:48px 4px;text-align:center;display:grid;gap:14px;justify-items:center;color:var(--ink-2)}
.empty img{width:120px;opacity:.9}
.cart-foot{border-top:2px solid var(--ink);padding:18px 24px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:12px}
.gift-note summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.gift-note summary::-webkit-details-marker{display:none}
.gift-note summary::after{content:"+";font-family:var(--display);font-size:22px;font-weight:400;transition:transform .3s}
.gift-note[open] summary::after{transform:rotate(45deg)}
.cart-foot textarea{width:100%;min-height:62px;resize:vertical;border:1px solid var(--line);padding:10px 12px;font-size:15px;margin-top:4px}
.sum{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:15px;font-variant-numeric:tabular-nums}
.sum .total{font-family:var(--display);font-size:24px}
.cart-foot .btn::after{display:none}
.layer.checkout{left:50%;top:50%;width:min(720px,calc(100% - 32px));max-height:calc(100% - 48px);overflow:auto;transform:translate(-50%,-46%);opacity:0}
.layer.checkout.on{transform:translate(-50%,-50%);opacity:1}
.co-in{padding:clamp(24px,3.6vw,44px);display:grid;gap:18px}
.co-in h2{font-family:var(--display);font-size:clamp(30px,3vw,40px);line-height:1.05}
.demo-tag{justify-self:start;padding:6px 10px 4px;background:var(--mint);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.express{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.express button{min-height:52px;background:var(--ink);color:#fff;font-weight:600;letter-spacing:.06em}
.or{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fields label{display:grid;gap:6px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.fields label.full{grid-column:1/-1}
.fields input{border:1px solid #b9cbca;padding:13px 12px 11px;font-size:16px;text-transform:none;letter-spacing:0;font-weight:400}
.fields input:focus{outline:2px solid var(--velvet);outline-offset:0;border-color:transparent}
.co-sum{background:var(--mint-2);padding:16px 18px;display:grid;gap:6px;font-size:15px}
.co-done{display:grid;justify-items:center;text-align:center;gap:14px;padding-block:18px}
.co-logo{width:130px;height:auto}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:95;transform:translate(-50%,40px);opacity:0;visibility:hidden;transition:transform .5s var(--ease),opacity .3s ease,visibility 0s linear .5s;display:flex;align-items:center;gap:16px;padding:12px 12px 12px 18px;background:var(--ink);color:#fff;font-size:15px;max-width:calc(100% - 32px)}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .5s var(--ease),opacity .3s ease}
@media (min-width:761px){.toast{left:auto;right:clamp(16px,3vw,40px);bottom:auto;top:calc(var(--hh) + 50px);transform:translateY(-14px)}.toast.on{transform:none}}
.toast button{min-height:40px;padding:9px 12px 7px;border:1px solid rgba(255,255,255,.5);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.flyer{position:fixed;z-index:120;pointer-events:none;object-fit:contain}

/* hero entrance: compositor-only transitions that start as the veil lifts */
html.is-arming{overflow:hidden}
.rise{transition:opacity .8s ease var(--d,0ms),transform 1.15s var(--ease) var(--d,0ms)}
.fade{transition:opacity 1.1s ease var(--d,0ms)}
html.is-loading .rise{opacity:0;transform:translateY(var(--ry,28px))}
html.is-loading .fade{opacity:0}
.ri{display:inline-block}
/* hero tin swap + live hints */
.hero.swap .lid img,.hero.swap .tbody img,.hero.swap .reflect img,.hero.swap .lens img,.hero.swap .loupe figcaption span,.hero.swap .hc-name,.hero.swap .neck img{opacity:0!important}
.hero .hc-name{transition:opacity .28s ease}
.hero.is-live .lid,.hero.is-live .loupe,.hero.is-live .h-cta{will-change:transform,opacity}

/* section heads: split-line reveal mask */
.js-anim .split-line{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav{display:none}
}
@media (max-width:980px){
  .saf-grid,.gift-grid,.visit-grid{grid-template-columns:minmax(0,1fr)}
  .studio-row{grid-template-columns:minmax(0,1fr)}
  .visit-card{margin:-80px 16px 0}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-mid{order:-1}
  .modal{grid-template-columns:minmax(0,1fr)}
  .qv-media{position:relative;height:420px;min-height:0}
  .announce li:not(.active){display:none}
}
@media (max-width:899px){
  .hero{--tw:clamp(118px,36vw,200px);--ls:calc(var(--tw) * .56);--tin-b:112px}
  .loupe:nth-child(1){--lx:-.98;--ly:-.98}
  .loupe:nth-child(2){--lx:-1;--ly:.1}
  .loupe:nth-child(3){--lx:1;--ly:-1.06}
  .loupe:nth-child(4){--lx:1;--ly:.06}
  .loupe figcaption{top:calc(100% + 8px);max-width:calc(var(--ls) * 1.35)}
  .loupe figcaption b{font-size:12px}
  .loupe figcaption span{font-size:9.5px;letter-spacing:.12em}
  .h-top{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 16px}
  .h-dots{flex-wrap:wrap;gap:2px}
  .h-dots .lbl{display:none}
  .dot{width:38px;height:38px}
  .dot img{height:28px}
  .dot::after{display:none}
  .h-title{font-size:calc(var(--tw) * .54)}
  .h-title .l1{right:auto;left:16px;bottom:calc(var(--tin-b) + var(--th) + var(--tw) * .62)}
  .h-title .l2{left:auto;right:16px;bottom:calc(var(--tin-b) + var(--th) + var(--tw) * .14)}
  .h-sub{display:none}
  .h-cta{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 14px;width:auto;left:10px;right:10px;bottom:10px;padding:12px 12px 12px 16px}
  .h-cta::before{inset:5px}
  .h-cta .link-arrow,.h-cta .hs{display:none}
  .hc-name strong{font-size:21px;white-space:normal}
  .hc-name small{font-size:9.5px;letter-spacing:.14em}
  .hc-name .fa{font-size:12.5px}
  .h-cta .btn{min-height:46px;padding:0 18px;font-size:12px;letter-spacing:.16em}
  .h-cta .price{font-size:24px}
}
@media (max-width:640px){
  body{font-size:16px}
  .burger .label,.hdr-right .reserve{display:none}
  .hdr-left,.hdr-right{gap:4px}
  .stats3 dd{font-size:26px}
  .brew{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fields,.express{grid-template-columns:minmax(0,1fr)}
  .foot-nav li a{padding:8px 12px 6px}
  .deck{height:270px}
  .studio{grid-template-columns:minmax(0,1fr)}
  .studio-stage{aspect-ratio:16/10}
  .studio-stage img{height:80%}
  .studio-info p.note{-webkit-line-clamp:2}
  .studio-info .buy .add span{display:none}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat span{font-size:10px;letter-spacing:.08em}
  .stat b{font-size:22px}
  .stat{padding-inline:8px}
  .t-num{font-size:84px}
}
@media (max-width:760px){
  /* phones: the laptop's stage, sized for a phone. Full width between the header and the tab bar; scroll to open;
     concept 4's chip pill at the bottom with the buy bar above it. */
  /* the stage runs under the tab bar, so the pill and buy bar sit above it whether or not the delivery banner is still in view */
  .hero{padding:0;--tab:calc(62px + env(safe-area-inset-bottom,0px));--tw:min(40vw,150px);--ls:calc(var(--tw) * .44);--tin-b:calc(var(--tab) + 184px)}
  .hero .stage{height:calc(100svh - var(--hh) - 34px);min-height:540px}
  .h-top{inset:0;display:block;padding:0;pointer-events:none;z-index:6}
  .h-eyebrow{position:absolute;left:16px;right:16px;top:16px;font-size:10.5px;letter-spacing:.2em}
  .h-dots{position:absolute;left:12px;right:12px;bottom:calc(var(--tab) + 12px);pointer-events:auto;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:4px;padding:5px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .h-dots::-webkit-scrollbar{display:none}
  .dot{width:44px;height:44px;scroll-snap-align:center}
  .dot img{height:33px}
  .dot::after{display:none}
  /* the laptop's split headline doesn't fit beside a phone-sized tin, so it sits on one line just above it, and still parts and fades */
  .h-title{display:flex;justify-content:center;align-items:flex-end;gap:.24em;padding-bottom:calc(var(--tin-b) + var(--th) + 14px);font-size:clamp(40px,12.5vw,54px)}
  .h-title .l,.h-title .l1,.h-title .l2{position:static;display:inline-block}
  .h-cta{bottom:calc(var(--tab) + 76px)}
  .h-cue{bottom:calc(var(--tab) + 86px)}
  .reflect{opacity:.12}
  .loupe:nth-child(1){--lx:-.86;--ly:-.9}
  .loupe:nth-child(2){--lx:-.86;--ly:-.05}
  .loupe:nth-child(3){--lx:.86;--ly:-.9}
  .loupe:nth-child(4){--lx:.86;--ly:-.05}
  html:not(.js-anim) .h-title{padding:0;margin-bottom:12px}
  html:not(.js-anim) .h-comp{height:560px}
  html:not(.js-anim) .lid{transform:translateY(calc(var(--tw) * -.6)) rotate(-6deg)}
}
@media (max-width:380px){.hc-name strong{font-size:18px}.h-cta .price{font-size:21px}.h-cta{gap:4px 10px}}
/* ---------- round 4: blends, finder, beyond the tin, saffron, menu ---------- */
@media (max-width:980px){
  .finder-grid,.saf-grid{grid-template-columns:minmax(0,1fr)}
  .crocus-wrap{max-width:380px}
}
@media (max-width:899px){
}
@media (max-width:760px){
  .minis{grid-template-columns:minmax(0,1fr)}
  .result-top{gap:12px}
  .radar{max-width:100%}
  .cats{flex-direction:column;height:auto;gap:10px}
  .minis.lg .mini{grid-template-columns:112px minmax(0,1fr);gap:14px;padding:12px}
  .minis.lg .thumb{width:112px;min-height:150px}
  .mini-note{display:none}
  .cat{flex:none;height:92px;border-radius:18px;transition:height .7s var(--ease)}
  .cat::before{border-radius:12px}
  .visit-photo{border-radius:18px}
  .cat.is-open{height:420px}
  .cat__label{left:64px;bottom:auto;top:50%;transform:translateY(-50%);writing-mode:horizontal-tb;font-size:26px}
  .cat__num{top:50%;transform:translateY(-50%)}
  .cat.is-open .cat__num{top:20px;transform:none}
  .cat__body{padding:22px}
  .cat::after{background:linear-gradient(180deg,rgba(6,42,40,.35),rgba(6,42,40,.45) 30%,rgba(6,42,40,.9) 72%)}
  .menu{width:100%}
  .mn{grid-template-columns:minmax(0,1fr)}
  .mn-rest{border-left:0;border-top:1px solid var(--line)}
  .mn-photo{display:none}
  .mn-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .mn-links a{font-size:20px}
  .mn-t{font-size:21px}
}

/* ---------- mobile app layer (concept 1) ---------- */
@media (max-width:760px){
  :root{--hh:62px}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .announce{font-size:11px;letter-spacing:.14em}
  .announce ul{padding-block:9px 7px}
  .hdr-in{height:58px}
  .logo{width:72px;height:58px}
  .logo img,.hdr.compact .logo img{width:60px;filter:none}
  #cartBtn{display:none}
  .stage{height:calc(100svh - var(--hh) - var(--inset) - 62px - env(safe-area-inset-bottom,0px));min-height:560px}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -14px 30px -22px rgba(8,50,48,.45);transition:transform .5s var(--ease) .1s}
  html.is-loading .tabbar{transform:translateY(110%)}
  .tab{position:relative;display:grid;justify-items:center;align-content:center;gap:5px;height:62px;text-decoration:none;color:var(--ink-2);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
  .tab .ico{width:23px;height:23px;stroke-width:1.4}
  .tab[aria-current="true"]{color:var(--velvet)}
  .tab[aria-current="true"]::before{content:"";position:absolute;top:-1px;left:50%;width:28px;height:2px;transform:translateX(-50%);background:var(--gold)}
  .tab-count{position:absolute;top:7px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--teal);color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:0;display:grid;place-items:center;border:1.5px solid #fff;transition:transform .3s var(--ease)}
  .grip{display:block;position:sticky;top:0;z-index:5;height:26px;margin-bottom:-26px;pointer-events:none}
  .grip i{display:block;width:44px;height:5px;border-radius:3px;margin:9px auto 0;background:rgba(20,23,22,.28)}
  .modal,.layer.checkout{left:0;right:0;top:auto;bottom:0;width:100%;max-height:calc(100dvh - 20px);transform:translateY(100%);opacity:1;border-radius:20px 20px 0 0;overscroll-behavior:contain;box-shadow:0 -20px 50px -20px rgba(0,0,0,.35)}
  .modal.on,.layer.checkout.on{transform:none}
  .modal{display:block}
  .modal .close,.layer.checkout>.close{top:14px!important;right:14px!important;border-radius:50%;width:40px;height:40px;background:#fff;box-shadow:0 4px 14px -6px rgba(0,0,0,.35)}
  .qv-media{position:relative;min-height:0;height:min(340px,42dvh)}
  .qv-info{display:flex;flex-direction:column;gap:12px;padding:20px 20px 0}
  .qv-info .qv-row{order:99;position:sticky;bottom:0;z-index:4;margin:6px -20px 0;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);box-shadow:0 -14px 24px -20px rgba(8,50,48,.5);flex-wrap:nowrap}
  .qv-bar-price{display:block;font-family:var(--display);font-size:22px;min-width:46px}
  .qv-row .qty button{width:36px;height:46px}
  .qv-row .btn{padding-inline:14px;letter-spacing:.12em;font-size:12.5px;min-height:48px}
  .drawer{top:auto;left:0;right:0;width:100%;height:calc(100dvh - 20px);transform:translateY(100%);border-radius:20px 20px 0 0;overflow:hidden;box-shadow:0 -20px 50px -20px rgba(0,0,0,.35)}
  .drawer.on{transform:none}
  .drawer .grip{position:absolute;left:0;right:0;margin:0}
  .drawer .layer-head{padding-top:28px}
  .layer.checkout .co-in{padding-top:34px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px));width:calc(100% - 24px);justify-content:space-between}
  .visit-photo{height:300px}
}
@media (hover:none){
  .btn,.add,.tab,.icon-btn,.gc-pick button,.dot,.sq{transition:transform .16s ease,background .3s,color .3s}
  .btn:active,.add:active,.tab:active,.icon-btn:active,.gc-pick button:active,.sq:active{transform:scale(.96)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- find your blend on phones: one question at a time (laptops unchanged) ---------- */
.fz-bar,.fz-go,.fz-describe,.fz-res,.fz-sub{display:none}
@media (max-width:760px){
  .finder-grid{gap:0}
  .finder .fz-bar{display:flex;align-items:center;gap:14px;margin:22px 0 2px}
  .fz-back{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.65);border:1px solid rgba(20,23,22,.16)}
  .fz-back .ico{width:18px;height:18px;transform:scaleX(-1)}
  .finder[data-at="1"] .fz-back{visibility:hidden}
  .fz-count{font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--velvet)}
  .fz-prog{display:flex;gap:6px;margin-left:auto}
  .fz-prog i{width:20px;height:3px;border-radius:2px;background:rgba(14,79,75,.22);transition:background .3s}
  .fz-prog i.on{background:var(--velvet)}
  .finder .q,.finder #cf,.finder .ask,.finder .result{display:none}
  .finder[data-at="1"] .q[data-step="1"],.finder[data-at="2"] .q[data-step="2"],.finder[data-at="3"] .q[data-step="3"]{display:block}
  .finder[data-at="3"] #cf{display:inline-flex;margin-top:18px}
  .finder[data-at="3"] .fz-go{display:flex;width:100%;margin-top:16px}
  .finder[data-at="1"] .fz-describe{display:inline-block;margin-top:20px;font-weight:600;font-size:13.5px;letter-spacing:.04em;text-decoration:underline;text-underline-offset:5px;color:var(--velvet)}
  .finder[data-at="1"] .ask.is-open{display:flex;margin-top:12px}
  .finder[data-at="4"] .result{display:block;margin-top:16px}
  .finder:not([data-at="1"]) .fz-lede{display:none}
  .finder .q{margin-top:16px}
  .finder .q legend{margin-bottom:16px;font-family:var(--display);font-weight:400;font-size:clamp(28px,8vw,34px);line-height:1.08;letter-spacing:-.01em;text-transform:none}
  .finder .q legend span{display:block;margin-top:6px;font-family:var(--deco);font-size:13px!important}
  .finder .opts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .finder .q[data-step="3"] .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finder .opt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:66px;padding:14px 18px 12px;text-align:left;font-size:17px;line-height:1.2;background:rgba(255,255,255,.72);border:1px solid rgba(20,23,22,.14);color:var(--ink)}
  .finder .opt[aria-pressed="true"]{background:var(--velvet);border-color:var(--gold-solid);color:#fff;box-shadow:inset 0 0 0 1px rgba(243,217,139,.5)}
  .finder .q[data-step="3"] .opt{min-height:86px;font-size:16px}
  .fz-sub{display:block;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
  .finder .opt[aria-pressed="true"] .fz-sub{color:rgba(255,255,255,.72)}
  .fz-res{display:flex;justify-content:flex-end;margin:-6px 0 8px}
  .fz-res span{display:none}
  .fz-redo{position:relative;z-index:1;min-height:40px;font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:4px}
  .fz-in{animation:fzIn .42s var(--ease) both}
  .fz-back-in{animation:fzBackIn .42s var(--ease) both}
}
@keyframes fzIn{from{opacity:0;transform:translateX(22px)}}
@keyframes fzBackIn{from{opacity:0;transform:translateX(-22px)}}

/* Shop additions: the shop list, the product page, the real basket and checkout, the gift card form and the order
   page. Written for the shop; concept5.css above is the approved prototype's own and is not edited. Same tokens. */

/* ---------- links made from product names (crawlers can follow them; a click still opens the quick view) ---------- */
.mini h3 a{display:block;text-align:left;text-transform:inherit;letter-spacing:inherit;text-decoration:none;color:inherit}
.mini h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.studio-info h3 a{text-decoration:none;color:inherit}
.studio-info h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.gc-detail .buy{gap:14px 18px;margin-top:14px}
.studio .add,.studio .seg{z-index:2}
.mini .add.is-soldout,.studio .add.is-soldout{width:auto;padding:11px 12px 8px;color:var(--ink-2);border-image:none;border:1px solid var(--line);cursor:not-allowed}
.mini .add.is-soldout span{display:inline}
.add:disabled,.btn:disabled{opacity:.55;cursor:not-allowed}
.seg button[data-soldout]{text-decoration:line-through;opacity:.6}

/* ---------- shop list ---------- */
.ph--plain .shop-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.shop-jump .pill{text-decoration:none;border:1px solid var(--line)}
.shop-jump .pill:hover{background:var(--mint)}
.shop-sec .bx-head{margin-bottom:clamp(24px,3vw,40px)}
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.shop-grid .studio{grid-template-columns:minmax(0,1fr);align-content:start}
.shop-grid .studio-stage{display:block;aspect-ratio:1/1;text-decoration:none}
.shop-grid .studio-stage img{position:absolute;left:50%;bottom:9%;top:auto;width:auto;max-width:72%;height:76%;transform:translateX(-50%)}
.shop-grid .studio:hover .studio-stage img{transform:translateX(-50%) translateY(-6px) scale(1.03)}
.shop-grid .studio-stage.gc img{height:auto;width:78%;max-width:none;bottom:auto;top:50%;transform:translate(-50%,-50%) rotate(-5deg);filter:drop-shadow(0 18px 18px rgba(6,60,74,.3))}
.shop-grid .studio:hover .studio-stage.gc img{transform:translate(-50%,-52%) rotate(-5deg) scale(1.03)}
.shop-grid .studio-stage.ill img{height:64%;max-width:64%}
.shop-grid .studio-info .buy .add{margin-left:auto}
.shop-grid .studio-info p.note{-webkit-line-clamp:3}
@media (max-width:980px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.shop-grid{grid-template-columns:minmax(0,1fr)}.shop-grid .studio{grid-template-columns:132px minmax(0,1fr)}.shop-grid .studio-stage{aspect-ratio:auto;height:100%;min-height:200px}.shop-grid .studio-info .buy{gap:8px}}

/* ---------- product page ---------- */
.pdp-head{padding-block:clamp(22px,3vw,40px) 0}
.pdp-head .ph-text{padding-block:0}
.shop-head .ph-text,.pdp-head .ph-text{max-width:var(--max)}
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3.4vw,56px);align-items:start;padding-block:clamp(20px,2.6vw,36px) clamp(48px,6vw,88px)}
.pdp-media{border-radius:var(--r,26px);height:min(720px,calc(100vh - 140px));min-height:420px;top:calc(var(--hh) + 16px)}
.pdp-media.no-photo{background:var(--mint-2);min-height:280px}
.pdp-info{padding:0;max-width:640px}
.pdp-info h1{font-family:var(--display);font-size:clamp(34px,3.6vw,54px);line-height:1}
.pdp-info .gc-balance{margin-top:10px}
.pdp-info .fa{justify-self:start;text-align:left}
.pdp .qv-media .qv-thumbs{z-index:2}
@media (max-width:900px){.pdp{grid-template-columns:minmax(0,1fr)}.pdp-media{position:relative;height:min(420px,56vh);min-height:300px;top:0}.pdp-info{max-width:none}}
@media (max-width:760px){.pdp .qv-row{bottom:calc(60px + env(safe-area-inset-bottom,0px))!important}.pdp-info.qv-info{padding:4px 0 0}}
.pdp-related .bx-head{align-items:end}

/* ---------- basket drawer ---------- */
.line .each{display:block;color:var(--ink-2);font-size:12px;white-space:nowrap}
.line .dots{color:var(--ink-2)}
.line.has-err{background:#fdf4f2}
.line-err{margin-top:8px;font-size:13.5px;color:#a3261a;line-height:1.4}
.line-err .link-arrow{font-size:12px;padding-block:6px 4px}
.cart-hint:empty{display:none}
.cart-hint p{font-size:14px;color:#a3261a;line-height:1.4}
.cart-foot .btn:disabled{opacity:.5}
#cartBody[aria-busy="true"] .line .price{opacity:.55}
.gift-note textarea{font-family:inherit}
.count,.tab-count{font-variant-numeric:tabular-nums}

/* ---------- checkout ---------- */
.co-in h2{margin-bottom:2px}
.co-sec{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.co-sec legend{padding:0;margin-bottom:10px;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--velvet)}
.co-in form{display:grid;gap:22px}
.fields label small,.co-note small{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--ink-2)}
.fields input,.fields select,.fields textarea,.co-note textarea,.code-row input,.gc-balance input{width:100%;border:1px solid #b9cbca;border-radius:0;padding:13px 12px 11px;font-size:16px;text-transform:none;letter-spacing:0;font-weight:400;background:#fff}
.fields select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23141716' stroke-width='1.5'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
.fields input:focus,.fields select:focus,.fields textarea:focus,.co-note textarea:focus,.code-row input:focus,.gc-balance input:focus{outline:2px solid var(--velvet);outline-offset:0;border-color:transparent}
.fields [aria-invalid="true"],.fields input:user-invalid{border-color:#a3261a}
.fields textarea,.co-note textarea{resize:vertical;min-height:72px}
.co-note{display:grid;gap:6px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.field-err{display:block;min-height:0;font-size:13.5px;line-height:1.4;font-weight:400;letter-spacing:0;text-transform:none;color:#a3261a}
.field-err:empty{display:none}
.field-hint{display:block;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.co-banner{padding:14px 16px;background:#fdf4f2;border:1px solid #e8b9b1;color:#8a1f15;font-size:15px;line-height:1.45;display:grid;gap:6px}
.co-banner .link-arrow{justify-self:start;color:inherit}
.co-options{display:grid;gap:8px}
.choice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px 12px;border:1px solid #b9cbca;cursor:pointer;font-size:15px;line-height:1.35}
.choice:has(input:checked){border-color:var(--velvet);box-shadow:inset 0 0 0 1px var(--velvet);background:var(--mint-2)}
.choice input{width:18px;height:18px;margin:0;accent-color:var(--velvet)}
.choice b{display:block;font-weight:600}
.choice small{display:block;color:var(--ink-2);font-size:13px}
.choice em{font-style:normal;font-family:var(--display);font-size:18px}
.co-codes{display:grid;gap:12px}
.code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.code-row .btn{min-height:46px;padding:12px 18px 10px;font-size:12px}
.code-row .btn::after{display:none}
.code-chip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 10px;background:var(--mint-2);border:1px solid var(--line);font-size:14.5px}
.code-chip .link-arrow{padding-block:4px 2px;font-size:12px}
.co-agree{display:grid;gap:10px}
.check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;font-size:14.5px;line-height:1.5;cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--velvet)}
.check a{text-decoration:underline;text-underline-offset:3px}
.check small{color:var(--ink-2)}
.co-hint{font-size:14px;color:var(--ink-2);line-height:1.45;margin:-6px 0 0}
.co-sum .sum{font-size:16px}
#coSubmit{margin-top:-6px}
#coSubmit:disabled{opacity:.55;cursor:not-allowed}
.btn:disabled::after{opacity:.5}

/* ---------- gift card form ---------- */
.gc-form{display:grid;gap:18px}
.gc-sub{color:var(--ink-2);font-size:15.5px;margin-top:-8px}
.gc-format{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.gc-format legend{padding:0;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.gc-format .choice{grid-template-columns:auto minmax(0,1fr);font-weight:600;letter-spacing:0;text-transform:none}
.gc-form textarea{width:100%;font:inherit}
.gc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.gc-balance{margin-top:18px;font-size:15px}
.gc-balance summary{cursor:pointer;font-weight:600;letter-spacing:.04em}
.gc-balance form{margin-top:10px;display:grid;gap:8px;max-width:440px}
.gc-balance .code-row input{letter-spacing:.08em}
.gc-balance-out{min-height:1.4em;font-size:14.5px;color:var(--velvet)}

/* ---------- order page ---------- */
.order-page{min-height:60vh}
.order-card{max-width:980px}
.order-card .eyebrow{display:block;margin-bottom:12px}
.order-card .h1{margin-bottom:18px}
.order-card .lede{max-width:60ch}
.order-card p{margin-top:12px}
.order-small{font-size:14px;color:var(--ink-2)}
.order-wait{display:inline-flex;gap:5px;margin-right:12px;vertical-align:middle}
.order-wait i{width:8px;height:8px;border-radius:50%;background:var(--gold-solid);animation:ordWait 1.2s ease-in-out infinite}
.order-wait i:nth-child(2){animation-delay:.15s}.order-wait i:nth-child(3){animation-delay:.3s}
@keyframes ordWait{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.order-wait i{animation:none;opacity:.7}}
.order-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,56px);margin-top:26px;align-items:start}
.order-lines{width:100%;border-collapse:collapse;font-size:15.5px;font-variant-numeric:tabular-nums}
.order-lines td{padding:11px 0 9px;border-bottom:1px solid var(--line);vertical-align:top}
.order-lines td:last-child{text-align:right;white-space:nowrap;padding-left:16px}
.order-lines .q{color:var(--ink-2);font-size:14px}
.order-lines .sub td{color:var(--ink-2)}
.order-lines .total td{font-family:var(--display);font-size:22px;border-bottom:2px solid var(--ink)}
.order-side{background:var(--mint-2);padding:20px 22px;display:grid;gap:4px}
.order-side p{margin-top:8px}
.order-note h2{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--velvet);margin-top:14px}
.order-note ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px}
.order-card .btn{margin-top:26px}
@media (max-width:860px){.order-grid{grid-template-columns:minmax(0,1fr)}}

/* WooCommerce's basket, checkout and account pages in the Bazar look, and Elementor's forms on the restaurant pages. */
.bz-prose{max-width:820px}
.bz-prose p{margin-block:0 1em}
.bz-woo .h1{margin:8px 0 clamp(20px,3vw,36px)}
.bz-woo .woocommerce{font-size:16px;color:var(--ink);--wc-primary:var(--velvet,#0f6e6a)}
.bz-woo a{color:inherit}
.bz-woo .woocommerce-breadcrumb{display:none}

.bz-woo table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.bz-woo table.shop_table th,.bz-woo table.shop_table td{padding:14px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:middle;background:#fff}
.bz-woo table.shop_table thead th{border-top:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.bz-woo table.shop_table tfoot th{font-weight:600}
.bz-woo table.shop_table tr.order-total th,.bz-woo table.shop_table tr.order-total td{font-size:18px}
.bz-woo table.cart img{width:64px;height:auto;border-radius:10px}
.bz-woo a.remove{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;text-decoration:none;color:var(--ink);border:1px solid var(--line)}
.bz-woo a.remove:hover{background:var(--mint)}
.bz-woo #shipping_method{list-style:none;margin:0;padding:0}
.bz-woo #shipping_method li{margin:0 0 6px}

.bz-woo input[type=text],.bz-woo input[type=email],.bz-woo input[type=tel],.bz-woo input[type=password],.bz-woo input[type=number],.bz-woo textarea,.bz-woo select,.bz-woo .select2-container .select2-selection--single{width:100%;min-height:46px;padding:10px 14px;font:inherit;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink);box-sizing:border-box}
.bz-woo .select2-container .select2-selection--single .select2-selection__rendered{line-height:24px;padding:0}
.bz-woo .select2-container .select2-selection--single .select2-selection__arrow{top:10px;right:8px}
.bz-woo input:focus,.bz-woo textarea:focus,.bz-woo select:focus{outline:2px solid var(--gold-solid);outline-offset:1px}
.bz-woo input.qty{width:76px}
.bz-woo label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}
.bz-woo label.checkbox,.bz-woo #shipping_method label,.bz-woo .wc_payment_methods label{display:inline;font-weight:400}
.bz-woo .form-row{margin:0 0 14px}
.bz-woo .required{color:var(--ink-2);text-decoration:none}
.bz-woo h2,.bz-woo h3{font-family:var(--serif,"Bodoni Moda",serif);font-weight:500;margin:0 0 14px}

.bz-woo .button,.bz-woo button.button,.bz-woo a.button,.bz-woo input.button,.bz-woo #place_order{display:inline-block;padding:15px 26px 12px;font:600 13px/1.1 "Josefin Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;color:var(--ink);background:#fff;border:1.5px solid transparent;border-image:linear-gradient(90deg,#9a7224,#f3d98b 30%,#b88a2c 55%,#f6e3a1 78%,#8a6420) 1;border-radius:0}
.bz-woo .button:hover,.bz-woo #place_order:hover{background:var(--mint)}
.bz-woo .button:disabled,.bz-woo .button.disabled{opacity:.5;cursor:not-allowed}
.bz-woo #place_order,.bz-woo a.checkout-button{width:100%;margin-top:14px}

.bz-woo .woocommerce-message,.bz-woo .woocommerce-info,.bz-woo .woocommerce-error{list-style:none;margin:0 0 20px;padding:14px 18px;border-radius:14px;background:var(--mint);border:1px solid var(--line);color:var(--ink)}
.bz-woo .woocommerce-error{background:#fbeeee;border-color:#e6c0c0}
.bz-woo .woocommerce-message .button,.bz-woo .woocommerce-info .button{float:right;padding:8px 14px 6px}
.bz-woo .woocommerce-message::before,.bz-woo .woocommerce-info::before,.bz-woo .woocommerce-error::before{display:none}

.bz-woo .cart-collaterals{margin-top:26px;max-width:520px;margin-left:auto}
.bz-woo .shipping-calculator-button{font-size:14px}
.bz-woo #customer_details{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.bz-woo form.checkout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(24px,4vw,56px);align-items:start}
.bz-woo form.checkout>.woocommerce-NoticeGroup{grid-column:1/-1}
.bz-woo form.checkout #customer_details{grid-column:1;grid-row:1/span 3}
.bz-woo form.checkout #order_review_heading{grid-column:2}
.bz-woo form.checkout #order_review{grid-column:2}
.bz-woo #customer_details .col-1,.bz-woo #customer_details .col-2{width:auto;float:none}
.bz-woo #payment{margin-top:18px;padding:18px;background:var(--mint);border-radius:18px}
.bz-woo #payment ul.payment_methods{list-style:none;margin:0 0 12px;padding:0}
.bz-woo #payment .payment_box{margin-top:10px;padding:12px;background:#fff;border-radius:12px;font-size:14px}
.bz-woo .woocommerce-privacy-policy-text{font-size:13px;color:var(--ink-2)}
.bz-woo .woocommerce-order-overview{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:14px 30px}
.bz-woo .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}

@media (max-width:860px){
  .bz-woo form.checkout{grid-template-columns:minmax(0,1fr)}
  .bz-woo form.checkout #customer_details,.bz-woo form.checkout #order_review_heading,.bz-woo form.checkout #order_review{grid-column:1;grid-row:auto}
  .bz-woo table.shop_table_responsive thead{display:none}
  .bz-woo table.shop_table_responsive tr{display:block;padding:8px 0;border-top:1px solid var(--line)}
  .bz-woo table.shop_table_responsive td{display:flex;justify-content:space-between;gap:14px;border:0;padding:6px 14px}
  .bz-woo table.shop_table_responsive td::before{content:attr(data-title);font-weight:600}
  .bz-woo table.shop_table_responsive td.product-remove::before,.bz-woo table.shop_table_responsive td.product-thumbnail::before,.bz-woo table.shop_table_responsive td.actions::before{display:none}
  .bz-woo .cart-collaterals{max-width:none}
}

/* Elementor's form widget, dressed as the design's form */
.bz-form .elementor-form-fields-wrapper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0}
.bz-form .elementor-field-group{display:block;width:auto;max-width:none;padding:0;margin:0}
.bz-form .elementor-field-group.elementor-field-type-textarea,.bz-form .elementor-field-group.elementor-field-type-submit,.bz-form .elementor-field-group.elementor-field-type-tel{grid-column:1/-1}
.bz-form .elementor-field-group.elementor-field-type-recaptcha_v3{grid-column:1/-1;margin:0}
.bz-form .elementor-field-label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--ink)}
.bz-form .elementor-field-textual{display:block;width:100%;min-height:46px;padding:10px 14px;font:inherit;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink);box-sizing:border-box}
.bz-form textarea.elementor-field-textual{min-height:130px}
.bz-form .elementor-button{display:inline-block;width:auto;padding:15px 26px 12px;font:600 13px/1.1 "Josefin Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink);background:#fff;border:1.5px solid transparent;border-image:linear-gradient(90deg,#9a7224,#f3d98b 30%,#b88a2c 55%,#f6e3a1 78%,#8a6420) 1;border-radius:0}
.bz-form .elementor-button:hover{background:var(--mint)}
.bz-form .elementor-message{margin-top:12px;font-size:14px}
@media (max-width:560px){.bz-form .elementor-form-fields-wrapper{grid-template-columns:minmax(0,1fr)}}

/* WooCommerce uses the design's .qty, .price and .button words for its own things */
.bz-woo .qty{display:inline-block;border:1px solid var(--line);border-radius:12px;height:auto}
.bz-woo .price{font:inherit}
@media (max-width:760px){.pdp .qv-row{margin-inline:-16px;padding-inline:16px}}

/* WooCommerce's own purple buttons and dark field borders */
.bz-woo .woocommerce a.button.alt,.bz-woo .woocommerce button.button.alt,.bz-woo .woocommerce #place_order,.bz-woo .woocommerce .wc-proceed-to-checkout a.checkout-button{display:block;padding:17px 26px 14px;font:600 13px/1.1 "Josefin Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--ink);background:#fff;border:1.5px solid transparent;border-image:linear-gradient(90deg,#9a7224,#f3d98b 30%,#b88a2c 55%,#f6e3a1 78%,#8a6420) 1;border-radius:0}
.bz-woo .woocommerce a.button.alt:hover,.bz-woo .woocommerce button.button.alt:hover,.bz-woo .woocommerce .wc-proceed-to-checkout a.checkout-button:hover{background:var(--mint);color:var(--ink)}
.bz-woo .woocommerce form .form-row input.input-text,.bz-woo .woocommerce form .form-row textarea{border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.bz-woo .woocommerce form .form-row input.input-text:focus,.bz-woo .woocommerce form .form-row textarea:focus{outline:2px solid var(--gold-solid);outline-offset:1px}
.bz-woo .woocommerce form .form-row label{line-height:1.5}

/* The developer credit at the very bottom of the footer */
.foot-base .foot-credit{display:block;margin-top:4px;font-weight:400;font-size:12px}
.foot-base .foot-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Room around the tin, and the phone layout: what a visitor needs first, without the repeats. Loaded last so it wins. */

/* ---------- laptops: the title stands clear of the tin on both sides ---------- */
@media (min-width:900px){
  .hero{--title-gap:clamp(20px,calc(var(--tw) * .12),48px)}
  .h-title .l1{right:calc(50% + var(--tw) * .5 + var(--title-gap))}
  .h-title .l2{left:calc(50% + var(--tw) * .5 + var(--title-gap))}
  .h-sub{right:calc(50% + var(--tw) * .5 + var(--title-gap))}
}
@media (min-width:900px) and (max-width:1120px){
  .h-title{font-size:calc(var(--th) * .35)}
}

/* ---------- tablets: more air between the title and the tin ---------- */
@media (min-width:761px) and (max-width:899px){
  .h-title .l1{bottom:calc(var(--tin-b) + var(--th) + var(--tw) * .78)}
  .h-title .l2{bottom:calc(var(--tin-b) + var(--th) + var(--tw) * .28)}
}

@media (max-width:760px){
  /* ---------- the tin: title clear of it, and the name, price and Add button on the first screen ---------- */
  .hero{--tw:min(40vw,150px,20svh)}
  .h-title{padding-bottom:calc(var(--tin-b) + var(--th) + clamp(24px,5svh,46px))}
  .h-cue{display:none}
  .js-anim .h-cta{opacity:1}
  .js-anim .h-cta,.js-anim .h-cta *{pointer-events:auto}

  /* ---------- the blends: choose a tin, see it, see the price and the button, then what it is; the tasting rows
     and the leaf close-up wait behind Details ---------- */
  .bx .wrap{display:flex;flex-direction:column}
  .bx-top{display:contents}
  .bx-head{order:1;margin-bottom:14px}
  .bx-head .lede{display:none}
  .bx-tins{order:2}
  .bx-photo{order:3}
  .bx-info{order:4;margin-top:20px;gap:18px}
  #bxInfo .bx-taste,#bxMacro{display:none}
  .bx-info>div:first-child{display:flex;flex-direction:column}
  .bx-kind{order:1}
  .bx-name{order:2}
  .bx-buy{order:3;flex-wrap:nowrap;gap:14px;margin-top:14px}
  .bx-buy .btn{flex:1;min-width:0;padding-inline:12px;white-space:nowrap}
  .bx-buy .link-arrow{white-space:nowrap}
  .bx-note{order:4;margin-top:16px}

  /* ---------- find your blend: straight to the first question ---------- */
  .finder .lede{display:none}

  /* ---------- gifts: say what it is, show the card, choose, add ---------- */
  .gift-grid{display:flex;flex-direction:column;gap:0}
  .gift-copy{display:contents}
  .gift-copy .eyebrow{order:1;margin-bottom:10px}
  #giftTitle{order:2;margin-bottom:6px}
  .gift-copy .lede{display:none}
  .deck{order:3;height:clamp(210px,58vw,300px);margin-bottom:6px}
  .gc-pick{order:4}
  .gc-detail{order:5}
  .gc-detail .buy .btn{flex:1 0 auto;min-width:max-content;padding-inline:12px}

  /* ---------- find us: are they open, how to get there, then the hours ---------- */
  .visit-photo{height:210px}
  .visit-card{display:flex;flex-direction:column}
  .visit-card>.eyebrow{order:1}
  .visit-card>h2{order:2}
  .visit-card>.open-now{order:3}
  .visit-card>.visit-ctas{order:4;display:flex;flex-wrap:nowrap;align-items:center;gap:16px;margin:16px 0 8px}
  .visit-ctas .btn{flex:1;min-width:0;padding-inline:10px;white-space:nowrap}
  .visit-ctas .link-arrow{white-space:nowrap}
  .visit-card>.hours{order:5}
  .visit-card>.addr{order:6}
  .perks{display:none}

  /* ---------- footer: no repeat of the block above it, the main links in pairs, then the small print on one row ---------- */
  body:has(#visit) .foot-col{display:none}
  body:has(#visit) .foot-grid{gap:0}
  .foot-nav ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px 12px;padding-inline:var(--gutter)}
  .foot-nav li{grid-column:span 3;border:0!important;text-align:center}
  .foot-nav li.foot-small{grid-column:span 2}
  .foot-nav li.foot-small a{font-weight:500;font-size:11.5px;letter-spacing:.12em;opacity:.78}
  .foot-nav li::before,.foot-nav li::after{display:none!important}
  .foot-nav a{display:block;padding:10px 4px}

  /* ---------- shop: straight to the products ---------- */
  .crumbs,.pdp-head{display:none}
  .shop-head .ph-text{padding-block:22px 18px}
  .shop-sec .bx-head .lede{display:none}
  .shop-sec{padding-block:30px}
  .shop-sec .bx-head{margin-bottom:14px}
  .shop-grid .studio .badge{max-width:112px;padding:5px 7px 3px;font-size:8.5px;letter-spacing:.1em;line-height:1.25;white-space:normal}
  .shop-grid .studio-info p.note{-webkit-line-clamp:2}

  /* ---------- restaurant pages: what the page is and the button first, then the picture ---------- */
  .ph-grid>.ph-text{order:-1}
  .ph-grid>figure{max-height:240px;overflow:hidden}
  .ph-grid>figure img{height:100%;object-fit:cover}

  /* ---------- menus: each section folds, so the page is a list to choose from ---------- */
  .msec.is-fold{padding-block:0;border-bottom:1px solid var(--line)}
  .msec.is-fold .msec-head{position:relative;margin:0;padding:20px 34px 18px 0;cursor:pointer}
  .msec.is-fold .msec-head::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .25s ease}
  .msec.is-fold:not(.is-shut) .msec-head::after{transform:rotate(-135deg);margin-top:-2px}
  .msec.is-fold .msec-head p{display:none}
  .msec.is-fold .msec-head .h2{font-size:30px;margin:0}
  .msec.is-fold.is-shut .wrap>*:not(.msec-head){display:none}
  .msec.is-fold:not(.is-shut) .wrap{padding-bottom:26px}
  .msec{scroll-margin-top:calc(var(--hh) + 62px)}
}

/* Fixes found looking at the phone screens */
@media (max-width:760px){
  /* the card deck has no width of its own, so it must stretch or it disappears */
  .gift-grid{align-items:stretch;text-align:left}
  .deck{width:100%}
  .visit-ctas .btn{padding-inline:6px;font-size:12px;letter-spacing:.1em}
  .foot-nav li,.foot-nav li a{border:0!important;box-shadow:none!important;background:none}
  .foot-nav li:not(.foot-small):nth-child(odd):is(:last-child,:has(+.foot-small)){grid-column:1 / -1}
  .ph-grid>figure{width:100%;height:230px;max-height:none;aspect-ratio:auto}
  .ph-grid>figure img{width:100%;height:100%;object-fit:cover}
}
@media (max-width:760px){
  /* two buttons share the line only when both fit; otherwise they stack */
  .visit-card>.visit-ctas{flex-wrap:wrap}
  .visit-ctas .btn{flex:1 0 auto;min-width:max-content;padding-inline:14px}
}
@media (max-width:379px){
  /* the £100 gift card button still shares its line with Details on a 360-wide phone */
  .gc-detail .buy .btn{letter-spacing:.12em}
}