/* ==========================================================================
   BaúBazinga! — storefront
   Paleta tirada do logo (stores/baubazinga/logo/logoBauBazinga.png): amarelo do
   letreiro, vermelho e laranja da explosao, azul das cartas; o azul-marinho e o
   fundo de apoio (topo, hero e rodape). Os arquivos web do logo ficam em img/.
   ========================================================================== */

:root {
  /* base escura (header / hero / rodape) — azul-marinho do contorno do logo */
  --ink: #0A1740;
  --ink-2: #102766;
  --ink-3: #1B3F9A;

  /* base clara (catalogo) */
  --paper: #F4F7FD;
  --surface: #FFFFFF;
  --border: #E1E7F2;

  /* texto */
  --text: #0F1B3D;
  --text-soft: #5B6788;
  --text-on-dark: #EEF3FF;
  --text-on-dark-soft: #A8BBE6;

  /* cores da marca */
  --gold: #FFD21F;       /* amarelo do letreiro */
  --gold-deep: #F7A823;  /* laranja da explosao */
  --red: #E3262B;        /* vermelho da explosao */
  --blue: #2563EB;       /* azul das cartas */
  --sky: #3FA9F5;
  --lime: #5FE3A1;
  --danger: #D92D3A;

  --grad-hot: linear-gradient(120deg, var(--gold), var(--gold-deep));
  --grad-cool: linear-gradient(120deg, var(--blue), var(--sky));
  --grad-brand: linear-gradient(120deg, var(--red) 0%, var(--gold) 50%, var(--sky) 100%);

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 8px rgba(10, 23, 64, .06);
  --shadow: 0 12px 30px rgba(10, 23, 64, .10);
  --shadow-lg: 0 24px 60px rgba(10, 23, 64, .20);

  --header-h: 200px;
  --wrap: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3, h4, .brand-text strong, .display {
  font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--blue); color: #fff; }

/* ---------- utilitarios ---------- */
.link-btn { background: none; border: none; color: var(--blue); font-weight: 600; font-size: 13px; padding: 0; }
.link-btn:hover { text-decoration: underline; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 999px; padding: 13px 24px;
  font-weight: 700; font-size: 14px; letter-spacing: .01em;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, filter .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-gold { background: var(--grad-hot); color: #2A1400; box-shadow: 0 8px 22px rgba(255,150,60,.35); }
.btn-violet { background: linear-gradient(120deg, var(--blue), #1D4ED8); color: #fff; box-shadow: 0 8px 22px rgba(37,99,235,.35); }
.btn-ghost { background: rgba(255,255,255,.08); color: var(--text-on-dark); border: 1px solid rgba(255,255,255,.22); }
.btn-soft { background: var(--paper); color: var(--text); border: 1px solid var(--border); }
.btn-block { width: 100%; }

/* ==========================================================================
   BARRA PROMOCIONAL
   ========================================================================== */
/* faixa amarela sobre o header marinho: as duas cores principais do logo */
.promo-bar {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 50%, var(--gold-deep));
  color: var(--ink);
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
}
.promo-track { position: relative; height: 34px; width: 100%; }
.promo-msg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(100%);
  transition: opacity .5s, transform .5s;
}
.promo-msg.active { opacity: 1; transform: translateY(0); }
.promo-msg.leaving { opacity: 0; transform: translateY(-100%); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink); /* cor de apoio enquanto a imagem de fundo carrega */
  color: var(--text-on-dark);
  box-shadow: 0 8px 30px rgba(10,23,64,.35);
}

/* Cena de fundo do topo (img/header-bg.webp, recortada da arte enviada).
   Fica numa camada propria com overflow:hidden: o header nao pode cortar
   conteudo, senao as sugestoes da busca, que descem por fora dele, sumiriam. */
.header-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* Imagem, enquadramento, zoom e escurecimento vem do painel (Aparencia da loja)
   como variaveis CSS aplicadas pelo app.js. O zoom fica numa camada separada da
   animacao de "camera", senao o transform da animacao sobrescreveria o zoom. */
.header-bg-zoom {
  position: absolute; inset: 0;
  transform: scale(var(--hdr-zoom, 1)); transform-origin: var(--hdr-pos, 50% 50%);
}
.header-bg-zoom::before {
  content: ''; position: absolute; inset: -4%;
  background-image: var(--hdr-img, none); background-size: cover; background-repeat: no-repeat;
  background-position: var(--hdr-pos, 50% 50%);
  animation: headerDrift 45s ease-in-out infinite alternate;
  will-change: transform;
}
/* veu leve: a cena continua visivel; os textos ficam legiveis pelo vidro escuro
   dos botoes e da barra de menu, nao por escurecer a imagem inteira */
.header-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,23,64,var(--hdr-o1,.12)) 0%, rgba(10,23,64,var(--hdr-o2,.32)) 60%, rgba(10,23,64,var(--hdr-o3,.55)) 100%);
}
@keyframes headerDrift {
  from { transform: scale(1.04) translateX(-1.5%); }
  to { transform: scale(1.08) translateX(1.5%); }
}
/* conteudo acima da cena; a linha da busca fica acima da barra de menu para
   o dropdown de sugestoes nao ser coberto por ela */
.header-inner { position: relative; z-index: 2; }
.main-nav { position: relative; z-index: 1; }
@media (max-width: 860px) {
  /* no celular: imagem e enquadramento proprios, tambem definidos no painel */
  .header-bg-zoom { transform: scale(var(--hdr-zoom-m, 1)); transform-origin: var(--hdr-pos-m, 50% 50%); }
  .header-bg-zoom::before {
    background-image: var(--hdr-img-m, var(--hdr-img, none));
    background-position: var(--hdr-pos-m, 50% 50%);
  }
}
.header-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 16px 24px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  transition: padding .25s;
}
.site-header.shrink .header-inner { padding: 9px 24px; }

/* --- marca --- */
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo {
  height: 120px; width: auto; display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  transition: height .25s ease, transform .35s cubic-bezier(.34,1.6,.64,1);
}
.brand:hover .brand-logo { transform: rotate(-3deg) scale(1.05); }
.site-header.shrink .brand-logo { height: 72px; }

.footer-logo { width: 200px; height: auto; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.4)); }

/* logo grande no primeiro banner: flutua com um brilho amarelo "de tesouro" atras */
.hero-logo-wrap { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.hero-logo-wrap::before {
  content: ''; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,31,.5), rgba(255,210,31,0) 65%);
  filter: blur(8px); animation: treasureGlow 4s ease-in-out infinite;
}
.hero-logo {
  position: relative; width: min(430px, 100%); height: auto;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.5));
  animation: logoFloat 6s ease-in-out infinite;
}
.sparkle { position: absolute; font-size: 22px; animation: twinkle 2.6s ease-in-out infinite; pointer-events: none; }
.sparkle.s1 { top: 6%; left: 10%; }
.sparkle.s2 { top: 18%; right: 6%; font-size: 18px; animation-delay: .8s; }
.sparkle.s3 { bottom: 12%; left: 4%; font-size: 16px; animation-delay: 1.5s; }
@keyframes logoFloat { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes treasureGlow { 0%,100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes twinkle { 0%,100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }

@media (max-width: 860px) {
  .brand-logo { height: 84px; }
  .site-header.shrink .brand-logo { height: 58px; }
}

/* --- busca --- */
.searchbar {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,.97);
  border-radius: 999px; padding: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.06);
  max-width: 640px; width: 100%; justify-self: center;
  transition: box-shadow .25s;
}
.searchbar:focus-within { box-shadow: 0 8px 30px rgba(37,99,235,.45), 0 0 0 3px rgba(37,99,235,.55); }
.search-scope {
  border: none; background: transparent; color: var(--text-soft);
  font-size: 13px; font-weight: 600; padding: 0 12px 0 16px; border-radius: 999px;
  max-width: 150px; outline: none;
}
.search-field { position: relative; flex: 1; display: flex; }
.search-field input {
  width: 100%; border: none; outline: none; background: transparent;
  padding: 11px 12px; font-size: 14px; color: var(--text);
  border-left: 1px solid var(--border);
}
.search-field input::placeholder { color: #9F9DB8; }
.search-btn {
  border: none; border-radius: 999px; width: 42px;
  background: var(--grad-hot); color: #2A1400;
  display: grid; place-items: center; transition: filter .2s, transform .2s;
}
.search-btn:hover { filter: brightness(1.08); transform: scale(1.05); }
.search-btn svg { width: 19px; height: 19px; }

.search-suggestions {
  position: absolute; top: calc(100% + 10px); left: -1px; right: -50px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; z-index: 70;
  animation: dropIn .22s ease;
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px);} to { opacity: 1; transform: none; } }
.suggestion {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  cursor: pointer; border-bottom: 1px solid var(--border);
}
.suggestion:last-child { border-bottom: none; }
.suggestion:hover { background: var(--paper); }
.suggestion-art { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-size: 19px; flex-shrink: 0; }
.suggestion-name { font-size: 13px; font-weight: 600; color: var(--text); }
.suggestion-price { font-size: 12px; color: var(--blue); font-weight: 700; }
.suggestion-empty { padding: 16px; font-size: 13px; color: var(--text-soft); text-align: center; }

/* --- acoes --- */
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-action {
  display: flex; align-items: center; gap: 9px;
  background: rgba(10,23,64,.55); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--text-on-dark); border-radius: 999px; padding: 8px 16px 8px 13px;
  transition: background .2s, transform .2s, border-color .2s;
}
.icon-action:hover { background: rgba(10,23,64,.78); transform: translateY(-2px); border-color: rgba(255,255,255,.4); }
.icon-action svg { width: 21px; height: 21px; }
.icon-action-label { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.icon-action-label small { font-size: 10px; color: var(--text-on-dark-soft); }
.icon-action-label strong { font-size: 13px; font-weight: 700; }
.cart-action { background: var(--grad-hot); color: var(--ink); border-color: transparent; }
.cart-action .icon-action-label small { color: rgba(10,23,64,.7); }
/* o hover generico do .icon-action trocava o amarelo do carrinho */
.cart-action:hover { background: var(--grad-hot); filter: brightness(1.06); border-color: transparent; }
.cart-icon-wrap { position: relative; display: grid; place-items: center; }
.cart-badge {
  position: absolute; top: -7px; right: -9px;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 19px; height: 19px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 5px;
  border: 2px solid var(--sky);
}
.cart-badge.bump { animation: badgeBump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes badgeBump { 0% { transform: scale(1);} 45% { transform: scale(1.5);} 100% { transform: scale(1);} }

/* --- nav --- */
.main-nav {
  border-top: 1px solid rgba(255,255,255,.14); background: rgba(10,23,64,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.main-nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.main-nav-inner::-webkit-scrollbar { display: none; }
.nav-link {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 12px 16px; font-size: 13.5px; font-weight: 600;
  color: var(--text-on-dark-soft); background: none; border: none;
  border-bottom: 3px solid transparent; transition: color .2s, border-color .2s;
}
.nav-link:hover { color: #fff; }
.nav-link.active { color: #fff; border-bottom-color: var(--gold); }
.nav-link .nav-ico { font-size: 15px; }
.nav-caret { font-size: 10px; opacity: .75; transition: transform .2s; }
.nav-link[aria-expanded="true"] { color: #fff; }
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* submenu das categorias (subcategorias cadastradas no painel) */
.nav-drop {
  position: absolute; top: 100%; left: 24px; z-index: 5;
  width: min(460px, calc(100vw - 24px)); margin-top: 8px; padding: 14px;
  border-radius: 16px; background: var(--surface); color: var(--text);
  box-shadow: 0 24px 60px rgba(10,23,64,.35);
  animation: navDropIn .2s ease;
}
/* ponte invisivel entre o botao e o painel: o mouse atravessa sem fechar */
.nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-drop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 2px 12px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
.nav-drop-ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 20px; background: var(--grad-hot);
}
.nav-drop-head strong { display: block; font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 600; }
.nav-drop-head small { color: var(--text-soft); font-size: 12px; }
.nav-drop-all {
  margin-left: auto; border: none; background: var(--paper); color: var(--blue);
  font-weight: 700; font-size: 12.5px; padding: 8px 13px; border-radius: 999px; white-space: nowrap;
  transition: background .2s, color .2s;
}
.nav-drop-all:hover { background: var(--gold); color: var(--ink); }
.nav-drop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.nav-drop-item {
  display: flex; align-items: center; gap: 9px; text-align: left;
  border: none; background: none; padding: 10px 12px; border-radius: 11px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  transition: background .15s, transform .15s;
}
.nav-drop-item span { font-size: 17px; }
.nav-drop-item:hover { background: var(--paper); transform: translateX(3px); }
.nav-drop-item.active { background: rgba(255,210,31,.3); }
.nav-drop-empty { font-size: 13px; color: var(--text-soft); padding: 4px 4px 2px; }
@keyframes navDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .nav-drop { left: 12px !important; right: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .nav-drop { animation: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 15% 0%, var(--ink-3) 0%, var(--ink) 60%);
  min-height: 420px;
  display: flex; align-items: center;
}
.hero-blobs { position: absolute; inset: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.blob-1 { width: 380px; height: 380px; background: var(--blue); top: -120px; left: 5%; animation: float1 14s ease-in-out infinite; }
.blob-2 { width: 300px; height: 300px; background: var(--gold); bottom: -120px; left: 42%; animation: float2 17s ease-in-out infinite; opacity: .32; }
.blob-3 { width: 340px; height: 340px; background: var(--sky); top: -80px; right: 2%; animation: float3 12s ease-in-out infinite; opacity: .35; }
@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(60px,50px) scale(1.12);} }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1.05);} 50% { transform: translate(-70px,-40px) scale(.92);} }
@keyframes float3 { 0%,100% { transform: translate(0,0);} 50% { transform: translate(-50px,60px);} }

.hero-slides { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 54px 72px; width: 100%; }
.hero-slide {
  display: none; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
}
.hero-slide.active { display: grid; animation: slideIn .6s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(18px) scale(.99);} to { opacity: 1; transform: none; } }

.hero-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.hero-title {
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; color: #fff; margin-bottom: 14px;
}
.hero-title .hl {
  background: linear-gradient(100deg, var(--gold), var(--red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--text-on-dark-soft); font-size: 16px; max-width: 46ch; margin-bottom: 26px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-art { position: relative; height: 300px; display: grid; place-items: center; }
.hero-card {
  position: absolute; width: 150px; height: 210px; border-radius: 16px;
  display: grid; place-items: center; font-size: 60px;
  box-shadow: 0 24px 50px rgba(0,0,0,.45);
  border: 3px solid rgba(255,255,255,.25);
}
.hero-card-1 { transform: rotate(-15deg) translateX(-90px); background: var(--grad-cool); animation: cardFloat 7s ease-in-out infinite; }
.hero-card-2 { transform: rotate(4deg); background: var(--grad-hot); z-index: 2; animation: cardFloat 7s ease-in-out infinite .6s; }
.hero-card-3 { transform: rotate(17deg) translateX(90px); background: linear-gradient(120deg, var(--lime), var(--sky)); animation: cardFloat 7s ease-in-out infinite 1.2s; }
@keyframes cardFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; font-size: 26px; line-height: 1;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center; transition: background .2s, transform .2s;
}
.hero-arrow:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.1); }
.hero-prev { left: 16px; }
.hero-next { right: 16px; }
.hero-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; }
.hero-dot {
  width: 9px; height: 9px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.35); transition: width .3s, background .3s;
}
.hero-dot.active { width: 28px; background: var(--gold); }

/* ==========================================================================
   SELOS / TILES / SECOES
   ========================================================================== */
/* abaixo do banner, com respiro — nao sobrepoe mais a imagem */
.trust-strip {
  max-width: var(--wrap); margin: 32px auto 0; position: relative; z-index: 10;
  padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.trust-item {
  background: var(--surface); border-radius: var(--radius); padding: 16px 18px;
  display: flex; align-items: center; gap: 13px; box-shadow: var(--shadow);
  transition: transform .25s;
}
.trust-item:hover { transform: translateY(-4px); }
.trust-ico { font-size: 24px; }
.trust-item strong { display: block; font-size: 13.5px; }
.trust-item small { color: var(--text-soft); font-size: 12px; }

.section-kicker {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 6px;
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 22px;
}
.section-head h2, .catalog-head h2 { font-size: clamp(23px, 3vw, 32px); }

.tiles {
  max-width: var(--wrap); margin: 48px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.tile {
  position: relative; overflow: hidden; border-radius: 20px; padding: 26px;
  min-height: 178px; color: #fff; cursor: pointer;
  display: flex; align-items: flex-end;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s;
}
.tile:hover { transform: translateY(-6px) scale(1.012); box-shadow: var(--shadow-lg); }
.tile-a { background: linear-gradient(130deg, #E3262B, #9E1520); }
.tile-b { background: linear-gradient(130deg, #3FA9F5, #1D4ED8); }
/* amarelo com texto claro nao tem contraste: este tile usa texto marinho */
.tile-c { background: linear-gradient(130deg, #FFD21F, #F7A823); color: var(--ink); }
.tile-body { position: relative; z-index: 2; }
.tile-kicker { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.tile h3 { font-size: 25px; margin: 4px 0 6px; }
.tile p { margin: 0 0 12px; font-size: 13.5px; opacity: .92; max-width: 30ch; }
.tile-cta { font-weight: 700; font-size: 14px; display: inline-block; transition: transform .25s; }
.tile:hover .tile-cta { transform: translateX(6px); }
.tile-emoji {
  position: absolute; right: -10px; bottom: -18px; font-size: 108px; opacity: .28;
  transition: transform .4s cubic-bezier(.34,1.4,.64,1);
}
.tile:hover .tile-emoji { transform: rotate(-10deg) scale(1.12); }

/* ==========================================================================
   VITRINE (carrossel horizontal)
   ========================================================================== */
.showcase { max-width: var(--wrap); margin: 58px auto 0; padding: 0 24px; }
.showcase-nav { display: flex; gap: 8px; }
.showcase-nav button {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); font-size: 20px; line-height: 1; color: var(--text-soft);
  transition: background .2s, color .2s, transform .2s;
}
.showcase-nav button:hover { background: var(--blue); color: #fff; border-color: var(--blue); transform: scale(1.08); }
/* Largura fixa: com "1fr" os cards esticavam para ocupar a faixa inteira quando
   havia so 1 ou 2 itens (ex.: "Vistos recentemente" no comeco da visita). */
.showcase-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 212px; justify-content: start;
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 18px; scrollbar-width: thin;
}
.showcase-rail > * { scroll-snap-align: start; }

/* ==========================================================================
   CATALOGO
   ========================================================================== */
.catalog { max-width: var(--wrap); margin: 58px auto 0; padding: 0 24px 70px; }
.catalog-head { margin-bottom: 20px; }

.filters-toggle {
  display: none; width: 100%; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; font-weight: 700;
}

.catalog-body { display: grid; grid-template-columns: 254px 1fr; gap: 24px; align-items: start; }

.filters {
  background: var(--surface); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow-sm); position: sticky; top: calc(var(--header-h) + 14px);
  max-height: calc(100vh - var(--header-h) - 30px); overflow-y: auto;
}
.filters-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.filters-header h3 { font-size: 17px; }
.filter-group { border-top: 1px solid var(--border); padding: 14px 0 4px; }
.filter-group:first-child { border-top: none; padding-top: 0; }
.filter-group h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-soft); margin-bottom: 9px; font-family: 'Inter', sans-serif; font-weight: 700;
}
.filter-option {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: none; text-align: left;
  padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text);
  transition: background .16s, color .16s;
}
.filter-option:hover { background: var(--paper); }
.filter-option.active { background: rgba(37,99,235,.12); color: var(--blue); font-weight: 700; }
.filter-count { font-size: 11px; color: var(--text-soft); background: var(--paper); padding: 1px 7px; border-radius: 999px; }
.filter-option.active .filter-count { background: rgba(37,99,235,.18); color: var(--blue); }
.filter-option.filter-sub { padding-left: 24px; font-size: .95em; }
.filter-option.filter-sub span:first-child::before { content: '↳ '; opacity: .5; }
.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs input {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; outline: none;
}
.price-inputs input:focus { border-color: var(--blue); }
.price-apply { margin-top: 9px; width: 100%; padding: 9px; border-radius: 8px; border: none; background: var(--ink-2); color: #fff; font-weight: 700; font-size: 13px; }
.price-apply:hover { background: var(--blue); }

.catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface); border-radius: var(--radius); padding: 12px 16px;
  box-shadow: var(--shadow-sm); margin-bottom: 16px; flex-wrap: wrap;
}
.results-info { font-size: 13.5px; color: var(--text-soft); }
.results-info strong { color: var(--text); }
.toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sort-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); }
.sort-wrap select {
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px;
  background: var(--surface); font-size: 13px; font-weight: 600; outline: none;
}
.active-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(37,99,235,.12); color: var(--blue);
  border: none; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 600;
}
.chip:hover { background: rgba(37,99,235,.22); }
.chip span { font-size: 14px; line-height: 1; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }

/* ---------- card de produto ----------
   O transform e composto por variaveis para que o efeito de hover (elevacao) e
   o tilt 3D controlado pelo ponteiro possam conviver na mesma propriedade. */
.product-card {
  position: relative; background: var(--surface); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transform: perspective(900px)
             translateY(var(--ty, 0))
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             scale(var(--sc, 1));
  transform-style: preserve-3d;
  transition: transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s;
  animation: cardIn .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.product-card:hover { --ty: -7px; --sc: 1.012; box-shadow: var(--shadow-lg); }
/* enquanto o ponteiro guia a inclinacao, a transicao sairia atrasando o efeito */
.product-card.tilting { transition: box-shadow .28s; }

@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; } }

/* brilho holografico — a carta reage a luz conforme o ponteiro se move */
/* Duas camadas: as faixas de foil (overlay preserva a cor da arte, ao contrario
   de color-dodge que estoura tudo para o branco) e o brilho especular que
   acompanha o ponteiro. */
.holo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1;
  background: repeating-linear-gradient(112deg,
    rgba(255,0,170,.42) 0 7%,
    rgba(0,225,255,.42) 7% 14%,
    rgba(150,255,60,.34) 14% 20%,
    rgba(255,190,0,.42) 20% 27%,
    rgba(120,80,255,.38) 27% 34%);
  background-size: 230% 230%;
  background-position: var(--holo-x, 50%) center;
  mix-blend-mode: overlay;
  transition: opacity .32s ease;
}
.holo::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.1) 26%, transparent 52%);
  mix-blend-mode: screen;
}
.product-card:hover .holo { opacity: .85; }
.product-card:hover .product-art { filter: saturate(1.15) contrast(1.05); }

/* Com foto real so luz: as faixas coloridas do foil tingiriam a foto da carta.
   Fica o reflexo branco seguindo o ponteiro (+ a faixa de brilho do ::after);
   o movimento (tilt) continua o mesmo. */
.product-card.has-photo .holo {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.5) 0%, rgba(255,255,255,.14) 28%, transparent 55%);
  mix-blend-mode: screen;
}
.product-card.has-photo .holo::after { display: none; }
.product-card.has-photo:hover .holo { opacity: 1; }
.product-card.has-photo:hover .product-art { filter: none; }

/* coracao de favoritos */
.wish-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(11,8,33,.42); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 0;
  transition: background .2s, transform .2s;
}
.wish-btn svg { width: 17px; height: 17px; fill: transparent; stroke: #fff; stroke-width: 2; transition: fill .2s, stroke .2s; }
.wish-btn:hover { background: rgba(11,8,33,.65); transform: scale(1.12); }
.wish-btn.active svg { fill: var(--red); stroke: var(--red); }
.wish-btn.pop { animation: wishPop .45s cubic-bezier(.34,1.7,.64,1); }
@keyframes wishPop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }

.pm-wish.active { border-color: var(--red); color: var(--red); }
.product-art {
  position: relative; aspect-ratio: 1/1; display: grid; place-items: center;
  font-size: 54px; overflow: hidden;
}
.product-art::after {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
}
.product-card:hover .product-art::after { animation: shine .85s ease; }
@keyframes shine { to { left: 130%; } }
.product-art-emoji { transition: transform .35s cubic-bezier(.34,1.4,.64,1); filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
.product-card:hover .product-art-emoji { transform: scale(1.16) rotate(-6deg); }
/* posicionamento absoluto de proposito: dentro de um container grid com
   aspect-ratio, `height:100%` numa <img> resolve pela altura intrinseca da
   imagem e estoura a caixa (a foto ficava com 880px numa caixa de 365px). */
.product-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s cubic-bezier(.34,1.2,.64,1);
}
.product-card:hover .product-photo { transform: scale(1.07); }

.product-flags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.flag {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; color: #fff; backdrop-filter: blur(4px);
}
.flag-unique { background: rgba(227,38,43,.92); }
.flag-stocked { background: rgba(53,120,255,.92); }
.flag-collection { background: rgba(245,165,36,.95); color: #3A2200; }
.flag-last { background: rgba(244,72,95,.95); }

.product-info { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.product-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-soft); }
.product-name { font-size: 13.8px; font-weight: 600; line-height: 1.3; color: var(--text); }
.product-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.meta-pill { font-size: 10.5px; background: var(--paper); color: var(--text-soft); padding: 2px 8px; border-radius: 999px; }
.product-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.product-price { font-family: 'Fredoka', sans-serif; font-size: 19px; font-weight: 600; color: var(--text); line-height: 1.1; }
.product-price small { display: block; font-size: 10.5px; color: var(--text-soft); font-weight: 500; font-family: 'Inter', sans-serif; }
.add-mini {
  width: 36px; height: 36px; border-radius: 11px; border: none; flex-shrink: 0;
  background: var(--grad-hot); color: var(--ink); font-size: 19px; line-height: 1;
  display: grid; place-items: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s;
}
.add-mini:hover { transform: scale(1.12) rotate(6deg); filter: brightness(1.06); }

/* skeleton */
.skeleton-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.skeleton-art { aspect-ratio: 1/1; }
.skeleton-line { height: 11px; border-radius: 6px; margin: 10px 14px; }
.skeleton-art, .skeleton-line {
  background: linear-gradient(90deg, #ECEDF6 25%, #F6F7FC 37%, #ECEDF6 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.empty-block { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--text-soft); }
.empty-block .big { font-size: 46px; display: block; margin-bottom: 10px; }

/* paginacao */
/* "Ver mais": acrescenta produtos a grade em vez de trocar de pagina */
.load-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 32px; text-align: center; }
.load-more-count { margin: 0; font-size: 13.5px; color: var(--text-soft); }
.load-more-count strong { color: var(--text); }
.load-more-bar { width: min(280px, 72%); height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.load-more-bar span {
  display: block; height: 100%; border-radius: 999px; background: var(--grad-hot);
  transition: width .7s cubic-bezier(.22,1,.36,1);
}
.load-more-btn { margin-top: 6px; padding: 14px 32px; }
.load-more-arrow { display: inline-block; transition: transform .25s cubic-bezier(.34,1.6,.64,1); }
.load-more-btn:hover .load-more-arrow { transform: translateY(4px); }
.load-more-end { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: #0B6B41; }
.spinner {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   NEWSLETTER + FOOTER
   ========================================================================== */
.newsletter { max-width: var(--wrap); margin: 0 auto; padding: 0 24px 64px; }
.newsletter-inner {
  background: radial-gradient(120% 160% at 10% 0%, var(--ink-3), var(--ink));
  border-radius: 24px; padding: 38px; color: #fff;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 26px; align-items: center;
  position: relative; overflow: hidden;
}
.newsletter-inner::after {
  content: '🧰'; position: absolute; right: 24px; bottom: -26px; font-size: 130px; opacity: .12;
}
.newsletter h2 { font-size: clamp(21px, 2.6vw, 29px); margin-bottom: 8px; }
.newsletter p { color: var(--text-on-dark-soft); margin: 0; font-size: 14.5px; }
.newsletter-form { display: flex; gap: 10px; position: relative; z-index: 2; }
.newsletter-form input {
  flex: 1; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1);
  border-radius: 999px; padding: 13px 20px; color: #fff; outline: none;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.55); }
.newsletter-form input:focus { border-color: var(--gold); background: rgba(255,255,255,.16); }

.site-footer { background: var(--ink); color: var(--text-on-dark-soft); }
.footer-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 48px 24px 32px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px;
}
.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 12px; }
.footer-col li { padding: 5px 0; font-size: 13.5px; cursor: pointer; transition: color .18s; }
.footer-col li:hover { color: var(--gold); }
.footer-brand p { font-size: 13.5px; max-width: 34ch; margin: 12px 0 14px; }
.socials { display: flex; gap: 10px; }
.socials span {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s;
}
.socials span:hover { background: var(--grad-hot); transform: translateY(-3px); }
.pay-badges { display: flex; gap: 7px; flex-wrap: wrap; }
.pay-badges span {
  font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 7px;
  background: rgba(255,255,255,.09); color: #fff;
}
.footer-note { font-size: 12.5px; margin: 0; }

/* bloco de seguranca e privacidade (itens informativos, nao sao links) */
.security-list li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 13px; line-height: 1.45; cursor: default; }
.security-list li:hover { color: inherit; }
.footer-link { color: var(--gold); font-size: 13px; margin-top: 10px; }
.footer-link:hover { color: #fff; }

/* janela da politica de privacidade: camada acima das demais */
.privacy-layer { z-index: 100; }
.privacy-box { width: 640px; }
.privacy-content h4 { font-size: 15px; margin: 18px 0 6px; }
.privacy-content p, .privacy-content li { font-size: 13.5px; color: var(--text-soft); line-height: 1.6; }
.privacy-content p { margin: 0 0 8px; }
.privacy-content ul { list-style: disc; padding-left: 20px; margin: 0 0 8px; }
.privacy-content strong { color: var(--text); }
.privacy-updated { font-size: 12px !important; margin-top: 18px !important; }
.auth-legal { font-size: 12px; color: var(--text-soft); text-align: center; margin: 12px 0 0; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding: 16px 24px;
  text-align: center; font-size: 12.5px;
}

/* ==========================================================================
   OVERLAYS (drawer / modais)
   ========================================================================== */
.overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(11,8,33,.62); backdrop-filter: blur(3px);
  display: flex; animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.overlay.to-right { justify-content: flex-end; }
.overlay.centered { align-items: center; justify-content: center; padding: 20px; }

.drawer {
  width: 400px; max-width: 92vw; height: 100%; background: var(--surface);
  display: flex; flex-direction: column; animation: slideRight .32s cubic-bezier(.22,1,.36,1);
}
@keyframes slideRight { from { transform: translateX(100%); } to { transform: none; } }
.drawer-head {
  padding: 20px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-head h3 { font-size: 19px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.drawer-foot { border-top: 1px solid var(--border); padding: 18px 22px; }

.modal-box {
  background: var(--surface); border-radius: 22px; width: 520px; max-width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 28px;
  animation: popIn .3s cubic-bezier(.22,1.2,.36,1);
}
@keyframes popIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-box.wide { width: 720px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.modal-head h3 { font-size: 22px; }
.close-x {
  background: var(--paper); border: none; width: 34px; height: 34px; border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--text-soft); flex-shrink: 0;
  transition: background .2s, transform .2s;
}
.close-x:hover { background: var(--danger); color: #fff; transform: rotate(90deg); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group { margin-bottom: 13px; }
.form-group label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 5px; }
.form-control {
  width: 100%; border: 1px solid var(--border); border-radius: 11px;
  padding: 11px 13px; outline: none; background: var(--surface);
  transition: border-color .18s, box-shadow .18s;
}
.form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
textarea.form-control { min-height: 74px; resize: vertical; }

/* produto no modal */
.pm-grid { display: grid; grid-template-columns: 240px 1fr; gap: 22px; }
.pm-art { border-radius: 16px; aspect-ratio: 3/4; display: grid; place-items: center; font-size: 82px; position: relative; overflow: hidden; padding: 10px; }
/* no card a foto preenche (grade uniforme); aqui ela aparece inteira — o cliente
   precisa conseguir avaliar a carta sem corte */
/* mantem o preenchimento absoluto da caixa (que ja resolve o dimensionamento)
   e so troca o encaixe: `contain` letterboxa a foto dentro da area. */
.pm-art .product-photo { object-fit: contain; }
.pm-attrs { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 6px; }
.pm-attrs li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 11px; background: var(--paper); border-radius: 9px; }
.pm-attrs strong { color: var(--text-soft); font-weight: 600; text-transform: capitalize; }
.pm-price { font-family: 'Fredoka', sans-serif; font-size: 30px; margin: 6px 0 4px; }
.pm-stock { font-size: 13px; color: var(--text-soft); margin-bottom: 14px; }
.qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.qty-box { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.qty-box button { width: 36px; height: 40px; border: none; background: var(--paper); font-size: 17px; font-weight: 700; color: var(--text-soft); }
.qty-box button:hover { background: var(--blue); color: #fff; }
.qty-box span { min-width: 44px; text-align: center; font-weight: 700; }

/* carrinho */
.cart-line { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.cart-line-art { width: 58px; height: 58px; border-radius: 12px; display: grid; place-items: center; font-size: 26px; flex-shrink: 0; }
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.cart-line-price { font-size: 13px; color: var(--blue); font-weight: 700; margin-top: 2px; }
.cart-line-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 8px; }
.mini-qty { display: flex; align-items: center; gap: 6px; }
.mini-qty button { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; line-height: 1; }
.mini-qty button:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.remove-link { background: none; border: none; color: var(--danger); font-size: 12px; font-weight: 600; }
.cart-summary-line { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-soft); margin-bottom: 6px; }
.cart-summary-total { display: flex; justify-content: space-between; font-family: 'Fredoka', sans-serif; font-size: 22px; margin-bottom: 14px; }

.tabs { display: flex; gap: 6px; background: var(--paper); padding: 5px; border-radius: 999px; margin-bottom: 18px; }
.tab-btn { flex: 1; border: none; background: none; padding: 9px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--text-soft); }
.tab-btn.active { background: var(--surface); color: var(--blue); box-shadow: var(--shadow-sm); }

.order-line { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.order-line-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.status-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; }
.status-pending { background: #FFF3D6; color: #8A5A00; }
.status-paid, .status-delivered, .status-shipped { background: #DCF7E9; color: #0B6B41; }
.status-cancelled { background: #FFE1E5; color: #A11226; }

.confirm-hero { text-align: center; padding: 6px 0 4px; }
.confirm-hero .emoji { font-size: 56px; display: block; animation: popIn .5s cubic-bezier(.22,1.4,.36,1); }

/* toasts */
#toast-container { position: fixed; bottom: 22px; right: 22px; z-index: 120; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.toast {
  background: var(--ink-2); color: #fff; padding: 12px 18px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg);
  animation: toastIn .3s cubic-bezier(.22,1.4,.36,1);
  border-left: 4px solid var(--blue);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.toast.success { border-left-color: var(--lime); }
.toast.error { border-left-color: var(--danger); }

/* ==========================================================================
   INTERACOES GLOBAIS
   ========================================================================== */

/* progresso da rolagem */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* voltar ao topo com anel de progresso */
.back-to-top {
  position: fixed; bottom: 22px; left: 22px; z-index: 110;
  width: 46px; height: 46px; border-radius: 50%; border: none; padding: 0;
  background: var(--ink-2); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85);
  transition: opacity .3s, transform .3s cubic-bezier(.34,1.5,.64,1), visibility .3s;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--blue); }
.back-to-top svg { position: absolute; inset: 0; width: 46px; height: 46px; transform: rotate(-90deg); }
.back-to-top circle { fill: none; stroke-width: 2.5; }
.ring-track { stroke: rgba(255,255,255,.16); }
.ring-progress { stroke: var(--gold); transition: stroke-dashoffset .1s linear; }
.arrow-up { font-size: 19px; line-height: 1; position: relative; z-index: 2; }

/* item voando para o carrinho */
.fly-clone {
  position: fixed; z-index: 200; pointer-events: none;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.fly-clone .wish-btn, .fly-clone .product-flags, .fly-clone .holo { display: none; }

/* confete da confirmacao de pedido */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 150; overflow: hidden; }
.confetti-piece { position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px; }

/* faixa de numeros */
.stats-band { max-width: var(--wrap); margin: 46px auto 0; padding: 0 24px; }
.stats-inner {
  background: linear-gradient(120deg, var(--ink-2), var(--ink-3));
  border-radius: 22px; padding: 26px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  position: relative; overflow: hidden;
}
.stats-inner::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 90% 0%, rgba(255,210,31,.22), transparent 60%);
  pointer-events: none;
}
.stat-item { text-align: center; color: #fff; position: relative; z-index: 2; }
.stat-icon { font-size: 24px; display: block; margin-bottom: 4px; }
.stat-value {
  font-family: 'Fredoka', sans-serif; font-size: 34px; line-height: 1; display: block;
  background: linear-gradient(100deg, var(--gold), var(--red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: 12.5px; color: var(--text-on-dark-soft); }

/* zoom da foto no modal do produto */
.pm-art.zoomable { cursor: zoom-in; }
.pm-art.zoomable .product-photo { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.pm-art.zooming .product-photo { transform: scale(2.1); }
.zoom-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(11,8,33,.6); backdrop-filter: blur(6px); color: #fff;
  font-size: 11px; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  transition: opacity .25s; pointer-events: none;
}
.pm-art.zooming .zoom-hint { opacity: 0; }

/* badge de favoritos no header */
.icon-only { padding: 10px; }
.wish-badge { border-color: var(--red); background: var(--red); }
.wish-badge.empty { background: var(--ink); border-color: rgba(255,255,255,.35); }

/* miniatura com foto nas gavetas */
.line-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

/* parallax do hero: o conjunto de cartas acompanha o ponteiro e o texto
   contra-move de leve, criando profundidade. O movimento vai no container
   porque as cartas ja usam `translate` na animacao de flutuacao. */
.hero-art {
  translate: var(--par-x, 0px) var(--par-y, 0px);
  transition: translate .35s ease-out;
}
.hero-slide > div:first-child {
  translate: calc(var(--par-x, 0px) * -.22) calc(var(--par-y, 0px) * -.22);
  transition: translate .5s ease-out;
}

/* ==========================================================================
   FUNDOS DOS BANNERS (imagem e enquadramento cadastrados no painel)
   Uma camada por banner, atras do texto; troca com fade junto com o slide.
   ========================================================================== */
.hero-bgs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .9s ease; }
.hero-bg.active { opacity: 1; }
.hero-bg-kb { position: absolute; inset: 0; }
.hero-bg.active .hero-bg-kb { animation: heroKenBurns 14s ease-out both; }
.hero-bg-img {
  position: absolute; inset: 0;
  background-image: var(--img); background-size: cover; background-repeat: no-repeat;
  background-position: var(--pos, 50% 50%);
  transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 50%);
}
/* escurece mais a esquerda (onde fica o texto) e deixa a imagem aparecer a direita */
.hero-bg.has-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(10,23,64,var(--o1,.7)) 0%, rgba(10,23,64,var(--o2,.55)) 45%, rgba(10,23,64,var(--o3,.25)) 100%);
}
@keyframes heroKenBurns { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (max-width: 860px) {
  .hero-bg-img {
    background-image: var(--img-m, var(--img));
    background-position: var(--pos-m, 50% 50%);
    transform: scale(var(--zoom-m, 1)); transform-origin: var(--pos-m, 50% 50%);
  }
  .hero-bg.has-img::after { background: linear-gradient(180deg, rgba(10,23,64,var(--om1,.4)) 0%, rgba(10,23,64,var(--om2,.7)) 100%); }
}

/* ==========================================================================
   GALERIA DO PRODUTO (fotos + video)
   ========================================================================== */
.pm-media { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pm-art.is-video { aspect-ratio: 16/9; background: #000 !important; padding: 0; }
.pm-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pm-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-thumb {
  position: relative; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; padding: 0;
  border: 2px solid transparent; background: var(--paper); transition: border-color .2s, transform .2s;
}
.pm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-thumb:hover { transform: translateY(-2px); }
.pm-thumb.active { border-color: var(--blue); }
.pm-thumb.is-video::after {
  content: '▶'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 18px; background: rgba(11,8,33,.45);
}
.flag-video { background: rgba(11,8,33,.82); }
.fly-clone iframe { display: none; }

/* ==========================================================================
   CHECKOUT (endereco estruturado + frete)
   ========================================================================== */
.co-login-hint { background: var(--paper); border-radius: 12px; padding: 12px 14px; font-size: 13px; margin-bottom: 6px; }
.co-step { display: flex; align-items: center; gap: 9px; font-size: 15px; margin: 18px 0 10px; }
.co-step span {
  width: 24px; height: 24px; border-radius: 50%; background: var(--grad-cool); color: #fff;
  display: grid; place-items: center; font-size: 12.5px; font-family: 'Inter', sans-serif; font-weight: 800;
}
.co-address { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 12px; }
.co-address .span-1 { grid-column: span 1; }
.co-address .span-2 { grid-column: span 2; }
.co-address .span-3 { grid-column: span 3; }
.co-address .span-4 { grid-column: span 4; }
.co-zip-status { display: block; font-size: 11.5px; color: var(--text-soft); margin-top: 4px; min-height: 14px; }
.co-shipping { margin: 2px 0 6px; }
.co-hint { font-size: 13px; color: var(--text-soft); margin: 0; }
.ship-option {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .2s, background .2s;
}
.ship-option.active { border-color: var(--blue); background: rgba(37,99,235,.06); }
.ship-option input { accent-color: var(--blue); }
.ship-name { flex: 1; font-size: 13.5px; font-weight: 600; }
.ship-days { display: block; font-size: 12px; color: var(--text-soft); font-weight: 500; }
.ship-price { font-weight: 700; }
.ship-manual { background: var(--paper); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--text-soft); }
.co-summary { background: var(--paper); border-radius: 12px; padding: 14px; margin: 16px 0; }
.co-divider { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 6px; }
.co-note { font-size: 12px; color: var(--text-soft); margin: 0 0 14px; }
.order-track { font-size: 12.5px; margin-top: 6px; color: var(--text); }

/* frete gratis: selo, barra de progresso no carrinho e aviso no checkout */
.free-tag {
  display: inline-block; background: #DCF7E9; color: #0B6B41; font-weight: 800;
  font-size: 12px; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.ship-price s { color: var(--text-soft); font-weight: 500; margin-right: 4px; }
.ship-manual.free { background: #E9FBF2; color: #0B6B41; }

/* ---------- Guardar no Baú (checkout, Minha conta e pedido de retirada) ---------- */
.co-delivery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.co-delivery-opt {
  position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 14px; border: 2px solid var(--border); border-radius: 14px; background: var(--surface);
  transition: border-color .2s, background .2s, transform .2s;
}
.co-delivery-opt:hover { transform: translateY(-2px); }
.co-delivery-opt input { position: absolute; opacity: 0; pointer-events: none; }
.co-delivery-opt:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.co-delivery-opt.active { border-color: var(--gold-deep); background: rgba(255,210,31,.16); }
.co-delivery-ico { font-size: 26px; line-height: 1; }
.co-delivery-opt strong { display: block; font-size: 14px; }
.co-delivery-opt small { display: block; font-size: 12px; color: var(--text-soft); line-height: 1.3; }
.co-vault-info {
  background: linear-gradient(120deg, var(--ink), var(--ink-3)); color: #fff;
  border-radius: 14px; padding: 14px 16px; font-size: 13px; line-height: 1.5; margin-bottom: 6px;
}
.co-vault-info > strong { color: var(--gold); font-size: 14px; }
.co-vault-info ul { margin: 6px 0 0; padding-left: 18px; }
.co-vault-login { margin-top: 10px; background: rgba(255,255,255,.12); border-radius: 10px; padding: 9px 12px; }
.co-vault-info .link-btn { color: var(--gold); }

.vault-panel {
  margin: 16px 0 4px; padding: 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,210,31,.2), rgba(247,168,35,.1));
  border: 1px solid rgba(247,168,35,.4);
}
.vault-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vault-panel-head .ico { font-size: 30px; }
.vault-panel-head strong { display: block; font-family: 'Fredoka', sans-serif; font-size: 17px; font-weight: 600; }
.vault-panel-head small { color: var(--text-soft); font-size: 12px; line-height: 1.35; }
.vault-line {
  display: flex; align-items: center; gap: 10px; background: var(--surface);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; font-size: 13px;
}
label.vault-line:has(input) { cursor: pointer; }
.vault-line input { width: 18px; height: 18px; accent-color: var(--blue); flex-shrink: 0; }
.vault-dot { width: 18px; text-align: center; color: var(--text-soft); flex-shrink: 0; }
.vault-line-body { flex: 1; min-width: 0; }
.vault-line-body small { display: block; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; }
.vp-waiting { background: #FEF3C7; color: #92400E; }
.vp-stored { background: #DCFCE7; color: #15803D; }
.vp-requested { background: #DBEAFE; color: #1D4ED8; }
.vp-released { background: var(--paper); color: var(--text-soft); }
.vault-hint { font-size: 12px; color: var(--text-soft); margin: 8px 0 0; }
@media (max-width: 520px) { .co-delivery { grid-template-columns: 1fr; } }

/* retirada do Baú: cartão da conversa em "Meu Baú" e a conversa com a loja */
.vault-release-card {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: none; background: var(--ink); color: #fff; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; transition: transform .2s;
}
.vault-release-card:hover { transform: translateY(-2px); }
.vault-release-card .ico { font-size: 22px; }
.vault-release-text { flex: 1; min-width: 0; }
.vault-release-text strong { display: block; font-size: 14px; }
.vault-release-text small { color: #C9D6F5; font-size: 12px; }
.vault-unread { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.vault-open-link { color: var(--gold); font-size: 12.5px; font-weight: 700; white-space: nowrap; }

.vault-chat-box { width: 560px; }
.vc-summary { background: var(--paper); border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-bottom: 10px; }
.vc-summary p { margin: 0; color: var(--text-soft); }
.vc-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.vc-sum-row span { color: var(--text-soft); flex-shrink: 0; }
.vc-sum-row strong { text-align: right; }
.vc-total { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 8px; font-size: 14px; }
.vc-messages {
  height: min(44vh, 360px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 4px 2px 10px; overscroll-behavior: contain;
}
.vc-msg { display: flex; flex-direction: column; max-width: 84%; }
.vc-msg small { font-size: 10.5px; color: var(--text-soft); margin-top: 2px; }
.vc-bubble { padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.vc-customer { align-self: flex-end; align-items: flex-end; }
.vc-customer .vc-bubble { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.vc-admin { align-self: flex-start; }
.vc-admin .vc-bubble { background: var(--paper); border-bottom-left-radius: 4px; }
.vc-system { align-self: center; align-items: center; max-width: 94%; }
.vc-system .vc-bubble { background: rgba(255,210,31,.2); border: 1px solid rgba(247,168,35,.45); }
.vc-compose { display: flex; gap: 8px; align-items: flex-end; }
.vc-compose textarea { flex: 1; resize: none; }

/* login: botão "Continuar com o Google" + divisória "ou com e-mail" */
.google-slot { display: flex; justify-content: center; min-height: 44px; margin: 4px 0 12px; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--text-soft); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* resposta nova da loja no Baú: bolinha no botão da conta */
#account-btn { position: relative; }
#account-btn.has-unread::after {
  content: ''; position: absolute; top: 4px; left: 26px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 2px var(--ink); animation: vaultDot 1.6s ease-in-out infinite;
}
@keyframes vaultDot { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { #account-btn.has-unread::after { animation: none; } }
.free-ship { background: var(--paper); border-radius: 12px; padding: 11px 13px; margin-bottom: 12px; }
.free-ship-text { font-size: 13px; margin-bottom: 8px; }
.free-ship-bar { height: 8px; background: #E3E8F3; border-radius: 999px; overflow: hidden; }
.free-ship-bar span {
  display: block; height: 100%; width: var(--pct); border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--gold) 0 10px, var(--gold-deep) 10px 20px);
  background-size: 28px 28px;
  animation: fillBar .8s cubic-bezier(.22,1,.36,1), stripes 1s linear infinite;
}
.free-ship.done { background: #E9FBF2; }
.free-ship.done .free-ship-text { color: #0B6B41; }
.free-ship.done .free-ship-bar span { background: linear-gradient(90deg, var(--lime), #22C55E); animation: fillBar .8s cubic-bezier(.22,1,.36,1); }
@keyframes fillBar { from { width: 0; } }
@keyframes stripes { to { background-position: 28px 0; } }

@media (max-width: 560px) {
  .co-address .span-1, .co-address .span-2, .co-address .span-3, .co-address .span-4 { grid-column: span 3; }
  .co-address .span-4 { grid-column: span 6; }
}

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */
.testimonials { max-width: var(--wrap); margin: 10px auto 0; padding: 0 24px 64px; }
.testimonial-summary { display: flex; align-items: center; gap: 10px; margin: -8px 0 18px; color: var(--text-soft); font-size: 14px; }
.testimonial-summary strong { font-family: 'Fredoka', sans-serif; font-size: 24px; color: var(--text); }
.stars { color: #d7d6e6; letter-spacing: 2px; }
.stars .on { color: var(--gold); text-shadow: 0 0 10px rgba(255,210,31,.45); }
.stars.big { font-size: 20px; }
.testimonial-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 1fr); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; scrollbar-width: thin;
}
.testimonial-card {
  scroll-snap-align: start; position: relative; overflow: hidden;
  background: var(--surface); border-radius: 20px; padding: 26px 22px 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s;
  animation: cardIn .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.testimonial-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow-lg); }
.testimonial-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-brand); }
.tc-quote {
  position: absolute; top: -18px; right: 14px; font-family: 'Fredoka', serif; font-size: 110px; line-height: 1;
  color: rgba(37,99,235,.1); pointer-events: none;
}
.testimonial-card p { margin: 0; font-size: 14.5px; line-height: 1.6; flex: 1; white-space: pre-wrap; }
.testimonial-card footer { display: flex; align-items: center; gap: 10px; }
.tc-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--grad-hot); color: #2A1400;
  display: grid; place-items: center; font-weight: 800; font-family: 'Fredoka', sans-serif;
}
.testimonial-card footer strong { display: block; font-size: 13.5px; }
.testimonial-card footer small { color: var(--text-soft); font-size: 12px; }
.testimonial-empty {
  grid-column: 1/-1; background: var(--surface); border-radius: 20px; padding: 34px;
  text-align: center; color: var(--text-soft); box-shadow: var(--shadow-sm);
}
.testimonial-empty span { display: block; font-size: 40px; margin-bottom: 8px; }

.tm-intro { font-size: 13.5px; color: var(--text-soft); margin: 4px 0 14px; }
.star-input { display: flex; gap: 6px; }
.star-input button {
  background: none; border: none; font-size: 32px; line-height: 1; color: #d7d6e6; padding: 0;
  transition: transform .15s, color .15s;
}
.star-input button.on { color: var(--gold); text-shadow: 0 0 12px rgba(255,210,31,.5); }
.star-input button:hover { transform: scale(1.15); }
.star-input button.pop { animation: wishPop .4s cubic-bezier(.34,1.7,.64,1); }
.tm-counter { display: block; text-align: right; font-size: 11.5px; color: var(--text-soft); margin-top: 4px; }
.tm-subtitle { margin: 22px 0 10px; font-size: 15px; }
.tm-mine { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.tm-mine p { margin: 6px 0 4px; font-size: 13.5px; }
.tm-mine small { color: var(--text-soft); font-size: 12px; }
.tm-mine-head { display: flex; justify-content: space-between; align-items: center; }
.tm-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.tm-pending { background: #FFF3D6; color: #8A5A00; }
.tm-approved { background: #DCF7E9; color: #0B6B41; }
.tm-rejected { background: #F1F0F7; color: #6A6785; }

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in-view { opacity: 1; transform: none; }

[hidden] { display: none !important; }

/* ==========================================================================
   RODAPE: links de ajuda e WhatsApp
   ========================================================================== */
.footer-col li a { color: inherit; text-decoration: none; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: grid; place-items: center; text-decoration: none; transition: background .2s, transform .2s;
}
.socials a:hover { background: #25D366; transform: translateY(-3px); }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-wa { background: #25D366; color: #fff; box-shadow: 0 8px 22px rgba(37,211,102,.35); }

/* ==========================================================================
   PAGINAS DE AJUDA (/ajuda/<pagina>)
   ========================================================================== */
.help-page { display: none; }
body[data-page="help"] .help-page { display: block; }
body[data-page="help"] .home-only { display: none !important; }

.help-wrap { max-width: var(--wrap); margin: 0 auto; padding: 22px 24px 34px; }
.help-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }

.help-nav {
  position: sticky; top: 140px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 18px; box-shadow: var(--shadow-sm);
}
.help-nav h2 { font-size: 16px; margin: 0 0 10px; }
.help-nav ul { display: grid; gap: 4px; }
.help-nav a {
  display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px;
  transition: background .2s, transform .2s;
}
.help-nav a:hover { background: var(--paper); transform: translateX(3px); }
.help-nav a.active { background: var(--grad-hot); color: var(--ink); }
.help-wa {
  display: block; margin-top: 14px; padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, #25D366, #128C4A); color: #fff; text-decoration: none;
  transition: transform .2s;
}
.help-wa:hover { transform: translateY(-2px); }
.help-wa strong { display: block; font-family: 'Fredoka', sans-serif; font-size: 16px; }
.help-wa span { font-size: 12.5px; opacity: .92; }

.help-article {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  padding: 30px 34px; box-shadow: var(--shadow); line-height: 1.7;
}
.help-article h1 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 6px; }
.help-article h2 { font-size: 19px; margin: 26px 0 8px; }
.help-article p { margin: 0 0 12px; }
.help-article ul { list-style: disc; padding-left: 22px; margin: 0 0 12px; }
.help-article ul li { margin-bottom: 4px; }
.help-article a { color: var(--blue); font-weight: 600; }
.help-article .help-lead { font-size: 16px; color: var(--text-soft); margin-bottom: 20px; }
.help-steps { list-style: none; counter-reset: step; padding: 0; margin: 18px 0; display: grid; gap: 12px; }
.help-steps li { counter-increment: step; position: relative; padding: 14px 16px 14px 62px; background: var(--paper); border-radius: 16px; }
.help-steps li::before {
  content: counter(step); position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-hot); color: var(--ink); font-family: 'Fredoka', sans-serif; font-weight: 700;
  display: grid; place-items: center;
}
.help-steps strong { display: block; font-family: 'Fredoka', sans-serif; font-size: 16px; color: var(--text); }
.help-callout { padding: 14px 16px; border-radius: 14px; background: rgba(37,99,235,.08); margin: 12px 0; }
.help-callout-gold { background: rgba(255,210,31,.22); }
.help-article .help-wa-big {
  display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px; border-radius: 18px;
  background: #25D366; color: #fff; text-decoration: none; margin: 6px 0 14px;
  box-shadow: 0 12px 28px rgba(37,211,102,.35); transition: transform .2s;
}
.help-wa-big:hover { transform: translateY(-3px); }
.help-wa-big svg { width: 42px; height: 42px; color: #fff; flex-shrink: 0; }
.help-wa-big strong { display: block; font-family: 'Fredoka', sans-serif; font-size: 20px; line-height: 1.2; }
.help-wa-big small { font-size: 14px; opacity: .92; }
.help-article .help-more { margin-top: 24px; font-size: 14px; color: var(--text-soft); }

@media (max-width: 900px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-nav { position: static; }
  .help-article { padding: 22px 18px; }
}

/* ==========================================================================
   WHATSAPP FLUTUANTE
   ========================================================================== */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 115;
  display: flex; align-items: center; height: 56px; padding: 0 15px; border-radius: 999px;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 12px 30px rgba(18,140,74,.45);
  transition: bottom .3s, transform .2s;
}
.wa-float svg { width: 26px; height: 26px; flex-shrink: 0; }
.wa-float-label {
  max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 14px;
  transition: max-width .35s ease, margin .35s ease;
}
.wa-float:hover .wa-float-label, .wa-float.hint .wa-float-label { max-width: 170px; margin-left: 10px; }
.wa-float:hover { transform: translateY(-3px); }
.wa-float::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: #25D366; z-index: -1;
  animation: waPulse 2.6s ease-out infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.45); opacity: 0; } }
/* os avisos (toasts) sobem para nao ficar em cima do botao */
#toast-container { bottom: 92px; }

@media (max-width: 900px) {
  body.pp-bar-on .wa-float { bottom: 86px; }
}
@media (max-width: 560px) {
  .wa-float { right: 14px; bottom: 14px; height: 52px; padding: 0 13px; }
}

/* ==========================================================================
   PAGINA DE PRODUTO (/produto/<slug>)
   body[data-page] troca entre a pagina inicial e a do produto.
   ========================================================================== */
.product-page { display: none; }
body[data-page="product"] .product-page { display: block; }
body[data-page="product"] .home-only { display: none !important; }

/* card inteiro e um link de verdade; coracao e "+" ficam por cima dele */
.product-hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.product-hit:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.product-card .product-flags { pointer-events: none; }
.product-card .add-mini { position: relative; z-index: 3; }
a.suggestion { text-decoration: none; color: inherit; }

.pp-wrap { max-width: var(--wrap); margin: 0 auto; padding: 22px 24px 8px; }
.pp-enter { animation: ppIn .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes ppIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ppFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }

.pp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--text-soft); margin-bottom: 18px; }
.pp-crumbs a { color: var(--blue); font-weight: 600; text-decoration: none; }
.pp-crumbs a:hover { text-decoration: underline; }
.pp-crumbs [aria-current] { color: var(--text); font-weight: 600; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: start; }

/* --- galeria --- */
.pp-gallery { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-stage {
  position: relative; aspect-ratio: 1/1; border-radius: 26px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--art, var(--grad-cool)); box-shadow: var(--shadow-lg);
}
.pp-stage-media { position: absolute; inset: 0; display: grid; place-items: center; }
.pp-stage.has-photo { background: radial-gradient(circle at 50% 38%, #FFFFFF 0%, #EEF3FC 62%, #DCE5F6 100%); }
.pp-stage .product-photo { object-fit: contain; padding: 22px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.pp-stage.zoomable { cursor: zoom-in; }
.pp-stage.zooming .product-photo { transform: scale(2.1); }
.pp-stage.zooming .zoom-hint { opacity: 0; }
.pp-stage.is-video { aspect-ratio: 16/9; background: #000; }
.pp-stage .product-art-emoji { font-size: clamp(90px, 12vw, 140px); animation: ppFloat 4s ease-in-out infinite; }
.pp-stage .product-flags { z-index: 3; top: 16px; left: 16px; }
.pp-stage.is-sold .pp-stage-media { filter: grayscale(.85) opacity(.75); }
.pp-sold-stamp {
  position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg);
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(30px, 5vw, 52px);
  letter-spacing: .08em; text-transform: uppercase; color: var(--red);
  border: 5px solid var(--red); border-radius: 16px; padding: 4px 22px;
  background: rgba(255,255,255,.86); pointer-events: none;
}
.pp-arrow {
  position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -21px;
  border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--ink);
  font-size: 26px; line-height: 1; display: grid; place-items: center; box-shadow: var(--shadow);
  opacity: 0; transition: opacity .2s, transform .2s;
}
.pp-prev { left: 14px; }
.pp-next { right: 14px; }
.pp-stage:hover .pp-arrow, .pp-arrow:focus-visible { opacity: 1; }
.pp-arrow:hover { transform: scale(1.1); }
@media (hover: none) {
  .pp-arrow { opacity: 1; }
  .pp-stage .zoom-hint { display: none; }
}
.pp-thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }
.pp-thumbs .pm-thumb { width: 72px; height: 72px; flex-shrink: 0; border-radius: 14px; }

/* --- informacoes e compra --- */
.pp-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-cat { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); }
.pp-title { font-size: clamp(26px, 3.3vw, 38px); line-height: 1.12; }
.pp-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pp-pills .meta-pill { font-size: 12.5px; padding: 5px 12px; background: var(--surface); border: 1px solid var(--border); }
.pp-pills .meta-pill strong { color: var(--text); }

.pp-buybox {
  position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; padding: 24px 22px 20px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 13px;
}
.pp-buybox::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--grad-brand); }
.pp-price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-price { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: clamp(34px, 4vw, 44px); line-height: 1; }
.pp-badge { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--grad-hot); padding: 5px 11px; border-radius: 999px; }
.pp-sub { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--text-soft); }
.pp-free { color: #0B6B41; }
.pp-stock { font-size: 13.5px; font-weight: 600; padding: 10px 13px; border-radius: 12px; background: var(--paper); }
.pp-stock-low { background: rgba(227,38,43,.08); color: var(--red); }
.pp-stock-unique { background: rgba(255,210,31,.2); color: #7A5200; }
.pp-stock-sold, .pp-stock-out { color: var(--text-soft); }
.pp-qty { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.pp-qty small { font-weight: 500; }
.pp-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-buttons .btn { padding-top: 14px; padding-bottom: 14px; font-size: 15px; }
.pp-secondary { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-chip-btn {
  flex: 1 1 0; min-width: 110px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--paper);
  color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color .2s, background .2s, transform .2s;
}
.pp-chip-btn:hover { border-color: var(--blue); background: #fff; transform: translateY(-2px); }
.pp-wish.active { border-color: var(--red); color: var(--red); background: rgba(227,38,43,.06); }
.pp-wish.pop { animation: wishPop .45s cubic-bezier(.34,1.7,.64,1); }
.pp-whats:hover { border-color: #25D366; color: #128C4A; }

.pp-trust { display: grid; gap: 9px; }
.pp-trust li {
  display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 11px 14px; font-size: 13px; color: var(--text-soft);
}
.pp-trust strong { display: block; color: var(--text); font-size: 13.5px; }
.pp-trust-ico { font-size: 22px; }

/* --- descricao, detalhes e relacionados --- */
.pp-details { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 40px; }
.pp-desc, .pp-specs { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 24px; }
.pp-details h2 { font-size: 20px; margin-bottom: 12px; }
.pp-desc p { margin: 0; white-space: pre-line; line-height: 1.7; }
.pp-muted { color: var(--text-soft); }
.pp-specs dl { margin: 0; }
.pp-specs dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.pp-specs dl > div:last-child { border-bottom: none; }
.pp-specs dt { color: var(--text-soft); font-weight: 600; }
.pp-specs dd { margin: 0; font-weight: 600; text-align: right; }
.pp-related { margin-top: 46px; }
.pp-related ul { display: grid; gap: 6px; }
.pp-related li a { color: var(--blue); }

/* versao que vem do servidor: so aparece ate o JS montar a pagina completa */
.pp-ssr .pp-stage { background: var(--grad-cool); max-width: 560px; }

.pp-missing { text-align: center; padding: 70px 20px 40px; }
.pp-missing .big { font-size: 56px; display: block; margin-bottom: 8px; }
.pp-missing h1 { font-size: 28px; margin-bottom: 8px; }
.pp-missing p { color: var(--text-soft); margin: 0 0 20px; }

/* --- barra de compra fixa no celular --- */
.pp-mobile-bar { display: none; }

@media (max-width: 900px) {
  .pp-layout { grid-template-columns: 1fr; gap: 22px; }
  .pp-gallery { position: static; }
  .pp-details { grid-template-columns: 1fr; }
  .pp-mobile-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border); box-shadow: 0 -10px 30px rgba(10,23,64,.12);
    transform: translateY(110%); transition: transform .3s cubic-bezier(.22,1,.36,1);
  }
  .pp-mobile-bar.show { transform: none; }
  .pp-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .pp-bar-text small { font-size: 12px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-bar-text strong { font-family: 'Fredoka', sans-serif; font-size: 20px; line-height: 1.1; }
  .pp-bar-off { font-weight: 700; color: var(--text-soft); }
  body.pp-bar-on .back-to-top { bottom: 86px; }
}
@media (max-width: 560px) {
  .pp-wrap { padding: 16px 14px 6px; }
  .pp-buttons { grid-template-columns: 1fr; }
  .pp-stage { border-radius: 18px; }
  .pp-arrow { width: 36px; height: 36px; margin-top: -18px; }
}

/* ==========================================================================
   LOGIN: ESQUECI MINHA SENHA / REDEFINIR SENHA
   ========================================================================== */
.auth-forgot { text-align: right; margin: -6px 0 14px; }
.auth-back { margin-bottom: 12px; }
.auth-info { font-size: 13.5px; color: var(--text-soft); margin: 0 0 14px; line-height: 1.55; }
.auth-sent { text-align: center; padding: 6px 4px 2px; }
.auth-sent-ico { font-size: 52px; display: block; animation: ppFloat 3s ease-in-out infinite; }
.auth-sent h4 { font-size: 21px; margin: 6px 0 8px; }
.auth-sent p { font-size: 14px; color: var(--text-soft); margin: 0 0 18px; line-height: 1.55; }
.auth-sent p strong { color: var(--text); word-break: break-all; }
.pass-field { position: relative; }
.pass-field .form-control { padding-right: 78px; }
.pass-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: none; font-size: 12px; font-weight: 700; color: var(--blue); padding: 6px 8px;
}
.pass-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.pass-meter span { height: 5px; border-radius: 999px; background: var(--border); transition: background .25s; }
.pass-meter[data-level="1"] span:nth-child(1) { background: var(--red); }
.pass-meter[data-level="2"] span:nth-child(-n+2) { background: var(--gold-deep); }
.pass-meter[data-level="3"] span { background: var(--lime); }

/* ==========================================================================
   NEWSLETTER: consentimento e confirmacao
   ========================================================================== */
.newsletter-side { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.newsletter .newsletter-consent { font-size: 11.5px; line-height: 1.5; color: var(--text-on-dark-soft); }
.newsletter .newsletter-consent .link-btn { color: var(--gold); font-size: inherit; }
.newsletter-form.shake { animation: nlShake .42s ease; }
@keyframes nlShake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.newsletter-done {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,210,31,.5);
  animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.newsletter-done-ico { font-size: 32px; animation: ppFloat 2.4s ease-in-out infinite; }
.newsletter-done strong { display: block; font-family: 'Fredoka', sans-serif; font-size: 19px; color: #fff; }
.newsletter-done small { color: var(--text-on-dark-soft); font-size: 13px; }
@media (max-width: 560px) { .newsletter-form { flex-direction: column; } }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1080px) {
  .header-inner { grid-template-columns: auto 1fr; gap: 14px; }
  .searchbar { order: 3; grid-column: 1/-1; max-width: none; }
  .header-actions { justify-content: flex-end; }
  .hero-slide { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: 1fr; }
  .newsletter-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .pm-grid { grid-template-columns: 1fr; }
  .pm-art { aspect-ratio: 16/9; }
}

@media (max-width: 860px) {
  .catalog-body { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; display: none; }
  .filters.open { display: block; }
  .filters-toggle { display: block; }
  .icon-action-label { display: none; }
  .icon-action { padding: 10px; }
  .hero-slides { padding: 40px 46px; }
}

@media (max-width: 560px) {
  /* as setas ficavam por cima do texto do hero — no celular os pontos bastam */
  .hero-arrow { display: none; }
  .hero-slides { padding: 36px 22px 52px; }
  .trust-strip { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .search-scope { display: none; }
}

/* ==========================================================================
   ACESSIBILIDADE — respeita quem pediu menos movimento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}