/* ==========================================================================
   TEMA AZUL + PASTEL (pedido da Brunna, 2026-09-30)
   Azul-marinho como cor principal, fundos em azul clarinho e detalhes em tons pastéis.

   Para VOLTAR ao visual anterior: tire a linha
     <link rel="stylesheet" href="/css/tema-azul.css">
   das páginas da loja (public/*.html). Nada do style.css foi alterado.

   Todas as regras começam com :root para vencer as regras equivalentes do style.css
   sem depender da ordem dos arquivos.
   ========================================================================== */

:root:root {
  /* Paleta do tema */
  --azul-medio: #2a568f;
  --pastel-azul: #e8f1fb;
  --pastel-azul-2: #d6e6f7;
  --pastel-azul-borda: #c7dbf1;
  --pastel-rosa: #f9d6e2;
  --pastel-rosa-forte: #ee9bb9;
  --pastel-menta: #d3efe5;
  --pastel-menta-forte: #7ccdb0;
  --pastel-lilas: #e6defa;
  --pastel-lilas-forte: #ad97e4;
  --pastel-amarelo: #fdf2c7;
  --pastel-amarelo-forte: #f1ca5e;

  /* As cores de destaque do site passam a ser azuis (links, botões, estados ativos) */
  --rosa: var(--azul-medio);
  --rosa-escuro: var(--marinho);
  --rosa-claro: var(--pastel-azul);
  --coral: var(--pastel-rosa-forte);
  --logo-rosa: var(--pastel-azul-borda); /* moldura das fotos, anel dos círculos, menu ativo da conta */
}

/* Títulos e preços em azul-marinho, para ficar tudo no mesmo tom */
:root h1, :root h2, :root h3 { color: var(--marinho); }
:root .price, :root .summary-total, :root .breadcrumb b { color: var(--marinho); }

/* Faixa "loja em desenvolvimento": azul-marinho em vez de amarela */
:root .dev-banner { background: var(--marinho); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .14); }
:root .dev-banner a { color: var(--pastel-rosa); }

/* Barra de categorias do computador: azul clarinho com texto marinho */
:root .catbar { background: var(--pastel-azul); border-bottom: 1px solid var(--pastel-azul-2); }
:root .catbar li + li { border-left-color: rgba(1, 33, 78, .1); }
:root .catbar a:hover, :root .catbar a.active { background: var(--pastel-azul-2); }
:root .catbar a.catbar-premium, :root .catbar a.catbar-outlet { background: none; color: var(--marinho); }
:root .catbar a.catbar-premium:hover, :root .catbar a.catbar-premium.active,
:root .catbar a.catbar-outlet:hover, :root .catbar a.catbar-outlet.active { background: var(--marinho); color: #fff; }

/* Faixa de categorias do celular */
@media (max-width: 900px) {
  :root .catbar.catbar-strip { border-bottom-color: var(--pastel-azul-2); }
  :root .catbar-strip li > a.active { color: var(--marinho); box-shadow: inset 0 -3px 0 var(--marinho); }
  :root .catbar-strip li > a:hover { color: var(--azul-medio); }
  :root .catbar-strip a.catbar-outlet { color: var(--marinho); }
  :root .catbar.catbar-strip a.catbar-outlet.active, :root .catbar.catbar-strip a.catbar-outlet:hover { background: var(--marinho); color: #fff; }
  :root .catbar-strip::after { background: linear-gradient(to right, rgba(232, 241, 251, 0), var(--pastel-azul)); }
}

/* Banners (exceto o do evento e os de imagem): azul clarinho, com arco-íris pastel nos cantos */
:root .hero-slide:not(.hero-event):not(.hero-slide-img) {
  background: linear-gradient(160deg, #eaf3fc 0%, #dbe9f8 100%) !important;
  position: relative; overflow: hidden; color: var(--marinho);
}
:root .hero-slide:not(.hero-event):not(.hero-slide-img) > * { position: relative; z-index: 1; }
:root .hero-slide:not(.hero-event):not(.hero-slide-img)::before,
:root .hero-slide:not(.hero-event):not(.hero-slide-img)::after {
  content: ''; position: absolute; bottom: -1px; width: clamp(120px, 16vw, 220px); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle at var(--x) 100%,
    transparent 0 34%, var(--pastel-amarelo-forte) 34% 46%, var(--pastel-menta-forte) 46% 58%, var(--pastel-rosa-forte) 58% 70%, transparent 70%);
  opacity: .45;
}
:root .hero-slide:not(.hero-event):not(.hero-slide-img)::before { left: 0; --x: 0%; }
:root .hero-slide:not(.hero-event):not(.hero-slide-img)::after { right: 0; --x: 100%; }
:root .hero-slide h2 { color: var(--marinho); }
:root .hero-slide p { color: #3d5a80; }
:root .hero-arrow { color: var(--marinho); }
/* Pontinhos do banner numa cor só (azul claro); o ativo em marinho */
:root .hero-dots button::before { background: #a9c8ea; }
:root .hero-dots button.active::before { background: var(--marinho); }

/* Selos de confiança: cada ícone num tom pastel */
:root .trust b { color: var(--marinho); }
:root .trust div:nth-child(4n+1) svg { color: var(--pastel-rosa-forte); }
:root .trust div:nth-child(4n+2) svg { color: var(--pastel-lilas-forte); }
:root .trust div:nth-child(4n+3) svg { color: var(--pastel-menta-forte); }
:root .trust div:nth-child(4n+4) svg { color: var(--pastel-amarelo-forte); }

/* Círculos das categorias: anel em tons pastéis alternados */
:root .circle { color: var(--marinho); }
/* Círculos das categorias numa cor só (azul da moldura das fotos). Para voltar às 4 cores pastel, troque CIRCULOS_UMA_COR por CIRCULOS_CORES abaixo. */
/* CIRCULOS_UMA_COR */
:root .rail-track > .circle .circle-img { box-shadow: 0 0 0 3px #a9c8ea, var(--sombra); background: var(--pastel-azul); }
/* CIRCULOS_CORES (desligado)
:root .rail-track > .circle:nth-child(4n+1) .circle-img { box-shadow: 0 0 0 3px var(--pastel-rosa-forte), var(--sombra); background: var(--pastel-rosa); }
:root .rail-track > .circle:nth-child(4n+2) .circle-img { box-shadow: 0 0 0 3px var(--pastel-menta-forte), var(--sombra); background: var(--pastel-menta); }
:root .rail-track > .circle:nth-child(4n+3) .circle-img { box-shadow: 0 0 0 3px var(--pastel-lilas-forte), var(--sombra); background: var(--pastel-lilas); }
:root .rail-track > .circle:nth-child(4n+4) .circle-img { box-shadow: 0 0 0 3px var(--pastel-amarelo-forte), var(--sombra); background: var(--pastel-amarelo); }
*/

/* Faixa "Compre hoje..." */
:root .cta-strip { background: var(--pastel-azul); color: var(--marinho); }

/* Botões: principal em marinho; secundário em azul clarinho */
:root .btn-rosa { background: var(--marinho); }
:root .btn-rosa:hover { background: var(--azul-medio); }
:root .btn-outline { background: var(--pastel-azul); border-color: var(--pastel-azul-borda); color: var(--marinho); }
:root .btn-outline:hover { background: var(--pastel-azul-2); }

/* Selos nos cards: desconto em rosa pastel, Outlet em rosa pastel, Premium segue marinho */
:root .badge { background: var(--pastel-rosa); color: var(--marinho); }
:root .line-outlet { background: var(--pastel-rosa); color: var(--marinho); }
:root .line-hero.outlet { background: var(--pastel-rosa); }
:root .line-hero.outlet h1 { color: var(--marinho); }
:root .card .soldout { color: var(--azul-medio); }

/* Listagem, produto e formulários */
:root .sort button.active { background: var(--pastel-azul-2); color: var(--marinho); }
:root .opt.active { border-color: var(--marinho); background: var(--pastel-azul); color: var(--marinho); }
:root .stock-note { color: var(--azul-medio); }
:root .tracking, :root .checkout-login { background: var(--pastel-azul); border-color: var(--pastel-azul-borda); }
:root .summary, :root .account-nav { background: var(--pastel-azul); }

/* Rodapé em azul clarinho */
:root .footer { background: var(--pastel-azul); border-top-color: var(--pastel-azul-2); }
:root .footer-links a { color: var(--marinho); }
:root .footer-links li + li { border-left-color: var(--pastel-azul-borda); }
@media (max-width: 900px) { :root .footer-links a { border-color: var(--pastel-azul-borda); } }
:root .ssl { color: var(--marinho); }

/* Botão do WhatsApp em verde-menta (mais suave, ainda reconhecível) */
:root .whats-float { background: #5fc49b; }
@media (max-width: 900px) { :root .hero-dots { background: #fff; } }