/* Loja virtual Xeque Mate: dourado da marca sobre grafite e marfim */
:root{
  --bg:#FAF8F3; --surface:#FFFFFF; --surface-2:#F2EEE5; --surface-3:#E7E1D3;
  --ink:#1A1611; --ink-2:#554E42; --ink-3:#8A8172;
  --line:#E7E1D4; --line-2:#D4CCB9;
  --ouro-1:#F7CE6B; --ouro-2:#D99A22; --ouro-3:#A2650F;
  --accent:#A97C12; --accent-2:#8A6310;
  --escuro:#17130D; --escuro-2:#2C261C; --claro-ouro:#F8E7BE;
  --r:14px; --sombra:0 14px 36px -22px rgba(26,22,17,.5);
  --display:"Jost", system-ui, sans-serif;
  --corpo:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--corpo);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;letter-spacing:-.01em;text-wrap:balance}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit;width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:11px 13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #f6ecd6}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topo-dentro{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.emblema{width:30px;height:36px;flex:none}
.nome{font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--ouro-3),var(--ouro-2) 45%,var(--ouro-1));-webkit-background-clip:text;background-clip:text;color:transparent}
.nome .ponto{letter-spacing:0}
.btn-carrinho{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:99px;padding:8px 15px;font-weight:600;font-size:13.5px;position:relative}
.btn-carrinho:hover{border-color:var(--accent)}
.btn-carrinho svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contador{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:99px;background:var(--escuro);
  color:var(--claro-ouro);font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}

/* ---------- capa ---------- */
.capa{max-width:1120px;margin:0 auto;padding:36px 16px 24px;text-align:center}
.capa h1{font-size:clamp(26px,5.4vw,42px);line-height:1.12}
.capa p{max-width:46ch;margin:12px auto 0;color:var(--ink-2);font-size:15px}

/* ---------- filtros ---------- */
.barra{position:sticky;top:57px;z-index:20;background:var(--bg);max-width:1120px;margin:0 auto;padding:10px 16px 12px;display:flex;flex-direction:column;gap:10px}
.busca{position:relative}
.busca svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:var(--ink-3);stroke-width:1.9;stroke-linecap:round}
.busca input{padding-left:40px;border-radius:99px}
.categorias{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.categorias::-webkit-scrollbar{display:none}
.categorias button{border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:7px 15px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--ink-2)}
.categorias button[aria-pressed="true"]{background:linear-gradient(180deg,var(--escuro-2),var(--escuro));border-color:transparent;color:var(--claro-ouro)}

/* ---------- grade ---------- */
.grade{max-width:1120px;margin:0 auto;padding:12px 16px 56px;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (min-width:620px){.grade{gap:16px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
.carregando,.vazio-msg{grid-column:1/-1;text-align:center;color:var(--ink-3);padding:40px 0}
.peca{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;box-shadow:var(--sombra)}
.peca:hover{border-color:var(--line-2);transform:translateY(-2px);transition:transform .15s ease}
.peca .foto{aspect-ratio:1/1;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.peca .foto img{width:100%;height:100%;object-fit:cover}
.peca .foto svg{width:46px;height:55px;opacity:.35}
.peca .texto{padding:11px 13px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.peca .cat{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.peca .pn{font-weight:600;font-size:14px;line-height:1.3}
.peca .pp{font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);margin-top:auto;padding-top:6px}
.peca .esgotado{font-size:12px;color:var(--ink-3);font-weight:600}

/* ---------- janela do produto ---------- */
.veu{position:fixed;inset:0;background:rgba(18,14,9,.55);z-index:40}
.janela{position:fixed;z-index:50;inset:auto 0 0 0;background:var(--surface);border-radius:18px 18px 0 0;max-height:92dvh;overflow:auto;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px))}
@media (min-width:720px){
  .janela{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(760px,92vw);border-radius:18px;max-height:88dvh}
}
.jan-grade{display:grid;gap:16px}
@media (min-width:720px){.jan-grade{grid-template-columns:1fr 1fr;align-items:start}}
.jan-foto{aspect-ratio:1/1;background:var(--surface-2);border-radius:12px;display:grid;place-items:center;overflow:hidden}
.jan-foto img{width:100%;height:100%;object-fit:cover}
.jan-foto svg{width:70px;height:84px;opacity:.35}
.jan-info h3{font-size:22px;margin-bottom:4px}
.jan-preco{font-family:var(--display);font-size:28px;font-weight:600;margin:8px 0 2px}
.jan-linha{color:var(--ink-2);font-size:13.5px}
.tamanhos{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.tamanhos button{border:1px solid var(--line-2);background:var(--surface);border-radius:9px;min-width:44px;padding:9px 12px;font-weight:600;font-size:13.5px}
.tamanhos button[aria-pressed="true"]{background:var(--escuro);border-color:var(--escuro);color:var(--claro-ouro)}
.qtd{display:flex;align-items:center;gap:10px;margin:14px 0}
.qtd button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);font-size:19px;font-weight:600;line-height:1}
.qtd span{min-width:28px;text-align:center;font-weight:700;font-size:16px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:12px;padding:14px;
  font-weight:700;font-size:15px;background:linear-gradient(180deg,var(--escuro-2),var(--escuro));color:var(--claro-ouro)}
.btn:disabled{opacity:.45}
.btn-claro{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);font-weight:600}
.btn-zap{background:linear-gradient(180deg,#2BB75B,#1E9549);color:#fff}
.fechar-x{position:absolute;top:10px;right:12px;background:none;border:0;font-size:26px;line-height:1;color:var(--ink-3);padding:4px 8px}

/* ---------- sacola ---------- */
.sacola{position:fixed;z-index:50;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--surface);display:flex;flex-direction:column;box-shadow:-20px 0 50px -30px rgba(0,0,0,.6)}
.sacola-topo{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.sacola-topo h2{font-size:19px}
.sacola-topo button{background:none;border:0;font-size:26px;line-height:1;color:var(--ink-3)}
.sacola-itens{flex:1;overflow:auto;padding:12px 18px;display:flex;flex-direction:column;gap:12px}
.sacola-fim{border-top:1px solid var(--line);padding:16px 18px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.item{display:grid;grid-template-columns:62px 1fr auto;gap:11px;align-items:center}
.item .mini{width:62px;height:62px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.item .mini img{width:100%;height:100%;object-fit:cover}
.item .mini svg{width:26px;height:31px;opacity:.35}
.item .in{min-width:0}
.item .in b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.item .in small{color:var(--ink-3);font-size:12px}
.item .ctrl{display:flex;align-items:center;gap:6px}
.item .ctrl button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);font-weight:700;line-height:1}
.item .ctrl span{min-width:20px;text-align:center;font-weight:600;font-size:13px}
.total{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-size:22px;font-weight:600}
.sacola-vazia{text-align:center;color:var(--ink-3);padding:40px 10px}
.sacola-vazia svg{width:52px;height:62px;opacity:.3;margin:0 auto 10px}

/* ---------- formulário do pedido ---------- */
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.entrega{display:flex;flex-direction:column;gap:8px}
.entrega label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-2);border-radius:11px;padding:11px 13px;cursor:pointer}
.entrega label:has(input:checked){border-color:var(--accent);background:#fdf8ec}
.entrega input{width:auto;margin-top:3px}
.entrega b{display:block;font-size:14px}
.entrega small{color:var(--ink-3);font-size:12.5px}

/* ---------- rodapé ---------- */
.rodape{background:var(--escuro);color:#CFC6B4;padding:34px 16px calc(30px + env(safe-area-inset-bottom,0px));text-align:center}
.rodape .emblema{width:40px;height:48px;margin:0 auto 10px}
.rodape h3{color:var(--claro-ouro);font-size:15px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:10px}
.rodape p{margin:4px 0;font-size:13.5px}
.rodape a{color:var(--ouro-1);text-decoration:none}

/* ---------- aviso ---------- */
.aviso{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;
  background:var(--escuro);color:var(--claro-ouro);padding:11px 18px;border-radius:99px;font-size:13.5px;font-weight:500;box-shadow:var(--sombra)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}