/* ==========================================================================
   Storefront "Depth" — lienzo gris perla + tarjetas blancas flotantes.
   Prueba de diseño: para revertir basta quitar el <link> en layout/head.php.
   ========================================================================== */
:root {
    --sp-canvas: #f5f5f7;                 /* gris perla neutro (sin matiz azul) */
    --sp-surface: #ffffff;                /* superficie de tarjetas */
    --sp-hairline: rgba(17, 17, 26, 0.06);
    --sp-hairline-hover: rgba(17, 17, 26, 0.10);
    --sp-shadow-rest: 0 1px 2px rgba(17, 17, 26, 0.04), 0 6px 20px rgba(17, 17, 26, 0.05);
    --sp-shadow-hover: 0 2px 6px rgba(17, 17, 26, 0.05), 0 18px 44px rgba(17, 17, 26, 0.11);
    --sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1. Lienzo general */
html body,
html body #main-content { background-color: var(--sp-canvas) !important; }

/* 2-4. Todas las tarjetas/recuadros de la tienda: blanco puro sobre el lienzo */
body .store-product-card,
body .category-card,
body .sp-brand-chip,
body .sp-trust-item,
body .sp-arma-card,
body .search-card,
body .nl-brand,
body .nl-why-item,
body .nl-video,
body .product-container,
body #main-content .card {
    background: var(--sp-surface) !important;
    border: 1px solid var(--sp-hairline) !important;
    box-shadow: var(--sp-shadow-rest) !important;
    transition: transform .45s var(--sp-ease), box-shadow .45s var(--sp-ease), border-color .45s var(--sp-ease) !important;
}

/* Hover: la sombra se intensifica y la tarjeta se eleva levemente (sin brillo de color) */
body .store-product-card:hover, body .store-product-card:focus-within,
body .category-card:hover, body .category-card:focus-within,
body .sp-brand-chip:hover, body .sp-brand-chip:focus-visible,
body .sp-trust-item:hover,
body .sp-arma-card:hover,
body .search-card:hover,
body .nl-brand:hover,
body .nl-why-item:hover {
    background: var(--sp-surface) !important;
    border-color: var(--sp-hairline-hover) !important;
    box-shadow: var(--sp-shadow-hover) !important;
    transform: translateY(-4px);
}

/* Seleccion activa: conserva el acento de marca, de forma discreta */
body .category-card.active,
body .sp-brand-chip.active {
    background: var(--sp-surface) !important;
    border-color: var(--primary) !important;
    box-shadow: var(--sp-shadow-hover) !important;
}

/* El contenedor de la ficha de producto no "flota" al pasar el mouse */
body .product-container:hover { transform: none; box-shadow: var(--sp-shadow-rest) !important; }

/* Filtros / pastillas de categoria: blancas con sombra minima */
body .sp-filter-pill:not(.offers),
body .btn-cat-text:not(.active) {
    background: var(--sp-surface) !important;
    border-color: var(--sp-hairline) !important;
    box-shadow: 0 1px 2px rgba(17, 17, 26, 0.04);
}
body .sp-filter-pill:not(.offers):hover,
body .btn-cat-text:not(.active):hover {
    border-color: var(--primary) !important;
    box-shadow: 0 6px 16px rgba(17, 17, 26, 0.08);
}

/* Imagen dentro de tarjeta: integrada al blanco */
body .store-product-card .img-container { background: var(--sp-surface) !important; }
body .store-product-card:hover .img-container { filter: none; }

@media (prefers-reduced-motion: reduce) {
    body .store-product-card, body .category-card, body .sp-brand-chip { transition: none !important; transform: none !important; }
}