/**
 * WooCommerce Product Customizer — Fix Catálogo Móvil v3
 *
 * FILOSOFÍA:
 *  · NO forzamos colores con !important — el tema/Elementor los gestiona.
 *  · Solo controlamos box-model, ancho, margen y layout de tarjeta.
 *  · Texto corto "Elegir" se gestiona vía PHP (is_mobile_request()).
 *  · border-radius hereda var(--wcc-radius-pill) del personalizador.
 *
 * @package WooCommerce_Product_Customizer
 */

/* ═══════════════════════════════════════════════
   1. TARJETA DE PRODUCTO — flex column
   Precio y botón siempre alineados al fondo
   independientemente de la longitud del título
═══════════════════════════════════════════════ */
ul.products li.product {
    display:        flex;
    flex-direction: column;
}

ul.products li.product .woocommerce-loop-product__link {
    flex: 1;
    display: block;
}

/* Fuerza precio al fondo con margen automático */
ul.products li.product .price {
    margin-top: auto;
}

/* ═══════════════════════════════════════════════
   2. BOX-MODEL SEGURO
   Impide que padding sume al ancho declarado
═══════════════════════════════════════════════ */
ul.products li.product a.button,
ul.products li.product .button {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════
   3. BOTÓN BASE (todas las resoluciones)
   Solo layout — SIN colores forzados
═══════════════════════════════════════════════ */
ul.products li.product a.button.add_to_cart_button,
ul.products li.product a.button.product_type_variable,
ul.products li.product a.button.wcc-catalog-btn {
    display:        block;
    box-sizing:     border-box;
    text-align:     center;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    /* Radio heredado del panel de ajustes del plugin */
    border-radius:  var(--wcc-radius-pill, 4px);
    letter-spacing: 0;
}

/* ═══════════════════════════════════════════════
   4. MÓVIL ≤ 420px — fix de desbordamiento
   Solo ancho, margen y padding. CERO colores.
═══════════════════════════════════════════════ */
@media (max-width: 420px) {

    /* Evitar que hijo desborde la tarjeta */
    ul.products li.product {
        overflow: hidden;
    }

    ul.products li.product a.button.add_to_cart_button,
    ul.products li.product a.button.product_type_variable,
    ul.products li.product a.button.wcc-catalog-btn {
        width:     calc(100% - 10px) !important;
        margin:    8px auto 5px      !important;
        padding:   9px 5px           !important;
        font-size: 13px;
    }
}

/* ═══════════════════════════════════════════════
   5. TABLET 421px – 768px
═══════════════════════════════════════════════ */
@media (min-width: 421px) and (max-width: 768px) {

    ul.products li.product a.button.add_to_cart_button,
    ul.products li.product a.button.product_type_variable,
    ul.products li.product a.button.wcc-catalog-btn {
        width:   calc(100% - 16px) !important;
        margin:  10px auto 6px     !important;
        padding: 10px 8px;
    }
}

/* ═══════════════════════════════════════════════
   6. MUY ESTRECHO < 360px (2 columnas ajustadas)
═══════════════════════════════════════════════ */
@media (max-width: 359px) {

    ul.products li.product a.button.add_to_cart_button,
    ul.products li.product a.button.product_type_variable,
    ul.products li.product a.button.wcc-catalog-btn {
        width:     calc(100% - 6px) !important;
        margin:    6px auto 4px     !important;
        padding:   7px 4px;
        font-size: 11px;
    }
}