/* ================================================================
   CAFÉ — Artesanal / Cálido (layout-cafe)
   ================================================================ */
body.layout-cafe { background: #faf6f0; }

body.layout-cafe header { background: var(--color-primario) !important; box-shadow: 0 2px 12px rgba(44,24,16,.22) !important; }
body.layout-cafe #category-buttons { background: var(--color-primario-hover) !important; border-top: 1px solid rgba(255,255,255,.07) !important; }
body.layout-cafe .header-logo-text strong { color: #f4c88a !important; font-weight: 600; }
body.layout-cafe .nav-link-btn, body.layout-cafe .quick-pill, body.layout-cafe .dropdown-btn { color: rgba(244,200,138,.65) !important; }
body.layout-cafe .nav-link-btn:hover, body.layout-cafe .quick-pill:hover { color: #f4c88a !important; opacity: 1; }
body.layout-cafe .header-search-wrap { background: rgba(255,255,255,.09); border-color: rgba(244,200,138,.18); }
body.layout-cafe .header-search-wrap input { color: #faf6f0; background: transparent; }
body.layout-cafe .header-search-wrap input::placeholder { color: rgba(244,200,138,.35); }

/* ── Catálogo: cards cálidas redondeadas ── */
body.layout-cafe .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.6rem; }
body.layout-cafe .product {
    background: #fff !important;
    border-radius: 18px; border: 1px solid rgba(176,100,48,.1);
    box-shadow: 0 2px 10px rgba(60,30,10,.06);
    padding: 0 0 1rem; overflow: hidden;
    transition: box-shadow .22s ease, transform .22s ease;
}
body.layout-cafe .product:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(60,30,10,.13); }
body.layout-cafe .prod-img-wrap { aspect-ratio: 4/3; border-radius: 0; background: #f5ede4; }
body.layout-cafe .product h3 { padding: 0.75rem 0.9rem 0.15rem; font-size: 0.88rem; font-weight: 500; color: var(--color-primario) !important; line-height: 1.32; margin: 0; }
body.layout-cafe .product p { padding: 0 0.9rem 0.65rem; font-size: 1.05rem; font-weight: 700; color: var(--color-acento) !important; margin: 0; letter-spacing: -0.01em; }
body.layout-cafe .product > button:not(.quantity-controls button) {
    background: var(--color-primario); color: #f4c88a; border-radius: 10px;
    font-size: 0.78rem; font-weight: 600;
    padding: 0.6rem 0.8rem; margin: 0 0.9rem; width: calc(100% - 1.8rem);
    transition: background .18s ease, box-shadow .18s ease, transform .15s ease;
    box-shadow: 0 2px 6px rgba(44,24,16,.2);
}
body.layout-cafe .product > button:not(.quantity-controls button):hover { background: var(--color-primario-hover); opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(44,24,16,.28); }
body.layout-cafe .product .quantity-controls { margin: 0 0.9rem; width: calc(100% - 1.8rem); background: #f5ede4; border-radius: 10px; }
body.layout-cafe .product .quantity-controls button { color: var(--color-primario); border-radius: 7px; }
@media (hover: none) { body.layout-cafe .product > button:not(.quantity-controls button) { opacity: 1; } }

body.layout-cafe .seccion-titulo { color: var(--color-primario); border-bottom-color: rgba(176,100,48,.2); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
body.layout-cafe .category-title { color: var(--color-primario); border-bottom-color: rgba(176,100,48,.22); }
body.layout-cafe .strip-info { background: var(--color-primario); }
body.layout-cafe .strip-item, body.layout-cafe .strip-item strong, body.layout-cafe .strip-item span { color: #f4c88a !important; border-color: rgba(244,200,138,.12) !important; }
body.layout-cafe .precio-actual { color: var(--color-acento) !important; }
body.layout-cafe .cart-checkout-btn { background: var(--color-primario); border-radius: 12px; }
body.layout-cafe .cart-checkout-btn:hover { background: var(--color-primario-hover); }
body.layout-cafe .cat-visual-card { background: #fff; border: 1px solid rgba(176,100,48,.14); border-radius: 14px; box-shadow: 0 2px 8px rgba(60,30,10,.04); }
body.layout-cafe .cat-visual-card:hover { border-color: rgba(176,100,48,.38); box-shadow: 0 6px 20px rgba(60,30,10,.1); }
body.layout-cafe .cat-visual-nombre { color: var(--color-primario) !important; }
body.layout-cafe .cat-visual-count { color: var(--color-acento); }

/* ── Hero ── */
body.layout-cafe .hero-section { min-height: 420px; background: linear-gradient(150deg, var(--color-primario) 0%, var(--color-primario-hover) 60%, var(--color-primario-hover) 100%); }
body.layout-cafe .hero-content { max-width: 580px; padding: 4rem 2.5rem; }
body.layout-cafe .hero-tag { background: rgba(244,200,138,.1); border: 1px solid rgba(244,200,138,.2); color: #f4c88a; border-radius: 99px; font-size: 0.64rem; letter-spacing: 0.12em; backdrop-filter: none; }
body.layout-cafe .hero-titulo { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 700; color: #faf6f0; line-height: 1.18; margin-bottom: 1rem; }
body.layout-cafe .hero-sub { color: rgba(250,246,240,.5); font-size: 0.88rem; margin-bottom: 2rem; }
body.layout-cafe .hero-cta { background: #f4c88a; color: var(--color-primario); border-radius: 99px; font-weight: 700; font-size: 0.82rem; padding: 0.85rem 2.2rem; }
body.layout-cafe .hero-cta:hover { background: #f8dba8; filter: none; }
body.layout-cafe .hero-section.has-hero-bg .hero-overlay { background: rgba(44,24,16,.62) !important; }

/* ── Producto detalle: apilado — imagen full-width, panel card flotante abajo ── */
body.layout-cafe .pd-ab-hero { display: block; max-width: 100%; margin: 0; padding: 0; min-height: unset; overflow: visible; }
body.layout-cafe .pd-ab-images { position: static; align-self: auto; width: 100%; margin: 0; background: #f5ede4; border-radius: 0; max-height: 58vh; overflow: hidden; }
body.layout-cafe .pd-carousel-frame { min-height: 44vh; max-height: 58vh; border-radius: 0; }
body.layout-cafe .pd-ab-main-img { min-height: 44vh; max-height: 58vh; object-fit: cover; background: #f5ede4; border-radius: 0; width: 100%; display: block; }
body.layout-cafe .pd-ab-panel { max-width: 780px; margin: -3.5rem auto 3rem; background: #fff; border-radius: 22px; border: none; box-shadow: 0 10px 48px rgba(60,30,10,.13); padding: 2.6rem 2.8rem; position: relative; z-index: 10; }
body.layout-cafe .pd-car-thumbs { background: rgba(245,237,228,.96); border-top: 1px solid rgba(176,100,48,.12); position: relative; bottom: unset; left: unset; transform: none; width: 100%; box-sizing: border-box; backdrop-filter: none; justify-content: center; border-radius: 0; }
body.layout-cafe .pd-ab-title { color: var(--color-primario); font-weight: 600; font-size: clamp(1.4rem, 2.5vw, 2.1rem); line-height: 1.24; letter-spacing: -0.01em; }
body.layout-cafe .pd-price { color: var(--color-acento) !important; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; }
body.layout-cafe .pd-ab-rule { background: rgba(176,100,48,.12); }
body.layout-cafe .pd-ab-btn-main { background: var(--color-primario); color: #f4c88a; border-radius: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(44,24,16,.22); transition: background .18s, box-shadow .18s; }
body.layout-cafe .pd-ab-btn-main:hover:not(:disabled) { background: var(--color-primario-hover); opacity: 1; box-shadow: 0 4px 16px rgba(44,24,16,.3); }
body.layout-cafe .pd-ab-btn-main.agregado { background: #15803d; color: #fff; }
body.layout-cafe .pd-ab-btn-main:disabled, body.layout-cafe .pd-ab-btn-main.pd-btn-disabled { background: #e5e7eb; color: #9ca3af; box-shadow: none; }
body.layout-cafe .pd-variante-pill.active { background: var(--color-primario); border-color: var(--color-primario); color: #f4c88a; }
body.layout-cafe .pd-ab-wsp-link:hover { color: var(--color-acento); border-color: var(--color-acento); }
body.layout-cafe .pd-ab-editorial { background: #faf6f0; }
body.layout-cafe .pd-ab-related-section, body.layout-cafe .pd-ab-reviews-section, body.layout-cafe .pd-ab-cta { background: #faf6f0; }
body.layout-cafe .pd-ab-nav { background: #faf6f0; border-bottom-color: rgba(176,100,48,.1); }
body.layout-cafe .pd-ab-back { color: rgba(44,24,16,.4); }
body.layout-cafe .pd-ab-back:hover { color: var(--color-primario); }
body.layout-cafe .pd-breadcrumb a { color: rgba(44,24,16,.48); }
body.layout-cafe .pd-breadcrumb a:hover { color: var(--color-acento); }
body.layout-cafe .pd-ab-delivery-row dt { color: rgba(44,24,16,.38); }
body.layout-cafe .pd-ab-delivery-row dd { color: var(--color-primario); }

@media (max-width: 768px) {
    body.layout-cafe .pd-ab-images { max-height: 48vw; }
    body.layout-cafe .pd-carousel-frame { min-height: 40vw; max-height: 48vw; }
    body.layout-cafe .pd-ab-main-img { min-height: 40vw; max-height: 48vw; }
    body.layout-cafe .pd-ab-panel { margin: -2rem 1rem 2rem; padding: 1.8rem 1.5rem; border-radius: 16px; }
}

/* ── Carrito acorde al tema ── */
body.layout-cafe .header-cart-btn { background: #e7d5c5 !important; color: var(--color-primario) !important; border-radius: 12px; font-weight: 700; box-shadow: none; }
body.layout-cafe .header-cart-btn:hover { background: #f0e2d4 !important; }
body.layout-cafe #cart-count { background: var(--color-primario); color: #e7d5c5; border-radius: 8px; }
body.layout-cafe .cart-header { background: var(--color-primario); }
body.layout-cafe .quantity-controls { border-radius: 12px; }