/*
Theme Name:   Xstore child
Theme URI:    https://xstore.8theme.com
Description:  XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution.
Author:       8theme
Author URI:   https://www.8theme.com
Template:     xstore
Version:      1.0
Text Domain:  xstore-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark
*/

/* =========================================
   1. ESTILOS DE TARJETA CAUFY (BASE)
   ========================================= */

.caufy-section { margin-bottom: 50px; position: relative; }

/* Encabezado: Título y Botón Ver Todos */
.caufy-section__header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px; border-bottom: 2px solid #f0f0f0; padding-bottom: 12px;
}
.caufy-section__header .caufy-section__title {
    font-size: 24px; font-weight: 700; color: #111; margin-bottom: 0; 
    border-bottom: none; padding-bottom: 0; display: flex; align-items: center; gap: 12px;
}
.caufy-section__header .caufy-section__title::before {
    content: ''; display: block; width: 6px; height: 26px;
    background-color: #00a650; border-radius: 4px;
}
.caufy-section__view-all {
    font-size: 14px; color: #3483fa; text-decoration: none; font-weight: 600; 
    background: #f0f4ff; padding: 6px 16px; border-radius: 20px; transition: all 0.2s ease;
}
.caufy-section__view-all:hover { background: #3483fa; color: #fff; }

/* Tarjeta de Producto */
.caufy-card {
    background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    overflow: hidden; transition: box-shadow 0.3s ease; 
    display: flex; flex-direction: column; height: 100%; width: 100%;
}
.caufy-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.caufy-card__link { text-decoration: none !important; color: inherit; display: flex; flex-direction: column; height: 100%; }

/* Contenedor de Imagen Cuadrado */
.caufy-card__media { 
    position: relative; width: 100%; padding-top: 100%; 
    background-color: #ffffff; border-bottom: 1px solid #f5f5f5; overflow: hidden;
}
.caufy-card__media img { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    object-fit: contain; padding: 15px; box-sizing: border-box;
}

/* Contenido de Tarjeta */
.caufy-card__content { padding: 15px; display: flex; flex-direction: column; justify-content: flex-start; flex-grow: 1; }
.caufy-card__title {
    font-size: 14px; color: #666; margin: 0 0 10px 0; font-weight: 400;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; 
    line-height: 1.3; min-height: 36px; 
}

/* Bloque de Precios */
.caufy-price-block { margin-bottom: 10px; }
.caufy-price-block__old { font-size: 13px; color: #999; text-decoration: line-through; margin-bottom: 2px; min-height: 18px; }
.caufy-price-block__current-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.caufy-price-block__current { font-size: 22px; font-weight: 600; color: #333; }
.caufy-price-block__current--sale { color: #00a650; }

/* Banderas y Badges */
.caufy-card__flags { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.caufy-badge { font-size: 12px; font-weight: 700; padding: 3px 6px; border-radius: 3px; display: inline-block; line-height: 1; }
.caufy-badge--green { background-color: #00a650; color: #ffffff; }
.caufy-badge--discount { color: #00a650; font-size: 13px; font-weight: 600; }

/* ETIQUETA FLOW (Apilada) */
.caufy-flow-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; margin-top: 4px; }
.caufy-flow-logo { display: block; height: 34px !important; width: auto !important; object-fit: contain; flex-shrink: 0; }
.caufy-flow-badge {
    background-color: #00a650 !important; color: #ffffff !important;
    padding: 4px 8px; border-radius: 4px; font-size: 9px; font-weight: 800; text-transform: uppercase; line-height: 1.2;
}

/* =========================================
   2. CONTROLES DEL CARRUSEL (FLECHAS)
   ========================================= */
.caufy-product-swiper .swiper-button-next::after, 
.caufy-product-swiper .swiper-button-prev::after,
.caufy-product-swiper .swiper-button-next i, 
.caufy-product-swiper .swiper-button-prev i { display: none !important; content: none !important; }

.caufy-product-swiper .swiper-button-next, 
.caufy-product-swiper .swiper-button-prev {
    background-color: #ffffff !important; width: 44px !important; height: 44px !important; 
    border-radius: 50% !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; 
    color: transparent !important; background-position: center !important;
    background-repeat: no-repeat !important; background-size: 20px !important; margin-top: -22px !important;
}

.caufy-product-swiper .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
    right: 5px !important;
}
.caufy-product-swiper .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
    left: 5px !important;
}

/* =========================================
   3. GRILLA DEL CATÁLOGO (SHOP) RESPONSIVA
   ========================================= */

/* Forzamos el display grid y anulamos pseudo-elementos de XStore */
.woocommerce .products, 
.woocommerce-page .products,
.elementor-widget-shortcode .products,
.elementor-shortcode .products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas móvil */
    gap: 12px !important; 
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce .products::before, .woocommerce .products::after,
.woocommerce-page .products::before, .woocommerce-page .products::after { display: none !important; content: none !important; }

/* Tablets */
@media (min-width: 768px) {
    .woocommerce .products, .woocommerce-page .products,
    .elementor-widget-shortcode .products, .elementor-shortcode .products { 
        grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; 
    }
}

/* Escritorio */
@media (min-width: 1024px) {
    .woocommerce .products, .woocommerce-page .products,
    .elementor-widget-shortcode .products, .elementor-shortcode .products { 
        grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; 
    }
}

/* Limpieza de cada producto (Anulamos Bootstrap/XStore) */
.woocommerce .products .product,
.woocommerce-page .products .product,
.elementor-widget-shortcode .products .product,
.elementor-shortcode .products .product {
    width: 100% !important; 
    max-width: 100% !important;
    flex: none !important; 
    margin: 0 !important; 
    padding: 0 !important;
    float: none !important; 
    background: transparent !important; 
    border: none !important; 
    box-shadow: none !important;
    display: flex !important;
}

/* Aseguramos el alto uniforme */
.caufy-card-wrapper, .swiper-slide { height: auto !important; }

/* =========================================
   ESTILOS DEL SISTEMA DE FILTROS CAUFY
   ========================================= */

/* Contenedor Principal (Escritorio) */
.caufy-filters-sidebar {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    font-family: inherit;
    width: 100%;
}

.caufy-filter-group {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.caufy-filter-group:last-child { border-bottom: none; }

/* Títulos de Filtros */
.caufy-filter-title {
    font-size: 14px;
    font-weight: 700;
    color: #112d7c;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* Custom Checkboxes y Radios */
.caufy-checkbox-label, .caufy-radio-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    user-select: none;
}

.caufy-checkbox-label input, .caufy-radio-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Diseño del Check/Radio Box */
.caufy-checkmark, .caufy-radiomark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 1px solid #ccc;
    transition: all 0.2s;
}
.caufy-checkbox-label .caufy-checkmark { border-radius: 4px; }
.caufy-radio-label .caufy-radiomark { border-radius: 50%; }

.caufy-checkbox-label:hover input ~ .caufy-checkmark,
.caufy-radio-label:hover input ~ .caufy-radiomark { border-color: #3483fa; }

.caufy-checkbox-label input:checked ~ .caufy-checkmark,
.caufy-radio-label input:checked ~ .caufy-radiomark {
    background-color: #3483fa;
    border-color: #3483fa;
}

/* Icono de Check interior */
.caufy-checkmark:after, .caufy-radiomark:after {
    content: "";
    position: absolute;
    display: none;
}
.caufy-checkbox-label input:checked ~ .caufy-checkmark:after,
.caufy-radio-label input:checked ~ .caufy-radiomark:after { display: block; }

.caufy-checkbox-label .caufy-checkmark:after {
    left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid white; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.caufy-radio-label .caufy-radiomark:after {
    top: 5px; left: 5px; width: 6px; height: 6px;
    border-radius: 50%; background: white;
}

/* Scroll para categorías largas */
.caufy-categories-scroll {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
}
.caufy-categories-scroll::-webkit-scrollbar { width: 5px; }
.caufy-categories-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* Botones de Acción (Corregidos y Alineados) */
.caufy-filters-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

.caufy-btn-apply,
.caufy-btn-clear {
    flex: 1 !important;
    height: 42px !important; 
    padding: 0 5px !important; 
    font-size: 13px !important; 
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-transform: none !important; 
    white-space: nowrap !important; 
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background-color 0.3s ease !important;
}

.caufy-btn-apply {
    background-color: #00a650 !important; 
    color: #ffffff !important;
}
.caufy-btn-apply:hover {
    background-color: #008f45 !important;
}

.caufy-btn-clear {
    background-color: #f0f0f0 !important;
    color: #666666 !important;
}
.caufy-btn-clear:hover {
    background-color: #e0e0e0 !important;
    color: #333333 !important;
}

/* =========================================
   LÓGICA MOBILE (MENÚ DESLIZABLE)
   ========================================= */

.caufy-mobile-filter-btn { display: none; }
.caufy-filters-header-mobile { display: none; }
.caufy-filters-overlay { display: none; }

@media (max-width: 991px) {
    /* Ocultamos el diseño de escritorio y lo convertimos en Off-Canvas */
    .caufy-filters-sidebar {
        position: fixed; 
        top: 0; 
        left: -100%; 
        width: 300px; 
        height: 100%; /* Permite estabilidad en pantallas móviles */
        background: #fff; 
        z-index: 100000; 
        border-radius: 0;
        overflow-y: auto; 
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2); 
        padding: 0 20px 80px 20px; /* Respiro inferior para los botones */
        box-sizing: border-box !important; /* Evita desbordes del contenedor */
    }
    .caufy-filters-sidebar.active { left: 0; }

    /* Cabecera del menú móvil */
    .caufy-filters-header-mobile {
        display: flex; justify-content: space-between; align-items: center;
        padding: 20px 0; border-bottom: 1px solid #eee; margin-bottom: 20px;
        position: sticky; top: 0; background: #fff; z-index: 10;
    }
    .caufy-filters-header-mobile h3 { margin: 0; font-size: 18px; font-weight: 700; color: #333; }
    .caufy-filters-header-mobile button {
        background: none; border: none; font-size: 28px; color: #999; cursor: pointer; line-height: 1;
    }

    /* Botón flotante estilo captura de pantalla */
    .caufy-mobile-filter-btn {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 50%; left: -5px; transform: translateY(-50%);
        width: 50px; height: 50px; background-color: #fff;
        border: 1px solid #e0e0e0; border-radius: 50%;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
        z-index: 9999; cursor: pointer; padding: 12px;
        color: #333; transition: all 0.3s ease;
    }
    .caufy-mobile-filter-btn:hover { background-color: #f9f9f9; left: 0; }

    /* Overlay oscuro */
    .caufy-filters-overlay {
        display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 99999;
        opacity: 0; visibility: hidden; transition: 0.3s;
    }
    .caufy-filters-overlay.active { opacity: 1; visibility: visible; }
}