/*
  Armazém Arca do Reset — estilo compartilhado das páginas internas (vitrines, listagens, produtos).
  Réplica de drajulianavarao.com: valores medidos no original (Playwright, estilos computados,
  1440 e 390) em 12/10/2026. Fontes: as mesmas do site (Playfair Display 600 + Metropolis 400/600).
*/
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/PlayfairDisplay-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url('../fonts/PlayfairDisplay-SemiBoldItalic.woff2') format('woff2')}
@font-face{font-family:'Metropolis';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Metropolis-Regular.woff2') format('woff2')}
@font-face{font-family:'Metropolis';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Metropolis-SemiBold.woff2') format('woff2')}

:root{
  --bg:#F6F1EB;            /* creme do site */
  --card:#F8F5F2;          /* fundo dos cartões */
  --ink:#262F36;           /* títulos */
  --ink-btn:#353C44;       /* texto dos botões SAIBA MAIS / EM BREVE */
  --ink-texto:#737373;     /* corpo da descrição de produto */
  --teal-a:#1E9A9E;
  --teal-b:#0E4749;
  --bege:linear-gradient(90deg,#CEBBAA 0%,#E0CDBE 49.52%,#B39982 100%);
  --sombra-vitrine:0 637px 178px rgba(0,0,0,0),0 407px 163px rgba(0,0,0,.01),0 229px 138px rgba(0,0,0,.05),0 102px 102px rgba(0,0,0,.09),0 25px 56px rgba(0,0,0,.1);
  --sombra-item:0 637px 178px rgba(0,0,0,0),0 407px 163px rgba(0,0,0,.01),0 229px 138px rgba(0,0,0,.02),0 102px 102px rgba(0,0,0,.07),0 25px 56px rgba(0,0,0,.07);
  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Metropolis', 'Helvetica Neue', Arial, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --respiro:28px;          /* base da logo → caixa do primeiro título: igual à entrada aprovada (28/20 na caixa ≈ 36/28 até o desenho da letra) */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#333;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
::selection{background:var(--teal-a);color:#fff}
:focus-visible{outline:2px solid var(--teal-a);outline-offset:4px;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:16px;top:16px;z-index:100;background:#fff;color:var(--ink);padding:10px 14px;font-family:var(--font-body)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Topo: só a logo do Armazém, em fluxo, centralizada */
.topo{position:relative;display:flex;justify-content:center;padding:24px 20px 0}
.topo a{display:block;border-radius:2px}
.topo img{height:clamp(72px,10vw,100px);width:auto;max-width:90vw}

.destaque{font-style:italic;background-image:linear-gradient(90deg,var(--teal-a) 0%,var(--teal-b) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--teal-a);padding-right:.06em}

/* Botão SAIBA MAIS / EM BREVE (Elementor, animação «shrink») */
.botao{display:inline-flex;align-items:center;gap:15px;min-height:44px;padding:23px 40px 19px;border-radius:100px;background:var(--bege);box-shadow:inset 0 -3px 0 rgba(140,112,88,.35);font-family:var(--font-body);font-weight:600;font-size:18px;line-height:27px;letter-spacing:-.7px;color:var(--ink-btn);transition:transform .3s var(--ease)}
.botao__icone{width:30px;height:30px;margin-top:-5px;flex:none}
.botao--breve .botao__texto,.botao--breve .botao__icone{opacity:.7}
.botao:focus-visible{transform:scale(.9)}
@media (hover:hover){.botao:hover{transform:scale(.9)}}

/* ---------- Vitrines ---------- */
.vitrine{max-width:1280px;margin:0 auto;padding:var(--respiro) 0 140px}
.vitrine__cabeca{text-align:center}
.vitrine__cabeca h1{margin:0 0 10px;font-family:var(--font-display);font-weight:600;font-size:56px;line-height:1.1;letter-spacing:-2.5px;color:var(--ink)}
.vitrine__cabeca p{margin:0;font-family:var(--font-body);font-size:24px;line-height:1.5;letter-spacing:-.5px;color:var(--ink)}
.vitrine__cartoes{display:flex;flex-direction:column;gap:60px;margin-top:60px}
.cartao{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 60px 20px 20px;background:var(--card);border-radius:40px;box-shadow:var(--sombra-vitrine)}
.cartao__midia{flex:1 1 0;min-width:0;display:flex;justify-content:center}
.cartao__midia img{max-height:474px;width:auto}
.cartao__texto{flex:0 0 47%;max-width:564px}
.cartao__titulo{margin:8px 0 20px;font-family:var(--font-display);font-weight:600;font-size:48px;line-height:1.1;letter-spacing:-2.5px;color:var(--ink)}
.cartao__desc{margin:0 0 28px;font-family:var(--font-body);font-size:24px;line-height:36px;letter-spacing:-.5px;color:var(--ink)}
.cartao__titulo+.botao{margin-top:8px}

/* Variante em grade de 2 (Roupas de Alta Frequência) */
.vitrine--grade .vitrine__cartoes{display:grid;grid-template-columns:repeat(2,minmax(0,614px));justify-content:center;gap:40px}
.vitrine--grade .cartao{flex-direction:column;justify-content:flex-start;padding:40px;text-align:center}
.vitrine--grade .cartao__texto{flex:none;max-width:none;width:100%;display:flex;flex-direction:column;align-items:center}
.vitrine--grade .cartao__midia img{max-height:none;width:100%}

/* ---------- Listagens de categoria ---------- */
.lista{position:relative;max-width:1280px;margin:0 auto;padding:var(--respiro) 0 140px}
.lista h1{margin:0;text-align:center;font-family:var(--font-display);font-weight:600;font-size:56px;line-height:1.1;letter-spacing:-2.5px;color:var(--ink)}
.voltar{position:absolute;left:calc((1280px - 100vw)/2);top:calc(var(--respiro) + 20px);width:50px;height:50px;border-radius:50%;transition:transform .3s var(--ease)}
.voltar svg{width:50px;height:50px}
@media (hover:hover){.voltar:hover{transform:translateX(-3px)}}
.grade{list-style:none;margin:40px auto 0;padding:0;max-width:1132px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grade--4{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
.item{background:var(--card);border-radius:20px;box-shadow:var(--sombra-item);padding:32px;text-align:center}
.item__link{display:block;border-radius:2px}
.item__img{width:100%;aspect-ratio:1/1;object-fit:contain}
.item__nome{margin:0;padding:12px 0 0;font-family:var(--font-body);font-weight:600;font-size:24px;line-height:1.1;letter-spacing:-1px;color:var(--ink)}
.item__preco{display:block;margin:12px 0 0;font-family:var(--font-display);font-weight:600;font-size:48px;line-height:1.1;letter-spacing:-1px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.grade--4 .item__preco{font-size:clamp(24px,2.6vw,38px)}
/* Relacionados com 3 cartões (equipamentos do Brasil): mesma largura de cartão da grade de 4, centralizados */
.grade--3{max-width:940px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
@media (hover:hover){.item__img{transition:transform .6s var(--ease)}.item__link:hover .item__img{transform:scale(1.04)}}

/* ---------- Página de produto ---------- */
.produto{max-width:1280px;margin:0 auto;padding:var(--respiro) 0 140px}
.galeria{display:block;width:512px;max-width:100%;border-radius:2px}
.galeria--centro{margin-left:auto;margin-right:auto}
.galeria__img{width:100%;aspect-ratio:1/1;object-fit:contain}
.produto__nome{margin:52px 0 20px;font-family:var(--font-display);font-weight:600;font-size:48px;line-height:1.1;letter-spacing:-1px;color:var(--ink)}
.produto__texto{font-family:var(--font-body);font-size:18px;line-height:27px;letter-spacing:-.5px;color:var(--ink-texto)}
.produto__texto p{margin:0 0 14.4px}
.produto__texto strong,.produto__texto b{font-weight:600}
/* Lista em 2 colunas lidas coluna a coluna, bloco centralizado (Arkard BR, Quantum Box BR); --linhas = itens da 1ª coluna */
.lista-colunas{list-style:none;max-width:860px;margin:0 auto 14.4px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--linhas,5),auto);grid-auto-flow:column;column-gap:40px;row-gap:10px}
.lista-colunas li{position:relative;padding-left:22px}
.lista-colunas li::before{content:"";position:absolute;left:0;top:12.5px;width:12px;height:2px;background:#B47830}
.compra{margin-top:20px;display:flex;align-items:center;gap:12px}
.comprar{display:inline-flex;align-items:center;justify-content:center;min-height:62px;padding:22px 40px 19px;border:0;border-radius:100px;background:var(--bege);box-shadow:inset 0 -3px 0 rgba(140,112,88,.35);font-family:var(--font-body);font-weight:600;font-size:18px;line-height:18px;letter-spacing:-.5px;text-transform:uppercase;color:#000;cursor:pointer;transition:transform .3s var(--ease)}
@media (hover:hover){.comprar:hover{transform:scale(.95)}}
/* Botão único em destaque (Quantum Box BR e filtros): centralizado e ~22% maior que o padrão */
.compra--destaque{justify-content:center}
.compra--destaque .comprar{min-width:340px;min-height:76px;padding:27px 52px 24px;font-size:22px;line-height:22px}
/* Preço e selo de pagamento seguro em volta do botão (Quantum Box BR) */
.oferta-preco{margin:40px 0 0;text-align:center;text-wrap:balance;font-family:var(--font-body);font-weight:400;font-size:22px;line-height:31px;letter-spacing:-.5px;color:var(--ink-texto)}
.oferta-preco__valor{white-space:nowrap}
.oferta-preco__parcela{font-weight:600;color:var(--ink);white-space:nowrap}
.compra--com-preco{margin-top:24px}
.selo-seguro{display:flex;justify-content:center;align-items:center;gap:8px;margin:18px 0 0;text-align:center;font-family:var(--font-body);font-size:15px;line-height:1.4;color:var(--ink-texto)}
.selo-seguro svg{flex:none}
/* Compra por quantidade (Arkard BR): 4 opções em linha e a consulta, em contorno, embaixo */
.compra--opcoes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1120px;margin:20px auto 0;align-items:stretch}
.compra--opcoes .comprar{justify-content:center;align-items:center;text-align:center;padding:20px 32px;line-height:22px}
/* Botão com o valor numa segunda linha (Arkard BR, 1 unidade); os 4 da linha ficam da mesma altura pela grade */
.comprar--com-valor{flex-direction:column;gap:6px}
.compra--opcoes .comprar:not(.comprar--consulta){padding-left:20px;padding-right:20px}
.comprar__valor{white-space:nowrap;font-weight:400;font-size:13.5px;line-height:18px;letter-spacing:-.2px;text-transform:none}
.comprar__valor strong{font-weight:600;white-space:nowrap}
.desconto-progressivo{margin:20px 0 0;text-align:center;font-family:var(--font-body);font-weight:600;font-size:16px;line-height:1.4;letter-spacing:-.2px;color:var(--ink)}
.desconto-progressivo+.selo-seguro{margin-top:12px}
/* Observação de pagamento em 2 vezes (Quantum Box EU), entre o botão e o selo */
.nota-pagamento{margin:16px auto 0;max-width:640px;text-align:center;text-wrap:balance;font-family:var(--font-body);font-size:15px;line-height:1.45;color:var(--ink-texto)}
.nota-pagamento a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(38,47,54,.4)}
@media (hover:hover){.nota-pagamento a:hover{text-decoration-color:currentColor}}
.nota-pagamento+.selo-seguro{margin-top:10px}
.comprar--consulta{grid-column:1 / -1;justify-self:center;margin-top:20px;background:transparent;box-shadow:none;border:1.5px solid #B39982;color:var(--ink)}
.quantidade input{width:72px;min-height:62px;padding:0 10px;border:1px solid #CEBBAA;border-radius:100px;background:var(--card);font:600 18px var(--font-body);text-align:center;color:var(--ink)}
.relacionados{padding-top:100px}
.relacionados h2{margin:8px 0 40px;text-align:center;font-family:var(--font-body);font-weight:600;font-size:20px;line-height:1.1;letter-spacing:-1px;color:var(--ink)}
.relacionados .item__nome{font-size:24px}

/* ---------- 404 copiada ---------- */
.erro{max-width:1140px;margin:0 auto;padding:var(--respiro) 20px 120px}
.erro h1{margin:0 0 16px;font-family:var(--font-display);font-weight:600;font-size:40px;line-height:1.1;letter-spacing:-1px;color:var(--ink)}
.erro p{margin:0;font-family:var(--font-body);font-size:18px;color:var(--ink)}

/* WhatsApp do vendedor */
.whats{position:fixed;right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:50;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--teal-b);color:#F6F1EB;box-shadow:0 2px 4px rgba(38,47,54,.18),0 10px 24px rgba(38,47,54,.18);transition:transform .18s var(--ease),background-color .18s var(--ease)}
.whats svg{width:32px;height:32px}
.whats__rotulo{position:absolute;right:0;bottom:calc(100% + 8px);padding:7px 12px 6px;border-radius:100px;background:#fff;box-shadow:0 1px 2px rgba(38,47,54,.12),0 6px 16px rgba(38,47,54,.12);font-family:var(--font-body);font-weight:600;font-size:13.5px;line-height:17px;letter-spacing:-.1px;color:var(--ink);white-space:nowrap}
@media (max-width:767px){.whats{width:62px;height:62px}.whats svg{width:30px;height:30px}.whats__rotulo{font-size:13px}}
@media (hover:hover){.whats:hover{transform:translateY(-2px);background:var(--teal-a)}}

/* Seletor de moeda das páginas de produto do Mundo: fixo, acompanha a rolagem — no celular no canto de baixo à esquerda (espelha o WhatsApp), no computador no canto de cima à direita */
.moeda{position:fixed;left:calc(16px + env(safe-area-inset-left));bottom:calc(28px + env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;padding:0 4px;border:1px solid rgba(180,120,48,.28);border-radius:100px;background:rgba(248,245,242,.94);box-shadow:0 2px 4px rgba(38,47,54,.08),0 8px 20px rgba(38,47,54,.08)}
.moeda button{position:relative;min-width:44px;min-height:44px;padding:0 8px;border:0;background:none;font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--ink);opacity:.45;cursor:pointer;transition:opacity .18s var(--ease),color .18s var(--ease)}
.moeda button+button::before{content:"";position:absolute;left:0;top:50%;height:14px;margin-top:-7px;border-left:1px solid rgba(180,120,48,.35)}
.moeda button[aria-pressed="true"]{opacity:1;color:#B47830;cursor:default}
@media (hover:hover){.moeda button[aria-pressed="false"]:hover{opacity:.8;color:#78A8C0}}
@media (min-width:768px){.moeda{left:auto;bottom:auto;top:28px;right:calc(28px + env(safe-area-inset-right))}}
/* Preço do Mundo acima do botão, quando existe */
.oferta-preco:not([hidden])+.compra{margin-top:24px}
/* Relacionados das páginas compartilhadas (filtros): a lista do lado aberto; o lado vem de ?lado=mundo, gravado no <html> antes da pintura */
html:not([data-lado="mundo"]) .grade[data-lado-lista="mundo"],html[data-lado="mundo"] .grade[data-lado-lista="brasil"]{display:none}

/* Até 1360px: o contêiner de 1280 ganha margem lateral */
@media (max-width:1360px){
  .vitrine,.lista,.produto{padding-left:40px;padding-right:40px}
  .voltar{left:0}
}
/* Tablet (até 1024px) */
@media (max-width:1024px){
  .topo{padding-top:16px}
  .topo img{height:84px}
  .vitrine,.lista,.produto{padding-left:5%;padding-right:5%}
  .cartao{padding:20px 40px 20px 20px}
  .cartao__titulo{font-size:40px}
  .cartao__desc{font-size:20px;line-height:30px}
  .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grade--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grade--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .compra--opcoes{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
}
/* Celular (até 767px) */
@media (max-width:767px){
  :root{--respiro:20px}
  .topo img{height:72px}
  .vitrine,.lista,.produto{padding:var(--respiro) 20px calc(140px + env(safe-area-inset-bottom))}
  .vitrine__cabeca h1,.lista h1{font-size:40px}
  .vitrine__cabeca p{font-size:18px}
  .vitrine__cartoes{gap:40px;margin-top:40px}
  .cartao{flex-direction:column;padding:20px;text-align:center}
  .cartao__texto{flex:none;max-width:none;display:flex;flex-direction:column;align-items:center;padding:0 0 12px}
  .cartao__midia img{max-height:none;width:100%}
  .cartao__titulo{font-size:36px;margin-bottom:16px}
  .cartao__desc{font-size:18px;line-height:27px;margin-bottom:24px}
  .botao{font-size:16px;line-height:24px;padding:22px 40px 19px}
  .vitrine--grade .vitrine__cartoes{grid-template-columns:minmax(0,1fr)}
  .vitrine--grade .cartao{padding:20px}
  .lista h1{padding:0 48px}
  .voltar{top:var(--respiro);width:44px;height:44px}
  .voltar svg{width:44px;height:44px}
  .grade{gap:16px}
  .grade--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grade--3 .item:last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 8px)}
  .item{padding:16px}
  .item__nome{font-size:16px;padding-top:8px}
  .relacionados .item__nome{font-size:16px}
  .item__preco{font-size:22px}
  .galeria{width:100%}
  .produto__nome{font-size:32px;margin-top:32px}
  .compra{justify-content:center}
  .compra--opcoes{grid-template-columns:minmax(0,1fr);max-width:none}
  .lista-colunas{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .comprar--consulta{justify-self:stretch}
  .oferta-preco{margin-top:32px;font-size:20px;line-height:28px}
  .selo-seguro{display:block;font-size:14px;padding:0 12px}
  .nota-pagamento{font-size:14px;padding:0 12px}
  .selo-seguro svg{display:inline-block;vertical-align:-3px;margin-right:6px}
  .compra--destaque .comprar{width:100%;min-width:0;min-height:68px;padding:25px 24px 22px;font-size:20px}
  .relacionados{padding-top:64px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .botao,.comprar,.whats,.voltar,.item__img,.moeda button{transition:none}
  .botao:hover,.botao:focus-visible,.comprar:hover,.item__link:hover .item__img{transform:none}
}
