/* despacha-commerce — tema base com 3 presets (noir / clean / vivid).
   Tudo dirigido por CSS vars; --accent vem do tema_json da loja. */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0b0d; --bg2:#131316; --card:#17171b; --line:#26262c;
  --fg:#f5f4f0; --muted:#9c9ca6; --inv:#0b0b0d;
  --radius:14px;
  --display:'Archivo Black',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
html[data-preset="clean"]{
  --bg:#faf9f7; --bg2:#f1efeb; --card:#ffffff; --line:#e5e2dc;
  --fg:#141414; --muted:#71716b; --inv:#ffffff;
}
html[data-preset="vivid"]{
  --bg:#120b2e; --bg2:#1a1040; --card:#1e1447; --line:#332a5e;
  --fg:#f4f1ff; --muted:#a89fd0; --inv:#120b2e;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:var(--body);cursor:pointer;border:0;background:none;color:inherit}

/* ── Topbar marquee ── */
.topbar{background:var(--accent);color:var(--inv);overflow:hidden;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em}
.topbar-track{display:flex;gap:26px;white-space:nowrap;padding:7px 0;width:max-content;animation:mq 28s linear infinite}
.topbar-track i{font-style:normal;opacity:.5;font-size:.5rem;align-self:center}
@keyframes mq{to{transform:translateX(-33.33%)}}
@media (prefers-reduced-motion: reduce){.topbar-track{animation:none}}

/* ── Header ── */
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:26px;
  padding:14px clamp(16px,4vw,48px);background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--display);font-size:1.35rem;letter-spacing:.01em}
.logo em{color:var(--accent);font-style:normal}
.nav{display:flex;gap:20px;font-size:.86rem;font-weight:600;color:var(--muted)}
.nav a:hover{color:var(--fg)}
.hdr-acts{margin-left:auto;display:flex;align-items:center;gap:14px}
.hdr-busca input{background:var(--bg2);border:1px solid var(--line);color:var(--fg);
  border-radius:99px;padding:8px 16px;font-size:.85rem;width:190px;outline:0;transition:.2s}
.hdr-busca input:focus{border-color:var(--accent);width:230px}
.cartbtn{position:relative;display:flex;padding:8px}
.cartbtn b{position:absolute;top:0;right:-2px;background:var(--accent);color:var(--inv);
  font-size:.62rem;min-width:17px;height:17px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.burger{display:none;font-size:1.3rem;margin-left:6px}
.mobile-menu{display:none}
@media(max-width:880px){
  .nav,.hdr-busca{display:none}
  .burger{display:block}
  .mobile-menu{position:fixed;inset:57px 0 auto 0;z-index:49;background:var(--bg);
    border-bottom:1px solid var(--line);flex-direction:column;padding:10px 20px 18px;transform:translateY(-130%);transition:.25s}
  body.menu-open .mobile-menu{display:flex;transform:none}
  .mobile-menu a{padding:11px 0;border-bottom:1px solid var(--line);font-weight:600}
}

/* ── Hero ── */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;
  padding:clamp(40px,7vw,90px) clamp(16px,4vw,48px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 65%);pointer-events:none}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:99px;padding:6px 14px;margin-bottom:22px}
.hero h1{font-family:var(--display);font-size:clamp(2.4rem,6.2vw,4.6rem);line-height:1.02;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:18px}
.hero p{color:var(--muted);font-size:1.05rem;max-width:46ch;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;
  padding:13px 28px;font-weight:700;font-size:.92rem;transition:.18s}
.btn-solid{background:var(--accent);color:var(--inv)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 40%,transparent)}
.btn-ghost{border:1px solid var(--line);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-big{width:100%;padding:16px;font-size:1rem}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}

.hero-shirts{position:relative;height:clamp(300px,38vw,480px)}
.hero-shirt{position:absolute;width:62%;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);transition:.25s}
.hero-shirt img{width:100%;aspect-ratio:3/4;object-fit:cover}
.hero-shirt.s1{left:0;top:6%;transform:rotate(-7deg);z-index:3}
.hero-shirt.s2{left:30%;top:0;transform:rotate(3deg);z-index:2}
.hero-shirt.s3{left:52%;top:14%;transform:rotate(10deg);z-index:1}
.hero-shirt:hover{transform:rotate(0) scale(1.04);z-index:5}
@media(max-width:880px){
  .hero{grid-template-columns:1fr}
  .hero-shirts{height:64vw}
}

/* ── Seções / grids ── */
.sec{padding:clamp(28px,4vw,54px) clamp(16px,4vw,48px)}
.sec-topo{padding-top:clamp(22px,3vw,40px)}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:24px}
.sec-head h2{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.9rem);text-transform:uppercase}
.sec-count{color:var(--muted);font-size:.85rem}

.cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);
  aspect-ratio:4/5;border:1px solid var(--line);transition:.2s}
.cat-card img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:.3s}
.cat-card span{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;font-weight:700;
  background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;display:flex;flex-direction:column}
.cat-card span i{font-style:normal;font-weight:500;font-size:.72rem;opacity:.75}
.cat-card:hover{border-color:var(--accent)}
.cat-card:hover img{transform:scale(1.05);opacity:1}

.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
@media(max-width:560px){.prod-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.prod-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.prod-card:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 16px 40px rgba(0,0,0,.3)}
.prod-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg2)}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:.35s}
.prod-card:hover .prod-img img{transform:scale(1.06)}
.tag-off{position:absolute;top:10px;left:10px;background:var(--accent);color:var(--inv);
  font-size:.68rem;font-weight:800;padding:4px 9px;border-radius:99px}
.prod-card h3{font-size:.86rem;font-weight:600;padding:12px 14px 4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.prod-preco{padding:0 14px 14px;display:flex;gap:8px;align-items:baseline}
.prod-preco s{color:var(--muted);font-size:.78rem}
.prod-preco b{font-size:1.02rem}

.pag{display:flex;gap:8px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.pag a,.pag b{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--line);font-size:.88rem}
.pag b{background:var(--accent);color:var(--inv);border-color:var(--accent)}
.pag a:hover{border-color:var(--accent)}

.vazio{color:var(--muted);padding:40px 0}
.vazio a{color:var(--accent);font-weight:600}

/* ── Página de produto ── */
.pd{padding:clamp(20px,3vw,40px) clamp(16px,4vw,48px)}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:22px}
.crumbs a:hover{color:var(--accent)}
.pd-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px)}
@media(max-width:880px){.pd-grid{grid-template-columns:1fr}}
.pd-main{border-radius:var(--radius);overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.pd-main img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pd-thumbs{display:flex;gap:10px;margin-top:12px}
.pd-thumbs button{width:72px;border-radius:10px;overflow:hidden;border:2px solid var(--line);padding:0;transition:.15s}
.pd-thumbs button.on,.pd-thumbs button:hover{border-color:var(--accent)}
.pd-info h1{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.1rem);text-transform:uppercase;line-height:1.12;margin-bottom:14px}
.pd-preco{display:flex;align-items:baseline;gap:12px;margin-bottom:26px}
.pd-preco s{color:var(--muted)}
.pd-preco b{font-size:1.9rem}
.pd-pix{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);
  font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:99px;text-transform:uppercase}
.pd-tam{margin-bottom:22px}
.pd-tam label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.1em}
.tam-pills{display:flex;gap:10px}
.tam-pills button{min-width:52px;height:46px;border-radius:12px;border:1.5px solid var(--line);
  font-weight:700;font-size:.95rem;transition:.15s}
.tam-pills button.on{background:var(--accent);color:var(--inv);border-color:var(--accent)}
.tam-pills button:hover{border-color:var(--accent)}
.pd-selos{display:flex;flex-direction:column;gap:8px;margin:22px 0;color:var(--muted);font-size:.88rem}
.pd-desc h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin:20px 0 8px;color:var(--muted)}
.pd-desc p{font-size:.92rem;color:color-mix(in srgb,var(--fg) 82%,var(--muted))}

/* ── Carrinho ── */
.cart-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:start}
@media(max-width:880px){.cart-wrap{grid-template-columns:1fr}}
.cart-item{display:flex;gap:16px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.cart-item img{width:74px;border-radius:10px;aspect-ratio:3/4;object-fit:cover}
.ci-info{flex:1;display:flex;flex-direction:column;gap:3px}
.ci-nome{font-weight:600;font-size:.92rem}
.ci-var{color:var(--muted);font-size:.8rem}
.ci-rm{color:var(--muted);font-size:.76rem;text-decoration:underline;align-self:flex-start;padding:2px 0}
.ci-rm:hover{color:#ff6b6b}
.ci-preco{font-size:1rem}
.cart-resumo{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;position:sticky;top:90px}
.cart-resumo h3{font-family:var(--display);text-transform:uppercase;font-size:1rem;margin-bottom:16px}
.cr-linha{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.cr-frete{color:var(--muted)}
.cart-resumo .btn{margin-top:18px}
.cr-nota{font-size:.78rem;color:var(--muted);margin-top:10px;text-align:center}

/* ── Band da marca ── */
.brandband{margin:clamp(30px,5vw,70px) clamp(16px,4vw,48px);padding:clamp(34px,6vw,70px);
  border-radius:calc(var(--radius) * 1.6);background:
  linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--bg2)),var(--bg2));
  border:1px solid var(--line);text-align:center}
.brandband h2{font-family:var(--display);font-size:clamp(1.5rem,3.6vw,2.6rem);
  text-transform:uppercase;line-height:1.1;margin-bottom:14px}
.brandband p{color:var(--muted);max-width:56ch;margin:0 auto}

/* ── Footer ── */
.ftr{border-top:1px solid var(--line);margin-top:40px;background:var(--bg2)}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px;
  padding:clamp(30px,4vw,50px) clamp(16px,4vw,48px)}
@media(max-width:880px){.ftr-grid{grid-template-columns:1fr 1fr}}
.ftr-logo{font-size:1.2rem;margin-bottom:10px}
.ftr-sub{color:var(--muted);font-size:.86rem;max-width:32ch}
.ftr h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:12px}
.ftr a{display:block;font-size:.88rem;padding:4px 0;color:color-mix(in srgb,var(--fg) 80%,var(--muted))}
.ftr a:hover{color:var(--accent)}
.ftr-pag{font-size:.88rem;color:var(--muted)}
.ftr-base{border-top:1px solid var(--line);padding:16px clamp(16px,4vw,48px);
  font-size:.78rem;color:var(--muted);text-align:center}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:99;
  background:var(--fg);color:var(--bg);font-weight:600;font-size:.9rem;
  padding:12px 22px;border-radius:99px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.toast.err{background:#ff6b6b;color:#fff}

/* ── Checkout ── */
.ck-form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.ck-h{font-family:var(--display);font-size:.95rem;text-transform:uppercase;margin:22px 0 14px}
.ck-h:first-child{margin-top:0}
.ck-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:560px){.ck-grid{grid-template-columns:1fr}}
.ck-grid label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:600;color:var(--muted)}
.ck-grid label.c2{grid-column:span 2}
@media(max-width:560px){.ck-grid label.c2{grid-column:span 1}}
.ck-grid input{background:var(--bg2);border:1px solid var(--line);color:var(--fg);
  border-radius:10px;padding:11px 13px;font-size:.92rem;outline:0;transition:.15s}
.ck-grid input:focus{border-color:var(--accent)}
.ck-fretes{display:flex;flex-direction:column;gap:10px}
.ck-frete-op{display:flex;align-items:center;gap:12px;background:var(--bg2);
  border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;cursor:pointer;transition:.15s}
.ck-frete-op:has(input:checked){border-color:var(--accent)}
.ck-frete-op input{accent-color:var(--accent)}
.ck-frete-op span{flex:1;display:flex;flex-direction:column;font-size:.9rem;font-weight:600}
.ck-frete-op span i{font-style:normal;font-weight:500;font-size:.76rem;color:var(--muted)}
.ck-dica{color:var(--muted);font-size:.82rem}
.ck-pgto{margin-bottom:20px}
.ck-payment-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.ck-payment-tab{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 16px;
  color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:12px;cursor:pointer}
.ck-payment-tab b{font:700 .95rem var(--display)}
.ck-payment-tab span{font-size:.75rem;color:var(--muted)}
.ck-payment-tab.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}
#ck-card-wrap{padding:14px;background:var(--bg2);border:1px solid var(--line);border-radius:12px}
#cardPaymentBrick_container{min-height:180px}
.ck-pix-selo{display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--accent) 10%,var(--bg2));
  border:1.5px solid var(--accent);border-radius:12px;padding:13px 16px}
.ck-pix-selo b{font-family:var(--display);font-size:1.05rem}
.ck-pix-selo span{color:var(--muted);font-size:.82rem}
@media(max-width:520px){.ck-payment-tabs{grid-template-columns:1fr}.ck-payment-tab{text-align:center;align-items:center}}
.ck-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.ck-item img{width:44px;border-radius:8px;aspect-ratio:3/4;object-fit:cover}
.ck-item span{flex:1;display:flex;flex-direction:column;font-size:.82rem;font-weight:600}
.ck-item span i{font-style:normal;font-weight:500;font-size:.72rem;color:var(--muted)}
.ck-item b{font-size:.85rem}
.cr-total{font-size:1.05rem;border-bottom:0;padding-top:12px}
#ck-erro{color:#ff6b6b}

/* ── Página do pedido / PIX ── */
.pix-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start}
@media(max-width:880px){.pix-wrap{grid-template-columns:1fr}}
.pix-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;text-align:center}
.pix-qr{width:min(260px,70vw);margin:0 auto 18px;border-radius:12px;background:#fff;padding:12px}
.pix-cc-label{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);margin-bottom:8px;text-align:left}
.pix-cc{display:flex;gap:8px;margin-bottom:12px}
.pix-cc input{flex:1;background:var(--bg2);border:1px solid var(--line);color:var(--fg);
  border-radius:10px;padding:11px 13px;font-size:.78rem;font-family:monospace;outline:0}
.pedido-ok{text-align:center;padding:50px 16px}
.pok-icone{width:76px;height:76px;border-radius:50%;background:var(--accent);color:var(--inv);
  font-size:2.4rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.pedido-ok h2{font-family:var(--display);font-size:1.7rem;text-transform:uppercase;margin-bottom:10px}
.pedido-ok p{color:var(--muted);max-width:48ch;margin:0 auto}

/* hidden precisa vencer qualquer display: definido em classe (bug do selo PIX) */
[hidden]{display:none!important}

/* ── Timeline do pedido + rastreio ── */
.timeline{display:flex;gap:0;justify-content:center;margin:26px auto 8px;max-width:420px}
.tl-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative}
.tl-step:not(:last-child)::after{content:"";position:absolute;top:16px;left:calc(50% + 22px);
  right:calc(-50% + 22px);height:2px;background:var(--line)}
.tl-step.done:not(:last-child)::after{background:var(--accent)}
.tl-step i{width:34px;height:34px;border-radius:50%;background:var(--bg2);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:.85rem;z-index:1}
.tl-step.done i{background:var(--accent);border-color:var(--accent);color:var(--inv)}
.tl-step span{font-size:.72rem;font-weight:600;color:var(--muted)}
.tl-step.done span{color:var(--fg)}
.track-box{margin:22px auto 0;max-width:340px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px;align-items:center}
.track-box label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.track-box b{font-family:monospace;font-size:1.05rem}

/* ── Cupom (checkout) ── */
.cupom-box{display:flex;gap:8px;margin:14px 0 4px}
.cupom-box input{flex:1;background:var(--bg2);border:1px solid var(--line);color:var(--fg);
  border-radius:10px;padding:9px 12px;font-size:.85rem}
.cupom-box input:focus{border-color:var(--accent)}
.cupom-box .btn{padding:9px 16px;font-size:.8rem;width:auto}

/* ── Conta do cliente ── */
.conta-wrap{max-width:960px;margin:0 auto}
.conta-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;max-width:420px}
.conta-tabs button{padding:12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);
  color:var(--muted);font-weight:700;font-size:.86rem}
.conta-tabs button.on{border-color:var(--accent);color:var(--fg)}
.conta-form{max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:12px}
.conta-form label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:600;color:var(--muted)}
.conta-form input{background:var(--bg2);border:1px solid var(--line);color:var(--fg);
  border-radius:10px;padding:10px 12px;font-size:.9rem}
.conta-form input:focus{border-color:var(--accent)}
.conta-erro{color:#ff6b6b;font-size:.82rem}
.conta-dash{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start}
.conta-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.conta-head h2{margin:0}
.pedido-linha{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.pedido-linha b{font-size:.9rem}
.pedido-linha span{color:var(--muted);font-size:.78rem;display:block;margin-top:2px}
.pedido-status{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:99px;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.rastreio-form{max-width:520px}