/* ================================================================
   NOCHE — Lujo oscuro / Gold (layout-noche)
   ================================================================ */
body.layout-noche { background: var(--color-fondo-claro); color: #e8e0d5; }

body.layout-noche header { background: #120f22 !important; box-shadow: 0 1px 0 rgba(201,168,76,.12), 0 4px 20px rgba(0,0,0,.4) !important; }
body.layout-noche #category-buttons { background: var(--color-fondo-claro) !important; border-top: 1px solid rgba(201,168,76,.08) !important; }
body.layout-noche .header-logo-text strong { color: var(--color-primario) !important; letter-spacing: 0.06em; }
body.layout-noche .nav-link-btn, body.layout-noche .quick-pill, body.layout-noche .dropdown-btn { color: rgba(232,224,213,.78) !important; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
body.layout-noche .nav-link-btn:hover, body.layout-noche .quick-pill:hover { color: var(--color-primario) !important; opacity: 1; }
body.layout-noche .header-search-wrap { background: rgba(255,255,255,.04); border-color: rgba(201,168,76,.14); }
body.layout-noche .header-search-wrap input { color: #e8e0d5; background: transparent; }
body.layout-noche .header-search-wrap input::placeholder { color: rgba(232,224,213,.28); }

/* ── Catálogo: editorial retrato, texto + botón superpuesto sobre imagen ── */
body.layout-noche .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.6rem; }
body.layout-noche .product {
    background: transparent !important;
    border-radius: 10px; border: none !important;
    overflow: hidden; padding: 0; position: relative;
    box-shadow: 0 4px 24px rgba(0,0,0,.35);
    transition: transform .3s ease, box-shadow .3s ease;
}
body.layout-noche .product:hover { transform: scale(1.02); box-shadow: 0 10px 40px rgba(201,168,76,.18); }
body.layout-noche .prod-img-wrap { aspect-ratio: 2/3; border-radius: 0; background: #120f22; position: relative; }
body.layout-noche .prod-img-wrap::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 65%;
    background: linear-gradient(0deg, var(--color-fondo-claro) 0%, rgba(12,10,20,0) 100%);
    pointer-events: none; z-index: 1;
}
body.layout-noche .product h3 {
    position: absolute; bottom: 3.6rem; left: 0; right: 0;
    padding: 0 1rem;
    font-size: 0.62rem; font-weight: 400;
    color: rgba(232,224,213,.72) !important;
    letter-spacing: 0.16em; text-transform: uppercase;
    margin: 0; z-index: 2;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;
}
body.layout-noche .product p {
    position: absolute; bottom: 0.7rem; left: 1rem; right: 1rem;
    font-size: 1.45rem; font-weight: 700; color: var(--color-primario) !important;
    letter-spacing: -0.01em; margin: 0; padding: 0; z-index: 2;
}
body.layout-noche .product > button:not(.quantity-controls button) {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--color-primario); color: var(--color-fondo-claro);
    border: none; border-radius: 0;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 0.82rem; margin: 0; width: 100%;
    transform: translateY(101%); transition: transform .28s ease;
    opacity: 1; z-index: 3;
}
body.layout-noche .product:hover > button:not(.quantity-controls button) { transform: translateY(0); }
body.layout-noche .product .quantity-controls {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(12,10,20,.94); border-top: 1px solid rgba(201,168,76,.18);
    border-radius: 0; margin: 0; width: 100%; z-index: 4;
}
body.layout-noche .product .quantity-controls button { color: var(--color-primario); }
body.layout-noche .product .quantity-controls span { color: #e8e0d5; }
/* Relacionados: restaurar layout normal */
body.layout-noche .pd-ab-related-section .product,
body.layout-noche .pd-ab-rec-track .product { position: static !important; padding: 0 0 1rem !important; box-shadow: 0 3px 16px rgba(0,0,0,.3) !important; }
body.layout-noche .pd-ab-related-section .product h3,
body.layout-noche .pd-ab-rec-track .product h3 { position: static !important; background: none !important; padding: 0.7rem 0.9rem 0.15rem !important; -webkit-line-clamp: unset !important; letter-spacing: 0.1em; text-transform: uppercase; }
body.layout-noche .pd-ab-related-section .product p,
body.layout-noche .pd-ab-rec-track .product p { position: static !important; background: none !important; padding: 0 0.9rem 0.5rem !important; font-size: 1.1rem !important; }
body.layout-noche .pd-ab-related-section .product > button:not(.quantity-controls button),
body.layout-noche .pd-ab-rec-track .product > button:not(.quantity-controls button) { position: static !important; transform: none !important; border-radius: 3px !important; margin: 0 0.9rem !important; width: calc(100% - 1.8rem) !important; background: transparent !important; color: var(--color-primario) !important; border: 1px solid rgba(201,168,76,.3) !important; }
body.layout-noche .pd-ab-related-section .quantity-controls,
body.layout-noche .pd-ab-rec-track .quantity-controls { position: static !important; border-top: none !important; margin: 0 0.9rem !important; width: calc(100% - 1.8rem) !important; }
body.layout-noche .pd-ab-related-section .prod-img-wrap { aspect-ratio: 2/3; }
@media (hover: none) { body.layout-noche .product > button:not(.quantity-controls button) { transform: translateY(0); } }

body.layout-noche .seccion-titulo { color: rgba(201,168,76,.5); border-bottom-color: rgba(201,168,76,.1); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; }
body.layout-noche .category-title { color: var(--color-primario); border-bottom-color: rgba(201,168,76,.18); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; }
body.layout-noche .strip-info { background: #120f22; border-bottom: 1px solid rgba(201,168,76,.08); }
body.layout-noche .strip-item, body.layout-noche .strip-item strong, body.layout-noche .strip-item span { color: rgba(232,224,213,.45) !important; border-color: rgba(201,168,76,.07) !important; }
body.layout-noche .precio-actual { color: var(--color-primario) !important; }
body.layout-noche .cart-checkout-btn { background: var(--color-primario); color: var(--color-fondo-claro); border-radius: 3px; font-weight: 700; }
body.layout-noche .cart-checkout-btn:hover { background: var(--color-acento); }
body.layout-noche .cat-visual-card { background: rgba(26,22,40,.8); border: 1px solid rgba(201,168,76,.1); border-radius: 10px; }
body.layout-noche .cat-visual-card:hover { border-color: rgba(201,168,76,.38); box-shadow: 0 4px 16px rgba(201,168,76,.1); background: rgba(26,22,40,1); }
body.layout-noche .cat-visual-nombre { color: rgba(232,224,213,.75) !important; }
body.layout-noche .cat-visual-count { color: rgba(201,168,76,.45); }

/* ── Hero ── */
body.layout-noche .hero-section { min-height: 500px; background: linear-gradient(135deg, var(--color-fondo-claro) 0%, #1a1030 55%, #0f0c1a 100%); }
body.layout-noche .hero-content { max-width: 620px; padding: 5.5rem 3rem; }
body.layout-noche .hero-tag { background: rgba(201,168,76,.07); border: 1px solid rgba(201,168,76,.18); color: var(--color-primario); font-size: 0.56rem; letter-spacing: 0.3em; border-radius: 2px; backdrop-filter: none; }
body.layout-noche .hero-titulo { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 300; letter-spacing: 0.04em; color: #e8e0d5; line-height: 1.15; margin-bottom: 1.2rem; }
body.layout-noche .hero-sub { color: rgba(232,224,213,.38); font-size: 0.84rem; font-weight: 300; margin-bottom: 2.6rem; }
body.layout-noche .hero-cta { background: var(--color-primario); color: var(--color-fondo-claro); border-radius: 2px; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.9rem 2.4rem; }
body.layout-noche .hero-cta:hover { background: var(--color-acento); filter: none; }
body.layout-noche .hero-section.has-hero-bg .hero-overlay { background: rgba(12,10,20,.72) !important; }

/* ── Producto detalle: panel izq, imagen der — full height ── */
body.layout-noche .pd-ab-hero { grid-template-columns: 42fr 58fr; max-width: 1240px; background: #120f22; min-height: 82vh; margin: 0 auto; }
body.layout-noche .pd-ab-images { grid-column: 2; grid-row: 1; background: var(--color-fondo-claro); }
body.layout-noche .pd-carousel-frame { min-height: 82vh; max-height: 88vh; }
body.layout-noche .pd-ab-main-img { min-height: 82vh; max-height: 88vh; }
body.layout-noche .pd-ab-panel { grid-column: 1; grid-row: 1; background: #120f22; border-right: 1px solid rgba(201,168,76,.1); border-left: none; border-top: none; padding: 4.5rem 3.5rem; display: flex; flex-direction: column; justify-content: center; }
body.layout-noche .pd-ab-title { color: #e8e0d5; font-weight: 300; letter-spacing: 0.03em; font-size: clamp(1.8rem, 2.8vw, 2.8rem); line-height: 1.18; }
body.layout-noche .pd-price { color: var(--color-primario) !important; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.01em; }
body.layout-noche .pd-price-anterior { color: rgba(232,224,213,.22) !important; }
body.layout-noche .pd-off-badge { color: var(--color-primario) !important; background: rgba(201,168,76,.1) !important; border-radius: 2px; }
body.layout-noche .pd-ab-rule { background: rgba(201,168,76,.1); }
body.layout-noche .pd-tag { color: rgba(232,224,213,.3); }
body.layout-noche .pd-ab-payment-hint { color: rgba(232,224,213,.3); }
body.layout-noche .pd-ab-btn-main { background: var(--color-primario); color: var(--color-fondo-claro); border-radius: 2px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; height: 52px; transition: background .2s, box-shadow .2s; }
body.layout-noche .pd-ab-btn-main:hover:not(:disabled) { background: var(--color-acento); opacity: 1; box-shadow: 0 4px 20px rgba(201,168,76,.3); }
body.layout-noche .pd-ab-btn-main.agregado { background: #15803d; color: #fff; }
body.layout-noche .pd-ab-btn-main:disabled, body.layout-noche .pd-ab-btn-main.pd-btn-disabled { background: rgba(255,255,255,.07); color: rgba(255,255,255,.18); box-shadow: none; }
body.layout-noche .pd-variante-label { color: rgba(232,224,213,.32); }
body.layout-noche .pd-variante-pill { border-color: rgba(201,168,76,.18); color: rgba(232,224,213,.55); }
body.layout-noche .pd-variante-pill:hover:not(.sin-stock):not(.active) { border-color: rgba(201,168,76,.55); color: #e8e0d5; }
body.layout-noche .pd-variante-pill.active { background: var(--color-primario); border-color: var(--color-primario); color: var(--color-fondo-claro); }
body.layout-noche .pd-ab-qty { border-color: rgba(201,168,76,.18); }
body.layout-noche .pd-ab-qty-btn { color: rgba(232,224,213,.45); }
body.layout-noche .pd-ab-qty-num { color: #e8e0d5; border-color: rgba(201,168,76,.14); }
body.layout-noche .pd-ab-wsp-link { color: rgba(232,224,213,.38); border-bottom-color: rgba(201,168,76,.14); }
body.layout-noche .pd-ab-wsp-link:hover { color: var(--color-primario); border-color: var(--color-primario); }
body.layout-noche .pd-ab-secondary-actions .pd-ab-action-link { background: rgba(255,255,255,.04); border-color: rgba(201,168,76,.1); color: rgba(232,224,213,.38); }
body.layout-noche .pd-ab-action-link:hover { background: rgba(201,168,76,.07); border-color: rgba(201,168,76,.28); color: #e8e0d5; }
body.layout-noche .pd-ab-secondary-actions .pd-ab-action-link.pd-fav-btn.activo { background: rgba(201,168,76,.15); border-color: rgba(201,168,76,.4); color: var(--color-primario); }
body.layout-noche .pd-ab-editorial { background: var(--color-fondo-claro); }
body.layout-noche .pd-ab-editorial-body { color: rgba(232,224,213,.45); }
body.layout-noche .pd-ab-editorial-label { color: rgba(201,168,76,.28); }
body.layout-noche .pd-ab-related-section, body.layout-noche .pd-ab-reviews-section, body.layout-noche .pd-ab-cta { background: var(--color-fondo-claro); }
body.layout-noche .pd-ab-section-label { color: rgba(201,168,76,.32); }
body.layout-noche .pd-ab-cta-link { color: var(--color-primario); }
body.layout-noche .pd-ab-nav { background: #120f22; border-bottom-color: rgba(201,168,76,.07); }
body.layout-noche .pd-ab-back { color: rgba(232,224,213,.3); }
body.layout-noche .pd-ab-back:hover { color: var(--color-primario); }
body.layout-noche .pd-breadcrumb { color: rgba(232,224,213,.2); }
body.layout-noche .pd-breadcrumb a { color: rgba(232,224,213,.38); }
body.layout-noche .pd-breadcrumb a:hover { color: var(--color-primario); }
body.layout-noche .pd-breadcrumb span { color: rgba(232,224,213,.14); }
body.layout-noche .pd-ab-delivery-row dt { color: rgba(232,224,213,.3); }
body.layout-noche .pd-ab-delivery-row dd { color: rgba(232,224,213,.62); }
body.layout-noche .pd-ab-rec-arrow { border-color: rgba(201,168,76,.14); color: rgba(201,168,76,.4); }
body.layout-noche .pd-ab-rec-arrow:hover { border-color: rgba(201,168,76,.45); color: var(--color-primario); }
body.layout-noche .pd-car-thumbs { background: rgba(18,15,34,.9); border-color: rgba(201,168,76,.1); }
body.layout-noche .pd-car-thumb { border-color: transparent; }
body.layout-noche .pd-car-thumb.active, body.layout-noche .pd-car-thumb:hover { border-color: var(--color-primario); }
body.layout-noche .pd-ab-restock { background: rgba(255,255,255,.03); border-color: rgba(201,168,76,.1); }
body.layout-noche .pd-ab-restock-input { background: rgba(255,255,255,.05); color: #e8e0d5; border-color: rgba(201,168,76,.14); }
body.layout-noche .pd-ab-restock-input::placeholder { color: rgba(232,224,213,.25); }
body.layout-noche .pd-ab-aviso { color: var(--color-primario); }

@media (max-width: 820px) {
    body.layout-noche .pd-ab-hero { grid-template-columns: 1fr; min-height: unset; background: var(--color-fondo-claro); }
    body.layout-noche .pd-ab-images { grid-column: 1; grid-row: 1; }
    body.layout-noche .pd-carousel-frame { min-height: 56vw; max-height: 60vh; }
    body.layout-noche .pd-ab-main-img { min-height: 56vw; max-height: 60vh; }
    body.layout-noche .pd-ab-panel { grid-column: 1; grid-row: 2; border-right: none; border-top: 1px solid rgba(201,168,76,.08); padding: 2rem 1.5rem; justify-content: flex-start; }
}

/* ── Carrito acorde al tema ── */
body.layout-noche .header-cart-btn { background: var(--color-primario) !important; color: var(--color-fondo-claro) !important; border-radius: 3px; font-weight: 700; box-shadow: none; }
body.layout-noche .header-cart-btn:hover { background: var(--color-acento) !important; }
body.layout-noche #cart-count { background: var(--color-fondo-claro); color: var(--color-primario); border-radius: 3px; }
body.layout-noche .cart-header { background: #120f22; }