/* =====================================================================
   TIENDA — capa final del modo oscuro (index.html y sus copias por sección)
   ---------------------------------------------------------------------
   Va última en el <head>. tienda.css, tienda-portada.css y
   tienda-refinado.css fueron apilando reglas oscuras con !important y
   algunas se pisaban entre sí: la barra de aviso y los botones "Buscar" y
   "Explorar categorías" quedaban blancos, y "Agregar" terminaba con tinta
   casi negra sobre un fondo casi negro (1,25:1). Acá se corrige todo en un
   solo lugar, con `html` delante para ganar sin sumar otra guerra.

   También baja un poco la intensidad: fondos menos violetas y un rosa
   menos neón, sin cambiar la identidad de la marca.
   ===================================================================== */

:root[data-theme="dark"] body.tienda,
html body.tienda[data-theme="dark"] {
    --t-primary: #f26aac;
    --t-primary-dark: #d94f92;
    --t-primary-ink: #f58cbc;
    --t-secondary: #f58cbc;
    --t-accent: #3a2a36;
    --t-ink: #f1ecf2;
    --t-muted: #b7adbb;
    --t-bg: #141017;
    --t-surface: #1c171f;
    --t-surface-2: #252029;
    --t-border: #372e3c;
    --t-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    --t-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.35);
    --t-nav-bg: #17121a;
    --t-footer-bg: #110d13;
    /* Tinta oscura para texto sobre los rosas claros de la marca. */
    --t-on-light: #24091a;
}

/* Fondo de página: los brillos de color quedan más tenues. */
html body.tienda[data-theme="dark"] {
    background:
        radial-gradient(circle at 94% 6%, rgba(242, 106, 172, .07), transparent 22rem),
        radial-gradient(circle at 4% 48%, rgba(243, 200, 110, .04), transparent 24rem),
        var(--t-bg) !important;
}

/* ---------------------------------------------- Barra de aviso y cabecera */
/* Usaba --t-ink de fondo: en oscuro la tinta es clara y la barra quedaba
   blanca arriba de todo. */
html body.tienda[data-theme="dark"] .t-announce {
    background: var(--t-surface-2);
    color: var(--t-ink);
    border-bottom: 1px solid var(--t-border);
}
html body.tienda[data-theme="dark"] .t-announce a { color: var(--t-primary-ink); }
html body.tienda[data-theme="dark"] .t-announce__close { color: var(--t-muted); }

html body.tienda[data-theme="dark"] .t-header {
    background: rgba(28, 23, 31, .96) !important;
}

/* "Buscar" y "Explorar categorías": mismo motivo que la barra de aviso
   (fondo --t-ink). Pasan a rosa de marca con tinta oscura, AA en los dos. */
@media (min-width: 721px) {
    html body.tienda[data-theme="dark"] .t-header .t-search .t-search__btn,
    html body.tienda[data-theme="dark"] .t-nav .t-dept-toggle {
        background: var(--t-surface-2);
        color: var(--t-ink) !important;
        border: 1px solid var(--t-border);
    }
    html body.tienda[data-theme="dark"] .t-header .t-search .t-search__btn:hover,
    html body.tienda[data-theme="dark"] .t-nav .t-dept-toggle:hover,
    html body.tienda[data-theme="dark"] .t-nav .t-dept-toggle[aria-expanded="true"] {
        background: var(--t-primary);
        border-color: var(--t-primary);
        color: var(--t-on-light) !important;
    }
}
/* En móvil la lupa sola también venía en blanco. */
html body.tienda[data-theme="dark"] .t-header .t-search .t-search__btn {
    background: var(--t-surface-2);
    color: var(--t-ink) !important;
}
html body.tienda[data-theme="dark"] .t-header .t-search .t-search__btn:hover {
    background: var(--t-primary);
    color: var(--t-on-light) !important;
}

/* ---------------------------------------------------------------- Portada */
/* Colecciones: los fondos de cada tarjeta, menos saturados, y el símbolo
   gigante de adorno a baja opacidad (antes un gris lechoso). */
html body.tienda[data-theme="dark"] .t-collection-card--plush { background: #2c1b25 !important; }
html body.tienda[data-theme="dark"] .t-collection-card--style { background: #221d31 !important; }
html body.tienda[data-theme="dark"] .t-collection-card--play { background: #29241a !important; }
html body.tienda[data-theme="dark"] .t-collection-card--intimate { background: #2e1c27 !important; }
html body.tienda[data-theme="dark"] .t-collection-card::after { background: rgba(255, 255, 255, .05); }
html body.tienda[data-theme="dark"] .t-collection-card::before { color: rgba(255, 255, 255, .12) !important; }
html body.tienda[data-theme="dark"] .t-collection-card strong { color: var(--t-ink) !important; }

/* ------------------------------------------------- Tarjeta de producto */
/* "Agregar" heredaba #100516 de la regla general de contraste de tienda.css
   y quedaba negro sobre negro. En reposo: rosa claro sobre el tinte; al
   pasar por encima se llena con tinta oscura. */
html body.tienda[data-theme="dark"] .t-card__buy {
    background: color-mix(in srgb, var(--t-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--t-primary) 30%, transparent);
    color: #f9c6dd !important;
}
html body.tienda[data-theme="dark"] .t-card__buy:hover,
html body.tienda[data-theme="dark"] .t-card:hover .t-card__buy {
    background: var(--t-primary);
    border-color: var(--t-primary);
    color: var(--t-on-light) !important;
}
html body.tienda[data-theme="dark"] .t-card__buy.is-agregado,
html body.tienda[data-theme="dark"] .t-card__buy.is-agregado:hover {
    background: #1f7a52;
    border-color: #1f7a52;
    color: #fff !important;
}

/* Contadores dentro de filtros y botones rosas: tinta oscura plena. */
html body.tienda[data-theme="dark"] :is(.t-filter.is-active, .t-pag__n.is-actual, .t-vista__b.is-activa) {
    color: var(--t-on-light) !important;
}
html body.tienda[data-theme="dark"] .t-filter.is-active :is(span, small, b) {
    color: inherit !important;
    opacity: .85 !important;
}

/* ------------------------------------------------------ Bloques de marca */
/* Las promesas de compra eran dos placas fucsia llenas a cada lado: en
   oscuro quedan como superficies con un tinte de marca. */
html body.tienda[data-theme="dark"] .t-promo--1,
html body.tienda[data-theme="dark"] .t-promo--3 {
    background:
        linear-gradient(135deg, rgba(242, 106, 172, .22), rgba(242, 106, 172, .08)),
        var(--t-surface) !important;
    border: 1px solid rgba(242, 106, 172, .28) !important;
}
html body.tienda[data-theme="dark"] .t-promo--2 {
    background: var(--t-surface-2) !important;
}
html body.tienda[data-theme="dark"] :is(.t-promo--1, .t-promo--2, .t-promo--3) :is(strong, h3, h4, p, small, span) {
    color: var(--t-ink) !important;
}
html body.tienda[data-theme="dark"] :is(.t-promo--1, .t-promo--2, .t-promo--3) :is(p, small) { opacity: .78; }
html body.tienda[data-theme="dark"] :is(.t-promo--1, .t-promo--3) .t-promo__icon { color: var(--t-primary-ink); }

/* Sello "para vos" del banner de regalos (blanco sobre rosa claro: 2,4:1). */
html body.tienda[data-theme="dark"] .t-gift-banner__art i {
    background: var(--t-primary);
    color: var(--t-on-light);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------- Locales */
/* Google Maps no tiene tema oscuro embebido: el recuadro quedaba como un
   bloque blanco de 290px. Se invierte suave, lo habitual para mapas. */
html body.tienda[data-theme="dark"] .t-store-card__map-ratio {
    background: var(--t-surface-2);
    border-radius: inherit;
}
html body.tienda[data-theme="dark"] .t-store-card__map-ratio iframe {
    filter: invert(.9) hue-rotate(180deg) saturate(.7) brightness(.95);
    color-scheme: light;
}

/* Banners temáticos ("Peluches", etc.): el círculo de adorno al 30% de
   blanco se veía como un foco encendido sobre el fondo oscuro. */
html body.tienda[data-theme="dark"] .t-tema__banner::after { background: rgba(255, 255, 255, .05); }
html body.tienda[data-theme="dark"] .t-tema__art { opacity: .4; }

/* Ficha: "Comprar ahora" traía el fucsia de marca fijo y quedaba al lado
   de "Agregar al carrito" (rosa del tema) con dos rosas distintos. Pasa a
   botón secundario con borde, así el principal sigue siendo uno solo. */
html body.tienda[data-theme="dark"] .t-pdp__buy-now {
    background: transparent;
    border: 1.5px solid var(--t-primary);
    color: var(--t-primary-ink) !important;
    box-shadow: none;
}
html body.tienda[data-theme="dark"] .t-pdp__buy-now:hover {
    background: var(--t-primary);
    color: var(--t-on-light) !important;
}