/**
 * Plaza Guzmán — Prueba visual “Roiser-style” (rama feature/color-tests)
 * Rojo solo como acento; superficies en grafito elegante.
 * Quitar el <link> en store/layouts/app.blade.php para revertir al tema anterior.
 */

body.store-body.store-theme-roiser {
    /* Rojo suave tipo Roiser (RGB 229, 57, 53) — menos estridente en grandes superficies */
    --pg-red: #e53935;
    --pg-red-hover: #d32f2f;
    --pg-red-active: #c62828;
    --pg-dark: #222222;
    --pg-gray: #6a6a6a;
    --pg-bg: #f7f7f7;

    --store-primary: #e53935;
    --store-primary-hover: #d32f2f;
    --store-primary-active: #c62828;
    --store-primary-dark: #d32f2f;
    --store-accent: #e53935;
    --store-text: #222222;
    --store-muted: #5c5c5c;
    --store-border: #e6e6e6;
    --store-bg: #f7f7f7;
    --store-card: #ffffff;

    /* Superficies oscuras (footer, franjas, etc.) — grafito */
    --store-header-gray: #2f2a26;
    --store-surface-graphite: #2f2a26;
    --store-surface-graphite-soft: #3a342f;
    --store-accent-line: #e53935;

    /* Header principal: mismo rojo suave + hover más oscuro (misma familia) */
    --store-header-brand-red: #e53935;
    --store-header-brand-red-dark: #d32f2f;
}

/* ——— Header en 3 franjas: sin fondo único; colores por banda ——— */
.store-theme-roiser .store-header {
    background: transparent !important;
    border-bottom: none;
}

.store-theme-roiser .store-header__band--top {
    background: var(--store-header-brand-red);
}

/* Franja roja superior (solo desktop): más aire y enlaces centrados */
.store-theme-roiser .store-header__band--top .store-header__utility-nav:not(.store-header__utility-nav--mobile) {
    padding: 0.95rem 0 1rem;
    gap: 0.5rem 0.95rem;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.store-theme-roiser .store-header__band--nav {
    background: linear-gradient(180deg, #2f2a26 0%, #1f1c19 100%);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
}

.store-theme-roiser .store-header__band--main {
    background: #ffffff;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

/* Barra central: grid logo | búsqueda | acciones (tel / cuenta / carrito) */
.store-theme-roiser .store-header-top--commerce {
    width: 100%;
    grid-template-columns: minmax(100px, auto) minmax(0, 1fr) auto;
}

.store-theme-roiser .store-header-top__search {
    min-width: 0;
}

.store-theme-roiser .store-search--desktop.store-search--commerce {
    max-width: 640px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.store-theme-roiser .store-search__input {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #222222;
}

.store-theme-roiser .store-search__input::placeholder {
    color: #b0b0b0;
}

.store-theme-roiser .store-search__input:focus {
    border-color: rgba(229, 57, 53, 0.45);
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.12);
}

.store-theme-roiser .store-search__icon {
    color: #888888;
}

.store-theme-roiser .store-search--mobile .store-search__input {
    background: #ffffff;
    color: #222222;
}

.store-theme-roiser .store-search--mobile .store-search__input::placeholder {
    color: #b0b0b0;
}

/* Barra blanca: logo sin filtro forzado */
.store-theme-roiser .store-header__band--main .store-logo__img {
    filter: none;
}

/* Barra blanca: carrito discreto; acento rojo solo en badge y hover */
.store-theme-roiser .store-header__band--main .store-header-cart-card {
    color: #3d3d3d;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.07);
}

.store-theme-roiser .store-header__band--main .store-header-cart-card:hover {
    background: rgba(229, 57, 53, 0.05);
    border-color: rgba(229, 57, 53, 0.22);
}

.store-theme-roiser .store-header__band--main .store-header-cart-card .store-nav__icon svg {
    stroke: #4a4a4a;
    color: #4a4a4a;
    transition: stroke 0.2s ease, color 0.2s ease;
}

.store-theme-roiser .store-header__band--main .store-header-cart-card:hover .store-nav__icon svg {
    stroke: var(--store-header-brand-red);
    color: var(--store-header-brand-red);
}

.store-theme-roiser .store-header__band--main .store-header-cart-card .store-nav-cart__badge {
    background: var(--store-header-brand-red);
    color: #ffffff;
    box-shadow: 0 0 0 1.5px #fff;
}

.store-theme-roiser .store-header__band--main .store-header-cart-card__total {
    color: #222;
}

.store-theme-roiser .store-header__band--main .store-header-cart-card__label {
    color: #6f6f6f;
}

.store-theme-roiser .store-header__band--main .store-header-phone strong {
    color: #222;
}

.store-theme-roiser .store-header__band--main .store-header-phone:hover {
    color: var(--store-header-brand-red);
}

.store-theme-roiser .store-header__band--main .store-header-account {
    color: #3d3d3d;
}

.store-theme-roiser .store-header__band--main .store-search-commerce__submit {
    background: var(--store-header-brand-red);
    color: #fff;
}

.store-theme-roiser .store-header__band--main .store-search-commerce__submit:hover {
    background: var(--store-header-brand-red-dark);
}

/* Franja inferior oscura: navegación principal en blanco; hover acento rojo */
.store-theme-roiser .store-header__band--nav .store-nav > a,
.store-theme-roiser .store-header__band--nav .store-nav .store-nav-linklike {
    color: rgba(255, 255, 255, 0.95) !important;
}

.store-theme-roiser .store-header__band--nav .store-nav .store-nav__icon,
.store-theme-roiser .store-header__band--nav .store-nav .store-nav__icon svg {
    color: #ffffff;
    stroke: #ffffff;
}

.store-theme-roiser .store-header__band--nav .store-nav > a:hover,
.store-theme-roiser .store-header__band--nav .store-nav .store-nav-linklike:hover {
    color: var(--store-header-brand-red) !important;
    background: transparent !important;
    text-decoration: underline;
    text-decoration-color: var(--store-header-brand-red);
    text-underline-offset: 4px;
}

.store-theme-roiser .store-header__band--nav .store-nav > a:hover .store-nav__icon,
.store-theme-roiser .store-header__band--nav .store-nav > a:hover .store-nav__icon svg,
.store-theme-roiser .store-header__band--nav .store-nav .store-nav-linklike:hover .store-nav__icon,
.store-theme-roiser .store-header__band--nav .store-nav .store-nav-linklike:hover .store-nav__icon svg {
    color: var(--store-header-brand-red);
    stroke: var(--store-header-brand-red);
}

.store-theme-roiser .store-header__band--nav .store-nav-catalog-dropdown__toggle.dropdown-toggle.show {
    color: var(--store-header-brand-red) !important;
}

.store-theme-roiser .store-header__band--nav .store-nav-catalog-dropdown__toggle.dropdown-toggle.show .store-nav__icon,
.store-theme-roiser .store-header__band--nav .store-nav-catalog-dropdown__toggle.dropdown-toggle.show .store-nav__icon svg {
    color: var(--store-header-brand-red);
    stroke: var(--store-header-brand-red);
}

/* Barra superior roja: enlaces utilitarios discretos */
.store-theme-roiser .store-header__utility-link:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.85);
}

/* Móvil: menú y carrito sobre barra blanca */
.store-theme-roiser .store-header__band--main .store-mobile-menu-btn,
.store-theme-roiser .store-header__band--main .store-mobile-cart {
    background: rgba(229, 57, 53, 0.08);
    color: var(--store-header-brand-red);
}

.store-theme-roiser .store-header__band--main .store-mobile-menu-btn:hover,
.store-theme-roiser .store-header__band--main .store-mobile-cart:hover {
    background: rgba(229, 57, 53, 0.16);
    color: var(--store-header-brand-red-dark);
}

.store-theme-roiser .store-header__band--main .store-mobile-cart .store-nav__icon svg {
    stroke: var(--store-header-brand-red);
}

.store-theme-roiser .store-header__band--main .store-nav-cart__badge {
    background: var(--store-header-brand-red);
    color: #ffffff;
}

.store-theme-roiser .store-header__band--nav .store-mobile-quick-link:hover,
.store-theme-roiser .store-header__band--nav .store-mobile-quick-link:focus-visible {
    color: var(--store-header-brand-red);
    border-color: rgba(229, 57, 53, 0.45);
    background: rgba(255, 255, 255, 0.07);
}

.store-theme-roiser .store-header__band--nav .store-mobile-quick-link:hover i svg {
    stroke: var(--store-header-brand-red);
}

/* ——— Footer: grafito (no bloque rojo) ——— */
.store-theme-roiser .store-footer {
    background: var(--store-surface-graphite) !important;
    border-top: 3px solid var(--store-accent-line);
    color: rgba(255, 255, 255, 0.92);
}

.store-theme-roiser .store-footer__social:hover {
    color: #fff !important;
    opacity: 1;
}

/* Franjas de confianza / beneficios */
.store-theme-roiser .store-trust,
.store-theme-roiser .store-benefits {
    background: var(--store-surface-graphite);
    border-bottom: 2px solid rgba(229, 57, 53, 0.35);
}

/* ——— Drawer catálogo móvil: cabecera grafito ——— */
.store-theme-roiser .catalog-drawer__head,
.store-theme-roiser .store-nav-catalog-offcanvas__head {
    background: var(--store-surface-graphite) !important;
    border-bottom: 2px solid var(--store-accent-line);
}

/* ——— Placeholders: base #2F2A26 (header), solo oscurece hacia los bordes ——— */
.store-theme-roiser .store-carousel__placeholder {
    background: linear-gradient(135deg, #2f2a26 0%, #282420 50%, #1c1917 100%);
}

.store-theme-roiser .store-category-card--home-general .store-category-card__placeholder {
    background: linear-gradient(145deg, #2f2a26 0%, #242019 100%);
}

.store-theme-roiser .store-category-carousel__btn:hover:not(:disabled) {
    color: var(--store-header-brand-red);
    border-color: rgba(229, 57, 53, 0.32);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.09),
        0 2px 8px rgba(229, 57, 53, 0.12);
}

.store-theme-roiser .store-category-carousel__btn:focus-visible {
    outline-color: rgba(229, 57, 53, 0.45);
}

/* ——— Enlaces y hovers con hex fijo antiguo ——— */
.store-theme-roiser .mega-menu__cta:hover,
.store-theme-roiser .store-nav-megamenu__cta:hover {
    color: var(--store-accent) !important;
    border-color: rgba(229, 57, 53, 0.22);
}

.store-theme-roiser .mega-menu-title:hover,
.store-theme-roiser .store-nav-megamenu__cat-title:hover {
    color: var(--store-accent) !important;
}

.store-theme-roiser .mega-menu-link:hover,
.store-theme-roiser .mega-menu__subs a:hover,
.store-theme-roiser .store-nav-megamenu__subs a:hover {
    color: var(--store-accent) !important;
}

.store-theme-roiser .catalog-drawer__cta:hover,
.store-theme-roiser .store-nav-drawer__cta:hover {
    color: var(--store-accent) !important;
    border-color: rgba(229, 57, 53, 0.18);
}

.store-theme-roiser .store-search-suggestion:hover {
    background: rgba(229, 57, 53, 0.06);
}

.store-theme-roiser .store-search-suggestion--all {
    color: var(--store-accent);
}

.store-theme-roiser .store-catalog-breadcrumb__link:hover {
    border-bottom-color: rgba(229, 57, 53, 0.35);
}

/* ——— Detalle de producto: fondo más editorial ——— */
.store-theme-roiser .store-detail {
    background: linear-gradient(180deg, #fafafa 0%, #f7f7f7 40%);
}

.store-theme-roiser .store-detail-buy-card__price {
    color: var(--store-primary);
}

.store-theme-roiser .store-detail-buy-card__price--hero {
    color: var(--store-primary);
}

.store-theme-roiser .store-detail-volume-card {
    border-color: rgba(229, 57, 53, 0.14);
}

.store-theme-roiser .store-detail-applied {
    border-color: rgba(229, 57, 53, 0.24);
}

.store-theme-roiser .store-detail-applied__label {
    border-color: rgba(229, 57, 53, 0.3);
    background: rgba(229, 57, 53, 0.09);
}

.store-theme-roiser .store-detail__panel {
    box-shadow: 0 2px 20px rgba(34, 34, 34, 0.05);
    border-color: #ebebeb;
}

.store-theme-roiser .store-gallery-thumb--active {
    border-color: var(--store-primary);
    box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.2);
}

/* Banner promocional home: grafito alineado al header */
.store-theme-roiser .store-promo-banner--gradient .store-promo-banner__link {
    background: linear-gradient(135deg, #2f2a26 0%, #2a2522 55%, #1e1b18 100%);
    box-shadow: inset 0 -3px 0 var(--store-accent-line);
}

/* ——— Formularios focus (Bootstrap en tienda) ——— */
.store-theme-roiser.store-body .form-control:focus,
.store-theme-roiser.store-body .form-select:focus {
    border-color: rgba(229, 57, 53, 0.55);
    box-shadow: 0 0 0 0.2rem rgba(229, 57, 53, 0.18);
}