/* InstruMelodia - WooCommerce Fix v4.0 */
/* ROOT CAUSE FIX: Brisk UICore theme sets display:none!important on all
   .woocommerce-product-gallery__image divs and only shows .flex-active-slide.
   For single-image products, WC disables flexslider and never adds .flex-active-slide.
   Fix: Override display for when only 1 image exists (no siblings without flex-active-slide). */

/* ============================================================
   GALLERY FIX - COMPLETE OVERRIDE OF BRISK THEME HIDING
   ============================================================ */

/* Gallery container: opacity fix */
.woocommerce-product-gallery,
.woocommerce-product-gallery.images {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* CRITICAL: Brisk theme hides ALL __image divs with display:none!important
   We need to show:
   a) .flex-active-slide (normal multi-image case, already works)
   b) The FIRST __image when there's no flex-active-slide (single image case)
   Use :first-child as a proxy since single-image products have only 1 __image */
.woocommerce-product-gallery .woocommerce-product-gallery__image.flex-active-slide,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:only-child,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child:not(.flex-hidden) {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
}

/* The flex-viewport */
.woocommerce-product-gallery .flex-viewport {
    overflow: visible !important;
    height: auto !important;
}

/* Wrapper must have position relative */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    position: relative !important;
    overflow: visible !important;
}

/* All imgs must be visible */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .slides li img {
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
    max-width: 100% !important;
}





/* ============================================================
   PRODUCT BUY BOX - Layout moderno y aireado
   Estructura: [- Cantidad +]  [AÑADIR AL CARRITO] en la misma fila
   NOTA: Brisk UICore usa position:absolute en los botones +/-,
   NO cambiamos el layout interno de .quantity, solo lo decoramos.
   ============================================================ */

/* El formulario: fila horizontal */
.woocommerce div.product form.cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* Quantity: no crece, usa layout RELATIVO (compatible con Brisk) */
.woocommerce div.product form.cart .quantity {
    flex: 0 0 auto !important;
    position: relative !important;
    display: inline-block !important;
    margin: 0 !important;
    height: 50px !important;
    width: 130px !important;
    border: 1.5px solid #d0d0d0 !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

/* Botones - y + : position ABSOLUTE sobre el input (estilo Brisk) */
.woocommerce div.product form.cart .quantity .minus,
.woocommerce div.product form.cart .quantity .plus {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 38px !important;
    background: transparent !important;
    border: none !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: #444 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    opacity: 1 !important;
    line-height: 1 !important;
}
.woocommerce div.product form.cart .quantity .minus {
    left: 0 !important;
}
.woocommerce div.product form.cart .quantity .plus {
    right: 0 !important;
}

/* Input de número: ancho completo con espacio para los botones posicionados */
.woocommerce div.product form.cart .quantity input.qty {
    width: 100% !important;
    height: 50px !important;
    border: none !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0 38px !important;
    margin: 0 !important;
    background: transparent !important;
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: #111 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
}
.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 !important;
    margin: 0 !important;
}

/* Botón Añadir al carrito: crece para llenar el espacio restante */
.woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto !important;
    width: auto !important;
    display: block !important;
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    margin: 0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* Separador entre buy box y categorías */
.woocommerce div.product .product_meta {
    margin-top: 20px !important;
    padding-top: 16px !important;
}

/* ============================================================
   GALLERY ZOOM ICON - fix overlap on image
   ============================================================ */

/* Make gallery wrapper properly clipped so the icon stays inside */
.woocommerce-product-gallery .woocommerce-product-gallery__image a {
    display: block !important;
    position: relative !important;
}

/* The zoom icon sits inside the image anchor - keep it visually separate */
.woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10 !important;
    background: rgba(255,255,255,0.85) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
.woocommerce-product-gallery__trigger img,
.woocommerce-product-gallery__trigger svg {
    width: 18px !important;
    height: 18px !important;
}

/* ============================================================
   MOBILE RESPONSIVE - BUY BOX
   Quantity pill + Add to cart: ALWAYS same row, never stacked
   ============================================================ */
@media (max-width: 768px) {
    /* Keep row layout, allow content to fit */
    .woocommerce div.product form.cart {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Quantity: fixed 120px pill, never shrinks */
    .woocommerce div.product form.cart .quantity {
        flex: 0 0 120px !important;
        width: 120px !important;
        min-width: 120px !important;
    }

    /* Add to cart: grow to fill all remaining space */
    .woocommerce div.product form.cart .single_add_to_cart_button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
    }
}