/* ==========================================================================
   Sir Neko - Single Product Page
   "Botanical Apothecary" — 2026 Edition
   Mobile-first, inspirado en Shopify Hyper/Local
   ========================================================================== */

:root {
    --sn-black: #1a1a1a;
    --sn-white: #ffffff;
    --sn-gray-50: #fafafa;
    --sn-gray-100: #f5f5f5;
    --sn-gray-200: #e5e5e5;
    --sn-gray-300: #d4d4d4;
    --sn-gray-500: #737373;
    --sn-gray-700: #404040;
    --sn-gray-900: #171717;
    --sn-accent: #1a1a1a;
    --sn-success: #16a34a;
    --sn-success-light: #f0fdf4;
    --sn-radius: 8px;
    --sn-radius-lg: 12px;
    --sn-radius-xl: 16px;
    --sn-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --sn-font: 'Josefin Sans', sans-serif;
    --sn-font-body: 'DM Sans', sans-serif;
    --sn-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --sn-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --sn-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

/* Fix: en mobile el header fixed (118px) se superpone a la galería */
@media screen and (max-width: 767px) {
    .single-product .product_layout {
        padding-top: 120px !important;
    }
}

/* ==========================================================================
   1. ADD TO CART BUTTON — full-width, negro, prominente
   ========================================================================== */

.entry-summary .single_add_to_cart_button {
    width: 100% !important;
    background: var(--sn-black) !important;
    color: var(--sn-white) !important;
    border: 2px solid var(--sn-black) !important;
    border-radius: var(--sn-radius) !important;
    font-family: var(--sn-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 16px 24px !important;
    min-height: 52px;
    cursor: pointer;
    transition: all var(--sn-transition) !important;
    position: relative;
    overflow: hidden;
}

.entry-summary .single_add_to_cart_button:hover {
    background: var(--sn-gray-900) !important;
    transform: translateY(-1px);
    box-shadow: var(--sn-shadow-md);
}

.entry-summary .single_add_to_cart_button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Quantity input redesign */
.entry-summary .quantity {
    margin-right: 12px;
}

.entry-summary .quantity .qty {
    border: 1.5px solid var(--sn-gray-300) !important;
    border-radius: var(--sn-radius) !important;
    font-family: var(--sn-font-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: center;
    width: 60px !important;
    height: 52px !important;
    color: var(--sn-black);
    transition: border-color var(--sn-transition);
}

.entry-summary .quantity .qty:focus {
    border-color: var(--sn-black) !important;
    outline: none;
}

/* Price styling */
.product_summary_middle .price {
    font-family: var(--sn-font) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--sn-black) !important;
    margin: 8px 0 16px !important;
}

.product_summary_middle .price del {
    color: var(--sn-gray-500) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
}

.product_summary_middle .price ins {
    text-decoration: none !important;
    color: var(--sn-success) !important;
}

/* Title */
.product_summary_top .page-title-wrapper .product_title {
    font-family: var(--sn-font) !important;
    font-size: clamp(22px, 4vw, 32px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--sn-black) !important;
    margin: 0 0 8px !important;
}

/* Short description */
.product_summary_middle .woocommerce-product-details__short-description,
.product_summary_middle .product-short-description {
    font-family: var(--sn-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--sn-gray-500);
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta (SKU, categoría) */
.entry-summary_inner .product_meta {
    font-family: var(--sn-font-body);
    font-size: 12px;
    color: var(--sn-gray-500);
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--sn-gray-200);
}

/* ==========================================================================
   2. TRUST BADGES — estilo editorial, fila horizontal
   ========================================================================== */

.sn-trust-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--sn-gray-200);
}

.sn-trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    background: none;
    border-radius: 0;
    font-family: var(--sn-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--sn-gray-700);
    line-height: 1.3;
}

.sn-trust-badge svg {
    flex-shrink: 0;
    color: var(--sn-gray-500);
    width: 15px;
    height: 15px;
}

/* Dot separator between badges on desktop */
.sn-trust-badge:not(:last-child)::after {
    content: '';
    width: 3px;
    height: 3px;
    background: var(--sn-gray-300);
    border-radius: 50%;
    margin-left: 12px;
    flex-shrink: 0;
}

/* Scroll-reveal animation */
.sn-trust-badge {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.sn-trust-badges.is-visible .sn-trust-badge {
    opacity: 1;
    transform: translateY(0);
}

.sn-trust-badges.is-visible .sn-trust-badge:nth-child(2) { transition-delay: 0.08s; }
.sn-trust-badges.is-visible .sn-trust-badge:nth-child(3) { transition-delay: 0.16s; }
.sn-trust-badges.is-visible .sn-trust-badge:nth-child(4) { transition-delay: 0.24s; }

@media (min-width: 768px) {
    .sn-trust-badges {
        gap: 4px 20px;
        margin-top: 24px;
        padding-top: 24px;
    }

    .sn-trust-badge {
        font-size: 13px;
    }
}

/* ==========================================================================
   3. STICKY ADD-TO-CART BAR (mobile)
   ========================================================================== */

.sn-sticky-atc {
    display: block;   /* presente pero fuera de pantalla (transform: translateY(100%));
                         .is-visible lo desliza. (Antes era 'none' → .is-visible no lo mostraba.) */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--sn-white);
    border-top: 1px solid var(--sn-gray-200);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: 10px 16px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sn-sticky-atc.is-visible {
    transform: translateY(0);
}

.sn-sticky-atc__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.sn-sticky-atc__info {
    flex: 1;
    min-width: 0;
}

.sn-sticky-atc__name {
    font-family: var(--sn-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--sn-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sn-sticky-atc__price {
    font-family: var(--sn-font-body);
    font-size: 12px;
    color: var(--sn-gray-500);
    margin-top: 1px;
}

.sn-sticky-atc__btn {
    flex-shrink: 0;
    background: var(--sn-black);
    color: var(--sn-white);
    border: none;
    border-radius: var(--sn-radius);
    font-family: var(--sn-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 20px;
    cursor: pointer;
    transition: background var(--sn-transition);
    white-space: nowrap;
}

.sn-sticky-atc__btn:active {
    background: var(--sn-gray-900);
}
.sn-sticky-atc__btn.loading { opacity: .6; pointer-events: none; }

/* selector de peso (pills) dentro del sticky — productos variables */
.sn-sticky-atc__swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sn-sticky-atc__swatch {
    border: 1.5px solid var(--sn-gray-200);
    background: var(--sn-white);
    color: var(--sn-black);
    border-radius: var(--sn-radius);
    padding: 8px 14px;
    font-family: var(--sn-font);
    font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sn-sticky-atc__swatch:hover { border-color: var(--sn-black); }
.sn-sticky-atc__swatch.is-active { background: var(--sn-black); color: var(--sn-white); border-color: var(--sn-black); }

/* selector de cantidad (− 1 +) dentro del sticky — estilo PILL (igual que el carrito) */
.sn-sticky-atc__qty {
    display: inline-flex; align-items: center; flex-shrink: 0; gap: .1rem;
    border: 1.5px solid var(--sn-gray-200); border-radius: 999px; padding: .2rem; background: var(--sn-white);
}
.sn-sticky-atc__qty-btn {
    width: 2rem; height: 2rem; border: none; background: transparent;
    color: var(--sn-black); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease; padding: 0;
}
.sn-sticky-atc__qty-btn:hover { background: rgba(0,0,0,.08); }
.sn-sticky-atc__qty-input {
    width: 2.2rem; height: auto; min-height: 0 !important; padding: 0 !important;
    border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important;
    text-align: center; font-family: var(--sn-font); font-size: 14px; font-weight: 600;
    color: var(--sn-black); -moz-appearance: textfield;
}
.sn-sticky-atc__qty-input::-webkit-outer-spin-button,
.sn-sticky-atc__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Sticky en mobile: compacto. Swatches en fila propia (scroll horizontal),
   qty + botón abajo. El nombre se oculta (ya está arriba en la página). */
@media (max-width: 767px) {
  .sn-sticky-atc { padding: 10px 14px; }
  .sn-sticky-atc__inner { flex-wrap: wrap; gap: 8px 10px; }
  .sn-sticky-atc__info { display: none; }
  .sn-sticky-atc__swatches { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sn-sticky-atc__swatch { flex-shrink: 0; padding: 6px 12px; font-size: 12px; }
  .sn-sticky-atc__qty { flex-shrink: 0; }
  .sn-sticky-atc__btn { flex: 1 1 auto; }
}

/* Selector de cantidad del FORM del producto — estilo PILL (igual que el carrito) */
.woocommerce div.product form.cart .quantity {
    display: inline-flex; align-items: center; gap: .15rem;
    border: 1.5px solid var(--sn-border); border-radius: var(--sn-radius-pill);
    padding: .3rem; background: var(--sn-white);
}
.woocommerce div.product form.cart .quantity .sn-qty-btn {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem; border: none; background: transparent;
    color: var(--sn-ink); font-size: 1.35rem; line-height: 1; cursor: pointer; border-radius: 50%;
    display: grid; place-items: center; transition: background .15s ease; padding: 0;
}
.woocommerce div.product form.cart .quantity .sn-qty-btn:hover { background: rgba(28,28,28,.08); }
.woocommerce div.product form.cart .quantity input.qty {
    width: 2.6rem; height: auto; margin: 0; min-height: 0 !important; padding: 0 !important;
    border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important;
    text-align: center; font-family: var(--sn-font); font-size: 1.05rem; font-weight: 600;
    color: var(--sn-ink); -moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Selector + botón "Añadir al carrito" en la MISMA fila (simples y variables) */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button {
    flex: 1 1 auto; min-width: 220px; width: auto !important; margin: 0;
}

@media (min-width: 768px) {
    /* en desktop también lo mostramos (como Barberry); barra más ancha y con más aire */
    .sn-sticky-atc { padding: 14px 24px; }
    .sn-sticky-atc__inner { max-width: 1200px; }
    .sn-sticky-atc__name { font-size: 15px; }
    .sn-sticky-atc__btn { padding: 14px 32px; font-size: 13px; }
}

/* ==========================================================================
   4. PRODUCT TABS — sticky + indicador animado
   ========================================================================== */

.sn-tabs-wrapper {
    position: relative;
    margin: 40px 0 0;
}

.sn-tabs-wrapper.is-sticky {
    position: sticky;
    top: 60px;
    z-index: 90;
    background: var(--sn-white);
    margin-top: 0;
    padding-top: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.sn-tabs-wrapper .sn-tab-arrow {
    position: absolute;
    top: -6px;
    bottom: 2px;
    width: 48px;
    border: none;
    background: linear-gradient(to right, var(--sn-white) 55%, transparent);
    cursor: pointer;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--sn-gray-500);
    transition: color var(--sn-transition);
}

.sn-tabs-wrapper .sn-tab-arrow:hover {
    color: var(--sn-black);
}

.sn-tabs-wrapper .sn-tab-arrow--left {
    left: -12px;
}

.sn-tabs-wrapper .sn-tab-arrow--right {
    right: -12px;
    background: linear-gradient(to left, var(--sn-white) 55%, transparent);
}

.sn-tabs-wrapper .sn-tab-arrow.is-visible {
    display: flex;
}

/* Tab indicator line (animated) */
.sn-tab-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: var(--sn-black);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.woocommerce-tabs .tabs.wc-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--sn-gray-200);
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    position: relative;
}

.woocommerce-tabs .tabs.wc-tabs::-webkit-scrollbar {
    display: none;
}

.woocommerce-tabs .tabs.wc-tabs li {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    flex-shrink: 0;
}

.woocommerce-tabs .tabs.wc-tabs li a {
    display: block;
    padding: 12px 16px;
    font-family: var(--sn-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sn-gray-500);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--sn-transition);
    white-space: nowrap;
}

.woocommerce-tabs .tabs.wc-tabs li a:hover {
    color: var(--sn-black);
}

.woocommerce-tabs .tabs.wc-tabs li.active a,
.woocommerce-tabs .tabs.wc-tabs li a.active {
    color: var(--sn-black);
    border-bottom-color: transparent;
}

.woocommerce-Tabs-panel {
    padding: 24px 0;
    animation: sn-fadeIn 0.3s ease;
}

@keyframes sn-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
    .sn-tabs-wrapper {
        margin-top: 48px;
    }

    .sn-tabs-wrapper .sn-tab-arrow {
        width: 56px;
    }

    .sn-tabs-wrapper .sn-tab-arrow--left {
        left: -16px;
    }

    .sn-tabs-wrapper .sn-tab-arrow--right {
        right: -16px;
    }

    .woocommerce-tabs .tabs.wc-tabs li a {
        padding: 14px 24px;
        font-size: 12px;
    }

    .woocommerce-Tabs-panel {
        padding: 32px 0;
    }
}

/* ==========================================================================
   5. TAB CONTENT — tipografía body con DM Sans
   ========================================================================== */

.sn-tab-content {
    max-width: 65ch;
}

.sn-tab-content h3 {
    font-family: var(--sn-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--sn-black);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.sn-prop-section,
.sn-uso-section,
.sn-nutri-section {
    margin-bottom: 24px;
}

.sn-prop-section:last-child,
.sn-uso-section:last-child,
.sn-nutri-section:last-child {
    margin-bottom: 0;
}

.sn-prop-text,
.sn-uso-text,
.sn-nutri-text {
    font-family: var(--sn-font-body);
    font-size: 14px;
    line-height: 1.75;
    color: var(--sn-gray-700);
}

/* Propiedades como pills */
.sn-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.sn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--sn-gray-50);
    border: 1px solid var(--sn-gray-200);
    border-radius: 100px;
    font-family: var(--sn-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--sn-gray-700);
    white-space: nowrap;
}

.sn-pill svg {
    width: 14px;
    height: 14px;
    color: var(--sn-success);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .sn-tab-content h3 {
        font-size: 18px;
    }

    .sn-prop-text,
    .sn-uso-text,
    .sn-nutri-text {
        font-size: 15px;
    }
}

/* Origen badge */
.sn-origen p {
    display: inline-block;
    padding: 6px 14px;
    background: var(--sn-gray-100);
    border-radius: 100px;
    font-family: var(--sn-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--sn-gray-700);
}

/* ==========================================================================
   6. RECETAS GRID — con numeración decorativa
   ========================================================================== */

.sn-recetas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: none;
}

.sn-receta-card {
    background: var(--sn-white);
    border: 1px solid var(--sn-gray-200);
    border-radius: var(--sn-radius-lg);
    padding: 20px;
    transition: border-color var(--sn-transition), box-shadow var(--sn-transition), transform var(--sn-transition);
    position: relative;
    overflow: hidden;
}

.sn-receta-card::before {
    content: attr(data-number);
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: var(--sn-font);
    font-size: 40px;
    font-weight: 700;
    color: var(--sn-gray-100);
    line-height: 1;
    pointer-events: none;
}

.sn-receta-card:hover {
    border-color: var(--sn-black);
    box-shadow: var(--sn-shadow-sm);
    transform: translateY(-2px);
}

.sn-receta-card h4 {
    font-family: var(--sn-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--sn-black);
    margin: 0 0 8px;
    line-height: 1.3;
    padding-right: 40px;
}

.sn-receta-card p {
    font-family: var(--sn-font-body);
    font-size: 13px;
    line-height: 1.65;
    color: var(--sn-gray-700);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 600px) {
    .sn-recetas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (min-width: 1024px) {
    .sn-recetas-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* ==========================================================================
   7. FAQs ACCORDION — con animación suave
   ========================================================================== */

.sn-faq-item {
    border-bottom: 1px solid var(--sn-gray-200);
}

.sn-faq-item:first-child {
    border-top: 1px solid var(--sn-gray-200);
}

.sn-faq-item details {
    padding: 0;
}

.sn-faq-item summary {
    padding: 16px 0;
    font-family: var(--sn-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--sn-black);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    user-select: none;
    -webkit-user-select: none;
}

.sn-faq-item summary::-webkit-details-marker {
    display: none;
}

.sn-faq-item summary::after {
    content: '+';
    font-family: var(--sn-font-body);
    font-size: 20px;
    font-weight: 300;
    color: var(--sn-gray-500);
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--sn-transition), color var(--sn-transition);
}

.sn-faq-item details[open] summary::after {
    content: '−';
    color: var(--sn-black);
}

.sn-faq-answer {
    padding: 0 0 16px;
    font-family: var(--sn-font-body);
    font-size: 14px;
    line-height: 1.75;
    color: var(--sn-gray-700);
    max-width: 65ch;
}

@media (min-width: 768px) {
    .sn-faq-item summary {
        padding: 18px 0;
        font-size: 15px;
    }
}

/* ==========================================================================
   8. INFO NUTRICIONAL — tabla estilizada
   ========================================================================== */

.sn-nutri-table {
    width: 100%;
    max-width: 400px;
    border-collapse: collapse;
    font-family: var(--sn-font-body);
    font-size: 13px;
}

.sn-nutri-table thead th {
    background: var(--sn-black);
    color: var(--sn-white);
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sn-nutri-table tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--sn-gray-200);
    color: var(--sn-gray-700);
}

.sn-nutri-table tbody tr:nth-child(even) {
    background: var(--sn-gray-50);
}

.sn-nutri-table tbody td:last-child {
    font-weight: 600;
    color: var(--sn-black);
    text-align: right;
}

/* ==========================================================================
   9. SCROLL REVEAL
   ========================================================================== */

.sn-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.sn-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   10. BREADCRUMB estilizado
   ========================================================================== */

.woocommerce-breadcrumb {
    font-family: var(--sn-font-body) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sn-gray-500) !important;
    margin-bottom: 12px !important;
}

.woocommerce-breadcrumb a {
    color: var(--sn-gray-500) !important;
    text-decoration: none !important;
    transition: color var(--sn-transition);
}

.woocommerce-breadcrumb a:hover {
    color: var(--sn-black) !important;
}

/* ==========================================================================
   11. WC DEFAULT DESCRIPTION TAB — body font
   ========================================================================== */

.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--additional_information {
    font-family: var(--sn-font-body);
    font-size: 14px;
    line-height: 1.75;
    color: var(--sn-gray-700);
    max-width: 65ch;
}

@media (min-width: 768px) {
    .woocommerce-Tabs-panel--description,
    .woocommerce-Tabs-panel--additional_information {
        font-size: 15px;
    }
}

/* ==========================================================================
   IMAGE ASPECT-RATIO (prevent CLS during lazy load)
   ========================================================================== */

.woocommerce-product-gallery img,
.woocommerce-product-gallery .wp-post-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.woocommerce-product-gallery__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* Productos con imágenes verticales (body.sn-gallery-tall lo agrega functions.php):
   caja 4:5 + object-fit:contain → las 4:5 se ven completas y las 1:1 quedan
   centradas con un leve letterbox, sin recortar. Caja uniforme = altura estable
   para Flickity (setGallerySize:false). Solo afecta las celdas, no las miniaturas. */
body.sn-gallery-tall .woocommerce-product-gallery__image,
body.sn-gallery-tall .woocommerce-product-gallery__image.product-gallery-cell {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--sn-gray-50);
}

body.sn-gallery-tall .woocommerce-product-gallery__image img {
    /* La img toma su propio aspect-ratio 4/5 (igual que la celda) con height:auto.
       NO usar height:100%: no resuelve contra un alto derivado de aspect-ratio y la
       imagen se desbordaba a su alto intrínseco (celdas lazy llegaban a 1500px). */
    aspect-ratio: 4 / 5;
    object-fit: contain;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .sn-receta-card:hover {
        transform: none;
    }

    .sn-reveal,
    .sn-trust-badge {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* El snippet WPCode "Estilo gris fuera de stock" (9376) pone una capa blanca
   semitransparente (::after) sobre .product.outofstock — pensada para las cards de
   la GRILLA de tienda. En la página de producto individual el contenedor también es
   .product.outofstock, así que desvanecía TODO, incluido el form "Avisame cuando
   haya stock" (se veía deshabilitado). Acá lo anulamos: en la single el producto y
   el formulario se ven normales. La grilla (li.product.outofstock) conserva el efecto. */
.single-product article.product.outofstock::after,
.single-product div.product.outofstock::after { content: none !important; display: none !important; }
.single-product article.product.outofstock img,
.single-product div.product.outofstock img { opacity: 1 !important; filter: none !important; }