/* ============================================================
   FRKZ — estilos base (complemento ao Tailwind)
   Dark mode profundo + detalhes "refletivos" da identidade.
   ============================================================ */

:root {
  --frkz-bg: #050506;
  --frkz-bg-soft: #0c0c0e;
  --frkz-line: #1c1c20;
  --frkz-fg: #f4f4f5;
  --frkz-muted: #8a8a93;
  --frkz-accent: #c4f000;        /* verde-ácido psy, usado com parcimônia */
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(120, 90, 255, 0.08), transparent 60%),
    var(--frkz-bg);
  color: var(--frkz-fg);
  font-feature-settings: "ss01", "cv01";
}

/* Logo "refletiva" — gradiente metálico sutil */
.frkz-logo {
  background: linear-gradient(180deg, #ffffff 0%, #c9c9cf 45%, #6f6f78 55%, #eaeaee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.35em;
}

/* Header sticky: estado after-scroll aplicado via JS (.is-scrolled) */
#site-header {
  transition: background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease, padding .3s ease;
}
#site-header.is-scrolled {
  background-color: rgba(5, 5, 6, 0.78);
  backdrop-filter: blur(12px);
  border-color: var(--frkz-line);
}

/* Cards do grid */
.product-card .media {
  background:
    linear-gradient(135deg, #141417 0%, #0b0b0d 100%);
}
.product-card:hover .media img { transform: scale(1.04); }

/* Drawer do carrinho */
#cart-drawer { transition: transform .35s cubic-bezier(.4,0,.2,1); }
#cart-overlay { transition: opacity .3s ease; }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--frkz-bg); }
::-webkit-scrollbar-thumb { background: #26262b; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #34343a; }

/* Chips de tamanho */
.size-chip[aria-pressed="true"] {
  background: var(--frkz-fg);
  color: #000;
  border-color: var(--frkz-fg);
}
.size-chip[disabled] { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

/* Marquee da announcement bar */
@keyframes frkz-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.frkz-marquee { animation: frkz-marquee 22s linear infinite; }

/* Acessibilidade: respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .frkz-marquee { animation: none; }
  html { scroll-behavior: auto; }
}