/* ====================================================================
   TEMAS Y VARIANTES
   Se carga DESPUÉS de landing.css, así que manda sobre ella.

   Las variables de cada tema (radios, escala, sombras) las inyecta PHP
   en un <style> con wt_css(). Aquí van solo los cambios de estructura
   que no se pueden expresar con variables.
   ==================================================================== */


/* ── Portada: variante CENTRADA ──────────────────────────────────────
   Sin imagen. Sirve cuando la marca no tiene fotos decentes, que es el
   caso más común en un cliente nuevo. */
.hero-centrado .hero-media,
.hero-centrado .hero-image,
.hero-centrado .hero-visual { display: none !important; }

.hero-centrado .hero-inner,
.hero-centrado .hero-grid {
    display: block !important;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.hero-centrado .hero-title    { margin-inline: auto; }
.hero-centrado .hero-subtitle { margin-inline: auto; max-width: 620px; }
.hero-centrado .hero-actions,
.hero-centrado .hero-badges,
.hero-centrado .hero-stats    { justify-content: center; }


/* ── Portada: variante COMPACTA ──────────────────────────────────────
   Franja baja para que el catálogo entre casi sin desplazar. */
.hero-compacto .hero          { padding-block: var(--s10) var(--s8) !important; }
.hero-compacto .hero-title    { font-size: var(--text-4xl) !important; line-height: 1.15; }
.hero-compacto .hero-subtitle { font-size: var(--text-base) !important; }
.hero-compacto .hero-media,
.hero-compacto .hero-visual   { display: none !important; }
.hero-compacto .hero-stats,
.hero-compacto .hero-badges   { display: none !important; }
.hero-compacto .hero-inner,
.hero-compacto .hero-grid     { display: block !important; }


/* ── Catálogo: variante LISTA ────────────────────────────────────────
   Filas en vez de tarjetas. Rinde mejor con catálogos largos y con
   productos sin foto. */
.cat-lista .productos-grid,
.cat-lista .product-grid {
    display: block !important;
}
.cat-lista .product-card {
    display: flex !important;
    align-items: center;
    gap: var(--s4);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-sm);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: none !important;
}
.cat-lista .product-card:hover { background: var(--gray-50); transform: none !important; }
.cat-lista .product-image,
.cat-lista .product-img {
    width: 68px; height: 68px; min-width: 68px;
    border-radius: var(--r-sm); overflow: hidden;
}
.cat-lista .product-body { flex: 1; min-width: 0; }
.cat-lista .product-title {
    font-size: var(--text-base);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ── Catálogo: SOLO CATEGORÍAS ───────────────────────────────────────
   Oculta la rejilla de productos y deja los rubros. Útil cuando el
   catálogo aún está a medio cargar. */
.cat-categorias #productos,
.cat-categorias .productos-section { display: none !important; }


/* ── Modo VITRINA: sin carrito ni cotizador ─────────────────────────
   Cuando el negocio no vende por pedido armado. */
.modo-vitrina .cart-drawer,
.modo-vitrina .cart-fab,
.modo-vitrina .cart-badge,
.modo-vitrina .btn-add-cart,
.modo-vitrina .btn-cotizar,
.modo-vitrina [data-cart] { display: none !important; }


/* ── Ajustes de estructura por tema ─────────────────────────────────
   Lo que no cabe en una variable. */

/* Corporativo: sin degradados, bordes en vez de sombras */
.tema-corporativo .hero {
    background: var(--gray-900) !important;
}
.tema-corporativo .card,
.tema-corporativo .product-card,
.tema-corporativo .pack-card {
    border: 1px solid var(--gray-200);
}

/* Comercial: acentos llamativos en los precios */
.tema-comercial .product-price,
.tema-comercial .pack-price { color: var(--primary) !important; font-weight: 900; }
.tema-comercial .btn-primary { font-weight: 800; letter-spacing: .2px; }

/* Minimalista: fondos planos, sin bloques grises alternados */
.tema-minimalista .section-py { background: #fff !important; }
.tema-minimalista .card,
.tema-minimalista .product-card,
.tema-minimalista .pack-card {
    border: 1px solid var(--gray-200);
    box-shadow: none !important;
}
.tema-minimalista .hero {
    background: #fff !important;
    color: var(--gray-900) !important;
    border-bottom: 1px solid var(--gray-200);
}
.tema-minimalista .hero-title,
.tema-minimalista .hero-subtitle { color: var(--gray-900) !important; }


/* ── Estados vacíos ─────────────────────────────────────────────────
   Una marca nueva tiene poco contenido. Antes que verse rota, se ve
   escasa pero ordenada. */
.web-vacia .section-py { padding-block: var(--s10) !important; }

.estado-vacio {
    text-align: center;
    padding: var(--s10) var(--s4);
    color: var(--gray-500);
    font-size: var(--text-base);
    border: 1px dashed var(--gray-300);
    border-radius: var(--r-lg);
    background: var(--gray-50);
}

/* Con muy pocos productos, la rejilla se centra en vez de estirarse */
.pocos-productos .productos-grid,
.pocos-productos .product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    justify-content: center;
}


/* ── Móvil ──────────────────────────────────────────────────────────
   Vale para todos los temas. */
@media (max-width: 640px) {
    .hero-title    { font-size: var(--text-4xl) !important; }
    .hero-subtitle { font-size: var(--text-base) !important; }
    .section-title { font-size: var(--text-3xl) !important; }

    .hero-inner, .hero-grid { display: block !important; text-align: center; }
    .hero-actions { flex-direction: column; gap: var(--s2); }
    .hero-actions .btn { width: 100%; }

    .cat-lista .product-image,
    .cat-lista .product-img { width: 54px; height: 54px; min-width: 54px; }
}