/* ============================================================
   ONDAX LITORAL — estilo geral do site
   ------------------------------------------------------------
   Regras de acabamento (revisão "premium" de 2026-10-05):
   - Espaços (padding, margin, gap) SÓ na escala: 4, 8, 12, 16, 24, 32, 48, 64.
   - Cantos: 12px em cards, fotos, caixas e painéis (--radius); pílula (999px)
     em botões, filtros e selos; círculo (50%) em ícones e logos redondos.
   - Sombra suave no lugar de borda cinza. Nada de gradiente, brilho ou vidro.
   - Cores: azul-marinho, areia, branco; coral SÓ em ação; teal em detalhe.
   - Dois pesos: 400 e 600. Títulos Fraunces (entrelinha 1.1), corpo Work Sans (1.6).
   - Transições de 150ms; quem desligou animações no aparelho não vê nenhuma.
   ============================================================ */
:root{
  --navy:#0B3B4A;
  --navy-deep:#082C38;
  --teal:#2A9D8F;
  --sand:#F1E7D0;
  --sand-deep:#E4D3AC;
  --coral:#E85D3F;
  --ink:#132226;
  --white:#FFFFFF;
  --line:rgba(11,59,74,0.12);
  --esqueleto:rgba(11,59,74,0.07);

  --radius:12px;
  --sombra:0 1px 2px rgba(11,59,74,0.06), 0 2px 8px rgba(11,59,74,0.06);
  --sombra-alta:0 2px 4px rgba(11,59,74,0.06), 0 8px 24px rgba(11,59,74,0.10);
  --rapido:150ms ease;
  --altura-botao:48px;
  --secao:64px;          /* espaço entre seções no computador (48px no celular) */
}
@media (max-width:768px){ :root{ --secao:48px; } }

*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--sand);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
b, strong{font-weight:600;}
h1,h2,h3,h4,.display{font-family:'Fraunces', serif; font-weight:600; line-height:1.1; letter-spacing:-0.015em;}
.mono{font-variant-numeric:tabular-nums;}
.num{font-variant-numeric:tabular-nums;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1440px; margin:0 auto; padding:0 24px;}
button{font-family:inherit; cursor:pointer;}
a, button{transition:background-color var(--rapido), color var(--rapido), border-color var(--rapido), box-shadow var(--rapido), opacity var(--rapido), transform var(--rapido);}

/* Rótulo "Publicidade" (caixa alta só em rótulos de até 3 palavras) */
.ad-tag{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--navy);
  opacity:0.55;
}

/* ---------- Topo ---------- */
.utility-bar{background:var(--navy-deep); color:var(--sand); font-size:12px;}
.utility-bar .wrap{display:flex; justify-content:flex-end; align-items:center; padding:8px 24px; gap:16px; flex-wrap:wrap;}
.utility-bar span{opacity:0.85;}

header.main{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.header-row{display:flex; align-items:center; gap:32px; padding:16px 24px;}
.logo{font-family:'Fraunces', serif; font-weight:600; font-size:26px; color:var(--navy); white-space:nowrap; display:flex; align-items:baseline; gap:8px;}
.logo .wave-dot{width:8px;height:8px;border-radius:50%;background:var(--coral); display:inline-block; margin-left:4px; transform:translateY(-8px);}
.search-bar{flex:1; display:flex; border:1.5px solid var(--navy); border-radius:999px; overflow:hidden; max-width:560px;}
.search-bar input{flex:1; border:none; outline:none; padding:12px 16px; font-size:14px; font-family:inherit; background:transparent;}
.search-bar button{background:var(--navy); color:var(--sand); border:none; padding:0 24px; font-size:13px; font-weight:600;}
.header-actions{display:flex; align-items:center; gap:16px; font-size:13px; white-space:nowrap;}
.header-actions .item{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:44px; min-height:44px; color:var(--navy); opacity:0.85;}
.header-actions .item:hover{opacity:1;}
.header-actions .icon{position:relative; display:inline-flex; line-height:1;}
/* Balãozinho com a quantidade (coral = estado ativo): preso no canto do ícone; com zero, some (atualizarContadores) */
.header-actions .balao{position:absolute; top:-8px; right:-12px; margin:0;}
.cart-count, .fav-count{display:inline-block; min-width:16px; height:16px; line-height:16px; text-align:center; background:var(--coral); color:var(--white); border-radius:999px; font-size:10px; font-weight:600; padding:0 4px; margin-left:4px; font-variant-numeric:tabular-nums;}

/* O painel se posiciona pela barra inteira (nav.mega), não pelo item:
   assim a rolagem lateral da lista não corta o menu aberto. */
nav.mega{background:var(--navy); color:var(--sand); position:relative; z-index:45;}
.mega-list{display:flex; list-style:none; gap:4px; overflow-x:auto; scrollbar-width:none;}
.mega-list::-webkit-scrollbar{display:none;}
.mega-item{position:static;}
.mega-todas > a{background:rgba(255,255,255,0.08); font-weight:600;}
.mega-item > a{display:block; padding:12px 16px; font-size:14px; font-weight:400; border-bottom:2px solid transparent; white-space:nowrap;}
.mega-item.mega-prestadores > a{font-weight:600;}
.mega-prestadores .mega-col:first-child{background:var(--sand); border-radius:var(--radius); padding:12px 16px;}
.mega-item:hover > a, .mega-item.open > a{border-bottom-color:var(--teal); background:rgba(255,255,255,0.06);}
.mega-panel{display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:min(1440px, 100%); background:var(--white); color:var(--ink); box-shadow:var(--sombra-alta); border-top:2px solid var(--teal); padding:24px 32px; z-index:60; max-height:75vh; overflow-y:auto;}
.mega-item.open .mega-panel{display:block;}
.mega-cols{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:24px 32px;}
.mega-ver-tudo{display:inline-block; margin-top:16px; font-size:13px; font-weight:600; color:var(--navy); text-decoration:underline; text-underline-offset:4px;}
.mega-item.open .painel-todas{display:grid; grid-template-columns:250px 1fr; gap:0; padding:0;}
.todas-lista{list-style:none; background:var(--sand); padding:8px 0; border-right:1px solid var(--line);}
.todas-lista a{display:block; padding:8px 16px; font-size:14px; color:var(--navy);}
.todas-lista a.ativa{background:var(--white); color:var(--navy); font-weight:600; box-shadow:inset 3px 0 0 var(--teal);}
.todas-detalhe{padding:24px 32px;}
.mega-col h4{font-size:15px; margin-bottom:8px; color:var(--navy);}
.mega-col ul{list-style:none;}
.mega-col li{margin-bottom:8px;}
.mega-col a{font-size:13px; opacity:0.8;}
.mega-col a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px;}
.todas-lista .icone-cat{vertical-align:-4px; margin-right:8px; opacity:0.8;}

/* ---------- Cabeçalho claro das páginas internas (categoria, ajuda, prestadores, anuncie...) ---------- */
.cat-header{background:var(--white); color:var(--navy); padding:24px 24px 24px; border-bottom:1px solid var(--line);}
.cat-header .wrap{max-width:1440px; padding:0;}
.breadcrumb{font-size:12px; opacity:0.7; margin-bottom:8px;}
.breadcrumb a{color:var(--navy); text-decoration:underline; text-underline-offset:4px;}
.cat-header h1{font-size:clamp(26px, 2.6vw, 34px); margin-bottom:8px; color:var(--navy);}
.cat-header p{font-size:14px; opacity:0.7; max-width:640px;}

/* ---------- Espaços de publicidade ---------- */
.ad-slot{background:var(--white); border:1px dashed var(--navy); border-radius:var(--radius); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--navy); text-align:center;}
.ad-top{ margin:16px auto; max-width:1440px; height:90px;}
.ad-inline{ height:120px; margin:8px 0;}
.ad-side{ height:260px;}

/* Anúncio em faixa própria, fora de qualquer grade de produtos.
   Fica escondida (hidden) até existir arte cadastrada no painel. */
.faixa-publicidade{max-width:1440px; margin:0 auto; padding:0 24px var(--secao);}
.faixa-publicidade[hidden]{display:none;}
.publi-etiqueta{display:block; font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); opacity:0.55; margin-bottom:8px;}
.faixa-publicidade .ad-slot{margin:0;}

/* Espaço já com arte enviada: a arte aparece INTEIRA (nunca cortada),
   centralizada, respeitando um limite de altura para não empurrar a página.
   Para deixar o banner maior ou menor, mude só o max-height de cada espaço. */
.ad-slot.com-imagem{height:auto; border:none; padding:0; background:transparent;}
.ad-slot.com-imagem > a, .ad-slot.com-imagem > div{display:block; width:100%;}
.ad-slot.com-imagem img{width:100%; height:auto; display:block; object-fit:contain; border-radius:var(--radius);}
.ad-inline.com-imagem img{max-height:170px;}
.ad-side.com-imagem img{max-height:600px;}

/* Faixa dos anunciantes: largura total, formato 3:1 (a altura acompanha a largura
   da tela, então a arte nunca é esticada). Arte no formato 3:1 preenche tudo;
   arte em outro formato aparece inteira, com a própria arte desfocada no fundo.
   O rótulo "Publicidade" e os pontinhos ficam numa faixa ABAIXO da arte:
   nada fica por cima do anúncio. */
.faixa-topo{display:none; background:var(--navy-deep);}
.faixa-topo.ativa{display:block;}
.faixa-caixa{position:relative; width:100%; aspect-ratio:3 / 1; max-height:75vh; overflow:hidden; background:var(--navy-deep);}
.faixa-slides{position:relative; width:100%; height:100%; touch-action:pan-y;}
.faixa-slide{position:absolute; inset:0; display:flex; justify-content:center; opacity:0; transition:opacity .6s ease; pointer-events:none;}
.faixa-slide.atual{opacity:1; pointer-events:auto;}
.faixa-fundo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(22px) brightness(.55); transform:scale(1.15);}
.faixa-arte{position:relative; display:block; height:100%; width:auto; max-width:100%; object-fit:contain;}
.faixa-slide.cheia .faixa-fundo{display:none;}
.faixa-slide.cheia .faixa-arte{width:100%; height:100%; max-width:none; object-fit:cover;}
.faixa-seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.9); color:var(--navy);
  font-size:24px; line-height:1; display:none; align-items:center; justify-content:center;
  box-shadow:var(--sombra); opacity:0;
}
.faixa-topo.tem-varios .faixa-seta{display:flex;}
.faixa-caixa:hover .faixa-seta{opacity:1;}
.faixa-seta:hover{background:var(--white);}
.faixa-seta.ant{left:16px;}
.faixa-seta.prox{right:16px;}
/* Faixinha abaixo da arte: "Publicidade" à esquerda, pontinhos no centro */
.faixa-rodape{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:4px 16px;}
.faixa-etiqueta{font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--sand); opacity:0.6;}
.faixa-pontos{display:flex; justify-content:center; gap:0;}
/* Bolinha de 6px (8px a atual), 6px entre elas; o botão é maior que a bolinha para o dedo acertar */
.faixa-ponto{width:12px; height:24px; padding:0; border:none; background:none; display:grid; place-items:center;}
.faixa-ponto::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--sand); opacity:0.4; transition:width var(--rapido), height var(--rapido), opacity var(--rapido);}
.faixa-ponto.atual::before{width:8px; height:8px; opacity:1;}
@media (max-width:900px){
  .faixa-seta{display:none !important;}
}

/* ---------- Barra de apresentação: fina e clara, logo abaixo da tarja de origem ---------- */
.hero{background:var(--white); color:var(--navy); padding:24px 24px; border-bottom:1px solid var(--line);}
.hero-inner{max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:24px;}
.hero-texto{flex:1; min-width:0;}
.hero h1{font-size:clamp(24px, 2.4vw, 32px); color:var(--navy);}
.hero-sub{font-size:14px; opacity:0.7; margin-top:8px; max-width:620px;}
.hero-ctas{display:flex; gap:12px; flex-shrink:0;}

/* Botões: o de ação é coral; todos com a mesma altura no site inteiro */
.btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--altura-botao); padding:0 24px; border-radius:999px;
  font-weight:600; font-size:15px; font-family:inherit; text-decoration:none; white-space:nowrap;
}
.btn-primary{background:var(--coral); color:var(--white); border:none;}
.btn-primary:hover{box-shadow:inset 0 0 0 100vmax rgba(8,44,56,0.1);}
.btn-ghost{border:1.5px solid var(--navy); color:var(--navy); background:transparent;}
.btn-ghost:hover{background:var(--navy); color:var(--sand);}
.hero-visual{flex-shrink:0; background:var(--sand); border-radius:var(--radius); padding:8px 24px;}
.hero-visual .stat-row{display:flex; gap:32px;}
.hero-visual .stat b{display:block; font-family:'Fraunces',serif; font-weight:600; font-size:20px; line-height:1.1; font-variant-numeric:tabular-nums;}
.hero-visual .stat span{font-size:12px; opacity:0.7; white-space:nowrap;}
@media (max-width:900px){
  .hero{padding:16px 16px;}
  .hero-inner{flex-wrap:wrap; gap:12px 16px;}
  .hero-texto{flex-basis:100%;}
  .hero-visual{flex:1 1 auto; padding:8px 16px;}
  .hero-visual .stat-row{justify-content:space-between; gap:16px;}
  .hero-visual .stat b{font-size:18px;}
  .hero-ctas{flex:1 1 100%; flex-wrap:wrap;}   /* sem espaço para os dois lado a lado, cada um vai para uma linha */
  .hero .btn-primary, .hero .btn-ghost{flex:1 1 auto; padding:0 16px; font-size:14px;}
}

.wave-divider{display:block; width:100%; line-height:0; margin-top:-4px;}
.wave-divider svg{width:100%; height:64px; display:block;}

/* ---------- Seções e títulos ---------- */
.section{padding:var(--secao) 24px;}
/* fundo das seções alternando branco e areia (vale também sobre .carousel-section) */
.secao-branca, .carousel-section.secao-branca{background:var(--white);}
.secao-areia, .carousel-section.secao-areia{background:var(--sand);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; flex-wrap:wrap; gap:12px 24px;}
.section-head h2{font-size:clamp(26px, 2.6vw, 34px); color:var(--navy);}
.section-sub{display:block; font-size:14px; line-height:1.5; color:var(--navy); opacity:0.62; margin-top:8px;}
.section-head .see-all{font-size:14px; font-weight:600; color:var(--navy); text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(11,59,74,0.35);}
.section-head .see-all:hover{text-decoration-color:var(--navy);}
.see-all-grupo{display:flex; gap:16px 24px; flex-wrap:wrap;}

/* Tarja de origem (home): explica os 3 selos dos cartões, numa linha só */
.tarja-origem{background:var(--white); border-bottom:1px solid var(--line); color:var(--navy); font-size:13px;}
.tarja-origem ul{list-style:none; max-width:1440px; margin:0 auto; padding:8px 24px; display:flex; gap:32px; overflow-x:auto; scrollbar-width:none; white-space:nowrap;}
.tarja-origem ul::-webkit-scrollbar{display:none;}
.tarja-origem li{display:flex; align-items:center; gap:8px; flex-shrink:0;}
/* centraliza quando cabe; quando não cabe (celular), rola a partir do primeiro item */
.tarja-origem li:first-child{margin-left:auto;}
.tarja-origem li:last-child{margin-right:auto;}
.tarja-origem .selo{position:static; flex-shrink:0;}


/* ---------- Página de categoria ---------- */
/* A coluna do anúncio lateral só existe quando há anúncio (classe com-anuncio, posta em categoria.js) */
.grid-with-side{max-width:1440px; margin:0 auto; padding:0 24px var(--secao); display:grid; grid-template-columns:minmax(0,1fr); gap:32px;}
.grid-with-side.com-anuncio{grid-template-columns:minmax(0,1fr) 260px;}
.lateral-anuncio{align-self:start; position:sticky; top:calc(var(--topo-fixo, 0px) + 16px);}
.lateral-anuncio[hidden]{display:none;}
.lateral-anuncio img{width:100%; height:auto; display:block; border-radius:var(--radius);}

/* ---------- Cartão de produto (grade) ---------- */
/* Grade de produtos: cartão de largura fixa, alinhado à esquerda. Com 2 produtos ou 20, o cartão tem o mesmo tamanho. */
.product-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 240px)); justify-content:start; gap:24px;}
.card{position:relative; background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--sombra); display:flex; flex-direction:column;}
.card .thumb{
  aspect-ratio:1/1; height:auto; background:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:44px; overflow:hidden; position:relative;
}
/* foto inteira, sem cortar e sem distorcer, com 12px de respiro */
.card .thumb img{
  width:100%; height:100%; object-fit:contain; padding:12px; display:block;
}

/* Selo de espaço pago — exigência de transparência com o cliente */
.selo-patrocinado{
  position:absolute; top:8px; left:8px;
  background:rgba(11,59,74,0.82); color:var(--sand);
  font-size:10px; font-weight:600; letter-spacing:0.04em;
  padding:4px 8px; border-radius:999px; text-transform:uppercase;
}
.card .body{padding:12px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1;}
.badge{display:inline-block; font-size:10px; line-height:1.2; font-weight:600; letter-spacing:0.02em; padding:4px 8px; border-radius:999px; margin-bottom:8px;}
.card .badge{align-self:flex-start; margin-bottom:4px;}
/* nome em no máximo 2 linhas (sempre ocupa 2, para todos os cartões terem a mesma altura) */
.card h3{font-family:'Work Sans', sans-serif; font-size:14px; line-height:1.35; font-weight:400; letter-spacing:0; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em;}
/* preço com dígitos de mesma largura: as colunas de preço ficam alinhadas */
.card .price{font-weight:600; color:var(--navy); font-size:20px; line-height:1.2; margin-top:auto; padding-top:8px; font-variant-numeric:tabular-nums;}
.card .seller{font-size:12px; opacity:0.62; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.6em;}
/* Ao passar o mouse: sobe 2px e a sombra cresce de leve (nada de mudar de cor) */
.card{transition:transform var(--rapido), box-shadow var(--rapido);}
.card:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta);}

/* Selos de origem: pequenos e discretos, só com a paleta
   (Ondax = teal; loja parceira = branco com contorno; oferta externa = areia) */
.selo{position:absolute; top:8px; left:8px; z-index:1; max-width:calc(100% - 56px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10px; line-height:1.2; font-weight:600; letter-spacing:0.02em; padding:4px 8px; border-radius:999px;}
.selo.proprio, .badge.proprio{background:var(--teal); color:var(--white);}
.selo.terceiro, .badge.terceiro{background:var(--white); color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy);}
.selo.afiliado, .badge.afiliado{background:var(--sand); color:var(--navy);}

/* ---------- Achados da maré: 2 fileiras em carrossel, largura toda ---------- */
.bloco-achados{max-width:1440px; margin:0 auto; padding:var(--secao) 24px;}
.vitrine{display:flex; gap:16px; align-items:stretch; height:480px;}
.vitrine-linhas{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:16px;}
.vitrine-linha{flex:1; min-height:0; min-width:0;}
/* respiro em cima e embaixo para a sombra dos cartões não ser cortada */
.vlinha-viewport{width:100%; height:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:4px 0;}
.vlinha-viewport::-webkit-scrollbar{display:none;}
.vlinha-track{display:flex; gap:12px; height:100%;}

/* Cartão de produto dos carrosséis (Achados da maré e Em alta agora): foto inteira, sem cortes */
.card-mini{display:flex; flex-direction:column; background:var(--white); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); box-shadow:var(--sombra); transition:transform var(--rapido), box-shadow var(--rapido);}
.card-mini:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta);}
.card-mini .mini-thumb{position:relative; aspect-ratio:1/1; background:var(--white); display:flex; align-items:center; justify-content:center; font-size:36px; overflow:hidden;}
.card-mini .mini-thumb img{width:100%; height:100%; object-fit:contain; padding:12px; display:block;}
.card-mini .mini-body{padding:12px; display:flex; flex-direction:column; gap:4px;}
.card-mini .mini-nome{font-size:13px; line-height:1.35; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em;}
.card-mini .mini-preco{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-weight:600; font-size:16px; color:var(--navy); font-variant-numeric:tabular-nums;}
.mini-patrocinado{font-size:9px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--navy); opacity:0.55;}

/* Dentro das fileiras da vitrine: 6 por vez (5, 4 e 3 em telas menores), altura fixa */
.vlinha-track .card-mini{flex:0 0 calc((100% - 60px) / 6); height:100%;}
.vlinha-track .card-mini .mini-thumb{aspect-ratio:auto; flex:1; min-height:0;}
@media (max-width:1300px){ .vlinha-track .card-mini{flex-basis:calc((100% - 48px) / 5);} }
@media (max-width:1100px){ .vlinha-track .card-mini{flex-basis:calc((100% - 36px) / 4);} }
@media (max-width:1000px){ .vlinha-track .card-mini{flex-basis:calc((100% - 24px) / 3);} }

@media (max-width:900px){
  .vitrine{flex-direction:column; height:auto;}
  .vitrine-linhas{flex:none;}
  .vitrine-linha{flex:none; height:272px;}
  .vlinha-track .card-mini{flex-basis:calc((100% - 12px) / 2);}
}

/* ---------- Carrosséis de seção (Em alta, lojas, serviços) ---------- */
.carousel-section{background:var(--white); padding:var(--secao) 0;}
.carousel-track{display:flex; gap:16px; overflow-x:auto; padding:8px 24px 16px; scroll-snap-type:x mandatory;}
.carousel-track::-webkit-scrollbar{height:4px;}
.carousel-track::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px;}
.carousel-track .card-mini{flex:0 0 200px;}
@media (max-width:900px){ .carousel-track .card-mini{flex-basis:160px;} }

/* Lojas e prestadores: cartão de "loja oficial" (capa + logo) */
.partner-card{flex:0 0 232px; background:var(--white); border-radius:var(--radius); box-shadow:var(--sombra); overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; color:var(--ink); padding-bottom:16px; transition:transform var(--rapido), box-shadow var(--rapido);}
a.partner-card:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta);}
.partner-card .pc-capa{width:100%; height:88px; flex-shrink:0; background:var(--navy);}
.partner-card .pc-capa img{width:100%; height:100%; object-fit:cover; display:block;}
.partner-card .pc-logo{width:64px; height:64px; margin-top:-32px; flex-shrink:0; position:relative; border-radius:var(--radius); background:var(--navy); color:var(--sand); border:3px solid var(--white); box-shadow:var(--sombra); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:22px; overflow:hidden;}
.partner-card .pc-logo.tem-logo{background:var(--white);}
.partner-card .pc-logo img{width:100%; height:100%; object-fit:contain; display:block;}
.partner-card .pc-nome{margin-top:12px; padding:0 12px; font-family:'Fraunces',serif; font-weight:600; font-size:16px; line-height:1.2; letter-spacing:-0.01em; color:var(--navy);}
.partner-card .pc-cat{margin:4px 0 12px; padding:0 12px; font-size:12px; opacity:0.62;}
.partner-card .pc-cta{margin-top:auto; font-size:13px; font-weight:600; color:var(--navy); border:1.5px solid var(--navy); border-radius:999px; padding:8px 16px;}
a.partner-card:hover .pc-cta{background:var(--navy); color:var(--sand);}

/* ---------- Rodapé ---------- */
footer{background:var(--navy-deep); color:var(--sand); padding:48px 24px 24px;}
.footer-grid{max-width:1440px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px;}
.footer-logo{margin-bottom:12px;}
.footer-sobre{font-size:13px; opacity:0.7; max-width:280px;}
footer h5{font-size:12px; margin-bottom:12px; opacity:0.6; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;}
footer ul{list-style:none;}
footer li{margin-bottom:8px; font-size:13px; opacity:0.85;}
footer li a:hover{text-decoration:underline; text-underline-offset:4px;}
.footer-bottom{max-width:1440px; margin:0 auto; border-top:1px solid rgba(241,231,208,0.14); padding-top:16px; font-size:12px; opacity:0.55; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

.empty-state{padding:48px; text-align:center; opacity:0.6; font-size:14px; grid-column:1/-1;}

@media (max-width:900px){
  .header-actions .item-rotulo{display:none;}
  .grid-with-side, .grid-with-side.com-anuncio{grid-template-columns:minmax(0,1fr);}
  .ad-side, .lateral-anuncio{display:none;}
  .mega-panel{padding:16px;}
  .mega-cols{grid-template-columns:repeat(2, 1fr);}
  .mega-item.open .painel-todas{grid-template-columns:1fr;}
  .todas-lista{display:flex; flex-wrap:wrap; gap:4px; padding:12px; border-right:none; border-bottom:1px solid var(--line);}
  .todas-lista a{padding:4px 12px; border-radius:999px; font-size:13px;}
  .todas-detalhe{padding:16px;}
  .search-bar{order:3; max-width:100%; width:100%; flex-basis:100%;}
  .search-bar input{min-width:0;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:24px;}
  .footer-grid > div:first-child{grid-column:1 / -1;}
  /* Celular/tablet: linha 1 = logo à esquerda, coração e carrinho à direita; linha 2 = busca na largura toda */
  .header-row{flex-wrap:wrap; gap:12px 8px; padding:12px 16px;}
  .header-row .logo{order:1;}
  .header-actions{order:2; margin-left:auto; gap:8px;}
}

/* ---------- Página "Todas as categorias": cartões claros, só com a paleta ---------- */
.grade-categorias{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:24px; align-items:start;}
.cat-card{background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--sombra);}
.cat-card-topo{
  display:flex; align-items:center; gap:12px; padding:16px;
  background:var(--white); color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line);
}
.cat-card-topo:hover .cat-card-icone{box-shadow:inset 0 0 0 1.5px var(--navy);}
.cat-card-icone{flex-shrink:0; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--sand); color:var(--navy); transition:box-shadow var(--rapido);}
.cat-card-nome{flex:1; min-width:0;}
.cat-card-nome strong{display:block; font-family:'Fraunces', serif; font-weight:600; font-size:18px; line-height:1.2; letter-spacing:-0.01em;}
.cat-card-nome small{font-size:12px; opacity:0.62;}
.cat-card-seta{font-size:12px; font-weight:600; white-space:nowrap; background:var(--sand); color:var(--navy); padding:4px 12px; border-radius:999px;}
.cat-card-corpo{padding:16px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 24px;}
.cat-card-corpo h4{font-family:'Work Sans', sans-serif; font-size:13px; font-weight:600; letter-spacing:0; color:var(--navy); margin-bottom:8px;}
.cat-card-corpo ul{list-style:none;}
.cat-card-corpo li{margin-bottom:4px;}
.cat-card-corpo a{font-size:13px; color:var(--ink); opacity:0.8;}
.cat-card-corpo a:hover{opacity:1; color:var(--navy); text-decoration:underline; text-underline-offset:4px;}
@media (max-width:600px){ .cat-card-seta{display:none;} }

/* ---------- Carrosséis automáticos (iniciarAutoRotacao em main.js) ---------- */
.carrossel-janela{position:relative;}
.carrossel-ativo{position:relative; overflow:hidden !important;}
.carrossel-ativo > .carousel-track, .carrossel-ativo > .vlinha-track{overflow:visible; scroll-snap-type:none; will-change:transform;}
.carrossel-seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.95); color:var(--navy); font-size:24px; line-height:1;
  box-shadow:var(--sombra-alta); opacity:0;
}
.carrossel-ativo:hover .carrossel-seta, .carrossel-seta:focus-visible{opacity:1;}
.carrossel-seta:hover{background:var(--navy); color:var(--sand);}
.carrossel-seta.ant{left:8px;}
.carrossel-seta.prox{right:8px;}
@media (hover:none){ .carrossel-seta{display:none;} }


/* ---------- Faixa que gira (home, entre a barra "Central de ajuda" e a busca) ---------- */
.faixa-giro{background:var(--navy); color:var(--sand); border-top:1px solid rgba(241,231,208,0.12);}
.faixa-giro[hidden]{display:none;}
.giro-janela{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image:linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);}
.giro-trilho{display:flex; width:max-content; animation:giro-anda var(--giro-tempo, 40s) linear infinite; will-change:transform;}
.faixa-giro:hover .giro-trilho,
.faixa-giro:focus-within .giro-trilho,
.faixa-giro.parado .giro-trilho{animation-play-state:paused;}
@keyframes giro-anda{from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);}}
.giro-item{position:relative; display:inline-flex; align-items:center; gap:8px; padding:8px 32px; white-space:nowrap; color:var(--sand); text-decoration:none; font-size:14px; font-weight:400;}
.giro-item::after{content:''; position:absolute; right:-3px; top:50%; width:6px; height:6px; border-radius:50%; background:var(--teal); transform:translateY(-50%);}
a.giro-item:hover, a.giro-item:focus-visible{color:var(--white); text-decoration:underline; text-underline-offset:4px;}
a.giro-item:focus-visible{outline:2px solid var(--teal); outline-offset:-4px;}
.giro-emoji{font-size:16px; line-height:1;}
.giro-tag{font-size:10px; line-height:1.6; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:0 8px; border-radius:999px; background:rgba(241,231,208,0.14); color:var(--sand-deep);}
@media (max-width:600px){ .giro-item{font-size:13px; padding:8px 24px;} }

/* ============================================================
   PWA — menu inferior, convite de instalação e ajustes de celular
   ============================================================ */

/* ---------- Menu inferior fixo (só no celular) ---------- */
.nav-mobile{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--white); border-top:1px solid var(--line);
  box-shadow:0 -2px 12px rgba(11,59,74,0.08);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.nav-mobile-item{
  position:relative;
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:8px 4px; min-height:56px;
  color:var(--navy); opacity:0.62; font-size:11px; font-weight:400; text-align:center;
}
.nav-mobile-icon{font-size:20px; line-height:1;}
.nav-mobile-item.ativo{opacity:1; color:var(--navy); font-weight:600;}
.nav-mobile-item.ativo::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:24px; height:3px; border-radius:999px; background:var(--teal);
}
.nav-mobile-badge{
  position:absolute; top:4px; right:calc(50% - 20px);
  background:var(--coral); color:var(--white); border-radius:999px;
  font-size:10px; font-weight:600; line-height:16px; height:16px; padding:0 4px; min-width:16px; text-align:center;
  font-variant-numeric:tabular-nums;
}

@media (max-width:768px){
  .nav-mobile{display:flex;}
  /* dá espaço pro menu inferior não tapar o fim da página */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0));}
  #aviso-flutuante{bottom:calc(72px + env(safe-area-inset-bottom, 0));}
}

/* ---------- Convite de instalação ---------- */
.convite-instalar{
  display:none;
  position:fixed; left:12px; right:12px; z-index:250;
  bottom:calc(72px + env(safe-area-inset-bottom, 0));
  background:var(--navy); color:var(--sand);
  border-radius:var(--radius); padding:12px 16px;
  align-items:center; gap:12px;
  box-shadow:var(--sombra-alta);
  opacity:0; transform:translateY(12px); transition:opacity 200ms, transform 200ms;
}
.convite-instalar.visivel{opacity:1; transform:translateY(0);}
.convite-instalar-icone{font-size:20px; flex-shrink:0;}
.convite-instalar-texto{flex:1; font-size:13px; line-height:1.4;}
.convite-instalar-ok{
  min-height:var(--altura-botao); background:var(--coral); color:var(--white); border:none; border-radius:999px;
  padding:0 16px; font-size:13px; font-weight:600; white-space:nowrap;
}
.convite-instalar-fechar{
  background:none; border:none; color:var(--sand); opacity:0.7;
  font-size:16px; padding:4px; line-height:1;
}
@media (max-width:768px){ .convite-instalar{display:flex;} }

/* ---------- Ajustes de tela de celular ---------- */
/* Tamanho de toque vai em cada botão (.btn-primary, filtros...), nunca numa regra geral
   para "todo botão": isso esticava os pontinhos do carrossel e outros botões pequenos. */
@media (max-width:768px){
  html{-webkit-text-size-adjust:100%;}
  body{overflow-x:hidden;}
  /* campos com fonte >=16px evitam o zoom automático do Safari/iOS ao focar */
  input, select, textarea{font-size:16px;}
  .search-bar button{min-width:64px;}
}

/* ---------- Transição suave ao abrir a página do produto ---------- */
.produto-wrap{animation:ondax-entrada 200ms ease;}
@keyframes ondax-entrada{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* Celular: 2 cartões por linha, todos do mesmo tamanho */
@media (max-width:600px){
  .product-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;}
  .card .thumb{font-size:36px;}
  .card .body{padding:12px;}
  .card .price{font-size:18px;}
}

/* ---------- Logo em imagem (assets/img/logo-ondax.svg) ---------- */
.logo img, .sidebar-logo img{height:40px; width:auto; display:block;}
/* a logo tem partes azul-marinho: em fundo escuro (rodapé, barra lateral) vai sobre uma placa de areia */
.logo-placa{display:inline-flex; background:var(--sand); border-radius:var(--radius); padding:8px 12px;}
@media (max-width:768px){ .logo img, .sidebar-logo img{height:32px;} }

/* ============================================================
   CARREGAMENTO: retângulo claro pulsando no tamanho exato do card
   ============================================================ */
@keyframes ondax-pulsar{0%,100%{opacity:1;} 50%{opacity:0.45;}}
/* Cartão "esqueleto" enquanto a lista chega (esqueletoCards em carrinho-core.js) */
.esqueleto{pointer-events:none; box-shadow:none;}
.esqueleto .thumb, .esqueleto .mini-thumb,
.esqueleto .linha, .esqueleto .pc-capa, .esqueleto .pc-logo{background:var(--esqueleto); animation:ondax-pulsar 1.4s ease-in-out infinite;}
.esqueleto .linha{display:block; height:12px; border-radius:999px;}
.esqueleto .linha.curta{width:60%;}
.esqueleto .linha.preco{width:40%; height:16px; margin-top:auto;}
.esqueleto .linha + .linha{margin-top:8px;}
.esqueleto .price .linha.preco{margin-top:0;}
.esqueleto.partner-card .pc-nome .linha{width:128px;}
.esqueleto.partner-card .pc-cat .linha{width:80px;}
.esqueleto.partner-card .pc-cta{width:128px; height:36px; border-color:transparent; background:var(--esqueleto); animation:ondax-pulsar 1.4s ease-in-out infinite;}
/* Foto ainda chegando: o lugar dela pulsa e a foto aparece suave quando carrega (imgPronta) */
.carregando-img{background:var(--esqueleto) !important; animation:ondax-pulsar 1.4s ease-in-out infinite;}
.carregando-img img{opacity:0;}
.thumb img, .mini-thumb img, .produto-foto img, .pc-capa img{transition:opacity 200ms ease;}

/* ============================================================
   Quem desligou as animações no aparelho não vê nenhuma
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .giro-trilho{animation:none !important;}
  .giro-janela{overflow-x:auto; -webkit-mask-image:none; mask-image:none;}
  .card:hover, .card-mini:hover, a.partner-card:hover{transform:none;}
}