/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* ═══════════════════════════════════════════════════════════════════
   WooCommerce — Galería de producto: layout adaptativo por imagen
   ═══════════════════════════════════════════════════════════════════

   Lógica:
   · 1 imagen   → 100 %
   · 2 imágenes → 100 % cada una (apiladas)
   · 3+ imágenes → patrón 1,2,1,2: 1ª 100 % / 2ª+3ª 50 % / 4ª 100 % / 5ª+6ª 50 % …
                    (nth-child 3n+1 → 100 %, resto → 50 %)
   · Gap 32 px en desktop · Border-radius 18 px siempre
   ═══════════════════════════════════════════════════════════════════ */

/* ── Wrapper: flex con gap ────────────────────────────────────────── */
.single-product-main-image .woocommerce-product-gallery__wrapper {
    display:   flex !important;
    flex-wrap: wrap !important;
    gap:       32px !important;
}

/* ── Base: todas al 100 % (1 o 2 imágenes, o neutraliza Salient) ─── */
.woocommerce.single-product div.product
    .single-product-main-image div.images
    .woocommerce-product-gallery__image {
    width:      100% !important;
    max-width:  100% !important;
    flex:       0 0 100% !important;
    float:      none !important;
    clear:      none !important;
    box-sizing: border-box !important;
}

/* ── Border-radius en la imagen (siempre, desktop y mobile) ──────── */
.single-product-main-image .woocommerce-product-gallery__image img {
    border-radius: 18px !important;
    display:       block;
    width:         100%;
    height:        auto;
}

/* ── 3+ imágenes: base 50 % — calc descuenta la mitad del gap ────── */
.woocommerce.single-product div.product
    .single-product-main-image div.images
    .woocommerce-product-gallery__image:first-child:nth-last-child(n+3),
.woocommerce.single-product div.product
    .single-product-main-image div.images
    .woocommerce-product-gallery__image:first-child:nth-last-child(n+3)
    ~ .woocommerce-product-gallery__image {
    width:     calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
    flex:      0 0 calc(50% - 16px) !important;
}

/* ── 3+ imágenes: posiciones 1, 4, 7 … → 100 % (patrón 1,2,1,2) ── */
.woocommerce.single-product div.product
    .single-product-main-image div.images
    .woocommerce-product-gallery__image:first-child:nth-last-child(n+3):nth-child(3n+1),
.woocommerce.single-product div.product
    .single-product-main-image div.images
    .woocommerce-product-gallery__image:first-child:nth-last-child(n+3)
    ~ .woocommerce-product-gallery__image:nth-child(3n+1) {
    width:     100% !important;
    max-width: 100% !important;
    flex:      0 0 100% !important;
}

/* ── Mobile: fila horizontal con scroll ──────────────────────────── */
@media (max-width: 767px) {
    .single-product-main-image .woocommerce-product-gallery__wrapper {
        display:           flex !important;
        flex-wrap:         nowrap !important;
        overflow-x:        auto !important;
        overflow-y:        hidden !important;
        gap:               12px !important;
        scroll-snap-type:  x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom:    4px !important;
    }

    /* Todas las imágenes: ancho y alto fijo, recorte uniforme */
    .woocommerce.single-product div.product
        .single-product-main-image div.images
        .woocommerce-product-gallery__image {
        width:             80vw !important;
        max-width:         80vw !important;
        flex:              0 0 80vw !important;
        height:            72vw !important;
        scroll-snap-align: start !important;
        overflow:          hidden !important;
        border-radius:     18px !important;
    }

    /* El <a> debe ocupar todo el alto del contenedor */
    .woocommerce.single-product div.product
        .single-product-main-image div.images
        .woocommerce-product-gallery__image a {
        display:    block !important;
        width:      100% !important;
        height:     100% !important;
    }

    /* El <img> rellena el <a> con recorte centrado */
    .woocommerce.single-product div.product
        .single-product-main-image div.images
        .woocommerce-product-gallery__image img {
        width:         100% !important;
        height:        100% !important;
        object-fit:    cover !important;
        border-radius: 0 !important;
    }

    /* Sobreescribir patrones desktop — en mobile todos son 80vw */
    .woocommerce.single-product div.product
        .single-product-main-image div.images
        .woocommerce-product-gallery__image:first-child:nth-last-child(n+3),
    .woocommerce.single-product div.product
        .single-product-main-image div.images
        .woocommerce-product-gallery__image:first-child:nth-last-child(n+3)
        ~ .woocommerce-product-gallery__image,
    .woocommerce.single-product div.product
        .single-product-main-image div.images
        .woocommerce-product-gallery__image:first-child:nth-last-child(n+3):nth-child(3n+1),
    .woocommerce.single-product div.product
        .single-product-main-image div.images
        .woocommerce-product-gallery__image:first-child:nth-last-child(n+3)
        ~ .woocommerce-product-gallery__image:nth-child(3n+1) {
        width:     80vw !important;
        max-width: 80vw !important;
        flex:      0 0 80vw !important;
        height:    72vw !important;
    }
}

/* ── Icono carrito → calculadora (FontAwesome legacy) ─────────────────────── */
.nectar-woo-cart .icon-salient-cart::before,
#mobile-cart-link .icon-salient-cart::before {
    font-family: 'FontAwesome' !important;
    content:     '\f1ec' !important;   /* fa-calculator */
}

/* ── Icono pedidos (My Account nav) → calculadora ────────────────────────── */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a:before {
    content: '\f1ec' !important;   /* fa-calculator */
}