/* ============================================================
   DOURA (loja demo) · visual preto e dourado
   ============================================================ */

/* ---------- Fontes (arquivos locais) ---------- */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/poppins-latin-800-normal.woff2') format('woff2'); }

/* ---------- Cores e medidas ---------- */
:root {
    --preto: #0b0b0c;
    --preto-2: #161618;
    --ouro: #c19101;
    --ouro-claro: #e0b12e;
    --ouro-brilho: #f3d27a;
    --ouro-escuro: #8f6a00;
    --ouro-suave: #f7efd9;
    --fundo: #f7f6f2;
    --texto: #18181b;
    --texto-2: #52525b;
    --texto-3: #85858e;
    --borda: #e9e6de;
    --verde: #15803d;
    --verde-wa: #25d366;
    --vermelho: #dc2626;

    --grad-ouro: linear-gradient(135deg, #f3d27a 0%, #e0b12e 35%, #c19101 70%, #a37a00 100%);
    --raio: 20px;
    --sombra-s: 0 1px 2px rgb(0 0 0 / .04), 0 2px 8px rgb(0 0 0 / .04);
    --sombra-m: 0 16px 36px -18px rgb(0 0 0 / .25);
    --sombra-l: 0 24px 60px -20px rgb(0 0 0 / .4);
    --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fonte-titulo: 'Poppins', 'Inter', system-ui, sans-serif;
    --suave: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); color: var(--texto); background: var(--fundo); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); line-height: 1.15; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 20px; height: 20px; flex: none; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ouro); color: #1a1300; padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.pular:focus { top: 12px; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform .2s var(--suave), box-shadow .2s, background-color .2s, color .2s, border-color .2s; }
.btn:active { transform: scale(.98); }
.btn-ouro { background: var(--grad-ouro); color: #1a1300; box-shadow: 0 10px 28px -12px rgb(193 145 1 / .85); }
.btn-ouro:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgb(193 145 1 / .9); }
.btn-contorno { border: 1px solid rgb(255 255 255 / .2); color: #fff; }
.btn-contorno:hover { background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .35); }
.btn-escuro { background: var(--preto); color: #fff; }
.btn-escuro:hover { background: #26262a; }
.btn-claro { background: #f2f1ed; color: var(--texto); }
.btn-claro:hover { background: #e9e7e1; }
.btn-perigo { background: #fbeaea; color: var(--vermelho); border: 1px solid #f3c9c9; }
.btn-perigo:hover { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.btn-sm { padding: 8px 12px; font-size: 13px; }
.btn-sm .ico { width: 15px; height: 15px; }
.btn-wa { background: var(--verde-wa); color: #05250e; }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgb(37 211 102 / .9); }
.btn-wa:disabled { background: #d4d4d8; color: #71717a; transform: none; box-shadow: none; cursor: not-allowed; }
.btn-wa-contorno { width: 100%; margin-top: 12px; border: 1.5px solid var(--verde-wa); color: #11803f; }
.btn-wa-contorno:hover { background: rgb(37 211 102 / .08); }
.btn-comprar { width: 100%; margin-top: 12px; }

/* Calcular frete na página do produto */
.frete-consulta { margin: 6px 0 16px; padding: 16px; border: 1px solid var(--borda); border-radius: 16px; background: #fff; }
.frete-consulta .frete-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.frete-consulta .frete-label .ico { width: 18px; height: 18px; color: var(--ouro-escuro); }
.frete-consulta .frete-cep-linha { display: flex; gap: 8px; }
.frete-consulta .frete-cep-linha input { flex: 1; height: 46px; border: 1px solid var(--borda); border-radius: 12px; padding: 0 14px; font-size: 15px; }
.frete-consulta .frete-cep-linha input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgb(193 145 1 / .15); }
.frete-consulta .frete-cep-linha .btn { height: 46px; padding: 0 18px; }
.frete-consulta .frete-msg { margin-top: 10px; font-size: 13px; color: var(--texto-2); }
.frete-consulta .frete-msg.erro { color: var(--vermelho); }
.frete-lista { display: grid; gap: 8px; margin-top: 10px; }
.fp-op { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 12px; }
.fp-op .fo-nome { font-weight: 600; font-size: 14px; }
.fp-op .fo-prazo { grid-column: 1; font-size: 12px; color: var(--texto-3); }
.fp-op .fo-preco { grid-row: span 2; align-self: center; font-family: var(--fonte-titulo); font-weight: 700; }
.btn-bloco { width: 100%; }
.btn-desativado { margin-top: 18px; background: #e4e4e7; color: #71717a; cursor: not-allowed; }
.btn-icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--texto-2); transition: background-color .2s, color .2s; }
.btn-icone:hover { background: #f2f1ed; color: var(--texto); }

/* ---------- Faixa de aviso ---------- */
.aviso { background: var(--preto); color: #b8b3a6; font-size: 12.5px; text-align: center; padding: 8px 16px; letter-spacing: .02em; border-bottom: 1px solid rgb(255 255 255 / .06); }
.aviso strong { color: var(--ouro-brilho); font-weight: 600; }

/* ---------- Cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: rgb(11 11 12 / .9); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgb(255 255 255 / .07); color: #fff; }
.topo-linha { display: flex; align-items: center; gap: 16px; height: 72px; }

.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo-marca { width: 34px; height: 34px; filter: drop-shadow(0 4px 10px rgb(224 177 46 / .35)); }
.logo-texto { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: 22px; letter-spacing: .14em; line-height: 1; background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo small { display: block; margin-top: 4px; font-size: 9.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #8f8a7d; line-height: 1; }

.busca { position: relative; flex: 1; max-width: 400px; margin-inline: auto; }
.busca .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #8f8a7d; pointer-events: none; }
.busca input { width: 100%; height: 44px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .06); color: #fff; padding: 0 18px 0 46px; font-size: 14px; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.busca input::placeholder { color: #8f8a7d; }
.busca input:focus { outline: none; border-color: var(--ouro); background: rgb(255 255 255 / .1); box-shadow: 0 0 0 4px rgb(193 145 1 / .2); }
.busca input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.btn-carrinho { position: relative; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 14px; border-radius: 999px; background: var(--grad-ouro); color: #1a1300; font-weight: 600; font-size: 14px; flex: none; box-shadow: 0 8px 22px -10px rgb(193 145 1 / .8); transition: transform .2s var(--suave); }
.btn-carrinho:hover { transform: translateY(-1px); }
.contador { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--preto); color: var(--ouro-brilho); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.contador.pulso { animation: pulso .5s var(--suave); }
@keyframes pulso { 40% { transform: scale(1.35); } }

/* Calculadora: contorno dourado para se destacar do "Entrar" sem brigar com o carrinho. */
.btn-calc { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(224 177 46 / .45); background: rgb(224 177 46 / .1); color: var(--ouro-brilho); font-weight: 600; font-size: 14px; flex: none; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.btn-calc:hover { background: rgb(224 177 46 / .2); border-color: var(--ouro-claro); }
.btn-calc.ativo { background: rgb(224 177 46 / .22); border-color: var(--ouro-claro); }
.btn-calc .ico { width: 20px; height: 20px; }

.btn-conta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .06); color: #fff; font-weight: 600; font-size: 14px; flex: none; transition: background-color .2s, border-color .2s; }
.btn-conta:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .3); }
.btn-conta .ico { width: 20px; height: 20px; }

.gaveta-login { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; padding: 12px 14px; border-radius: 12px; background: var(--ouro-suave); font-size: 13px; line-height: 1.4; color: #5a4500; }
.gaveta-login .ico { width: 18px; height: 18px; flex: none; color: var(--ouro-escuro); }

.topo-cats { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; margin-top: -4px; }
.topo-cats::-webkit-scrollbar { display: none; }
.topo-cats a { white-space: nowrap; font-size: 13px; font-weight: 500; color: #aaa597; padding: 6px 12px; border-radius: 999px; transition: color .2s, background-color .2s; }
.topo-cats a:hover { color: #fff; background: rgb(255 255 255 / .07); }
.topo-cats a[aria-current] { color: var(--ouro-brilho); background: rgb(224 177 46 / .12); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--preto); color: #fff; isolation: isolate; }
.hero::before { content: ''; position: absolute; top: -260px; right: -160px; width: 760px; height: 760px; background: radial-gradient(circle, rgb(224 177 46 / .26), transparent 62%); z-index: -1; }
.hero::after { content: ''; position: absolute; bottom: -320px; left: -200px; width: 640px; height: 640px; background: radial-gradient(circle, rgb(193 145 1 / .13), transparent 62%); z-index: -1; }
.hero-grade { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 36px; padding-block: 36px 40px; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-escuro); }
.eyebrow .ico { width: 16px; height: 16px; }
.hero .eyebrow { color: var(--ouro-brilho); background: rgb(224 177 46 / .1); border: 1px solid rgb(224 177 46 / .25); padding: 7px 14px; border-radius: 999px; }
.hero h1 { font-size: clamp(36px, 5.2vw, 62px); font-weight: 700; margin: 22px 0 18px; letter-spacing: -.025em; line-height: 1.05; }
.hero h1 em { font-style: normal; background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 17px; color: #b3aea2; max-width: 480px; }
.hero-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-botoes .ico { width: 18px; height: 18px; }
.hero-numeros { display: flex; flex-wrap: wrap; gap: 20px 36px; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / .09); }
.hero-numeros strong { display: block; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; color: #fff; }
.hero-numeros span { font-size: 13px; color: #8f8a7d; }

.hero-visual { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin-left: auto; }
.hero-anel { position: absolute; inset: -6%; pointer-events: none; }
.hero-anel::before {
    content: ''; position: absolute; inset: 8% 8% 14%;
    background: radial-gradient(closest-side, rgb(224 177 46 / .26), rgb(224 177 46 / .07) 55%, transparent 76%);
    filter: blur(12px);
    animation: pulsarLuz 7s ease-in-out infinite;
}
.hero-anel::after {
    content: ''; position: absolute; left: 18%; right: 18%; bottom: 9%; height: 9%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(224 177 46 / .3), transparent 72%);
    filter: blur(10px);
}
@keyframes pulsarLuz { 50% { opacity: .72; transform: scale(1.05); } }
@keyframes girar { to { transform: rotate(360deg); } }
.hero-produto { position: absolute; filter: drop-shadow(0 30px 34px rgb(0 0 0 / .55)); animation: flutuar 6s ease-in-out infinite; }
.hero-produto svg { width: 100%; height: auto; }
.hero-produto.p1 { width: 48%; left: 26%; top: 8%; z-index: 2; }
.hero-produto.p2 { width: 38%; left: 1%; top: 34%; animation-delay: -2s; }
.hero-produto.p3 { width: 38%; right: 1%; top: 32%; animation-delay: -4s; }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-selo { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 12px; background: #fff; color: var(--texto); border-radius: 18px; padding: 12px 18px 12px 12px; box-shadow: var(--sombra-l); white-space: nowrap; }
.hero-selo strong { display: block; font-size: 14px; font-weight: 600; }
.hero-selo div span { display: block; font-size: 12.5px; color: var(--texto-3); }

/* ---------- Vantagens ---------- */
.garantias { background: #fff; border-bottom: 1px solid var(--borda); }
.garantias-grade { display: grid; grid-template-columns: repeat(4, 1fr); }
.garantia { display: flex; align-items: center; gap: 14px; padding: 22px 20px; }
.garantia + .garantia { border-left: 1px solid var(--borda); }
.garantia strong { display: block; font-size: 14px; font-weight: 600; }
.garantia div span { display: block; font-size: 13px; color: var(--texto-3); }
.garantia-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--ouro-suave); color: var(--ouro-escuro); display: grid; place-items: center; flex: none; }
.garantia-ico .ico { width: 22px; height: 22px; }

/* ---------- Seções ---------- */
.secao { padding-block: 72px; }
.secao-cats { padding-bottom: 24px; }
.secao-produtos { padding-top: 48px; scroll-margin-top: 110px; }
.secao-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.secao-topo h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; margin-top: 8px; }
.link-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--texto); transition: color .2s; }
.link-ver:hover { color: var(--ouro-escuro); }
.link-ver .ico { width: 16px; height: 16px; }

/* ---------- Categorias ---------- */

/* ---------- Filtros do catálogo ---------- */
.ferramentas { display: flex; align-items: center; gap: 16px; }
.contagem { font-size: 14px; color: var(--texto-3); }
.ordenar select { height: 40px; border-radius: 999px; border: 1px solid var(--borda); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px; padding: 0 40px 0 16px; appearance: none; -webkit-appearance: none; font-size: 14px; color: var(--texto-2); cursor: pointer; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 28px; }
.chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--borda); background: #fff; font-size: 14px; font-weight: 500; color: var(--texto-2); transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover { border-color: #cfc8b6; color: var(--texto); }
.chip[aria-pressed="true"] { background: var(--preto); border-color: var(--preto); color: #fff; }

/* ---------- Cartões de produto ---------- */
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--raio); border: 1px solid var(--borda); overflow: hidden; transition: transform .35s var(--suave), box-shadow .35s, border-color .35s; animation: surgir .5s var(--suave) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -24px rgb(0 0 0 / .3); border-color: rgb(193 145 1 / .35); }
@keyframes surgir { from { opacity: 0; transform: translateY(14px); } }
.card-midia { position: relative; aspect-ratio: 1 / 1; background: #fff; display: grid; place-items: center; overflow: hidden; padding: 10%; }
.card-midia > img, .card-midia > svg { position: relative; width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--suave); }
.card:hover .card-midia > img, .card:hover .card-midia > svg { transform: scale(1.06); }

.produto-foto { object-fit: contain; }

.selos { position: absolute; top: 12px; left: 12px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.selo { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--texto); box-shadow: var(--sombra-s); }
.selo-desconto { background: var(--preto); color: var(--ouro-brilho); }
.selo-esgotado { background: #e4e4e7; color: #52525b; }
.card-corpo { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; }
.card-marca { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro-escuro); }
.card-nome { font-family: var(--fonte); font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card-precos { margin-top: auto; padding-top: 10px; }
.preco-antigo { display: block; font-size: 13px; color: var(--texto-3); text-decoration: line-through; }
.preco { display: flex; align-items: baseline; gap: 7px; font-family: var(--fonte-titulo); font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.preco small { font-family: var(--fonte); font-size: 12px; font-weight: 600; color: var(--ouro-escuro); letter-spacing: .02em; }
.parcela { display: block; font-size: 12.5px; color: var(--texto-3); }
.card-add { position: relative; z-index: 2; width: 100%; height: 46px; margin-top: 10px; border-radius: 999px; background: var(--grad-ouro); color: #1a1300; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; box-shadow: 0 8px 20px -12px rgb(193 145 1 / .9); transition: transform .2s var(--suave), box-shadow .2s, filter .2s; }
.card-add .ico { width: 18px; height: 18px; }
.card-add:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgb(193 145 1 / .95); }
.card-add:disabled { background: #f0f0f2; color: #a1a1aa; cursor: not-allowed; transform: none; box-shadow: none; }
.card.esgotado .produto-svg { filter: grayscale(1); opacity: .5; }
.card.esgotado .preco { color: var(--texto-3); }

.vazio, .nao-encontrado { text-align: center; padding: 64px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vazio p, .nao-encontrado p { color: var(--texto-3); margin-bottom: 12px; }
.vazio-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--ouro-suave); color: var(--ouro-escuro); display: grid; place-items: center; margin-bottom: 6px; }
.vazio-ico .ico { width: 28px; height: 28px; }
.nao-encontrado { padding-block: 120px; }
.nao-encontrado h1 { font-size: 30px; }

/* ---------- Faixa WhatsApp ---------- */
.faixa { padding-bottom: 80px; }
.faixa-caixa { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 48px; border-radius: 28px; background: var(--preto); color: #fff; }
.faixa-caixa::before { content: ''; position: absolute; top: -180px; right: -120px; width: 460px; height: 460px; background: radial-gradient(circle, rgb(224 177 46 / .32), transparent 64%); z-index: -1; }
.faixa-caixa .eyebrow { color: var(--ouro-brilho); }
.faixa-caixa h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin-top: 10px; max-width: 560px; }
.faixa-caixa p { color: #b3aea2; margin-top: 10px; max-width: 520px; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--preto); color: #aaa597; padding-top: 64px; }
.rodape-grade { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 48px; }
.rodape-sobre p { font-size: 14px; margin-top: 18px; max-width: 320px; }
.rodape h4 { font-family: var(--fonte); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.rodape ul { display: grid; gap: 10px; font-size: 14px; }
.rodape a { transition: color .2s; }
.rodape a:hover { color: var(--ouro-brilho); }
.com-ico { display: flex; align-items: center; gap: 10px; }
.com-ico .ico { width: 18px; height: 18px; color: var(--ouro); }
.rodape-base { border-top: 1px solid rgb(255 255 255 / .08); padding-block: 20px; font-size: 12.5px; color: #75716a; }

/* ---------- Página de produto ---------- */
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 24px; font-size: 13px; color: var(--texto-3); }
.migalhas a { transition: color .2s; }
.migalhas a:hover { color: var(--texto); }
.migalhas .ico { width: 14px; height: 14px; }
.migalhas [aria-current] { color: var(--texto-2); }

.produto { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; padding-block: 24px 64px; }
.produto > * { min-width: 0; }
.produto-midia { position: sticky; top: 130px; aspect-ratio: 1 / 1; border-radius: 28px; background: #fff; border: 1px solid var(--borda); padding: 7%; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.produto-midia > img, .produto-midia > svg { width: 100%; height: 100%; object-fit: contain; }
.produto-midia .produto-svg { filter: drop-shadow(0 24px 26px rgb(0 0 0 / .14)); }
.produto-midia .selos { top: 20px; left: 20px; }
.produto.esgotado .produto-svg { filter: grayscale(1); opacity: .55; }

.produto-info h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; margin: 10px 0 14px; letter-spacing: -.02em; }
.produto-resumo { font-size: 16.5px; color: var(--texto-2); }

.bloco-preco { margin-top: 28px; padding: 24px; border-radius: var(--raio); background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra-s); }
.bloco-preco .linha { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.bloco-preco .preco { font-size: 36px; }
.bloco-preco .parcela { font-size: 14px; margin-top: 2px; }.pill-desconto { background: var(--preto); color: var(--ouro-brilho); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.estoque { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; font-weight: 500; color: var(--verde); }
.estoque::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgb(21 128 61 / .15); }
.estoque.fora { color: var(--vermelho); }
.estoque.baixo { color: #b45309; }
.estoque.baixo::before { box-shadow: 0 0 0 4px rgb(180 83 9 / .15); }
.estoque.fora::before { box-shadow: 0 0 0 4px rgb(220 38 38 / .15); }

.compra { display: flex; gap: 12px; margin-top: 20px; }
.compra .btn { flex: 1; height: 54px; }
.qtd { display: inline-flex; align-items: center; flex: none; height: 54px; border: 1px solid var(--borda); border-radius: 999px; background: #fff; }
.qtd button { width: 44px; height: 100%; display: grid; place-items: center; color: var(--texto-2); border-radius: 999px; transition: color .2s; }
.qtd button:hover { color: var(--texto); }
.qtd button .ico { width: 18px; height: 18px; }
.qtd input, .qtd output { width: 34px; border: 0; background: none; text-align: center; font-weight: 600; font-size: 15px; -moz-appearance: textfield; appearance: textfield; }
.qtd input::-webkit-inner-spin-button, .qtd input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qtd input:focus { outline: none; }

.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.beneficio { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--borda); font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.beneficio .ico { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--ouro-suave); color: var(--ouro-escuro); flex: none; box-sizing: border-box; }

.detalhes { margin-top: 28px; border-top: 1px solid var(--borda); }
.detalhes details { border-bottom: 1px solid var(--borda); }
.detalhes summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-weight: 600; font-size: 15.5px; }
.detalhes summary::-webkit-details-marker { display: none; }
.detalhes summary .ico { width: 18px; height: 18px; color: var(--texto-3); transition: transform .3s var(--suave); }
.detalhes details[open] summary .ico { transform: rotate(45deg); }
.detalhes .conteudo { padding-bottom: 20px; color: var(--texto-2); font-size: 15px; }
.lista-check { display: grid; gap: 10px; }
.lista-check li { display: flex; align-items: flex-start; gap: 10px; }
.lista-check .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--verde); }
.aviso-legal { margin-top: 20px; padding: 12px 14px; border-radius: 12px; border: 1px dashed #d8d2c2; background: #fbfaf6; font-size: 13px; color: var(--texto-3); }

.secao-relacionados { padding-top: 24px; border-top: 1px solid var(--borda); background: #fff; }
.secao-relacionados .card { background: var(--fundo); }

.barra-compra { display: none; }

/* ---------- Gaveta do carrinho ---------- */
.sobreposicao { position: fixed; inset: 0; z-index: 90; background: rgb(10 10 10 / .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(420px, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: var(--sombra-l); transform: translateX(100%); visibility: hidden; transition: transform .45s var(--suave), visibility .45s; }
body.gaveta-aberta { overflow: hidden; }
body.gaveta-aberta .sobreposicao { opacity: 1; visibility: visible; }
body.gaveta-aberta .gaveta { transform: none; visibility: visible; }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 18px 24px; border-bottom: 1px solid var(--borda); }
.gaveta-topo h2 { font-size: 20px; font-weight: 700; }
/* ---------- Selos de confiança no topo do carrinho ---------- */
.gaveta-selos { padding: 11px 18px; background: linear-gradient(180deg, #fffdf7, #f9f1df); border-bottom: 1px solid rgb(193 145 1 / .22); display: grid; gap: 7px; }
.gaveta-selo { display: flex; align-items: center; gap: 10px; }
.gaveta-selo-ico { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--preto); color: var(--ouro-brilho); display: grid; place-items: center; }
.gaveta-selo-ico .ico { width: 14px; height: 14px; }
.gaveta-selo > span:last-child { font-size: 11.5px; line-height: 1.4; color: #7a6535; }
.gaveta-selo strong { display: inline; font-size: 12.5px; font-weight: 700; color: #3d3116; letter-spacing: -.01em; }
.gaveta-selo strong::after { content: ' · '; font-weight: 400; color: #b8a878; }
.gaveta-selo b { color: #3d3116; font-weight: 700; }
.gaveta-itens { flex: 1; overflow-y: auto; padding: 4px 24px; }
.item { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--borda); }
.item-img { width: 72px; height: 72px; border-radius: 14px; background: var(--tom, #f3f1ec); display: grid; place-items: center; }
.item-img .produto-svg { width: 82%; height: 82%; }
.item-marca { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ouro-escuro); }
.item-nome { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.item-nome:hover { text-decoration: underline; }
.item-preco { margin-top: 6px; font-family: var(--fonte-titulo); font-size: 15px; font-weight: 700; }
.item-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.item .qtd { height: 34px; }
.item .qtd button { width: 30px; }
.item .qtd button .ico { width: 15px; height: 15px; }
.item .qtd output { width: 22px; font-size: 14px; }
.remover { font-size: 12px; color: var(--texto-3); text-decoration: underline; }
.remover:hover { color: var(--vermelho); }
.gaveta-vazia { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 64px 12px; text-align: center; color: var(--texto-3); }
.gaveta-vazia strong { color: var(--texto); font-size: 16px; }
.gaveta-base { display: grid; gap: 8px; padding: 18px 24px 24px; border-top: 1px solid var(--borda); }
.linha-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; }
.linha-sub, .linha-frete { font-size: 14px; color: var(--texto-2); }
.linha-sub strong, .linha-frete strong { font-family: var(--fonte); font-size: 15px; font-weight: 600; color: var(--texto); }
.linha-desc { font-size: 14px; color: #1a7a4a; }
.linha-desc strong { font-family: var(--fonte); font-size: 15px; font-weight: 600; color: #1a7a4a; }
.linha-geral { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--borda); }
.linha-geral strong { font-family: var(--fonte-titulo); font-size: 24px; font-weight: 700; }

/* Frete no carrinho */
.gaveta-frete { padding: 14px 24px; border-top: 1px solid var(--borda); }
.gaveta-cashback { margin: 12px 24px 0; padding: 12px 14px; border-radius: 12px; background: rgb(26 122 74 / .08); border: 1px solid rgb(26 122 74 / .25); }
.gaveta-cashback .check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #1a7a4a; cursor: pointer; margin: 0; }
.gaveta-cashback .check span { display: inline-flex; align-items: center; gap: 5px; }
.gaveta-cashback .ico { width: 16px; height: 16px; flex: none; }
.gaveta-cashback strong { color: #1a7a4a; }
.pagamento-escolha { margin: 4px 0 2px; }
.pagamento-titulo { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-2); margin-bottom: 7px; }
.pagamento-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pagamento-op { position: relative; }
.pagamento-op input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pagamento-op span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: 1.5px solid var(--borda); border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--texto-2); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.pagamento-op .ico { width: 16px; height: 16px; }
.pagamento-op input:checked + span { border-color: var(--ouro); background: var(--ouro-suave); color: var(--texto); }
.pagamento-op input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }
.frete-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--texto); margin-bottom: 8px; }
.frete-label .ico { width: 18px; height: 18px; color: var(--ouro-escuro); }
.frete-cep-linha { display: flex; gap: 8px; }
.frete-cep-linha input { flex: 1; height: 42px; border: 1px solid var(--borda); border-radius: 10px; padding: 0 12px; font-size: 15px; }
.frete-cep-linha input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgb(193 145 1 / .15); }
.frete-cep-linha .btn { height: 42px; padding: 0 16px; }
.frete-msg { margin-top: 10px; font-size: 13px; color: var(--texto-2); }
.frete-msg.erro { color: var(--vermelho); }
.frete-opcoes { display: grid; gap: 8px; margin-top: 10px; }
.frete-op { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.frete-op:hover { border-color: #cfc8b6; }
.frete-op:has(input:checked) { border-color: var(--ouro); background: var(--ouro-suave); }
.frete-op input { width: 18px; height: 18px; accent-color: var(--ouro-escuro); grid-row: span 2; }
.fo-nome { font-size: 14px; font-weight: 600; }
.fo-prazo { grid-column: 2; font-size: 12px; color: var(--texto-3); }
.fo-preco { grid-row: span 2; font-family: var(--fonte-titulo); font-weight: 700; }
.gaveta-base small { font-size: 12.5px; color: var(--texto-3); margin-bottom: 6px; }

/* ---------- Telas médias ---------- */
@media (max-width: 1080px) {
    /* Espaço curto no topo: o botão da calculadora fica só com o ícone. */
    .btn-calc { padding: 0; width: 44px; justify-content: center; }
    .btn-calc .rotulo { display: none; }
    .grade { grid-template-columns: repeat(3, 1fr); }
    .rodape-grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .hero-grade { grid-template-columns: 1fr; gap: 28px; padding-block: 44px 56px; }
    .hero-visual { max-width: 400px; margin-inline: auto; }
    .garantias-grade { grid-template-columns: repeat(2, 1fr); }
    .garantia:nth-child(3) { border-left: 0; }
    .garantia:nth-child(n + 3) { border-top: 1px solid var(--borda); }

    .produto { grid-template-columns: 1fr; gap: 28px; padding-bottom: 48px; }
    .produto-midia { position: relative; top: 0; }
    .compra .btn { min-width: 0; }

    /* barra fixa de compra na página do produto */
    .pg-produto { padding-bottom: 84px; }
    .barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--borda); box-shadow: 0 -12px 30px -18px rgb(0 0 0 / .25); }
    .barra-compra .preco { font-size: 20px; }
    .barra-compra .btn { height: 48px; padding: 0 22px; }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
    .aviso-extra { display: none; }
    .topo-linha--cheia { height: auto; flex-wrap: wrap; gap: 12px; padding-block: 12px; }
    .topo-linha--mini { flex-wrap: nowrap; }
    .busca { order: 3; flex-basis: 100%; max-width: none; }
    .btn-carrinho .rotulo { display: none; }
    .topo-cats { display: none; }
    .secao-produtos { scroll-margin-top: 130px; }

    .secao { padding-block: 52px; }
    .secao-cats { padding-bottom: 12px; }
    .secao-produtos { padding-top: 36px; }

    .grade { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .card-midia { padding: 8%; }
    .card-corpo { padding: 12px 12px 14px; gap: 4px; }
    .card-marca { font-size: 10px; }
    .card-nome { font-size: 13px; min-height: 2.6em; }
    .card-corpo .preco { font-size: 19px; gap: 5px; }
    .card-corpo .preco small { font-size: 10.5px; }
    .parcela { font-size: 11px; }
    /* O botão tem texto agora: nunca mais voltar ao quadradinho de 38px. */
    .card-add { height: 42px; margin-top: 8px; font-size: 12.5px; gap: 6px; }
    .card-add .ico { width: 15px; height: 15px; }
    .card-garantia { margin-top: 10px; padding: 6px 8px; font-size: 9px; letter-spacing: .05em; gap: 5px; }
    .card-garantia .ico { width: 12px; height: 12px; }
    .selos { top: 8px; left: 8px; }
    .selo { font-size: 10px; padding: 4px 8px; }
    .ver-mais .btn { min-width: 0; width: 100%; }

    .ferramentas { width: 100%; justify-content: space-between; }
    .faixa-caixa { padding: 32px 24px; }
    .faixa-caixa .btn { width: 100%; }
    .rodape-grade { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 480px) {
    .container { padding-inline: 16px; }
    /* Continua 2 por linha; só o texto encolhe para caber. */
    .card-corpo { padding: 10px 10px 12px; }
    .card-nome { font-size: 12.5px; }
    .card-corpo .preco { font-size: 17px; }
    .card-add { height: 40px; font-size: 11.5px; gap: 5px; }
    .card-add .ico { width: 14px; height: 14px; }
    .hero-numeros { gap: 16px 24px; }
    .hero-numeros strong { font-size: 18px; }
    .hero-selo { padding: 10px 14px 10px 10px; }
    .hero-selo strong { font-size: 13px; }
    .garantia { padding: 16px 10px; gap: 10px; }
    .garantia-ico { width: 36px; height: 36px; border-radius: 10px; }
    .garantia-ico .ico { width: 18px; height: 18px; }
    .garantia strong { font-size: 13px; }
    .garantia div span { font-size: 11.5px; }
    .beneficios { grid-template-columns: 1fr; }
    .beneficio { flex-direction: row; align-items: center; }
    .bloco-preco { padding: 20px; }
    .bloco-preco .preco { font-size: 30px; }
    .compra { gap: 10px; }
    .compra .qtd button { width: 38px; }
    .compra .btn { min-width: 0; padding: 0 14px; font-size: 14px; }
    .compra .btn .ico { display: none; }
}

/* Quem prefere menos movimento na tela */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Atalho para a calculadora (página do produto) ---------- */
.atalho-calc { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 15px 18px; border-radius: 16px; border: 1px solid rgb(193 145 1 / .3); background: linear-gradient(135deg, #fffaf0, #fdf4e0); color: var(--texto); transition: border-color .2s, transform .2s var(--suave), box-shadow .2s; }
.atalho-calc:hover { border-color: var(--ouro); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgb(193 145 1 / .8); }
.atalho-calc > .ico:first-child { width: 24px; height: 24px; flex: none; color: var(--ouro-escuro); }
.atalho-calc > .ico:last-child { width: 18px; height: 18px; flex: none; color: var(--ouro-escuro); margin-left: auto; }
.atalho-calc span { display: block; min-width: 0; }
.atalho-calc strong { display: block; font-size: 14.5px; font-weight: 600; }
.atalho-calc small { display: block; font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }

/* ---------- Calculadora de dose na página do produto ---------- */
.cdose { margin-top: 14px; border: 1px solid rgb(193 145 1 / .3); border-radius: 16px; background: linear-gradient(135deg, #fffaf0, #fdf4e0); overflow: hidden; }
.cdose > summary { display: flex; align-items: center; gap: 13px; padding: 15px 18px; cursor: pointer; list-style: none; transition: background-color .2s; }
.cdose > summary::-webkit-details-marker { display: none; }
.cdose > summary:hover { background: rgb(193 145 1 / .07); }
.cdose > summary > .ico:first-child { width: 24px; height: 24px; flex: none; color: var(--ouro-escuro); }
.cdose > summary span { display: block; min-width: 0; flex: 1; }
.cdose > summary strong { display: block; font-size: 14.5px; font-weight: 600; }
.cdose > summary small { display: block; font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }
.cdose-mais { width: 18px; height: 18px; flex: none; color: var(--ouro-escuro); transition: transform .2s var(--suave); }
.cdose[open] .cdose-mais { transform: rotate(45deg); }

.cdose-corpo { padding: 4px 18px 18px; border-top: 1px solid rgb(193 145 1 / .2); }
.cdose-ampola { margin: 14px 0 16px; font-size: 13px; line-height: 1.5; color: var(--texto-2); }
.cdose-ampola strong { color: var(--texto); }

.cdose-campo { display: block; margin-bottom: 16px; }
.cdose-campo > span:first-child { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.cdose-dose { position: relative; display: block; max-width: 170px; }
.cdose-dose input { width: 100%; height: 52px; border: 1px solid var(--borda); border-radius: 12px; background: #fff; padding: 0 46px 0 14px; font: inherit; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cdose-dose input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(193 145 1 / .14); }
.cdose-dose i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 14px; font-weight: 600; color: var(--texto-3); }

.cdose-seringas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cdose-seringas input { position: absolute; opacity: 0; pointer-events: none; }
.cdose-seringas label > span { display: block; padding: 10px 8px; border: 1.5px solid var(--borda); border-radius: 12px; background: #fff; text-align: center; cursor: pointer; font-size: 14px; font-weight: 600; transition: border-color .2s, background-color .2s; }
.cdose-seringas label > span small { display: block; font-size: 10.5px; font-weight: 400; color: var(--texto-3); margin-top: 2px; line-height: 1.3; }
.cdose-seringas label:hover > span { border-color: var(--ouro-claro); }
.cdose-seringas input:checked + span { border-color: var(--ouro); background: var(--ouro-suave); }
.cdose-seringas input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }

.cdose-saida { margin: 18px 0 14px; padding: 18px 16px 14px; border-radius: 16px; background: var(--preto); color: #fff; }
.cdose-titulo { text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8f8a7d; margin: 0 0 2px; }
.cdose-numero { text-align: center; margin: 0; }
.cdose-numero strong { font-family: var(--fonte-titulo); font-weight: 800; font-size: 46px; line-height: 1.05; background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-variant-numeric: tabular-nums; }
.cdose-numero span { font-size: 17px; font-weight: 700; color: var(--ouro-claro); }
.cdose-nota { margin: 10px 0 14px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; text-align: center; }
.cdose-nota--ok { background: rgb(21 128 61 / .16); color: #86e2ab; }
.cdose-nota--meio { background: rgb(224 177 46 / .13); color: #f0cf82; }
.cdose-desenho .seringa-svg { width: 100%; height: auto; display: block; }
.cdose-avisos { margin-top: 12px; }
.cdose-avisos p { background: rgb(220 38 38 / .14); border-left: 3px solid #ff8d7a; color: #ffb3a4; padding: 10px 12px; border-radius: 0 10px 10px 0; font-size: 12.5px; line-height: 1.5; margin: 0 0 7px; }

.cdose-legal { display: flex; gap: 9px; align-items: flex-start; font-size: 11.5px; line-height: 1.55; color: var(--texto-3); margin: 0 0 12px; }
.cdose-legal .ico { width: 16px; height: 16px; flex: none; color: var(--ouro-escuro); margin-top: 1px; }
.cdose-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ouro-escuro); }
.cdose-link:hover { text-decoration: underline; }
.cdose-link .ico { width: 15px; height: 15px; }

@media (max-width: 480px) {
    .cdose-seringas { grid-template-columns: 1fr; }
    .cdose-seringas label > span { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
    .cdose-seringas label > span small { margin-top: 0; }
}

/* ---------- Prazo de envio (página do produto) ---------- */
.envio-prazo { display: flex; gap: 9px; align-items: flex-start; margin: 10px 0 0; padding: 11px 13px; border-radius: 12px; background: var(--fundo); font-size: 13px; line-height: 1.5; color: var(--texto-2); }
.envio-prazo .ico { width: 17px; height: 17px; flex: none; color: var(--ouro-escuro); margin-top: 1px; }
.envio-prazo strong { color: var(--texto); font-weight: 600; }

/* ---------- Ver mais produtos (página inicial) ---------- */
.ver-mais { text-align: center; margin-top: 34px; }
.ver-mais .btn { min-width: 260px; }
.ver-mais-dica { margin-top: 12px; font-size: 13px; color: var(--texto-3); }

/* ---------- Selo de garantia no cartão ---------- */
.card-garantia { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; padding: 9px 10px; border-radius: 999px; background: var(--preto); border: 0; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ouro-brilho); box-shadow: 0 4px 12px -6px rgb(0 0 0 / .5); }
.card-garantia .ico { color: var(--ouro-claro); }
.card-garantia span { white-space: nowrap; }
.card-garantia .g-curto { display: none; }
.card-garantia .ico { width: 14px; height: 14px; flex: none; }
.card.esgotado .card-garantia { display: none; }

/* ---------- Caixinha do cartão: branco no topo, creme no pé (x5) ---------- */
/* O branco de cima emenda com a foto; o fio dourado e a sombra interna marcam
   a divisão sem cortar o cartão em duas metades. */
.card-corpo {
    background: linear-gradient(180deg, #ffffff, #f7ecd8);
    border-top: 1px solid rgb(193 145 1 / .3);
    box-shadow: inset 0 7px 10px -9px rgb(0 0 0 / .1);
}
.card-corpo .preco small { color: var(--ouro-escuro); }
.card.esgotado .card-corpo { background: linear-gradient(180deg, #ffffff, #f1f1ef); border-top-color: var(--borda); }

/* O celular precisa vir depois da regra base do selo, senão ela anula esta. */
@media (max-width: 760px) {
    .card-garantia { font-size: 9.5px; letter-spacing: .04em; padding: 7px 8px; gap: 5px; }
    .card-garantia .ico { width: 12px; height: 12px; }
    /* No cartão estreito a frase inteira não cabe: entra a versão curta. */
    .card-garantia .g-longo { display: none; }
    .card-garantia .g-curto { display: inline; }
}


/* ============================================================
   Menu lateral (celular) — preto e dourado, duas telas
   ============================================================ */

/* ---------- botão das três barrinhas ---------- */
.btn-menu { display: none; align-items: center; justify-content: center; height: 44px; width: 44px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .06); color: #fff; flex: none; transition: background-color .2s, border-color .2s; }
.btn-menu:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .3); }
.btn-menu .ico { width: 20px; height: 20px; }
.btn-menu span { display: none; }

/* ---------- fundo escurecido ---------- */
.menu-fundo { position: fixed; inset: 0; z-index: 88; background: rgb(0 0 0 / .6); backdrop-filter: blur(3px); animation: menuFundo .3s ease; }
@keyframes menuFundo { from { opacity: 0; } }

/* ---------- a gaveta ---------- */
.menu-lateral {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
    width: min(330px, 88vw);
    display: flex; flex-direction: column; overflow: hidden;
    color: #fff;
    background:
        radial-gradient(420px 280px at 0% 0%, rgb(224 177 46 / .18), transparent 68%),
        linear-gradient(180deg, #141416, #0b0b0c 45%);
    border-right: 1px solid rgb(224 177 46 / .18);
    transform: translateX(-101%);
    transition: transform .34s var(--suave);
    box-shadow: 24px 0 60px -20px rgb(0 0 0 / .7);
}
.menu-lateral.aberto { transform: none; }

/* ---------- cabeça ---------- */
.menu-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 16px 18px 20px; border-bottom: 1px solid rgb(255 255 255 / .08); flex: none; }
.menu-marca { display: flex; align-items: center; gap: 10px; }
.menu-marca .logo-marca { width: 32px; height: 32px; }
.menu-marca .logo-texto { font-family: var(--fonte-titulo); font-weight: 800; font-size: 19px; letter-spacing: .12em; background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.menu-marca small { display: block; margin-top: 3px; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: #8f8a7d; }
.menu-x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #8f8a7d; background: rgb(255 255 255 / .06); flex: none; transition: background-color .2s, color .2s; }
.menu-x:hover { background: rgb(255 255 255 / .14); color: #fff; }
.menu-x .ico { width: 17px; height: 17px; }

/* ---------- palco: uma tela por vez, deslizando ---------- */
.menu-palco { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.menu-tela {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none;
    transition: transform .34s var(--suave);
}
.menu-tela::-webkit-scrollbar { display: none; }
/* a segunda tela espera fora da área, à direita */
.menu-tela[data-tela="prods"] { transform: translateX(100%); }
.menu-palco.na-segunda .menu-tela[data-tela="cats"] { transform: translateX(-100%); }
.menu-palco.na-segunda .menu-tela[data-tela="prods"] { transform: translateX(0); }

.menu-secao { padding: 18px 20px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6f6a60; flex: none; }

/* ---------- tela 1: categorias ---------- */
.menu-cats { padding: 0 10px; display: grid; gap: 4px; }
.menu-cat { display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px; border-radius: 14px; text-align: left; color: #fff; transition: background-color .18s; }
.menu-cat:hover, .menu-cat:focus-visible { background: rgb(255 255 255 / .07); outline: none; }
.menu-cat-ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgb(224 177 46 / .13); border: 1px solid rgb(224 177 46 / .22); color: var(--ouro-brilho); }
.menu-cat-ico .ico { width: 19px; height: 19px; }
.menu-cat-txt { flex: 1; min-width: 0; }
.menu-cat-txt strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.menu-cat-txt small { display: block; font-size: 12px; color: #7d786e; margin-top: 1px; }
.menu-cat-seta { width: 17px; height: 17px; flex: none; color: #5a564e; transition: transform .2s var(--suave), color .2s; }
.menu-cat:hover .menu-cat-seta { color: var(--ouro-claro); transform: translateX(3px); }

/* ---------- botão dourado do pé das telas ---------- */
.menu-todos { display: block; margin: 16px 16px 4px; padding: 13px; border-radius: 14px; text-align: center; font-size: 13.5px; font-weight: 600; color: #1a1300; background: var(--grad-ouro); box-shadow: 0 8px 22px -12px rgb(193 145 1 / .9); flex: none; transition: transform .2s var(--suave); }
.menu-todos:hover { transform: translateY(-2px); }
.menu-todos b { font-weight: 800; }

.menu-pe { margin-top: auto; padding: 12px 10px 16px; border-top: 1px solid rgb(255 255 255 / .08); display: grid; gap: 2px; flex: none; }
.menu-pe a, .menu-pe button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; text-align: left; color: #a9a49a; transition: background-color .18s, color .18s; }
.menu-pe a:hover, .menu-pe button:hover { background: rgb(255 255 255 / .06); color: #fff; }
.menu-pe .ico { width: 18px; height: 18px; color: var(--ouro-claro); flex: none; }
.menu-pe span { flex: 1; min-width: 0; }

/* ---------- tela 2: produtos da categoria ---------- */
.menu-voltar { display: flex; align-items: center; gap: 8px; margin: 16px 16px 0; padding: 9px 14px 9px 10px; border-radius: 999px; background: rgb(255 255 255 / .07); color: #d8d3c7; font-size: 13px; font-weight: 600; align-self: flex-start; flex: none; transition: background-color .2s; }
.menu-voltar:hover { background: rgb(255 255 255 / .14); color: #fff; }
.menu-voltar .ico { width: 16px; height: 16px; color: var(--ouro-claro); }

.menu-prods { padding: 0 10px 6px; display: grid; gap: 4px; }
.menu-prod {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px;
    transition: background-color .18s;
    animation: menuProd .3s var(--suave) backwards; animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes menuProd { from { opacity: 0; transform: translateX(14px); } }
.menu-prod:hover, .menu-prod:focus-visible { background: rgb(255 255 255 / .07); outline: none; }
/* A foto é transparente: precisa de um fundo claro para o produto aparecer. */
.menu-prod-foto { flex: none; width: 52px; height: 52px; border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 4px; overflow: hidden; }
.menu-prod-foto img, .menu-prod-foto svg { width: 100%; height: 100%; object-fit: contain; }
.menu-prod-txt { flex: 1; min-width: 0; }
.menu-prod-txt small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro-escuro); }
.menu-prod-txt strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 500; line-height: 1.3; margin: 2px 0 3px; color: #f0ece4; }
.menu-prod-preco { display: block; font-family: var(--fonte-titulo); font-size: 14px; font-weight: 800; color: var(--ouro-brilho); }
.menu-prod-seta { width: 15px; height: 15px; flex: none; color: #4e4a44; }
.menu-prod.esgotado .menu-prod-foto { filter: grayscale(1); opacity: .45; }
.menu-prod.esgotado .menu-prod-preco { color: #6f6a60; font-family: var(--fonte); font-size: 12px; font-weight: 600; }

/* ---------- alternador grade/lista ---------- */
.visao { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #ecebe6; }
.visao button { width: 34px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: var(--texto-3); transition: background-color .2s, color .2s, box-shadow .2s; }
.visao button .ico { width: 17px; height: 17px; }
.visao button[aria-pressed="true"] { background: #fff; color: var(--texto); box-shadow: var(--sombra-s); }

/* ---------- a visão em lista (só no computador) ---------- */
.grade.lista { grid-template-columns: 1fr; gap: 8px; }
.grade.lista .card { flex-direction: row; align-items: stretch; border-radius: 16px; }
.grade.lista .card:hover { transform: none; box-shadow: var(--sombra-s); }
.grade.lista .card-midia { width: 104px; flex: none; aspect-ratio: 1 / 1; padding: 8px; background: #fff; }
.grade.lista .card-corpo {
    flex: 1; min-width: 0; padding: 12px 16px 12px 8px; background: none; border-top: 0; box-shadow: none;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 14px;
    grid-template-areas: "marca botao" "nome botao" "preco botao";
}
.grade.lista .card-marca { grid-area: marca; }
.grade.lista .card-nome { grid-area: nome; min-height: 0; margin: 2px 0 4px; -webkit-line-clamp: 1; }
.grade.lista .card-precos { grid-area: preco; margin-top: 0; padding-top: 0; }
.grade.lista .card-corpo .preco { font-size: 18px; }
.grade.lista .parcela, .grade.lista .card-garantia { display: none; }
.grade.lista .card-add { grid-area: botao; width: auto; min-width: 150px; height: 42px; margin: 0; }

@media (max-width: 760px) {
    /* No celular quem faz o papel da lista é o menu lateral. */
    .visao { display: none; }


}

/* número de itens no botão do carrinho dentro do menu */
.menu-pe-num { flex: none; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--grad-ouro); color: #1a1300; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }

/* ============================================================
   Topo no celular — três linhas, com o logotipo em destaque
     1) logotipo sozinho, centralizado
     2) Menu + busca
     3) Calculadora | Minha conta | Carrinho
   ============================================================ */
@media (max-width: 760px) {
    .topo-linha--cheia { gap: 10px; padding-block: 14px 12px; }

    /* linha 1: o logotipo tem a linha só para ele */
    .topo-linha--cheia .logo { order: 1; flex-basis: 100%; justify-content: center; gap: 11px; }
    .logo-marca { width: 34px; height: 34px; }
    .logo-texto { font-size: 21px; letter-spacing: .16em; }
    .logo small { display: block; font-size: 8px; letter-spacing: .22em; }

    /* linha 2: menu e busca dividem a linha */
    .topo-linha--cheia .btn-menu {
        order: 2; display: inline-flex; flex: none;
        height: 44px; width: auto; padding: 0 16px 0 13px; gap: 8px;
    }
    .btn-menu span { display: inline; font-size: 13.5px; font-weight: 600; }
    .topo-linha--cheia .busca { order: 3; flex: 1 1 auto; flex-basis: auto; max-width: none; min-width: 0; }
    .busca input { height: 44px; }

    /* Quebra invisível: sem ela os três botões tentam entrar na linha da
       busca e ficam espremidos. É um item de largura total e altura zero. */
    .topo-linha--cheia::after { content: ''; order: 4; flex-basis: 100%; height: 0; margin: 0; }

    /* linha 3: os três dividem a largura em partes iguais */
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta,
    .topo-linha--cheia .btn-carrinho {
        order: 5; flex: 1 1 0; width: auto; min-width: 0;
        height: 44px; padding: 0 4px; border-radius: 14px;
        justify-content: center; gap: 7px; margin: 0;
    }
    .btn-carrinho { border-radius: 14px; }
    .btn-calc .ico, .btn-conta .ico, .btn-carrinho .ico { width: 18px; height: 18px; }
    .btn-calc .rotulo, .btn-conta .rotulo, .btn-carrinho .rotulo {
        display: inline; font-size: 12.5px; font-weight: 600; white-space: nowrap;
    }
    /* o número fica dentro do botão, ao lado do nome */
    .btn-carrinho .contador { position: static; min-width: 19px; height: 19px; padding: 0 5px; border: 0; font-size: 10.5px; }

    .topo-cats { display: none; }
    .visao { display: none; }
}

/* Tela estreita: aperta o texto dos botões, mas mantém tudo na mesma linha. */
@media (max-width: 400px) {
    .topo-linha { gap: 8px; }
    .logo-texto { font-size: 19px; letter-spacing: .13em; }
    .btn-menu { padding: 0 13px 0 11px; }
    .btn-menu span { font-size: 12.5px; }
    .btn-calc .rotulo, .btn-conta .rotulo, .btn-carrinho .rotulo { font-size: 11.5px; }
    .btn-calc, .btn-conta, .btn-carrinho { gap: 5px; }
}

/* ============================================================
   Mostruário do topo — um produto em destaque, alternando
   ============================================================ */
.hero { position: relative; }

/* Os slides ocupam a mesma célula da grade e trocam por dissolução.
   Com display:none a troca era um corte seco; assim um some enquanto o
   outro aparece, e a altura não pula porque a célula é a mesma. */
.hero-palco { display: grid; }
.hero-slide {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(12px);
    transition: opacity .8s var(--suave), transform .8s var(--suave), visibility 0s .8s;
}
.hero-slide.ativo {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    transition: opacity .8s var(--suave), transform .8s var(--suave);
}
/* A foto entra com um empurrãozinho a mais, um instante depois do texto. */
.hero-slide .hero-visual { transform: translateY(16px) scale(.97); opacity: 0; transition: opacity .9s var(--suave) .1s, transform .9s var(--suave) .1s; }
.hero-slide.ativo .hero-visual { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .hero-slide, .hero-slide .hero-visual { transition-duration: .01ms; transform: none; }
}

.hero-grade { align-items: center; }
.hero-texto .lead { max-width: 46ch; }

/* A imagem inteira é clicável e leva ao produto. */
.hero-visual { display: block; cursor: pointer; }
/* O produto ocupa a caixa inteira: foto maior sem esticar o banner. */
.hero-produto {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: grid; place-items: center;
    filter: drop-shadow(0 34px 38px rgb(0 0 0 / .6));
    animation: flutuar 6s ease-in-out infinite;
    transition: transform .4s var(--suave);
}
.hero-produto img, .hero-produto svg { width: 100%; height: 100%; object-fit: contain; }
.hero-visual:hover .hero-produto { transform: scale(1.04); }

/* ---------- bolinhas ---------- */
.hero-pontos { display: flex; justify-content: center; gap: 9px; padding-bottom: 26px; }
.hero-pontos button {
    width: 9px; height: 9px; border-radius: 999px; background: rgb(255 255 255 / .25);
    transition: width .3s var(--suave), background-color .3s;
}
.hero-pontos button[aria-selected="true"] { width: 30px; background: var(--grad-ouro); }
.hero-pontos button:hover { background: rgb(255 255 255 / .45); }
.hero-pontos button[aria-selected="true"]:hover { background: var(--grad-ouro); }

@media (max-width: 900px) {
    .hero-grade { padding-block: 40px 10px; }
    .hero-pontos { padding-bottom: 20px; }
}

/* ---------- Botão do mostruário: no computador acima, no celular abaixo da foto ---------- */
.hero-botoes--cel { display: none; }
@media (max-width: 900px) {
    .hero-botoes--pc { display: none; }
    /* No celular a foto vem primeiro e o botão fecha o bloco: o olho
       desce pelo texto, vê o produto e encontra o botão logo em seguida. */
    .hero-botoes--cel { display: flex; justify-content: flex-end; margin-top: 16px; }
    .hero-botoes--cel .btn { min-width: 0; height: 42px; padding: 0 18px; font-size: 14px; }
    .hero-botoes--cel .btn .ico { width: 16px; height: 16px; }
    .hero-visual { max-width: 390px; }
}

/* ============================================================
   Compre por categoria — tudo numa linha
   O número de colunas vem do PHP (--cols): tantas quantas forem as
   categorias, no máximo 8. Com 5 ficam 5; com 7, sete; com 9, oito e
   a nona desce para a linha de baixo.
   ============================================================ */
.cats-grade { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 12px; }

/* Cartão vertical e compacto: é o que permite caber 8 lado a lado. */
.cat-tile {
    position: relative; display: flex; flex-direction: column; align-items: center;
    gap: 12px; padding: 20px 10px 18px; border-radius: 18px; text-align: center;
    background: #fff; border: 1px solid var(--borda);
    transition: transform .3s var(--suave), box-shadow .3s, border-color .3s;
}
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); border-color: rgb(193 145 1 / .45); }

.cat-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--preto); color: var(--ouro-claro); display: grid; place-items: center; flex: none; transition: background .3s, color .3s; }
.cat-ico .ico { width: 22px; height: 22px; }
.cat-tile:hover .cat-ico { background: var(--grad-ouro); color: #1a1300; }

.cat-texto { min-width: 0; }
.cat-texto strong { display: block; font-family: var(--fonte-titulo); font-size: 13.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cat-texto span { display: block; font-size: 11.5px; color: var(--texto-3); margin-top: 3px; }

/* A seta não cabe num cartão estreito — e o cartão inteiro já é clicável. */
.cat-tile .seta { display: none; }

/* Telas médias: no máximo 4 por linha, senão o nome fica ilegível. */
@media (max-width: 1080px) {
    .cats-grade { grid-template-columns: repeat(min(var(--cols, 4), 4), 1fr); }
}

/* Celular: 3 por linha, sem rolagem lateral. */
@media (max-width: 760px) {
    .cats-grade {
        display: grid; grid-template-columns: repeat(min(var(--cols, 3), 3), 1fr);
        gap: 8px; margin-inline: 0; padding: 0;
    }
    .cat-tile { flex: initial; padding: 14px 6px 12px; gap: 9px; border-radius: 14px; }
    .cat-ico { width: 38px; height: 38px; border-radius: 11px; }
    .cat-ico .ico { width: 19px; height: 19px; }
    .cat-texto strong { font-size: 11.5px; line-height: 1.2; }
    .cat-texto span { font-size: 10px; margin-top: 2px; }
}

@media (max-width: 480px) {
    .cats-grade { margin-inline: 0; padding-inline: 0; gap: 7px; }
    .cat-tile { padding: 12px 4px 11px; }
    .cat-texto strong { font-size: 10.5px; }
}




/* ---------- A gaveta do carrinho rola inteira ----------
   Antes só a lista de produtos rolava, e todo o resto era fixo: cabeçalho,
   selos, frete, cupom e o rodapé com o total. Somando tudo, o botão de fechar
   pedido saía da tela no celular e não havia como chegar nele.
   Agora a gaveta inteira rola, com o topo e o rodapé grudados nas pontas. */
.gaveta { overflow-y: auto; overscroll-behavior: contain; }
.gaveta-itens { flex: 1 0 auto; overflow: visible; }
.gaveta-topo { position: sticky; top: 0; z-index: 3; background: #fff; }
.gaveta-base { position: sticky; bottom: 0; z-index: 3; background: #fff; box-shadow: 0 -8px 20px -14px rgb(0 0 0 / .35); }

/* ============================================================
   Cabeçalho que encolhe ao rolar (celular) — preso ao dedo
   ------------------------------------------------------------
   NÃO é uma animação com duração: é a rolagem que controla o quanto a troca
   avançou. O JavaScript escreve --p (de 0 a 1) conforme o dedo desliza, e daqui
   sai tudo: a transparência de cada cabeçalho, o deslocamento e a altura.
   Parou o dedo no meio? A troca fica no meio. Voltou? Ela desfaz junto.
   Por isso não há transition nenhuma aqui — ela brigaria com o dedo.
   ============================================================ */
.topo-linha--mini { display: none; }

@media (max-width: 760px) {
    /* Sem desfoque de fundo no celular. Ele obriga o aparelho a redesenhar toda
       a faixa a cada quadro da rolagem, e é o que mais fazia o topo "andar aos
       pulos" em telefone antigo. Um preto quase sólido dá o mesmo resultado. */
    /* (o fundo sólido agora vem da regra base; aqui sobra só o que é do celular) */

    /* O cabeçalho inteiro DESLIZA para cima, em vez de encolher de altura.
       Mudar altura obriga o navegador a recalcular a página inteira a cada
       quadro; mover com transform quem faz é a placa de vídeo, de graça.
       --d (quanto ele sobe por completo) vem do JavaScript, medido na hora. */
    .topo {
        transform: translateY(calc(var(--p, 0) * var(--d, 0px)));
        will-change: transform;
    }
    .topo-palco { position: relative; }

    .topo-linha--cheia {
        position: relative;
        opacity: calc(1 - var(--p, 0));
        will-change: opacity;
    }
    /* O reduzido mora no PÉ do cabeçalho: quando o cabeçalho sobe por completo,
       é exatamente ele que sobra na tela. */
    .topo-linha--mini {
        position: absolute; left: 0; right: 0; bottom: 0; top: auto;
        height: 68px;
        display: flex; align-items: center; gap: 8px;
        padding-inline: 2px;
        opacity: var(--p, 0);
        pointer-events: none;
        flex-wrap: nowrap;
        will-change: opacity;
    }
    /* Só o que está por cima recebe o toque. */
    .topo.compacto .topo-linha--mini { pointer-events: auto; }
    .topo.compacto .topo-linha--cheia { pointer-events: none; }

    /* ---------- peças da versão reduzida ---------- */
    .topo-linha--mini .btn-menu {
        display: inline-flex; flex: none; width: auto; height: 38px;
        padding: 0 14px 0 11px; gap: 7px; border-radius: 999px;
    }
    .topo-linha--mini .btn-menu span { display: inline; font-size: 12.5px; font-weight: 600; }

    .mini-ico {
        flex: none; width: 38px; height: 38px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: rgb(255 255 255 / .07); color: #fff;
        transition: background-color .2s;
    }
    .mini-ico:hover { background: rgb(255 255 255 / .14); }
    .mini-ico .ico { width: 19px; height: 19px; display: block; }
    /* A casinha fica no meio: as sobras de espaço se dividem dos dois lados,
       e isso empurra calculadora, conta e carrinho para a direita. */
    .mini-casa { margin-inline: auto; }

    .mini-carrinho { position: relative; background: var(--grad-ouro); color: #1a1300; }
    .mini-carrinho .contador {
        position: absolute; top: -4px; right: -4px;
        min-width: 17px; height: 17px; padding: 0 4px;
        font-size: 10px; line-height: 1; border: 0;
        background: var(--preto); color: var(--ouro-brilho);
        box-shadow: 0 1px 4px rgb(0 0 0 / .5);
    }
}

/* ============================================================
   Carrinho mais enxuto
   A gaveta tem 420px de largura, mas estava com medidas de página inteira:
   foto de 72px, campos de 48px, total em 24px. Tudo cedeu um pouco, para
   caber mais produto na tela sem perder a leitura.
   ============================================================ */
.gaveta-topo { padding: 14px 16px 14px 20px; }
.gaveta-topo h2 { font-size: 17px; }

/* ---------- produtos ---------- */
.gaveta-itens { padding: 0 20px; }
.item { grid-template-columns: 56px 1fr auto; gap: 12px; padding: 12px 0; }
.item-img { width: 56px; height: 56px; border-radius: 11px; }
.item-marca { font-size: 9.5px; letter-spacing: .07em; }
.item-nome { font-size: 13px; line-height: 1.25; }
.item-preco { margin-top: 3px; font-size: 14px; }
.item-lado { gap: 5px; }
.item .qtd { height: 30px; }
.item .qtd button { width: 26px; }
.item .qtd button .ico { width: 13px; height: 13px; }
.item .qtd output { width: 20px; font-size: 13px; }
.remover { font-size: 11px; }

/* ---------- frete e cupom: rótulo e campo mais baixos ---------- */
.gaveta-frete { padding: 11px 20px; }
.frete-label { font-size: 12px; margin-bottom: 6px; }
.frete-label .ico { width: 16px; height: 16px; }
.gaveta-frete .frete-cep-linha input { height: 40px; font-size: 14px; border-radius: 10px; }
.gaveta-frete .frete-cep-linha .btn { height: 40px; padding: 0 16px; font-size: 13.5px; }

/* ---------- totais ---------- */
.gaveta-base { gap: 6px; padding: 14px 20px 18px; }
.linha-sub, .linha-frete, .linha-desc { font-size: 13px; }
.linha-sub strong, .linha-frete strong, .linha-desc strong { font-size: 14px; }
.linha-geral { margin-top: 2px; padding-top: 7px; }
.linha-geral span { font-size: 14px; font-weight: 600; }
.linha-geral strong { font-size: 20px; }

/* ---------- pagamento ---------- */
.pagamento-titulo { font-size: 11.5px; margin-bottom: 5px; }
.pagamento-op span { padding: 8px 6px; font-size: 12.5px; border-radius: 10px; }
.pagamento-op .ico { width: 14px; height: 14px; }

/* ---------- botões: o de fechar continua forte, o outro vira discreto ---------- */
.gaveta-base .btn-ouro { height: 46px; font-size: 15px; margin-top: 2px; }
.gaveta-base .btn-claro {
    height: auto; padding: 8px; background: none; color: var(--texto-3);
    font-size: 13px; font-weight: 500; text-decoration: underline;
}
.gaveta-base .btn-claro:hover { background: none; color: var(--texto); }

.gaveta-cashback { margin: 8px 20px 0; padding: 9px 12px; }
.gaveta-cashback .check { font-size: 12.5px; }

/* ============================================================
   Abertura do carrinho com transição
   A gaveta já entrava deslizando, mas o conteúdo aparecia pronto de uma vez
   junto com ela — o olho recebia tudo no mesmo instante e parecia um susto.
   Agora o painel entra e o conteúdo sobe atrás dele, em fila: selos, produtos,
   frete e o rodapé com o total. Ao fechar, tudo recolhe rápido e sem espera,
   senão a gaveta sairia "vazando" conteúdo pela tela.
   ============================================================ */
.gaveta { transition: transform .5s var(--suave), visibility .5s; }
.sobreposicao { transition: opacity .45s ease, visibility .45s; }

.gaveta-selos,
.gaveta-frete,
.gaveta-cashback,
.gaveta-resumo,
.gaveta-base,
.gaveta-itens > * {
    /* estado de partida (e de saída): um passo abaixo e transparente */
    opacity: 0;
    transform: translateY(9px);
    transition: opacity .16s ease, transform .16s ease;
}
body.gaveta-aberta .gaveta-selos,
body.gaveta-aberta .gaveta-frete,
body.gaveta-aberta .gaveta-cashback,
body.gaveta-aberta .gaveta-resumo,
body.gaveta-aberta .gaveta-base,
body.gaveta-aberta .gaveta-itens > * {
    opacity: 1;
    transform: none;
    transition: opacity .38s ease var(--atraso, 0s),
                transform .46s var(--suave) var(--atraso, 0s);
}

/* A fila: cada parte entra um tiquinho depois da anterior. */
body.gaveta-aberta .gaveta-selos { --atraso: .10s; }
body.gaveta-aberta .gaveta-itens > *  { --atraso: .16s; }
body.gaveta-aberta .gaveta-itens > *:nth-child(2) { --atraso: .21s; }
body.gaveta-aberta .gaveta-itens > *:nth-child(3) { --atraso: .26s; }
body.gaveta-aberta .gaveta-itens > *:nth-child(4) { --atraso: .30s; }
body.gaveta-aberta .gaveta-itens > *:nth-child(n+5) { --atraso: .34s; }
body.gaveta-aberta .gaveta-cashback,
body.gaveta-aberta .gaveta-frete { --atraso: .28s; }
body.gaveta-aberta .gaveta-resumo { --atraso: .32s; }
body.gaveta-aberta .gaveta-base  { --atraso: .36s; }

/* Mexer dentro da gaveta também fica macio. */
.item { transition: opacity .25s ease; }
.remover { transition: color .2s ease; }
.gaveta-x, .gaveta .qtd button { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.gaveta .qtd button:active { transform: scale(.9); }

/* Quem pede menos movimento recebe a gaveta pronta, sem fila. */
@media (prefers-reduced-motion: reduce) {
    .gaveta, .sobreposicao,
    .gaveta-selos, .gaveta-frete, .gaveta-cashback, .gaveta-base, .gaveta-itens > * {
        transition-duration: .01ms !important;
    }
    .gaveta-selos, .gaveta-frete, .gaveta-cashback, .gaveta-base, .gaveta-itens > * {
        opacity: 1; transform: none;
    }
}

/* ============================================================
   Campos sem zoom no celular
   O iPhone dá zoom na página quando a pessoa toca num campo cuja letra
   é MENOR que 16px — e não volta sozinho: só puxando com dois dedos.
   Letra de 16px para cima resolve de vez, e ainda fica mais fácil de ler
   para quem já não enxerga tão bem.
   ============================================================ */
@media (max-width: 900px) {
    input, select, textarea { font-size: 16px; }

    /* CEP e cupom: campo e botão maiores, mais fáceis de acertar com o dedo. */
    .frete-cep-linha input { height: 48px; font-size: 16px; }
    .frete-cep-linha .btn { height: 48px; padding: 0 18px; }
    .gaveta-frete .frete-cep-linha input { height: 48px; font-size: 16px; }
    .gaveta-frete .frete-cep-linha .btn { height: 48px; font-size: 14.5px; }
    .frete-label { font-size: 14px; }

    /* A busca do topo é escura e estreita: 16px também, para não dar zoom. */
    .busca input { font-size: 16px; }
}

/* O cupom recolhido: vira um link discreto e só abre quando a pessoa quer. */
.gaveta-cupom > summary {
    display: flex; align-items: center; gap: 8px;
    list-style: none; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--texto-2);
    padding: 2px 0;
}
.gaveta-cupom > summary::-webkit-details-marker { display: none; }
.gaveta-cupom > summary .ico { width: 16px; height: 16px; color: var(--ouro-escuro); }
.gaveta-cupom > summary:hover { color: var(--texto); }
.gaveta-cupom[open] > summary { margin-bottom: 9px; }

/* ============================================================
   No celular o carrinho é uma PÁGINA, não uma aba
   Ele já ocupava a tela inteira, mas parecia uma janelinha por cima da loja.
   Agora tem cara de página: seta de voltar no lugar do X, sem sombra nem
   cantos, e o botão VOLTAR do aparelho fecha o carrinho em vez de sair do
   site (isso é feito no loja.js). Para quem tem menos intimidade com celular,
   é o caminho conhecido: entrou, resolveu, voltou.
   ============================================================ */
.gaveta-voltar { display: none; }

@media (max-width: 760px) {
    .gaveta { width: 100%; box-shadow: none; }
    .gaveta-topo { justify-content: flex-start; gap: 4px; padding: 10px 14px; }
    .gaveta-topo h2 { flex: 1; font-size: 18px; }
    .gaveta-voltar { display: grid; margin-left: -4px; }
    .gaveta-voltar .ico { width: 22px; height: 22px; }
    .gaveta-x { display: none; }
    /* A loja atrás não precisa mais de desfoque: ninguém a vê. */
    .sobreposicao { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ============================================================
   Telas estreitas (aparelho antigo ou com "Zoom da tela" ligado)
   Num iPhone em modo ampliado a tela tem 320px de largura, e aí o
   cabeçalho ocupava quase tudo: o Menu ia para uma linha e a busca para
   outra.
   O motivo é que o navegador decide a quebra ANTES de espremer os itens,
   usando o tamanho natural de cada um — e um campo de texto "nasce" com
   uns 200px. Com flex-basis 0 a busca deixa de exigir esse espaço e passa
   a ficar com a sobra da linha, do mesmo jeito que os três botões de baixo.
   ============================================================ */
@media (max-width: 760px) {
    .topo-linha--cheia .busca { flex: 1 1 0; }

    /* O Safari do iPhone desenha uma lupa PRÓPRIA dentro de campos de busca,
       que aparecia junto com a nossa — duas lupas no mesmo campo. */
    .busca input { -webkit-appearance: none; appearance: none; }
    .busca input::-webkit-search-decoration,
    .busca input::-webkit-search-results-button,
    .busca input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
}

/* Abaixo de 380px tudo cede um pouco, para o cabeçalho não comer a tela. */
@media (max-width: 380px) {
    .topo-linha--cheia { gap: 8px; padding-block: 11px 10px; }
    .topo-linha--cheia .btn-menu { height: 42px; padding: 0 13px 0 11px; gap: 6px; }
    .btn-menu span { font-size: 13px; }
    .busca input { height: 42px; padding-left: 40px; }
    .busca .ico { left: 13px; width: 17px; height: 17px; }
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta,
    .topo-linha--cheia .btn-carrinho { height: 42px; gap: 5px; }
    .btn-calc .rotulo, .btn-conta .rotulo, .btn-carrinho .rotulo { font-size: 11.5px; }
    .logo-marca { width: 30px; height: 30px; }
    .logo-texto { font-size: 19px; }
}

/* "Minha conta" não cabe em 320px: nessa largura fica só "conta". */
@media (max-width: 380px) {
    .btn-conta .rotulo-longo { display: none; }
    .btn-conta .rotulo { text-transform: capitalize; }
}

/* ============================================================
   Carrinho: só o total e o botão ficam grudados
   O rodapé do carrinho tinha subtotal, frete, cupom, cashback, total, escolha
   de pagamento, aviso de login e dois botões — tudo grudado embaixo. Num
   celular pequeno isso tomava quase a tela inteira e sobrava uma frestinha
   para ver os produtos. Agora as contas e o pagamento rolam junto com a
   lista; grudado fica só o que a pessoa precisa ver o tempo todo.
   ============================================================ */
.gaveta-resumo {
    display: grid; gap: 8px;
    padding: 16px 24px 10px;
    border-top: 1px solid var(--borda);
}
.gaveta-base { border-top: 1px solid var(--borda); }

@media (max-width: 760px) {
    .gaveta-resumo { padding: 12px 20px 8px; }
    .gaveta-base { padding: 10px 20px 14px; gap: 8px; }
    .gaveta-base .linha-geral { font-size: 15px; }
    .gaveta-base .linha-geral strong { font-size: 20px; }
}

/* Barra reduzida em tela estreita: as bolinhas cedem 4px cada uma.
   Com 6 itens (Menu, lupa, casa, calculadora, conta e carrinho) as medidas
   grandes somavam 316px numa tela de 320px — estourava. */
@media (max-width: 380px) {
    .topo-linha--mini { gap: 6px; }
    .topo-linha--mini .btn-menu { height: 34px; padding: 0 12px 0 10px; gap: 6px; }
    .topo-linha--mini .btn-menu span { font-size: 12px; }
    .mini-ico { width: 34px; height: 34px; }
    .mini-ico .ico { width: 17px; height: 17px; }
}

/* ============================================================
   Tela estreita: carrinho e cabeçalho cedendo mais um pouco
   Num aparelho de 320px "Calculadora" não cabia no botão, e o carrinho
   mostrava pouca coisa por vez. Aqui cada peça cede o suficiente para
   caber, sem virar letra miúda: campos continuam com 16px (menos que isso
   o iPhone dá zoom) e os botões continuam altos o bastante para o dedo.
   ============================================================ */
@media (max-width: 380px) {
    /* O rótulo mais comprido dos três botões é "Calculadora". */
    .btn-calc .ico, .btn-conta .ico, .btn-carrinho .ico { width: 16px; height: 16px; }
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta,
    .topo-linha--cheia .btn-carrinho { gap: 4px; padding: 0 2px; }
    .btn-calc .rotulo, .btn-conta .rotulo, .btn-carrinho .rotulo { font-size: 10.5px; }

    /* ---- carrinho ---- */
    .gaveta-topo { padding: 8px 12px; }
    .gaveta-topo h2 { font-size: 17px; }

    /* Os dois selos viram linhas de uma altura só. */
    .gaveta-selos { padding: 8px 14px; gap: 5px; }
    .gaveta-selo-ico { width: 22px; height: 22px; border-radius: 7px; }
    .gaveta-selo-ico .ico { width: 12px; height: 12px; }
    .gaveta-selo > span:last-child { font-size: 10.5px; line-height: 1.32; }
    .gaveta-selo strong { font-size: 11.5px; }

    /* Produto: foto e letras menores, mas o botão de quantidade continua grande. */
    .gaveta-itens { padding: 0 14px; }
    .item { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 10px 0; }
    .item-img { width: 48px; height: 48px; border-radius: 10px; }
    .item-nome { font-size: 13px; }
    .item-marca { font-size: 10px; }
    .item-preco { font-size: 14px; margin-top: 4px; }

    .gaveta-frete { padding: 9px 14px; }
    .frete-label { font-size: 13px; }
    .gaveta-resumo { padding: 10px 14px 6px; gap: 6px; }
    .gaveta-base { padding: 8px 14px 12px; gap: 6px; }
    .gaveta-base .btn-ouro { height: 44px; font-size: 14.5px; }
    .linha-sub, .linha-frete, .linha-desc { font-size: 13px; }
    .pagamento-titulo { font-size: 12.5px; }
}

/* ============================================================
   Celular: o rodapé travado do carrinho vira UMA LINHA
   Era total + botão + link, uns 130px presos na tela. Agora é o total à
   esquerda e o botão dourado à direita, na mesma linha: cerca de 68px.
   O "Continuar comprando" sai daqui porque a seta ← do topo (e tocar fora)
   já faz a mesma coisa — e no celular o carrinho é uma página.
   ============================================================ */
@media (max-width: 760px) {
    .gaveta-base {
        display: flex; align-items: center; gap: 12px;
        padding: 9px 16px 11px;
        box-shadow: 0 -10px 22px -16px rgb(0 0 0 / .5);
    }
    .gaveta-base .linha-geral {
        display: block; flex: none; font-size: 11.5px;
        text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3);
    }
    .gaveta-base .linha-geral strong {
        display: block; margin-top: 1px;
        font-family: var(--fonte-titulo); font-size: 19px; color: var(--texto);
        letter-spacing: -.01em;
    }
    .gaveta-base .btn-ouro { flex: 1; margin: 0; height: 46px; font-size: 14.5px; }
    .gaveta-base .btn-claro { display: none; }
}

/* ============================================================
   Dois botões que estavam grandes demais
   No carrinho, o "Fechar pedido" esticava por toda a linha e espremia o
   total. Na página do produto, a barra de comprar tomava uns 72px fixos da
   tela — em celular antigo é quase um sexto da página.
   O desfoque da barra do produto também saiu: como o do cabeçalho, obriga o
   aparelho a redesenhar a faixa a cada quadro da rolagem.
   ============================================================ */
@media (max-width: 760px) {
    /* Carrinho: o botão fica do tamanho do que está escrito nele. */
    .gaveta-base .btn-ouro { flex: 0 1 auto; margin-left: auto; padding: 0 20px; }

    /* Produto: barra de comprar mais baixa. */
    .barra-compra {
        gap: 10px;
        padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
        background: rgb(255 255 255 / .98);
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .barra-compra .preco { font-size: 17px; }
    .barra-compra .parcela { font-size: 11px; }
    .barra-compra .btn { height: 42px; padding: 0 18px; font-size: 14px; }
    .barra-compra .btn .ico { width: 17px; height: 17px; }
}

@media (max-width: 380px) {
    .barra-compra { padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); gap: 8px; }
    .barra-compra .preco { font-size: 16px; }
    .barra-compra .btn { height: 40px; padding: 0 14px; font-size: 13.5px; }
    .gaveta-base .btn-ouro { padding: 0 16px; font-size: 13.5px; }
}

/* O nome da marca é guardado do jeito que se escreve ("WM Pharma") e exibido
   em maiúsculas pelo CSS, para o painel não precisar de CAPS LOCK. */
.logo-texto { text-transform: uppercase; }

/* ============================================================
   Logotipo enviado pelo lojista
   O quadrado de 34px era feito para o losango desenhado. O logotipo da marca
   é uma faixa larga (mais de 3 vezes mais larga que alta) e fala sozinho —
   por isso o nome escrito ao lado some quando ele existe. Aqui a altura manda
   e a largura acompanha; sem isso o navegador espremeria tudo no quadrado.
   ============================================================ */
.logo .logo-img,
.menu-marca .logo-img {
    width: auto; height: 56px; max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 10px rgb(224 177 46 / .28));
}
.logo-so-imagem { gap: 0; }

@media (max-width: 760px) {
    /* No celular o logotipo tem a linha inteira só para ele: pode respirar,
       e a linha sobe (menos espaço entre a faixa de aviso e ele). */
    .logo .logo-img { height: 64px; }
    .topo-linha--cheia { padding-block: 4px 12px; }
    .topo-linha--cheia .logo { margin-bottom: -4px; }
    .menu-marca .logo-img { height: 40px; }
}
@media (max-width: 380px) { .logo .logo-img { height: 56px; } }

/* ============================================================
   Computador: o logotipo pede uma faixa mais alta
   A linha do topo tinha 72px, medida pensada no losango pequeno. Com o
   logotipo da marca ela ficou apertada e a fileira de categorias encostava
   nele — a fileira ainda era puxada para cima por uma margem negativa.
   ============================================================ */
@media (min-width: 761px) {
    .topo-linha--cheia { height: 94px; gap: 20px; }
    .logo .logo-img { height: 70px; }
    .topo-cats { margin-top: 2px; padding-bottom: 14px; }
}

/* ============================================================
   Computador: alinhar pela palavra PHARMA, não pelo meio da imagem
   O logotipo tem o globo em cima e a palavra embaixo, então o meio da
   imagem fica bem acima da linha do texto. Medido no arquivo: a palavra
   PHARMA está a 61% da altura — com o logo em 70px, o centro dela cai
   ~8px abaixo do centro da imagem. A busca e os três botões descem esses
   8px e passam a correr na mesma linha da palavra.
   ============================================================ */
@media (min-width: 761px) {
    .topo-linha--cheia .busca,
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta,
    .topo-linha--cheia .btn-carrinho { transform: translateY(8px); }
    .topo-linha--cheia .btn-carrinho:hover { transform: translateY(7px); }

    /* A busca cresce e ganha um ar mais caprichado. */
    .busca { max-width: 520px; }
    .busca input {
        height: 52px; font-size: 15px; padding: 0 22px 0 52px;
        background: rgb(255 255 255 / .05);
        border-color: rgb(255 255 255 / .12);
    }
    .busca input::placeholder { color: #8a8579; }
    .busca input:hover { background: rgb(255 255 255 / .08); }
    .busca .ico { left: 20px; width: 20px; height: 20px; }

    /* Os botões acompanham a altura nova da busca. */
    .btn-calc, .btn-conta, .btn-carrinho { height: 50px; padding-inline: 20px; font-size: 14.5px; }
    .btn-carrinho { padding-right: 18px; }
}

/* ============================================================
   Celular: arrumando o ritmo das três linhas do topo
   O vão entre a busca e os três botões era o DOBRO dos outros. Motivo: a
   quebra de linha é feita por um item invisível (o ::after), e o espaçamento
   do flex conta dos dois lados dele — 12px antes + 12px depois. A margem
   negativa cancela um dos dois, e aí as três linhas passam a respirar igual.
   ============================================================ */
@media (max-width: 760px) {
    /* Um número só manda nos dois espaços: o que separa a busca dos três
       botões e o que separa os três botões do banner. Assim eles são iguais
       por construção, não por coincidência. */
    .topo-linha--cheia { gap: 12px; padding-block: 6px 8px; }
    /* -18 no lugar de -12: os dois espaços de 12px em volta da quebra viram 6px,
       e a fileira de baixo chega mais perto da busca sem grudar. */
    .topo-linha--cheia::after { margin-top: -20px; }  /* 12 - 20 + 12 = 4px */
    /* Entre os três botões o espaço também fecha, para lerem como um bloco só. */
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta { margin-right: -4px; }

    /* Mesma altura nas duas fileiras de botões: o olho lê como uma grade. */
    .topo-linha--cheia .btn-menu,
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta,
    .topo-linha--cheia .btn-carrinho { height: 46px; }
    .busca input { height: 46px; }

    /* O logotipo é largo: sem limite ele encosta nas beiradas da tela. */
    .topo-linha--cheia .logo { margin-bottom: 0; }
    .logo .logo-img { height: 60px; max-width: 88%; }

    /* A faixa de aviso encolhe um pouco: é recado, não título. */
    .aviso { padding: 6px 14px; font-size: 11.5px; line-height: 1.35; }
}

@media (max-width: 380px) {
    .topo-linha--cheia { gap: 10px; padding-block: 5px 7px; }
    .topo-linha--cheia::after { margin-top: -16px; }  /* 10 - 16 + 10 = 4px */
    .topo-linha--cheia .btn-menu,
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta,
    .topo-linha--cheia .btn-carrinho { height: 44px; }
    .busca input { height: 44px; }
    .logo .logo-img { height: 52px; }
}

/* ============================================================
   Celular: espaçamento das linhas do topo, agora de verdade
   A tentativa anterior era cancelar um dos espaçamentos com margem negativa
   no item invisível da quebra de linha. NÃO funciona: a altura de uma linha
   do flex não fica negativa, então os dois espaçamentos continuavam somando
   (12 + 12 = 24px) e o vão seguia grande.
   O jeito certo é zerar o espaçamento entre linhas e dar a margem em cada
   fileira. Aí cada vão é exatamente o número escrito aqui.
   ============================================================ */
@media (max-width: 760px) {
    .topo-linha--cheia { column-gap: 8px; row-gap: 0; padding-block: 6px 8px; }
    .topo-linha--cheia::after { margin: 0; }

    /* fileira 2 (Menu + busca): distância até o logotipo */
    .topo-linha--cheia .btn-menu,
    .topo-linha--cheia .busca { margin-top: 12px; }

    /* fileira 3 (calculadora, conta, carrinho): distância até a busca */
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta,
    .topo-linha--cheia .btn-carrinho { margin-top: 4px; margin-right: 0; }
}

@media (max-width: 380px) {
    .topo-linha--cheia { column-gap: 7px; row-gap: 0; padding-block: 5px 7px; }
    .topo-linha--cheia .btn-menu,
    .topo-linha--cheia .busca { margin-top: 10px; }
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta,
    .topo-linha--cheia .btn-carrinho { margin-top: 4px; }
}

/* ============================================================
   Uma divisória dourada entre a busca e os três botões
   Mesma ideia do fio que separa a foto do corpo no cartão do produto: em vez
   de empurrar as fileiras com espaço vazio, um fio de 1px organiza a leitura
   e o vão pode ficar pequeno. O item invisível que já fazia a quebra de linha
   vira o próprio fio — não precisa de nenhuma marcação a mais no HTML.
   ============================================================ */
@media (max-width: 760px) {
    .topo-linha--cheia::after {
        height: 1px;
        margin-top: 11px;
        background: linear-gradient(90deg,
            rgb(224 177 46 / 0),
            rgb(224 177 46 / .38) 18%,
            rgb(224 177 46 / .38) 82%,
            rgb(224 177 46 / 0));
        box-shadow: 0 1px 0 rgb(0 0 0 / .45);
    }
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta,
    .topo-linha--cheia .btn-carrinho { margin-top: 9px; }
}

@media (max-width: 380px) {
    .topo-linha--cheia::after { margin-top: 9px; }
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta,
    .topo-linha--cheia .btn-carrinho { margin-top: 8px; }
}

/* ============================================================
   Preto atrás do cabeçalho, creme no conteúdo
   O cabeçalho é de vidro (deixa passar 10% do que está atrás). No alto da
   página quem estava atrás dele era o fundo creme do site, e 10% de creme
   sobre preto dá cinza — era a faixa cinza. Agora o fundo do documento é
   preto e o creme vive dentro do <main>: atrás do cabeçalho fica preto,
   e ao rolar o vidro continua mostrando o conteúdo passando por baixo.
   ============================================================ */
body { background: var(--preto); }
main { background: var(--fundo); }
/* O banner já tem o próprio preto, então ele emenda com o cabeçalho sem costura. */

/* ============================================================
   FILEIRA DE CATEGORIAS NO COMPUTADOR (2026-09-13)
   Primeira versão tinha pílulas com contorno e ícone em cada categoria: o dono
   achou bagunçado ("muita informação"). Agora é um menu limpo: só texto, bem
   espaçado; a categoria aberta fica em dourado com um traço embaixo. O dourado
   cheio fica só para Calculadora e Carrinho. "Início" mantém a casinha.
   Só no computador: no celular a fileira some e as categorias ficam no Menu.
   ============================================================ */
@media (min-width: 761px) {
    .topo-cats {
        align-items: stretch; gap: 32px;
        margin-top: 6px; padding: 0 2px;
        border-top: 1px solid rgb(255 255 255 / .06);
    }
    .topo-cats a {
        position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none;
        height: 48px; padding: 0; border-radius: 0; background: none;
        color: #b3ad9f; font-size: 14px; font-weight: 500; letter-spacing: .01em;
        transition: color .2s;
    }
    .topo-cats a::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
        background: var(--grad-ouro); transform: scaleX(0); transform-origin: left; transition: transform .25s;
    }
    .topo-cats a:hover { color: #fff; background: none; }
    .topo-cats a:focus-visible { outline: 2px solid var(--ouro-brilho); outline-offset: 4px; }
    .topo-cats a[aria-current] { color: var(--ouro-brilho); background: none; }
    .topo-cats a[aria-current]::after { transform: scaleX(1); }
    .topo-cats a .ico { width: 16px; height: 16px; opacity: .85; }
    .topo-cats .topo-cats-inicio { color: #e8e3d7; }
}

/* Calculadora entre 761 e 1080px: o botão fica só com o ícone (largura fixa), mas a
   regra de computador de cima devolvia 20px de respiro de cada lado e o ícone era
   esmagado até sumir (aparecia um círculo vazio). Redondo, do tamanho da altura. */
@media (min-width: 761px) and (max-width: 1080px) {
    .btn-calc { width: 50px; padding-inline: 0; }
}

/* Fileira de categorias com item escondido à direita (classe posta pelo script do topo). */
@media (min-width: 761px) {
    .topo-cats.tem-mais {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    }
}

/* Carrinho: "Continuar comprando" como botão visível (pedido do dono). A regra antiga
   deixava ele com cara de link sublinhado, fácil de não ver. */
.gaveta-base .gaveta-continuar {
    height: 44px; gap: 8px;
    border: 1px solid var(--borda); border-radius: 999px; background: #f4f2ec;
    color: var(--texto); font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.gaveta-base .gaveta-continuar .ico { width: 17px; height: 17px; }
.gaveta-base .gaveta-continuar:hover { background: #ebe8df; color: var(--texto); border-color: #d8d2c3; }

/* Página do produto com opção (ex.: ampola avulsa): menu para escolher. */
.produto-opcao { display: grid; gap: 6px; margin: 4px 0 18px; max-width: 420px; }
.produto-opcao span { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--texto-2); }
.produto-opcao select { height: 50px; border: 1.5px solid var(--ouro); border-radius: 14px; background: #fff; padding: 0 14px; font: inherit; font-size: 16px; font-weight: 600; color: var(--texto); }
.produto-opcao select:focus { outline: none; box-shadow: 0 0 0 4px rgb(193 145 1 / .18); }
a.card-add { text-decoration: none; }

/* Calculadora: doses comuns em botões (página inteira e caixinha do produto). */
.dose-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.dose-atalhos button {
    min-width: 64px; height: 42px; padding: 0 12px;
    border: 1.5px solid var(--borda); border-radius: 12px; background: #fff;
    font: inherit; font-size: 15px; font-weight: 700; color: var(--texto); cursor: pointer;
    font-variant-numeric: tabular-nums; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.dose-atalhos button small { font-size: 11px; font-weight: 600; color: var(--texto-3); }
.dose-atalhos button:hover { border-color: var(--ouro); }
.dose-atalhos button[aria-pressed="true"] { border-color: var(--ouro); background: #fff6dd; box-shadow: 0 0 0 3px rgb(193 145 1 / .16); }
.dose-atalhos-nota { margin: 0 0 4px; font-size: 12.5px; color: var(--texto-3); }

/* Celular: "Continuar comprando" volta ao carrinho (pedido do dono). O rodapé travado
   segue com total + "Fechar pedido" na primeira linha; o botão entra numa segunda
   linha, mais baixa. (Antes ficava escondido no celular, contando só com a seta do topo.) */
@media (max-width: 760px) {
    .gaveta-base { flex-wrap: wrap; row-gap: 8px; }
    /* Primeira linha: total (largura do próprio texto) e "Fechar pedido" ocupando o resto. */
    .gaveta-base .linha-geral { flex: 0 0 auto; width: auto; max-width: 42%; margin: 0; padding: 0; border: 0; }
    .gaveta-base .btn-ouro { flex: 1 1 0; min-width: 0; }
    .gaveta-base .gaveta-continuar { display: flex; flex: 1 1 100%; height: 40px; font-size: 14px; }
}


/* ============================================================
   KIT BLEND: MONTE SEU KIT (2026-09-14)
   ============================================================ */
.kit-montar { margin-top: 22px; padding: 18px; border-radius: var(--raio); background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra-s); scroll-margin-top: 120px; }
.kit-montar-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kit-montar-topo strong { font-family: var(--fonte-titulo); font-size: 18px; }
.kit-contador { font-size: 13px; font-weight: 600; color: var(--texto-2); background: #f4f1ea; padding: 5px 12px; border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s; }
.kit-contador b { font-size: 15px; color: var(--texto); }
.kit-contador.completo { background: #dcfce7; color: #15803d; }
.kit-contador.completo b { color: #15803d; }
.kit-montar-dica { margin: 4px 0 12px; font-size: 13.5px; color: var(--texto-2); }
.kit-opcoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kit-opcao { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 7px 7px 14px; border: 1px solid var(--borda); border-radius: 14px; background: #fff; transition: border-color .2s, background .2s; }
.kit-opcao.escolhida { border-color: var(--ouro); background: #fffaf0; }
.kit-opcao.esgotada { opacity: .55; }
.kit-opcao-nome { display: grid; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.kit-opcao-nome small { font-size: 12px; font-weight: 500; color: var(--texto-3); }
.kit-opcao-qtd { display: inline-flex; align-items: center; flex: none; height: 42px; border: 1px solid var(--borda); border-radius: 999px; background: #fff; }
.kit-opcao-qtd button { width: 42px; height: 100%; display: grid; place-items: center; color: var(--texto); border-radius: 999px; }
.kit-opcao-qtd button:disabled { color: #d3cdc0; cursor: default; }
.kit-opcao-qtd button .ico { width: 16px; height: 16px; }
.kit-opcao-qtd output { min-width: 24px; text-align: center; font-weight: 700; font-size: 15px; }
.kit-opcao.escolhida .kit-opcao-qtd { border-color: var(--ouro); }
.kit-montar-msg { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #a51f1f; font-size: 13.5px; font-weight: 600; }
.kit-montar-msg[hidden] { display: none; }
.item-kit { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--texto-2); }

/* Kit Blend num produto só: passos numerados e botões de tamanho (4.0 a 8.0). */
.kit-passo { display: flex; align-items: center; gap: 8px; font-family: var(--fonte-titulo); font-size: 16px; }
.kit-passo span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--preto, #1f2023); color: var(--ouro-brilho, #f3d27a); font-size: 12.5px; font-weight: 700; flex: none; }
.kit-tamanhos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 10px 0 18px; }
.kit-tamanho { display: grid; justify-items: center; gap: 1px; padding: 10px 4px; border: 1px solid var(--borda); border-radius: 14px; background: #fff; color: var(--texto); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.kit-tamanho b { font-family: var(--fonte-titulo); font-size: 18px; line-height: 1.1; }
.kit-tamanho small { font-size: 11px; color: var(--texto-3); }
.kit-tamanho span { margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--texto-2); white-space: nowrap; }
.kit-tamanho:hover:not(:disabled) { border-color: var(--ouro); }
.kit-tamanho.ativo { border-color: var(--ouro); background: #fff6dd; box-shadow: 0 0 0 3px rgb(193 145 1 / .18); }
.kit-tamanho.ativo span { color: var(--ouro-escuro); }
.kit-tamanho:disabled { opacity: .45; cursor: default; }
.kit-montar-dica b { color: var(--texto); }
.preco-apartir { display: block; font-size: 11.5px; color: var(--texto-3); margin-bottom: -2px; }
@media (max-width: 520px) {
    .kit-tamanhos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kit-tamanho span { font-size: 11.5px; }
}

/* Kit Blend: ampolas em grade compacta com fotinho (a lista antiga ficava comprida demais). */
.kit-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kit-grade .kit-opcao { position: relative; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px; padding: 8px 6px 7px; border-radius: 14px; }
.kit-grade .kit-opcao-foto { display: grid; place-items: center; height: 92px; padding: 0; border: 0; border-radius: 10px; background: #fff; cursor: pointer; }
.kit-grade .kit-opcao-foto img, .kit-grade .kit-opcao-foto .produto-svg { max-height: 88px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.kit-grade .kit-opcao-foto:disabled { cursor: default; }
.kit-grade .kit-opcao.escolhida .kit-opcao-foto { background: transparent; }
.kit-grade .kit-opcao-nome { display: block; text-align: center; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-grade .kit-opcao-nome small { display: block; font-size: 10.5px; font-weight: 600; color: var(--vermelho, #b91c1c); }
.kit-grade .kit-opcao-qtd { justify-content: space-between; height: 32px; width: 100%; }
.kit-grade .kit-opcao-qtd button { width: 30px; }
.kit-grade .kit-opcao-qtd button .ico { width: 14px; height: 14px; }
.kit-grade .kit-opcao-qtd output { min-width: 18px; font-size: 14px; }
.kit-grade .kit-opcao.escolhida::after {
    content: attr(data-qtd) "x"; position: absolute; top: 6px; right: 6px;
    min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--grad-ouro, #d4a017); color: #1a1300; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center;
    box-shadow: 0 4px 10px -4px rgb(0 0 0 / .35);
}
.kit-grade .kit-opcao.esgotada .kit-opcao-foto img { filter: grayscale(1); }
@media (max-width: 520px) {
    .kit-montar { padding: 14px 12px; }
    .kit-grade { gap: 6px; }
    .kit-grade .kit-opcao { padding: 6px 4px; }
    .kit-grade .kit-opcao-foto { height: 74px; }
    .kit-grade .kit-opcao-foto img, .kit-grade .kit-opcao-foto .produto-svg { max-height: 70px; }
    .kit-grade .kit-opcao-nome { font-size: 11px; }
    .kit-grade .kit-opcao-qtd { height: 28px; }
    .kit-grade .kit-opcao-qtd button { width: 24px; }
    .kit-grade .kit-opcao-qtd output { min-width: 14px; font-size: 13px; }
    .kit-grade .kit-opcao.escolhida::after { top: 4px; right: 4px; min-width: 22px; height: 19px; line-height: 19px; font-size: 11px; }
}

/* ============================================================
   Logotipo WM PHARMA Py (2026-09-14)
   O logo novo tem o globo À ESQUERDA e a palavra ao lado, não embaixo:
   a palavra PHARMA fica a ~54% da altura (medido no arquivo), e não mais
   a 61%. A busca e os botões descem só 3px para correr na linha dela.
   Ele também é mais largo (3,7 por 1): cabe um pouco mais alto no topo.
   ============================================================ */
@media (min-width: 761px) {
    .logo .logo-img { height: 76px; }
    .topo-linha--cheia .busca,
    .topo-linha--cheia .btn-calc,
    .topo-linha--cheia .btn-conta,
    .topo-linha--cheia .btn-carrinho { transform: translateY(3px); }
    .topo-linha--cheia .btn-carrinho:hover { transform: translateY(2px); }
}
@media (max-width: 760px) {
    .logo .logo-img { height: 64px; max-width: 88%; }
    .menu-marca .logo-img { height: 44px; }
}
@media (max-width: 380px) { .logo .logo-img { height: 56px; } }

/* ============================================================
   Rodapé: convite para o grupo do WhatsApp (2026-09-14)
   A coluna de categorias saiu (já estão no topo, no menu e na página
   inicial). No lugar, um cartão com a foto do casal da arte e o texto
   de verdade ao lado. O fundo do cartão tem a mesma cor do fundo da foto
   (#050403): a foto some na borda em vez de parecer um retângulo colado.
   Computador: foto à esquerda, texto à direita. Celular: foto em cima,
   cortada logo abaixo dos braços, texto e botão largo embaixo.
   ============================================================ */
.rodape-grade { grid-template-columns: 1.6fr 1fr 1.1fr; }

.grupo-zap {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); align-items: center;
    margin-bottom: 56px; border-radius: 28px; overflow: hidden;
    background: #050403;
    border: 1px solid rgb(224 177 46 / .2);
    box-shadow: 0 34px 70px -46px rgb(224 177 46 / .45);
}
.grupo-zap--sem-foto { grid-template-columns: 1fr; text-align: center; }
.grupo-zap-foto { position: relative; align-self: end; }
.grupo-zap-foto img { display: block; width: 100%; height: auto; }
/* Emenda da foto com o cartão: some para a direita e para baixo. */
.grupo-zap-foto::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, transparent 62%, #050403 98%),
        linear-gradient(0deg, #050403 2%, transparent 26%),
        linear-gradient(180deg, #050403, transparent 8%);
}

.grupo-zap-texto { padding: 40px 56px 40px 24px; }
.grupo-zap-texto h2 {
    font-family: var(--fonte-titulo); font-weight: 700;
    font-size: clamp(30px, 3.3vw, 46px); line-height: 1.08; letter-spacing: -.01em;
    color: #f1eee8;
}
.grupo-zap-ouro {
    background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grupo-zap-texto p { margin-top: 14px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.4; color: #d9d5cc; max-width: 480px; }
.grupo-zap--sem-foto .grupo-zap-texto p { margin-inline: auto; }

.rodape a.grupo-zap-btn,
.grupo-zap-btn {
    margin-top: 26px; height: 58px; padding: 0 30px; gap: 12px;
    border-radius: 16px; border: 1px solid rgb(110 240 150 / .45);
    background: linear-gradient(180deg, #169146, #0a5c27);
    color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
    box-shadow: 0 0 0 1px rgb(37 211 102 / .15), 0 12px 34px -10px rgb(37 211 102 / .55);
    transition: transform .2s, box-shadow .2s;
}
.grupo-zap-btn .ico { width: 26px; height: 26px; }
.rodape a.grupo-zap-btn:hover,
.grupo-zap-btn:hover {
    color: #fff; transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgb(37 211 102 / .3), 0 16px 40px -10px rgb(37 211 102 / .75);
}

@media (max-width: 1080px) {
    .rodape-grade { grid-template-columns: 1fr 1fr; }
    .rodape-sobre { grid-column: 1 / -1; }
    .grupo-zap { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
    .grupo-zap-texto { padding: 32px 36px 32px 12px; }
}

@media (max-width: 760px) {
    .rodape-grade { grid-template-columns: 1fr; }
    .grupo-zap { grid-template-columns: 1fr; margin-bottom: 40px; border-radius: 22px; text-align: center; }
    /* A foto é quase quadrada: inteira, empurraria o botão para longe. Corta embaixo dos braços. */
    .grupo-zap-foto { max-height: 300px; overflow: hidden; }
    .grupo-zap-foto::after { background: linear-gradient(0deg, #050403 6%, transparent 40%), linear-gradient(90deg, transparent 88%, #050403); }
    .grupo-zap-texto { padding: 0 20px 24px; margin-top: -18px; position: relative; }
    .grupo-zap-texto h2 { font-size: 29px; }
    .grupo-zap-texto p { margin: 10px auto 0; font-size: 17px; }
    .rodape a.grupo-zap-btn, .grupo-zap-btn { width: 100%; justify-content: center; margin-top: 20px; height: 56px; padding: 0 16px; font-size: 16px; }
}

/* ============================================================
   Grupo do WhatsApp: ícone cheio e botão que "respira" (2026-09-14)
   Pedido do dono: chamar atenção de leve, sem incomodar. A cada 3,2 s o
   botão cresce 4% e volta, com o brilho verde acendendo junto; o resto do
   tempo fica parado. Quem pediu ao aparelho para reduzir movimento não vê
   a animação. Com o mouse em cima ela para, para não brigar com o clique.
   ============================================================ */
.grupo-zap-ico { width: 28px; height: 28px; flex: none; }

@keyframes grupo-zap-respira {
    0%, 55%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 1px rgb(37 211 102 / .15), 0 12px 34px -10px rgb(37 211 102 / .55);
    }
    27% {
        transform: scale(1.04);
        box-shadow: 0 0 0 1px rgb(37 211 102 / .35), 0 14px 44px -8px rgb(37 211 102 / .85);
    }
}
.rodape a.grupo-zap-btn { animation: grupo-zap-respira 3.2s ease-in-out infinite; }
.rodape a.grupo-zap-btn:hover,
.rodape a.grupo-zap-btn:focus-visible { animation: none; transform: translateY(-2px) scale(1.02); }

@media (prefers-reduced-motion: reduce) {
    .rodape a.grupo-zap-btn { animation: none; }
}

@media (max-width: 760px) {
    .grupo-zap-ico { width: 26px; height: 26px; }
    /* Sem os logos nas camisetas, a foto pode descer até o fim dos braços cruzados. */
    .grupo-zap-foto { max-height: 330px; }
}
/* Linhas equilibradas: sem palavra sozinha na última linha ("ofertas."). */
.grupo-zap-texto h2, .grupo-zap-texto p { text-wrap: balance; }
@media (max-width: 760px) {
    /* A foto termina em sombra: o título sobe para dentro dela e o vão escuro some. */
    .grupo-zap-texto { margin-top: -38px; }
}

/* ============================================================
   Janela dos grupos do WhatsApp (2026-09-14)
   Abre no "Quero participar". Computador: caixa no meio da tela.
   Celular: sobe de baixo, como as folhas dos aplicativos, com a
   alça em cima. Grupo cheio fica apagado e sem botão; o que tem vaga
   ganha borda verde, a bolinha "ao vivo" e o botão Entrar.
   ============================================================ */
html.grupos-aberta { overflow: hidden; }

.grupos-janela {
    width: min(480px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px);
    margin: auto; padding: 0; border: 0; background: none; color: #f1eee8; overflow: visible;
}
.grupos-janela::backdrop { background: rgb(0 0 0 / .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.grupos-janela[open] { animation: grupos-entra .3s cubic-bezier(.2, .8, .2, 1); }
.grupos-janela[open]::backdrop { animation: grupos-fundo .3s ease; }
.grupos-janela.fechando { animation: grupos-sai .19s ease forwards; }
.grupos-janela.fechando::backdrop { animation: grupos-fundo-sai .19s ease forwards; }
@keyframes grupos-entra { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes grupos-sai { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes grupos-fundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes grupos-fundo-sai { from { opacity: 1; } to { opacity: 0; } }

.grupos-caixa {
    position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
    padding: 30px 22px 18px; border-radius: 26px;
    background:
        radial-gradient(120% 55% at 50% 0%, rgb(37 211 102 / .13), transparent 62%),
        linear-gradient(180deg, #141413, #070606 60%);
    border: 1px solid rgb(224 177 46 / .28);
    box-shadow: 0 40px 90px -30px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .05);
}
.grupos-fechar {
    position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: rgb(255 255 255 / .06); color: #d9d5cc; transition: background .2s, color .2s;
}
.grupos-fechar:hover { background: rgb(255 255 255 / .13); color: #fff; }
.grupos-fechar .ico { width: 20px; height: 20px; }

.grupos-topo { text-align: center; padding-inline: 26px; }
.grupos-selo {
    width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: linear-gradient(180deg, #25d366, #0e8a3e);
    box-shadow: 0 0 0 7px rgb(37 211 102 / .12), 0 14px 32px -8px rgb(37 211 102 / .6);
}
.grupos-selo svg { width: 36px; height: 36px; }
.grupos-topo h2 { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; line-height: 1.15; color: #f1eee8; }
.grupos-topo p { margin-top: 8px; font-size: 15px; line-height: 1.45; color: #b9b4a9; text-wrap: balance; }
.grupos-contagem {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 600; background: rgb(37 211 102 / .1); color: #5ee08f; border: 1px solid rgb(37 211 102 / .25);
}
.grupos-contagem--cheio { background: rgb(255 255 255 / .05); color: #a39e94; border-color: rgb(255 255 255 / .1); }

.grupos-lista { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.grupo-item {
    display: flex; align-items: center; gap: 12px; padding: 11px 11px 11px 12px; border-radius: 18px;
    background: rgb(255 255 255 / .035); border: 1px solid rgb(255 255 255 / .07);
}
.grupo-avatar {
    width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover;
    background: #050403; border: 1.5px solid rgb(224 177 46 / .5);
}
.grupo-info { flex: 1; min-width: 0; display: grid; gap: 3px; }
.grupo-info strong { font-size: 15.5px; font-weight: 600; color: #f1eee8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grupo-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #8f8a80; }
.grupo-status .ico { width: 14px; height: 14px; }

.grupo-item--cheio .grupo-avatar { filter: grayscale(1) brightness(.65); border-color: rgb(255 255 255 / .12); }
.grupo-item--cheio .grupo-info strong { color: #8f8a80; }

.grupo-item--livre {
    background: linear-gradient(90deg, rgb(37 211 102 / .11), rgb(37 211 102 / .03));
    border-color: rgb(37 211 102 / .5);
    box-shadow: 0 16px 36px -20px rgb(37 211 102 / .7);
}
.grupo-item--livre .grupo-status { color: #5ee08f; font-weight: 600; }
.grupo-ponto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #25d366; animation: grupo-ponto 1.8s ease-out infinite; }
@keyframes grupo-ponto { 0% { box-shadow: 0 0 0 0 rgb(37 211 102 / .65); } 100% { box-shadow: 0 0 0 9px rgb(37 211 102 / 0); } }

.grupo-acao {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 92px; height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 700;
}
.grupo-acao--cheio { background: rgb(255 255 255 / .04); color: #6f6b64; border: 1px solid rgb(255 255 255 / .06); }
.grupo-acao--entrar {
    color: #fff; text-decoration: none; border: 1px solid rgb(110 240 150 / .45);
    background: linear-gradient(180deg, #169146, #0a5c27);
    box-shadow: 0 8px 22px -8px rgb(37 211 102 / .7);
    transition: transform .2s, filter .2s;
}
.grupo-acao--entrar:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px); }
.grupo-acao--entrar svg { width: 16px; height: 16px; }

.grupos-espera {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; min-height: 50px;
    border-radius: 14px; border: 1px solid rgb(224 177 46 / .4); color: var(--ouro-brilho, #f2c94c);
    font-weight: 600; font-size: 15px; text-decoration: none;
}
.grupos-espera:hover { background: rgb(224 177 46 / .08); }

.grupos-rodape {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / .07); font-size: 12.5px; line-height: 1.45; color: #8f8a80;
}
.grupos-rodape .ico { width: 16px; height: 16px; margin-top: 1px; color: var(--ouro); }

/* O botão do cartão agora pode ser <button> (com grupos cadastrados): mesmo visual e animação do link. */
.rodape button.grupo-zap-btn { font-family: inherit; cursor: pointer; animation: grupo-zap-respira 3.2s ease-in-out infinite; }
.rodape button.grupo-zap-btn:hover,
.rodape button.grupo-zap-btn:focus-visible { animation: none; transform: translateY(-2px) scale(1.02); }

@media (max-width: 560px) {
    .grupos-janela { width: 100%; max-height: 92dvh; margin: auto 0 0; }
    .grupos-caixa {
        max-height: 92dvh; border-radius: 26px 26px 0 0; border-bottom: 0;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    }
    /* Alça de folha de aplicativo: diz "isto desce" sem precisar de texto. */
    .grupos-caixa::before { content: ""; display: block; width: 42px; height: 5px; margin: 0 auto 18px; border-radius: 5px; background: rgb(255 255 255 / .2); }
    .grupos-fechar { top: 20px; right: 10px; }
    .grupos-topo { padding-inline: 34px; }
    .grupos-topo h2 { font-size: 23px; }
    .grupos-selo { width: 58px; height: 58px; }
    .grupos-selo svg { width: 32px; height: 32px; }
    .grupos-janela[open] { animation: grupos-sobe .34s cubic-bezier(.2, .8, .2, 1); }
    .grupos-janela.fechando { animation: grupos-desce .19s ease forwards; }
    .grupo-acao { min-width: 84px; padding: 0 12px; }
}
@keyframes grupos-sobe { from { transform: translateY(100%); } to { transform: none; } }
@keyframes grupos-desce { to { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
    .grupos-janela[open], .grupos-janela.fechando,
    .grupos-janela[open]::backdrop, .grupos-janela.fechando::backdrop,
    .grupo-ponto, .rodape button.grupo-zap-btn { animation: none; }
}

/* ============================================================
   Página do produto: "Calcular minha dose" em destaque (2026-09-14)
   Pedido do dono: o botão era creme sobre branco, com letra pequena e
   ícone fino — passava despercebido. Agora é uma faixa preta com o ícone
   num quadrado dourado, título branco maior e o "+" num círculo dourado:
   a mesma cara da loja e fácil de enxergar (inclusive para quem vê pouco).
   ============================================================ */
.cdose {
    margin-top: 16px; border: 1px solid rgb(224 177 46 / .5); border-radius: 18px; background: #fff;
    box-shadow: 0 18px 36px -24px rgb(193 145 1 / .65);
}
.cdose > summary {
    gap: 14px; padding: 14px 16px; color: #fff;
    background:
        radial-gradient(90% 140% at 0% 0%, rgb(224 177 46 / .18), transparent 60%),
        linear-gradient(135deg, #1a1a1b, #0b0b0c);
}
.cdose > summary:hover { background: radial-gradient(90% 140% at 0% 0%, rgb(224 177 46 / .28), transparent 60%), linear-gradient(135deg, #202021, #0b0b0c); }
.cdose > summary > .ico:first-child {
    width: 46px; height: 46px; padding: 10px; border-radius: 13px;
    background: var(--grad-ouro); color: #1a1405; stroke-width: 2;
    box-shadow: 0 8px 18px -8px rgb(224 177 46 / .8);
}
.cdose > summary strong { font-size: 17px; font-weight: 700; letter-spacing: -.005em; color: #fff; }
.cdose > summary small { margin-top: 3px; font-size: 13.5px; color: #e3cf8f; }
.cdose-mais {
    width: 34px; height: 34px; padding: 7px; border-radius: 50%;
    border: 1.5px solid rgb(224 177 46 / .7); color: var(--ouro-brilho, #f2c94c); stroke-width: 2.4;
}
.cdose[open] > summary { border-bottom: 1px solid rgb(224 177 46 / .35); }
.cdose[open] .cdose-mais { background: rgb(224 177 46 / .15); }
.cdose-corpo { border-top: 0; }
.cdose > summary:focus-visible { outline: 3px solid var(--ouro); outline-offset: -3px; }

/* ============================================================
   Página inicial: faixa "Ficou com dúvida?" enxuta (2026-09-14)
   Pedido do dono: o cartão grande pesava logo acima do rodapé. Agora é
   uma linha só: o ícone da loja com a bolinha verde de "online", a
   pergunta e o botão. O botão tem o símbolo cheio num círculo claro,
   seta que anda e um brilho que passa ao apontar o mouse (sem animação
   parada, para não disputar com o botão do grupo no rodapé).
   Celular: ícone + texto numa linha, botão largo embaixo.
   ============================================================ */
.faixa { padding-bottom: 56px; }
.faixa-zap {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; gap: 16px;
    max-width: 940px; margin-inline: auto; padding: 14px 14px 14px 16px; border-radius: 22px;
    background:
        radial-gradient(55% 180% at 0% 50%, rgb(224 177 46 / .17), transparent 62%),
        linear-gradient(135deg, #171717, #0b0b0c);
    border: 1px solid rgb(224 177 46 / .32);
    box-shadow: 0 22px 44px -30px rgb(0 0 0 / .6);
    color: #fff;
}
.faixa-zap-ico { position: relative; flex: none; width: 52px; height: 52px; }
.faixa-zap-ico img {
    display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    background: #050403; border: 1.5px solid rgb(224 177 46 / .6);
}
.faixa-zap-online {
    position: absolute; right: 0; bottom: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: #25d366; border: 2.5px solid #141414; animation: grupo-ponto 2s ease-out infinite;
}
.faixa-zap-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.faixa-zap-texto strong { font-family: var(--fonte-titulo); font-size: 17.5px; font-weight: 700; line-height: 1.25; color: #fff; }
.faixa-zap-texto span { font-size: 14px; line-height: 1.4; color: #b3aea2; }

.faixa-zap-btn {
    position: relative; overflow: hidden; flex: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; padding: 0 20px 0 8px; border-radius: 999px;
    background: linear-gradient(180deg, #169146, #0a5c27);
    border: 1px solid rgb(110 240 150 / .45);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 12px 28px -12px rgb(37 211 102 / .75);
    color: #fff; font-size: 15.5px; font-weight: 700; white-space: nowrap; text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.faixa-zap-btn-ico {
    width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18);
}
.faixa-zap-btn-ico svg { width: 21px; height: 21px; }
.faixa-zap-seta { width: 18px; height: 18px; flex: none; transition: transform .2s; }
/* Brilho que atravessa o botão ao apontar o mouse. */
.faixa-zap-btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / .3), transparent);
    transform: skewX(-18deg); transition: left .7s ease;
}
.faixa-zap-btn:hover {
    color: #fff; transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 16px 34px -12px rgb(37 211 102 / .95);
}
.faixa-zap-btn:hover::after { left: 130%; }
.faixa-zap-btn:hover .faixa-zap-seta { transform: translateX(4px); }
.faixa-zap-btn:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }

@media (max-width: 760px) {
    .faixa { padding-bottom: 40px; }
    .faixa-zap { flex-wrap: wrap; gap: 14px; padding: 16px; border-radius: 20px; }
    .faixa-zap-ico { width: 48px; height: 48px; }
    .faixa-zap-texto strong { font-size: 16.5px; }
    .faixa-zap-texto span { font-size: 14px; }
    .faixa-zap-btn { width: 100%; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
    .faixa-zap-online { animation: none; }
    .faixa-zap-btn::after { transition: none; }
}

/* ============================================================
   Carrinho: selos de frete e prazo reescritos (2026-09-14)
   Pedido do dono: o texto estava miúdo, título e frase grudados por um
   "·" e o português truncado. Agora cada selo é um cartãozinho: ícone
   maior, título numa linha e a explicação embaixo, com letra legível.
   ============================================================ */
.gaveta-selos { padding: 12px 16px; gap: 8px; }
.gaveta-selo {
    align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px;
    background: rgb(255 255 255 / .78); border: 1px solid rgb(193 145 1 / .24);
}
.gaveta-selo-ico { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 6px 14px -8px rgb(0 0 0 / .6); }
.gaveta-selo-ico .ico { width: 17px; height: 17px; }
.gaveta-selo > span:last-child { font-size: 13px; line-height: 1.45; color: #6b5a33; }
.gaveta-selo strong { display: block; margin-bottom: 1px; font-size: 14px; color: #2e2410; }
.gaveta-selo strong::after { content: none; }

@media (max-width: 760px) {
    .gaveta-selos { padding: 10px 12px; gap: 6px; }
    .gaveta-selo { gap: 10px; padding: 9px 10px; }
    .gaveta-selo-ico { width: 30px; height: 30px; border-radius: 9px; }
    .gaveta-selo-ico .ico { width: 15px; height: 15px; }
    .gaveta-selo > span:last-child { font-size: 12.5px; line-height: 1.4; }
    .gaveta-selo strong { font-size: 13.5px; }
}

/* ============================================================
   Página de Avaliações (2026-09-14)
   Faixa escura no alto (continua o cabeçalho) com a nota média, e os
   cartões em colunas sobre o creme: fotos em cima, estrelas, comentário,
   quem recebeu e, se houver, o produto. Tocar na foto abre ela grande.
   ============================================================ */
.aval-hero {
    padding-block: 48px 56px; text-align: center; color: #fff;
    background: radial-gradient(60% 120% at 50% 0%, rgb(224 177 46 / .16), transparent 70%), #0b0b0c;
}
.aval-hero .eyebrow { color: var(--ouro-brilho); }
.aval-hero h1 { margin-top: 10px; font-family: var(--fonte-titulo); font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; line-height: 1.08; }
.aval-ouro { background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aval-hero p { max-width: 560px; margin: 12px auto 0; font-size: 17px; color: #b3aea2; text-wrap: balance; }
.aval-nota {
    display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 12px 22px 12px 18px;
    border-radius: 18px; background: rgb(255 255 255 / .05); border: 1px solid rgb(224 177 46 / .3);
}
.aval-nota > strong { font-family: var(--fonte-titulo); font-size: 40px; font-weight: 800; line-height: 1; color: #fff; }
.aval-nota > span { display: grid; gap: 4px; text-align: left; }
.aval-nota small { font-size: 13px; color: #b3aea2; }

.aval-estrelas { display: inline-flex; gap: 2px; }
.aval-estrelas svg { width: 18px; height: 18px; }
.aval-estrelas svg.cheia path { fill: #e0b12e; }
.aval-estrelas svg.vazia path { fill: none; stroke: #cfc3a0; stroke-width: 1.6; }
.aval-estrelas--grande svg { width: 22px; height: 22px; }

.aval-lista-sec { padding-block: 40px 64px; }
.aval-grade { columns: 3 300px; column-gap: 20px; }
.aval-card {
    display: inline-block; width: 100%; margin: 0 0 20px; break-inside: avoid; overflow: hidden;
    border-radius: 22px; background: #fff; border: 1px solid var(--borda);
    box-shadow: 0 18px 40px -30px rgb(0 0 0 / .35);
}
.aval-fotos { display: grid; gap: 3px; background: #0b0b0c; }
.aval-fotos--2 { grid-template-columns: 1fr 1fr; }
.aval-fotos--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.aval-fotos--3 .aval-foto:first-child { grid-row: span 2; }
.aval-foto { display: block; padding: 0; border: 0; background: none; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; }
.aval-fotos--2 .aval-foto { aspect-ratio: 1; }
.aval-fotos--3 .aval-foto { aspect-ratio: auto; min-height: 0; }
.aval-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--suave); }
.aval-foto:hover img { transform: scale(1.04); }
.aval-foto:focus-visible { outline: 3px solid var(--ouro); outline-offset: -3px; }

.aval-corpo { display: grid; gap: 12px; padding: 16px 18px 18px; }
.aval-texto { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--texto); }
.aval-autor { display: flex; align-items: center; gap: 10px; }
.aval-inicial {
    width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: var(--preto); color: var(--ouro-brilho); font-weight: 700;
}
.aval-autor strong { display: block; font-size: 14.5px; }
.aval-autor small { display: block; font-size: 12.5px; color: var(--texto-3); }
.aval-produto {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px;
    background: #faf6ec; border: 1px solid rgb(193 145 1 / .2); font-size: 13.5px; font-weight: 600; color: var(--texto);
}
.aval-produto:hover { border-color: var(--ouro); }
.aval-produto small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ouro-escuro); }
.aval-produto > span:nth-child(2) { flex: 1; min-width: 0; }
.aval-produto-foto { width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 10px; background: #fff; }
.aval-produto-foto img, .aval-produto-foto svg { width: 100%; height: 100%; object-fit: contain; }
.aval-produto > .ico { width: 16px; height: 16px; color: var(--ouro-escuro); }

.aval-vazio { padding: 48px 20px; text-align: center; }
.aval-vazio .ico { width: 44px; height: 44px; color: var(--ouro-escuro); }
.aval-vazio h2 { margin-top: 10px; font-family: var(--fonte-titulo); font-size: 24px; }
.aval-vazio p { margin-top: 6px; color: var(--texto-2); }

.aval-cta {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    max-width: 820px; margin: 28px auto 0; padding: 16px 16px 16px 22px; border-radius: 22px; color: #fff;
    background: radial-gradient(55% 180% at 0% 50%, rgb(224 177 46 / .17), transparent 62%), linear-gradient(135deg, #171717, #0b0b0c);
    border: 1px solid rgb(224 177 46 / .32);
}
.aval-cta-texto strong { display: block; font-family: var(--fonte-titulo); font-size: 18px; }
.aval-cta-texto span { font-size: 14px; color: #b3aea2; }

/* Foto ampliada */
.aval-zoom {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 64px 12px;
    border: 0; background: rgb(5 5 5 / .94);
}
.aval-zoom[open] { display: grid; place-items: center; animation: grupos-fundo .2s ease; }
.aval-zoom::backdrop { background: transparent; }
.aval-zoom img { max-width: min(100%, 1100px); max-height: calc(100dvh - 128px); border-radius: 14px; object-fit: contain; box-shadow: 0 30px 80px -20px #000; }
.aval-zoom-fechar, .aval-zoom-nav {
    position: fixed; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: #fff;
}
.aval-zoom-fechar { top: 12px; right: 12px; width: 48px; height: 48px; border: 0; background: rgb(255 255 255 / .12); }
.aval-zoom-nav { top: 50%; width: 52px; height: 52px; transform: translateY(-50%); border: 1px solid rgb(255 255 255 / .18); background: rgb(0 0 0 / .5); }
.aval-zoom-ant { left: 14px; }
.aval-zoom-prox { right: 14px; }
.aval-zoom.uma .aval-zoom-nav { display: none; }
.aval-zoom button .ico { width: 22px; height: 22px; }

/* Link "Avaliações" no topo (fim da fileira de categorias) */
.topo-cats a.topo-cats-aval { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ouro-brilho); }
.topo-cats a.topo-cats-aval .ico { width: 15px; height: 15px; }

@media (max-width: 760px) {
    .aval-hero { padding-block: 32px 36px; }
    .aval-grade { columns: 1; }
    .aval-cta { padding: 16px; }
    .aval-cta .faixa-zap-btn { width: 100%; }
    .aval-zoom-nav { top: auto; bottom: 14px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .aval-zoom[open] { animation: none; }
    .aval-foto img { transition: none; }
}

/* Avaliação com uma foto só: a foto no formato dela (em pé ou deitada), sem o corte 4:3.
   As colunas se ajeitam com alturas diferentes, como um mural. */
.aval-fotos--1 .aval-foto { aspect-ratio: auto; max-height: 560px; }
.aval-fotos--1 .aval-foto img { height: auto; max-height: 560px; }
@media (max-width: 760px) {
    .aval-fotos--1 .aval-foto, .aval-fotos--1 .aval-foto img { max-height: 480px; }
}

/* ============================================================
   Pop-up da loja (2026-09-14)
   A imagem com cantos arredondados no meio da tela e o X num círculo
   BRANCO com borda escura na quina: aparece em qualquer imagem, clara ou
   escura, e tem 44px (fácil de acertar com o dedo). Fecha também tocando
   fora ou no Esc. Usa as mesmas animações da janela dos grupos.
   ============================================================ */
.popup-janela {
    width: min(460px, calc(100% - 44px)); max-width: none; max-height: calc(100dvh - 44px);
    margin: auto; padding: 0; border: 0; background: none; overflow: visible;
}
.popup-janela::backdrop { background: rgb(0 0 0 / .72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.popup-janela[open] { animation: grupos-entra .3s cubic-bezier(.2, .8, .2, 1); }
.popup-janela[open]::backdrop { animation: grupos-fundo .3s ease; }
.popup-janela.fechando { animation: grupos-sai .19s ease forwards; }
.popup-janela.fechando::backdrop { animation: grupos-fundo-sai .19s ease forwards; }
.popup-caixa { position: relative; }
.popup-caixa img {
    display: block; width: 100%; height: auto; max-height: calc(100dvh - 44px); object-fit: contain;
    border-radius: 22px; border: 1px solid rgb(224 177 46 / .35); background: #0b0b0c;
    box-shadow: 0 40px 90px -30px rgb(0 0 0 / .9);
}
.popup-link { display: block; border-radius: 22px; }
.popup-link:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
.popup-fechar {
    position: absolute; top: -15px; right: -15px; z-index: 1;
    width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
    border-radius: 50%; border: 2px solid #0b0b0c; background: #fff; color: #0b0b0c;
    box-shadow: 0 8px 20px rgb(0 0 0 / .45); transition: transform .15s, background-color .15s;
}
.popup-fechar svg { width: 20px; height: 20px; }
.popup-fechar:hover { transform: scale(1.08); background: #f2c94c; }
.popup-fechar:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .popup-janela[open], .popup-janela.fechando, .popup-janela[open]::backdrop, .popup-janela.fechando::backdrop { animation: none; }
}

/* Avaliações: as estrelas da nota ficam lado a lado com o 5,0. Sem o total embaixo, o span das estrelas virou filho
   direto de .aval-nota e pegava o "display: grid" da regra de cima (uma estrela embaixo da outra). */
.aval-nota > .aval-estrelas { display: inline-flex; align-items: center; gap: 4px; }
.aval-nota > .aval-estrelas svg { width: 26px; height: 26px; }

/* ============================================================
   Avaliações em destaque no celular (2026-09-14)
   No computador o link "Avaliações" fica na fileira do topo, que some no
   celular. Lá ganham: um cartão escuro com 3 fotinhos, a nota e as
   estrelas logo depois das vantagens da página inicial, e um cartão
   dourado no topo do menu.
   ============================================================ */
.aval-home { display: none; }
.menu-aval {
    display: flex; align-items: center; gap: 12px; margin: 14px 16px 2px; padding: 12px 12px 12px 14px; border-radius: 16px; flex: none;
    background: linear-gradient(135deg, rgb(224 177 46 / .2), rgb(224 177 46 / .05)); border: 1px solid rgb(224 177 46 / .55); color: #fff;
}
.menu-aval-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--grad-ouro); color: #1a1300; }
.menu-aval-ico .ico { width: 20px; height: 20px; }
.menu-aval-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.menu-aval-txt strong { font-size: 15px; }
.menu-aval-txt small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; color: #cfc8b8; }
.menu-aval-txt small b { color: var(--ouro-brilho); font-size: 13px; }
.menu-aval-txt .aval-estrelas svg { width: 13px; height: 13px; }
.menu-aval-seta { flex: none; width: 18px; height: 18px; color: var(--ouro-brilho); }

@media (max-width: 760px) {
    .aval-home { display: block; padding-top: 18px; }
    .aval-home-card {
        display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 20px; color: #fff; text-decoration: none;
        background: radial-gradient(70% 150% at 0% 0%, rgb(224 177 46 / .22), transparent 60%), linear-gradient(135deg, #1a1a1b, #0b0b0c);
        border: 1px solid rgb(224 177 46 / .45); box-shadow: 0 18px 36px -24px rgb(0 0 0 / .6);
    }
    .aval-home-card:active { transform: scale(.99); }
    .aval-home-fotos { display: flex; flex: none; padding-left: 12px; }
    .aval-home-fotos img { width: 48px; height: 48px; margin-left: -12px; object-fit: cover; border-radius: 50%; border: 2px solid #e0b12e; background: #0b0b0c; }
    .aval-home-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
    .aval-home-txt small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ouro-brilho); }
    .aval-home-txt strong { display: flex; align-items: center; gap: 6px; font-family: var(--fonte-titulo); font-size: 20px; line-height: 1.1; }
    .aval-home-txt strong .aval-estrelas svg { width: 15px; height: 15px; }
    .aval-home-txt > span { font-size: 13px; color: #cfc8b8; }
    .aval-home-seta { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgb(224 177 46 / .6); color: var(--ouro-brilho); }
    .aval-home-seta .ico { width: 16px; height: 16px; }
}

/* ============================================================
   Faixa de aviso rolando (2026-09-14)
   Pedido do dono: "Ofertas válidas por tempo limitado" passando na faixa
   preta do topo. O trilho tem a lista duas vezes e anda até a metade:
   nesse ponto a segunda cópia está exatamente onde a primeira começou,
   então a volta não dá salto. Para com o mouse em cima e fica parada para
   quem pediu ao aparelho menos movimento. As bordas somem em degradê.
   ============================================================ */
.aviso--rolando {
    padding-inline: 0; overflow: hidden; white-space: nowrap; text-align: left;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.aviso-trilho { display: inline-flex; width: max-content; animation: aviso-rola var(--aviso-dur, 40s) linear infinite; }
.aviso-grupo { display: inline-flex; align-items: center; }
.aviso-item { display: inline-flex; align-items: center; }
.aviso-item::after { content: "✦"; margin: 0 22px; font-size: .75em; color: var(--ouro); }
.aviso--rolando:hover .aviso-trilho { animation-play-state: paused; }
@keyframes aviso-rola { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .aviso-trilho { animation: none; } }

/* Avaliações: o cartão saiu de depois das vantagens e foi para baixo do "Ficou com dúvida?" do WhatsApp
   (pedido do dono). Agora aparece em qualquer tela, com a mesma largura da faixa do WhatsApp. Regras base
   escritas DEPOIS do bloco de celular antigo, então o ajuste de celular vem de novo embaixo. */
.aval-home { display: block; padding: 0 0 56px; margin-top: -40px; }
.aval-home-card {
    display: flex; align-items: center; gap: 16px; max-width: 940px; margin-inline: auto; padding: 14px 16px 14px 14px;
    border-radius: 22px; color: #fff; text-decoration: none;
    background: radial-gradient(60% 160% at 0% 0%, rgb(224 177 46 / .22), transparent 60%), linear-gradient(135deg, #1a1a1b, #0b0b0c);
    border: 1px solid rgb(224 177 46 / .45); box-shadow: 0 18px 36px -24px rgb(0 0 0 / .6); transition: transform .2s;
}
.aval-home-card:hover { transform: translateY(-2px); color: #fff; }
.aval-home-fotos { display: flex; flex: none; padding-left: 12px; }
.aval-home-fotos img { width: 52px; height: 52px; margin-left: -12px; object-fit: cover; border-radius: 50%; border: 2px solid #e0b12e; background: #0b0b0c; }
.aval-home-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.aval-home-txt small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ouro-brilho); }
.aval-home-txt strong { display: flex; align-items: center; gap: 6px; font-family: var(--fonte-titulo); font-size: 21px; line-height: 1.1; }
.aval-home-txt strong .aval-estrelas svg { width: 16px; height: 16px; }
.aval-home-txt > span { font-size: 13.5px; color: #cfc8b8; }
.aval-home-seta { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgb(224 177 46 / .6); color: var(--ouro-brilho); }
.aval-home-seta .ico { width: 17px; height: 17px; }
@media (max-width: 760px) {
    .aval-home { padding-bottom: 40px; margin-top: -24px; }
    .aval-home-card { gap: 12px; padding: 12px 12px 12px 10px; border-radius: 20px; }
    .aval-home-fotos img { width: 46px; height: 46px; }
    .aval-home-txt strong { font-size: 19px; }
    .aval-home-txt > span { font-size: 13px; }
    .aval-home-seta { width: 32px; height: 32px; }
}

/* ============================================================
   Página do produto: selos em um cartão só (2026-09-14)
   Pedido do dono: no computador as três caixinhas lado a lado ficavam
   espremidas (ícone pequeno, texto longo em 4 linhas). Agora é um cartão
   com uma linha por selo: ícone em quadrado dourado, título curto em
   caixa alta e o texto do dono embaixo. Igual no computador e no celular.
   ============================================================ */
.beneficios {
    grid-template-columns: 1fr; gap: 0; margin-top: 16px; padding: 4px 18px;
    border-radius: 18px; background: linear-gradient(180deg, #fffdf7, #fff);
    border: 1px solid rgb(193 145 1 / .3); box-shadow: 0 14px 30px -26px rgb(193 145 1 / .7);
}
.beneficio {
    flex-direction: row; align-items: center; gap: 14px; padding: 14px 0;
    border: 0; border-radius: 0; background: none; font-size: 14.5px; line-height: 1.4; color: var(--texto);
}
.beneficio + .beneficio { border-top: 1px solid #efe8d8; }
.beneficio .ico {
    width: 44px; height: 44px; padding: 11px; border-radius: 13px;
    background: var(--grad-ouro); color: #1a1405; stroke-width: 2; box-shadow: 0 8px 18px -10px rgb(193 145 1 / .9);
}
.beneficio-txt { display: grid; gap: 2px; min-width: 0; }
.beneficio-txt small { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ouro-escuro); }
.beneficio-txt span { font-weight: 600; }
@media (max-width: 760px) {
    .beneficios { padding: 2px 14px; border-radius: 16px; }
    .beneficio { gap: 12px; padding: 12px 0; font-size: 14px; }
    .beneficio .ico { width: 40px; height: 40px; padding: 10px; border-radius: 12px; }
}

/* ============================================================
   Página inicial: faixa das vantagens abaixo do mostruário (2026-09-14)
   Textos novos do dono (mais completos). Ícone no quadrado dourado, igual
   aos selos da página do produto. No celular, com 2 colunas, o ícone vai
   para cima do texto: sobra largura e o título não quebra no meio.
   ============================================================ */
.garantia { align-items: flex-start; padding: 22px 22px; }
.garantia-ico {
    width: 46px; height: 46px; border-radius: 13px; background: var(--grad-ouro); color: #1a1405;
    box-shadow: 0 8px 18px -10px rgb(193 145 1 / .9);
}
.garantia-ico .ico { width: 22px; height: 22px; stroke-width: 2; }
.garantia strong { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--texto); }
.garantia div span { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--texto-2); }
@media (max-width: 760px) {
    .garantia { flex-direction: column; gap: 10px; padding: 18px 14px; }
    .garantia-ico { width: 40px; height: 40px; border-radius: 12px; }
    .garantia-ico .ico { width: 19px; height: 19px; }
    .garantia strong { font-size: 14px; }
    .garantia div span { font-size: 12.5px; line-height: 1.4; }
}
/* Vantagens no celular: ícone de volta AO LADO do texto (pedido do dono: um embaixo do outro ficou comprido).
   Ícone e letras menores para caber nas 2 colunas. */
@media (max-width: 760px) {
    .garantia { flex-direction: row; align-items: center; gap: 9px; padding: 14px 10px; }
    .garantia-ico { width: 34px; height: 34px; border-radius: 10px; }
    .garantia-ico .ico { width: 17px; height: 17px; }
    .garantia strong { font-size: 12.5px; line-height: 1.25; }
    .garantia div span { margin-top: 2px; font-size: 11.5px; line-height: 1.35; }
}

/* ============================================================
   Carrinho no celular: WhatsApp e avaliações (2026-09-14)
   Pedido do dono. Dois cartões escuros compactos depois das contas e antes
   do total fixo (rolam junto). Só no celular; no computador o carrinho
   segue como estava.
   ============================================================ */
.gaveta-chamadas { display: none; }
@media (max-width: 760px) {
    .gaveta-chamadas { display: grid; gap: 8px; margin: 4px 20px 16px; }
    .gaveta-cham {
        display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; border-radius: 16px; color: #fff; text-decoration: none;
        background: radial-gradient(70% 160% at 0% 0%, rgb(224 177 46 / .2), transparent 60%), linear-gradient(135deg, #1a1a1b, #0b0b0c);
        border: 1px solid rgb(224 177 46 / .4);
    }
    .gaveta-cham:active { transform: scale(.99); }
    .gaveta-cham-ico {
        width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff;
        background: linear-gradient(180deg, #25d366, #0e8a3e); box-shadow: 0 6px 14px -6px rgb(37 211 102 / .7);
    }
    .gaveta-cham-ico svg { width: 21px; height: 21px; }
    .gaveta-cham-fotos { display: flex; flex: none; padding-left: 10px; }
    .gaveta-cham-fotos img { width: 34px; height: 34px; margin-left: -10px; object-fit: cover; border-radius: 50%; border: 2px solid #e0b12e; background: #0b0b0c; }
    .gaveta-cham-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
    .gaveta-cham-txt strong { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.25; color: #fff; }
    .gaveta-cham-txt strong .aval-estrelas svg { width: 13px; height: 13px; }
    .gaveta-cham-txt small { font-size: 12px; line-height: 1.3; color: #cfc8b8; }
    .gaveta-cham-seta { flex: none; width: 17px; height: 17px; color: var(--ouro-brilho); }
}
/* Carrinho no celular: só as avaliações, bem pequenas (pedido do dono), numa linha fina. */
@media (max-width: 760px) {
    .gaveta-chamadas { margin: 2px 20px 12px; }
    .gaveta-cham--aval { min-height: 0; gap: 8px; padding: 6px 10px; border-radius: 999px; }
    .gaveta-cham--aval .gaveta-cham-fotos { padding-left: 6px; }
    .gaveta-cham--aval .gaveta-cham-fotos img { width: 22px; height: 22px; margin-left: -6px; border-width: 1.5px; }
    .gaveta-cham--aval .gaveta-cham-txt { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
    .gaveta-cham--aval .gaveta-cham-txt strong { gap: 3px; font-size: 12px; }
    .gaveta-cham--aval .gaveta-cham-txt strong .aval-estrelas svg { width: 10px; height: 10px; }
    .gaveta-cham--aval .gaveta-cham-txt small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
    .gaveta-cham--aval .gaveta-cham-seta { width: 13px; height: 13px; }
}
/* Menu do celular: cartão das avaliações agora no fim, dentro do rodapé do menu (embaixo da conta). */
.menu-pe .menu-aval { margin: 8px 2px 0; }
.menu-pe a.menu-aval { color: #fff; padding: 12px 12px 12px 14px; }
.menu-pe a.menu-aval .ico { color: var(--ouro-brilho); }
.menu-pe .menu-aval-ico .ico { color: #1a1300; }
/* Menu do celular: dentro do rodapé do menu, a regra ".menu-pe span { flex: 1 }" esticava o quadrado do ícone.
   Aqui o ícone volta ao tamanho certo e só o texto ocupa a sobra. */
.menu-pe .menu-aval-ico { flex: none; width: 40px; height: 40px; }
.menu-pe .menu-aval-txt { flex: 1; min-width: 0; }
.menu-pe .menu-aval-txt small { flex: none; }
.menu-pe .menu-aval-txt .aval-estrelas { flex: none; }
/* Faixa rolando no celular (bug "travado"): o :hover gruda depois de um toque e deixava a faixa parada.
   Pausa só em aparelho com mouse. Com "reduzir movimento" ela passa bem mais devagar em vez de parar. */
.aviso--rolando:hover .aviso-trilho { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
    .aviso--rolando:hover .aviso-trilho { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
    .aviso-trilho { animation: aviso-rola calc(var(--aviso-dur, 40s) * 2.5) linear infinite; }
}

/* Rodapé: crédito do desenvolvedor na linha final (pedido do dono, 2026-09-14). */
.rodape-base .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; }
.rodape-credito { color: #75716a; }
.rodape-credito strong { font-weight: 600; background: var(--grad-ouro); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 760px) {
    .rodape-base .container { flex-direction: column; justify-content: center; text-align: center; }
}

/* ============================================================
   Celular: faixa do WhatsApp pequena, do tamanho do cartão das avaliações (2026-09-14)
   Pedido do dono ("deixa o zap pequeno igual das avaliações"). Uma linha: logo da loja,
   rótulo dourado + pergunta e o botão redondo verde. Menos espaço até o rodapé.
   ============================================================ */
.faixa-zap-rotulo { display: none; }
@media (max-width: 760px) {
    .faixa { padding-bottom: 50px; }
    .faixa-zap { flex-wrap: nowrap; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 20px; }
    .faixa-zap-ico, .faixa-zap-ico img { width: 46px; height: 46px; }
    .faixa-zap-texto { gap: 2px; }
    .faixa-zap-rotulo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ouro-brilho); }
    .faixa-zap-texto strong { font-size: 15px; line-height: 1.25; }
    .faixa-zap-texto span { display: none; }
    .faixa-zap-btn { flex: none; width: 46px; height: 46px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; font-size: 0; }
    .faixa-zap-btn-ico { margin: 0; }
    .faixa-zap-seta { display: none; }
    .aval-home { padding-bottom: 28px; }
}
/* Computador: menos espaço entre o cartão das avaliações e o rodapé (pedido do dono; no celular já estava bom). */
@media (min-width: 761px) {
    .aval-home { padding-bottom: 24px; }
}

/* ============================================================
   Carrinho: escolher o endereço de entrega (2026-09-14)
   Pedido do dono. Só aparece para cliente com 2 ou mais endereços. Cada
   endereço é um cartão com botão de marcar; o marcado ganha borda dourada.
   ============================================================ */
.gaveta-enderecos { display: grid; gap: 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--borda); }
.gaveta-enderecos .frete-label { margin: 0; }
.end-op { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--borda); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.end-op:hover { border-color: rgb(193 145 1 / .6); }
.end-op input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--ouro-escuro); }
.end-op:has(input:checked) { border-color: var(--ouro); background: #fffaf0; box-shadow: 0 0 0 3px rgb(193 145 1 / .12); }
.end-op-txt { display: grid; gap: 2px; min-width: 0; }
.end-op-txt strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; line-height: 1.3; color: var(--texto); }
.end-op-txt em { padding: 1px 7px; border-radius: 999px; background: var(--grad-ouro); color: #1a1405; font-size: 10.5px; font-style: normal; font-weight: 700; }
.end-op-txt small { font-size: 12.5px; line-height: 1.35; color: var(--texto-3); overflow-wrap: anywhere; }
.end-op-novo { display: inline-flex; align-items: center; gap: 5px; justify-self: start; font-size: 13px; font-weight: 600; color: var(--ouro-escuro); text-decoration: underline; }
.end-op-novo .ico { width: 14px; height: 14px; }
/* Rodapé: o cartão "Entre em nosso grupo" sobe mais (pedido do dono: margem grande em cima, no celular). */
.rodape { padding-top: 40px; }
@media (max-width: 760px) {
    .rodape { padding-top: 20px; }
}

/* ============================================================
   Cartões e página do produto caprichados (2026-09-14)
   Pedido do dono ("pobrinha", "aproveitar os cantos da foto, aí destaca").
   Foto maior: menos margem e cartão um pouco mais baixo que quadrado (as caixas
   dos produtos são largas). Preço com "no Pix" em etiqueta. Página do produto
   com foto grande, bloco do preço com faixa dourada e abas em cartões.
   As media queries ficam DEPOIS das regras base (regra base depois anula).
   ============================================================ */
.card-midia { aspect-ratio: 1 / .9; padding: 4%; background: radial-gradient(120% 90% at 50% 40%, #fff 55%, #f6f1e6 100%); }
.card:hover .card-midia > img, .card:hover .card-midia > svg { transform: scale(1.08); }
.card-corpo { gap: 5px; padding: 14px 16px 16px; }
.card-nome { font-size: 15.5px; font-weight: 700; color: var(--texto); }
.card-precos { padding-top: 8px; }
.card-corpo .preco { align-items: center; gap: 8px; font-size: 25px; }
.card-corpo .preco small { padding: 3px 8px; border-radius: 999px; background: #fdf1cf; color: #7a5a00; font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1.2; }
.card-corpo .parcela { margin-top: 3px; }
.card-garantia { margin-top: 12px; }
.grade.lista .card-midia { aspect-ratio: 1 / 1; padding: 6px; background: #fff; }

.produto { gap: 48px; }
.produto-midia { padding: 2.5%; border-radius: 30px; border-color: #ece3cf; background: radial-gradient(110% 85% at 50% 42%, #fff 58%, #f5efe2 100%); box-shadow: 0 30px 60px -44px rgb(0 0 0 / .45); }
.produto-info > .card-marca { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: #fdf3d6; color: #7a5a00; font-size: 12px; }
.produto-info h1 { margin: 12px 0 10px; line-height: 1.08; }
.produto-resumo { font-size: 16px; }
.bloco-preco { position: relative; overflow: hidden; margin-top: 22px; padding: 26px 24px 22px; border-radius: 22px; border-color: #ece3cf; background: linear-gradient(180deg, #fffdf7, #fff 45%); box-shadow: 0 24px 50px -36px rgb(0 0 0 / .4); }
.bloco-preco::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--grad-ouro); }
.bloco-preco .preco { font-size: 44px; letter-spacing: -.03em; }
.bloco-preco .parcela { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14.5px; color: var(--texto-2); }
.bloco-preco .parcela > .ico { width: 18px; height: 18px; flex: none; color: var(--ouro-escuro); }
.bloco-preco .estoque { margin-top: 16px; padding: 6px 14px 6px 12px; border-radius: 999px; background: #eefaf2; font-weight: 600; }
.bloco-preco .estoque.baixo { background: #fff4e5; }
.bloco-preco .estoque.fora { background: #fdecec; }
.bloco-preco .compra .btn { height: 56px; font-size: 16px; }
.bloco-preco .btn-comprar { height: 54px; font-size: 15.5px; }
.detalhes details { margin-top: 10px; padding: 0 18px; border: 1px solid var(--borda); border-radius: 16px; background: #fff; }
.detalhes details[open] { border-color: rgb(193 145 1 / .4); box-shadow: 0 16px 30px -26px rgb(193 145 1 / .6); }
.detalhes details summary { font-weight: 700; }

@media (max-width: 760px) {
    .card-midia { padding: 3%; }
    .card-corpo { padding: 11px 11px 13px; }
    .card-nome { font-size: 13px; }
    .card-corpo .preco { flex-wrap: wrap; row-gap: 2px; gap: 5px; font-size: 19px; }
    .card-corpo .preco small { padding: 2px 6px; font-size: 9.5px; }
    .produto-midia { padding: 2%; border-radius: 22px; }
    .bloco-preco { padding: 22px 18px 18px; border-radius: 18px; }
    .bloco-preco .preco { font-size: 36px; }
    .bloco-preco .parcela { font-size: 13.5px; }
    .detalhes details { padding: 0 14px; }
}
@media (max-width: 480px) {
    .card-corpo { padding: 10px 10px 12px; }
    .card-nome { font-size: 12.5px; }
    .card-corpo .preco { font-size: 17.5px; }
    .bloco-preco .preco { font-size: 33px; }
}
/* Foto da página do produto: quadro um pouco mais baixo que quadrado (as caixas são largas) e sem a linha solta
   acima das abas de descrição. */
.produto-midia { aspect-ratio: 1 / .86; }
.detalhes { border-top: 0; }
@media (max-width: 760px) {
    .produto-midia { aspect-ratio: 1 / .82; }
}
/* Computador: algumas fotos altas encostavam na linha dourada que separa a foto do fabricante. A área da foto fica um
   pouco mais alta (a linha desce) e com mais folga embaixo; o zoom do mouse cresce menos (pedido do dono). */
@media (min-width: 761px) {
    .card-midia { aspect-ratio: 1 / .98; padding: 4% 5% 8%; }
    .card:hover .card-midia > img, .card:hover .card-midia > svg { transform: scale(1.04); }
    .grade.lista .card-midia { aspect-ratio: 1 / 1; padding: 6px; }
}

/* ============================================================
   "Ver todos": divisórias por categoria (2026-09-14)
   Pedido do dono: ao abrir o catálogo completo, uma divisória com ícone, nome e
   quantidade antes de cada categoria, com linha dourada e "Ver só ...".
   Montadas pelo assets/loja.js (só sem busca, sem filtro e na ordem normal).
   ============================================================ */
.grade-divisoria { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin: 30px 0 2px; }
.grade-divisoria:first-child { margin-top: 4px; }
.gd-titulo { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--fonte-titulo); font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; white-space: nowrap; }
.gd-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--preto); color: var(--ouro-brilho); box-shadow: 0 10px 22px -14px rgb(0 0 0 / .8); }
.gd-ico .ico { width: 22px; height: 22px; }
.gd-titulo small { align-self: center; padding: 4px 10px; border-radius: 999px; background: #fdf1cf; color: #7a5a00; font-family: var(--fonte); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.gd-linha { flex: 1; min-width: 20px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgb(193 145 1 / .6), rgb(193 145 1 / .08)); }
.gd-ver { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 12px 0 16px; border-radius: 999px; border: 1px solid var(--borda); background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--texto-2); cursor: pointer; transition: border-color .15s, color .15s; }
.gd-ver:hover { border-color: var(--ouro); color: var(--texto); }
.gd-ver .ico { width: 16px; height: 16px; color: var(--ouro-escuro); }
.grade.lista .grade-divisoria { margin-top: 22px; }
@media (max-width: 760px) {
    .grade-divisoria { gap: 10px; margin: 22px 0 0; }
    .grade-divisoria:first-child { margin-top: 0; }
    .gd-titulo { gap: 9px; font-size: 19px; }
    .gd-ico { width: 36px; height: 36px; border-radius: 11px; }
    .gd-ico .ico { width: 18px; height: 18px; }
    .gd-titulo small { display: none; }
    .gd-ver { min-height: 34px; padding: 0 8px 0 12px; font-size: 12.5px; }
    .gd-ver-cat { display: none; }
}
/* Página do produto e cartões: a foto SEMPRE cabe inteira no quadro (pedido do dono: o Lipoland MD, foto alta, ficava
   cortada embaixo). Com o quadro mais baixo que quadrado, a imagem com height:100% num grid não encolhia e o
   overflow cortava; agora ela ocupa a área interna do quadro por posição absoluta e o object-fit:contain encaixa. */
.produto-midia > img, .produto-midia > svg { position: absolute; inset: 3%; width: 94%; height: 94%; max-width: none; object-fit: contain; }
.card-midia > img, .card-midia > svg { position: absolute; top: 4%; left: 5%; width: 90%; height: 88%; max-width: none; object-fit: contain; }
@media (max-width: 760px) {
    .produto-midia > img, .produto-midia > svg { inset: 3%; width: 94%; height: 94%; }
    .card-midia > img, .card-midia > svg { top: 3%; left: 3%; width: 94%; height: 94%; }
}
.grade.lista .card-midia > img, .grade.lista .card-midia > svg { position: static; width: 100%; height: 100%; }
/* "Ver todos" sobe até a primeira divisória: a folga desconta o cabeçalho grudado no topo. */
.grade-divisoria { scroll-margin-top: 130px; }
@media (max-width: 760px) { .grade-divisoria { scroll-margin-top: 150px; } }
/* Folga medida: o cabeçalho grudado vai até ~150px no computador e ~204px no celular. */
.grade-divisoria { scroll-margin-top: 172px; }
@media (max-width: 760px) { .grade-divisoria { scroll-margin-top: 222px; } }

/* ============================================================
   Retoques do cabeçalho, menu do celular e fotos com fundo branco (2026-09-14)
   - Cabeçalho quase opaco: ao rolar, textos da página apareciam por trás da busca
     (computador) e da barra reduzida (celular).
   - Menu do celular: "Ver a loja completa" colava na caixa de baixo (carrinho, calculadora...).
   - Foto com fundo branco (ex.: Kit Blend) virava um quadrado branco dentro do quadro creme:
     o branco da foto se mistura ao fundo (multiply). Etiqueta de marca vazia some.
   ============================================================ */
.topo { background: rgb(11 11 12 / .97); }
.menu-todos { margin: 18px 16px 18px; }
.menu-pe { padding-top: 14px; }
.produto-midia > img, .card-midia > img { mix-blend-mode: multiply; }
.produto-info > .card-marca:empty { display: none; }
/* Cabeçalho sólido: com o desfoque por trás, o conteúdo da página ainda aparecia ao rolar (computador e celular). */
.topo { background: #0b0b0c; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Foto de produto sem sombra: em foto quadrada com fundo branco (Kit Blend) a sombra desenhava um quadrado.
   O desenho de embalagem (svg) continua com a sombra. */
.produto-midia img.produto-svg { filter: none; }

/* ============================================================
   Carrinho caprichado (2026-09-14)
   Pedido do dono ("simula um iPhone 14... muito apertado, pobrinho"). Cada
   produto é um cartão: foto de 68px, marca e nome em até 2 linhas, lixeira no
   canto e, embaixo, quantidade à esquerda e preço (com "cada") à direita. A
   lista fica num fundo creme; frete, cupom e resumo viram cartões com respiro.
   As media queries ficam DEPOIS das regras base.
   ============================================================ */
.gaveta-topo h2 { display: flex; align-items: baseline; gap: 8px; }
.gaveta-qtd { font-family: var(--fonte); font-size: 13px; font-weight: 600; color: var(--texto-3); }
.gaveta-itens { display: grid; gap: 10px; padding: 14px 16px; background: #f7f4ec; }
.item.item--cartao {
    grid-template-columns: 68px minmax(0, 1fr) auto; grid-template-areas: "img info x" "img rodape rodape";
    align-items: start; gap: 4px 12px; padding: 12px; border: 1px solid #ebe4d3; border-bottom: 1px solid #ebe4d3;
    border-radius: 16px; background: #fff; box-shadow: 0 10px 22px -20px rgb(0 0 0 / .45);
}
.item--cartao .item-img { grid-area: img; width: 68px; height: 68px; border-radius: 12px; background: #fff; border: 1px solid #f0ebdf; overflow: hidden; }
.item--cartao .item-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.item--cartao .item-info { grid-area: info; min-width: 0; padding-top: 1px; }
.item--cartao .item-marca { font-size: 10.5px; }
.item--cartao .item-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.3; }
.item--cartao .item-kit { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--texto-3); }
.item-x { grid-area: x; width: 34px; height: 34px; margin: -4px -4px 0 0; display: grid; place-items: center; border-radius: 10px; color: var(--texto-3); text-decoration: none; }
.item-x .ico { width: 17px; height: 17px; }
.item-x:hover { background: #fdecec; color: var(--vermelho); }
.item-rodape { grid-area: rodape; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.item-rodape .qtd { height: 38px; border-color: #e6dfcf; background: #faf8f3; }
.item-rodape .qtd button { width: 36px; }
.item-rodape .qtd button .ico { width: 16px; height: 16px; }
.item-rodape .qtd output { width: 26px; font-size: 15px; font-weight: 700; }
.item-valores { text-align: right; }
.item--cartao .item-preco { margin: 0; font-size: 17px; line-height: 1.1; }
.item-unit { display: block; margin-top: 2px; font-size: 11.5px; color: var(--texto-3); }
.gaveta-frete, .gaveta-cupom { margin: 12px 16px 0; padding: 14px; border: 1px solid var(--borda); border-radius: 16px; background: #fff; }
.gaveta-resumo { margin: 12px 16px 0; padding: 14px; border-radius: 16px; background: #faf8f3; border: 1px solid #efe9dc; }
.gaveta-chamadas { margin-top: 12px; }

@media (max-width: 760px) {
    .gaveta-topo { padding: 10px 14px; }
    .gaveta-topo h2 { font-size: 19px; }
    /* Selos: faixa fina com os dois títulos lado a lado (a frase longa fica no computador). */
    .gaveta-selos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 14px; }
    .gaveta-selo { gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid rgb(193 145 1 / .22); }
    .gaveta-selo-ico { width: 26px; height: 26px; }
    .gaveta-selo-ico .ico { width: 14px; height: 14px; }
    .gaveta-selo > span:last-child { font-size: 0; line-height: 0; }
    .gaveta-selo strong { display: block; font-size: 12px; line-height: 1.25; }
    .gaveta-selo strong::after { content: none; }
    .gaveta-itens { padding: 12px; gap: 10px; }
    .item.item--cartao { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 11px; }
    .item--cartao .item-img { width: 64px; height: 64px; }
    .gaveta-frete, .gaveta-cupom, .gaveta-resumo { margin: 10px 12px 0; padding: 12px; }
    .gaveta-chamadas { margin: 10px 12px 12px; }
}
@media (min-width: 761px) {
    .gaveta-selo-10h { display: none; }
}
/* Selos do carrinho editáveis (aba Ajustes): título do computador e título do celular. */
.gav-tit-cel { display: none; }
.gaveta-selo .gav-selo-txt strong { display: inline; font-size: inherit; color: #3d3116; }
.gaveta-selo .gav-selo-txt strong::after { content: none; }
@media (max-width: 760px) {
    .gav-tit-pc { display: none; }
    .gav-tit-cel { display: inline; }
}
/* Carrinho no celular: "Seu carrinho" colava na borda dourada (foco) em volta da seta de voltar. */
@media (max-width: 760px) {
    .gaveta-topo { gap: 12px; }
    .gaveta-voltar { margin-left: -2px; }
}

/* ============================================================
   Página do produto: compartilhar (2026-09-15)
   Pedido do dono: WhatsApp, Facebook, copiar link e, no celular, o menu de
   compartilhar do aparelho ("Mais"). Textos e liga/desliga na aba Página do produto.
   ============================================================ */
.compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--borda); }
.compartilhar-titulo { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.compartilhar-titulo .ico { width: 16px; height: 16px; color: var(--ouro-escuro); }
.compartilhar-botoes { flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.comp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda); background: #fff; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--texto); text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s, background .15s; }
.comp-btn .ico { width: 18px; height: 18px; flex: none; }
.comp-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgb(0 0 0 / .5); }
.comp-zap { background: linear-gradient(180deg, #25d366, #128c4a); border-color: transparent; color: #fff; }
.comp-zap:hover { color: #fff; }
.comp-face { background: #1877f2; border-color: transparent; color: #fff; }
.comp-face:hover { color: #fff; }
.comp-link .ico { color: var(--ouro-escuro); }
.comp-link.ok { border-color: #86d3a3; background: #eefaf2; color: #11803f; }
.comp-link.ok .ico { color: #11803f; }
.comp-btn:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }
@media (max-width: 560px) {
    .compartilhar { flex-direction: column; align-items: stretch; padding: 12px; }
    .compartilhar-botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
    .comp-btn { min-height: 44px; }
}

/* ============================================================
   Página do produto: selos em 3 quadradinhos lado a lado (2026-09-15)
   Pedido do dono: em vez de um embaixo do outro, 3 quadrados com o ícone em cima,
   o título e a frase menor embaixo (o texto é editado na aba Página do produto).
   Vem depois de todas as regras antigas de .beneficios / .beneficio.
   ============================================================ */
.beneficios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.beneficio {
    flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; padding: 14px 10px 12px;
    border: 1px solid rgb(193 145 1 / .3); border-radius: 16px; background: linear-gradient(180deg, #fffdf7, #fff);
    box-shadow: 0 14px 28px -26px rgb(193 145 1 / .8); text-align: center; font-size: 12.5px; line-height: 1.35;
}
.beneficio + .beneficio { border-top: 1px solid rgb(193 145 1 / .3); }
.beneficio .ico { width: 42px; height: 42px; padding: 10px; border-radius: 13px; }
.beneficio-txt { justify-items: center; gap: 3px; }
.beneficio-txt small { font-size: 10.5px; letter-spacing: .07em; }
.beneficio-txt span { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--texto-2); }
@media (max-width: 560px) {
    .beneficios { gap: 6px; }
    .beneficio { flex-direction: column; align-items: center; gap: 6px; padding: 11px 6px 10px; border-radius: 14px; }
    .beneficio .ico { width: 36px; height: 36px; padding: 9px; border-radius: 11px; }
    .beneficio-txt small { font-size: 9px; letter-spacing: .04em; }
    .beneficio-txt span { font-size: 11px; line-height: 1.3; }
}
/* Compartilhar: título em cima e botões numa fileira só (no computador quebravam em 2 linhas). No celular, 2 por linha;
   quando o aparelho não tem o "Mais", o "Copiar link" ocupa a linha inteira. */
.compartilhar { flex-direction: column; align-items: stretch; }
.compartilhar-botoes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-content: stretch; }
.comp-btn { padding: 0 10px; white-space: nowrap; }
@media (max-width: 560px) {
    .compartilhar-botoes { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compartilhar-botoes:has(.comp-mais[hidden]) .comp-link { grid-column: 1 / -1; }
}

/* ============================================================
   Compartilhar em UMA linha (2026-09-15)
   Pedido do dono ("botões feios, deixa top em 1 linha, no celular e no PC"):
   cartão escuro com o título à esquerda e botões redondos só com o ícone à
   direita (WhatsApp verde, Facebook azul, link dourado, "Mais" no celular).
   Os nomes dos botões ficam escondidos na tela (continuam no aria-label).
   ============================================================ */
.compartilhar {
    position: relative; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 10px 10px 10px 18px; border-radius: 999px; border: 1px solid rgb(224 177 46 / .35);
    background: radial-gradient(80% 200% at 0% 50%, rgb(224 177 46 / .16), transparent 60%), linear-gradient(135deg, #1b1b1d, #0b0b0c);
    box-shadow: 0 16px 30px -24px rgb(0 0 0 / .8);
}
.compartilhar-titulo { flex: 1; min-width: 0; gap: 8px; font-size: 13px; letter-spacing: .08em; color: #fff; white-space: nowrap; }
.compartilhar-titulo .ico { width: 17px; height: 17px; color: var(--ouro-brilho); }
.compartilhar-botoes { display: flex; flex: none; flex-wrap: nowrap; gap: 8px; grid-auto-flow: unset; }
.comp-btn { width: 44px; height: 44px; min-height: 0; padding: 0; gap: 0; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.comp-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.comp-btn .ico { width: 21px; height: 21px; }
.comp-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 20px -10px rgb(0 0 0 / .8); }
.comp-zap { background: linear-gradient(180deg, #2bd96d, #128c4a); color: #fff; }
.comp-face { background: linear-gradient(180deg, #2d88ff, #1463d4); color: #fff; }
.comp-link, .comp-link.ok { background: var(--grad-ouro); color: #1a1405; }
.comp-link .ico, .comp-link.ok .ico { color: #1a1405; }
.comp-mais { background: rgb(255 255 255 / .1); color: #fff; }
.comp-link.ok { box-shadow: 0 0 0 3px rgb(110 231 154 / .6); }
.compartilhar-botoes:has(.comp-mais[hidden]) .comp-link { grid-column: auto; }
.comp-aviso {
    position: absolute; right: 12px; bottom: calc(100% + 8px); display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; background: #11803f; color: #fff; font-size: 13px; font-weight: 700;
    box-shadow: 0 10px 22px -12px rgb(17 128 63 / .8); white-space: nowrap;
}
.comp-aviso .ico { width: 15px; height: 15px; }
@media (max-width: 560px) {
    .compartilhar { flex-direction: row; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; }
    .compartilhar-titulo { font-size: 11.5px; letter-spacing: .05em; gap: 6px; }
    .compartilhar-titulo .ico { width: 15px; height: 15px; }
    .compartilhar-botoes { display: flex; gap: 6px; }
    .comp-btn { width: 40px; height: 40px; min-height: 0; }
    .comp-btn .ico { width: 19px; height: 19px; }
}
@media (max-width: 360px) {
    .compartilhar-titulo .ico { display: none; }
    .comp-btn { width: 36px; height: 36px; }
}
/* Compartilhar embaixo do Modo de uso: mesmo respiro das abas de cima. Tela bem estreita: o título vira só o ícone
   (a palavra encostava no botão do WhatsApp). */
.detalhes + .compartilhar { margin-top: 12px; }
.compartilhar + .aviso-legal { margin-top: 14px; }
@media (max-width: 360px) {
    .compartilhar-titulo .ico { display: inline-block; width: 18px; height: 18px; }
    .compartilhar-titulo-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .comp-btn { width: 38px; height: 38px; }
}
/* Campo do CEP (página do produto e carrinho) encolhe em tela bem estreita: com min-width automático ele segurava
   234px e empurrava o botão "Calcular" para fora da tela a 320px. */
.frete-cep-linha input { min-width: 0; }
.frete-cep-linha .btn { flex: none; }

/* ============================================================
   Página do produto: calcular frete caprichado (2026-09-15)
   Pedido do dono ("pobrinho" e "dá zoom no iPhone e não volta"). Cabeçalho com
   ícone dourado, campo com pino e letra de 16px (sem zoom), botão preto,
   resultado com o destino e cada opção num cartão com ícone, prazo e preço.
   ============================================================ */
.fp-caixa { margin: 12px 0 16px; padding: 16px; border-radius: 20px; border: 1px solid #ece3cf; background: linear-gradient(180deg, #fffdf7, #fff 55%); box-shadow: 0 18px 36px -30px rgb(0 0 0 / .45); }
.fp-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fp-topo-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--grad-ouro); color: #1a1405; box-shadow: 0 8px 18px -10px rgb(193 145 1 / .9); }
.fp-topo-ico .ico { width: 21px; height: 21px; stroke-width: 2; }
.fp-topo-txt { display: grid; gap: 1px; min-width: 0; }
.fp-caixa .fp-topo .frete-label { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--texto); }
.fp-topo-txt small { font-size: 12.5px; line-height: 1.35; color: var(--texto-3); }
.fp-caixa .frete-cep-linha { display: flex; gap: 8px; }
.fp-campo { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.fp-campo > .ico { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--ouro-escuro); pointer-events: none; }
.fp-caixa .frete-cep-linha input { flex: 1; width: 100%; min-width: 0; height: 52px; padding: 0 14px 0 42px; border: 1.5px solid #e6dfcf; border-radius: 14px; background: #fff; font-size: 16px; font-weight: 600; letter-spacing: .03em; color: var(--texto); }
.fp-caixa .frete-cep-linha input::placeholder { font-weight: 500; letter-spacing: 0; color: var(--texto-3); }
.fp-caixa .frete-cep-linha input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 4px rgb(193 145 1 / .16); }
.fp-caixa .frete-cep-linha .fp-btn { flex: none; height: 52px; padding: 0 22px; border-radius: 14px; font-size: 15px; }
.fp-nao-sei { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--ouro-escuro); text-decoration: underline; }
.fp-caixa .frete-msg { margin-top: 10px; font-size: 13.5px; }
.fp-caixa .frete-msg.carregando { color: var(--texto-2); }
.fp-caixa .frete-msg.carregando::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 2px solid rgb(193 145 1 / .3); border-top-color: var(--ouro-escuro); border-radius: 50%; animation: fp-gira .8s linear infinite; }
@keyframes fp-gira { to { transform: rotate(360deg); } }
.fp-caixa .frete-lista { gap: 8px; margin-top: 12px; }
.fp-destino { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13.5px; color: var(--texto-2); }
.fp-destino .ico { width: 16px; height: 16px; flex: none; color: var(--ouro-escuro); }
.fp-destino b { color: var(--texto); }
.fp-caixa .fp-op { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border: 1.5px solid rgb(193 145 1 / .35); border-radius: 16px; background: #fff; }
.fp-op-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #fdf3d6; color: #7a5a00; }
.fp-op-ico .ico { width: 19px; height: 19px; }
.fp-op-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fp-caixa .fp-op .fo-nome { font-size: 15px; font-weight: 700; }
.fp-caixa .fp-op .fo-prazo { font-size: 12.5px; color: var(--texto-3); }
.fp-caixa .fp-op .fo-preco { flex: none; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 800; color: var(--texto); }
@media (max-width: 560px) {
    .fp-caixa { padding: 14px; border-radius: 18px; }
    .fp-caixa .frete-cep-linha .fp-btn { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .fp-caixa .frete-msg.carregando::before { animation: none; }
}
/* Tela bem estreita (até 360px): o CEP não corta o texto do campo e o "Adicionar ao carrinho" cabe no botão.
   A letra dos CAMPOS continua 16px (menos que isso o iPhone dá zoom). */
@media (max-width: 360px) {
    .fp-caixa .frete-cep-linha { gap: 6px; }
    .fp-caixa .frete-cep-linha input { padding: 0 8px 0 34px; }
    .fp-campo > .ico { left: 11px; width: 16px; height: 16px; }
    .fp-caixa .frete-cep-linha .fp-btn { padding: 0 12px; font-size: 14px; }
    .bloco-preco .compra { gap: 8px; }
    .bloco-preco .compra .btn { padding: 0 10px; font-size: 14px; }
    .bloco-preco .compra .qtd button { width: 32px; }
    .bloco-preco .compra .qtd input { width: 26px; }
}
/* Até 360px (medido a 320px): o "Calcular" desce para baixo do campo, com a largura toda, e o texto do
   "Adicionar ao carrinho" pode quebrar em 2 linhas dentro do botão. */
@media (max-width: 360px) {
    .fp-caixa .frete-cep-linha { flex-wrap: wrap; }
    .fp-campo { flex: 1 1 100%; }
    .fp-caixa .frete-cep-linha input { padding: 0 12px 0 40px; }
    .fp-campo > .ico { left: 14px; width: 18px; height: 18px; }
    .fp-caixa .frete-cep-linha .fp-btn { flex: 1 1 100%; height: 48px; font-size: 15px; }
    .bloco-preco .compra .btn { white-space: normal; line-height: 1.15; text-align: center; }
}

/* ============================================================
   Rodapé caprichado (2026-09-15)
   Pedido do dono ("ta pobrinho"). Colunas equilibradas, título com fio dourado,
   links da Ajuda com setinha, ícones do Atendimento em quadradinho dourado
   (igual ao resto do site) e a faixa de confiança: selo do SSL (só em https),
   formas de pagamento e compra segura. As regras de tela menor são repetidas
   aqui embaixo porque regra base depois de media query anula a media query.
   ============================================================ */
.rodape-grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; padding-bottom: 40px; }
.rodape-sobre p { max-width: 360px; line-height: 1.6; }
.rodape h4 { position: relative; padding-bottom: 12px; margin-bottom: 18px; color: #f1eee8; }
.rodape h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--grad-ouro); }

.rodape-ajuda ul { gap: 12px; }
.rodape-ajuda a { display: inline-flex; align-items: center; gap: 10px; color: #c9c4b8; }
.rodape-ajuda a::before {
    content: ""; width: 6px; height: 6px; flex: none; margin-left: 1px;
    border-top: 1.5px solid var(--ouro-claro); border-right: 1.5px solid var(--ouro-claro);
    transform: rotate(45deg); transition: transform .2s var(--suave);
}
.rodape-ajuda a:hover::before { transform: translateX(3px) rotate(45deg); }

.rodape li.com-ico { gap: 12px; line-height: 1.45; color: #c9c4b8; }
.rodape li.com-ico > .ico {
    width: 34px; height: 34px; padding: 8px; box-sizing: border-box; flex: none; border-radius: 10px;
    background: rgb(224 177 46 / .1); border: 1px solid rgb(224 177 46 / .22); color: var(--ouro-claro);
}
.rodape li.com-ico a { color: #f1eee8; font-weight: 600; }

/* Faixa de confiança */
.rodape-selos {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
    margin-bottom: 36px; padding: 20px 24px; border-radius: 20px;
    background: rgb(255 255 255 / .025); border: 1px solid rgb(255 255 255 / .07);
}
.selo-ssl {
    display: flex; align-items: center; gap: 12px; flex: none;
    padding: 12px 18px 12px 12px; border-radius: 16px;
    background: linear-gradient(180deg, rgb(34 197 94 / .12), rgb(34 197 94 / .04));
    border: 1px solid rgb(74 222 128 / .35);
}
.selo-ssl-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #15803d; color: #fff; box-shadow: 0 8px 20px -10px rgb(34 197 94 / .8); }
.selo-ssl-ico .ico { width: 22px; height: 22px; }
.selo-ssl-txt { display: grid; gap: 2px; }
.selo-ssl-txt strong { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #bbf7d0; }
.selo-ssl-txt small { font-size: 12px; color: #9fb8a6; }

.rodape-selos-linhas { display: grid; gap: 12px; flex: 1 1 520px; min-width: 0; }
.rodape-selos-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.rodape-selos-tit { width: 200px; flex: none; white-space: nowrap; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8a857b; }
.rodape ul.rodape-selos-lista { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.rodape-selos-lista li {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
    background: #151412; border: 1px solid rgb(224 177 46 / .18); color: #d9d5cc; white-space: nowrap;
}
.rodape-selos-lista .ico { width: 16px; height: 16px; flex: none; color: var(--ouro-claro); }
.rodape-selos-lista .selo-pix .ico { color: #4fd1c1; }

@media (max-width: 1080px) {
    .rodape-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
    .rodape-sobre { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .rodape-grade { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-bottom: 32px; }
    /* Os 4 links da Ajuda em duas colunas: o rodapé fica bem mais curto no celular. */
    .rodape-ajuda ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; }
    .rodape-ajuda a { align-items: flex-start; gap: 8px; line-height: 1.35; }
    .rodape-ajuda a::before { margin-top: 6px; }
    .rodape-selos { padding: 16px; gap: 16px; margin-bottom: 28px; }
    .selo-ssl { width: 100%; }
    .rodape-selos-linhas { flex-basis: 100%; gap: 16px; }
    .rodape-selos-grupo { flex-direction: column; align-items: flex-start; gap: 8px; }
    .rodape-selos-tit { width: auto; }
    .rodape-selos-lista li { white-space: normal; }
}
/* Celular bem estreito (até 380px): a Ajuda volta a uma coluna, senão cada link quebra em duas linhas. */
@media (max-width: 380px) {
    .rodape-ajuda ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* Faixa de confiança no computador (2026-09-15): o dono achou feia a versão com o título ao lado dos
   botõezinhos e aprovou a do celular. Aqui fica igual à do celular, só que em colunas: selo do SSL |
   Formas de pagamento | Compra segura, cada uma com o título EM CIMA, separadas por um fio. */
@media (min-width: 761px) {
    .rodape-selos { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; gap: 24px 0; padding: 24px 28px; }
    .rodape-selos-linhas { display: contents; }
    .rodape-selos-grupo { flex-direction: column; align-items: flex-start; gap: 12px; }
    .rodape-selos-tit { width: auto; }
    .rodape-selos-grupo + .rodape-selos-grupo { padding-left: 28px; margin-left: 28px; border-left: 1px solid rgb(255 255 255 / .08); }
    .selo-ssl { align-self: center; }
}
@media (min-width: 761px) and (max-width: 1080px) {
    .rodape-selos--ssl { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
    .rodape-selos--ssl .selo-ssl { grid-column: 1 / -1; justify-self: start; }
}
@media (min-width: 1081px) {
    .rodape-selos--ssl { grid-template-columns: auto minmax(0, .75fr) minmax(0, 1.25fr); }
    .rodape-selos--ssl .selo-ssl { margin-right: 28px; }
}
/* Selo do SSL por ÚLTIMO (pedido do dono, 2026-09-15): no celular embaixo de "Compra segura";
   no computador, na coluna da direita. Pagamento com largura para Pix e Cartão ficarem lado a lado. */
@media (min-width: 761px) and (max-width: 1080px) {
    .rodape-selos--ssl .selo-ssl { grid-column: 1 / -1; justify-self: start; }
}
@media (min-width: 1081px) {
    .rodape-selos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
    .rodape-selos--ssl { grid-template-columns: minmax(310px, 1fr) minmax(0, 1.25fr) auto; }
    .rodape-selos--ssl .selo-ssl { margin: 0 0 0 28px; }
    .selo-ssl-txt small { white-space: nowrap; }
}
/* Computador organizado como o celular (pedido do dono, 2026-09-15): em cima Formas de pagamento | Compra
   segura; embaixo, POR ÚLTIMO, o "Site seguro" numa faixa verde de ponta a ponta, texto numa linha só. */
@media (min-width: 761px) {
    .rodape-selos, .rodape-selos--ssl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 22px 0; }
    .rodape-selos--ssl .selo-ssl { grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin: 0; padding: 12px 18px; }
    .selo-ssl-ico { width: 38px; height: 38px; border-radius: 11px; }
    .selo-ssl-txt { grid-auto-flow: column; align-items: baseline; gap: 12px; }
    .selo-ssl-txt small { font-size: 13px; white-space: nowrap; }
}
/* Pagamento só com a largura dos botõezinhos: sobra espaço para os 4 de "Compra segura" numa linha.
   Tela média (até 1180px): 2 + 2, nunca 3 + 1 sozinho. */
@media (min-width: 761px) {
    .rodape-selos, .rodape-selos--ssl { grid-template-columns: auto minmax(0, 1fr); }
}
@media (min-width: 761px) and (max-width: 1180px) {
    .rodape-selos-grupo + .rodape-selos-grupo ul.rodape-selos-lista { display: grid; grid-template-columns: repeat(2, max-content); }
}
/* Selo "Site seguro" no computador IGUAL ao do celular (pedido do dono, 2026-09-15): cadeado grande no
   quadrado verde e o texto em duas linhas. Continua por último, de ponta a ponta, com o conteúdo no meio. */
@media (min-width: 761px) {
    .rodape-selos--ssl .selo-ssl { justify-content: center; gap: 14px; padding: 14px 18px; }
    .selo-ssl-ico { width: 48px; height: 48px; border-radius: 13px; }
    .selo-ssl-ico .ico { width: 24px; height: 24px; }
    .selo-ssl-txt { grid-auto-flow: row; align-items: start; gap: 2px; }
    .selo-ssl-txt strong { font-size: 15px; }
    .selo-ssl-txt small { font-size: 12.5px; }
}

/* ============================================================
   Escudo "Site protegido" (2026-09-15)
   Pedido do dono: escudo profissional com data. A data é de uma conferência REAL do certificado
   (inc/ssl_selo.php, uma vez por dia). Fica ao lado do "Site seguro" no computador e embaixo dele
   no celular. Nunca "auditado"/"blindado": isso é serviço de empresa contratada.
   ============================================================ */
.rodape-selos-seg { display: grid; gap: 12px; width: 100%; flex: 1 1 100%; }
.selo-escudo {
    display: flex; align-items: center; gap: 14px; min-width: 0;
    padding: 12px 18px 12px 14px; border-radius: 16px;
    background: linear-gradient(180deg, rgb(224 177 46 / .1), rgb(224 177 46 / .03));
    border: 1px solid rgb(224 177 46 / .38);
}
.selo-escudo-ico { width: 40px; height: 47px; flex: none; display: block; filter: drop-shadow(0 6px 14px rgb(224 177 46 / .35)); }
.selo-escudo-txt { display: grid; gap: 2px; min-width: 0; }
.selo-escudo-txt strong { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ouro-brilho); }
.selo-escudo-txt small { font-size: 12px; line-height: 1.35; color: #b9b3a6; }
.selo-escudo-txt small b { font-weight: 600; color: #f1eee8; }
@media (min-width: 761px) {
    .rodape-selos-seg { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .rodape-selos--ssl .rodape-selos-seg .selo-ssl { grid-column: auto; margin: 0; }
    .selo-escudo { justify-content: center; padding: 12px 18px; }
    .selo-escudo-txt strong { font-size: 15px; }
    .selo-escudo-txt small { font-size: 12.5px; }
}
/* Os dois selos com a mesma altura no computador (o "Site seguro" tinha align-self: center). */
.rodape-selos-seg > .selo-ssl, .rodape-selos-seg > .selo-escudo { align-self: stretch; }

/* ============================================================
   Selo "Privacidade protegida" (2026-09-15)
   Terceiro selo da faixa de segurança, em azul (verde = SSL, dourado = escudo). As frases são
   verdade sempre: senhas com criptografia e nenhum campo de cartão no site. Computador: 3 lado
   a lado; celular: um embaixo do outro.
   ============================================================ */
.selo-priv {
    display: flex; align-items: center; gap: 14px; min-width: 0;
    padding: 12px 18px 12px 12px; border-radius: 16px;
    background: linear-gradient(180deg, rgb(96 165 250 / .12), rgb(96 165 250 / .04));
    border: 1px solid rgb(147 197 253 / .35);
}
.selo-priv-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: #1d4ed8; color: #fff; box-shadow: 0 8px 20px -10px rgb(59 130 246 / .8); }
.selo-priv-ico .ico { width: 22px; height: 22px; }
.selo-priv-txt { display: grid; gap: 2px; min-width: 0; }
.selo-priv-txt strong { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #bfdbfe; }
.selo-priv-txt small { font-size: 12px; line-height: 1.35; color: #a9b8cc; }
@media (min-width: 761px) {
    .rodape-selos-seg { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .rodape-selos-seg > .selo-priv { align-self: stretch; justify-content: center; padding: 12px 18px; }
    .selo-priv-ico { width: 48px; height: 48px; border-radius: 13px; }
    .selo-priv-ico .ico { width: 24px; height: 24px; }
    .selo-priv-txt strong { font-size: 15px; }
    .selo-priv-txt small { font-size: 12.5px; }
}
/* Ícones dos selos nunca encolhem (a 1024px o cadeado do "Site seguro" virava um risco). Tela média
   (761-1180px): os 3 selos um embaixo do outro, como no celular — lado a lado o texto quebrava demais. */
.selo-ssl-ico, .selo-priv-ico, .selo-escudo-ico { flex: none; }
@media (min-width: 761px) and (max-width: 1180px) {
    .rodape-selos-seg { grid-template-columns: minmax(0, 1fr); }
}