/* theme.css - Paleta cálida (hueso) para las páginas públicas de la tienda.
   Mismos tonos que el inicio (home.css): fondo hueso, tarjetas blancas, acentos negros.
   Se carga después de la hoja propia de cada página; los paneles internos
   (admin, bodega) no la usan. */

:root {
    --m-bg: #faf8f5;      /* fondo de la página */
    --m-card: #ffffff;    /* tarjetas y paneles */
    --m-soft: #f1ede7;    /* recuadros de fotos de productos */
    --m-alt: #f3efe9;     /* secciones alternas y pie */
    --m-line: #e7e2da;
    --m-ink: #141414;
    --m-muted: #6e6a64;

    /* Variables antiguas de styles.css que usan las páginas */
    --secondary-white: var(--m-soft);
    --border-color: var(--m-line);
    --light-gray: var(--m-line);
}

body {
    background: var(--m-bg);
}

/* ---------- Encabezado y franja de envío ---------- */
.header {
    background: var(--m-bg);
    box-shadow: none;
    border-bottom: 1px solid var(--m-line);
}

.shipping-banner {
    background: var(--m-ink);
}

.shipping-banner p,
.shipping-banner-close {
    color: #fff;
}

/* Logo con fondo blanco: se integra al fondo hueso */
.logo,
.mobile-nav-logo,
.auth-logo img {
    mix-blend-mode: multiply;
}

/* ---------- Contenedores de página ---------- */
.auth-body,
.products-section,
.featured-carousel,
.brand-showcase-section,
.checkout-container,
.orders-container,
.account-page,
.pay-result,
.legal-body,
.search-container,
.filters-container,
.brands-rail-container,
.featured-products {
    background: var(--m-bg);
}

/* ---------- Tarjetas blancas con borde cálido ---------- */
.product-card,
.order-card,
.account-card,
.pay-card,
.auth-card {
    background: var(--m-card);
    border-color: var(--m-line);
}

.product-card {
    border: 1px solid var(--m-line);
    box-shadow: none;
}

.product-card:hover {
    box-shadow: 0 10px 30px rgba(20, 20, 20, 0.06);
}

.product-image {
    background: var(--m-soft);
}

/* La foto va sin fondo propio: con multiply su blanco toma el tono del recuadro. Si la foto
   también tuviera fondo hueso, los márgenes quedarían hueso × hueso (más oscuros que la foto) */
.product-real-image {
    background: transparent;
    mix-blend-mode: multiply;
}

/* Chips de filtros sobre el fondo hueso */
.filter-btn {
    background: transparent;
    border-color: var(--m-line);
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--m-ink);
    border-color: var(--m-ink);
    color: #fff;
}

/* ---------- Pie ---------- */
.footer,
.pay-result + .footer {
    background: var(--m-alt);
    border-top: 1px solid var(--m-line);
    color: var(--m-muted);
}

@media (max-width: 600px) {
    .pay-result {
        background: var(--m-bg);
    }
}