/* FLUXO store v25 (coffee story, grind, FAQ). v23: Monochrome: grey paper, ink, graphite; one typeface for text (Archivo), the real FLUXO wordmark
   as SVG (never typeset), product cards lit like a studio (ink for coffee, white for gear, grey for objects) with a
   spotlight that follows the cursor, three live 3D portals on the home page. Cobalt survives only as the "live" dot. */
:root{
  --paper:#ebebe8;--paper2:#e0e0dc;--card:#fff;--ink:#1c1d21;--ink2:#4c4e55;--ink3:#7d7f87;--hair:rgba(28,29,33,.1);--hair2:rgba(28,29,33,.2);
  --cobalt:#3b3c42;--cobalt2:#2a2b30;--live:#2f45a8;--night:#121318;--ice:#d9deea;
  --ultra:#1d2cb3;--ultra2:#14208a;--ultra-hi:#8fa2ff;--abyss:#070a2a;--lime:#c8f53a;--topbg:rgba(235,235,232,.96);
  --f:'Archivo',system-ui,sans-serif;
  --pad:clamp(16px,4vw,56px);--max:1360px;--ease:cubic-bezier(.2,.8,.2,1);--out:cubic-bezier(.16,1,.3,1);--r:12px;--rc:clamp(18px,1.8vw,26px)
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
body{background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
::selection{background:var(--cobalt);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
main{position:relative;padding-top:64px}
html[data-page=home] main{padding-top:0}
.wm{display:block;fill:currentColor;height:auto}

/* ── type ── */
.pagetitle,.pp h1,.co h1,.status h1{font:500 clamp(38px,4.6vw,72px)/1.02 var(--f);font-stretch:112%;letter-spacing:-.035em;text-wrap:balance}
h2{font:500 clamp(28px,3vw,46px)/1.05 var(--f);font-stretch:110%;letter-spacing:-.03em;text-wrap:balance}
h1 em,h2 em,h3 em,p em{font-style:normal;color:var(--ink3)}
h3,.co legend{font:600 17px/1.3 var(--f);letter-spacing:-.005em}
.size,.crumb,.fine,.meta{font-size:13.5px;line-height:1.45;color:var(--ink3)}
.caps{font:600 11.5px/1.2 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.price b,.summary .tot b,.drawer footer .sum b{font-weight:600;font-size:24px;line-height:1;letter-spacing:-.015em}

/* word reveal (motion.js wraps the words of [data-split]) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.w>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--out) calc(var(--wi,0) * 55ms)}
.split-in .w>span{transform:none}

/* ── header ── */
.top{position:fixed;top:0;left:0;right:0;z-index:30;background:var(--topbg);border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
.top.solid{border-color:var(--hair)}
html[data-page=home] .top:not(.solid){background:transparent}
.top .wrap{display:flex;align-items:center;gap:clamp(14px,3vw,40px);height:64px}
.top .mark{color:var(--ink);display:block;padding:6px 0}
.top .mark .wm{width:86px}
.top nav{display:flex;gap:clamp(16px,2.4vw,30px);margin-right:auto}
.top nav a{font-size:14px;font-weight:500;color:var(--ink2);padding:6px 0;transition:color .2s;position:relative}
.top nav a::before{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--out)}
.top nav a:hover::before{transform:none;transform-origin:left}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top nav a.live::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--live);margin-left:7px;vertical-align:2px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.lang{display:flex;font-size:14px;font-weight:500}
.lang a{padding:6px 7px;color:var(--ink3);white-space:nowrap}.lang a[aria-current]{color:var(--ink)}
.bagbtn{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);transition:background .2s}
.bagbtn:hover{background:var(--cobalt)}
.bagbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.bagbtn b{min-width:14px;text-align:center;font-weight:600}
.bagbtn.bump{animation:bump .6s var(--out)}@keyframes bump{30%{transform:scale(1.14)}}
@media (max-width:760px){.top nav{display:none}.top .mark{margin-right:auto}.top .mark .wm{width:78px}.top .wrap{gap:8px}.lang a{padding:6px 4px}.bagbtn span{display:none}.bagbtn{padding:0 14px}}

/* ── buttons ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500;font-size:14.5px;white-space:nowrap;overflow:hidden;isolation:isolate;transition:color .35s,transform .2s}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--cobalt);border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--out)}
.btn:hover::before{transform:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn svg{width:18px;height:18px;flex:none}
.btn.big{min-height:56px;padding:0 30px;font-size:15px}
.btn.cob{background:var(--cobalt)}.btn.cob::before{background:var(--ink)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair2)}.btn.line::before{background:var(--ink)}.btn.line:hover{color:var(--paper);box-shadow:none}
.btn[disabled]{opacity:.45;pointer-events:none}
.txt{font-weight:500;border-bottom:1px solid currentColor;padding-bottom:1px;justify-self:start}.txt:hover{color:var(--cobalt)}

/* ── worlds: three live 3D portal cards ── */
.worlds{position:relative;height:100svh;min-height:600px;max-height:1100px;display:grid;grid-template-rows:1fr auto}
.wstage{position:relative;min-height:0}
.wgl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;opacity:0;transition:opacity 1.2s var(--out)}
html.gl-on .wgl{opacity:1}
.wcards{position:absolute;inset:64px var(--pad) 8px;display:flex;justify-content:center;align-items:center;gap:clamp(10px,1.6vw,22px)}
.wcard{position:relative;flex:0 1 auto;height:min(100%,640px);aspect-ratio:1.3/1.76;border-radius:var(--rc);overflow:hidden;background:var(--tone);color:#fff;transition:transform .6s var(--out)}
.wcard:hover{transform:translateY(-6px)}
.wcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wcard[data-world=lote] img{object-fit:contain;padding:14% 6% 6%}
.wcard b{position:absolute;left:7%;top:5%;font:600 clamp(22px,2.4vw,36px)/1 var(--f);letter-spacing:-.02em}
.wcard span{position:absolute;left:7%;bottom:5%;right:7%;font-size:13px;opacity:.85}
html.gl-on .wcards{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);inset:auto}
@media (max-width:760px){html:not(.gl-on) .wcards{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px;inset:64px 0 8px}html:not(.gl-on) .wcard{flex:0 0 74vw;height:auto;scroll-snap-align:center}}
.wcopy{display:flex;justify-content:space-between;align-items:end;gap:24px;width:100%;padding-bottom:clamp(18px,3.4svh,34px)}
.wcopy h1{font:500 clamp(28px,3vw,46px)/1.04 var(--f);font-stretch:110%;letter-spacing:-.03em;max-width:15em}
.whero{display:grid;gap:12px;justify-items:start;max-width:760px}
.whero p{color:var(--ink2);max-width:52ch;font-size:16px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.whint{display:grid;justify-items:end;gap:4px;font-size:13px;color:var(--ink3);text-align:right}
.whint span:first-child{color:var(--ink);font-weight:500;display:flex;align-items:center;gap:8px}
.whint span:first-child::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 2.4s ease-in-out infinite}
@media (max-width:760px){.worlds{min-height:700px;max-height:none}.wcopy{flex-direction:column;align-items:flex-start;gap:12px}.whint{justify-items:start;text-align:left}.whero p{font-size:15px}.ctas .btn{flex:1 1 auto}}
/* inside a world: the stage takes the whole screen */
.wback,.wgoing,.wpanel{display:none}
.worlds.inside .wstage{position:fixed;inset:0;z-index:45;background:var(--paper)}
html.inworld{overflow:hidden}
.worlds.inside .wback{display:flex;position:absolute;z-index:3;left:var(--pad);top:18px;align-items:center;gap:6px;height:40px;padding:0 16px 0 10px;border-radius:999px;background:var(--card);color:var(--ink);font-size:14px;font-weight:500;animation:fadein .5s var(--out) .6s both}
.wback svg{width:18px;height:18px}
.worlds.going .wgoing{display:block;position:absolute;z-index:3;left:50%;bottom:32px;transform:translateX(-50%);background:var(--card);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;animation:fadein .4s both}
.worlds[data-world=lote] .wpanel{display:grid;gap:14px;position:absolute;z-index:3;right:var(--pad);top:50%;transform:translateY(-50%);width:min(420px,40vw);background:var(--card);border-radius:var(--rc);padding:clamp(20px,2vw,28px);animation:panel .7s var(--out) both}
.wpanel h2{font-size:clamp(26px,2.4vw,36px)}
.wpanel .notesline{color:var(--ink2);text-transform:capitalize;margin-top:-6px}
.wpanel .variants{grid-template-columns:repeat(2,minmax(0,1fr))}
.wpanel .perks{font-size:12.5px;gap:6px 14px}
.wdrag{font-size:12.5px;color:var(--ink3)}
@keyframes fadein{from{opacity:0}}@keyframes panel{from{opacity:0;transform:translate(24px,-50%)}}
@media (max-width:900px){
  .worlds[data-world=lote] .wpanel{top:auto;bottom:8px;left:8px;right:8px;width:auto;transform:none;max-height:58svh;overflow:auto;padding:18px;gap:10px;animation-name:sheet}
  .wpanel h2{font-size:24px}.wpanel .perks,.wdrag,.wpanel>.caps{display:none}
  @keyframes sheet{from{opacity:0;transform:translateY(30px)}}
}

/* ── section heads ── */
.shead{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:clamp(56px,10vh,110px) 0 24px}
.shead.first{padding-top:clamp(30px,6vh,70px)}
.shead p{max-width:42ch;color:var(--ink2)}
@media (max-width:760px){.shead{flex-direction:column;align-items:flex-start;gap:10px}}

/* ── product cards: own colour, the object floating, title top-left ── */
.shopsec,.shoppage,.more{position:relative}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.tabs button{padding:9px 16px;font-size:14px;font-weight:500;color:var(--ink2);border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair2);transition:background .25s,color .25s}
.tabs button:hover{color:var(--ink);background:var(--card)}
.tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.card{--fg:var(--ink);--sx:calc(50% + var(--mx,0) * 16%);--sy:calc(34% + var(--my,0) * 12%);position:relative;aspect-ratio:4/5;color:var(--fg);border-radius:var(--rc);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at var(--sx) var(--sy),color-mix(in oklab,var(--tone),#fff 70%) 0%,var(--tone) 55%,color-mix(in oklab,var(--tone),#000 5%) 100%);box-shadow:inset 0 0 0 1px rgba(28,29,33,.05);
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .7s var(--out),opacity .9s var(--out),translate .9s var(--out)}
.card.dk{--fg:#fff;background:radial-gradient(120% 90% at var(--sx) var(--sy),color-mix(in oklab,var(--tone),#fff 15%) 0%,var(--tone) 58%,color-mix(in oklab,var(--tone),#000 40%) 100%);box-shadow:none}
.card.dk .cimg img{filter:drop-shadow(0 22px 22px rgba(0,0,0,.45))}
html.mo .card:not(.in){opacity:0;translate:0 40px}
.card.in{transition-delay:0s,var(--d,0ms),var(--d,0ms)}
.card:hover{--lift:-4px}
.cimg{position:absolute;inset:0;z-index:-1;display:block}
.cimg img{position:absolute;left:8%;right:8%;top:15%;bottom:9%;width:84%;height:76%;object-fit:contain;
  translate:calc(var(--mx,0) * 10px) calc(var(--my,0) * 8px);transition:transform 1.1s var(--out),translate .9s var(--out);filter:drop-shadow(0 18px 18px rgba(20,22,35,.18))}
.card:hover .cimg img{transform:scale(1.05) translateY(-2%)}
.ctop{position:absolute;left:clamp(14px,1.6vw,22px);top:clamp(14px,1.6vw,20px);right:64px;pointer-events:none}
.ctop h3{font:600 clamp(16px,1.35vw,20px)/1.15 var(--f);letter-spacing:-.01em;pointer-events:auto}
.ctop h3 a::after{content:'';position:absolute;inset:-200px;z-index:-1}
.card .ctop{position:absolute}
.ctop .size{display:block;margin-top:3px;color:var(--fg);opacity:.72}
.card .p{position:absolute;left:clamp(14px,1.6vw,22px);bottom:clamp(14px,1.6vw,20px);font-weight:600;font-size:15px;white-space:nowrap;background:var(--card);color:var(--ink);padding:6px 12px;border-radius:999px}
.card .p small{font-weight:400;font-size:12.5px;color:var(--ink3);margin-left:2px}
.add{position:absolute;z-index:2;right:clamp(12px,1.4vw,18px);bottom:clamp(12px,1.4vw,18px);width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .5s var(--out),background .25s}
.add svg{width:20px;height:20px}
.add:hover{background:var(--cobalt);transform:rotate(90deg)}
.card.dk .add{background:#f4f4f2;color:var(--ink)}.card.dk .add:hover{background:#fff}
.card .ctop h3 a{position:static}
.card{cursor:pointer}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ctop{right:12px}.ctop h3{font-size:14.5px}.ctop .size{font-size:12px}.card .p{font-size:13.5px;padding:5px 10px}.add{width:36px;height:36px}}
.shopsec .perks,.shoppage .perks{margin-top:24px}

/* buy box */
.buy{display:grid;gap:14px;max-width:560px}
.variants{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.variants button{padding:12px;text-align:left;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--hair2);display:grid;gap:3px;background:var(--paper);transition:background .25s,box-shadow .25s,transform .25s var(--out)}
.variants button b{font-size:14px;font-weight:500}.variants button span{font-size:13px;color:var(--ink3)}
.variants button[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--card)}
.variants button:not([aria-pressed=true]):hover{background:var(--card);transform:translateY(-2px)}
.buyrow{display:flex;gap:12px;align-items:center}
.buyrow .price{display:flex;flex-direction:column;justify-content:center;min-width:118px}
.price small{font-size:13px;color:var(--ink3);margin-top:6px}
.buyrow .btn{flex:1}
@media (max-width:900px){.variants{grid-template-columns:repeat(2,minmax(0,1fr))}}
.perks{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:4px 0 0;color:var(--ink2);font-size:13.5px}
.perks li{display:flex;align-items:center;gap:8px}
.perks svg{width:18px;height:18px;color:var(--cobalt);flex:none}

/* ── product page ── */
.pp{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4.5vw,72px);padding-top:clamp(18px,3vw,40px);padding-bottom:clamp(30px,6vh,70px)}
.gal{position:sticky;top:88px;align-self:start;aspect-ratio:4/5;overflow:hidden;background:radial-gradient(110% 85% at 50% 34%,color-mix(in oklab,var(--tone,#f6f6f3),#fff 70%) 0%,var(--tone,#f6f6f3) 58%,color-mix(in oklab,var(--tone,#f6f6f3),#000 5%) 100%);border-radius:var(--rc);transition:background .6s var(--out);transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--out)}
.galin{position:absolute;inset:8% 7% 6%}
.gal.dk{background:radial-gradient(110% 85% at 50% 34%,color-mix(in oklab,var(--tone),#fff 15%) 0%,var(--tone) 60%,color-mix(in oklab,var(--tone),#000 40%) 100%)}
.gal.dk .galin img{filter:drop-shadow(0 24px 26px rgba(0,0,0,.5))}
.galin img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 24px rgba(20,22,35,.2));translate:calc(var(--ry,0deg) / 1deg * 2px) calc(var(--rx,0deg) / 1deg * -2px);transition:translate .9s var(--out)}
.ppcopy{display:grid;gap:0;align-content:start}
.crumb{margin-bottom:22px}.crumb a:hover{color:var(--cobalt)}
.pp .size{margin-top:12px;font-size:15px}
.pp .about{font-size:18px;color:var(--ink2);margin:24px 0 28px;max-width:52ch}
.pp .fine{margin-top:12px}
.facts{margin-top:34px;display:grid}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:13px 0;border-top:1px solid var(--hair)}
.facts dt{color:var(--ink3)}
.incafe{display:flex;gap:16px;align-items:center;margin-top:30px;padding:12px;background:var(--night);color:#fff;border-radius:var(--rc);transition:transform .5s var(--out)}
.incafe:hover{transform:translateY(-3px)}
.incafe img{width:96px;height:72px;object-fit:cover;border-radius:10px}
.incafe b{display:block;font-weight:600}
.incafe span{font-size:13.5px;color:var(--ice)}
.notify{display:flex;gap:8px;max-width:520px}
.notify input{flex:1;min-width:0;min-height:50px;padding:0 18px;border:1px solid var(--hair2);background:var(--card);border-radius:999px}
.soon{color:var(--cobalt);font-weight:500}
.qty{display:flex;align-items:center;border:1px solid var(--hair2);border-radius:999px;overflow:hidden;background:var(--card)}
.qty button{width:40px;height:100%;min-height:44px;font-size:18px}.qty button:hover{background:var(--paper2)}
.qty output{min-width:26px;text-align:center;font-weight:600}
.more{padding-bottom:20px}
@media (max-width:900px){.pp{grid-template-columns:1fr}.gal{position:relative;top:0}.facts div{grid-template-columns:110px 1fr}.buyrow{flex-wrap:wrap}.buyrow .btn{flex-basis:100%}}

/* ── bag drawer ── */
.drawer{position:fixed;inset:0;z-index:50;display:none}
.drawer[open]{display:block}
.drawer .scrim{position:absolute;inset:0;background:rgba(18,19,24,.4);animation:fade .3s both}
.drawer .panel{position:absolute;top:8px;right:8px;bottom:8px;width:min(440px,calc(100% - 16px));background:var(--paper);border-radius:22px;display:flex;flex-direction:column;overflow:hidden;animation:slide .55s var(--out) both}
@keyframes fade{from{opacity:0}}@keyframes slide{from{transform:translateX(40px);opacity:0}}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--hair)}
.drawer header h2{font-size:26px}
.drawer .x{width:40px;height:40px;font-size:20px;border-radius:999px;background:var(--paper2)}
.drawer .list{flex:1;overflow:auto;padding:4px 22px;overscroll-behavior:contain}
.bline{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--hair);align-items:center}
.bline img{width:64px;aspect-ratio:4/5;object-fit:contain;padding:4px;background:var(--paper2);border-radius:10px}
.bline b{display:block;font-weight:600}.bline small{color:var(--ink3);font-size:13.5px}
.bline .r{display:grid;justify-items:end;gap:8px}
.bline .qty{border-color:var(--hair)}.bline .qty button{width:32px;min-height:32px;font-size:16px}
.summary .bline{grid-template-columns:52px 1fr auto;padding:12px 0}.summary .bline img{width:52px}
.empty{padding:40px 0;color:var(--ink3)}
.drawer footer{padding:18px 22px 22px;border-top:1px solid var(--hair2);display:grid;gap:12px}
.drawer footer .sum{display:flex;justify-content:space-between;align-items:baseline}
.drawer footer p{font-size:13px;color:var(--ink3);text-align:center}

/* ── checkout ── */
.co{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,4.5vw,72px);padding-top:clamp(24px,4vw,56px);padding-bottom:80px}
.co h1{margin:10px 0 14px}
.colede{color:var(--ink2);max-width:52ch}
.co fieldset{border:0;padding:0;margin:34px 0 0;display:grid;gap:12px;min-width:0}
.co legend{margin-bottom:12px;padding:0}
.f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.f3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:12px}
.co label{display:grid;gap:6px;font-size:13.5px;color:var(--ink2)}
.co input,.co select,.co textarea{width:100%;min-width:0;min-height:50px;padding:10px 15px;border:1px solid var(--hair2);background:var(--card);font-size:16px;color:var(--ink);border-radius:var(--r);transition:border-color .2s,box-shadow .2s}
.co input:focus,.co select:focus,.co textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(28,29,33,.1)}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay label{position:relative;display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--hair2);border-radius:16px;cursor:pointer;color:var(--ink);background:var(--card);transition:border-color .25s,box-shadow .25s,transform .3s var(--out)}
.pay label:hover{transform:translateY(-2px)}
.pay label:has(input:checked){border-color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--cobalt)}
.pay label:has(input:disabled){opacity:.4;pointer-events:none}
.pay input{position:absolute;opacity:0;pointer-events:none}
.pay i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--paper2);color:var(--ink2);flex:none;transition:background .25s,color .25s}
.pay label:has(input:checked) i{background:var(--cobalt);color:#fff}
.pay i svg{width:22px;height:22px}
.pay b{display:block;font-size:15.5px;font-weight:600}.pay small{color:var(--ink3);font-size:13px}
.paybtn{width:100%;margin-top:14px}
.secure{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px}.secure svg{width:15px;height:15px}
.summary{position:sticky;top:88px;align-self:start;background:var(--card);padding:24px;border-radius:22px;box-shadow:inset 0 0 0 1px var(--hair)}
.summary h2{font-size:24px;margin-bottom:6px}
.srow{display:flex;justify-content:space-between;padding:8px 0;color:var(--ink2);font-size:15px}
.srow .free{color:var(--cobalt);font-weight:500}
.summary .tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;margin-top:6px;border-top:1px solid var(--hair2)}
.summary .fine{margin-top:12px}
.summary .perks{margin-top:16px;font-size:13px}
.err{color:#b23b2a;font-size:14px;margin-top:16px}
.err:empty{display:none}
@media (max-width:900px){.co{grid-template-columns:1fr}.summary{position:relative;top:0;order:-1}.f3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.f3 label:nth-child(2){grid-column:1/-1;order:-1}.pay{grid-template-columns:1fr}}

/* payment status */
.status{position:relative;z-index:2;padding:clamp(40px,10vh,110px) 0 0;max-width:680px}
.status h1{margin:22px 0 18px}
.status p{color:var(--ink2);font-size:17px;max-width:52ch}
.status .num{display:inline-block;margin:0 0 18px;padding:9px 16px;background:var(--ink);color:var(--paper);font-weight:600;letter-spacing:.04em;border-radius:999px}
.status .caps{display:block;margin-top:22px}
.status .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.sicon{width:84px;height:84px;display:block}
.sicon.wait circle{fill:none;stroke:var(--hair);stroke-width:5}
.sicon.wait .arc{stroke:var(--cobalt);stroke-dasharray:60 200;stroke-linecap:round;transform-origin:50% 50%;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sicon.ok circle{fill:var(--cobalt)}
.sicon.ok path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .7s var(--out) .25s forwards}
.sicon.ok{animation:pop .6s var(--out) both}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes pop{from{transform:scale(.6);opacity:0}}
.sicon.no circle{fill:var(--paper2)}.sicon.no path{stroke:var(--ink2);stroke-width:5;stroke-linecap:round}

/* ── footer: the real wordmark, full width ── */
.foot{position:relative;background:var(--night);color:var(--ice);margin-top:clamp(70px,12vh,140px);overflow:hidden}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;padding-top:64px;padding-bottom:40px}
.fbig{font:500 clamp(24px,2.3vw,34px)/1.08 var(--f);font-stretch:110%;letter-spacing:-.025em;color:#fff;margin-bottom:16px;max-width:none!important}
.fbig em{color:rgba(217,222,234,.55)}
.foot h4{font:600 11.5px/1.2 var(--f);letter-spacing:.1em;text-transform:uppercase;color:rgba(217,222,234,.55);margin-bottom:12px}
.foot a{display:block;padding:4px 0;font-size:14.5px;transition:color .2s,transform .4s var(--out)}.foot a:hover{color:#fff;transform:translateX(4px)}
.foot p{max-width:40ch;font-size:14.5px;color:rgba(217,222,234,.8)}
.fword{color:#fff;padding:0 var(--pad) clamp(14px,2vw,28px);max-width:var(--max);margin:0 auto}
.fword .wm{width:100%}
.foot .base{border-top:1px solid rgba(255,255,255,.1);padding:16px var(--pad);font-size:13px;color:rgba(217,222,234,.55);display:flex;justify-content:space-between;gap:12px;max-width:var(--max);margin:0 auto}
@media (max-width:760px){.fgrid{grid-template-columns:1fr}.foot .base{flex-direction:column}}

/* ── toast + fly-to-bag ── */
.toast{position:fixed;left:50%;bottom:24px;z-index:60;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;font-size:14px;display:flex;gap:14px;align-items:center;animation:rise2 .5s var(--out) both;max-width:calc(100% - 32px)}
.toast button{color:var(--ice);font-weight:500;text-decoration:underline;white-space:nowrap}
@keyframes rise2{from{transform:translate(-50%,14px);opacity:0}}
.fly{position:fixed;z-index:70;pointer-events:none;border-radius:12px;overflow:hidden;}
.fly img{width:100%;height:100%;object-fit:contain}

.rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--out),transform .9s var(--out)}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv,html.mo .card:not(.in){opacity:1;transform:none;translate:none}.w>span{transform:none}.bagimg{opacity:1}}

.rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--out),transform .9s var(--out)}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv,html.mo .card:not(.in){opacity:1;transform:none;translate:none}.w>span{transform:none}}

/* ── v25: grind picker ── */
.grind{display:grid;gap:8px}
.grind>div{display:flex;flex-wrap:wrap;gap:6px}
.grind button{padding:8px 13px;font-size:13.5px;font-weight:500;color:var(--ink2);border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair2);background:var(--paper);transition:background .2s,color .2s,box-shadow .2s}
.grind button:hover{color:var(--ink);background:var(--card)}
.grind button[aria-checked=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.grind small{font-size:12.5px;color:var(--ink3)}
.grind:has([data-g=beans][aria-checked=true]) small{display:none}
.wpanel .grind small{display:none}
.bline small.gr{display:block;color:var(--ink2)}
.morelot{margin-top:22px}

/* ── v25: the coffee band on the home page ── */
.cband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;padding-top:clamp(56px,10vh,110px)}
.cbcopy{display:grid;gap:16px;justify-items:start}
.cbcopy p{color:var(--ink2);max-width:46ch;font-size:17px}
.cstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);border-radius:var(--rc);overflow:hidden}
.cstats div{background:var(--paper);padding:clamp(18px,2.2vw,30px);display:flex;flex-direction:column-reverse;gap:4px}
.cstats dd{font:500 clamp(30px,3.4vw,52px)/1 var(--f);font-stretch:112%;letter-spacing:-.035em}
.cstats dt{font-size:13.5px;color:var(--ink3)}
@media (max-width:860px){.cband{grid-template-columns:1fr}}

/* ── v25: the story of Lote 001 ── */
.story,#preparo{scroll-margin-top:72px}
.story{background:var(--night);color:var(--ice);margin-top:clamp(30px,6vh,60px);padding-bottom:clamp(50px,9vh,100px)}
.story .caps{color:rgba(217,222,234,.6)}
.story h2{color:#fff}.story h2 em{color:rgba(217,222,234,.5)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.1);border-radius:var(--rc);overflow:hidden}
.steps li{background:var(--night);padding:clamp(20px,2.2vw,30px);display:grid;gap:8px;align-content:start;transition-delay:var(--d,0ms)}
.steps .sn{font-size:13px;font-weight:600;color:rgba(217,222,234,.45);letter-spacing:.06em}
.steps h3{color:#fff;font-size:19px;margin-top:18px}
.steps .sm{font-size:13.5px;color:rgba(217,222,234,.7)}
.steps p{font-size:15px;color:rgba(217,222,234,.85);margin-top:6px}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps{grid-template-columns:1fr}.steps h3{margin-top:6px}}

.taste{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,96px);padding-top:clamp(56px,10vh,110px)}
.tcol{display:grid;gap:14px;align-content:start}
.bars{display:grid;margin-top:14px}
.bar{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--hair)}
.bar dt{color:var(--ink2)}
.bar dd{display:flex;align-items:center;gap:16px;font-size:14.5px;color:var(--ink3)}
.dots{display:flex;gap:5px}
.dots i{width:clamp(22px,3vw,38px);height:8px;border-radius:4px;background:var(--hair2)}
.dots i.on{background:var(--ink)}
.notes{display:grid;gap:10px;margin-top:20px}
.notes ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.notes li{padding:8px 14px;border-radius:999px;background:var(--card);font-size:14.5px;font-weight:500;box-shadow:inset 0 0 0 1px var(--hair)}
.rp{font-size:17px;color:var(--ink2);max-width:48ch}
.roast{margin-top:30px;padding:70px 22px 22px;background:var(--card);border-radius:var(--rc);box-shadow:inset 0 0 0 1px var(--hair)}
.rline{position:relative;height:10px;border-radius:5px;background:var(--paper2);margin:0 6px}
.rline .dev{position:absolute;top:0;bottom:0;border-radius:0 5px 5px 0;background:var(--ink)}
.rline i{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--ink)}
.rlab{position:relative;height:52px;margin:12px 6px 0}
.rlab span{position:absolute;top:0;transform:translateX(-50%);display:grid;justify-items:center;font-size:12.5px;color:var(--ink3);white-space:nowrap}
.rlab span.up{top:-86px;flex-direction:column-reverse;display:flex;align-items:center}
.rlab span:first-child{transform:none;justify-items:start}.rlab span:last-child{transform:translateX(-100%);justify-items:end}
.rlab b{font-size:15px;color:var(--ink);font-weight:600}
.rdev{font-size:13px;color:var(--ink2);margin-top:6px}
@media (max-width:860px){.taste{grid-template-columns:1fr}.bar{grid-template-columns:96px 1fr}.bar dd{gap:10px}}

.bgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.bcard{background:var(--card);border-radius:var(--rc);padding:clamp(18px,2vw,26px);display:grid;gap:10px;align-content:start;box-shadow:inset 0 0 0 1px var(--hair)}
.bcard .ratio{font:500 clamp(24px,2.2vw,32px)/1.05 var(--f);font-stretch:110%;letter-spacing:-.03em}
.bcard dl{display:grid}
.bcard dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--hair);font-size:14.5px}
.bcard dt{color:var(--ink3)}.bcard dd{text-align:right}
.bcard .tip{font-size:14px;color:var(--ink2)}
.keep{margin-top:clamp(12px,1.4vw,20px);display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:20px;padding:clamp(18px,2vw,26px);border-radius:var(--rc);box-shadow:inset 0 0 0 1px var(--hair2)}
.keep p{color:var(--ink2);max-width:70ch}
@media (max-width:1000px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.bgrid{grid-template-columns:1fr}.keep{grid-template-columns:1fr;gap:8px}}

/* ── v25: FAQ (product page + /faq/) ── */
.faq{display:grid;border-bottom:1px solid var(--hair)}
.faq details{border-top:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:clamp(16px,1.3vw,19px);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair2);transition:transform .4s var(--out),background .2s}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.6px;margin:-.8px 0 0 -5.5px;background:currentColor}
.faq summary i::after{transform:rotate(90deg);transition:transform .4s var(--out)}
.faq details[open] summary i{background:var(--ink);color:var(--paper);box-shadow:none}
.faq details[open] summary i::after{transform:none}
.faq summary:hover i{background:var(--card)}
.faq details[open] summary:hover i{background:var(--ink)}
.faq p{padding:0 50px 22px 0;color:var(--ink2);max-width:72ch;animation:fadein .4s var(--out)}
.pfaq .shead{align-items:center}
.faqpage{max-width:980px}
.fgroup{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:24px;padding-top:clamp(30px,5vh,56px)}
.fgroup h2{font-size:clamp(20px,1.7vw,26px);padding-top:18px}
.fcontact{margin-top:clamp(36px,6vh,60px);padding:20px 24px;border-radius:var(--rc);background:var(--card);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--hair)}
@media (max-width:760px){.fgroup{grid-template-columns:1fr;gap:0}.faq p{padding-right:0}}

/* ── v26: landing additions (both modes) ── */
.btn .dot{width:8px;height:8px;border-radius:50%;background:var(--live);animation:pulse 2.4s ease-in-out infinite}
.how{padding-top:clamp(56px,10vh,120px)}
.how ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.how li{background:var(--card);border-radius:var(--rc);padding:clamp(20px,2.2vw,32px);display:grid;gap:10px;align-content:start;box-shadow:inset 0 0 0 1px var(--hair);min-height:230px}
.how .hn{font:600 13px/1 var(--f);letter-spacing:.08em;color:var(--ink3)}
.how h3{font:500 clamp(22px,1.9vw,28px)/1.1 var(--f);font-stretch:110%;letter-spacing:-.02em;margin-top:auto}
.how p{color:var(--ink2);font-size:15px}
.how li:nth-child(2){background:var(--ink);color:var(--paper);box-shadow:none}.how li:nth-child(2) p{color:color-mix(in srgb,var(--paper) 75%,transparent)}.how li:nth-child(2) .hn{color:color-mix(in srgb,var(--paper) 60%,transparent)}
@media (max-width:860px){.how ol{grid-template-columns:1fr}.how li{min-height:0}.how h3{margin-top:14px}}
/* v27: ritual steps are links; the spirit section above them */
.how li{padding:0;display:block;transition:transform .5s var(--out)}
.how li a{display:grid;gap:10px;align-content:start;height:100%;min-height:230px;padding:clamp(20px,2.2vw,32px);color:inherit;text-decoration:none;position:relative;border-radius:inherit}
.how li .go{position:absolute;top:clamp(16px,1.8vw,26px);right:clamp(16px,1.8vw,26px);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--hair2);transition:background .3s,color .3s,transform .4s var(--out)}
.how li .go svg{width:17px;height:17px}
.how li:hover .go{background:var(--ink);color:var(--paper);transform:translateX(3px)}
.how li:nth-child(2) .go{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--paper) 30%,transparent)}
.how li:nth-child(2):hover .go{background:var(--paper);color:var(--ink)}
@media (max-width:860px){.how li a{min-height:0}}
.spirit{padding-top:clamp(72px,13vh,150px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,48px) clamp(24px,5vw,88px);align-items:start}
.sphead h2{font:500 clamp(36px,4.6vw,68px)/.98 var(--f);font-stretch:110%;letter-spacing:-.035em;margin-top:14px;max-width:12ch}
.spcopy{padding-top:clamp(4px,2.4vw,34px)}
.spcopy p{font-size:16.5px;line-height:1.62;color:var(--ink2);max-width:54ch}
.spcopy p+p{margin-top:16px}
.spcopy .lead{font-size:clamp(19px,1.55vw,23px);line-height:1.45;color:var(--ink);letter-spacing:-.005em}
.sppill{grid-column:1/-1;list-style:none;padding:0;margin:clamp(8px,2vw,24px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair2)}
.sppill li{padding:24px clamp(18px,2.4vw,36px) 0 0;display:grid;gap:8px;align-content:start}
.sppill li+li{border-left:1px solid var(--hair);padding-left:clamp(18px,2.4vw,36px)}
.sppill .hn{font:600 13px/1 var(--f);letter-spacing:.08em;color:var(--ink3)}
.sppill h3{font:500 clamp(20px,1.7vw,25px)/1.1 var(--f);font-stretch:110%;letter-spacing:-.02em;margin-top:6px}
.sppill p{color:var(--ink2);font-size:15px;line-height:1.55;max-width:38ch}
@media (max-width:860px){.spirit{grid-template-columns:1fr}.spcopy{padding-top:0}.sppill{grid-template-columns:1fr}.sppill li,.sppill li+li{border-left:0;padding:20px 0;border-top:1px solid var(--hair)}.sppill li:first-child{border-top:0}}
html.flow .sphead h2{font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.01em;line-height:.92;max-width:14ch}
html.flow .sphead h2 em,html.flow .how h2 em{color:var(--lime)}
html.flow .sppill .hn{color:var(--lime)}html.flow .sppill{border-top-color:rgba(255,255,255,.22)}
html.flow .how li:hover .go{background:var(--lime);color:#000}
.hfaq .shead{align-items:center}

/* ── v26: the FLUXO mode switch in the header ── */
.flowbtn{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair2);transition:box-shadow .3s,background .3s}
.flowbtn:hover{background:var(--card)}
.flowbtn i{position:relative;width:28px;height:28px;border-radius:50%;background:conic-gradient(from 200deg,#000 0 50%,var(--ultra) 50% 80%,var(--lime) 80% 100%);transition:transform .7s var(--out)}
.flowbtn i::after{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--paper)}
.flowbtn:hover i{transform:rotate(180deg)}
.flowbtn[aria-pressed=true] i::after{background:var(--lime);inset:9px}
@media (max-width:760px){.flowbtn span{display:none}.flowbtn{padding:0 6px}}
.fxsplash{position:fixed;inset:0;z-index:80;pointer-events:none;width:100%;height:100%}
.fxpaint{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--out)}
html.flow .fxpaint{opacity:1}

/* ── v26 FLUXO mode: black, ultramarine satin, acid lime, poster type ── */
html.flow{--paper:#050507;--paper2:#16161b;--card:#111116;--ink:#f4f4f2;--ink2:#c6c8d0;--ink3:#8b8e98;--hair:rgba(255,255,255,.11);--hair2:rgba(255,255,255,.22);
  --cobalt:#2a3bd6;--cobalt2:#1d2cb3;--live:var(--lime);--night:#000;--topbg:rgba(5,5,7,.86);color-scheme:dark}
html.flow body{background:transparent}
html.flow{background:#050507}
html.flow h1 em,html.flow h2 em,html.flow h3 em,html.flow p em{color:var(--ultra-hi)}
html.flow ::selection{background:var(--lime);color:#000}
html.flow .wcopy h1,html.flow .cband h2,html.flow .how h2,html.flow .shopsec h2,html.flow .story h2,html.flow .pagetitle,html.flow .pp h1,html.flow .fbig{font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.01em;line-height:.92}
html.flow .wcopy h1{font-size:clamp(40px,6vw,92px)}
html.flow .wcopy h1 em{color:var(--lime)}
html.flow .worlds{background:radial-gradient(90% 70% at 50% 42%,#16207a 0%,#0a0f45 38%,#05061a 72%,#000 100%)}
html.flow .worlds.inside .wstage{background:#05061a}
html.flow .ctas .btn:first-child{background:var(--lime);color:#000}html.flow .ctas .btn:first-child::before{background:#fff}
html.flow .btn .dot{background:#000}
html.flow .bagbtn{background:var(--lime);color:#000}html.flow .bagbtn:hover{background:#fff}
html.flow .flowbtn{color:#fff}
html.flow .cband{max-width:none;padding-left:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));padding-right:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));padding-bottom:clamp(56px,10vh,120px);margin-top:clamp(40px,8vh,90px);background:var(--ultra);position:relative;overflow:hidden}
html.flow .cband .caps{color:var(--lime)}html.flow .cband h2 em{color:var(--lime)}html.flow .cband .cbcopy p{color:rgba(255,255,255,.86)}
html.flow .cband .cstats{background:rgba(255,255,255,.2)}html.flow .cband .cstats div{background:var(--ultra)}html.flow .cband .cstats dt{color:rgba(255,255,255,.72)}
html.flow .cband .btn.line{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
html.flow .how li:nth-child(2){background:var(--ultra);color:#fff}html.flow .how li:nth-child(2) .hn{color:var(--lime)}html.flow .how li:nth-child(2) p{color:rgba(255,255,255,.82)}
html.flow .how .hn{color:var(--lime)}
html.flow .story,html.flow .steps li{background:var(--abyss)}html.flow .steps .sn{color:var(--lime)}
html.flow .dots i.on{background:var(--lime)}
html.flow .rline .dev{background:var(--lime)}html.flow .rline i{box-shadow:inset 0 0 0 2px var(--lime)}
html.flow .grind button[aria-checked=true],html.flow .tabs button[aria-pressed=true]{background:var(--lime);color:#000}
html.flow .variants button[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--lime)}
html.flow .faq details[open] summary i{background:var(--lime);color:#000}
html.flow .foot{background:#000}
html.flow .incafe{background:var(--ultra)}
html.flow .card:not(.dk){box-shadow:none}
html.flow .top nav a.live::after{background:var(--lime)}

/* 日本語 */
:lang(ja){--f:'Archivo','Noto Sans JP','Hiragino Sans',system-ui,sans-serif}
:lang(ja) body{line-height:1.75;font-feature-settings:'palt'}
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3{letter-spacing:0;line-height:1.3;word-break:auto-phrase;line-break:strict}
:lang(ja) .pagetitle,:lang(ja) .pp h1,:lang(ja) .status h1{font-size:clamp(32px,4vw,58px)}
:lang(ja) .wcopy h1{font-size:clamp(22px,2vw,30px);max-width:16em}
:lang(ja) .caps{letter-spacing:.04em}

/* ── v29 photography: ritual (sticky frame + wipes), specialty, places rail, at your place, product cup strip ── */
.ph{position:relative;overflow:hidden;border-radius:var(--rc);background:var(--paper2)}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.ill{display:block;margin-top:12px;font-size:12px;color:var(--ink3)}
.ritual{padding:clamp(56px,10vh,110px) 0 0}
.rtin{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(28px,5vw,80px)}
.rthead{grid-column:1/-1;padding-bottom:clamp(20px,4vh,40px)}
.rthead h2{font-size:clamp(34px,4.6vw,72px);max-width:16ch}
.rtframe{position:sticky;top:96px;align-self:start;height:min(72svh,640px);overflow:visible;background:none}
.rtimg{position:absolute;inset:0 0 28px;margin:0;border-radius:var(--rc);overflow:hidden;clip-path:inset(100% 0 0 0 round var(--rc));transition:clip-path 1.05s var(--out)}
.rtimg img{transform:scale(1.12);transition:transform 1.6s var(--out)}
.rtimg.on,.rtimg.past{clip-path:inset(0 0 0 0 round var(--rc))}
.rtimg.on img{transform:none}.rtimg.past img{transform:scale(1.04)}
.rtticks{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;list-style:none;padding:0}
.rtticks li{flex:1;height:2px;background:var(--hair2);transition:background .6s var(--out)}.rtticks li.on{background:var(--ink)}
.rtframe .ill{position:absolute;right:0;bottom:8px;margin:0}
.rtsteps{list-style:none;padding:0}
.rtsteps>li{min-height:72svh;display:flex;flex-direction:column;justify-content:center;gap:12px;opacity:.28;transition:opacity .6s var(--out)}
.rtsteps>li.on{opacity:1}
.rtn{font:500 clamp(56px,7vw,112px)/.9 var(--f);font-stretch:75%;letter-spacing:-.04em;color:var(--ink)}
.rtsteps h3{font:500 clamp(24px,2.4vw,36px)/1.1 var(--f);letter-spacing:-.02em}
.rtsteps p{max-width:38ch;color:var(--ink2);font-size:17px}
.rtmob{display:none}
@media (max-width:900px){
  .rtin{grid-template-columns:1fr}.rtframe{display:none}
  .rtsteps>li{min-height:0;opacity:1;padding:18px 0 34px;gap:10px}
  .rtmob{display:block;aspect-ratio:3/2;margin-top:8px;order:-1}
  .rtsteps>li .rtn{font-size:56px}
}
.specgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.scard figure{aspect-ratio:4/5;margin-bottom:16px}
.scard img{transition:transform 1.2s var(--out)}.scard:hover img{transform:scale(1.04)}
.scard h3{font:500 22px/1.15 var(--f);letter-spacing:-.015em;margin-bottom:6px}.scard p{color:var(--ink2);max-width:36ch}
@media (max-width:760px){.specgrid{grid-template-columns:1fr}.scard figure{aspect-ratio:3/2}}
.places .shead{padding-bottom:28px}
.plrail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  padding:0 max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));scroll-padding:0 max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));cursor:grab}
.plrail::-webkit-scrollbar{display:none}.plrail.dragging{cursor:grabbing;scroll-snap-type:none}.plrail.dragging .plcard{pointer-events:none}
.plcard{flex:0 0 clamp(260px,30vw,420px);aspect-ratio:4/5;scroll-snap-align:start;color:#fff;user-select:none}
.plcard img{transition:transform 1.2s var(--out);-webkit-user-drag:none}.plcard:hover img{transform:scale(1.05)}
.plcard::after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(5,5,7,.78))}
.plcap{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:grid;gap:4px}
.plcap .caps{color:rgba(255,255,255,.72)}.plcap b{font:500 24px/1.1 var(--f);letter-spacing:-.02em}
.plcap i{font-style:normal;font-size:13.5px;display:flex;align-items:center;gap:6px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--out)}
.plcap i svg{width:16px;height:16px}.plcard:hover .plcap i,.plcard:focus-visible .plcap i{opacity:1;transform:none}
.plnav{display:flex;justify-content:flex-end;gap:8px;padding-top:16px}
.plnav button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--hair2);color:var(--ink);transition:background .3s,opacity .3s}
.plnav button:hover{background:var(--card)}.plnav button:disabled{opacity:.3}.plnav svg{width:18px;height:18px}
@media (max-width:760px){.plcard{flex-basis:78vw}.plcap i{opacity:1;transform:none}.plnav{display:none}}
.hmgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hmt{margin:0;aspect-ratio:4/5}
.hmt:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.hmt figcaption{position:absolute;left:14px;bottom:12px;z-index:1;font-size:12.5px;font-weight:500;color:#fff;padding:5px 10px;border-radius:999px;background:rgba(5,5,7,.55)}
.hmcta{grid-column:1/-1;aspect-ratio:auto;background:var(--ink);color:var(--paper);border-radius:var(--rc);padding:clamp(24px,3vw,44px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.hmcta h3{font:500 clamp(26px,2.6vw,40px)/1.05 var(--f);letter-spacing:-.025em;margin-bottom:8px}.hmcta p{color:color-mix(in oklab,var(--paper),transparent 25%);max-width:46ch}
.hmcta .btn{background:var(--paper);color:var(--ink);flex:none}
@media (max-width:760px){.hmgrid{grid-template-columns:1fr 1fr;gap:10px}.hmt:first-child{grid-row:span 1;aspect-ratio:4/5}.hmt:nth-child(6){grid-column:span 2;aspect-ratio:3/2}.hmcta{flex-direction:column;align-items:flex-start}}
.cupstrip{padding-top:clamp(40px,7vh,80px)}.cupstrip>.caps{display:block;margin-bottom:14px}
.cups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cups figure{aspect-ratio:4/3;margin:0}
@media (max-width:760px){.cups{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.cups figure{flex:0 0 80vw;scroll-snap-align:start}}
/* FLUXO mode: photographs print as an ultramarine duotone (hover brings the colour back), lime marks the ritual */
html.flow .ph img{filter:url(#duo)}
@media (hover:hover){html.flow .ph:hover img{filter:none}}
html.flow .rtticks li.on{background:var(--lime)}html.flow .rtn{color:var(--lime);font-weight:800}
html.flow .rthead h2,html.flow .spec h2,html.flow .places h2,html.flow .athome h2{font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.01em;line-height:.92}
html.flow .rthead h2 em,html.flow .spec h2 em,html.flow .places h2 em,html.flow .athome h2 em{color:var(--lime)}
html.flow .hmcta{background:var(--ultra);color:#fff}html.flow .hmcta .btn{background:var(--lime);color:#000}
html.flow .ph{background:#111116}
html.flow .hmcta p{color:rgba(255,255,255,.8)}

/* ── v34 (2026-10-30): three world cards + a bigger hero line + the coffee chip; the coffee, calculator and
   monthly sections; shipping notes. No photography of our own beyond real café frames and the 3D bag renders. ── */
.worlds.w3 .wcopy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(20px,4vw,64px);row-gap:10px}
.worlds.w3 .wcopy h1{font:500 clamp(40px,5.2vw,88px)/.98 var(--f);font-stretch:112%;letter-spacing:-.045em;max-width:none;text-wrap:balance}
.worlds.w3 .whero{max-width:none;gap:14px}
.worlds.w3 .whero p{font-size:clamp(15px,1.15vw,17.5px);max-width:50ch}
.worlds.w3 .whint{grid-column:2;justify-items:start;text-align:left}
.lotchip{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr) 44px;align-items:center;gap:14px;width:min(380px,100%);padding:10px 12px 10px 10px;border-radius:calc(var(--rc) - 4px);background:var(--card);box-shadow:0 1px 0 var(--hair),0 18px 40px -28px rgba(20,22,35,.35)}
.lotchip .lcimg{display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--tone)}
.lotchip .lcimg img{width:100%;height:100%;object-fit:contain;padding:8% 6% 4%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.lctxt{display:grid;gap:3px;min-width:0}
.lctxt .caps{font-size:10.5px}
.lcname{font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcname:hover{color:var(--cobalt)}
.lcnotes{font-size:13px;color:var(--ink2);line-height:1.35}
.lcprice{font-size:13px;font-weight:600}
.lotchip .add{position:static}
.lotchip .add:hover{background:var(--cobalt)}
@media (max-width:900px){.worlds.w3 .wcopy{grid-template-columns:1fr}.worlds.w3 .whint{grid-column:1}.lotchip{width:100%}}
@media (max-width:760px){.worlds.w3{min-height:760px}.worlds.w3 .wcopy h1{font-size:clamp(36px,10.5vw,52px)}}

/* the coffee */
.coffee{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);padding-top:clamp(64px,12vh,140px);align-items:start}
.cfgal{border-radius:var(--rc)}
.cfcopy{display:grid;gap:18px;align-content:start;padding-top:clamp(0px,4vh,40px)}
.cfcopy h2{font:500 clamp(40px,4.6vw,76px)/1 var(--f);font-stretch:112%;letter-spacing:-.045em}
.cfnotes{font:500 clamp(19px,1.7vw,26px)/1.25 var(--f);letter-spacing:-.015em;color:var(--ink2)}
.cfcopy .about{color:var(--ink2);max-width:60ch}
.cffacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;border-top:1px solid var(--hair);margin-top:6px}
.cffacts div{padding:12px 0;border-bottom:1px solid var(--hair);display:grid;gap:2px}
.cffacts dt{font-size:12.5px;color:var(--ink3)}
.cffacts dd{font-weight:500;font-size:14.5px}
@media (max-width:900px){.coffee{grid-template-columns:1fr}.cfgal{position:relative;top:0;max-width:520px;width:100%;justify-self:center}.cffacts{grid-template-columns:1fr}}

/* brew calculator (v37: follows the theme tokens, so it works on the calm grey and in FLUXO mode; collapsed on the home page) */
.calc{color:var(--ink);margin-top:clamp(64px,12vh,140px)}
.calc .caps,.calc .shead p{color:var(--ink3)}
.cdet{background:var(--card);border-radius:var(--rc);box-shadow:0 1px 0 var(--hair)}
.csum{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(18px,2.6vw,32px);cursor:pointer;list-style:none}
.csum::-webkit-details-marker{display:none}
.cstxt{display:grid;gap:8px}
.cstxt h2{font:500 clamp(26px,2.8vw,44px)/1.02 var(--f);font-stretch:110%;letter-spacing:-.035em}
.cstxt h2 em{color:var(--ink3);font-style:normal}
.cstxt p{color:var(--ink2);max-width:58ch}
.cplus{position:relative;flex:none;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair2);transition:transform .4s var(--out),background .2s}
.cplus::before,.cplus::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:1.8px;margin:-.9px 0 0 -8px;background:currentColor;border-radius:2px}
.cplus::after{transform:rotate(90deg);transition:transform .4s var(--out)}
.csum:hover .cplus{background:var(--paper)}
.cdet[open] .cplus::after{transform:rotate(0)}
.cdet[open] .csum{padding-bottom:clamp(10px,1.4vw,18px)}
.cdet .cbox{margin:0 clamp(8px,1.2vw,14px);background:var(--paper)}
.cdet .call{margin:18px clamp(18px,2.6vw,32px) clamp(18px,2.6vw,28px)}
.cbox{display:grid;gap:clamp(18px,2.4vw,28px);background:var(--card);border-radius:calc(var(--rc) - 4px);padding:clamp(18px,2.6vw,36px)}
.cmethods{display:flex;flex-wrap:wrap;gap:6px}
.cmethods button{height:38px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--hair2);transition:background .2s,color .2s}
.cmethods button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink3)}
.cmethods button[aria-checked=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.cmain{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(18px,4vw,64px);align-items:end}
.cslide{display:grid;gap:10px}
.cin,.cg{font:500 clamp(48px,6vw,96px)/.95 var(--f);font-stretch:108%;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.cout{display:grid;gap:8px;justify-items:start}
.csp{color:var(--ink3);font-size:14px}
.cslide input{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin-top:6px}
.cslide input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--ink) var(--p,40%),var(--hair2) var(--p,40%))}
.cslide input::-moz-range-track{height:2px;background:var(--hair2)}
.cslide input::-moz-range-progress{height:2px;background:var(--ink)}
.cslide input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ink);margin-top:-10px;border:0}
.cslide input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);border:0}
.cspecs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair)}
.cspecs div{padding:14px 14px 0 0;display:grid;gap:4px}
.cspecs dt{font-size:12.5px;color:var(--ink3)}
.cspecs dd{font-weight:500}
.cnote{color:var(--ink2);font-size:14px}
.cacts{display:flex;flex-wrap:wrap;gap:10px}
.calc .call{display:inline-block;margin-top:22px;color:var(--ink2)}
html.flow .cmethods button[aria-checked=true]{background:var(--lime);color:#000}
html.flow .cslide input::-webkit-slider-thumb{background:var(--lime)}
html.flow .cslide input::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--lime) var(--p,40%),var(--hair2) var(--p,40%))}
@media (max-width:760px){.cmain{grid-template-columns:1fr}.cspecs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}.cmethods{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--pad) * -1);padding:0 var(--pad);scrollbar-width:none}.cdet .cmethods{margin:0 -18px;padding:0 18px}.cmethods button{flex:none}.cacts .btn{flex:1 1 100%}.cplus{width:40px;height:40px}}

/* monthly */
.monthly{padding-top:clamp(64px,12vh,140px)}
.mngrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:center}
.mncopy{display:grid;gap:16px;justify-items:start}
.mncopy h2{font-size:clamp(32px,3.6vw,58px)}
.mncopy p{color:var(--ink2);max-width:54ch}
.mnbuy{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:6px}
.mnimg{display:block;aspect-ratio:5/4;border-radius:var(--rc);overflow:hidden;background:radial-gradient(110% 85% at 50% 34%,#3a3b41 0%,#1c1d21 62%,#111215 100%)}
.mnimg img{width:100%;height:100%;object-fit:cover;object-position:50% 53%;transform:scale(.86);filter:drop-shadow(0 24px 26px rgba(0,0,0,.5))}
@media (max-width:900px){.mngrid{grid-template-columns:1fr}.mnimg{max-width:520px;width:100%}}

/* shipping notes (drawer + checkout) */
.shipnote{font-size:13.5px;font-weight:500;padding:9px 12px;border-radius:10px;background:var(--paper2);color:var(--ink)}
.shipnote.ok{background:color-mix(in oklab,var(--live),#fff 86%);color:var(--live)}
.summary .shipnote{margin-top:10px}
.drawer footer .shipnote{margin-bottom:10px}
.shiprule{font-size:12.5px;color:var(--ink3);margin-top:8px}

/* ── v35 brewing guides (hub, method, "how much coffee for X", glossary) ── */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--ink3);margin-bottom:clamp(28px,5vh,56px)}
.crumbs a{color:var(--ink2)}.crumbs a:hover{color:var(--ink)}.crumbs i{font-style:normal;opacity:.5}
.gdhero{padding-top:clamp(28px,5vh,60px);display:grid;gap:18px;justify-items:start}
.gdhero .pagetitle{max-width:16ch}.gdhero .pagetitle em,.gdart h1 em{font-style:normal;color:var(--ink3)}
.gdlead{max-width:58ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--ink2)}
.gdans{margin-top:8px;max-width:760px;width:100%;display:grid;gap:8px;background:var(--card);border-radius:var(--rc);padding:clamp(18px,2.2vw,28px);border-left:4px solid var(--ink)}
.gdans p{font-size:clamp(17px,1.4vw,21px);line-height:1.45;font-weight:500;text-wrap:pretty}.gdans small{color:var(--ink3);font-size:14px}
.gdrecipe{width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--hair);border-radius:var(--rc);overflow:hidden;margin-top:10px}
.gdrecipe div{background:var(--paper);padding:16px 18px;display:grid;gap:4px}.gdrecipe dt{font-size:12.5px;color:var(--ink3)}.gdrecipe dd{font-weight:500;font-size:16px}
@media (max-width:900px){.gdrecipe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.calc.pinned{margin-top:clamp(40px,7vh,80px);padding:clamp(28px,5vh,56px) 0}
.calc.pinned .cpin{display:block;margin-bottom:16px}
.gdbody{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,88px);padding-top:clamp(48px,9vh,100px);align-items:start}
@media (max-width:900px){.gdbody{grid-template-columns:1fr}}
.gdbody h2,.gdfaq h2{font:500 clamp(26px,2.4vw,38px)/1.1 var(--f);font-stretch:112%;letter-spacing:-.025em;margin-bottom:20px}
.gdsteps ol{list-style:none;counter-reset:s;display:grid}
.gdsteps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--hair);font-size:clamp(16px,1.2vw,18px);line-height:1.55}
.gdsteps li::before{content:counter(s,decimal-leading-zero);font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums}
.gdside{position:sticky;top:96px;display:grid;gap:22px}
.gdside>h2.caps{font:inherit;font-size:12px;margin:0}
.gdgear{list-style:none;display:grid;border-top:1px solid var(--hair)}.gdgear li{padding:12px 0;border-bottom:1px solid var(--hair);color:var(--ink2)}
.gdcta{display:grid;gap:14px;background:var(--card);border-radius:var(--rc);padding:18px}
.gdctain{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center}
.gdctain img{width:96px;height:120px;object-fit:cover;object-position:50% 52%;border-radius:12px;background:radial-gradient(110% 85% at 50% 34%,color-mix(in oklab,var(--tone),#fff 70%) 0%,var(--tone) 58%)}
.gdctain b{font-size:17px;font-weight:600}.gdctain p{font-size:14px;color:var(--ink2);margin-top:4px}.gdctain .gdg{color:var(--ink3)}.gdp{display:block;margin-top:8px;font-weight:600}
.gdbtns{display:flex;gap:16px;align-items:center}.gdbtns .btn{flex:1}
.gdfaq{padding-top:clamp(48px,9vh,100px)}.gdbody .gdfaq{padding-top:0}
.gdmore{padding-block:clamp(48px,9vh,100px) clamp(24px,5vh,60px);display:grid;gap:16px}
.gdmore h2.caps{font:inherit;font-size:12px}
.gdchips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.gdchips a{display:inline-flex;min-height:40px;align-items:center;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair2);font-size:14.5px;transition:background .2s,color .2s}
.gdchips a:hover{background:var(--ink);color:var(--paper);box-shadow:none}
.gdchips.big a{min-height:52px;padding:0 22px;font-size:17px;font-weight:500}
.gdgl{margin-top:14px;color:var(--ink3)}
.gdmethods{padding-top:clamp(40px,7vh,80px)}
.gdgrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.gdm{height:100%;display:grid;align-content:start;gap:10px;background:var(--card);border-radius:var(--rc);padding:clamp(20px,2vw,28px);transition:transform .5s var(--out),background .3s}
.gdm:hover{transform:translateY(-3px)}
.gdn{font-size:13px;color:var(--ink3);font-variant-numeric:tabular-nums}.gdm b{font-size:clamp(20px,1.6vw,24px);font-weight:600;letter-spacing:-.015em}
.gdm p{color:var(--ink2);font-size:15px;line-height:1.5}
.gdmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.gdmeta span{font-size:12.5px;padding:5px 10px;border-radius:999px;background:var(--paper)}
.tscroll{overflow-x:auto;border-radius:var(--rc);background:var(--card)}
.gdtable table{width:100%;border-collapse:collapse;min-width:620px;font-size:15px}
.gdtable th,.gdtable td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--hair);white-space:nowrap}
.gdtable thead th{font-size:12.5px;color:var(--ink3);font-weight:500}
.gdtable tbody tr:last-child>*{border-bottom:0}
.gdtable tbody th{font-weight:500}.gdtable tbody th a:hover{color:var(--ink3)}.gdtable small{color:var(--ink3);font-weight:400}
.gdvols{padding-bottom:clamp(24px,5vh,60px)}
.gdgloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:1px;background:var(--hair);border-radius:var(--rc);overflow:hidden;margin-top:clamp(28px,5vh,56px)}
.gdgloss div{background:var(--paper);padding:clamp(18px,2vw,26px);display:grid;gap:8px;align-content:start;scroll-margin-top:96px}
.gdgloss dt{font-weight:600;font-size:18px}.gdgloss dd{color:var(--ink2);line-height:1.55}
.gdgloss div:target{background:var(--card)}
.gdsteps ol,.gdgear,.gdchips,.gdgrid{padding:0;margin:0}

/* ── v37 (2026-10-30): the bag first. A 3D hero you can turn (store/hero-bag.js), one "buy now" button that goes to
   the coffee, then the three café cards (Florianópolis, Ushuaia, Madrid). ── */
.hero3d{position:relative;min-height:100svh;max-height:1080px;display:grid;grid-template-rows:minmax(0,1fr) auto;padding-top:64px}
.h3stage{position:relative;min-height:320px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.h3fall{position:absolute;left:50%;top:50%;height:min(92%,640px);width:auto;transform:translate(-50%,-50%);object-fit:contain;transition:opacity .6s var(--out);filter:drop-shadow(0 26px 30px rgba(20,22,35,.18))}
.h3gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s var(--out);cursor:grab;outline:none}
.h3stage.grab .h3gl{cursor:grabbing}
.h3stage.on .h3gl{opacity:1}.h3stage.on .h3fall{opacity:0}
.h3drag{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3);opacity:0;transition:opacity .6s;pointer-events:none;white-space:nowrap}
.h3drag svg{width:20px;height:20px}
.h3stage.on .h3drag{opacity:1}.h3stage.turned .h3drag{opacity:0}
.h3copy{display:grid;justify-items:center;text-align:center;gap:10px;padding-top:clamp(8px,2svh,20px);padding-bottom:clamp(24px,5svh,56px)}
.h3copy h1{font:500 clamp(36px,4.4vw,72px)/1 var(--f);font-stretch:112%;letter-spacing:-.045em;text-wrap:balance}
.h3notes{color:var(--ink2);font-size:clamp(15px,1.2vw,18px)}
.h3buy{margin-top:8px;min-width:min(320px,100%)}
.h3price{font-size:13.5px;color:var(--ink3)}
html.flow .h3copy h1{font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.01em;line-height:.92;font-size:clamp(44px,6vw,96px)}
html.flow .h3buy{background:var(--lime);color:#000}html.flow .h3buy::before{background:#fff}
html.flow .h3fall{filter:none}
@media (max-width:760px){.hero3d{min-height:max(640px,100svh)}.h3stage{min-height:300px}.h3buy{width:100%}}
/* the café cards, now under the hero */
.worlds.wsec{height:auto;min-height:0;max-height:none;display:block;padding-top:clamp(56px,10vh,120px)}
.wsec .whead{margin-bottom:clamp(8px,2vh,20px)}
.wsec .wstage{height:clamp(500px,72svh,800px)}
.wsec .wcards{inset:8px var(--pad)}
@media (max-width:760px){.wsec .wstage{height:clamp(460px,70svh,640px)}html:not(.gl-on) .wsec .wcards{inset:8px 0}}
html.flow .worlds.wsec{background:none}
/* v37b: solid top bar (text no longer shows through), no backdrop behind the cards */
:root{--topbg:#ebebe8}html.flow{--topbg:#050507}
.wsec .wgl{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
.worlds.inside .wgl{-webkit-mask-image:none;mask-image:none}
.wsec .whead{align-items:end}

/* ── v39 (2026-10-31) light mode: the coffee sits on warm stone like the hero, not on black slabs, so the shop
   reads as one family with the gear. FLUXO mode keeps the dark stage. ── */
html:not(.flow) .card.dk,html:not(.flow) .gal.dk{--tone:#d9d5cd}
html:not(.flow) .card.dk{--fg:var(--ink);background:radial-gradient(120% 90% at var(--sx) var(--sy),#f3f1ec 0%,#dfdbd3 56%,#cdc8bf 100%);box-shadow:inset 0 0 0 1px rgba(28,29,33,.06)}
html:not(.flow) .card.dk .cimg img{filter:drop-shadow(0 20px 18px rgba(58,48,36,.26))}
html:not(.flow) .card.dk .add{background:var(--ink);color:#fff}html:not(.flow) .card.dk .add:hover{background:#000}
html:not(.flow) .gal.dk{background:radial-gradient(110% 85% at 50% 34%,#f4f2ed 0%,#ddd9d1 60%,#cbc6bc 100%)}
html:not(.flow) .gal.dk .galin img{filter:drop-shadow(0 24px 24px rgba(58,48,36,.28))}
html:not(.flow) .mnimg{background:radial-gradient(110% 85% at 50% 34%,#f4f2ed 0%,#ddd9d1 62%,#cbc6bc 100%)}
html:not(.flow) .mnimg img{filter:drop-shadow(0 24px 24px rgba(58,48,36,.28))}
html:not(.flow) .lotchip .lcimg{background:#ddd9d1}
/* the hero bag stands in a soft pool of light instead of floating on flat paper */
html:not(.flow) .h3stage::before{content:"";position:absolute;left:50%;top:52%;width:min(78vh,820px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,.35) 55%,rgba(255,255,255,0));pointer-events:none}
@media (max-width:760px){.wsec .whead{align-items:flex-start}.wsec .whead p{max-width:none}}
.shead.wrap{padding-left:var(--pad);padding-right:var(--pad)}
/* v39g hero: the photo shown before the 3D bag is ready matches the 3D framing (same size, same place), and the
   copy sits lower so neither the drag hint nor the kicker touches the bag */
.h3stage{container-type:size}
.h3fall{width:100%;height:100%;max-width:none;top:50%;filter:none;transition:none}
/* The poster is the exact first frame: swap once WebGL has drawn, without a translucent double image. */
.h3gl{transition:none}
.h3copy{padding-top:clamp(40px,6svh,68px)}
.h3drag{bottom:auto;top:calc(100% + 10px)}
/* v42: the entered world covers the whole screen (the section's fixed height above kept it at 72svh) */
.wsec.worlds.inside .wstage{height:auto}

/* Keep fixed layers tied to the layout viewport: mobile Safari can otherwise
   widen its visual viewport to fit an overflowing fixed header. */
.top{width:100%;max-width:100vw}
.fxpaint{width:100vw;max-width:100vw}
.wsec:not(.inside) .wstage{max-width:100%;overflow:hidden}
@media(max-width:760px){
  .top .wrap{display:grid;grid-template-columns:78px minmax(0,1fr) 40px 52px;gap:6px}
  .top .mark{margin:0;min-width:0}
  .top .lang{min-width:0;justify-content:flex-end;font-size:13px}
  .top .lang a{display:flex;align-items:center;min-height:40px;padding:4px 3px}
  .top .flowbtn{width:40px;min-width:0;justify-content:center;padding:0}
  .top .bagbtn{width:52px;min-width:0;justify-content:center;gap:4px;padding:0 8px}
}
@media(max-width:360px){
  .top .wrap{grid-template-columns:64px minmax(0,1fr) 40px 48px;padding-inline:12px}
  .top .mark .wm{width:64px}
  .top .lang{font-size:12px}
  .top .lang a{padding-inline:2px}
  .top .bagbtn{width:48px;padding-inline:6px}
}
/* Do not let hidden detail content or fixed layers enlarge the phone viewport. */
html{overflow-x:hidden;overflow-x:clip}
.cdet:not([open])>:not(summary){display:none}

/* Product photography keeps its light studio surface in both themes, so its
   foreground must follow the card surface rather than the page's dark theme. */
.card:not(.dk){--fg:#1c1d21}
html.flow .card:not(.dk) .add{background:#1c1d21;color:#fff}
html.flow .card:not(.dk) .add:hover{background:#2a3bd6}
.card.dk .add{color:#1c1d21}
html.flow .perks svg{color:var(--ultra-hi)}

/* Destination is part of shopping, independent from the reading language. */
.marketbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding-block:8px;font-size:12px;color:var(--ink2);border-bottom:1px solid var(--hair)}
.marketbar label{display:flex;align-items:center;gap:8px;min-width:0}
.marketbar select{max-width:min(240px,48vw);min-width:0;background:var(--paper);border:1px solid var(--hair2);border-radius:8px;padding:5px;color:var(--ink);font-size:12px}
.marketbar>span{white-space:nowrap}
html[data-page=home] .marketbar{margin-top:64px}
html[data-page=home] .hero3d{padding-top:0;min-height:calc(100svh - 108px)}
.market-ribbon{position:absolute;inset:auto 0 0;min-height:38px;display:flex;align-items:center;justify-content:center;padding:7px 12px;background:#1c1d21;color:#fff;font-size:11px;line-height:1.2;font-weight:600;text-align:center;z-index:3}
html.flow .market-ribbon{background:var(--ultra);color:#fff}
.card.unavailable .p,.card.unavailable .add{bottom:54px}
.card.unavailable .add{opacity:.5;cursor:default}
.card.unavailable:hover{--lift:0px}
.buy [data-add]:disabled{white-space:normal;line-height:1.3;padding-block:12px}
[data-country-checkout],[data-shipping-service]{margin-bottom:12px}
@media(max-width:360px){.marketbar{font-size:11px;gap:6px}.marketbar select{max-width:42vw}.marketbar>span{font-size:10px}}