/* =========================================================================
   Friky Store — marco oscuro: barra de arriba, aviso, pie y los «hero» (portada y catálogo)
   Dario: «los colores de la landing y la barra de arriba me encantan» y «debajo, blanco».
   El resto de la tienda es blanco (shop.css + estilo-fan.css). Sin desenfoques de fondo
   (backdrop-filter) para que bajar la página no se trabe.
   ========================================================================= */

/* Colores oscuros solo dentro de estas zonas (los componentes los toman de aquí) */
.announce, .site-header, .site-footer, .lp-hero, .cat-hero {
  color-scheme: dark;
  --night: #1A0840;
  --ink: #F7F1FF;
  --ink-2: #DCD0F5;
  --muted: #CDBFEF;
  --line: rgba(233, 223, 255, .1);
  --line-strong: rgba(233, 223, 255, .22);
  --uva: #C4B5FD;
  --uva-50: rgba(196, 181, 253, .12);
  --lavanda: #2D1566;
  --crema: #1A0840;
  --white: #241052;
  --ring: 0 0 0 3px rgba(196, 181, 253, .35);
  color: var(--ink);
}

.announce { background: linear-gradient(90deg, #5B21B6, #9D174D); color: #fff; }
.announce a { color: #fff; }

/* Barra de arriba: mismo violeta oscuro, ahora sólido (sin desenfoque, más liviano) */
.site-header { background: #220B50; border-bottom-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; view-transition-name: site-header; }
.site-header .icon-btn:hover { background: rgba(233, 223, 255, .1); }
.site-header .cart-count { color: var(--night); border-color: #220B50; }
.site-header .nav-list a[aria-current="page"] { background: rgba(196, 181, 253, .16); }
.site-header .main-nav { border-top-color: var(--line); }
.site-header .input::placeholder { color: #A99BD0; opacity: 1; }
.site-header .input:hover { border-color: rgba(233, 223, 255, .38); }
.site-header .suggest { border-color: var(--line-strong); box-shadow: 0 24px 50px rgba(5, 0, 20, .45); }

/* Pie con el mismo color de la barra */
.site-footer { background: #220B50; border-top: 1px solid var(--line); }