/* Vinoteca Zerbetto — loja */
:root {
  --vinho: #4a0f1e; --vinho-esc: #300a14; --ouro: #b08d57; --ouro-claro: #dcc8a0;
  --tinta: #1f1618; --cinza: #6d6163; --linha: #e6dfd8; --areia: #f5f1ea; --fundo: #fff;
  --verde: #1d6a49; --alerta: #a3341f;
  --serifa: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --raio: 3px; --cx: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.55 var(--sans); color: var(--tinta); background: var(--fundo); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
[hidden] { display: none !important; }
.cx { width: min(100% - 40px, var(--cx)); margin-inline: auto; }
.estreito { max-width: 760px; padding-block: 48px 80px; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 10px 14px; }

/* Tipografia */
.titulo { font: 600 clamp(1.8rem, 1.2rem + 2.1vw, 2.75rem)/1.12 var(--serifa); letter-spacing: -0.005em; color: var(--vinho); text-wrap: balance; }
.titulo-m { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.lead { color: var(--cinza); font-size: 1.06rem; max-width: 60ch; margin-top: 10px; }
.dica { color: var(--cinza); font-size: .875rem; }
.dica a, .prosa a, .guardar a, .limpar { text-decoration: underline; text-underline-offset: 3px; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border-radius: var(--raio);
  background: var(--vinho); color: #fff; font-weight: 600; font-size: .95rem; border: 1px solid var(--vinho); transition: background .15s, color .15s; text-align: center; }
.btn:hover { background: var(--vinho-esc); }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn-linha { background: transparent; color: var(--vinho); }
.btn-linha:hover { background: var(--vinho); color: #fff; }
.btn-g { min-height: 54px; font-size: 1.02rem; width: 100%; }
.btn-zap { background: var(--verde); border-color: var(--verde); }
.btn-zap:hover { background: #154f37; }
.ver { font-weight: 600; font-size: .93rem; color: var(--vinho); border-bottom: 1px solid var(--ouro); padding-bottom: 2px; white-space: nowrap; }
.ver:hover { border-color: var(--vinho); }

/* Faixa e cabeçalho */
.faixa { background: var(--areia); font-size: .82rem; color: var(--vinho); }
.faixa .cx { display: flex; justify-content: center; gap: 28px; padding: 7px 0; flex-wrap: wrap; row-gap: 0; }
.faixa span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--ouro); border-radius: 50%; margin-right: 28px; vertical-align: middle; }
.topo { background: var(--vinho); color: #fff; position: sticky; top: 0; z-index: 40; }
.topo-linha { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.logo img { width: 150px; height: auto; }
.busca { flex: 1; display: flex; background: #fff; border-radius: var(--raio); max-width: 560px; margin-inline: auto; }
.busca input { flex: 1; border: 0; background: none; padding: 11px 16px; color: var(--tinta); min-width: 0; outline: none; }
.busca button { padding: 0 14px; color: var(--vinho); }
.busca:focus-within { outline: 2px solid var(--ouro); outline-offset: 2px; }
.topo-link { font-size: .92rem; white-space: nowrap; opacity: .92; }
.topo-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.sacola { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: .92rem; position: relative; padding: 8px 0; }
.sacola b { background: var(--ouro-claro); color: var(--vinho-esc); border-radius: 20px; min-width: 22px; height: 22px; font-size: .75rem; display: grid; place-items: center; padding: 0 6px; }
.nav { background: var(--vinho-esc); border-bottom: 2px solid var(--ouro); }
.nav .cx { display: flex; gap: 34px; overflow-x: auto; scrollbar-width: none; }
.nav a { padding: 11px 0; font-size: .9rem; color: #f3e9dc; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.nav a:hover { color: #fff; border-color: #fff; }
.nav-so-celular, .menu-btn { display: none; }
.topo-simples { position: static; border-bottom: 2px solid var(--ouro); }
.topo-simples .cx { display: flex; justify-content: space-between; align-items: center; padding-block: 12px; }
.seguro { font-size: .85rem; color: var(--ouro-claro); }

/* Home */
.heroi { margin-top: 28px; position: relative; }
.heroi-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--raio); background: var(--areia); }
.heroi-trilho::-webkit-scrollbar, .nav .cx::-webkit-scrollbar { display: none; }
.heroi-trilho a { flex: 0 0 100%; scroll-snap-align: start; }
.heroi-trilho img { width: 100%; aspect-ratio: 1692/930; object-fit: cover; }
.heroi-nav { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.heroi-nav button { width: 34px; height: 3px; background: var(--linha); }
.heroi-nav button[aria-current="true"] { background: var(--vinho); }
.bloco { padding-block: clamp(48px, 7vw, 88px) 0; }
.bloco-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.bloco-topo + .lead { margin: -18px 0 28px; }
.estilos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.estilo { --tx: #fff; --sub: rgba(255,255,255,.82); --fio: #c9a46a; --veu: rgba(30,4,10,.55);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; aspect-ratio: 4 / 3; padding: 20px 18px;
  border-radius: 8px; color: var(--tx); position: relative; overflow: hidden; isolation: isolate; background-color: #3a0a15;
  box-shadow: 0 1px 2px rgba(31,22,24,.06), 0 10px 30px -18px rgba(31,22,24,.45); transition: box-shadow .4s ease, transform .4s ease; }
.estilo::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--foto) 72% center / cover no-repeat; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.estilo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--veu) 0%, var(--veu) 18%, transparent 66%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); border-radius: inherit; pointer-events: none; }
.estilo:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(31,22,24,.08), 0 22px 44px -20px rgba(31,22,24,.55); }
.estilo:hover::before { transform: scale(1.045); }
.estilo-nome { font: 500 clamp(1.15rem, .7rem + .9vw, 1.6rem)/1.08 var(--serifa); letter-spacing: -.005em; max-width: 60%; text-wrap: balance; }
.estilo-nome::after { content: ""; display: block; width: 28px; height: 2px; background: var(--fio); margin: 10px 0 8px; transition: width .45s ease; }
.estilo:hover .estilo-nome::after { width: 48px; }
.estilo-info { font-size: .74rem; line-height: 1.3; color: var(--sub); max-width: 58%; }
.estilo-preco { font: 600 clamp(.98rem, .75rem + .4vw, 1.2rem)/1.2 var(--serifa); margin-top: 2px; font-variant-numeric: lining-nums; }
.estilo-ver { margin-top: 10px; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fio); display: inline-flex; align-items: center; gap: 8px; opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .35s ease; }
.estilo-ver::after { content: "\2192"; font-size: 1rem; letter-spacing: 0; }
.estilo:hover .estilo-ver, .estilo:focus-visible .estilo-ver { opacity: 1; transform: none; }
.estilo:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.estilo-tinto { --foto: url(/img/colecao-tinto.webp); background-color: #4f0c1c; }
.estilo-branco { --foto: url(/img/colecao-branco.webp); background-color: #efe0b6; --tx: #1f1a0b; --sub: #4b4226; --fio: #a8834a; --veu: rgba(244,232,198,.6); }
.estilo-rose { --foto: url(/img/colecao-rose.webp); background-color: #f2c4bc; --tx: #6b1222; --sub: #5a2a27; --fio: #9b6a3c; --veu: rgba(248,214,206,.55); }
.estilo-fortificado { --foto: url(/img/colecao-fortificado.webp); background-color: #2e140b; --tx: #f6eadb; --sub: rgba(246,234,219,.8); --veu: rgba(28,10,5,.6); }
.estilo-ver::after { font-size: .85rem; }
@media (hover: none) { .estilo-ver { display: none; } }
@media (prefers-reduced-motion: reduce) { .estilo, .estilo::before, .estilo-nome::after, .estilo-ver { transition: none; } }

.paises-faixa { background: var(--areia); margin-top: clamp(48px, 7vw, 88px); padding-block: clamp(44px, 6vw, 72px); }
.paises { columns: 3; column-gap: 56px; margin-top: 26px; }
.paises li { break-inside: avoid; }
.paises a { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid #dcd3c6; }
.paises span { font: 600 1.4rem/1.25 var(--serifa); color: var(--tinta); }
.paises small { color: var(--cinza); font-size: .85rem; }
.paises a:hover span { color: var(--vinho); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.garantias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; padding-bottom: clamp(56px, 8vw, 96px); }
.garantias > div { border-top: 2px solid var(--vinho); padding-top: 18px; }
.garantias h3 { font: 600 1.35rem/1.2 var(--serifa); color: var(--vinho); margin-bottom: 8px; }
.garantias p { color: var(--cinza); font-size: .95rem; margin-bottom: 12px; }
.pais-sec { margin-top: 56px; }

/* Card */
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 22px; }
.card { display: flex; flex-direction: column; position: relative; }
.card-foto { display: block; background: var(--areia); border-radius: var(--raio); aspect-ratio: 4/5; overflow: hidden; position: relative; margin-bottom: 14px; }
.card-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; transition: transform .35s ease; }
.card:hover .card-foto img { transform: scale(1.04); }
.selo { position: absolute; left: 10px; top: 10px; z-index: 1; background: #fff; color: var(--vinho); font-size: .74rem; font-weight: 600; padding: 4px 9px; border-radius: 2px; }
.selo-off { background: var(--vinho); color: #fff; }
.selo-fim { background: var(--tinta); color: #fff; }
.card-origem { font-size: .8rem; color: var(--cinza); display: flex; align-items: center; gap: 7px; }
.card-origem i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.card h3 { font: 600 1.02rem/1.32 var(--sans); margin-top: 6px; color: var(--tinta); }
.card h3 a::after { content: ""; position: absolute; inset: 0 0 60px; }
.card h3 a:hover { color: var(--vinho); }
.card-uva { font-size: .86rem; color: var(--cinza); margin-top: 3px; }
.card-preco { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; }
.card-preco s { color: var(--cinza); font-size: .85rem; }
.card-preco strong { font-size: 1.14rem; font-weight: 600; }
.card-preco span { flex-basis: 100%; font-size: .84rem; color: var(--verde); font-weight: 500; }
.card .btn { margin-top: 12px; min-height: 42px; padding: 8px 12px; font-size: .88rem; position: relative; z-index: 1; }
.card-esgotado .card-foto img { opacity: .5; }

/* Catálogo */
.trilha { display: flex; gap: 8px; font-size: .84rem; color: var(--cinza); padding-top: 22px; flex-wrap: wrap; }
.trilha a:hover { color: var(--vinho); text-decoration: underline; }
.catalogo { display: grid; grid-template-columns: 230px 1fr; gap: 0 48px; padding-bottom: 96px; }
.catalogo .trilha, .cat-topo { grid-column: 1 / -1; }
.cat-topo { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 20px; padding: 18px 0 26px; border-bottom: 1px solid var(--linha); margin-bottom: 30px; }
.cat-topo h1 { grid-column: 1 / -1; }
.cat-topo p { color: var(--cinza); font-size: .93rem; }
.limpar { margin-left: 12px; color: var(--vinho); }
.ordem { font-size: .9rem; }
.ordem select { border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 10px; background: #fff; margin-left: 6px; }
.catalogo .grade { grid-template-columns: repeat(3, 1fr); }
.filtros-celular > summary { display: none; }
.filtro { border-bottom: 1px solid var(--linha); padding: 14px 0; }
.filtro:first-of-type { padding-top: 0; }
.filtro summary { font-weight: 600; font-size: .93rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.filtro summary::after { content: "+"; color: var(--cinza); font-weight: 400; }
.filtro[open] summary::after { content: "−"; }
.filtro summary::-webkit-details-marker { display: none; }
.filtro ul { margin-top: 10px; max-height: 300px; overflow: auto; }
.filtro a { display: flex; justify-content: space-between; padding: 5px 0; font-size: .92rem; color: #3d3335; }
.filtro a small { color: var(--cinza); }
.filtro a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.filtro a[aria-current] { color: var(--vinho); font-weight: 600; }
.filtro a[aria-current] span::before { content: "✓ "; }
.vazio { text-align: center; padding: 64px 20px; }
.vazio h2 { font: 600 1.5rem var(--serifa); margin-bottom: 8px; }
.vazio p { color: var(--cinza); margin-bottom: 20px; }

/* Página do vinho */
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding-top: 22px; align-items: start; }
.galeria { position: sticky; top: 130px; display: grid; grid-template-columns: 72px 1fr; gap: 14px; }
.galeria-foto { grid-column: 2; grid-row: 1; background: var(--areia); border-radius: var(--raio); aspect-ratio: 4/5; }
.galeria-foto:only-child { grid-column: 1 / -1; }
.galeria-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 6%; }
.galeria-minis { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; }
.galeria-minis button { background: var(--areia); border-radius: var(--raio); aspect-ratio: 4/5; border: 1px solid transparent; overflow: hidden; }
.galeria-minis button[aria-current] { border-color: var(--vinho); }
.galeria-minis img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 6px; }
.compra h1 { font: 600 clamp(1.7rem, 1.2rem + 1.7vw, 2.4rem)/1.14 var(--serifa); color: var(--vinho); margin: 8px 0 12px; text-wrap: balance; }
.resumo { color: #4a3f41; max-width: 54ch; }
.preco-bloco { margin: 24px 0 20px; padding-top: 22px; border-top: 1px solid var(--linha); }
.preco-bloco .selo { position: static; }
.de { color: var(--cinza); font-size: .95rem; display: flex; gap: 10px; align-items: center; margin-bottom: 2px; }
.preco { font: 600 2.3rem/1.1 var(--sans); letter-spacing: -0.01em; }
.pix { color: var(--verde); margin-top: 6px; }
.parc { color: var(--cinza); font-size: .92rem; }
.kits { border: 0; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kits legend { font-weight: 600; font-size: .93rem; margin-bottom: 10px; padding: 0; }
.kits label { cursor: pointer; }
.kits input { position: absolute; opacity: 0; }
.kits span { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; height: 100%; }
.kits em { font-style: normal; font-weight: 600; }
.kits small { grid-column: 1 / -1; color: var(--verde); font-size: .8rem; }
.kits input:checked + span { border-color: var(--vinho); box-shadow: inset 0 0 0 1px var(--vinho); background: #fbf7f3; }
.kits input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }
.kits input:disabled + span { opacity: .45; cursor: not-allowed; }
.acao { display: flex; gap: 12px; }
.qtd { display: flex; border: 1px solid var(--linha); border-radius: var(--raio); flex: none; }
.qtd button { width: 44px; font-size: 1.2rem; color: var(--vinho); }
.qtd input { width: 44px; text-align: center; border: 0; background: none; -moz-appearance: textfield; appearance: textfield; padding: 0; }
.qtd input::-webkit-outer-spin-button, .qtd input::-webkit-inner-spin-button { -webkit-appearance: none; }
.btn-ja { margin-top: 10px; }
.estoque-info { font-size: .88rem; color: var(--cinza); margin-top: 14px; }
.estoque-info b { color: var(--alerta); font-weight: 600; }
.esgotado { background: var(--areia); padding: 20px; border-radius: var(--raio); display: grid; gap: 14px; }
.cep { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linha); }
.cep label { font-weight: 600; font-size: .93rem; }
.cep div { display: flex; gap: 10px; margin-top: 8px; max-width: 340px; }
.cep input { flex: 1; min-width: 0; border: 1px solid #cfc6bd; border-radius: var(--raio); padding: 10px 12px; }
.cep p { font-size: .92rem; margin-top: 10px; min-height: 1.4em; }
.cep p b { color: var(--verde); }
.confianca { margin: 22px 0; display: grid; gap: 8px; font-size: .92rem; color: #3d3335; }
.confianca li { padding-left: 24px; position: relative; }
.confianca li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border-left: 2px solid var(--ouro); border-bottom: 2px solid var(--ouro); transform: rotate(-45deg); }
.zap-link { display: inline-flex; align-items: center; gap: 8px; color: var(--verde); font-weight: 600; font-size: .94rem; }
.zap-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.detalhes { display: grid; grid-template-columns: 320px 1fr; gap: clamp(28px, 5vw, 72px); margin-top: clamp(48px, 7vw, 88px); padding-top: 44px; border-top: 1px solid var(--linha); align-items: start; }
.detalhes h2 { font: 600 1.6rem var(--serifa); color: var(--vinho); margin-bottom: 16px; }
.ficha { background: var(--areia); padding: 26px; border-radius: var(--raio); }
.ficha dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #dcd3c6; font-size: .93rem; }
.ficha dl div:last-child { border: 0; padding-bottom: 0; }
.ficha dt { color: var(--cinza); } .ficha dd { text-align: right; font-weight: 500; }
.descricao, .prosa { max-width: 68ch; line-height: 1.7; }
.descricao p, .prosa p, .descricao ul, .prosa ul, .prosa ol { margin-bottom: 14px; }
.descricao h3, .prosa h2 { font: 600 1.25rem/1.3 var(--serifa); color: var(--vinho); margin: 28px 0 8px; }
.descricao ul, .prosa ul { list-style: disc; padding-left: 20px; } .prosa ol { list-style: decimal; padding-left: 20px; }
.descricao li, .prosa li { margin-bottom: 5px; }
.descricao table, .prosa table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: .93rem; }
.descricao td, .prosa td, .prosa th { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.descricao blockquote { margin: 0 0 14px; padding-left: 16px; border-left: 2px solid var(--ouro); font-style: italic; }
.prosa .titulo { margin-bottom: 22px; }
.barra-compra { display: none; }

/* Sacola */
.sacola-painel { position: fixed; inset: 0; z-index: 60; }
.sacola-fundo { position: absolute; inset: 0; background: rgba(31, 22, 24, .5); }
.sacola-painel aside { position: absolute; right: 0; top: 0; bottom: 0; width: min(430px, 100%); background: #fff; display: flex; flex-direction: column; animation: entra .22s ease; }
@keyframes entra { from { transform: translateX(30px); opacity: 0; } }
.sacola-painel header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--linha); }
.sacola-painel h2 { font: 600 1.4rem var(--serifa); color: var(--vinho); }
.sacola-corpo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sacola-itens { flex: 1; overflow: auto; padding: 4px 22px; }
.linha { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linha); align-items: start; }
.linha img { background: var(--areia); border-radius: var(--raio); aspect-ratio: 4/5; object-fit: contain; width: 62px; padding: 4px; }
.linha b { font: 600 .95rem/1.3 var(--sans); display: block; }
.linha small { color: var(--cinza); font-size: .82rem; }
.linha .qtd { margin-top: 8px; display: inline-flex; }
.linha .qtd button { width: 32px; height: 32px; font-size: 1rem; } .linha .qtd span { width: 30px; text-align: center; line-height: 32px; font-size: .9rem; }
.linha-preco { text-align: right; font-weight: 600; white-space: nowrap; }
.linha-preco button { display: block; margin: 8px 0 0 auto; font-size: .8rem; font-weight: 400; color: var(--cinza); text-decoration: underline; }
.sacola-pe { border-top: 1px solid var(--linha); padding: 18px 22px 22px; display: grid; gap: 12px; background: #fff; }
.meta-frete { font-size: .86rem; }
.meta-frete i { display: block; height: 4px; background: var(--linha); border-radius: 4px; margin-top: 7px; overflow: hidden; }
.meta-frete i::after { content: ""; display: block; height: 100%; width: var(--p, 0%); background: var(--verde); transition: width .3s; }
.sub { display: flex; justify-content: space-between; font-size: 1.05rem; font-weight: 600; }
.sub small { display: block; font-weight: 400; font-size: .82rem; color: var(--verde); }
.sacola-vazia { padding: 56px 28px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.sacola-vazia p { color: var(--cinza); }
.aviso { background: #fbf1e6; color: #6d3d12; padding: 10px 14px; font-size: .88rem; border-radius: var(--raio); margin: 12px 22px 0; }

/* Checkout */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(28px, 5vw, 72px); padding-block: 36px 80px; align-items: start; }
.ck-form section { padding: 26px 0; border-bottom: 1px solid var(--linha); }
.ck-form h2 { font: 600 1.3rem var(--serifa); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.ck-form h2 b { width: 28px; height: 28px; border-radius: 50%; background: var(--vinho); color: #fff; display: grid; place-items: center; font: 600 .85rem var(--sans); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.c2 { grid-column: 1 / -1; }
.campo { display: grid; gap: 5px; }
.campo span { font-size: .86rem; font-weight: 500; }
.campo input, .campo textarea { border: 1px solid #cfc6bd; border-radius: var(--raio); padding: 12px 13px; background: #fff; width: 100%; }
.campo input:focus, .campo textarea:focus, .cep input:focus { outline: none; border-color: var(--vinho); box-shadow: 0 0 0 3px rgba(74, 15, 30, .12); }
.campo em, .ck-fim > em { font-style: normal; color: var(--alerta); font-size: .82rem; min-height: 0; }
.campo.erro input { border-color: var(--alerta); }
.campos + .dica, .pagtos + .dica { margin-top: 12px; }
.frete-res { align-self: end; font-size: .9rem; color: var(--cinza); padding-bottom: 12px; }
.frete-res b { color: var(--verde); }
.pagtos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pagtos input { position: absolute; opacity: 0; }
.pagtos span { display: grid; gap: 2px; border: 1px solid #cfc6bd; border-radius: var(--raio); padding: 16px; cursor: pointer; height: 100%; }
.pagtos em { font-style: normal; color: var(--verde); font-weight: 600; font-size: .88rem; }
.pagtos small { color: var(--cinza); }
.pagtos input:checked + span { border-color: var(--vinho); box-shadow: inset 0 0 0 1px var(--vinho); background: #fbf7f3; }
.pagtos input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }
.pagtos + .dica + .campo { margin-top: 18px; }
.ck-fim { border: 0 !important; display: grid; gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--vinho); flex: none; margin: 2px 0 0; }
.check a { text-decoration: underline; }
.ck-alerta { background: #fbeae6; color: #7c2415; padding: 12px 16px; border-radius: var(--raio); margin-top: 16px; font-size: .93rem; }
.ck-ok { background: #e8f3ed; color: #134a33; padding: 14px 16px; border-radius: var(--raio); }
.ck-resumo { background: var(--areia); border-radius: var(--raio); padding: 26px; position: sticky; top: 24px; }
.ck-resumo h2 { font: 600 1.3rem var(--serifa); margin-bottom: 8px; }
.ck-resumo .linha { grid-template-columns: 52px 1fr auto; border-color: #dcd3c6; }
.ck-resumo .linha img { width: 52px; background: #fff; }
.totais { margin-top: 16px; display: grid; gap: 8px; font-size: .95rem; }
.totais div { display: flex; justify-content: space-between; }
.totais .total { font-size: 1.25rem; font-weight: 600; border-top: 1px solid #dcd3c6; padding-top: 12px; margin-top: 4px; }
.totais .verde { color: var(--verde); }
.form-simples { margin-top: 26px; }
.contatos { margin-top: 20px; display: grid; gap: 10px; } .contatos a { text-decoration: underline; text-underline-offset: 3px; }
.pote { position: absolute; left: -9999px; }

/* Pedido */
.pedido { max-width: 920px; padding-block: 44px 80px; }
.pedido header p { color: var(--cinza); }
.pedido .ok { color: var(--verde); font-weight: 600; margin-bottom: 4px; }
.etapas { display: grid; grid-template-columns: repeat(5, 1fr); margin: 32px 0; counter-reset: e; }
.etapas li { counter-increment: e; font-size: .82rem; color: var(--cinza); padding-top: 14px; border-top: 3px solid var(--linha); padding-right: 8px; }
.etapas li::before { content: counter(e) ". "; }
.etapas .feita { border-color: var(--verde); color: var(--tinta); }
.etapas .atual { border-color: var(--vinho); color: var(--vinho); font-weight: 600; }
.pagar, .rastreio { background: var(--areia); padding: 26px; border-radius: var(--raio); margin-bottom: 32px; display: grid; gap: 14px; justify-items: start; }
.pedido h2 { font: 600 1.25rem var(--serifa); color: var(--vinho); margin-bottom: 10px; }
.pagar h2, .rastreio h2 { margin: 0; }
.chave { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
code { background: #fff; padding: 9px 12px; border-radius: var(--raio); font: 500 .95rem ui-monospace, Menlo, monospace; border: 1px solid var(--linha); word-break: break-all; }
.pedido-grade { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; }
.pedido-grade section > p { margin-bottom: 10px; }
.pedido-grade h2 + p + .dica { margin-bottom: 26px; }
.itens li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linha); align-items: center; }
.itens img { background: var(--areia); border-radius: var(--raio); padding: 4px; }
.itens small { display: block; color: var(--cinza); }
.hist li { display: flex; justify-content: space-between; padding: 7px 0; font-size: .9rem; border-bottom: 1px solid var(--linha); } .hist small { color: var(--cinza); }
.hist b { font-weight: 500; }
.guardar { margin-top: 36px; color: var(--cinza); font-size: .9rem; }

/* Rodapé */
.rodape { background: var(--vinho-esc); color: #e9dccf; margin-top: clamp(64px, 9vw, 120px); font-size: .92rem; }
.pg-home .rodape { margin-top: 0; }
.rodape-grade { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 1.2fr; gap: 36px; padding-block: 56px 40px; }
.rodape h2 { font: 600 .92rem var(--sans); color: var(--ouro-claro); margin-bottom: 14px; }
.rodape li { margin-bottom: 9px; }
.rodape a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rodape-marca p { margin-top: 16px; max-width: 30ch; opacity: .85; }
.rodape-contato { display: grid; gap: 8px; align-content: start; } .rodape-contato h2 { margin-bottom: 6px; }
.rodape .zap-link { color: #fff; }
.pagto { opacity: .8; }
.rodape-fim { border-top: 1px solid rgba(255,255,255,.14); padding-block: 22px 28px; display: grid; gap: 10px; font-size: .82rem; opacity: .85; }
.aviso18 b { border: 1px solid currentColor; border-radius: 50%; padding: 3px 5px; font-size: .72rem; margin-right: 8px; }
.rodape-simples { border-top: 1px solid var(--linha); font-size: .85rem; color: var(--cinza); }
.rodape-simples .cx { display: flex; gap: 24px; padding-block: 20px; flex-wrap: wrap; } .rodape-simples a:hover { text-decoration: underline; }
.zap-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 54px; height: 54px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(20, 60, 40, .3); }
.zap-flutuante svg { width: 26px; height: 26px; }

/* Confirmação de idade */
.idade { position: fixed; inset: 0; z-index: 90; background: rgba(48, 10, 20, .94); display: grid; place-items: center; padding: 20px; }
.idade div { background: #fff; max-width: 420px; padding: 40px 34px; text-align: center; border-radius: var(--raio); display: grid; gap: 14px; }
.idade img { width: 170px; margin: 0 auto 6px; filter: brightness(.72); }
.idade h2 { font: 600 1.7rem/1.15 var(--serifa); color: var(--vinho); }
.idade p { color: var(--cinza); font-size: .93rem; }
.idade .btn { width: 100%; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 12px 20px; border-radius: var(--raio); z-index: 80; font-size: .92rem; animation: sobe .2s ease; }
@keyframes sobe { from { opacity: 0; transform: translate(-50%, 8px); } }

@media (max-width: 1000px) {
  .estilos { grid-template-columns: 1fr 1fr; gap: 12px; } .estilo { aspect-ratio: 16 / 9; }
  .grade { grid-template-columns: repeat(3, 1fr); }
  .catalogo { grid-template-columns: 1fr; }
  .filtros-celular > summary { display: flex; justify-content: space-between; border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 16px; font-weight: 600; cursor: pointer; margin-bottom: 14px; list-style: none; }
  .filtros-celular > summary::after { content: "+"; }
  .filtros-celular[open] > summary::after { content: "−"; }
  .filtros { margin-bottom: 22px; }
  .checkout { grid-template-columns: 1fr; }
  .ck-resumo { position: static; order: -1; }
  .rodape-grade { grid-template-columns: 1fr 1fr 1fr; } .rodape-marca { grid-column: 1 / -1; }
  .detalhes { grid-template-columns: 1fr; }
  .paises { columns: 2; }
}
@media (max-width: 760px) {
  .cx { width: min(100% - 32px, var(--cx)); }
  .faixa .cx { gap: 0 16px; font-size: .76rem; } .faixa span + span::before { margin-right: 16px; }
  .topo-linha { flex-wrap: wrap; gap: 12px 14px; padding-block: 10px 12px; }
  .menu-btn { display: grid; gap: 6px; width: 30px; padding: 8px 2px; } .menu-btn span { height: 2px; background: #fff; display: block; }
  .logo { margin-right: auto; } .logo img { width: 118px; }
  .busca { order: 5; flex-basis: 100%; max-width: none; } .busca input { padding: 9px 14px; }
  .topo-link, .sacola span { display: none; }
  .nav { display: none; } .nav[data-aberto] { display: block; } .nav .cx { flex-direction: column; gap: 0; padding-block: 6px; } .nav a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); margin: 0; }
  .nav-so-celular { display: block; }
  .heroi { margin-top: 16px; }
  .estilos { gap: 8px; margin-top: 20px; } .estilo { aspect-ratio: 1 / .78; padding: 12px; border-radius: 6px; } .estilo::before { background-size: auto 104%; background-position: right -16px center; } .estilo::after { background: linear-gradient(90deg, var(--veu) 0%, var(--veu) 30%, transparent 80%); }
  .estilo-nome { font-size: 1.02rem; max-width: 70%; } .estilo-nome::after { width: 20px; margin: 6px 0 5px; } .estilo-info { font-size: .66rem; max-width: none; } .estilo-info > span { display: block; } .estilo-preco { font-size: .9rem; }
  .grade, .catalogo .grade { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .card h3 { font-size: .95rem; } .card .btn { font-size: .82rem; padding: 6px 8px; }
  .paises { columns: 1; } .paises span { font-size: 1.35rem; }
  .garantias { grid-template-columns: 1fr; gap: 28px; }
  .pdp { grid-template-columns: 1fr; }
  .galeria { position: static; grid-template-columns: 1fr; }
  .galeria-foto { grid-column: 1; aspect-ratio: 1; } .galeria-minis { grid-column: 1; grid-row: 2; flex-direction: row; } .galeria-minis button { width: 58px; }
  .kits { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; } .pagtos { grid-template-columns: 1fr; }
  .cat-topo { grid-template-columns: 1fr; }
  .pedido-grade { grid-template-columns: 1fr; gap: 28px; }
  .etapas { grid-template-columns: 1fr; gap: 0; } .etapas li { border-top: 0; border-left: 3px solid var(--linha); padding: 6px 0 6px 12px; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .barra-compra { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: #fff; border-top: 1px solid var(--linha); padding: 10px 16px; gap: 14px; align-items: center; transform: translateY(110%); transition: transform .2s; }
  .barra-compra[data-visivel] { transform: none; }
  .barra-compra div { flex: 1; min-width: 0; } .barra-compra b { display: block; font: 600 .92rem var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barra-compra span { font-weight: 600; font-size: .9rem; }
  .pg-produto .zap-flutuante { bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Pagamento Mercado Pago */
.mp-pagar .mp-total { font-size: 1.05rem; margin: 4px 0 12px; } .mp-pagar .mp-total strong { font: 600 1.35rem/1.2 var(--serifa); color: var(--vinho); } .mp-pagar .mp-total small { color: var(--cinza); }
.mp-estado { font-size: .92rem; color: var(--cinza); margin: 6px 0 12px; } .mp-estado[hidden] { display: none; }
.mp-estado.mp-erro { color: var(--alerta); font-weight: 500; } .mp-estado.mp-ok { color: var(--verde); font-weight: 600; }
#pagamento-brick, #status-brick { min-height: 120px; margin-bottom: 12px; } #pagamento-brick[hidden], #status-brick[hidden] { display: none; }

/* Opções de frete (Melhor Envio) */
.frete-opcoes { border: 0; padding: 0; margin: 14px 0 6px; } .frete-opcoes[hidden] { display: none; }
.frete-opcoes legend { font-weight: 600; font-size: .95rem; margin-bottom: 8px; padding: 0; }
.frete-op { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 8px; cursor: pointer; background: #fff; }
.frete-op:has(input:checked) { border-color: var(--vinho); box-shadow: inset 0 0 0 1px var(--vinho); }
.frete-op span { display: grid; } .frete-op small { color: var(--cinza); font-size: .82rem; } .frete-op em { font-style: normal; font-weight: 600; white-space: nowrap; } .frete-op input { accent-color: var(--vinho); }