/* ================================================================
   NATURAL — Dietética / Orgánico (layout-natural)
   ================================================================ */
body.layout-natural { background: #f0fdf4; }

/* Header blanco con acento verde */
body.layout-natural header { background: #ffffff !important; box-shadow: 0 1px 0 #bbf7d0, 0 2px 8px rgba(0,0,0,.05) !important; }
body.layout-natural #category-buttons { background: #f0fdf4 !important; border-top: 1px solid #bbf7d0 !important; }
body.layout-natural .header-logo-text strong { color: var(--color-primario) !important; font-style: italic; }
body.layout-natural .nav-link-btn, body.layout-natural .quick-pill, body.layout-natural .dropdown-btn { color: var(--color-primario) !important; opacity: 0.8; }
body.layout-natural .nav-link-btn:hover, body.layout-natural .quick-pill:hover { opacity: 1; }
body.layout-natural .header-search-wrap { background: #f0fdf4; border-color: #bbf7d0; }
body.layout-natural .header-search-wrap input { color: var(--color-primario); background: transparent; }
body.layout-natural .header-search-wrap input::placeholder { color: #6aae7e; }

/* ── Catálogo: portrait 3:4, grid ESCALONADO — columnas pares bajan 2.5rem ── */
body.layout-natural .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2.5rem 1.5rem; align-items: start; }
body.layout-natural .product { background: transparent; border: none; box-shadow: none; padding: 0 0 0.5rem; overflow: visible; }
body.layout-natural .product:nth-child(even) { margin-top: 3.5rem; }
body.layout-natural .product:hover { transform: translateY(-4px); box-shadow: none; }
body.layout-natural .prod-img-wrap {
    aspect-ratio: 3/4;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    background: #dcfce7;
}
body.layout-natural .prod-img-wrap img { object-fit: contain; }
body.layout-natural .product:hover .prod-img-wrap { box-shadow: 0 12px 32px rgba(22,101,52,.18); }
body.layout-natural .product:hover .prod-img-wrap img { transform: scale(1.06); }
body.layout-natural .product h3 {
    padding: 0; margin: 0.8rem 0 0.1rem;
    font-size: 0.92rem; font-weight: 600; color: var(--color-primario-deep) !important;
    font-family: var(--font-display);
}
body.layout-natural .product p {
    padding: 0; margin-bottom: 0.7rem;
    font-size: 1rem; font-weight: 700; color: var(--color-primario-hover) !important;
}
body.layout-natural .product > button:not(.quantity-controls button) {
    background: var(--color-primario); color: #fff; border-radius: 99px;
    padding: 0.58rem 1.1rem; margin: 0 0 0.3rem; width: 100%;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
    transition: background 0.2s, opacity 0.25s, transform 0.22s;
    opacity: 0;
    transform: translateY(5px);
}
body.layout-natural .product:hover > button:not(.quantity-controls button) { opacity: 1; transform: translateY(0); }
body.layout-natural .product > button:not(.quantity-controls button):hover { background: var(--color-primario-deep); opacity: 1; }
body.layout-natural .product .quantity-controls { border-radius: 99px; margin: 0 0 0.3rem; }
/* Touch: botón siempre visible */
@media (hover: none) {
    body.layout-natural .product > button:not(.quantity-controls button) {
        opacity: 1 !important; transform: none !important;
    }
}

/* Titulos */
body.layout-natural .seccion-titulo { color: var(--color-primario); border-bottom-color: #bbf7d0; font-style: italic; font-family: var(--font-display); text-transform: none; font-size: 1rem; font-weight: 400; }
body.layout-natural .category-title { color: var(--color-primario); border-bottom-color: #bbf7d0; font-family: var(--font-display); font-style: italic; text-transform: none; }
body.layout-natural .strip-info { background: #dcfce7; }
body.layout-natural .strip-item { color: var(--color-primario); }
body.layout-natural .strip-item strong, body.layout-natural .strip-item span { color: var(--color-primario-deep) !important; }
body.layout-natural .strip-item { border-color: rgba(22,101,52,.15) !important; }
body.layout-natural .precio-actual { color: var(--color-primario) !important; }
body.layout-natural .cart-checkout-btn { background: var(--color-primario); border-radius: 99px; }
body.layout-natural .cart-checkout-btn:hover { background: var(--color-primario-deep); }

/* ── PRODUCTO DETALLE: 2 columnas limpias (imagen izq, panel der) ── */
body.layout-natural .pd-ab-hero {
    grid-template-columns: 55fr 45fr;
    max-width: 1200px;
    margin: 0 auto;
    min-height: unset;
    overflow: visible;
    align-items: start;
    padding: 2rem 1.5rem;
    gap: 2.5rem;
}
body.layout-natural .pd-ab-images {
    grid-column: 1; grid-row: 1;
    position: sticky; top: 80px;
    height: auto; max-height: none;
    overflow: hidden;
    background: #dcfce7;
    border-radius: 20px;
    margin: 0;
}
body.layout-natural .pd-carousel-frame { min-height: 340px; max-height: 70vh; border-radius: 20px; }
body.layout-natural .pd-ab-main-img    { min-height: 340px; max-height: 70vh; border-radius: 20px; object-fit: contain; background: #dcfce7; }
body.layout-natural .pd-ab-panel {
    grid-column: 2; grid-row: 1;
    position: relative; z-index: 1;
    align-self: start;
    width: auto; margin: 0;
    border-left: none; border-top: none;
    padding: 2rem 1.8rem;
    background: #fff;
    border: 1px solid rgba(134,239,172,0.6);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(22,101,52,.10);
}
body.layout-natural .pd-ab-title { color: var(--color-primario-deep); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); }
body.layout-natural .pd-price { color: var(--color-primario-hover) !important; }
body.layout-natural .pd-ab-btn-main { background: var(--color-primario); border-radius: 99px; }
body.layout-natural .pd-ab-btn-main:hover:not(:disabled) { background: var(--color-primario-deep); }
body.layout-natural .pd-ab-btn-main:disabled,
body.layout-natural .pd-ab-btn-main.pd-btn-disabled { background: rgba(22,101,52,.15); color: var(--color-primario-deep); }
body.layout-natural .pd-ab-wsp-link:hover { color: var(--color-primario-hover); border-color: var(--color-primario-hover); }
body.layout-natural .pd-ab-editorial { background: #f0fdf4; }
body.layout-natural .pd-ab-related-section,
body.layout-natural .pd-ab-reviews-section,
body.layout-natural .pd-ab-cta { background: #f0fdf4; }
body.layout-natural .pd-car-thumbs {
    position: relative; bottom: unset; left: unset; transform: none;
    border-radius: 0 0 20px 20px;
    border: none; border-top: 1px solid rgba(187,247,208,.4);
    background: rgba(220,252,231,0.9);
    justify-content: center;
    width: 100%; box-sizing: border-box;
    backdrop-filter: none;
}
/* ── HERO: orgánico, verde vibrante ── */
body.layout-natural .hero-section {
    min-height: 420px;
    background: linear-gradient(160deg, var(--color-primario-deep) 0%, var(--color-primario) 55%, var(--color-primario-hover) 100%);
}
body.layout-natural .hero-content { max-width: 620px; padding: 3.5rem 2rem; }
body.layout-natural .hero-tag {
    background: rgba(220,252,231,.15);
    border: 1px solid rgba(134,239,172,.4);
    color: #bbf7d0;
    border-radius: 99px;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    backdrop-filter: none;
}
body.layout-natural .hero-titulo {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height: 1.14;
    color: #f0fdf4;
    margin-bottom: 1rem;
    letter-spacing: 0;
}
body.layout-natural .hero-sub {
    color: rgba(240,253,244,.68);
    font-size: 0.9rem;
    font-weight: 300;
    margin-bottom: 2rem;
}
body.layout-natural .hero-cta {
    background: #dcfce7;
    color: var(--color-primario-deep);
    border-radius: 99px;
    font-weight: 700;
    font-size: 0.84rem;
    padding: 0.85rem 2.2rem;
}
body.layout-natural .hero-cta:hover { background: #bbf7d0; filter: none; }
body.layout-natural .hero-section.has-hero-bg .hero-overlay {
    background: rgba(20,83,45,.58) !important;
}

/* ── CATEGORÍAS: verde redondeado ── */
body.layout-natural .cat-visual-card {
    background: rgba(220,252,231,.5);
    border: 1px solid #bbf7d0;
    border-radius: 16px;
}
body.layout-natural .cat-visual-card:hover {
    background: rgba(187,247,208,.65);
    border-color: #86efac;
    box-shadow: 0 2px 12px rgba(22,101,52,.12);
}
body.layout-natural .cat-visual-nombre { color: var(--color-primario-deep) !important; }
body.layout-natural .cat-visual-count { color: #4ade80; }

@media (max-width: 768px) {
    body.layout-natural .pd-ab-hero { grid-template-columns: 1fr; padding: 1rem; gap: 1.2rem; }
    body.layout-natural .pd-ab-images { grid-column: 1; grid-row: 1; position: static; }
    body.layout-natural .pd-carousel-frame { min-height: 56vw; max-height: 56vw; }
    body.layout-natural .pd-ab-main-img { min-height: 56vw; max-height: 56vw; }
    body.layout-natural .pd-ab-panel { grid-column: 1; grid-row: 2; }
}

/* ── Carrito acorde al tema ── */
body.layout-natural .header-cart-btn { background: var(--color-primario) !important; color: #fff !important; border-radius: 99px; font-weight: 600; box-shadow: 0 2px 8px rgba(22,101,52,.22); }
body.layout-natural .header-cart-btn:hover { background: var(--color-primario-deep) !important; }
body.layout-natural #cart-count { background: #fff; color: var(--color-primario); border-radius: 99px; }
body.layout-natural .cart-header { background: var(--color-primario); }
body.layout-natural .quantity-controls { border-radius: 99px; }