/* ============================================================
   BOOKVERSE — TEMA CÓSMICO ROXO · LAYOUT ESTILO NETFLIX
   MOBILE-FIRST: tudo é desenhado primeiro para o celular,
   e refinado para telas maiores com @media (min-width).

   Estrutura:
   - Barra superior fixa (busca expansível no mobile)
   - Hero/billboard com scroll-snap (swipe nativo no celular)
   - Fileiras (carrosséis) horizontais por categoria
   - Modal de detalhes + pedido via Instagram
   ============================================================ */

:root {
  /* roxos do espaço */
  --noite-profunda: #0a0524;
  --noite: #14093a;
  --indigo: #1f1466;
  --indigo-claro: #2e1f8a;
  --violeta: #4a2bb5;
  --lavanda: #b89eff;
  --lavanda-clara: #d8caff;

  /* acentos estelares */
  --estrela: #ffd966;
  --estrela-clara: #fff3a8;
  --aurora-rosa: #ff7ad9;
  --aurora-ciano: #7adfff;

  /* texto */
  --texto-claro: #f3edff;
  --texto-suave: rgba(243, 237, 255, 0.78);
  --texto-discreto: rgba(243, 237, 255, 0.55);

  /* utilitários */
  --vidro: rgba(30, 18, 80, 0.5);
  --vidro-borda: rgba(184, 158, 255, 0.25);
  --brilho-livro: 0 14px 28px rgba(0,0,0,.55), 0 4px 10px rgba(74,43,181,.35);

  --raio: 10px;
  --alvo-toque: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* largura dos cards nas fileiras (peek de ~2,3 cards no celular) */
  --card-largura: clamp(122px, 40vw, 150px);
}

/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; color: inherit; border: 0; background: none; }
a { color: inherit; }
input { font: inherit; }

/* Sem caixa azul/cinza ao tocar ou clicar em botões/links (mobile e desktop) */
button, a, summary, label, [role="button"], input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}
/* Remove o contorno ao clicar/tocar, mantendo-o só para navegação por teclado */
:focus:not(:focus-visible) { outline: none; }

/* Foco visível e consistente (acessibilidade via teclado) */
:focus-visible {
  outline: 2px solid var(--estrela);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   FUNDO CÓSMICO
   ============================================================ */
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--texto-claro);
  min-height: 100vh;
  background-color: var(--noite);
  background-image:
    radial-gradient(ellipse 800px 500px at 90% -10%, rgba(255,122,217,.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 5% 110%, rgba(122,223,255,.12), transparent 60%),
    linear-gradient(180deg, var(--noite-profunda) 0%, var(--noite) 35%, var(--indigo) 100%);
  background-attachment: fixed;
  line-height: 1.5;
  overscroll-behavior-y: none;
  position: relative;
}

/* Estrelas (duas camadas que cintilam) */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body::before {
  background-image:
    radial-gradient(1.8px 1.8px at 12% 18%, var(--estrela), transparent 55%),
    radial-gradient(2.3px 2.3px at 78% 8%,  var(--estrela), transparent 55%),
    radial-gradient(1.8px 1.8px at 42% 88%, var(--estrela-clara), transparent 55%),
    radial-gradient(1.3px 1.3px at 25% 50%, #fff, transparent 55%),
    radial-gradient(1.3px 1.3px at 60% 35%, #fff, transparent 55%),
    radial-gradient(1.3px 1.3px at 88% 62%, #fff, transparent 55%),
    radial-gradient(1.3px 1.3px at 33% 73%, #fff, transparent 55%),
    radial-gradient(1.3px 1.3px at 7%  82%, #fff, transparent 55%),
    radial-gradient(1.3px 1.3px at 95% 28%, #fff, transparent 55%),
    radial-gradient(1.3px 1.3px at 53% 60%, #fff, transparent 55%),
    radial-gradient(1.3px 1.3px at 70% 78%, #fff, transparent 55%),
    radial-gradient(.8px .8px at 18% 30%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(.8px .8px at 50% 12%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(.8px .8px at 67% 95%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(.8px .8px at 82% 45%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(.8px .8px at 3%  62%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(.8px .8px at 38% 5%,  rgba(255,255,255,.75), transparent 55%);
  background-size: 440px 440px;
  background-repeat: repeat;
  animation: cintilar 4s ease-in-out infinite alternate;
}
body::after {
  background-image:
    radial-gradient(1.3px 1.3px at 20% 22%, #fff, transparent 55%),
    radial-gradient(1.3px 1.3px at 55% 80%, #fff, transparent 55%),
    radial-gradient(1px 1px at 75% 40%, var(--lavanda-clara), transparent 55%),
    radial-gradient(1px 1px at 40% 60%, #fff, transparent 55%),
    radial-gradient(1px 1px at 88% 15%, #fff, transparent 55%),
    radial-gradient(.8px .8px at 10% 45%, #fff, transparent 55%);
  background-size: 320px 320px;
  background-repeat: repeat;
  opacity: .85;
  animation: cintilar 5.5s ease-in-out infinite alternate-reverse;
}
@keyframes cintilar { from { opacity: .6; } to { opacity: 1; } }

/* Meteoros que cruzam o fundo do site de vez em quando */
.ceu-global {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.meteoro {
  position: absolute;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, #fff 0%, rgba(216,202,255,.6) 30%, rgba(255,255,255,0) 80%);
  border-radius: 99px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.85));
  opacity: 0;
  will-change: transform, opacity;
}
.meteoro::after {
  content: "";
  position: absolute;
  left: -3px; top: 50%;
  margin-top: -3.5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(255,255,255,.9), 0 0 5px 1px var(--estrela-clara);
}
.meteoro-1 { top: 6%;  right: -180px; animation: meteoro 11s ease-in 2s  infinite; }
.meteoro-2 { top: 26%; right: -180px; animation: meteoro 15s ease-in 7s  infinite; }
.meteoro-3 { top: 50%; right: -180px; animation: meteoro 19s ease-in 12s infinite; }
/* A direção do deslocamento (dx:dy) bate com o ângulo do risco (-22deg):
   dy/dx = tan(22°) ≈ 0,40 → 52vw / 130vw. Usar vw nos dois eixos mantém
   o ângulo igual em qualquer tela, então o rastro segue reto (sem "drift"). */
@keyframes meteoro {
  0%   { transform: translate(0, 0) rotate(-22deg); opacity: 0; }
  4%   { opacity: 1; }
  12%  { opacity: 1; }
  17%  { transform: translate(-130vw, 52vw) rotate(-22deg); opacity: 0; }
  100% { transform: translate(-130vw, 52vw) rotate(-22deg); opacity: 0; }
}

.topbar, .hero, main, .rodape, .modal { position: relative; z-index: 1; }

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: var(--safe-top);
  background: linear-gradient(180deg, rgba(10, 5, 36, .96) 0%, rgba(10, 5, 36, .6) 70%, transparent 100%);
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.topbar.rolado {
  background: rgba(8, 4, 26, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 22px rgba(0, 0, 0, .5);
  border-bottom: 1px solid rgba(184, 158, 255, .12);
}
.topbar-linha {
  max-width: 1320px;
  margin: 0 auto;
  min-height: 58px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Marca */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
  -webkit-tap-highlight-color: transparent;
}
.marca-logo-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.marca-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(184,158,255,.5));
}
.marca-logo.logo-erro { display: none; }
/* (emoji de fantasma removido — aparecia deslocado atrás da logo) */
.marca-textos { display: flex; flex-direction: column; min-width: 0; }
.marca-nome {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.05;
  letter-spacing: .3px;
  color: var(--texto-claro);
  text-shadow: 0 0 16px rgba(184, 158, 255, .5);
  white-space: nowrap;
}
.marca-nome::after {
  content: "✦";
  margin-left: 5px;
  font-size: .58em;
  color: var(--estrela);
  vertical-align: super;
  text-shadow: 0 0 10px rgba(255, 217, 102, .6);
}
/* Localização — discreta, logo abaixo do nome, visível ao abrir o site */
.marca-local {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--texto-discreto);
  white-space: nowrap;
}
.marca-local svg { color: var(--lavanda); opacity: .9; flex-shrink: 0; }

/* Busca inline (desktop) — escondida no mobile.
   Seletor com duas classes p/ vencer .campo-busca-wrap{display:flex}. */
.campo-busca-wrap.busca-desktop { display: none; }

.topbar-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Botão de ícone (busca no mobile) */
.btn-icon {
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-claro);
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .12s ease;
}
.btn-icon:active { transform: scale(.92); background: rgba(74,43,181,.5); }

/* Instagram — botão circular no mobile, vira pílula com texto no desktop */
.link-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  border-radius: 50%;
  background: linear-gradient(135deg, #f09433, #dc2743 45%, #bc1888);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .85rem;
  box-shadow: 0 0 16px rgba(220, 39, 67, .4), 0 4px 10px rgba(0,0,0,.4);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .15s ease;
}
.link-instagram:active { transform: scale(.93); }
.ig-label { display: none; }

/* Linha de busca que surge no topo (mobile).
   Fica em position:absolute (não empurra o conteúdo) e anima com
   transform/opacity — fluido, sem o "travamento" do max-height. */
.topbar-busca-mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 12px;
  background: linear-gradient(180deg, rgba(8, 4, 26, .97), rgba(8, 4, 26, .86));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(184, 158, 255, .12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  transform: translateY(-14px);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
}
.topbar-busca-mobile.aberta {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.btn-cancelar {
  color: var(--lavanda-clara);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 4px;
  flex-shrink: 0;
}

/* Campo de busca (compartilhado) */
.campo-busca-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.icone-busca {
  position: absolute;
  left: 14px;
  color: var(--lavanda);
  pointer-events: none;
  opacity: .9;
}
.campo-busca {
  width: 100%;
  padding: 11px 16px 11px 40px;
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  background: var(--vidro);
  font-size: 16px; /* >=16px evita zoom no iOS */
  color: var(--texto-claro);
  outline: none;
  min-height: var(--alvo-toque);
  -webkit-appearance: none;
  appearance: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.campo-busca::placeholder { color: var(--texto-discreto); }
.campo-busca::-webkit-search-cancel-button { -webkit-appearance: none; }
.campo-busca:focus {
  border-color: var(--lavanda);
  box-shadow: 0 0 0 3px rgba(184, 158, 255, .22), 0 0 18px rgba(184, 158, 255, .2);
}

/* ============================================================
   HERO / CARROSSEL DE NOVIDADES  (scroll-snap nativo)
   Vitrine "livro em destaque": a capa é a estrela.
   Esta é a ÚNICA seção de novidades (não há fileira duplicada).
   ============================================================ */
.hero {
  max-width: 1320px;
  margin: 14px auto 8px;
  padding: 0 14px;
}
.hero[hidden] { display: none; }

/* Cabeçalho da seção de novidades — propositalmente mais imponente
   que os títulos das fileiras comuns (é a vitrine principal). */
.hero-cabecalho { padding: 4px 6px 14px; text-align: center; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--aurora-rosa);
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "✦";
  color: var(--estrela);
  font-size: .95em;
  text-shadow: 0 0 10px rgba(255, 217, 102, .7);
}
.hero-titulo-secao {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: clamp(1.85rem, 8vw, 2.8rem);
  line-height: 1.04;
  margin: 6px 0 0;
  color: var(--estrela-clara);            /* fallback */
  background: linear-gradient(100deg, var(--estrela) 0%, #fff 45%, var(--lavanda-clara) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(184, 158, 255, .45));
}

/* Vitrine = moldura que clipa o céu e os slides */
.hero-vitrine {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  /* borda fina + brilho lavanda discreto, só para separar do fundo do site */
  box-shadow:
    inset 0 0 0 1px rgba(184, 158, 255, .32),
    0 0 0 1px rgba(184, 158, 255, .12),
    0 0 30px rgba(184, 158, 255, .20),
    0 24px 60px rgba(0, 0, 0, .55);
}

/* Céu estrelado do hero — PROTAGONISTA: estrelas grandes, espalhadas,
   brilhando e pulsando, para a seção de novidades chamar atenção.
   Fica atrás dos slides e NÃO rola com o swipe. */
.hero-ceu {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #0a0628;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(ellipse 85% 70% at 50% -14%, rgba(74,43,181,.55), transparent 60%),
    radial-gradient(ellipse 70% 90% at 90% 118%, rgba(255,122,217,.16), transparent 62%),
    radial-gradient(2.4px 2.4px at 12% 22%, #fff, transparent 55%),
    radial-gradient(2.4px 2.4px at 80% 16%, var(--estrela), transparent 55%),
    radial-gradient(2.2px 2.2px at 64% 74%, #fff, transparent 55%),
    radial-gradient(2.2px 2.2px at 26% 80%, var(--estrela-clara), transparent 55%),
    radial-gradient(2px 2px at 45% 33%, #fff, transparent 55%),
    radial-gradient(2px 2px at 92% 58%, var(--estrela), transparent 55%),
    radial-gradient(1.8px 1.8px at 33% 55%, #fff, transparent 55%),
    radial-gradient(1.8px 1.8px at 72% 40%, #fff, transparent 55%),
    radial-gradient(1.6px 1.6px at 15% 60%, #fff, transparent 55%),
    radial-gradient(1.6px 1.6px at 56% 90%, #fff, transparent 55%),
    radial-gradient(1.4px 1.4px at 6% 38%, rgba(255,255,255,.95), transparent 55%),
    radial-gradient(1.4px 1.4px at 40% 12%, rgba(255,255,255,.95), transparent 55%),
    radial-gradient(1.4px 1.4px at 86% 82%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(1.4px 1.4px at 97% 30%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(1.2px 1.2px at 50% 6%, rgba(255,255,255,.85), transparent 55%);
}
/* duas camadas de estrelas que pulsam (twinkle) em ritmos diferentes */
.hero-ceu::before,
.hero-ceu::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.hero-ceu::before {
  background-image:
    radial-gradient(1.8px 1.8px at 20% 30%, #fff, transparent 55%),
    radial-gradient(1.8px 1.8px at 60% 24%, var(--estrela-clara), transparent 55%),
    radial-gradient(1.8px 1.8px at 85% 66%, #fff, transparent 55%),
    radial-gradient(1.8px 1.8px at 35% 76%, #fff, transparent 55%),
    radial-gradient(1.8px 1.8px at 50% 50%, #fff, transparent 55%),
    radial-gradient(1.6px 1.6px at 10% 50%, #fff, transparent 55%);
  animation: pulsarCeu 3.6s ease-in-out infinite alternate;
}
.hero-ceu::after {
  background-image:
    radial-gradient(1.6px 1.6px at 28% 14%, #fff, transparent 55%),
    radial-gradient(1.6px 1.6px at 74% 30%, #fff, transparent 55%),
    radial-gradient(1.6px 1.6px at 90% 48%, var(--estrela), transparent 55%),
    radial-gradient(1.6px 1.6px at 48% 86%, #fff, transparent 55%),
    radial-gradient(1.6px 1.6px at 18% 88%, #fff, transparent 55%);
  animation: pulsarCeu 2.7s ease-in-out .6s infinite alternate;
}
@keyframes pulsarCeu { from { opacity: .35; } to { opacity: 1; } }

/* Estrelas grandes que brilham e pulsam (focos de atenção) */
.estrela-brilho {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px 2px rgba(255,255,255,.95), 0 0 18px 5px rgba(255,217,102,.5);
  animation: pulsarEstrela 3.2s ease-in-out infinite;
  pointer-events: none;
}
/* raios em cruz que cintilam junto */
.estrela-brilho::before,
.estrela-brilho::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.estrela-brilho::before { width: 1px; height: 24px; background: linear-gradient(transparent, rgba(255,255,255,.75), transparent); }
.estrela-brilho::after  { width: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); }
.estrela-brilho.e1 { top: 16%; left: 14%; animation-delay: 0s; }
.estrela-brilho.e2 { top: 23%; left: 84%; width: 6px; height: 6px; animation-delay: .8s; }
.estrela-brilho.e3 { top: 68%; left: 22%; width: 4px; height: 4px; animation-delay: 1.6s; }
.estrela-brilho.e4 { top: 80%; left: 78%; animation-delay: .4s; }
.estrela-brilho.e5 { top: 40%; left: 62%; width: 4px; height: 4px; animation-delay: 2.1s; }
.estrela-brilho.e6 { top: 11%; left: 52%; width: 6px; height: 6px; animation-delay: 1.2s; }
.estrela-brilho.e7 { top: 58%; left: 93%; width: 4px; height: 4px; animation-delay: 2.6s; }
@keyframes pulsarEstrela {
  0%, 100% { transform: scale(.6);  opacity: .5; }
  50%      { transform: scale(1.3); opacity: 1; }
}

/* Janela = clipa e habilita o swipe horizontal com snap */
.hero-janela {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-janela::-webkit-scrollbar { display: none; }

/* Palco = grid de colunas, cada slide = 100% da janela */
.hero-palco {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}

.hero-slide {
  position: relative;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  min-height: 348px;
  display: flex;
}

/* Mobile-first: coluna centralizada, capa em primeiro plano */
.hero-conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 18px 20px;
  width: 100%;
}
.hero-capa-wrap {
  width: clamp(124px, 36vw, 168px);
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 28px 52px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.1),
    0 0 44px rgba(184,158,255,.3);
  cursor: pointer;
  transition: transform .25s ease;
}
.hero-capa-wrap img { width: 100%; height: 100%; object-fit: cover; }
.hero-capa-wrap .capa-fallback { font-size: 2.4rem; }

.hero-texto { min-width: 0; width: 100%; max-width: 540px; }
.hero-livro-titulo {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 5.8vw, 2.1rem);
  line-height: 1.12;
  margin: 0 0 4px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-livro-autor {
  margin: 0 0 10px;
  font-style: italic;
  color: var(--lavanda-clara);
  font-size: .9rem;
}
/* Sinopse no hero: escondida no mobile, aparece só no desktop (mais "cheio") */
.hero-livro-sinopse { display: none; }
.hero-acoes { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.hero-preco {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--estrela-clara);
  text-shadow: 0 0 10px rgba(255, 217, 102, .4);
}
.hero-btn {
  padding: 11px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--violeta), var(--indigo-claro));
  box-shadow: 0 6px 18px rgba(74, 43, 181, .5);
  transition: transform .12s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.hero-btn:active { transform: translateY(2px) scale(.98); }

/* Navegação do hero */
.hero-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.hero-seta {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--vidro-borda);
  background: var(--vidro);
  color: var(--texto-claro);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s ease, transform .12s ease;
}
.hero-seta:active { transform: scale(.9); }
/* Indicador: bolinhas; a ativa vira uma pílula dourada (acompanha o swipe) */
.hero-pontos { display: flex; gap: 8px; align-items: center; justify-content: center; }
.hero-ponto {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  background: rgba(184, 158, 255, .35);
  transition: width .25s ease, background .25s ease;
}
.hero-ponto.ativo {
  width: 26px;
  background: linear-gradient(90deg, var(--estrela), var(--estrela-clara));
}

/* ============================================================
   FILEIRAS (carrosséis)
   ============================================================ */
main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 0 calc(46px + var(--safe-bottom));
}
.fileira { margin: 22px 0; }

.fileira-cabecalho {
  display: flex;
  flex-direction: column;   /* etiqueta ACIMA do título */
  gap: 3px;
  padding: 0 16px;
  margin-bottom: 12px;
}
.fileira-etiqueta {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--aurora-rosa);
}
.fileira-titulo {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 5.4vw, 1.6rem);
  margin: 0;
  line-height: 1.15;
  color: var(--texto-claro);
  text-shadow: 0 0 14px rgba(184, 158, 255, .3);
}
.fileira-titulo::before {
  content: "✦";
  color: var(--estrela);
  font-size: .68em;
  margin-right: 8px;
  text-shadow: 0 0 10px rgba(255, 217, 102, .6);
}

/* Fileira de novidades — moldura sutil de destaque */
.fileira-novidades {
  padding: 16px 0 18px;
  border-radius: 18px;
  margin: 22px 8px;
  background:
    radial-gradient(ellipse 460px 180px at 90% -20%, rgba(255, 122, 217, .14), transparent 62%),
    linear-gradient(160deg, rgba(46, 31, 138, .3), rgba(20, 9, 58, .3));
  border: 1px solid rgba(255, 122, 217, .2);
}

.fileira-area { position: relative; }
.fileira-trilho {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 16px 12px;
}
.fileira-trilho::-webkit-scrollbar { display: none; }

/* Setas das fileiras — só desktop (no mobile usa-se o swipe).
   Faixa que escurece a borda e some (fica transparente) em direção ao
   centro, com o chevron. Sem border-radius e sem recuos no topo/base:
   era isso que deixava aquele "recorte branco" na quina de cima. */
.fileira-seta {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .25s ease;
}
.fileira-seta-esq { left: 0;  background: linear-gradient(90deg,  rgba(10, 5, 36, .92), transparent); }
.fileira-seta-dir { right: 0; background: linear-gradient(270deg, rgba(10, 5, 36, .92), transparent); }
.fileira-seta.oculta { opacity: 0 !important; pointer-events: none; }

/* ============================================================
   CARD DE LIVRO
   ============================================================ */
.card-livro {
  position: relative;
  flex: 0 0 var(--card-largura);
  width: var(--card-largura);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  animation: surgir .5s ease both;
  animation-delay: var(--atraso, 0s);
  -webkit-tap-highlight-color: transparent;
  /* "ir e voltar": curva com leve overshoot dá vida ao destaque */
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.capa {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--indigo);
  box-shadow: var(--brilho-livro);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-livro:active .capa { transform: scale(.96); }
.capa img { width: 100%; height: 100%; object-fit: cover; }

/* Overlay "Ver detalhes" no rodapé da capa */
.capa-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 8px 8px;
  display: flex;
  justify-content: center;
  background: linear-gradient(0deg, rgba(8,4,26,.9), transparent);
  opacity: 0;
  transition: opacity .2s ease;
}
.overlay-ver {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .4px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* Capa fallback */
.capa-fallback {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 12vw, 3.6rem);
  text-shadow: 0 0 14px rgba(255, 255, 255, .35), 0 2px 4px rgba(0,0,0,.5);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.2), transparent 55%),
    linear-gradient(135deg, var(--violeta), var(--noite));
  position: relative;
}
.capa-fallback::before {
  content: "✦";
  position: absolute;
  top: 14%; right: 14%;
  font-size: 1.2rem;
  color: var(--estrela);
  text-shadow: 0 0 8px rgba(255, 217, 102, .8);
  opacity: .8;
}
.capa-fallback.var-musgo { background: linear-gradient(135deg, var(--indigo-claro), #0a1f3a); }
.capa-fallback.var-ambar { background: linear-gradient(135deg, #8d3aa8, #4a2bb5); }
.capa-fallback.var-tinta { background: linear-gradient(135deg, #1c0f4d, #060217); }

/* ----- Selo de novidade -----
   Aparece só nos lançamentos (raro). Discreto: vidro escuro com um aro
   dourado fino — combina com a estrela da marca e não rouba a cena. */
.selo { display: none; }   /* "disponivel"/"esgotado" não viram etiqueta */

.selo.novo,
.selo.ultimo {
  display: flex;
  position: absolute;
  top: 8px; left: 8px;
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--estrela-clara);
  background: rgba(8, 4, 26, .55);
  border: 1px solid rgba(255, 217, 102, .55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .4);
  z-index: 2;
  transform: rotate(-5deg);
}
.selo.ultimo { transform: rotate(5deg); }
/* leve variação de ângulo por posição: parecem colados à mão */
.card-livro:nth-child(3n+1) .selo.novo,
.card-livro:nth-child(3n+1) .selo.ultimo { transform: rotate(-6deg); }
.card-livro:nth-child(3n+2) .selo.novo,
.card-livro:nth-child(3n+2) .selo.ultimo { transform: rotate(4deg); }
.card-livro:nth-child(3n)   .selo.novo,
.card-livro:nth-child(3n)   .selo.ultimo { transform: rotate(-2deg); }

/* Texto do card */
.info-livro { padding: 11px 2px 2px; text-align: center; }
.info-titulo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .9rem;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--texto-claro);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.info-autor {
  margin: 0;
  font-size: .74rem;
  color: var(--lavanda);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-preco {
  margin: 6px 0 0;
  font-weight: 700;
  font-size: .9rem;
  color: var(--estrela-clara);
  text-shadow: 0 0 8px rgba(255, 217, 102, .35);
}

/* ============================================================
   GRADE DE RESULTADOS (modo busca)
   ============================================================ */
.fileira-grade .grade-livros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 14px;
  padding: 6px 16px 12px;
}
.fileira-grade .card-livro { flex: initial; width: auto; }

/* Estado vazio — a mascote entra em cena com um bilhete à mão */
.sem-resultados {
  text-align: center;
  color: var(--texto-suave);
  margin: 44px auto;
  max-width: 320px;
  padding: 0 24px;
}
.sem-resultados[hidden] { display: none; }
.sem-resultados img {
  width: 116px;
  height: auto;
  margin: 0 auto 8px;
  opacity: .92;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45));
}
.sem-resultados .fala {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--lavanda-clara);
  text-shadow: 0 0 16px rgba(184, 158, 255, .3);
}
.sem-resultados .dica {
  margin: 6px 0 0;
  font-size: .9rem;
  color: var(--texto-discreto);
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape {
  padding: 26px 16px calc(30px + var(--safe-bottom));
  text-align: center;
  font-size: .82rem;
  color: var(--texto-suave);
  border-top: 1px solid rgba(184, 158, 255, .1);
  background: linear-gradient(180deg, transparent, rgba(10, 5, 36, .6));
}
.rodape p { margin: 4px 0; }
.rodape-sub { color: var(--lavanda); font-style: italic; }

/* ============================================================
   MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal-fundo {
  position: absolute; inset: 0;
  background: rgba(5, 2, 15, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: surgirFundo .25s ease both;
}
.modal-caixa {
  position: relative;
  background:
    radial-gradient(ellipse 600px 200px at 50% 0%, rgba(184, 158, 255, .15), transparent 70%),
    linear-gradient(180deg, var(--indigo), var(--noite));
  color: var(--texto-claro);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(184, 158, 255, .2);
  animation: subir .3s ease both;
  overflow: hidden;
}
.modal-puxador {
  display: block;
  margin: 8px auto 4px;
  width: 44px; height: 5px;
  border-radius: 99px;
  background: rgba(184, 158, 255, .35);
  padding: 0;
  flex-shrink: 0;
}
.modal-fechar {
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--texto-claro);
  font-size: 1.6rem;
  line-height: 1;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 5, 36, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(184, 158, 255, .2);
  -webkit-tap-highlight-color: transparent;
}
.modal-fechar:active { background: rgba(74, 43, 181, .6); }
.modal-rolavel { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; padding-bottom: 8px; }

/* MOBILE-FIRST: capa compacta no topo; PREÇO/ESTADO logo após o autor
   (acima da dobra), e a sinopse por último — assim o que importa para
   comprar aparece de cara e a sinopse cortada deixa claro que há mais. */
.modal-conteudo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 22px 22px;
}
.modal-capa {
  width: 110px;
  align-self: center;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--brilho-livro);
  background: var(--indigo);
}
.modal-capa img { width: 100%; height: 100%; object-fit: cover; }
.modal-capa .capa-fallback { font-size: 2.2rem; }
.modal-info { min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.modal-info h2 {
  order: 1;
  font-family: 'Playfair Display', Georgia, serif;
  margin: 0; font-size: 1.4rem; line-height: 1.2;
  color: var(--texto-claro); text-align: center;
}
.modal-autor { order: 2; font-style: italic; margin: -6px 0 0; color: var(--lavanda); font-size: .96rem; text-align: center; }
.modal-detalhes { order: 3; }
/* Sinopse logo após o preço: o começo aparece e o fim é cortado pela
   dobra (com o fade do rodapé), sinalizando que há mais para rolar. */
.modal-sinopse {
  order: 4;
  margin: 0;
  color: var(--texto-suave);
  font-size: 1.0rem;
  line-height: 1.6;
  text-align: left;
}
.modal-promo { order: 5; }
/* Lista de detalhes vira cartão com linhas "rótulo | valor". */
.modal-detalhes {
  list-style: none; padding: 14px 16px; margin: 0;
  display: grid; gap: 12px; font-size: .95rem; color: var(--texto-suave);
  background: rgba(10, 5, 36, .4);
  border: 1px solid rgba(184, 158, 255, .15);
  border-radius: 14px;
}
.modal-detalhes li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.modal-detalhes li + li { border-top: 1px solid rgba(184, 158, 255, .1); padding-top: 12px; }
.modal-detalhes strong {
  color: var(--texto-discreto); font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .6px;
}
.badge-destaque {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2b1d10;
  background: linear-gradient(135deg, var(--estrela-clara), var(--estrela));
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.badge-preco { font-size: 1.02rem; box-shadow: 0 0 14px rgba(255, 217, 102, .4), 0 2px 6px rgba(0,0,0,.35); }
.modal-rodape {
  position: relative;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: rgba(10, 5, 36, .7);
  border-top: 1px solid rgba(184, 158, 255, .15);
  flex-shrink: 0;
}
/* Fade acima do rodapé: deixa claro que o conteúdo continua ao rolar. */
.modal-rodape::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -28px;
  height: 28px;
  background: linear-gradient(to top, var(--noite), transparent);
  pointer-events: none;
}
.botao-instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 22px;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 0 22px rgba(220, 39, 67, .4), 0 6px 14px rgba(0,0,0,.45);
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.botao-instagram:active { transform: translateY(2px); }
.botao-instagram.desativado { background: rgba(100, 100, 120, .6); color: #ddd; pointer-events: none; filter: grayscale(.4); box-shadow: none; }

/* ============================================================
   ANIMAÇÕES
   ============================================================ */
@keyframes surgir     { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes surgirFundo{ from { opacity: 0; } to { opacity: 1; } }
@keyframes subir      { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes surgirCaixa{ from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .hero-janela { scroll-behavior: auto; }
}

/* ============================================================
   TELAS MAIORES
   ============================================================ */
@media (min-width: 480px) {
  :root { --card-largura: clamp(140px, 30vw, 156px); }
  .marca-nome { font-size: 1.6rem; }
}

@media (min-width: 720px) {
  :root { --card-largura: 168px; }

  /* No desktop: busca inline na barra, Instagram com texto */
  .campo-busca-wrap.busca-desktop { display: flex; max-width: 340px; margin-left: 12px; }
  .btn-busca-toggle { display: none; }
  .topbar-busca-mobile { display: none; }
  .marca { margin-right: 14px; }
  .topbar-acoes { margin-left: auto; }
  .link-instagram {
    width: auto;
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
  }
  .ig-label { display: inline; }

  /* Desktop: vitrine horizontal — capa à esquerda, texto à direita */
  .hero { margin-top: 18px; }
  .hero-slide { min-height: 320px; }
  .hero-conteudo {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 40px;
    padding: 30px 48px;
  }
  .hero-capa-wrap { width: 196px; flex-shrink: 0; }
  .hero-texto { max-width: 60ch; }
  .hero-livro-sinopse {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 16px;
    max-width: 56ch;
    color: var(--texto-suave);
    font-size: .95rem;
    line-height: 1.5;
  }
  .hero-acoes { justify-content: flex-start; }

  .fileira-cabecalho { padding: 0 24px; }
  .fileira-trilho { padding-left: 24px; padding-right: 24px; scroll-padding-left: 24px; }
  .fileira-grade .grade-livros { grid-template-columns: repeat(4, 1fr); padding: 6px 24px 12px; }

  /* Setas das fileiras visíveis no hover */
  .fileira-seta { display: flex; }
  .fileira-area:hover .fileira-seta:not(.oculta) { opacity: 1; }

  /* Folga no topo do trilho para o card "saltar" sem ser cortado, sem
     mexer no espaçamento (compensa-se reduzindo a margem do cabeçalho). */
  .fileira-trilho { padding-top: 18px; }
  .fileira-cabecalho { margin-bottom: 2px; }

  .modal { align-items: center; padding: 24px; }
  .modal-caixa { border-radius: 16px; max-height: 88vh; animation: surgirCaixa .3s ease both; }
  .modal-puxador { display: none; }
  .modal-conteudo {
    display: grid; grid-template-columns: 200px 1fr;
    align-items: start; gap: 28px; padding: 30px;
  }
  .modal-capa { width: auto; align-self: start; }
  /* No desktop a capa fica à esquerda; título/sinopse alinhados à esquerda. */
  .modal-info h2 { font-size: 1.7rem; text-align: left; }
  .modal-autor { text-align: left; }
}

@media (min-width: 1000px) {
  :root { --card-largura: 180px; }
  .hero-slide { min-height: 360px; }
  .hero-capa-wrap { width: 228px; }
  .hero-livro-sinopse { -webkit-line-clamp: 4; }
  .fileira-grade .grade-livros { grid-template-columns: repeat(5, 1fr); }
}

/* Refinos só para quem tem mouse (hover real) */
@media (hover: hover) and (pointer: fine) {
  /* Sem scroll-snap no mouse: o snap "puxava" de volta o auto-scroll contínuo.
     No toque (mobile) o snap continua valendo para o swipe. */
  .fileira-trilho { scroll-snap-type: none; scroll-behavior: auto; }

  /* A capa ganha a mesma curva com overshoot só no desktop; no mobile o
     :active continua rápido (transição base curta). */
  .card-livro .capa { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; }
  .card-livro:hover { transform: translateY(-9px); z-index: 5; }
  .card-livro:hover .capa {
    transform: scale(1.045);
    box-shadow: 0 26px 40px rgba(0,0,0,.6), 0 0 34px rgba(184, 158, 255, .45);
  }
  .card-livro:hover .capa-overlay { opacity: 1; }

  .hero-seta:hover { background: var(--violeta); }
  .hero-capa-wrap:hover { transform: translateY(-5px); }
  .hero-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(74, 43, 181, .65), 0 0 24px rgba(184, 158, 255, .4); }
  .link-instagram:hover { transform: translateY(-1px); box-shadow: 0 0 24px rgba(220, 39, 67, .5), 0 6px 14px rgba(0,0,0,.4); }
  .botao-instagram:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(220, 39, 67, .55), 0 10px 22px rgba(0,0,0,.45); }
  .btn-icon:hover { background: rgba(74,43,181,.5); }
}

/* ============================================================
   PROMOÇÃO — TEMA COPA DO MUNDO (cores do Brasil)
   Só aparece com a promoção ativa; some sozinho fora do período.
   ============================================================ */
:root {
  --br-verde: #009c3b;
  --br-verde-esc: #007a2f;
  --br-verde-prof: #04531f;
  --br-amarelo: #ffdf00;
  --br-azul: #012169;
}

/* ---- Card da promoção — compacto, com as ofertas explícitas ---- */
.vitrine-promo { position: relative; z-index: 1; padding: 14px clamp(12px, 3.5vw, 20px) 0; }
.vitrine-card {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 1080px; margin: 0 auto;
  padding: 20px clamp(18px, 3vw, 30px);
  border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, #00a83f 0%, #017a30 52%, #044f20 100%);
  border: 1px solid rgba(255,223,0,.35);
  box-shadow: 0 16px 40px rgba(0,40,16,.5), inset 0 1px 0 rgba(255,255,255,.16);
}
/* Brilhos suaves (amarelo no topo, azul embaixo — cores da bandeira) */
.vitrine-glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 120% at 92% -12%, rgba(255,223,0,.30), transparent 60%),
    radial-gradient(48% 120% at 6% 122%, rgba(1,33,105,.5), transparent 60%);
}
/* Losango do Brasil (decorativo, à direita) */
.vitrine-losango {
  position: absolute; z-index: -1; right: -96px; top: 50%;
  width: 300px; height: 300px; transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(135deg, rgba(255,223,0,.20), rgba(255,223,0,.03));
  border-radius: 40px; pointer-events: none;
}
.vitrine-conteudo { position: relative; }

.vitrine-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.vitrine-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 800;
  font-size: clamp(1.15rem, 3.6vw, 1.45rem); color: #fff;
  letter-spacing: .2px; text-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.vitrine-icone {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; color: #04631f;
  background: linear-gradient(135deg, #ffe863, #ffc400);
  box-shadow: 0 4px 12px rgba(255,196,0,.4);
}
.vitrine-prazo {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .72rem; font-weight: 800; color: #06351a;
  background: linear-gradient(135deg, #ffe863, #ffce2b);
  padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(255,196,0,.3);
}
.vitrine-msg {
  margin: 0 0 16px; font-size: .9rem; line-height: 1.45;
  color: rgba(255,255,255,.92); max-width: 52ch;
}

.vitrine-ofertas { display: flex; gap: 12px; flex-wrap: wrap; }
.vitrine-oferta {
  position: relative; flex: 1 1 200px; min-width: 0;
  display: flex; flex-direction: column;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
}
.vitrine-pct {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 800;
  font-size: 2.1rem; line-height: 1; color: var(--br-amarelo);
  display: flex; align-items: baseline; gap: 5px;
}
.vitrine-pct small { font-size: .85rem; font-weight: 700; letter-spacing: .3px; }
.vitrine-oferta-txt { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.9); margin-top: 5px; }

.vitrine-oferta.destaque {
  background: linear-gradient(135deg, #ffe75a, #ffc400);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 10px 24px rgba(255,196,0,.35);
}
.vitrine-oferta.destaque .vitrine-pct { color: #04631f; }
.vitrine-oferta.destaque .vitrine-oferta-txt { color: #0a3d1c; }
.vitrine-selo {
  position: absolute; top: -9px; right: 12px;
  font-size: .61rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: linear-gradient(135deg, #1466d6, #012169);
  padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(1,33,105,.5);
}

/* ---- Preços promocionais no card ---- */
.info-preco.em-promo { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.preco-antigo { color: var(--texto-discreto); text-decoration: line-through; font-size: .82rem; font-weight: 500; }
.preco-promo { color: var(--br-amarelo); font-weight: 800; }
.preco-dupla { margin: 1px 0 0; font-size: .74rem; font-weight: 600; color: #7be0a3; }

/* ---- Preço promocional no carrossel (hero) ---- */
.hero-preco.em-promo { color: var(--br-amarelo); }
.hero-preco.em-promo s { color: var(--texto-discreto); font-weight: 500; margin-right: 6px; font-size: .85em; }

/* ---- Promoção no modal ---- */
/* preço bem escuro p/ contrastar com o fundo dourado do selo */
.badge-preco { color: #13100a; }
.modal-preco-antigo { color: rgba(19,16,10,.55); text-decoration: line-through; margin-right: 6px; font-weight: 600; }
.modal-promo {
  margin: 12px 0 0; padding: 11px 13px; font-size: .86rem; line-height: 1.4; color: #eafff2;
  background: linear-gradient(135deg, rgba(0,156,59,.22), rgba(4,83,31,.22));
  border: 1px solid rgba(255,223,0,.4); border-radius: var(--raio);
}
.modal-promo strong { color: var(--br-amarelo); }

/* ---- Bolas de futebol flutuando no fundo (discreto) ---- */
.ceu-bolas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ceu-bolas span { position: absolute; font-size: 1.5rem; opacity: .10; animation: bola-flutua 14s ease-in-out infinite; }
.ceu-bolas span:nth-child(1) { left: 6%;  top: 24%; animation-delay: 0s;   }
.ceu-bolas span:nth-child(2) { left: 82%; top: 18%; animation-delay: 1.6s; font-size: 1.1rem; }
.ceu-bolas span:nth-child(3) { left: 24%; top: 66%; animation-delay: 3.2s; }
.ceu-bolas span:nth-child(4) { left: 68%; top: 56%; animation-delay: 4.8s; font-size: 1.2rem; }
.ceu-bolas span:nth-child(5) { left: 47%; top: 36%; animation-delay: 6.4s; font-size: 1rem;   }
.ceu-bolas span:nth-child(6) { left: 90%; top: 72%; animation-delay: 8s;   }
.ceu-bolas span:nth-child(7) { left: 13%; top: 86%; animation-delay: 9.6s; font-size: 1.1rem; }
@keyframes bola-flutua { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .ceu-bolas span { animation: none; } }

/* ============================================================
   ============================================================
   E-COMMERCE — CARRINHO, CHECKOUT E PAGAMENTO
   (carrinho lateral, botões de loja, página de checkout,
    resumo do pedido, formulário e confirmação)
   ============================================================
   ============================================================ */

/* O atributo [hidden] deve SEMPRE esconder, mesmo quando o
   elemento tem display:flex/grid definido abaixo. */
[hidden] { display: none !important; }

/* ---------- Botões da loja (reutilizáveis) ---------- */
.botao-loja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  min-height: 50px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.botao-loja:active { transform: translateY(2px); }
.botao-loja-bloco { width: 100%; }
.botao-loja[disabled], .botao-loja:disabled {
  opacity: .45; pointer-events: none; filter: grayscale(.5); box-shadow: none;
}
.botao-loja-primario {
  background: linear-gradient(135deg, var(--estrela-clara), var(--estrela));
  color: #2b1d10;
  box-shadow: 0 0 20px rgba(255, 217, 102, .4), 0 6px 14px rgba(0,0,0,.4);
}
.botao-loja-primario:hover { filter: brightness(1.04); }
.botao-loja-secundario {
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  color: var(--texto-claro);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.botao-loja-secundario:hover { background: rgba(74,43,181,.4); }

/* ---------- Botão do carrinho na barra superior ---------- */
.btn-carrinho { position: relative; }
.carrinho-contador {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--aurora-rosa), #d62b9b);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 0 10px rgba(255,122,217,.6);
  animation: pop-badge .25s ease;
}
@keyframes pop-badge { from { transform: scale(.4); } to { transform: scale(1); } }
.btn-carrinho.tem-itens { border-color: rgba(184,158,255,.5); }

/* ---------- "+ Carrinho" no card da vitrine ---------- */
.card-add {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 700;
  color: #2b1d10;
  background: linear-gradient(135deg, var(--estrela-clara), var(--estrela));
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, filter .12s ease;
  z-index: 3;
}
.card-livro:hover .card-add,
.card-livro:focus-within .card-add { opacity: 1; transform: translateY(0); }
.card-add:active { transform: scale(.96); }
.card-add.adicionado {
  background: linear-gradient(135deg, #8effc0, #34d17f);
  color: #07351f;
}
.card-add.adicionado span::after { content: " ✓"; }
/* No celular (sem hover) o botão fica sempre visível, discreto */
@media (hover: none) {
  .card-add { opacity: 1; transform: none; left: auto; right: 8px; bottom: 8px; padding: 8px; }
  .card-add span { display: none; }
}

/* ---------- Carrinho lateral (drawer) ---------- */
.drawer-fundo {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(5, 2, 15, .7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .28s ease;
}
.drawer-fundo.aberto { opacity: 1; }

.carrinho-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 120;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 500px 200px at 100% 0%, rgba(184,158,255,.16), transparent 70%),
    linear-gradient(180deg, var(--indigo), var(--noite));
  border-left: 1px solid rgba(184,158,255,.2);
  box-shadow: -16px 0 50px rgba(0,0,0,.55);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
  padding-top: var(--safe-top);
}
.carrinho-drawer.aberto { transform: translateX(0); }

.carrinho-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(184,158,255,.15);
  flex-shrink: 0;
}
.carrinho-head h2 {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  color: var(--texto-claro);
}
.carrinho-fechar {
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1.7rem; line-height: 1;
  color: var(--texto-claro);
}
.carrinho-fechar:active { background: rgba(255,255,255,.08); }

.carrinho-itens {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 16px;
}
.carrinho-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(184,158,255,.1);
}
.carrinho-item-capa {
  width: 56px; aspect-ratio: 2/3;
  border-radius: 7px; overflow: hidden;
  background: var(--indigo);
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.carrinho-item-capa img { width: 100%; height: 100%; object-fit: cover; }
.carrinho-item-capa .capa-fallback { font-size: 1.3rem; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.carrinho-item-info { min-width: 0; }
.carrinho-item-titulo {
  margin: 0 0 2px;
  font-size: .92rem; font-weight: 600;
  color: var(--texto-claro);
  line-height: 1.25;
}
.carrinho-item-autor { margin: 0 0 8px; font-size: .78rem; color: var(--lavanda); font-style: italic; }
.ci-preco { font-size: .9rem; font-weight: 700; color: var(--estrela); }
.ci-preco.em-promo s { color: var(--texto-discreto); font-weight: 500; margin-right: 5px; }
.carrinho-item-controles {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  background: rgba(10,5,36,.5);
  overflow: hidden;
}
.qty-stepper button {
  width: 30px; height: 30px;
  color: var(--texto-claro);
  font-size: 1.1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.qty-stepper button:disabled { opacity: .3; }
.qty-stepper button:active:not(:disabled) { background: rgba(74,43,181,.5); }
.qty-valor { min-width: 24px; text-align: center; font-weight: 700; font-size: .9rem; }
.carrinho-remover {
  font-size: .75rem;
  color: var(--texto-discreto);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.carrinho-remover:active { color: var(--aurora-rosa); }

.carrinho-vazio {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 30px 24px;
  color: var(--texto-suave);
}
.carrinho-vazio svg { color: var(--lavanda); opacity: .8; margin-bottom: 6px; }
.carrinho-vazio-titulo { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--texto-claro); }
.carrinho-vazio-sub { margin: 0 0 14px; font-size: .88rem; }

.carrinho-rodape {
  flex-shrink: 0;
  padding: 16px 18px calc(18px + var(--safe-bottom));
  border-top: 1px solid rgba(184,158,255,.18);
  background: rgba(10,5,36,.6);
}
.carrinho-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.carrinho-subtotal span { color: var(--texto-suave); font-size: .95rem; }
.carrinho-subtotal strong { font-size: 1.3rem; color: var(--estrela); font-weight: 800; }
.carrinho-aviso { margin: 0 0 12px; font-size: .76rem; color: var(--texto-discreto); }

/* ---------- Ações no modal de detalhes ---------- */
/* Mobile: botões empilhados (alvo de toque grande). Comprar agora em cima. */
.modal-acoes { display: flex; flex-direction: column-reverse; gap: 10px; }
.modal-acoes .botao-loja { width: 100%; }
.modal-suporte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  font-size: .85rem;
  color: var(--lavanda);
  text-decoration: none;
}
.modal-suporte:hover { color: var(--lavanda-clara); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 480px) {
  .modal-acoes { flex-direction: row; }
  .modal-acoes .botao-loja { flex: 1; }
}

/* ---------- Toast (aviso rápido "adicionado") ---------- */
.loja-toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + var(--safe-bottom));
  transform: translate(-50%, 20px);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 88vw;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--violeta), var(--indigo-claro));
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(184,158,255,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.loja-toast svg { color: #8effc0; flex-shrink: 0; }
.loja-toast.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   PÁGINA DE CHECKOUT
   ============================================================ */
.topbar-checkout .topbar-linha { justify-content: space-between; }
.link-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  padding: 8px 6px;
}
.link-voltar:hover { color: var(--texto-claro); }
.link-voltar span { display: none; }

.checkout-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 18px 16px calc(40px + var(--safe-bottom));
}
.checkout-titulo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  margin: 6px 0 18px;
  color: var(--texto-claro);
}
.checkout-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.checkout-principal { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.checkout-bloco {
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 18px;
  padding: 20px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.checkout-subtitulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 1.1rem;
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--texto-claro);
}
.checkout-subtitulo:not(:first-child) { margin-top: 24px; }
.passo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--estrela-clara), var(--estrela));
  color: #2b1d10;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 800;
}

/* ---------- Campos do formulário ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--texto-suave);
  letter-spacing: .2px;
}
.opcional { color: var(--texto-discreto); font-weight: 400; }
.campo input, .campo textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--vidro-borda);
  background: rgba(10,5,36,.45);
  color: var(--texto-claro);
  font-size: .98rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo textarea { resize: vertical; min-height: 52px; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(243,237,255,.4); }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--lavanda);
  box-shadow: 0 0 0 3px rgba(184,158,255,.22);
}
.campo input.invalido { border-color: #ff7a8a; box-shadow: 0 0 0 3px rgba(255,122,138,.18); }
.campo-dica { margin-top: 2px; font-size: .76rem; color: var(--texto-discreto); line-height: 1.35; }
.campo-dica.erro { color: #ff9aa6; }
.campo-dica.ok { color: #8be79a; }
.campo-linha { display: flex; gap: 12px; flex-wrap: wrap; }
.campo-linha .campo { flex: 1 1 140px; }
.campo-cep { flex: 0 0 120px; }
.campo-num { flex: 0 0 90px; }
.campo-uf  { flex: 0 0 72px; }
.campo-cresce { flex: 1 1 160px; }

/* ---------- Opções de entrega ---------- */
.entrega-opcoes { display: flex; flex-direction: column; gap: 10px; }
.entrega-opcao {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 13px;
  border: 1px solid var(--vidro-borda);
  background: rgba(10,5,36,.35);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.entrega-opcao.selecionada {
  border-color: var(--lavanda);
  background: rgba(74,43,181,.28);
  box-shadow: 0 0 0 1px rgba(184,158,255,.35);
}
.entrega-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.entrega-radio {
  margin-top: 2px;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--lavanda);
  position: relative;
  transition: border-color .15s ease;
}
.entrega-opcao.selecionada .entrega-radio::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--estrela-clara), var(--estrela));
}
.entrega-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.entrega-titulo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
  color: var(--texto-claro);
  font-size: .95rem;
}
.entrega-preco { color: var(--estrela); font-weight: 700; white-space: nowrap; }
.entrega-desc { font-size: .82rem; color: var(--texto-suave); line-height: 1.4; }
.entrega-nota { margin: 4px 2px 0; font-size: .8rem; color: var(--aurora-ciano); }
.endereco-campos { margin-top: 14px; }

/* ---------- Pagamento ---------- */
.pagamento-intro { margin: 0 0 14px; font-size: .9rem; color: var(--texto-suave); line-height: 1.5; }
.pagamento-aviso {
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  background: rgba(255,217,102,.12);
  border: 1px solid rgba(255,217,102,.35);
  color: var(--estrela-clara);
  font-size: .85rem;
}
.pagamento-demo {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(122,223,255,.1);
  border: 1px dashed rgba(122,223,255,.5);
  color: var(--texto-suave);
  font-size: .84rem;
  line-height: 1.5;
}
.pagamento-demo strong { color: var(--aurora-ciano); }
.pagamento-demo code {
  background: rgba(0,0,0,.35);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: .85em;
}
.pagamento-erro {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 11px;
  background: rgba(255,122,138,.12);
  border: 1px solid rgba(255,122,138,.4);
  color: #ffb3bd;
  font-size: .85rem;
}

/* ---------- Área do Pix ---------- */
.pix-area {
  margin-top: 16px;
  padding: 18px 16px;
  border-radius: 14px;
  border: 1px solid var(--vidro-borda);
  background: rgba(10,5,36,.4);
  text-align: center;
  animation: surgir .3s ease both;
}
.pix-instrucao-topo { margin: 0 0 12px; font-size: .9rem; color: var(--texto-suave); }
.pix-qr {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.pix-qr-img {
  width: 220px;
  height: 220px;
  padding: 12px;
  background: #fff;
  border-radius: 14px;
  image-rendering: pixelated;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.pix-valor-label { margin: 0 0 16px; font-size: .95rem; color: var(--texto-suave); }
.pix-valor-label strong { color: var(--estrela); font-size: 1.15rem; font-weight: 800; }
.pix-ou { margin: 0 0 8px; font-size: .85rem; color: var(--texto-suave); }
.pix-copia {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.pix-copia input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--vidro-borda);
  background: rgba(10,5,36,.6);
  color: var(--texto-suave);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .8rem;
  text-overflow: ellipsis;
}
.pix-copia .botao-loja { min-height: 0; padding: 11px 16px; flex-shrink: 0; }
.botao-loja.copiado { background: linear-gradient(135deg, #8effc0, #34d17f); color: #07351f; }
.pix-passos {
  text-align: left;
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--texto-suave);
  font-size: .88rem;
  line-height: 1.6;
}
.pix-passos li { margin-bottom: 4px; }
.pix-passos strong { color: var(--texto-claro); }
.conf-aviso {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(184,158,255,.15);
  font-size: .84rem;
  color: var(--lavanda-clara);
  line-height: 1.5;
}

/* ---------- Resumo do pedido ---------- */
.checkout-resumo { min-width: 0; }
.resumo-caixa {
  background:
    radial-gradient(ellipse 400px 160px at 100% 0%, rgba(184,158,255,.14), transparent 70%),
    linear-gradient(180deg, rgba(31,20,102,.55), rgba(20,9,58,.55));
  border: 1px solid var(--vidro-borda);
  border-radius: 18px;
  padding: 20px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.resumo-titulo {
  margin: 0 0 14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  color: var(--texto-claro);
}
.resumo-itens { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.resumo-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 11px; align-items: center; }
.resumo-capa {
  position: relative;
  width: 44px; aspect-ratio: 2/3;
  border-radius: 6px; overflow: hidden;
  background: var(--indigo);
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.resumo-capa img { width: 100%; height: 100%; object-fit: cover; }
.resumo-capa-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  color: var(--lavanda-clara);
}
.resumo-qtd {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 19px; height: 19px;
  border-radius: 999px;
  background: var(--violeta);
  color: #fff;
  font-size: .7rem; font-weight: 700;
  line-height: 19px; text-align: center;
  box-shadow: 0 0 0 2px var(--noite);
}
.resumo-item-info { min-width: 0; }
.resumo-item-titulo { margin: 0 0 2px; font-size: .86rem; font-weight: 600; color: var(--texto-claro); line-height: 1.25; }
.resumo-item-autor { margin: 0; font-size: .76rem; color: var(--lavanda); font-style: italic; }
.resumo-item-preco { text-align: right; font-size: .88rem; }
.resumo-item-preco s { display: block; color: var(--texto-discreto); font-size: .76rem; font-weight: 400; }
.resumo-item-preco strong { color: var(--texto-claro); font-weight: 700; }
.resumo-promo {
  margin: 4px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,122,217,.12);
  border: 1px solid rgba(255,122,217,.3);
  font-size: .82rem;
  color: var(--lavanda-clara);
}
.resumo-promo strong { color: var(--aurora-rosa); }
.resumo-totais {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(184,158,255,.18);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.resumo-linha { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.resumo-linha dt { color: var(--texto-suave); font-size: .92rem; }
.resumo-linha dd { margin: 0; color: var(--texto-claro); font-weight: 600; }
.frete-gratis { color: #8effc0; font-weight: 700; }
.frete-riscado { color: var(--texto-discreto); margin-right: 6px; font-weight: 400; }
.resumo-total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(184,158,255,.18);
}
.resumo-total dt { font-size: 1.05rem; font-weight: 700; color: var(--texto-claro); }
.resumo-total dd { font-size: 1.5rem; font-weight: 800; color: var(--estrela); }
.resumo-seguro {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 0;
  font-size: .8rem;
  color: var(--texto-discreto);
}
.resumo-seguro svg { color: #8effc0; flex-shrink: 0; }

/* ---------- Carrinho vazio (checkout) ---------- */
.checkout-vazio {
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.checkout-vazio h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; margin: 0; color: var(--texto-claro); }
.checkout-vazio p { margin: 0 0 8px; color: var(--texto-suave); }

/* ---------- Confirmação ---------- */
.confirmacao { padding: 30px 16px 50px; display: flex; justify-content: center; }
.confirmacao-caixa {
  width: 100%;
  max-width: 560px;
  text-align: center;
  background:
    radial-gradient(ellipse 500px 200px at 50% 0%, rgba(184,158,255,.16), transparent 70%),
    linear-gradient(180deg, var(--indigo), var(--noite));
  border: 1px solid var(--vidro-borda);
  border-radius: 22px;
  padding: 34px 24px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.confirmacao-check {
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #07351f;
  background: linear-gradient(135deg, #8effc0, #34d17f);
  box-shadow: 0 0 28px rgba(52,209,127,.55);
  animation: pop-check .4s cubic-bezier(.22,1.2,.4,1) both;
}
@keyframes pop-check { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirmacao-caixa h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem; margin: 0 0 8px; color: var(--texto-claro); }
.confirmacao-sub { margin: 0 0 20px; color: var(--texto-suave); font-size: .98rem; line-height: 1.5; }
.confirmacao-detalhes {
  text-align: left;
  background: rgba(10,5,36,.4);
  border: 1px solid rgba(184,158,255,.15);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 22px;
}
.conf-pedido { text-align: center; margin-bottom: 14px; }
.conf-rotulo { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-discreto); }
.conf-codigo { margin: 2px 0 0; font-size: 1.05rem; font-weight: 800; color: var(--lavanda-clara); letter-spacing: .5px; }
.conf-itens { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.conf-itens li { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; color: var(--texto-suave); }
.conf-itens li span:last-child { color: var(--texto-claro); font-weight: 600; white-space: nowrap; }
.conf-totais { margin: 0; padding-top: 12px; border-top: 1px solid rgba(184,158,255,.15); display: flex; flex-direction: column; gap: 6px; }
.conf-totais > div { display: flex; justify-content: space-between; font-size: .88rem; }
.conf-totais dt { color: var(--texto-suave); margin: 0; }
.conf-totais dd { margin: 0; color: var(--texto-claro); font-weight: 600; }
.conf-total dt { font-weight: 700; color: var(--texto-claro); }
.conf-total dd { color: var(--estrela); font-weight: 800; font-size: 1.05rem; }
.conf-entrega { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(184,158,255,.15); font-size: .84rem; color: var(--texto-suave); line-height: 1.5; }
.confirmacao-acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   CHECKOUT — REFINAMENTO PARA TELAS MAIORES
   ============================================================ */
@media (min-width: 760px) {
  .link-voltar span { display: inline; }
  .checkout-grid { grid-template-columns: 1fr 360px; align-items: start; }
  .checkout-resumo { position: sticky; top: 86px; }
  .checkout-titulo { font-size: 2rem; }
}
@media (min-width: 980px) {
  .checkout-wrap { padding-top: 26px; }
}

/* ============================================================
   CONTAS (login com Google) + STATUS DO PIX AUTOMÁTICO
   ============================================================ */

/* Botão de conta na barra superior */
.conta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  color: var(--texto-claro);
  text-decoration: none;
  font-size: .85rem; font-weight: 600;
  min-height: 40px;
}
.conta-btn:hover { border-color: var(--lavanda); }
.conta-btn-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--violeta), var(--indigo-claro));
  color: var(--lavanda-clara);
}
.conta-btn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.conta-btn-label { white-space: nowrap; }
@media (max-width: 700px) {
  .conta-btn-label { display: none; }
  .conta-btn { padding: 6px; }
}
/* Telas muito pequenas: compacta ainda mais a marca */
@media (max-width: 360px) {
  .marca-logo-wrap { width: 32px; height: 32px; }
  .marca-nome { font-size: 1.2rem; }
  .marca-local { display: none; }
  .topbar-acoes { gap: 4px; }
  .topbar-linha { padding: 6px 10px; gap: 6px; }
}

/* Status do pagamento (modo Mercado Pago) */
.pix-status {
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--raio);
  font-size: .9rem; font-weight: 600; text-align: center; line-height: 1.4;
}
.pix-status.aguardando {
  background: rgba(255, 217, 102, .12);
  border: 1px solid rgba(255, 217, 102, .35);
  color: var(--estrela-clara);
}
.pix-status.confirmado {
  background: rgba(122, 223, 130, .14);
  border: 1px solid rgba(122, 223, 130, .4);
  color: #b6f0bd;
}

/* Página "Minha conta" */
.conta-wrap { max-width: 720px; margin: 0 auto; }
.conta-carregando { text-align: center; color: var(--texto-suave); padding: 30px 0; }

.conta-login {
  text-align: center;
  max-width: 440px;
  margin: 18px auto 0;
  padding: 34px 26px;
}
.conta-login .checkout-subtitulo { justify-content: center; margin-bottom: 10px; }
.conta-login p { color: var(--texto-suave); margin: 0 auto; max-width: 320px; }
.conta-login .botao-google { margin-top: 22px; }

.botao-google {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 10px auto 0;
  padding: 12px 20px; border-radius: var(--raio);
  background: #fff; color: #1f1f1f; font-weight: 600;
  border: 1px solid #dadce0;
}
.botao-google:hover { background: #f5f5f5; }
.botao-google:disabled { opacity: .6; cursor: default; }

.conta-perfil-head { display: flex; align-items: center; gap: 14px; }
.conta-perfil-id { flex: 1; min-width: 0; }
.conta-avatar-grande {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--violeta), var(--indigo-claro));
}
.conta-avatar-grande img { width: 100%; height: 100%; object-fit: cover; }
.conta-nome { margin: 0; font-weight: 700; color: var(--texto-claro); }
.conta-email { margin: 2px 0 0; font-size: .82rem; color: var(--texto-suave); word-break: break-all; }
.conta-ajuda { font-size: .82rem; color: var(--texto-suave); margin: 0 0 12px; }
.conta-sub { font-size: .95rem; color: var(--texto-claro); margin: 18px 0 10px; }
.conta-salvo { color: #b6f0bd; font-weight: 600; margin: 10px 0 0; }

/* Lista de pedidos */
.lista-pedidos { display: grid; gap: 12px; }
.pedido-card {
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  border-radius: var(--raio); padding: 14px;
}
.pedido-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pedido-codigo { font-weight: 700; color: var(--texto-claro); }
.pedido-status { font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pedido-status.pedido-pago { background: rgba(122,223,130,.16); color: #b6f0bd; }
.pedido-status.pedido-pendente { background: rgba(255,217,102,.14); color: var(--estrela-clara); }
.pedido-data { margin: 4px 0 0; font-size: .76rem; color: var(--texto-discreto); }
.pedido-itens { list-style: none; margin: 10px 0; padding: 0; font-size: .85rem; color: var(--texto-suave); }
.pedido-itens li { padding: 2px 0; }
.pedido-rodape {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(184,158,255,.15); padding-top: 10px;
  font-size: .85rem; color: var(--texto-suave);
}
.pedido-rodape strong { color: var(--estrela); font-size: 1rem; }


/* ============================================================
   AVISO "PRECISA DE CONTA" — modal bloqueante
   ============================================================ */
.aviso-conta {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: 20px;
}
.aviso-conta[hidden] { display: none; }
.aviso-conta-fundo {
  position: absolute; inset: 0;
  background: rgba(5, 2, 18, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease;
}
.aviso-conta.aberto .aviso-conta-fundo { opacity: 1; }
.aviso-conta-caixa {
  position: relative; z-index: 1; width: min(420px, 100%);
  background: linear-gradient(180deg, var(--indigo), var(--noite));
  border: 1px solid var(--vidro-borda); border-radius: 16px;
  padding: 30px 24px 24px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  transform: translateY(14px) scale(.97); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.aviso-conta.aberto .aviso-conta-caixa { transform: none; opacity: 1; }
.aviso-conta-x {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; font-size: 1.6rem; line-height: 1;
  color: var(--texto-suave); border-radius: 50%;
}
.aviso-conta-x:hover { background: rgba(255,255,255,.08); color: var(--texto-claro); }
.aviso-conta-icone {
  width: 56px; height: 56px; margin: 2px auto 14px; border-radius: 50%;
  display: grid; place-items: center; color: var(--lavanda-clara);
  background: linear-gradient(135deg, var(--violeta), var(--indigo-claro));
}
.aviso-conta-caixa h2 {
  font-family: 'Playfair Display', serif;
  margin: 0 0 8px; color: var(--texto-claro); font-size: 1.4rem;
}
.aviso-conta-caixa p { color: var(--texto-suave); margin: 0 0 18px; font-size: .92rem; line-height: 1.5; }
.aviso-conta-acoes { display: grid; gap: 10px; }
.aviso-conta-acoes .botao-google { width: 100%; justify-content: center; margin: 0; }

/* ============================================================
   CHECKOUT — DADOS VINDOS DA CONTA (somente leitura)
   ============================================================ */
.dados-conta-nota {
  margin: -4px 0 14px; font-size: .82rem; color: var(--texto-suave);
}
.dados-conta-nota a { color: var(--lavanda); font-weight: 600; }
.campo input.campo-bloqueado,
.campo textarea.campo-bloqueado {
  background: rgba(20, 9, 58, .55);
  color: var(--texto-suave);
  cursor: not-allowed;
  border-style: dashed;
}
.campo input.campo-bloqueado:focus {
  outline: none; border-color: var(--vidro-borda);
}

/* ============================================================
   MENU DA CONTA (dropdown da barra) + PAINEL DA CONTA
   ============================================================ */
.conta-menu-pop {
  position: fixed; z-index: 600; min-width: 220px;
  background: linear-gradient(180deg, var(--indigo), var(--noite));
  border: 1px solid var(--vidro-borda); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 8px; overflow: hidden;
  transform: translateY(-8px) scale(.98); opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.conta-menu-pop[hidden] { display: none; }
.conta-menu-pop.aberto { transform: none; opacity: 1; }
.cmp-head { padding: 8px 10px 10px; border-bottom: 1px solid rgba(184,158,255,.16); margin-bottom: 6px; }
.cmp-nome { margin: 0; font-weight: 700; color: var(--texto-claro); font-size: .92rem; }
.cmp-email { margin: 2px 0 0; font-size: .76rem; color: var(--texto-suave); word-break: break-all; }
.cmp-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; border-radius: 9px; text-align: left;
  color: var(--texto-claro); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.cmp-item:hover { background: rgba(74,43,181,.45); }
.cmp-item svg { color: var(--lavanda); flex: none; }
.cmp-sair { color: var(--aurora-rosa); }
.cmp-sair svg { color: var(--aurora-rosa); }

/* Abas do painel da conta */
.conta-menu {
  display: flex; gap: 4px; margin: 0 0 16px;
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  border-radius: 999px; padding: 5px;
}
.conta-menu-item {
  flex: 1; padding: 9px 8px; border-radius: 999px;
  color: var(--texto-suave); font-weight: 600; font-size: .82rem;
  white-space: nowrap; text-align: center; line-height: 1.2;
}
.conta-menu-item.ativo { background: linear-gradient(135deg, var(--violeta), var(--indigo-claro)); color: #fff; }
@media (min-width: 420px) { .conta-menu-item { font-size: .9rem; padding: 9px 12px; } }

/* Asterisco de campo obrigatório */
.obrig { color: var(--aurora-rosa); font-weight: 700; }

/* Tela "cadastro completo" */
.conta-ok { text-align: center; }
.conta-ok-check {
  width: 64px; height: 64px; margin: 6px auto 14px; border-radius: 50%;
  display: grid; place-items: center; color: #0a0524;
  background: linear-gradient(135deg, #8be78f, #4fd862);
  box-shadow: 0 10px 26px rgba(79,216,98,.35);
}
.conta-ok h2 { font-family: 'Playfair Display', serif; margin: 0 0 8px; color: var(--texto-claro); }
.conta-ok p { color: var(--texto-suave); margin: 0 0 20px; }

/* ============================================================
   CHECKOUT — CARTÃO "SEUS DADOS" (exibição, sem cara de input)
   ============================================================ */
.dados-conta {
  background: rgba(20, 9, 58, .4);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio);
  padding: 16px 16px 12px;
  margin-bottom: 6px;
}
.dados-conta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
.dado-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dado-item-full { grid-column: 1 / -1; }
.dado-rotulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-discreto); font-weight: 600;
}
.dado-valor { color: var(--texto-claro); font-weight: 500; word-break: break-word; }
.dado-valor.faltando { color: var(--aurora-rosa); font-style: italic; font-weight: 600; }
.dados-conta-editar {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; padding: 8px 14px;
  border: 1px solid var(--vidro-borda); border-radius: 999px;
  color: var(--lavanda-clara); text-decoration: none;
  font-size: .82rem; font-weight: 600;
}
.dados-conta-editar:hover { border-color: var(--lavanda); background: rgba(74,43,181,.3); }
.dados-conta-editar svg { color: var(--lavanda); }
@media (max-width: 480px) { .dados-conta-grid { grid-template-columns: 1fr; } }

/* Livro de unidade única: sem seletor de quantidade no carrinho */
.qty-unica { font-size: .76rem; color: var(--texto-discreto); font-weight: 600; }

/* Pix dentro de um pedido pendente (Meus pedidos) */
.pedido-pix { margin-top: 12px; border-top: 1px solid rgba(184,158,255,.15); padding-top: 10px; }
.pedido-pix > summary {
  cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--lavanda-clara);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.pedido-pix > summary::before { content: "🔑"; font-size: .9em; }
.pedido-pix[open] > summary { margin-bottom: 8px; }
.pedido-pix-ajuda { margin: 0 0 6px; font-size: .78rem; color: var(--texto-suave); }
.pedido-pix-codigo {
  width: 100%; resize: none; font-family: monospace; font-size: .74rem;
  color: var(--texto-claro); background: rgba(10,5,36,.6);
  border: 1px solid var(--vidro-borda); border-radius: 8px; padding: 8px; word-break: break-all;
}
.pedido-pix-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Aviso de contato nos pedidos pagos */
.pedido-contato-aviso {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(74, 43, 181, .18);
  border: 1px solid rgba(184, 158, 255, .22);
  font-size: .82rem;
  color: var(--lavanda-clara);
  line-height: 1.45;
}

/* ============================================================
   PAINEL DE ADMINISTRAÇÃO (repor / vender livros)
   ============================================================ */
/* ---- Resumo (total / disponíveis / vendidos / seus) ---- */
.admin-resumo {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 4px 0 18px;
}
.admin-resumo-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 6px; text-align: center;
  background: rgba(20, 9, 58, .4); border: 1px solid var(--vidro-borda); border-radius: 12px;
}
.admin-resumo-item strong { font-size: 1.25rem; color: var(--lavanda-clara); line-height: 1; }
.admin-resumo-item span { font-size: .68rem; color: var(--texto-discreto); }
@media (max-width: 440px) {
  .admin-resumo { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Ferramentas: busca + filtros ---- */
.admin-ferramentas { margin: 10px 0 16px; display: flex; flex-direction: column; gap: 10px; }
.admin-busca-wrap { margin: 0; }
.admin-busca {
  width: 100%; padding: 11px 14px; font-size: 16px;
  color: var(--texto-claro); background: rgba(10,5,36,.6);
  border: 1px solid var(--vidro-borda); border-radius: 10px;
}
.admin-busca::placeholder { color: var(--texto-discreto); }
.admin-busca:focus { outline: none; border-color: var(--lavanda); }

.admin-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-chip {
  padding: 7px 14px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  border: 1px solid var(--vidro-borda); background: var(--vidro); color: var(--texto-discreto);
  transition: background .15s, border-color .15s, color .15s;
}
.admin-chip:hover { border-color: var(--lavanda); color: var(--texto-claro); }
.admin-chip.ativo {
  background: rgba(157,124,255,.18); border-color: var(--lavanda); color: var(--lavanda-clara);
}

.admin-lista { display: flex; flex-direction: column; gap: 10px; }
.admin-item {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 12px; border-radius: var(--raio);
  background: rgba(20, 9, 58, .4); border: 1px solid var(--vidro-borda);
  transition: border-color .15s, box-shadow .15s;
}
.admin-item-editando {
  border-color: var(--lavanda);
  box-shadow: 0 0 0 1px var(--lavanda), 0 6px 20px rgba(157,124,255,.18);
}
.admin-capa {
  width: 46px; height: 66px; flex: none; border-radius: 6px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--violeta), var(--indigo-claro));
  color: var(--lavanda-clara); font-weight: 700; font-size: 1.1rem;
}
.admin-capa img { width: 100%; height: 100%; object-fit: cover; }
.admin-info { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.admin-titulo { margin: 0; font-weight: 600; color: var(--texto-claro); font-size: .92rem; line-height: 1.25; }
.admin-autor  { margin: 0; font-size: .78rem; color: var(--texto-discreto); }
.admin-meta   { margin: 1px 0 0; font-size: .76rem; color: var(--lavanda-clara); font-weight: 600; }
.admin-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.admin-tag {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
}
.admin-tag-disponivel { background: rgba(122,223,130,.16); color: #8be79a; border: 1px solid rgba(122,223,130,.35); }
.admin-tag-reservado  { background: rgba(255,217,102,.14); color: var(--estrela-clara); border: 1px solid rgba(255,217,102,.35); }
.admin-tag-vendido    { background: rgba(255,90,90,.14); color: #ff9090; border: 1px solid rgba(255,90,90,.35); }
.admin-tag-meu        { background: rgba(157,124,255,.16); color: var(--lavanda-clara); border: 1px solid rgba(157,124,255,.4); }

.admin-acoes { flex: none; display: flex; flex-direction: column; gap: 6px; }
.admin-btn {
  padding: 8px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; min-height: 38px;
  border: 1px solid var(--vidro-borda); background: var(--vidro); color: var(--texto-claro);
  transition: background .15s, border-color .15s, opacity .15s;
}
.admin-btn:disabled { opacity: .5; cursor: not-allowed; }
.admin-btn-repor  { border-color: rgba(122,223,130,.5); color: #8be79a; background: rgba(122,223,130,.1); }
.admin-btn-repor:hover  { background: rgba(122,223,130,.22); }
.admin-btn-vender { border-color: rgba(255,90,90,.45); color: #ff9090; background: rgba(255,90,90,.1); }
.admin-btn-vender:hover { background: rgba(255,90,90,.22); }
.admin-btn-editar { border-color: rgba(157,124,255,.5); color: var(--lavanda-clara); background: rgba(157,124,255,.1); }
.admin-btn-editar:hover { background: rgba(157,124,255,.22); }
.admin-btn-remover { border-color: rgba(255,150,90,.45); color: #ffb27a; background: rgba(255,150,90,.1); }
.admin-btn-remover:hover { background: rgba(255,150,90,.22); }
@media (max-width: 520px) {
  .admin-acoes { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .admin-btn { flex: 1 1 auto; }
}

/* ---- Ações do formulário (salvar / cancelar edição) ---- */
.admin-form-acoes { display: flex; flex-direction: column; gap: 8px; }

/* ---- Adicionar livro (formulário do admin) ---- */
.admin-add {
  margin: 6px 0 18px; border: 1px solid var(--vidro-borda); border-radius: var(--raio);
  background: rgba(20, 9, 58, .35); overflow: hidden;
}
.admin-add > summary {
  cursor: pointer; padding: 14px 16px; font-weight: 700; color: var(--lavanda-clara);
  list-style: none; user-select: none;
}
.admin-add > summary::-webkit-details-marker { display: none; }
.admin-add[open] > summary { border-bottom: 1px solid var(--vidro-borda); }
.admin-add-form { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.admin-foto-wrap { display: flex; align-items: center; gap: 14px; }
.admin-foto-preview {
  width: 84px; height: 120px; flex: none; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  background: rgba(10,5,36,.5); border: 1px dashed var(--vidro-borda);
}
.admin-foto-preview img { width: 100%; height: 100%; object-fit: cover; }
.admin-foto-vazio { font-size: .72rem; color: var(--texto-discreto); padding: 4px; }
.admin-foto-botao {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--vidro-borda); background: var(--vidro); color: var(--texto-claro);
  font-size: .84rem; font-weight: 600;
}
.admin-foto-botao:hover { border-color: var(--lavanda); }
.admin-ia-btn { margin-top: 8px; width: 100%; }
/* Botão "Criar categoria «X»" sugerida pela IA quando o livro não se encaixa. */
.admin-genero-aplicar {
  margin-top: 8px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 700; text-align: center;
  color: #07351f; border: none;
  background: linear-gradient(135deg, #8effc0, #34d17f);
}
.admin-genero-aplicar:hover { filter: brightness(1.05); }
.admin-add-form textarea {
  width: 100%; resize: vertical; font: inherit; font-size: 16px;
  color: var(--texto-claro); background: rgba(10,5,36,.6);
  border: 1px solid var(--vidro-borda); border-radius: 10px; padding: 10px 12px;
}
.admin-add-form textarea:focus { outline: none; border-color: var(--lavanda); }

/* ============================================================
   ZONA DE PERIGO — Apagar conta
   ============================================================ */
.zona-perigo {
  margin-top: 32px;
  border: 1px solid rgba(255, 90, 90, .3);
  border-radius: var(--raio);
  padding: 16px 18px;
  background: rgba(255, 60, 60, .06);
}
.zona-perigo-titulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: #ff7a7a; font-weight: 700; margin: 0 0 12px;
}
.zona-perigo-corpo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.zona-perigo-label { font-size: .93rem; font-weight: 600; color: var(--texto-claro); margin: 0 0 2px; }
.zona-perigo-desc  { font-size: .8rem; color: var(--texto-discreto); margin: 0; }

.botao-perigo {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,90,90,.5);
  background: rgba(255,60,60,.12); color: #ff8080; font-size: .84rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
  min-height: var(--alvo-toque);
}
.botao-perigo:hover { background: rgba(255,60,60,.25); border-color: rgba(255,90,90,.8); color: #ffaaaa; }
.botao-perigo:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   MODAL — Confirmar apagar conta
   (tudo escopado em .modal-overlay para NÃO afetar o modal de
   detalhes do livro, que usa .modal-caixa / .modal-acoes)
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10, 5, 36, .82); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay .modal-caixa {
  background: #1a0e4a; border: 1px solid rgba(255,90,90,.3);
  border-radius: 16px; padding: 32px 28px 24px; max-width: 400px; width: 100%;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modal-icone-perigo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255,60,60,.15); color: #ff8080; margin-bottom: 16px;
}
.modal-overlay .modal-titulo { font-size: 1.25rem; font-weight: 700; color: var(--texto-claro); margin: 0 0 10px; }
.modal-desc { font-size: .88rem; color: var(--texto-suave); line-height: 1.55; margin: 0 0 24px; }
.modal-desc strong { color: #ff8080; }
.modal-overlay .modal-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.modal-overlay .modal-acoes .botao-loja-secundario { min-width: 110px; }
.modal-overlay .modal-acoes .botao-perigo { min-width: 160px; }
.pedido-pix-acoes .botao-loja { flex: 1 1 auto; }