/* Casa do Noel · estilos da loja (página inicial, produto e finalização) */
:root{
  --bg:#FFFFFF; --ink:#1C1B19; --muted:#6A655E; --line:#E6E1D9; --soft:#F6F3EE; --cream:#FBF8F3;
  --green:#1F5A3F; --green-d:#163F2C; --green-soft:#E8F3EC; --red:#B81F28; --red-soft:#FBEFEA; --gold:#C98A2E; --gold-l:#F2C95C;
  --head:#211F1D; --wa:#1FAF55;
  --f-d:"Kanit", "Arial Black", system-ui, sans-serif; --f-b:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --r:10px;
}
*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important; animation:none !important} }
body{background:var(--bg); color:var(--ink); font-family:var(--f-b); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
img,video{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; cursor:pointer; color:inherit}
[hidden]{display:none !important}
.wrap{max-width:1200px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}
.hint{font-size:12.5px; color:var(--muted)}
.ico{width:20px; height:20px; flex:none}
:focus-visible{outline:2px solid var(--green); outline-offset:2px}

/* ---------- topo ---------- */
.ann{background:var(--gold); color:#2B1D05; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; text-align:center}
.ann .wrap{padding-block:7px}
.topo{background:var(--head); color:#F5EFE6; position:sticky; top:0; z-index:40}
.topo .barra{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; padding-block:12px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:#F5EFE6}
.logo svg{width:30px; height:30px; flex:none}
.logo b{display:block; font:italic 800 22px/1 var(--f-d); text-transform:uppercase; letter-spacing:-.01em}
.logo small{display:block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#BDB4A8; margin-top:3px}
.busca{position:relative; max-width:520px; width:100%; justify-self:center}
.busca input{width:100%; border:0; border-radius:999px; padding:11px 44px 11px 18px; font:inherit; font-size:15px; background:#fff; color:var(--ink)}
.busca button{position:absolute; right:4px; top:4px; bottom:4px; width:38px; border:0; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center}
.busca button svg{width:18px; height:18px}
.topo-acoes{display:flex; align-items:center; gap:8px}
.carrinho-btn{position:relative; display:flex; align-items:center; gap:8px; border:1.5px solid rgba(255,255,255,.22); background:none; color:#F5EFE6; border-radius:999px; padding:8px 14px; font-weight:700; font-size:14px}
.carrinho-btn svg{width:22px; height:22px}
.carrinho-btn i{min-width:21px; height:21px; border-radius:999px; background:var(--red); color:#fff; font:800 11.5px/21px var(--f-b); font-style:normal; text-align:center; padding:0 5px}
.carrinho-btn.pulse{animation:pulse .5s}
@keyframes pulse{50%{transform:scale(1.08)}}
.cats{border-top:1px solid rgba(255,255,255,.1)}
.cats .wrap{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-block:6px}
.cats .wrap::-webkit-scrollbar{display:none}
.cats a{flex:none; color:#DCD3C7; text-decoration:none; font-weight:700; font-size:14px; padding:7px 12px; border-radius:8px}
.cats a:hover,.cats a.on{background:rgba(255,255,255,.1); color:#fff}
@media (max-width:760px){
  .topo{position:static}
  .ann{font-size:11px; letter-spacing:.04em}
  .topo .barra{grid-template-columns:minmax(0,1fr) auto; gap:10px; padding-block:10px}
  .busca{grid-column:1/-1; grid-row:2; max-width:none}
  .busca input{padding-block:10px}
  .carrinho-btn span{display:none}
  .logo b{font-size:19px}
}

/* ---------- botões ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:var(--r); padding:14px 20px; font-weight:800; font-size:16px; text-decoration:none; text-align:center; min-height:48px}
.btn.pix{background:var(--green); color:#fff}
.btn.pix:hover{background:var(--green-d)}
.btn.claro{background:#fff; color:var(--green); border:2px solid var(--green)}
.btn.card{background:#fff; color:var(--ink); border:2px solid var(--ink)}
.btn.escuro{background:var(--ink); color:#fff}
.btn.wa{background:var(--wa); color:#fff}
.btn span{display:grid; text-align:center} .btn small{font-weight:600; font-size:13px; opacity:.88}
.btn:disabled{opacity:.6; cursor:not-allowed}

/* ---------- seções da página inicial ---------- */
.sec{padding-block:48px}
.sec.soft{background:var(--cream)}
.sec-t{font:italic 800 clamp(24px,3.2vw,34px)/1.05 var(--f-d); text-transform:uppercase; letter-spacing:-.01em; text-wrap:balance}
.sec-t span{color:var(--red)}
.sec-s{color:var(--muted); margin-top:8px; max-width:62ch}
.sec-top{display:flex; justify-content:space-between; align-items:end; gap:12px; flex-wrap:wrap}
.sec-top a{font-weight:800; color:var(--green); text-decoration:none; white-space:nowrap}

.hero{background:linear-gradient(180deg,#15120F 0%,#211F1D 100%); color:#F5EFE6; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:center; padding-block:44px}
.hero h1{font:italic 900 clamp(34px,5vw,58px)/.95 var(--f-d); text-transform:uppercase; letter-spacing:-.015em; text-wrap:balance}
.hero h1 span{color:var(--gold-l)}
.hero p{color:#D6CDC1; font-size:17px; max-width:48ch; margin-top:16px}
.hero .acoes{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.hero .btn.claro{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.hero-natal{display:inline-flex; align-items:center; gap:8px; margin-top:20px; background:rgba(242,201,92,.14); color:var(--gold-l); border-radius:999px; padding:7px 14px; font-weight:700; font-size:14px}
.hero-media{position:relative; justify-self:center; width:min(340px,100%); aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:#000 center/cover no-repeat; box-shadow:0 24px 60px rgba(0,0,0,.45)}
.hero-media video{width:100%; height:100%; object-fit:cover}
.hero-media .selo{position:absolute; left:12px; bottom:12px; background:rgba(28,27,25,.8); color:#fff; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr; gap:26px; padding-block:30px 34px}
  .hero-media{width:min(260px,72%)}
}

.beneficios{border-bottom:1px solid var(--line)}
.beneficios .wrap{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding-block:18px}
.beneficio{display:flex; gap:12px; align-items:center}
.beneficio .ico{width:34px; height:34px; color:var(--green)}
.beneficio b{display:block; font-size:14.5px; line-height:1.25} .beneficio span{display:block; font-size:12.5px; color:var(--muted)}
@media (max-width:860px){ .beneficios .wrap{grid-template-columns:1fr 1fr} }

.cat-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:22px}
.cat-card{position:relative; display:block; aspect-ratio:4/3; border-radius:14px; overflow:hidden; text-decoration:none; color:#fff; background:var(--soft) center/cover no-repeat}
.cat-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72))}
.cat-card div{position:absolute; left:14px; right:14px; bottom:12px; z-index:1}
.cat-card b{display:block; font:italic 800 22px/1 var(--f-d); text-transform:uppercase}
.cat-card span{font-size:13px; opacity:.9}
@media (max-width:860px){ .cat-grid{grid-template-columns:1fr 1fr; gap:12px} .cat-card b{font-size:18px} }

/* ---------- vitrine de produtos ---------- */
.grade{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:22px}
@media (max-width:1024px){ .grade{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .grade{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} }
.pcard{display:grid; grid-template-rows:auto 1fr; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:box-shadow .2s, transform .2s}
.pcard:hover{box-shadow:0 10px 28px rgba(0,0,0,.08); transform:translateY(-2px)}
.pcard .foto{position:relative; display:block; aspect-ratio:4/5; background:var(--soft) center/cover no-repeat}
.pcard .topo-card{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.pcard .tag{background:var(--red); color:#fff; font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:999px; line-height:1.5}
.pcard .tag.v{background:var(--soft); color:var(--ink); border:1px solid var(--line)}
.pcard .esg{position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.68); font-weight:800}
.pcard .corpo{display:grid; gap:6px; padding:12px 14px 14px; align-content:start}
.pcard .cat{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-right:auto}
.pcard h3{font-size:15px; line-height:1.3}
.pcard h3 a{text-decoration:none}
.pcard .de{font-size:12.5px; color:var(--muted)} .pcard .de s{text-decoration-color:var(--red)}
.pcard .preco{font-size:21px; font-weight:800; color:var(--green); line-height:1.1}
.pcard .preco small{font-size:12px; font-weight:700; color:var(--green); margin-left:4px}
.pcard .parc{font-size:12.5px; color:var(--muted)}
.pcard .apartir{font-size:12px; color:var(--muted); margin-bottom:-6px}
.pcard .btn .so-pc{display:inline}
.pcard .btn{margin-top:6px; padding:10px 12px; font-size:14px; min-height:42px}
@media (max-width:760px){ .pcard .btn .so-pc{display:none} .pcard .corpo{padding:10px 10px 12px} .pcard h3{font-size:14px} .pcard .preco{font-size:18px} .pcard .btn{font-size:13px; padding:9px 8px} }
.filtros{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.filtros button{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:8px 14px; font-weight:700; font-size:14px}
.filtros button.on{background:var(--ink); border-color:var(--ink); color:#fff}
.vazio{grid-column:1/-1; background:var(--soft); border-radius:14px; padding:28px; text-align:center; color:var(--muted)}

/* avaliações */
.revs{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; margin-top:22px; scrollbar-width:thin}
.rev{scroll-snap-align:start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; display:grid; gap:8px; align-content:start}
.rev .rs{color:#E8A92B; letter-spacing:2px}
.rev blockquote{font-size:15px}
.rev figcaption{font-size:13px; color:var(--muted); font-weight:700}
.nota{display:flex; align-items:center; gap:12px}
.nota b{font:italic 900 44px/1 var(--f-d)} .nota .rs{color:#E8A92B; font-size:20px; letter-spacing:2px} .nota small{display:block; color:var(--muted); font-size:13px}

/* confiança */
.confianca{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:22px}
.confianca div{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; display:grid; gap:6px; align-content:start}
.confianca .ico{width:30px; height:30px; color:var(--green)}
.confianca b{font-size:15.5px} .confianca p{font-size:13.5px; color:var(--muted)}
@media (max-width:860px){ .confianca{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .confianca{grid-template-columns:1fr} }

/* dúvidas */
.faq{display:grid; gap:10px; margin-top:20px; max-width:820px}
.faq details{border:1px solid var(--line); border-radius:12px; background:#fff; padding:0 18px}
.faq summary{cursor:pointer; font-weight:800; padding:16px 0; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::after{content:"+"; font-size:20px; line-height:1; color:var(--green)}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:16px; color:var(--muted)}

/* ---------- rodapé ---------- */
.rodape{background:#16130F; color:#CFC7BC; font-size:13.5px; margin-top:0}
.rodape .wrap{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px; padding-block:36px 28px}
.rodape h4{color:#F5EFE6; font-size:14px; margin-bottom:10px}
.rodape a{color:#F5EFE6}
.rodape ul{list-style:none; padding:0; display:grid; gap:6px}
.rodape .emp b{color:#F5EFE6; display:block}
.rodape .pays{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.rodape .pays span{background:#fff; color:#222; border-radius:4px; padding:3px 8px; font-size:11px; font-weight:800}
.rodape .copy{grid-column:1/-1; border-top:1px solid rgba(255,255,255,.1); padding-top:14px; color:#9C948A; font-size:12px}
@media (max-width:760px){ .rodape .wrap{grid-template-columns:1fr; gap:20px} body.tem-barra .rodape{padding-bottom:76px} }

/* ---------- página de produto ---------- */
.trilha{font-size:13px; color:var(--muted); padding-block:14px}
.trilha a{color:var(--muted); text-decoration:none} .trilha a:hover{text-decoration:underline}
.prod{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:36px; align-items:start; padding-bottom:30px}
.gal{display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 120px)}
.thumbs{display:grid; gap:8px; align-content:start}
.thumbs button{position:relative; padding:0; border:2px solid var(--line); border-radius:8px; overflow:hidden; background:var(--soft); aspect-ratio:4/5}
.thumbs button.on{border-color:var(--green)}
.thumbs img{width:100%; height:100%; object-fit:cover}
.thumbs i{position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.28); color:#fff} .thumbs i svg{width:22px; height:22px}
.main{position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; background:var(--soft)}
.main > img{width:100%; height:100%; object-fit:cover}
.vbox{position:relative; width:100%; height:100%; background:#1c1b19 center/cover no-repeat; overflow:hidden}
.vbox::before{content:""; position:absolute; inset:-30px; background:inherit; filter:blur(24px) brightness(.75)}
.vbox video{position:relative; width:100%; height:100%; object-fit:contain}
.arrow{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.15); z-index:2}
.arrow.l{left:12px} .arrow.r{right:12px}
.dots{position:absolute; bottom:12px; left:0; right:0; display:none; justify-content:center; gap:6px; z-index:2}
.dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.6)} .dots i.on{background:#fff}
.gal-note{grid-column:2; margin-top:-4px}
@media (max-width:900px){
  .prod{grid-template-columns:1fr; gap:18px}
  .gal{position:static; grid-template-columns:1fr; margin-inline:calc(-1 * max(16px, env(safe-area-inset-left,0px)))}
  .main{border-radius:0}
  .arrow{display:none} .dots{display:flex}
  .thumbs{order:2; display:flex; overflow-x:auto; padding-inline:16px; scrollbar-width:none}
  .thumbs button{flex:0 0 58px}
  .gal-note{grid-column:auto; padding-inline:16px}
}
.info{display:grid; gap:14px; align-content:start}
.info h1{font-size:clamp(21px,2.4vw,27px); line-height:1.2; text-wrap:balance}
.info .cat-link{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--green); text-decoration:none}
.estrelas{display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--muted); text-decoration:none}
.estrelas i{color:#E8A92B; font-style:normal; letter-spacing:1px}
.pbox{border:1px solid var(--line); border-radius:14px; padding:16px 18px; display:grid; gap:4px}
.pbox .de{color:var(--muted); font-size:14px} .pbox .de s{text-decoration-color:var(--red)}
.pbox .pct{background:var(--red); color:#fff; border-radius:6px; padding:1px 7px; margin-left:8px; font-size:12.5px; font-weight:800}
.pbox .now{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pbox .now b{font-size:clamp(30px,4vw,40px); color:var(--green); line-height:1.05}
.pbox .now em{font-style:normal; background:var(--green); color:#fff; border-radius:6px; padding:4px 9px; font-size:13px; font-weight:800}
.pbox .save{color:var(--green); font-weight:700; font-size:14px}
.card-line{border-top:1px dashed var(--line); margin-top:8px; padding-top:10px; font-size:15px}
.card-line b{font-size:18px} .card-line small{display:block; color:var(--muted); font-size:12.5px}
.opt-t{font-size:14px} .opt-t b{font-weight:800}
.opts{display:flex; flex-wrap:wrap; gap:10px}
.opt{border:1.5px solid var(--line); border-radius:var(--r); background:#fff; padding:10px 14px; text-align:left; display:grid; gap:1px; min-width:120px}
.opt b{font-size:15px} .opt s{font-size:12px; color:var(--muted)} .opt span{font-weight:800; color:var(--green); font-size:14px}
.opt.on{border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); background:var(--green-soft)}
.opt.sem{opacity:.5}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1.5px solid var(--line); border-radius:999px; background:#fff; padding:8px 14px; font-weight:700; font-size:14px}
.chip.on{border-color:var(--green); background:var(--green-soft); color:var(--green)}
.linha-qtd{display:flex; align-items:center; gap:12px}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); background:#fff}
.qty button{width:44px; height:46px; border:0; background:none; font-size:20px; font-weight:700}
.qty output{min-width:30px; text-align:center; font-weight:800}
.qty.sm button{width:36px; height:36px; font-size:18px} .qty.sm output{min-width:24px; font-size:14px}
.compra{display:grid; gap:10px}
.natal{display:flex; align-items:center; gap:10px; background:var(--red-soft); color:#8E1B22; border:1px solid #F1D3CC; border-radius:var(--r); padding:11px 14px; font-size:14px}
.strip{display:flex; align-items:flex-start; gap:10px; border-radius:var(--r); padding:11px 14px; font-size:14px}
.strip.ok{background:var(--green-soft); color:var(--green); font-weight:700}
.strip.frete{background:var(--soft)}
.prazos{display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; font-size:13.5px}
.prazos > div{display:grid; gap:2px} .prazos b{font-weight:800}
.cep-calc{display:grid; gap:8px; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px}
.cep-calc label{font-size:14px; font-weight:800}
.cep-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px}
.cep-row .btn{padding:10px 18px; font-size:15px; min-height:0}
.cep-res{margin:0; font-size:13.5px; color:var(--muted); display:grid; gap:2px} .cep-res.ok{color:var(--ink)} .cep-res b{color:var(--green)}
.cep-calc > a.hint{justify-self:start; text-decoration:underline}
.empresa{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--muted)}
.empresa b{color:var(--ink)} .empresa .ico{color:var(--green)}
.pay-seg{display:grid; gap:8px; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; font-size:12.5px; color:var(--muted); background:#fff}
.pay-seg .marcas{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; color:var(--ink); font-weight:700}
.pay-seg .marca{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:8px; padding:5px 10px; background:var(--soft); font-weight:800; font-size:13px; color:var(--ink)}
.pay-seg .marca svg{width:16px; height:16px}
.pay-seg ul{list-style:none; padding:0; display:grid; gap:4px}
.pay-seg li{display:flex; gap:8px; align-items:flex-start} .pay-seg li .ico{width:16px; height:16px; color:var(--green); margin-top:1px}
.descr{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:36px; align-items:start}
.texto{display:grid; gap:12px; color:#3B3833; max-width:68ch}
.texto ul{padding-left:20px; display:grid; gap:4px}
.specs table{width:100%; border-collapse:collapse; font-size:14px}
.specs td{padding:10px 0; border-bottom:1px solid var(--line); vertical-align:top}
.specs td:first-child{color:var(--muted); width:44%; padding-right:12px}
@media (max-width:860px){ .descr{grid-template-columns:1fr} }
.h3{font-size:18px; margin-bottom:12px}

/* barra fixa de compra (celular) */
.barra-compra{display:none}
@media (max-width:900px){
  .barra-compra{display:flex; gap:10px; align-items:center; position:fixed; left:0; right:0; bottom:0; z-index:24; background:#fff; border-top:1px solid var(--line);
    padding:10px max(16px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
  .barra-compra .pr{line-height:1.1; font-weight:800; font-size:19px; color:var(--green)}
  .barra-compra .pr small{display:block; font-size:11px; color:var(--muted); font-weight:600}
  .barra-compra .btn{flex:1; padding:12px 10px; font-size:15px}
}

/* WhatsApp flutuante */
.wa-float{position:fixed; right:calc(18px + env(safe-area-inset-right,0px)); bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:30; width:54px; height:54px; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.22); transition:transform .15s}
.wa-float svg{width:28px; height:28px} .wa-float:hover{transform:scale(1.06)}
body.com-modal .wa-float{display:none}
@media (max-width:900px){ body.tem-barra .wa-float{bottom:calc(86px + env(safe-area-inset-bottom,0px))} .wa-float{width:50px; height:50px; right:calc(14px + env(safe-area-inset-right,0px))} }

/* aviso */
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:#fff; padding:12px 16px; border-radius:12px; font-weight:700; font-size:14px; z-index:70; max-width:calc(100% - 32px); display:flex; gap:12px; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast a,.toast button{color:var(--gold-l); background:none; border:0; font-weight:800; text-decoration:underline; padding:0; white-space:nowrap}
@media (max-width:900px){ body.tem-barra .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))} }

/* ---------- carrinho e finalização ---------- */
.modal{position:fixed; inset:0; z-index:60; background:rgba(12,10,8,.6); display:grid; place-items:center; overflow:auto; padding:20px}
.mbox{background:#fff; border-radius:16px; width:min(580px,100%); padding:22px; display:grid; gap:16px; position:relative}
.mbox h2{font-size:21px; padding-right:40px}
.x{position:absolute; right:12px; top:12px; width:40px; height:40px; border-radius:50%; border:0; background:var(--soft); font-size:22px; line-height:1; z-index:2}
@media (max-width:640px){
  body .modal{padding:0; display:block; background:#fff}
  body .mbox{width:100%; min-height:100vh; min-height:100dvh; border-radius:0; padding:18px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); align-content:start}
  body .x{top:calc(12px + env(safe-area-inset-top,0px)); right:calc(12px + env(safe-area-inset-right,0px))}
}
.clines{display:grid; gap:10px}
.cline{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:4px 12px; align-items:center; background:var(--soft); border-radius:12px; padding:10px}
.cline .th{width:56px; height:56px; border-radius:8px; overflow:hidden; background:#fff center/cover no-repeat; grid-row:span 2}
.cline b{font-size:14px; line-height:1.25} .cline small{display:block; font-size:12px; color:var(--muted)}
.cline .sub{font-weight:800; text-align:right; white-space:nowrap}
.cline .cq{display:flex; align-items:center; gap:8px; grid-column:2/-1; justify-content:space-between}
.cq .rm{background:none; border:0; color:var(--muted); font-size:12.5px; font-weight:700; text-decoration:underline; padding:6px 0}
.c-empty{background:var(--soft); border-radius:12px; padding:18px; text-align:center; color:var(--muted); font-size:14px; display:grid; gap:10px; justify-items:center}
.upsell{display:grid; gap:8px} .upsell > b{font-size:13.5px}
.ups{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(160px,1fr); gap:10px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory}
.ups > div{display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 10px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:8px; scroll-snap-align:start}
.ups .th{width:44px; height:44px; border-radius:8px; background:var(--soft) center/cover no-repeat; grid-row:span 2}
.ups span{font-size:12.5px; font-weight:700; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ups button{justify-self:start; border:0; background:none; color:var(--green); font-weight:800; font-size:12.5px; padding:2px 0}
.payopts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.payopt{border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; text-align:left; background:#fff; display:grid; gap:2px}
.payopt b{font-size:15px} .payopt span{font-size:13px; font-weight:700; color:var(--green)} .payopt small{font-size:12px; color:var(--muted)}
.payopt.on{border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); background:var(--green-soft)}
@media (max-width:380px){ .payopts{grid-template-columns:1fr} }
.g2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.g3{display:grid; grid-template-columns:2fr 1fr; gap:12px}
.s2{grid-column:span 2}
@media (max-width:480px){ .g2,.g3{grid-template-columns:1fr} .s2{grid-column:auto} }
.fld{display:grid; gap:6px}
.fld label{font-size:13px; font-weight:700}
.in{border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; width:100%; min-width:0; background:#fff; font:inherit; font-size:16px}
.in:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.07)}
.fld.bad .in{border-color:var(--red)}
.fld.auto .in{background:var(--green-soft); transition:background .6s}
.err{font-size:12px; color:var(--red); font-weight:700}
.cep-info{margin:-4px 0 0; font-size:13px; color:var(--muted)} .cep-info.ok{color:var(--green); font-weight:700}
.tot{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:12px; font-size:16px}
.tot b{font-size:22px; color:var(--green)}
/* tela final */
.done{display:grid; gap:14px; text-align:center; justify-items:center}
.done .ok{width:64px; height:64px; border-radius:50%; background:var(--green-soft); color:var(--green); display:grid; place-items:center}
.done .ok svg{width:34px; height:34px}
.done p{color:var(--muted)}
.pixbox{width:100%; display:grid; gap:10px; text-align:left; border:2px solid var(--green); border-radius:14px; padding:16px; background:var(--green-soft)}
.pix-v{display:flex; justify-content:space-between; align-items:center; gap:10px} .pix-v span{font-weight:800} .pix-v b{font-size:24px; color:var(--green)}
.pix-qr{width:min(220px,70%); justify-self:center; background:#fff; border-radius:12px; padding:8px}
.pix-qr svg{width:100%; height:auto; display:block}
.pix-cc{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px}
.pix-cc .in{font:13px ui-monospace, monospace}
.pix-cc .btn{padding:10px 16px; min-height:0}
.pix-steps{margin:0; padding-left:20px; font-size:13.5px; color:var(--muted); display:grid; gap:2px}
.pix-emp{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--muted); background:#fff; border-radius:10px; padding:10px 12px} .pix-emp b{color:var(--ink)}
.cart-info{display:grid; gap:10px; text-align:left; width:100%; background:var(--soft); border-radius:12px; padding:14px 16px; font-size:14px}
.olist{width:100%; display:grid; gap:6px; text-align:left; background:var(--soft); border-radius:12px; padding:12px 14px; font-size:13.5px}
.olist div{display:flex; justify-content:space-between; gap:12px} .olist .t{border-top:1px solid var(--line); padding-top:6px; font-weight:800}

/* demonstração */
#demoFeed{font-family:var(--f-b)}