/* ============================================================================
 * MIMIC BLOCKS PRODUCT - v1.2.0
 * Replicating CloneWebX React/Tailwind interactions via Native CSS
 * Updated: 2026-01-30 - Responsive layout: Stack vertical en mobile/tablet
 * Fix: 2026-01-30 - Mobile/Tablet 1 columna (imagen arriba, contenido abajo)
 * Fix: 2026-01-28 - Botones desde Figma (gap, flex, padding exactos)
 * ============================================================================
 */

:root {
    --runayaq-drawer-z-index: 9999;
    --runayaq-sticky-z-index: 9998;
    --runayaq-overlay-z-index: 9990;
    --runayaq-transition-speed: 300ms;
    --runayaq-drawer-width: 480px;
}

/* ----------------------------------------------------------------------------
 * 1. DRAWER (RESPONSIVE SIDEBAR/SHEET)
 * ----------------------------------------------------------------------------
 */

/* Overlay */
#product-drawer-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: var(--runayaq-overlay-z-index);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--runayaq-transition-speed) ease, visibility var(--runayaq-transition-speed) ease;
}

#product-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Drawer Container */
#product-drawer {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: var(--runayaq-drawer-z-index);
    transition: transform var(--runayaq-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    
    /* Mobile First: Bottom Sheet Style */
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 5rem); /* Fallback safety */
    height: 85vh; /* Better mobile feel */
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    transform: translateY(100%);
}

#product-drawer.active {
    transform: translateY(0);
}

/* Desktop: Right Sidebar Style */
@media (min-width: 768px) {
    #product-drawer {
        top: 0;
        right: 0;
        bottom: auto; /* Reset mobile styles */
        left: auto;
        width: var(--runayaq-drawer-width);
        height: 100vh;
        border-radius: 0;
        transform: translateX(100%);
    }

    #product-drawer.active {
        transform: translateX(0);
    }
}

/* Header */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid #f3f4f6;
    background-color: #fff;
    flex-shrink: 0;
}

.drawer-title {
    font-family: inherit; /* Was var(--runayaq-font-display, "Playfair Display", serif) */
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--runayaq-text-primary, #1a1a1a);
    margin: 0;
}

.drawer-close {
    padding: 8px;
    margin-right: -8px;
    color: #9ca3af;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 9999px;
    transition: all 0.2s;
}

.drawer-close:hover {
    color: var(--runayaq-text-primary, #1a1a1a);
    background-color: #f9fafb;
}

/* Content */
.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}

/* ----------------------------------------------------------------------------
 * 2. STICKY ADD TO CART BAR
 * ----------------------------------------------------------------------------
 */

#sticky-add-to-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid #e5e7eb;
    padding: 16px;
    z-index: var(--runayaq-sticky-z-index);
    transform: translateY(100%);
    transition: transform var(--runayaq-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
}

#sticky-add-to-cart.visible {
    transform: translateY(0);
}

/* Hide on large desktops if requested (usually > 1024px) */
@media (min-width: 1024px) {
    #sticky-add-to-cart {
        display: none;
    }
}

.sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.sticky-product-info {
    display: none;
}

@media (min-width: 768px) {
    .sticky-product-info {
        display: block;
    }
    .sticky-product-title {
        font-family: inherit; /* Was var(--runayaq-font-display, serif) */
        font-weight: 700;
        color: var(--runayaq-text-primary);
        font-size: 1rem;
        margin: 0;
    }
    .sticky-product-price {
        font-size: 0.875rem;
        color: #6b7280;
    }
}

.sticky-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 768px) {
    .sticky-actions {
        width: auto;
    }
}

.sticky-btn {
    background-color: var(--runayaq-primary, #BA4A24);
    color: white;
    height: 48px;
    padding: 0 32px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(186, 74, 36, 0.2);
    transition: background-color 0.2s;
    width: 100%;
    font-family: inherit !important; /* Force inherit */
}

.sticky-btn:hover {
    background-color: var(--runayaq-primary-dark, #9e3d1c);
}

/* Breadcrumbs Specifics (to ensure Uppercase & Spacing) */
.runayaq-breadcrumbs {
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 1024px) {
    .runayaq-breadcrumbs {
        padding-left: 48px !important; /* lg:px-12 */
        padding-right: 48px !important;
    }
}

.runayaq-breadcrumbs a,
.runayaq-breadcrumbs span {
    text-transform: uppercase !important;
    font-size: 14px !important; /* Increased to match e-commerce standards (North Face) - v1.3.1 */
    letter-spacing: 0.1em !important;
    font-family: inherit !important;
}

/* Force global font on product title */
h1.product_title,
.product_title.entry-title {
    font-family: inherit !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    color: #1a1a1a !important;
    margin-bottom: 0.5rem !important;
    color: #1a1a1a !important;
    font-size: clamp(24px, 5vw, 36px) !important; /* Responsive scaling */
}

/* Product Title - Balanced Size for Layout - v1.2.6 */
body.single-product .entry-summary h1.product_title,
body.single-product .entry-summary .product_title.entry-title {
    font-size: 28px !important; /* Reduced from 36px - v1.2.6 */
    line-height: 1.3 !important; /* Better readability - v1.2.6 */
    font-weight: 700 !important; /* Bold for emphasis */
}

/* Tablet & Desktop: Align product title with gallery top - v1.3.1 */
@media (min-width: 768px) {
    body.single-product .entry-summary h1.product_title,
    body.single-product .entry-summary .product_title.entry-title {
        margin-top: 0 !important; /* Remove top margin for alignment */
    }
}

@media (min-width: 1024px) {
    h1.product_title,
    .product_title.entry-title {
        font-size: 36px !important;
    }
}

/* ----------------------------------------------------------------------------
 * 3. PRODUCT MENU (ACCORDION TRIGGERS)
 * ----------------------------------------------------------------------------
 */

/* 5. Price & Discount Logic (New) */
/* Force Flex layout on ANY price container found in summary */
.entry-summary .price, 
.woocommerce-variation-price .price,
.price-container {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 1rem !important;
    font-family: inherit !important;
    color: transparent !important; /* Hide raw text nodes if any */
}

/* Make children visible again */
.entry-summary .price > *,
.woocommerce-variation-price .price > * {
    color: initial !important; 
}

/* NEW PRICE (ins) -> Order 1 */
.entry-summary .price ins, 
.woocommerce-variation-price .price ins,
.price ins {
    order: 1 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important; /* 24px */
    color: var(--runayaq-primary, #BA4A24) !important;
    background: transparent !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* OLD PRICE (del) -> Order 2 */
.entry-summary .price del, 
.woocommerce-variation-price .price del,
.price del {
    order: 2 !important;
    color: #9ca3af !important; /* gray-400 */
    font-size: 1.125rem !important; /* 18px */
    opacity: 1 !important;
    display: inline-block !important;
    text-decoration: line-through !important;
}

/* DISCOUNT BADGE -> Order 3 */
.runayaq-discount-badge {
    order: 3 !important;
    border: 1px solid var(--runayaq-primary, #BA4A24) !important;
    color: var(--runayaq-primary, #BA4A24) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 2px !important;
    display: inline-block !important;
    margin-left: 0 !important; /* Gap handles spacing */
    background: transparent !important;
}

/* Discount Badge - Injected via PHP or JS, styled here */
.runayaq-discount-badge {
    border: 1px solid var(--runayaq-primary, #BA4A24);
    color: var(--runayaq-primary, #BA4A24);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px; /* px-2 py-0.5 */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    border-radius: 2px;
}

.runayaq-product-menu {
    margin-top: 2rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.5rem;
}

/* Reset theme button styles strongly */
.runayaq-product-menu .trigger-drawer {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1.25rem 0 !important; /* py-5 */
    margin: 0 !important;
    
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #f3f4f6 !important;
    
    color: #1a1a1a !important;
    text-align: left !important;
    cursor: pointer !important;
    font-family: inherit !important; /* INHERIT GLOBAL FONT */
}

.runayaq-product-menu .trigger-drawer:hover {
    background: transparent !important;
}

.runayaq-product-menu .trigger-drawer:focus {
    outline: none;
}

.runayaq-product-menu .trigger-drawer span {
    font-weight: 700 !important;
    font-size: 0.75rem !important; /* text-xs */
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important; /* tracking-widest */
    color: #1a1a1a;
    transition: color 0.2s;
}

.runayaq-product-menu .trigger-drawer:hover span {
    color: var(--runayaq-primary, #BA4A24) !important;
}

.runayaq-product-menu .trigger-drawer svg {
    color: #9ca3af; /* text-gray-400 */
    transition: color 0.2s;
}

.runayaq-product-menu .trigger-drawer:hover svg {
    color: var(--runayaq-primary, #BA4A24) !important;
}


/* ----------------------------------------------------------------------------
 * 4. SPLIT LAYOUT IMPLEMENTATION (NEW v2)
 * ----------------------------------------------------------------------------
 */

/* 1. Force Full Width on Main Container */
.single-product .content-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.single-product .entry-content-wrap {
    padding: 0 !important;
}

/* 2. Product Layout Wrapper (Flex on Desktop) - v1.2.6 */
.single-product div.product {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 1400px !important; /* Centered container - e-commerce standard - v1.2.6 */
    margin: 0 auto !important; /* Center horizontally */
    padding-left: 24px !important; /* Base-8 lateral spacing - v1.2.6 */
    padding-right: 24px !important; /* Base-8 lateral spacing - v1.2.6 */
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

/* Remove lateral padding on large viewports - v1.2.6 */
@media (min-width: 1480px) {
    .single-product div.product {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================================
 * RESPONSIVE LAYOUT
 * Mobile: 1 Column (apilado vertical - imagen arriba, contenido abajo)
 * Tablet: 2 Columns (imagen izquierda, info derecha) CON galería 1 columna
 * Desktop: 2 Columns (imagen izquierda, info derecha) CON galería 2 columnas
 * CRITICAL: High specificity to override theme defaults
 * ============================================================================
 */

/* Mobile ONLY: Stack imagen arriba, contenido abajo */
@media (max-width: 767px) {
    /* Force column layout with highest specificity */
    body.single-product.woocommerce div.product,
    body.single-product div.product,
    .single-product.woocommerce div.product,
    .single-product div.product {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    /* Remover float que causa layout lado a lado */
    body.single-product.woocommerce div.product .entry-summary,
    body.single-product div.product .entry-summary,
    .single-product.woocommerce .entry-summary,
    .single-product .entry-summary {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem 1rem !important;
        order: 2 !important; /* Fuerza que aparezca después de la imagen */
    }

    /* Asegurar que galería sea full width y aparezca primero */
    body.single-product.woocommerce div.product .woocommerce-product-gallery,
    body.single-product div.product .woocommerce-product-gallery,
    body.single-product.woocommerce div.product .runayaq-gallery-wrapper,
    body.single-product div.product .runayaq-gallery-wrapper,
    .single-product .woocommerce-product-gallery,
    .single-product .runayaq-gallery-wrapper {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 0 0 !important;
        padding: 0 !important;
        order: 1 !important; /* Fuerza que aparezca primero */
    }
}

/* Tablet: 2 columnas (imagen izq, info derecha) - como desktop */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Mantener layout de 2 columnas */
    body.single-product.woocommerce div.product,
    body.single-product div.product,
    .single-product.woocommerce div.product,
    .single-product div.product {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    /* Galería a la izquierda */
    .runayaq-gallery-wrapper {
        width: 50% !important; /* Ajustar según necesidad */
        flex-shrink: 0 !important;
    }

    /* Info a la derecha */
    .entry-summary {
        width: 50% !important;
        flex: 1 1 auto !important;
        padding: 1.5rem 1rem !important;
    }
}

/* Related Products Section - Centered Container - v1.2.6 */
.runayaq-related-wrapper {
    max-width: 1400px !important; /* Match product container - v1.2.6 */
    margin: 0 auto !important;
    padding-left: 24px !important; /* Base-8 system - v1.2.6 */
    padding-right: 24px !important; /* Base-8 system - v1.2.6 */
    box-sizing: border-box !important;
}

@media (min-width: 1024px) {
    .runayaq-related-wrapper {
        margin-top: 48px !important;
    }
}

@media (min-width: 1480px) {
    .runayaq-related-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Related Products Wrapper (New) */
.runayaq-related-wrapper .related.products ul.products,
.runayaq-related-wrapper .upsells ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important; /* 8 in Tailwind ~ 2rem */
    margin-top: 2rem !important;
}

@media (min-width: 640px) {
    .runayaq-related-wrapper .related.products ul.products,
    .runayaq-related-wrapper .upsells ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .runayaq-related-wrapper .related.products ul.products,
    .runayaq-related-wrapper .upsells ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* 3. Gallery Section (Left - 65/70% - Custom Grid) */
/* 3. Gallery Section */
.runayaq-gallery-wrapper {
    position: relative;
    width: 100%;
}

.runayaq-custom-gallery-grid {
    /* Mobile: Slider */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    width: 100%;
    gap: 0; 
}

.runayaq-custom-gallery-grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Items Mobile */
.runayaq-custom-gallery-grid .gallery-item {
    width: 100%;
    min-width: 100%; /* Force full width item */
    flex-shrink: 0;
    scroll-snap-align: center;
    position: relative;
    background-color: #f9fafb; /* bg-gray-50 */
    aspect-ratio: 4 / 5;
}

.runayaq-custom-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tablet: Mantiene carousel horizontal (hereda de mobile default) */
/* No se necesita override - el carousel flex funciona perfecto */

/* Desktop */
@media (min-width: 1024px) {
    .runayaq-gallery-wrapper {
        width: 60%; /* E-commerce standard proportions - v1.3.0 */
    }

    .runayaq-custom-gallery-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        overflow: visible; /* Cascade */
        scroll-snap-type: none;
    }

    .runayaq-custom-gallery-grid .gallery-item {
        width: auto;
        min-width: auto;
        aspect-ratio: 3 / 4;
    }
}

@media (min-width: 1280px) {
    .runayaq-gallery-wrapper {
        width: 60%; /* Keep consistent with 1024px - v1.3.0 */
    }
}

/* Navigation Controls (Mobile Only) */
.gallery-prev, .gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    color: #1a1a1a;
    padding: 8px;
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-prev { left: 16px; }
.gallery-next { right: 16px; }

.gallery-dots {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    z-index: 10;
}

.gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.gallery-dot.active {
    background-color: white;
    transform: scale(1.25);
}

@media (min-width: 1024px) {
    .gallery-prev, .gallery-next, .gallery-dots {
        display: none !important;
    }
}

/* Hide standard WC gallery wrappers if they persist empty */
.woocommerce-product-gallery {
    display: none !important;
}

/* 4. Product Summary (Right - 35/30% - Sticky) */
.entry-summary {
    width: 100% !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

/* Tablet & Desktop: Remove top padding/margin to align title with gallery - v1.3.1 */
@media (min-width: 768px) {
    .entry-summary {
        margin-top: 0 !important; /* Remove top margin for alignment */
        padding-top: 0 !important; /* Remove top padding for alignment */
    }
}

@media (min-width: 1024px) {
    .entry-summary {
        width: 40% !important; /* E-commerce standard proportions - v1.3.0 */
        padding-left: 32px !important; /* Base-8 system - v1.2.6 */
        padding-right: 24px !important; /* Base-8 system - v1.2.6 */

        /* Sticky Logic */
        position: sticky !important;
        top: 8rem !important;
        align-self: flex-start !important;
        max-height: calc(100vh - 8rem) !important;
        overflow-y: auto !important;
        scrollbar-width: none; /* Firefox */
    }
    
    .entry-summary::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
}

/* ============================================================================
 * REMOVED: @media 1280px override that caused overflow
 * Entry-summary stays at 40% across all desktop viewports - v1.3.0
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 5. ADD TO CART & FAVORITES LAYOUT (SIDE BY SIDE)
 * ----------------------------------------------------------------------------
 */

/* Button Container - Full Width - v1.2.7 */
body.single-product div.product form.cart,
.woocommerce.single-product div.product .cart {
    display: flex !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    width: 100% !important; /* Full width of entry-summary - v1.2.7 */
    /* No min-width - buttons fill available space - v1.2.7 */
    margin-bottom: 2rem !important;
    align-items: center !important;
}

/* CRITICAL FIX: WooCommerce variations wrapper must expand to 100% - v1.2.9 */
body.single-product div.product form.cart > div[data-product_id],
body.single-product.woocommerce div.product form.cart > div[data-product_id] {
    width: 100% !important; /* Fill form.cart width */
    display: block !important; /* Block display for full width */
    box-sizing: border-box !important;
}

/* Target the immediate parent of buttons - CRITICAL FOR LAYOUT - v1.2.8 */
body.single-product.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
body.single-product div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce.single-product div.product .woocommerce-variation-add-to-cart {
    display: flex !important;
    gap: 14px !important; /* From Penpot: 14px spacing between buttons */
    flex-wrap: nowrap !important; /* Keep buttons inline on desktop */
    align-items: center !important;
    width: 100% !important; /* Full width of form.cart - v1.2.8 */
    min-width: 100% !important; /* Force full width - v1.2.8 */
    max-width: 100% !important; /* No limit - v1.2.8 */
    flex: 1 !important; /* Grow to fill space - v1.2.8 */
    margin: 0 !important; /* Remove margin-top that causes misalignment */
}

/* CRITICAL FIX: Remove hidden .quantity div from flex layout */
body.single-product div.product .woocommerce-variation-add-to-cart .quantity,
.woocommerce.single-product div.product .woocommerce-variation-add-to-cart .quantity {
    display: none !important; /* Completely remove from DOM flow */
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Responsive gap adjustments */
@media (max-width: 768px) {
    body.single-product div.product form.cart,
    .woocommerce.single-product div.product .cart {
        gap: 10px !important; /* Reduced gap on tablet/mobile */
        flex-wrap: wrap !important; /* Allow wrap on tablet if needed */
        min-width: 0 !important; /* Remove min-width constraint on tablet */
    }

    body.single-product div.product .woocommerce-variation-add-to-cart,
    .woocommerce.single-product div.product .woocommerce-variation-add-to-cart {
        gap: 10px !important;
        flex-wrap: wrap !important;
        justify-content: center !important; /* Center stacked buttons */
    }
}

@media (max-width: 520px) {
    body.single-product div.product form.cart,
    .woocommerce.single-product div.product .cart {
        gap: 8px !important; /* Minimal gap on small mobile */
        flex-wrap: wrap !important; /* Allow wrap on mobile */
        min-width: 0 !important; /* Remove min-width constraint on mobile */
    }

    body.single-product div.product .woocommerce-variation-add-to-cart,
    .woocommerce.single-product div.product .woocommerce-variation-add-to-cart {
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important; /* Center stacked buttons */
    }
}

/* Add to Cart Button - Increased Width & Font - v1.3.2 */
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button,
body.single-product div.product form.cart .single_add_to_cart_button,
.woocommerce.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 !important; /* Grow to fill available space */
    min-width: 280px !important; /* Minimum readable width - v1.3.0 */
    max-width: 394px !important; /* Increased button width - v1.3.2 */
    width: auto !important; /* Let flex control width */
    border-radius: 9999px !important; /* Full pill */
    padding-top: 18.965px !important;
    padding-bottom: 18.035px !important;
    padding-left: 34.64px !important;
    padding-right: 34.63px !important;
    height: 56px !important; /* From Penpot: fixed height */
    margin: 0 !important; /* Remove all margins for perfect alignment */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    font-size: 14.3px !important; /* Increased by 2 units - v1.3.2 */
    line-height: 18.38px !important;
    background-color: #BA4A24 !important;
    color: white !important;
    border: none !important;
    transition: background-color 0.2s !important;
    box-shadow: 0 10px 15px -3px rgba(186, 74, 36, 0.2), 0 4px 6px -4px rgba(186, 74, 36, 0.2) !important;
}

/* Override specificity conflicts - v1.3.2 */
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button.button,
body.single-product.woocommerce div.product .cart .single_add_to_cart_button.kadence-cart-button-large,
body.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 !important; /* Grow to fill available space */
    min-width: 280px !important; /* Minimum readable width - v1.3.0 */
    max-width: 394px !important; /* Increased button width - v1.3.2 */
    width: auto !important; /* Let flex control width */
    border-radius: 9999px !important; /* Enforce pill shape */
    height: 56px !important; /* From Penpot: 56px height */
    padding: 18.965px 34.64px 18.035px 34.63px !important; /* From Penpot padding */
}

body.single-product div.product form.cart .single_add_to_cart_button:hover,
.woocommerce.single-product .single_add_to_cart_button:hover {
    background-color: var(--runayaq-primary-dark, #9e3d1c) !important;
}

/* Responsive adjustments for Add to Cart button - v1.2.7 */
@media (max-width: 1024px) {
    body.single-product div.product form.cart .single_add_to_cart_button,
    .woocommerce.single-product div.product .single_add_to_cart_button {
        flex: 1 !important; /* Still grow on tablet - v1.2.7 */
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

@media (max-width: 768px) {
    body.single-product div.product form.cart .single_add_to_cart_button,
    .woocommerce.single-product div.product .single_add_to_cart_button {
        flex: 1 !important; /* Grow to fill space - v1.2.7 */
        font-size: 11px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 520px) {
    body.single-product div.product form.cart .single_add_to_cart_button,
    .woocommerce.single-product div.product .single_add_to_cart_button {
        flex: 1 1 auto !important; /* Allow growth on mobile */
        max-width: 100% !important;
        min-width: 140px !important;
        font-size: 10px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Style Size Chart Button as Hyperlink - v1.3.7 */
.kapsc_pop_btn.button.popup {
    background: none !important;
    border: none !important;
    color: var(--runayaq-primary, #BA4A24) !important;
    text-decoration: underline !important;
    padding: 0 !important;
    padding-left: 26px !important; /* Space for 20px icon + gap - v1.3.6 */
    margin: 0 0 16px 0 !important; /* Bottom margin for spacing */
    font-size: 16px !important; /* Increased from 14px - v1.3.6 */
    font-weight: 500 !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: block !important; /* Block to appear on its own line */
    float: none !important; /* Override any inherited float */
    clear: both !important; /* Ensure it starts on a new line */
    width: auto !important; /* Don't take full width */
    align-items: center !important;
    transition: opacity 0.2s !important;
    position: relative !important;
    visibility: hidden !important; /* Hidden until JS positions it - v1.3.7 */
}

/* Show button after JavaScript has positioned it - prevents FOUC */
.kapsc_pop_btn.button.popup[data-positioned="true"] {
    visibility: visible !important;
}

/* Add size chart icon with ::before - uses plugin's original icon as fallback */
.kapsc_pop_btn.button.popup::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important; /* Increased from 16px to match font-size increase - v1.3.6 */
    height: 20px !important; /* Increased from 16px to match font-size increase - v1.3.6 */
    /* Use plugin's original size-chart-icon-2.svg */
    background-image: url("/wp-content/plugins/size-chart-for-woocommerce/assets/img/size-chart-icon-2.svg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* Colorize to terracota using CSS filter */
    filter: brightness(0) saturate(100%) invert(32%) sepia(55%) saturate(1847%) hue-rotate(346deg) brightness(95%) contrast(88%) !important;
}

.kapsc_pop_btn.button.popup:hover {
    opacity: 0.7 !important;
    background: none !important;
    text-decoration: underline !important;
}

/* If plugin DOES include img, show and style it (and hide ::before) */
.kapsc_pop_btn.button.popup img {
    width: 20px !important; /* Increased from 16px to match font-size increase - v1.3.6 */
    height: 20px !important; /* Increased from 16px to match font-size increase - v1.3.6 */
    display: inline-block !important;
    margin: 0 6px 0 0 !important;
    filter: brightness(0) saturate(100%) invert(32%) sepia(55%) saturate(1847%) hue-rotate(346deg) brightness(95%) contrast(88%) !important;
}

/* Hide ::before when img exists */
.kapsc_pop_btn.button.popup:has(img)::before {
    display: none !important;
}

/* Adjust padding when img exists */
.kapsc_pop_btn.button.popup:has(img) {
    padding-left: 0 !important;
}

/* ============================================================================
 * AUDIT FIXES v1.2.1 — Correcciones post-auditoría (2026-03-04)
 * Resuelve: GAP-1, GAP-2, GAP-3, GAP-5, GAP-7, GAP-9, GAP-10, GAP-13, GAP-14, GAP-15
 * ============================================================================ */

/* --- GAP-1 & GAP-9: Gap estructural explícito entre galería y resumen ---
 * ANTES: gap=0 en contenedor, separación solo via padding-left:32px del summary (frágil)
 * AHORA: column-gap:32px explícito en contenedor + widths ajustadas para no hacer overflow */
@media (min-width: 1024px) {
    .single-product div.product {
        column-gap: 32px !important;
    }

    /* Ajustar de 60% a 58% para dar espacio al gap sin hacer overflow */
    .runayaq-gallery-wrapper {
        flex: 0 0 58% !important;
        width: 58% !important;
        max-width: 58% !important;
    }

    /* Summary llena el espacio restante; el gap maneja la separación inter-columna */
    .entry-summary {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: auto !important;
        padding-left: 0 !important; /* Era 32px — ahora lo maneja column-gap */
    }
}

/* --- GAP-2: Badge "¡Oferta!" — color terracota en vez de pink/rojo de Kadence ---
 * producto-page.css usa ".woocommerce div.product .onsale" con especificidad (0,3,1) + !important
 * Necesitamos igualar esa especificidad para ganar en cascada (nuestro archivo carga después) */
.woocommerce div.product span.onsale,
.woocommerce div.product .onsale,
.woocommerce-page div.product .onsale,
.woocommerce ul.products li.product .onsale {
    background-color: var(--runayaq-primary, #BA4A24) !important;
    color: white !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.6 !important;
}

/* --- GAP-3: Estado seleccionado en swatches de variante ---
 * ANTES: background y border idénticos entre seleccionado y no-seleccionado (sin feedback visual)
 * AHORA: outline terracota de 2px alrededor del swatch seleccionado
 * Compatible con swatches de talla (texto) y color (fondo personalizado) */
.variable-item.selected,
.variable-item.button-variable-item.selected,
.button-variable-item.selected {
    outline: 2px solid var(--runayaq-primary, #BA4A24) !important;
    outline-offset: 2px !important;
    border-color: var(--runayaq-primary, #BA4A24) !important;
}

/* --- GAP-5: H1 tamaño de fuente en desktop — resolver conflicto de especificidad ---
 * La regla en línea ~259 (body.single-product .entry-summary h1.product_title = 28px)
 * ganaba a la regla de breakpoint. Esta tiene misma especificidad pero viene después
 * (cascade), por lo que gana en viewports ≥1024px */
@media (min-width: 1024px) {
    body.single-product .entry-summary h1.product_title,
    body.single-product .entry-summary .product_title.entry-title {
        font-size: 36px !important;
    }
}

/* --- GAP-7: Footer mobile — columnas no colapsan, texto desborda a 390px ---
 * Aplica solo en producto (este CSS carga en is_product()).
 * Para fix global, mover al style.css del child theme */
@media (max-width: 640px) {
    .site-footer .wp-block-columns,
    footer .wp-block-columns {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .site-footer .wp-block-column,
    footer .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .site-footer a,
    footer a,
    .site-footer p,
    footer p,
    .site-footer span,
    footer span {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
}

/* --- GAP-10: Botón WhatsApp (JoinChat plugin) — posición evita overlap con galería ---
 * En mobile hay sticky bar de 80px. Subir el botón para que no quede debajo */
@media (max-width: 1023px) {
    .joinchat {
        bottom: 80px !important;
    }
}

/* --- GAP-13: Color de stock — quitar opacidad 85% para consistencia con tokens ---
 * Era rgba(63,195,135,0.85) → ahora color sólido */
.single-product .stock,
.woocommerce .woocommerce-variation-availability .stock {
    color: #3fc387 !important;
}

/* --- GAP-14: Botón guía de tallas — reemplazar visibility:hidden por opacity transition ---
 * PROBLEMA: Si el JS no ejecuta, el botón queda permanentemente invisible
 * SOLUCIÓN: opacity:0 con animación fallback que lo muestra después de 1s,
 * y opacity:1 inmediato cuando el JS pone data-positioned="true" */
.kapsc_pop_btn.button.popup {
    visibility: visible !important;   /* Anula el visibility:hidden de la regla anterior */
    opacity: 0;
    animation: kapsc-reveal 0.2s ease 1s forwards; /* Fallback: aparece en 1s si JS falla */
}

@keyframes kapsc-reveal {
    to { opacity: 1; }
}

.kapsc_pop_btn.button.popup[data-positioned="true"] {
    opacity: 1 !important;
    animation: none !important; /* JS lo manejó, cancelar animación fallback */
}

/* --- GAP-15: Font-size del botón acordeón — alinear con el span interior ---
 * El botón heredaba 18px del tema; el span interno tenía 12px via CSS nuestro.
 * Setear font-size en el botón mismo para consistencia */
.runayaq-product-menu .trigger-drawer {
    font-size: 0.75rem !important; /* 12px — igual que el span interior */
}

/* Style the New Favorites Icon Button - v1.3.2 */
.runayaq-favorites-icon-btn {
    width: 56.55px !important; /* From Penpot: 56.55px */
    height: 56.55px !important; /* From Penpot: 56.55px */
    border-radius: 9999px !important; /* Circle */
    border: 1px solid #9CA3AF !important; /* Solid visible border (gray-400) - v1.3.2 */
    background: white !important;
    color: #6b7280; /* text-gray-500 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important; /* Don't shrink */
    padding: 0 !important; /* Reset padding */
    margin: 0 !important; /* Remove all margins for perfect alignment */
    opacity: 1 !important; /* No opacity - v1.3.2 */
}

.runayaq-favorites-icon-btn:hover {
    border-color: var(--runayaq-primary, #BA4A24) !important;
    color: var(--runayaq-primary, #BA4A24) !important;
    background: transparent !important; /* Keep white/base */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.runayaq-favorites-icon-btn svg {
    transition: fill 0.2s;
    width: 22px;
    height: 22px;
}

.runayaq-favorites-icon-btn:hover svg {
    fill: var(--runayaq-primary, #BA4A24) !important;
}

/* Ensure inner div matches size (if hook outputs div structure) */
.runayaq-favorites-icon-btn > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Responsive adjustments for Favorites button */
@media (max-width: 768px) {
    .runayaq-favorites-icon-btn {
        width: 50px !important;
        height: 50px !important;
    }
    .runayaq-favorites-icon-btn svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 520px) {
    .runayaq-favorites-icon-btn {
        width: 44px !important;
        height: 44px !important;
    }
    .runayaq-favorites-icon-btn svg {
        width: 18px;
        height: 18px;
    }
}