/* ============ Header ============ */
.header{position:sticky;top:0;z-index:40;background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-in{max-width:1320px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ink)}
.marca:hover{color:var(--ink)}
.marca svg{flex:none}
.marca-nome{font-size:17px;font-weight:600;letter-spacing:0.14em}
.nav{display:none;align-items:center;gap:28px}
.nav-link{min-height:44px;display:inline-flex;align-items:center;font-size:16px;color:var(--ink-2);font-weight:400}
.nav-link.is-ativo{color:var(--ink);font-weight:500}
.nav-link.is-ativo:hover{color:var(--ink)}
.header-acoes{display:flex;align-items:center;gap:8px}
.btn-sacola{position:relative;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.btn-menu{width:44px;height:44px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}

/* ============ Menu de tela cheia ============ */
.menu{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding:16px}
.menu[hidden]{display:none}
.menu-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0 24px}
.menu-nav{display:flex;flex-direction:column;gap:4px}
.menu-link{text-align:left;padding:14px 0;font-size:30px;font-weight:500;letter-spacing:-0.02em;color:var(--ink-2);border-bottom:1px solid var(--line)}
.menu-link.is-ativo{color:var(--ink)}
.menu-link.is-ativo:hover{color:var(--ink)}
.menu-rodape{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:8px}
.menu-rodape span{font-size:15px;color:var(--ink-2)}

/* ============ Botões ============ */
.cta{border:0;cursor:pointer;background:var(--ink);color:var(--bg);border-radius:999px;height:56px;padding:0 8px 0 24px;display:inline-flex;align-items:center;gap:16px;font-size:16px;font-weight:500}
.cta:hover{color:var(--bg)}
.cta-seta{width:40px;height:40px;border-radius:999px;background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cta--entre{justify-content:space-between}
.cta--bloco{width:100%;justify-content:space-between}

.btn-outline{cursor:pointer;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:999px;height:56px;padding:0 24px;display:inline-flex;align-items:center;font-size:16px;font-weight:500}

/* O design usa <button> (que centraliza sozinho) onde o site precisa de <a> para navegar. */
a.cta,a.btn-outline,a.pill,a.chip{text-align:center}

.pill{cursor:pointer;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.pill--48{height:48px;padding:0 20px}
.pill--40{height:40px;padding:0 16px}
.pill--52{height:52px;padding:0 20px;font-size:16px;font-weight:500}
.pill--surface{background:var(--surface)}
.pill--solido{border:0;background:var(--ink);color:var(--bg);font-weight:500}
.pill--solido:hover{color:var(--bg)}

.chip{cursor:pointer;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.chip.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip--40{height:40px;padding:0 16px}
.chip--44{height:44px;padding:0 16px}
.chip--44-18{height:44px;padding:0 18px}
.chip--48{height:48px;padding:0 22px;font-size:16px}
.chip--48-20{height:48px;padding:0 20px;font-size:16px}

.icone-btn{border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.icone-btn--36{width:36px;height:36px;border:0;background:none}
.icone-btn--40{width:40px;height:40px}
.icone-btn--44{width:44px;height:44px}
.icone-btn--48{width:48px;height:48px}
.icone-btn--52{width:52px;height:52px}
.icone-btn--56{width:56px;height:56px}
.icone-btn--limpo{border:0;background:none}
.icone-btn--surface{background:var(--surface)}
.icone-btn--ink{border:0;background:var(--ink);color:var(--bg)}
.icone-btn--ink:hover{color:var(--bg)}

.swatch{cursor:pointer;width:44px;height:44px;padding:0;border-radius:999px;border:1px solid var(--line)}
.swatch--32{width:32px;height:32px}
.swatch.is-on{box-shadow:var(--ring)}
.swatch--sup.is-on{box-shadow:var(--ring-surface)}

.chip-cor{flex:none;cursor:pointer;height:44px;padding:0 16px 0 8px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;gap:10px;font-size:14px}
.chip-cor-bolinha{width:28px;height:28px;border-radius:999px;border:1px solid var(--line)}
.chip-cor.is-on .chip-cor-bolinha{box-shadow:var(--ring)}

.chip-ativo{cursor:pointer;height:40px;padding:0 10px 0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;gap:10px;font-size:14px}
.chip-ativo-x{width:24px;height:24px;border-radius:999px;background:var(--bg);display:inline-flex;align-items:center;justify-content:center}
.link-limpar{cursor:pointer;height:40px;padding:0 16px;border-radius:999px;border:0;background:none;font-size:14px;color:var(--ink-2);text-decoration:underline}

/* ============ Campos ============ */
.campo{height:52px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:15px;color:var(--ink)}
.campo-area{padding:16px 20px;border-radius:20px;border:1px solid var(--line);background:var(--bg);font-size:15px;color:var(--ink);line-height:1.5;resize:vertical}
.select{height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:15px;color:var(--ink)}
.select--52{height:52px;padding:0 16px}
.range{width:100%;accent-color:var(--ink);height:44px}

.upload{background:var(--bg);border:1px dashed var(--dash);border-radius:var(--r-tile);padding:28px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;cursor:pointer}
.upload input{display:none}
.upload-icone{width:48px;height:48px;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex:none}
.upload-nome{font-size:17px;font-weight:500}
.upload-hint{font-size:14px;color:var(--ink-2)}
.upload--linha{padding:18px 20px;flex-direction:row;align-items:center;gap:14px}
.upload--linha .upload-icone{width:44px;height:44px}
.upload--linha .upload-nome{font-size:15px;font-weight:400;line-height:1.4}

/* ============ Linha de especificação ============ */
.specs{--pb:8px;--fs:15px;--fw:400;display:flex;flex-direction:column;gap:8px}
.spec{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--dot);padding-bottom:var(--pb)}
.spec:last-child{border-bottom:0;padding-bottom:0}
.spec-k{font-size:var(--fs);color:var(--ink-2)}
.spec-v{font-size:var(--fs);font-weight:var(--fw)}

/* ============ Figura de peça ============ */
.peca-sombra{position:absolute;border-radius:50%}
.peca-forma{position:relative}

/* ============ Cartão de produto ============ */
.grade-produtos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,240px),1fr));gap:12px}
.pcard{background:var(--surface);border-radius:var(--r-tile);padding:12px;display:flex;flex-direction:column;gap:12px;position:relative}
.pcard-badge{position:absolute;top:16px;left:16px;z-index:2;height:28px;padding:0 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:13px;display:inline-flex;align-items:center}
.pcard-fig{border:0;background:none;padding:0;cursor:pointer;position:relative;aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center;width:100%}
.pcard-base{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:0 4px 4px}
.pcard-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.pcard-material{font-size:13px;color:var(--ink-2)}
.pcard-nome{font-size:15px;line-height:1.3}
.pcard-preco{font-size:15px;font-weight:500}

/* ============ FAQ ============ */
.faq{margin-top:28px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;border:0;background:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;color:var(--ink)}
.faq-p{font-size:clamp(17px,4vw,21px);font-weight:500;letter-spacing:-0.01em}
.faq-sinal{flex:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--bg);display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink)}
.faq-q[aria-expanded="true"] .faq-sinal{background:var(--ink);color:var(--bg)}
.faq-a{margin:0;padding:0 0 24px;max-width:44em;font-size:16px;line-height:1.55;color:var(--ink-2)}
.faq-a[hidden]{display:none}

/* ============ Newsletter ============ */
.news{border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,4vw,32px);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.news-txt{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}
.news-tit{font-size:clamp(20px,4.5vw,26px);font-weight:500;letter-spacing:-0.02em}
.news-sub{font-size:15px;color:var(--ink-2)}
.news-form{flex:1 1 320px;min-width:0;display:flex;gap:12px;align-items:center}
.news-form .campo{flex:1;min-width:0}
.news-ok{flex:1 1 100%;font-size:14px;color:var(--ink-2)}
.news-ok[hidden]{display:none}

/* ============ Footer ============ */
.footer{border-top:1px solid var(--line);margin-top:24px}
.footer-in{max-width:1320px;margin:0 auto;padding:40px 16px 96px;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.footer-marca{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:14px}
.footer-marca-topo{display:flex;align-items:center;gap:10px}
.footer-marca-nome{font-size:16px;font-weight:600;letter-spacing:0.14em}
.footer-frase{font-size:15px;line-height:1.5;color:var(--ink-2);max-width:24em}
.footer-col{flex:0 1 160px;display:flex;flex-direction:column;gap:0}
.footer-col a,.footer-col button{border:0;background:none;padding:0;text-align:left;cursor:pointer;font-size:15px;min-height:44px;display:flex;align-items:center;color:var(--ink)}
.footer-col--legal{flex:0 1 200px;gap:10px}
.footer-legal-item{font-size:15px;color:var(--ink-2)}

/* ============ Sacola ============ */
.sacola{position:fixed;inset:0;z-index:80;background:var(--overlay);display:flex;justify-content:flex-end}
.sacola[hidden]{display:none}
.sacola-painel{width:100%;max-width:100%;background:var(--bg);height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.sacola-topo{padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
.sacola-tit{font-size:22px;font-weight:500;letter-spacing:-0.02em}
.sacola-corpo{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.sacola-vazia{background:var(--surface);border-radius:var(--r-card);padding:32px 24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sacola-vazia[hidden]{display:none}
.sacola-vazia-tit{font-size:20px;font-weight:500;letter-spacing:-0.02em}
.sacola-vazia-txt{font-size:15px;line-height:1.5;color:var(--ink-2)}
.sacola-vazia .pill{margin-top:8px}
.sacola-linha{display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:var(--r-tile);padding:12px}
.sacola-mini{flex:none;width:72px;height:88px;display:flex;align-items:flex-end;justify-content:center}
.sacola-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.sacola-nome{font-size:15px;line-height:1.3}
.sacola-meta{font-size:13px;color:var(--ink-2)}
.sacola-qtd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sacola-preco{font-size:15px;font-weight:500}
.sacola-rodape{border-top:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:12px}
.sacola-rodape[hidden]{display:none}
.sacola-total{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.sacola-total-k{font-size:16px}
.sacola-total-v{font-size:24px;font-weight:500;letter-spacing:-0.02em}
.sacola-nota{font-size:13px;color:var(--ink-2)}

.stepper{display:flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px}
.stepper-num{min-width:20px;text-align:center;font-size:15px;font-weight:500}
.stepper--44{gap:6px;padding:4px}
.stepper--44 .stepper-num{min-width:24px;font-size:17px}

/* ============ Toast ============ */
.toast{position:fixed;left:16px;right:16px;bottom:24px;z-index:90;display:flex;justify-content:center;pointer-events:none}
.toast[hidden]{display:none}
.toast span{background:var(--ink);color:var(--bg);border-radius:999px;padding:14px 24px;font-size:15px;box-shadow:var(--shadow)}

/* ============ Bottom sheet ============ */
.sheet{position:fixed;inset:0;z-index:70;background:var(--overlay);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-painel{width:100%;max-width:560px;background:var(--bg);border-radius:24px 24px 0 0;padding:20px 16px 24px;display:flex;flex-direction:column;gap:20px;max-height:86vh;overflow-y:auto}
.sheet-topo{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sheet-tit{font-size:22px;font-weight:500;letter-spacing:-0.02em}

/* ============ Grupos de opção ============ */
.grupo{display:flex;flex-direction:column;gap:10px}
.grupo-label{font-size:14px;color:var(--ink-2)}
.opcoes{display:flex;flex-wrap:wrap;gap:8px}
.faixa{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}

/* ============ Desktop (o único breakpoint) ============ */
@media (min-width:900px){
  .nav{display:flex}
  .btn-menu{display:none}
  .sacola-painel{width:440px}
}