/* ================================================================
   BOUTIQUE — Artesanal / Cerámica (layout-boutique)
   ================================================================ */
body.layout-boutique { background: #f7f3ed; }

/* Header chocolate oscuro */
body.layout-boutique header { background: var(--color-primario) !important; box-shadow: none !important; }
body.layout-boutique #category-buttons { background: var(--color-primario-hover) !important; border-top: 1px solid rgba(255,255,255,.05); }
body.layout-boutique .header-logo-text strong { color: var(--color-acento) !important; font-style: italic; letter-spacing: 0.06em; font-family: var(--font-display); }
body.layout-boutique .nav-link-btn, body.layout-boutique .quick-pill, body.layout-boutique .dropdown-btn { color: rgba(200,168,130,.75) !important; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
body.layout-boutique .header-search-wrap { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.13); }
body.layout-boutique .header-search-wrap input { color: #e8d8c0; background: transparent; }
body.layout-boutique .header-search-wrap input::placeholder { color: rgba(200,168,130,.5); }

/* ── Catálogo: GALERÍA — solo imagen, overlay completo en hover ── */
body.layout-boutique .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2rem 1.5rem; max-width: 1060px; margin: 0 auto; }
body.layout-boutique .product {
    background: transparent; border: none; box-shadow: none;
    padding: 0; overflow: hidden; position: relative;
}
body.layout-boutique .product:hover { transform: none; box-shadow: none; }
body.layout-boutique .prod-img-wrap { aspect-ratio: 2/3; border-radius: 0; overflow: hidden; position: relative; margin-bottom: 0; }
/* boutique viene con cards-editorial por defecto (LAYOUT_DEFAULT_CARDS en api.js),
   que fija .product img a height:360px con más especificidad que el height:100%
   de catalog.css — sin este override la imagen no llena el aspect-ratio de arriba
   y queda un hueco gris debajo (donde además terminan cayendo nombre/precio/botón
   al hacer hover, porque se posicionan relativos al alto real de .product). */
body.layout-boutique.cards-editorial .product img { height: 100%; }
/* Gradient overlay: sutil siempre, intenso en hover */
body.layout-boutique .prod-img-wrap::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(42,26,14,.82) 100%);
    opacity: 0.55; transition: opacity 0.4s; pointer-events: none;
}
body.layout-boutique .product:hover .prod-img-wrap::after { opacity: 1; }
body.layout-boutique .product:hover .prod-img-wrap img { transform: scale(1.05); }
/* Nombre y precio: absolutos sobre la imagen, aparecen en hover con fade */
body.layout-boutique .product h3 {
    position: absolute;
    bottom: 3.4rem; left: 0; right: 0; z-index: 10;
    padding: 0 1rem; margin: 0;
    font-family: var(--font-display); font-style: italic; font-size: 1rem; font-weight: 400;
    color: #f7f3ed !important;
    letter-spacing: 0.02em; text-align: center;
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
body.layout-boutique .product p {
    position: absolute;
    bottom: 2.2rem; left: 0; right: 0; z-index: 10;
    padding: 0 1rem; margin: 0;
    font-size: 0.82rem; font-weight: 500; color: rgba(247,243,237,.85) !important;
    text-align: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s 0.04s, transform 0.38s 0.04s cubic-bezier(0.4, 0, 0.2, 1);
}
body.layout-boutique .product:hover h3,
body.layout-boutique .product:hover p { opacity: 1; transform: translateY(0); }
/* Botón desde abajo */
body.layout-boutique .product > button:not(.quantity-controls button) {
    position: absolute;
    bottom: 0; left: 0; right: 0; z-index: 11;
    background: var(--color-primario); color: #f7f3ed;
    border-radius: 0; border: none;
    font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0.7rem 1rem; margin: 0; width: 100%;
    opacity: 0;
    transition: opacity 0.3s 0.06s, background 0.18s;
}
body.layout-boutique .product:hover > button:not(.quantity-controls button) { opacity: 1; }
body.layout-boutique .product > button:not(.quantity-controls button):hover { background: var(--color-primario-hover); opacity: 1; }
body.layout-boutique .product .quantity-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0; z-index: 11;
    background: rgba(42,26,14,.92); border-radius: 0;
    margin: 0; width: 100%;
    /* Siempre visible: solo existe cuando el producto ya está en el carrito,
       y ocultarlo hasta el hover hacía imposible descubrir cómo quitarlo */
    opacity: 1;
    transition: opacity 0.3s 0.06s;
}
/* El stepper tiene fondo oscuro: número y botones deben ser claros, y el
   hover del botón no puede ser blanco pleno (taparía el signo) */
body.layout-boutique .product .quantity-controls button { color: #f7f3ed; border-radius: 0; }
body.layout-boutique .product .quantity-controls span { color: #f7f3ed; }
body.layout-boutique .product .quantity-controls button:hover { background: rgba(247,243,237,.18); box-shadow: none; }

/* Titulos: serif italic, sin uppercase */
body.layout-boutique .seccion-titulo { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.1rem; color: var(--color-acento-text); text-transform: none; letter-spacing: 0.02em; border-bottom: none; padding-bottom: 0; text-align: center; margin-bottom: 1.4rem; }
body.layout-boutique .category-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.7rem; color: var(--color-primario); border-bottom: none; text-align: center; letter-spacing: 0.02em; text-transform: none; }
body.layout-boutique .category-section { padding: 0.5rem 0.8rem 2rem; }
body.layout-boutique .strip-info { background: var(--color-primario); color: var(--color-acento); }
body.layout-boutique .strip-item strong, body.layout-boutique .strip-item span, body.layout-boutique .strip-item { color: var(--color-acento) !important; border-color: rgba(200,168,130,.2) !important; }
body.layout-boutique .precio-actual { color: var(--color-acento-text) !important; font-weight: 600; }
body.layout-boutique .cart-checkout-btn { background: var(--color-primario); border-radius: 0; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }
body.layout-boutique .cart-checkout-btn:hover { background: var(--color-primario-hover); }

/* Touch/mobile: sin hover → texto y botón siempre visibles */
@media (hover: none), (max-width: 600px) {
    body.layout-boutique .product h3 {
        position: static; opacity: 1 !important; transform: none !important;
        color: var(--color-primario) !important; padding: 0.7rem 0.5rem 0.1rem;
        text-shadow: none;
    }
    body.layout-boutique .product p {
        position: static; opacity: 1 !important; transform: none !important;
        color: var(--color-acento-text) !important; padding: 0 0.5rem 0.8rem;
    }
    body.layout-boutique .product > button:not(.quantity-controls button) {
        position: static; opacity: 1 !important; width: 100%; margin: 0;
    }
    body.layout-boutique .quantity-controls {
        position: static; opacity: 1 !important; width: 100%;
        background: rgba(42,26,14,.08);
    }
    /* En mobile el stepper es claro → botones y número oscuros (si quedaran
       claros como en desktop, el − y el + serían invisibles) */
    body.layout-boutique .quantity-controls button { color: var(--color-primario); }
    body.layout-boutique .quantity-controls span { color: var(--color-primario); }
    body.layout-boutique .quantity-controls button:hover { background: rgba(42,26,14,.12); }
    body.layout-boutique .prod-img-wrap::after { display: none; }
}

/* ── PRODUCTO DETALLE: panel con info AL PIE — como etiqueta de galería ── */
body.layout-boutique .pd-ab-hero {
    grid-template-columns: 55fr 45fr;
    max-width: 1200px;
    min-height: 75vh;
}
body.layout-boutique .pd-ab-images { background: #ede8e0; }
body.layout-boutique .pd-ab-panel {
    background: #f7f3ed;
    border-left: 1px solid #d4c5b0;
    padding: 2rem 3.5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
body.layout-boutique .pd-ab-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.9rem, 3vw, 2.9rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--color-primario);
    margin-bottom: 1.4rem;
}
body.layout-boutique .pd-price { color: var(--color-acento-text) !important; font-weight: 300; font-size: 1.6rem; }
body.layout-boutique .pd-ab-rule { background: rgba(42,26,14,.12); }
body.layout-boutique .pd-ab-btn-main {
    background: var(--color-primario); border-radius: 0;
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    height: 50px;
}
body.layout-boutique .pd-ab-btn-main:hover:not(:disabled) { background: var(--color-primario-hover); opacity: 1; }
body.layout-boutique .pd-ab-btn-main.agregado { background: #15803d; }
body.layout-boutique .pd-variante-pill { border-radius: 0; border-color: rgba(42,26,14,.3); }
body.layout-boutique .pd-variante-pill.active { background: var(--color-primario); border-color: var(--color-primario); }
body.layout-boutique .pd-ab-qty { border-radius: 0; }
body.layout-boutique .pd-ab-wsp-link:hover { color: var(--color-primario); border-color: var(--color-primario); }
body.layout-boutique .pd-ab-editorial { background: #f7f3ed; }
body.layout-boutique .pd-ab-editorial-body { font-family: var(--font-display); font-style: italic; color: rgba(42,26,14,.6); }
body.layout-boutique .pd-ab-related-section,
body.layout-boutique .pd-ab-reviews-section,
body.layout-boutique .pd-ab-cta { background: #f7f3ed; }
body.layout-boutique .pd-car-thumbs { background: rgba(237,232,224,0.9); border-color: rgba(42,26,14,.08); }

/* ── HERO: galería de arte, serif italic dramático ── */
body.layout-boutique .hero-section {
    min-height: 520px;
    background: var(--color-primario);
}
body.layout-boutique .hero-content { max-width: 640px; padding: 5rem 2rem; }
body.layout-boutique .hero-tag {
    background: transparent;
    border: 1px solid rgba(200,168,130,.3);
    color: rgba(200,168,130,.75);
    letter-spacing: 0.2em;
    font-size: 0.6rem;
    border-radius: 0;
    backdrop-filter: none;
}
body.layout-boutique .hero-titulo {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.6rem, 5.5vw, 5rem);
    letter-spacing: -0.01em;
    line-height: 1.08;
    color: #f7f3ed;
    margin-bottom: 1.2rem;
}
body.layout-boutique .hero-sub {
    font-family: var(--font-display);
    font-style: italic;
    color: rgba(200,168,130,.6);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-bottom: 2.2rem;
}
body.layout-boutique .hero-cta {
    background: transparent;
    border: 1px solid rgba(200,168,130,.45);
    color: var(--color-acento);
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.85rem 2.4rem;
}
body.layout-boutique .hero-cta:hover { background: rgba(200,168,130,.1); filter: none; }
body.layout-boutique .hero-section.has-hero-bg .hero-overlay {
    background: rgba(42,26,14,.68) !important;
}

/* ── CATEGORÍAS: artesanal, sin caja, serif italic ── */
body.layout-boutique .categorias-visuales { padding: 1.5rem 1.2rem 0.5rem; }
body.layout-boutique .cat-visual-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(42,26,14,.1);
    border-radius: 0;
    padding: 0.9rem 0.4rem 0.8rem;
    gap: 0.25rem;
}
body.layout-boutique .cat-visual-card:hover {
    background: rgba(42,26,14,.04);
    border-color: rgba(42,26,14,.2);
    box-shadow: none;
}
body.layout-boutique .cat-visual-nombre {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-primario);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}
body.layout-boutique .cat-visual-count { color: #9a7a5a; font-size: 0.65rem; }

/* ── Carrito acorde al tema ── */
body.layout-boutique .header-cart-btn { background: var(--color-acento) !important; color: var(--color-primario) !important; border-radius: 0; letter-spacing: .08em; box-shadow: none; }
body.layout-boutique .header-cart-btn:hover { background: var(--color-acento) !important; border-radius: 0; }
body.layout-boutique #cart-count { background: var(--color-primario); color: #f7f3ed; border-radius: 0; }
body.layout-boutique .cart-header { background: var(--color-primario); }