:root{
  --bg:#050505; --surface:#0f0e0d; --surface-2:#171513;
  --text:#f6f1ea; --muted:#b9b0a4;
  --line:rgba(246,241,234,.16); --line-strong:rgba(246,241,234,.34);
  --serif:'Fredoka','Trebuchet MS',system-ui,sans-serif;   /* slogan */
  --logo:'Jost','Futura','Century Gothic','Avenir Next',system-ui,sans-serif;   /* Tunga + Ateliê de Alta-Doçura */
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:60px; --r:14px;
  /* cores das marcas */
  --luxy:#84ACE0; --luxy-ink:#0c1d3f;
  --blokko:#F4C8D7; --blokko-ink:#5b1f2e;
  --tung:#F2DF9D; --tung-ink:#171208;
  --brand:#f6f1ea; --brand-ink:#050505;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;caret-color:var(--brand);scrollbar-color:#3a3632 var(--bg);font-variant-numeric:tabular-nums;overflow-x:hidden}
::selection{background:var(--brand);color:var(--brand-ink)}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--sans);font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.1;text-wrap:balance}
p{margin:0}
.wrap{width:min(1200px,100% - 2.5rem);margin-inline:auto}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.7rem 1.4rem;border-radius:12px;border:1px solid transparent;font-weight:600;font-size:1rem;text-decoration:none;transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--text);color:#050505}
.btn-primary:hover{background:#fff;transform:translateY(-2px)}
.btn-primary:disabled{background:#2a2724;color:#8b847a;cursor:not-allowed;transform:none}
.btn-line{border-color:var(--line-strong);background:transparent}
.btn-line:hover{border-color:var(--brand);color:var(--brand)}
.btn-brand{background:var(--brand);color:var(--brand-ink)}
.btn-brand:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-brand:disabled{background:#2a2724;color:#8b847a;cursor:not-allowed;transform:none;filter:none}
.btn-ink{background:var(--ink);color:var(--brand)}
.btn-ink:hover{transform:translateY(-2px)}
.btn-ghost-ink{border-color:color-mix(in oklab,var(--ink) 45%,transparent);color:var(--ink);background:transparent}
.btn-ghost-ink:hover{background:color-mix(in oklab,var(--ink) 10%,transparent)}
.btn-sm{min-height:40px;padding:.4rem 1rem;font-size:.9375rem}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:12px;background:transparent}
.icon-btn:hover{border-color:var(--brand)}
.icon-btn svg{width:20px;height:20px}

/* navegação */
.nav{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.nav-in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand-mark{display:flex;align-items:baseline;gap:.75rem;text-decoration:none;color:#fff}
.brand-mark b{font-family:var(--logo);font-weight:400;font-size:1.75rem;line-height:1;letter-spacing:.06em;color:#fff}
.brand-mark span{font-family:var(--logo);font-weight:300;font-size:.9rem;letter-spacing:.12em;text-transform:none;color:#fff;display:none}
.nav-links{display:none;gap:.4rem;list-style:none;margin:0;padding:0}
.tab{--c:#f6f1ea;--ci:#050505;display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1rem;border-radius:999px;border:1px solid transparent;text-decoration:none;color:var(--muted);font-size:.9375rem;font-weight:500;transition:background .25s,color .25s,border-color .25s}
.tab::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--c);flex:none}
.tab:hover{color:#fff;border-color:var(--line-strong)}
.tab[aria-current="page"]{background:var(--c);color:var(--ci);font-weight:600}
.tab[aria-current="page"]::before{background:var(--ci)}
.t-cookies{--c:var(--luxy);--ci:var(--luxy-ink)}
.t-brownies{--c:var(--blokko);--ci:var(--blokko-ink)}
.t-tungaros{--c:var(--tung);--ci:var(--tung-ink)}
.nav-right{display:flex;align-items:center;gap:.5rem}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.4rem 1rem;border:1px solid var(--line-strong);border-radius:12px;background:transparent;font-weight:600}
.cart-btn:hover{border-color:var(--brand)}
.cart-btn svg{width:22px;height:22px}
.cart-count{min-width:1.5rem;height:1.5rem;padding:0 .4rem;display:grid;place-items:center;border-radius:99px;background:var(--text);color:#050505;font-size:.8125rem;font-weight:700}
.cart-count[data-n="0"]{background:transparent;color:var(--muted);border:1px solid var(--line)}
.cart-count.bump{animation:bump .5s var(--ease)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
.menu-btn{display:grid}
.menu{border-top:1px solid var(--line);background:var(--bg)}
.menu ul{list-style:none;margin:0;padding:.75rem 1.25rem 1rem;display:grid;gap:.5rem}
.menu .tab{width:100%;padding:.9rem 1.1rem;font-family:var(--serif);font-size:1.5rem;border-radius:14px;border-color:var(--line)}
@media(min-width:900px){.brand-mark span{display:inline}}
@media(min-width:1100px){.nav-links{display:flex}.menu-btn,.menu{display:none!important}}

/* ======= HERO DE PRODUTO (página inteira numa só cor) ======= */
.pdp{background:var(--brand);color:var(--ink);position:relative;overflow:hidden}
.pdp-in{display:grid;gap:1rem;align-items:center;padding:clamp(1.5rem,4vw,3rem) 0 clamp(2rem,5vw,4rem);min-height:min(82vh,760px)}
.pdp-copy{position:relative;z-index:2;display:grid;gap:1.25rem;align-content:center}
.pdp-logo{width:clamp(150px,22vw,230px);height:auto}
.pdp-text{display:grid;gap:.9rem;min-height:12.5rem;align-content:start}
.pdp h1{font-size:clamp(2.2rem,6vw,4.5rem);line-height:1.02;color:var(--ink)}
.pdp .desc{max-width:34ch;font-size:1.125rem;line-height:1.55;color:color-mix(in oklab,var(--ink) 82%,transparent)}
.pdp .fprice{font-weight:700;font-size:1.0625rem}
.pdp-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.25rem}
.pdp-nav{display:flex;align-items:center;gap:.9rem;margin-top:.5rem}
.arrow{width:54px;height:54px;border-radius:50%;border:1.5px solid color-mix(in oklab,var(--ink) 55%,transparent);background:transparent;color:var(--ink);display:grid;place-items:center;transition:background .25s,color .25s,transform .25s var(--ease)}
.arrow:hover{background:var(--ink);color:var(--brand)}
.arrow:active{transform:scale(.94)}
.arrow svg{width:24px;height:24px}
.dots{display:flex;gap:.5rem;align-items:center;margin-left:.4rem}
.dots button{width:.7rem;height:.7rem;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:transparent;transition:width .3s var(--ease),background .3s}
.dots button[aria-current="true"]{width:1.9rem;border-radius:99px;background:var(--ink)}
.count{font-size:.875rem;font-weight:600;letter-spacing:.06em;margin-left:.3rem}
.pdp-media{position:relative;z-index:1;width:min(100%,560px);aspect-ratio:1/1;margin-inline:auto;display:grid;place-items:center;perspective:1200px}
.prod{position:absolute;left:4%;top:2%;width:92%;height:82%;object-fit:contain;filter:drop-shadow(0 28px 26px rgba(0,0,0,.28));will-change:transform,opacity;backface-visibility:hidden}
.view-tog{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem;padding:.25rem;border-radius:99px;background:color-mix(in oklab,var(--ink) 12%,transparent)}
.view-tog button{border:0;background:transparent;color:var(--ink);padding:.4rem .9rem;border-radius:99px;font-size:.875rem;font-weight:600}
.view-tog button[aria-pressed="true"]{background:var(--ink);color:var(--brand)}
@media(max-width:899px){.pdp-media{order:-1;width:min(76vw,330px)}.pdp-in{gap:1.25rem;padding-top:1.25rem}.pdp-text{min-height:0}}
@media(min-width:900px){
  .pdp-in{grid-template-columns:1.05fr .95fr;gap:2rem}
  .pdp-media{width:min(100%,620px);margin-right:-2%}
}

/* ======= ENCOMENDAR ======= */
.order{padding:clamp(3.5rem,8vw,6rem) 0}
.order-head{display:grid;gap:.75rem;margin-bottom:2.5rem}
.order-head h2{font-size:clamp(2rem,5.5vw,3.5rem);color:var(--brand)}
.order-head p{color:var(--muted);max-width:60ch}
.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg button{min-height:44px;padding:.45rem 1.1rem;border:1px solid var(--line-strong);border-radius:12px;background:transparent;font-weight:600;transition:background .2s,color .2s,border-color .2s}
.seg button:hover{border-color:var(--brand)}
.seg button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.blk{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.blk:first-of-type{margin-top:0;padding-top:0;border-top:0}
.blk-title{font-size:clamp(1.5rem,3.6vw,2.25rem);margin-bottom:.5rem}
.blk-note{color:var(--muted);max-width:60ch;margin-bottom:1.5rem}
.save{color:var(--brand);font-weight:600}
.builder-grid{display:grid;gap:1.5rem}
.box-col{position:sticky;top:var(--nav-h);z-index:5;background:var(--bg);padding:.9rem 0 1rem;border-bottom:1px solid var(--line)}
.box-status{margin-top:.75rem;display:flex;justify-content:space-between;gap:1rem;font-size:.9375rem;color:var(--muted)}
.box-status b{color:var(--text);font-weight:600}
.box-price{margin-top:.25rem;font-size:.875rem;color:var(--muted)}
/* caixa aberta: foto real da caixa (3D), com os doces por cima */
.trayx{position:relative;width:100%}
.trayx.photo{aspect-ratio:var(--ar);border-radius:14px;overflow:hidden;box-shadow:0 26px 40px rgba(0,0,0,.6)}
.trayimg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:14px;user-select:none;pointer-events:none}
.trayx.photo .slots{position:absolute;left:7%;right:7%;top:9%;bottom:15%;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:1%;align-items:center;justify-items:center}
.slotx{position:relative;height:100%;aspect-ratio:1/1;max-width:100%;border:0;background:transparent;padding:0;display:grid;place-items:center;border-radius:50%}
.slotx::before{content:"";position:absolute;inset:6%;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(70,90,140,.28);background:radial-gradient(closest-side,rgba(0,0,0,.05),transparent)}
.slotx.sq::before{border-radius:14px;inset:8% 4%}
.item{position:absolute;inset:-5%;width:110%;height:110%;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(0,0,0,.4));pointer-events:none}
.item.drop{animation:drop .75s cubic-bezier(.34,1.4,.5,1) both}
@keyframes drop{0%{transform:translateY(-230%) scale(.7) rotate(-18deg);opacity:0}22%{opacity:1}100%{transform:none;opacity:1}}
.lidimg{position:absolute;inset:0;z-index:5;width:100%;height:100%;object-fit:cover;border-radius:14px;transform:translateY(-108%) rotate(-1.5deg);transition:transform .8s var(--ease);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.lidbox{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:.6rem;background:var(--brand);color:var(--ink);border-radius:14px;transform:translateY(-108%);transition:transform .8s var(--ease);text-align:center}
.lidbox img{width:min(60%,260px)}
.lidbox span{font-weight:700;letter-spacing:.06em}
.trayx.closed .lidimg,.trayx.closed .lidbox{transform:none}
/* pack de Tungaros (grelha) */
.trayx.tung{aspect-ratio:auto;padding:5%;background:#F2DF9D;border-radius:14px;box-shadow:0 22px 44px rgba(0,0,0,.5);overflow:hidden}
.trayx.tung::before{content:"";position:absolute;inset:3%;border-radius:10px;background:linear-gradient(180deg,#f7e9b4,#ead28a);box-shadow:inset 0 8px 16px rgba(80,50,0,.18)}
.trayx.tung .slots{position:relative;z-index:2;display:grid;grid-template-columns:repeat(var(--cols-m,5),1fr);gap:2.5%;align-items:center}
.trayx.tung .slotx{height:auto;width:100%}
@media(min-width:900px){.trayx.tung .slots{grid-template-columns:repeat(var(--cols,5),1fr)}}
.trayx.tung .slotx::before{box-shadow:inset 0 0 0 1.5px rgba(90,60,0,.28)}
.pick-col{display:grid;gap:1.5rem;align-content:start}
.flavor-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.flavor-row{display:grid;grid-template-columns:72px 1fr auto;gap:1rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line)}
.thumb{width:72px;height:72px;border-radius:14px;background:var(--brand);display:grid;place-items:center;overflow:hidden}
.thumb img{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.fname{font-weight:500;line-height:1.3}
.fname small{display:block;color:var(--muted);font-size:.875rem;font-weight:400}
.stepper{display:inline-flex;align-items:center;gap:.25rem}
.stepper button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:12px;background:transparent;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.stepper button:hover:not(:disabled){border-color:var(--brand)}
.stepper button:active:not(:disabled){transform:scale(.94)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper svg{width:18px;height:18px}
.stepper output{min-width:2rem;text-align:center;font-weight:600;font-size:1.0625rem}
.add-row{display:grid;gap:.6rem}
.add-row .hint{color:var(--muted);font-size:.9375rem;min-height:1.5em}
.singles{max-width:760px}
@media(min-width:900px){
  .builder-grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
  .box-col{top:calc(var(--nav-h) + 24px);border:0;padding:0}
}

/* ======= INÍCIO ======= */
.hero{position:relative;overflow:hidden;padding:clamp(2.5rem,7vw,6rem) 0 clamp(3rem,8vw,7rem)}
.hero-grid{position:relative;z-index:1;display:grid;gap:2.5rem;align-items:center}
.wordmark{font-size:clamp(4.5rem,22vw,6rem);letter-spacing:-.02em;color:#fff}
.definition{margin-top:.75rem;font-size:1.0625rem;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.slogan{margin-top:2.25rem;font-family:var(--serif);font-weight:500;font-size:clamp(1.75rem,5vw,2.75rem);line-height:1.2;max-width:20ch;text-wrap:balance}
.hero-actions{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.75rem}
.chip-link{display:inline-flex;align-items:center;min-height:48px;padding:.6rem 1.25rem;border-radius:12px;font-weight:600;text-decoration:none;background:var(--c);color:var(--ci);transition:transform .25s var(--ease)}
.chip-link:hover{transform:translateY(-2px)}
.hero-photo{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#ece8e1}
.hero-photo img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:4rem}}
.floaters{position:absolute;inset:0;pointer-events:none;z-index:2}
.fl{position:absolute;left:var(--xm);top:var(--ym);width:var(--s);animation:floaty var(--dur) ease-in-out var(--d) infinite alternate;filter:blur(var(--b)) drop-shadow(0 14px 16px rgba(0,0,0,.6))}
.fl.hm{display:none}
@media(min-width:900px){.fl{left:var(--x);top:var(--y)}.fl.hm{display:block}}
@keyframes floaty{from{transform:translateY(-16px) rotate(calc(var(--rot) * -.6))}to{transform:translateY(16px) rotate(var(--rot))}}
/* painéis coloridos de produto */
.panels{display:grid}
.panel{background:var(--brand);color:var(--ink);position:relative;overflow:hidden}
.panel-in{display:grid;gap:1.5rem;align-items:center;padding:clamp(2.5rem,6vw,4.5rem) 0}
.panel .logo{width:clamp(140px,20vw,210px)}
.panel h2{font-size:clamp(2.5rem,7vw,4.5rem);color:var(--ink);margin-top:1rem}
.panel .sub{margin-top:.5rem;font-size:1.125rem;font-weight:500}
.panel .flav{margin-top:1rem;max-width:44ch;line-height:1.7;color:color-mix(in oklab,var(--ink) 85%,transparent)}
.panel .price{margin-top:.75rem;font-weight:700}
.panel .btn{margin-top:1.5rem}
.fan{position:relative;aspect-ratio:1.25/1;width:min(100%,520px);margin-inline:auto}
.fan img{position:absolute;width:52%;height:auto;filter:drop-shadow(0 20px 18px rgba(0,0,0,.3));transition:transform .6s var(--ease)}
.fan img:nth-child(1){left:0;top:16%;transform:rotate(-12deg)}
.fan img:nth-child(2){left:24%;top:0;transform:rotate(4deg);z-index:2}
.fan img:nth-child(3){right:0;top:20%;transform:rotate(14deg)}
.panel:hover .fan img:nth-child(1){transform:rotate(-18deg) translateX(-4%)}
.panel:hover .fan img:nth-child(2){transform:rotate(2deg) translateY(-4%)}
.panel:hover .fan img:nth-child(3){transform:rotate(20deg) translateX(4%)}
@media(min-width:900px){
  .panel-in{grid-template-columns:1fr 1fr;gap:4rem;min-height:440px}
  .panel:nth-child(even) .fan{order:-1}
}
/* secções de texto */
section.sec{padding:clamp(3.5rem,8vw,6.5rem) 0}
.sec-title{font-size:clamp(2rem,5.5vw,3.5rem)}
.about-grid{display:grid;gap:2rem}
.lead{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.2;max-width:26ch}
.body-col{max-width:64ch;color:var(--muted)}
.body-col p+p{margin-top:.9rem}
@media(min-width:900px){.about-grid{grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:start}}
.beat{display:grid;grid-template-columns:72px 1fr;gap:1.25rem;padding:1.75rem 0;border-top:1px solid var(--line)}
.beat img{width:72px;animation:floaty 7s ease-in-out infinite alternate;--rot:10deg;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.beat h3{font-size:clamp(1.6rem,3.6vw,2.2rem);margin-bottom:.6rem}
@media(min-width:800px){.beat{grid-template-columns:110px 1fr;gap:2.5rem}.beat img{width:110px}}
.info dl{margin:2rem 0 0;border-top:1px solid var(--line)}
.info .row{display:grid;gap:.4rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.info dt{font-family:var(--serif);font-size:1.75rem;line-height:1.1}
.info dd{margin:0;color:var(--muted);max-width:60ch}
@media(min-width:800px){.info .row{grid-template-columns:1fr 1.4fr;gap:3rem;align-items:baseline}}
.tvideo{margin-top:2rem;border-radius:var(--r);overflow:hidden;max-width:360px}
.tvideo video{width:100%;display:block}
.cta-band{text-align:center;border-top:1px solid var(--line)}
.cta-band .slogan{margin-inline:auto}
.cta-band .hero-actions{justify-content:center}

/* rodapé */
footer{border-top:1px solid var(--line);padding:clamp(3rem,7vw,5rem) 0 2.5rem}
.foot-slogan{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,6vw,3.75rem);line-height:1.1;max-width:22ch;text-wrap:balance}
.foot-grid{margin-top:3rem;display:grid;gap:2rem}
.foot-brand b{font-family:var(--logo);font-weight:400;font-size:2.25rem;line-height:1;letter-spacing:.06em;color:#fff;display:block}
.foot-brand span{font-family:var(--logo);font-weight:300;color:#fff;font-size:.95rem;letter-spacing:.12em;text-transform:none}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:#fff;text-decoration:underline}
.copy{margin-top:3rem;color:var(--muted);font-size:.875rem}
@media(min-width:800px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr}}

/* carrinho */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.66);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(460px,100%);display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line);transform:translateX(100%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s}
.drawer.open{transform:none;visibility:visible;transition:transform .45s var(--ease)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:1.5rem}
.drawer-body{flex:1;overflow:auto;padding:1.25rem}
.empty{display:grid;gap:1.25rem;justify-items:start;color:var(--muted);padding:1rem 0}
.empty p{font-family:var(--serif);font-size:1.75rem;color:var(--text);line-height:1.15}
.lines{list-style:none;margin:0;padding:0}
.line{padding:1rem 0;border-bottom:1px solid var(--line);display:grid;gap:.6rem}
.line h3{font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.35}
.line ul{margin:0;padding:0;list-style:none;color:var(--muted);font-size:.9375rem;line-height:1.5}
.line-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.line-price{font-weight:600}
.line .stepper button{width:36px;height:36px}
.line .stepper svg{width:16px;height:16px}
.link-btn{background:none;border:0;padding:.4rem 0;color:var(--muted);text-decoration:underline;text-underline-offset:.22em;font-size:.9375rem}
.link-btn:hover{color:#fff}
.form{display:grid;gap:1rem;margin-top:1.5rem}
.form label,.form legend{display:block;font-size:.875rem;color:var(--muted);margin-bottom:.35rem;padding:0}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.field{width:100%;min-height:48px;padding:.65rem .9rem;background:var(--bg);color:var(--text);border:1px solid var(--line-strong);border-radius:12px;font:inherit;accent-color:var(--text)}
.field::placeholder{color:#8b847a}
.field:focus{outline:2px solid var(--text);outline-offset:1px;border-color:transparent}
textarea.field{min-height:84px;resize:vertical}
.error{color:#ff9a8a;font-size:.9375rem;min-height:1.4em}
.drawer-foot{padding:1rem 1.25rem 1.25rem;border-top:1px solid var(--line);display:grid;gap:.75rem;background:var(--surface)}
.total{display:flex;justify-content:space-between;align-items:baseline}
.total span{color:var(--muted)}
.total b{font-family:var(--serif);font-weight:400;font-size:2.25rem;line-height:1}
.note{font-size:.8125rem;color:var(--muted);line-height:1.5}
.drawer .seg button[aria-pressed="true"]{background:var(--text);color:#050505;border-color:var(--text)}
.toast{position:fixed;left:50%;bottom:1.25rem;z-index:35;transform:translate(-50%,140%);display:flex;align-items:center;gap:1rem;padding:.65rem .75rem .65rem 1.1rem;background:var(--text);color:#050505;border-radius:12px;font-weight:600;visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s;width:max-content;max-width:calc(100% - 2rem)}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .5s var(--ease)}
.toast button{border:0;background:#050505;color:var(--text);border-radius:8px;padding:.5rem .9rem;font-weight:600}
.fx{position:fixed;left:0;top:0;z-index:60;pointer-events:none;will-change:transform}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .fl,.beat img{animation:none!important}
}

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

/* aviso das 24 h */
.notice{background:#f6f1ea;color:#050505;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.6rem 1rem;text-align:center;font-size:.9375rem;line-height:1.35}
.notice svg{width:20px;height:20px;flex:none}
.notice p{margin:0}
.lead-time{display:flex;align-items:flex-start;gap:.65rem;max-width:34rem;margin-top:1.5rem;padding:.75rem 1rem;border-radius:12px;background:#f6f1ea;color:#050505;font-size:.9375rem;line-height:1.4}
.lead-time svg{width:22px;height:22px;flex:none;margin-top:.05rem}
.pdp .lead-time{margin-top:0;background:var(--ink);color:var(--brand)}
.callout{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:2.5rem;padding:1.1rem 1.25rem;border:1.5px solid var(--brand);border-radius:14px;background:color-mix(in oklab,var(--brand) 12%,transparent)}
.callout svg{width:26px;height:26px;flex:none;color:var(--brand)}
.callout p{margin:0;font-size:1.0625rem;line-height:1.45}
/* slogan fixo */
.slogan-band{border-block:1px solid var(--line);padding:clamp(1.75rem,4vw,3rem) 1rem;text-align:center}
.slogan-band p{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,4.2vw,2.75rem);line-height:1.2;text-wrap:balance;max-width:26ch;margin-inline:auto}
/* animação 3D da caixa */
.boxfx{position:fixed;inset:0;z-index:70;pointer-events:none;perspective:1500px}
.boxfx-scrim{position:absolute;inset:0;background:rgba(0,0,0,.74)}
.boxfx-card{position:absolute;left:0;top:0;transform-style:preserve-3d;transform-origin:center;will-change:transform;filter:drop-shadow(0 40px 40px rgba(0,0,0,.6))}
.boxfx-card .trayx{margin:0}

.pickbtn{min-width:8.5rem}
.pickbtn[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.view-tog{width:max-content;max-width:calc(100% - .5rem)}

/* ===== pedidos do cliente (versão 6) ===== */
.t-about{--c:#f6f1ea;--ci:#050505}
.sub-note{color:var(--muted)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* ecrã inicial: título → cookies → brownies → tungaros, sempre em ecrã inteiro */
.intro{position:relative;height:calc(100vh - var(--top-h,100px) + 5vh);height:calc(100lvh - var(--top-h,100px) + 5vh);min-height:460px;background:#000;overflow:hidden}
.intro-layer{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;display:grid;place-items:center}
.intro-layer.on{opacity:1}
.intro-layer>img{width:100%;height:100%;object-fit:cover}
.ph-v{display:none}
@media(orientation:portrait){.ph-h{display:none}.ph-v{display:block}}
.intro-title{text-align:center;padding:0 1.5rem}
.intro-logo{width:min(78vw,760px);height:auto}
.intro-fb .wordmark{font-family:var(--logo);font-weight:300;font-size:clamp(3.5rem,13vw,7rem);line-height:1;color:#fff;letter-spacing:.04em}
.intro-fb .definition{margin-top:1.1rem;font-family:var(--logo);font-weight:300;font-size:clamp(1rem,2.4vw,1.5rem);letter-spacing:.14em;text-transform:none;color:#fff}
.strip{background:#f6f1ea;color:#050505;padding:1.1rem 1rem;text-align:center;display:grid;place-items:center}
.strip-img{height:40px;width:auto}
.strip-text{font-family:var(--serif);font-weight:500;font-size:clamp(1.1rem,3vw,1.75rem);line-height:1.2}
.choose{padding:clamp(3rem,7vw,5rem) 0;text-align:center}
.choose .lead-time{margin:0 auto;text-align:left;max-width:38rem}
.rects{display:grid;gap:.9rem;justify-items:center;margin-top:2rem}
.rects .chip-link{width:min(100%,420px);min-height:64px;justify-content:center;font-size:1.125rem}
.gallery{padding:0 0 clamp(3rem,7vw,5rem)}
.gal-wrap{position:relative}
.gal-track{list-style:none;margin:0;padding:.25rem max(1.25rem,calc((100% - 1200px)/2)) 1rem;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.gal-item{flex:0 0 min(78vw,480px);scroll-snap-align:center;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#111}
.gal-item img{width:100%;height:100%;object-fit:cover}
.gal-btn{--ink:#f6f1ea;--brand:#050505;position:absolute;top:50%;transform:translateY(-50%);background:rgba(5,5,5,.72);display:none}
.gal-btn.prev{left:1rem}.gal-btn.next{right:1rem}
@media(min-width:900px){.gal-btn{display:grid}}
/* produtos: 1.º ecrã só com o logótipo, depois o resto */
.panel-cover{min-height:calc(100vh - var(--top-h,100px) + 5vh);min-height:calc(100lvh - var(--top-h,100px) + 5vh);display:grid;place-content:center;justify-items:center;gap:1.25rem;text-align:center;padding:2rem 1.25rem}
.cover-logo{width:min(72vw,520px);height:auto}
.cover-sub{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,3.4vw,2rem);line-height:1.2}
.panel-in{min-height:0;padding-top:clamp(2rem,5vw,4rem)}
.panel h2.sr{position:absolute}
.fan.f5{aspect-ratio:1.05/1}
.fan.f5 img{width:43%}
.fan.f5 img:nth-child(1){left:0;top:6%;transform:rotate(-12deg)}
.fan.f5 img:nth-child(2){left:28%;top:0;transform:rotate(3deg);z-index:1}
.fan.f5 img:nth-child(3){right:0;top:8%;transform:rotate(13deg)}
.fan.f5 img:nth-child(4){left:9%;top:40%;transform:rotate(-6deg);z-index:3;width:46%}
.fan.f5 img:nth-child(5){right:9%;top:42%;transform:rotate(7deg);z-index:3;width:46%}
.panel:hover .fan.f5 img:nth-child(4){transform:rotate(-10deg) translateY(-3%)}
.panel:hover .fan.f5 img:nth-child(5){transform:rotate(11deg) translateY(-3%)}
/* quem somos + opiniões */
.narrow{width:min(760px,100% - 2.5rem);margin-inline:auto}
.page-title{font-size:clamp(1.9rem,5vw,3rem);margin:3.5rem 0 1.25rem}
.about-page .page-title:first-child{margin-top:0}
.about-page .lead{margin-bottom:1.5rem;max-width:none;font-family:var(--sans);font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.4;font-weight:500}
.stars-row{display:inline-flex;gap:.15rem;vertical-align:middle}
.stars-row svg{fill:none;stroke:#8b847a;stroke-width:1.4;stroke-linejoin:round}
.stars-row svg.on{fill:#f2df9d;stroke:#f2df9d}
.avg{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1.5rem;color:var(--muted)}
.avg b{color:var(--text);font-size:1.25rem}
.reviews{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.review{padding:1.1rem 1.25rem;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.review p{margin:.5rem 0;color:var(--text)}
.review small{color:var(--muted)}
.fb-form{display:grid;gap:1.1rem;max-width:560px}
.fb-form fieldset{border:0;margin:0;padding:0}
.fb-form legend,.fb-form label{display:block;font-size:.875rem;color:var(--muted);margin-bottom:.4rem;padding:0}
.star-input{display:flex;align-items:center;gap:.15rem}
.star-input button{border:0;background:transparent;padding:.2rem;line-height:0}
.star-input svg{fill:none;stroke:#8b847a;stroke-width:1.4;stroke-linejoin:round;transition:transform .2s var(--ease),fill .2s,stroke .2s}
.star-input button.on svg{fill:#f2df9d;stroke:#f2df9d}
.star-input button:hover svg{transform:scale(1.12)}
.star-input span{margin-left:.75rem;color:var(--muted);font-weight:600}
.ok{color:#9fe3a8;min-height:1.4em}


/* brownies: 4 (3 atrás + o Natura à frente) */
.fan.f4{aspect-ratio:1.15/1}
.fan.f4 img{width:44%}
.fan.f4 img:nth-child(1){left:0;top:6%;transform:rotate(-10deg)}
.fan.f4 img:nth-child(2){left:28%;top:0;transform:rotate(3deg);z-index:1}
.fan.f4 img:nth-child(3){right:0;top:8%;transform:rotate(11deg)}
.fan.f4 img:nth-child(4){left:26%;top:42%;transform:rotate(-3deg);z-index:3;width:48%}
/* tungaros: monte de bolachas a sair da base */
.panel-in.pile{align-items:end;padding-bottom:0}
.fan.f1{aspect-ratio:auto;width:100%;max-width:760px;align-self:end}
.fan.f1 img{position:static;width:100%;height:auto;transform:none;display:block;filter:drop-shadow(0 -6px 18px rgba(0,0,0,.18))}
.panel:hover .fan.f1 img{transform:none}
.rev-link{margin-top:2.5rem;text-align:center}

.panel-in{position:relative}
.panel-in>div,.panel-in>.fan{position:relative;z-index:1}

.view-tog button{white-space:nowrap;padding:.4rem .8rem}

/* Tungaros na página inicial: um só monte, grande, a encher a base */
.panel-in.pile{grid-template-columns:1fr;min-height:0;padding-bottom:1.5rem}
.pile-band{display:block;position:relative;z-index:1;width:135vw;max-width:none;height:auto;margin:0 0 0 -17.5vw;filter:drop-shadow(0 -6px 16px rgba(0,0,0,.14))}
@media(min-width:900px){.pile-band{width:min(1100px,92%);margin:0 auto}}

/* ===== pedidos do cliente (versão 7) ===== */
/* faixa branca do slogan: mais grossa, 2 parágrafos, com preto antes e depois (≥ 2 faixas) */
.strip-block{--sh:clamp(10.5rem,22vw,16rem);padding:calc(var(--sh) * 2) 0}
.strip{min-height:var(--sh);padding:1.25rem;display:grid;place-content:center;justify-items:center;gap:.35rem}
.strip-text{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,5.2vw,3.25rem);line-height:1.15;text-align:center;margin:0}
.strip-img{height:clamp(70px,14vw,130px);width:auto}
/* logo sozinho no 1.º ecrã; nome + subtítulo passam para o início do texto */
.p-name{font-family:var(--sans);font-weight:700;font-size:clamp(2.1rem,6vw,3.5rem);line-height:1.05;letter-spacing:-.01em;color:var(--ink);margin:0}
.p-sub{margin:.45rem 0 1.25rem;font-weight:700;font-size:1.125rem;color:color-mix(in oklab,var(--ink) 85%,transparent)}
.panel .flav{margin-top:0}
/* cookies: as duas da frente puxadas para o meio, sem azul a aparecer entre elas */
.fan.f5{aspect-ratio:1.05/1}
.fan.f5 img:nth-child(1){left:2%;top:6%;width:44%}
.fan.f5 img:nth-child(3){right:2%;top:8%;width:44%}
.fan.f5 img:nth-child(4){left:13%;top:35%;width:52%}
.fan.f5 img:nth-child(5){right:13%;top:37%;width:52%}
/* brownies: Natura atrás (ao meio), Red Velvet à frente, tudo junto sem rosa no meio */
.fan.f4{aspect-ratio:1.05/1}
.fan.f4 img:nth-child(1){left:0;top:16%;width:48%;transform:rotate(-8deg);z-index:1}
.fan.f4 img:nth-child(2){left:26%;top:0;width:48%;transform:rotate(0deg);z-index:0}
.fan.f4 img:nth-child(3){right:0;top:16%;width:48%;transform:rotate(9deg);z-index:1}
.fan.f4 img:nth-child(4){left:20%;top:34%;width:60%;transform:rotate(-2deg);z-index:3}
/* rodapé: ecrã todo preto só com o slogan, no meio */
footer{padding-top:0}
.slogan-screen{min-height:100vh;min-height:100lvh;display:grid;place-content:center;justify-items:center;gap:.4rem;text-align:center;padding:2rem 1.25rem;border-bottom:1px solid var(--line)}
.slogan-screen p{font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,8.6vw,6rem);line-height:1.12;color:#fff;margin:0;text-wrap:balance}
.foot-grid{margin-top:3rem}

/* vídeo do dono na página Quem somos */
.story-video{margin:0 0 2.25rem;max-width:420px}
.story-video video{display:block;width:100%;max-height:78vh;border-radius:var(--r);background:#000}
.story-video figcaption{margin-top:.6rem;color:var(--muted);font-size:.9375rem}

/* agenda (calendário) do carrinho */
.cal{border:1px solid var(--line);border-radius:16px;padding:.9rem;background:var(--bg)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}
.cal-title{font-family:var(--sans);font-weight:600;font-size:1.0625rem}
.cal-nav{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:12px;background:transparent}
.cal-nav svg{width:18px;height:18px}
.cal-nav:hover:not(:disabled){border-color:#fff}
.cal-nav:disabled{opacity:.25;cursor:not-allowed}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.cal-dow{font-size:.75rem;font-weight:600;color:var(--muted);text-align:center;padding-bottom:.2rem}
.cal-day{position:relative;aspect-ratio:1/1;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:12px;background:transparent;font-weight:600;font-size:1rem;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.cal-day:hover{border-color:#fff}
.cal-day:active{transform:scale(.94)}
.cal-day[aria-pressed="true"]{background:#f6f1ea;color:#050505;border-color:#f6f1ea}
.cal-day.first:not([aria-pressed="true"])::after{content:"";position:absolute;bottom:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#f2df9d}
.cal-sel{margin-top:.8rem;font-size:.9375rem;color:var(--muted)}
.cal-sel b{color:var(--text)}