/*
Theme Name: Blocksy Child
Template: blocksy
*/



/* =========================================
   BLOCKSY CHILD THEME CUSTOM STYLES
   ========================================= */

/* --- 1. ESTABILIDAD DE PANTALLA (Anti-Salto) --- */
/* Reserva el espacio de la barra de desplazamiento siempre para evitar movimientos */
html {
    scrollbar-gutter: stable; 
}

/* Cuando el carrito abre, bloqueamos el scroll del body sin quitar la barra visual */
body.xoo-wsc-open {
    overflow: hidden; 
    padding-right: 0 !important;
}

/* --- 2. LIMPIEZA VISUAL --- */
/* Oculta el carrito nativo de Blocksy al pasar el mouse (el dropdown) */
.ct-header-cart:hover .ct-cart-content { 
    display: none !important; 
}

/* Fondo oscuro transparente (Overlay) más elegante */
.xoo-wsc-opac {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* --- 3. DISEÑO PERSONALIZADO SIDE CART --- */

/* Contenedor principal: Quitar bordes y mejorar sombra */
.xoo-wsc-container {
    border: none !important;
    box-shadow: -5px 0 20px rgba(0,0,0,0.2) !important;
}

/* CABECERA: Centrado perfecto */
.xoo-wsc-header {
    padding: 15px 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: flex !important;
    justify-content: center !important; /* Centrado horizontal */
    align-items: center !important;     /* Centrado vertical */
    position: relative !important;      /* Referencia para mover la X */
    min-height: 50px !important;
}

/* BOTÓN CERRAR (X): Lo sacamos del flujo para que no empuje el título */
.xoo-wsc-header .xoo-wsc-ch-cls {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* TÍTULO: Tamaño moderado y centrado */
.xoo-wsc-header span {
    font-size: 16px !important;   
    font-weight: 600 !important;
    color: #222222 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center !important;
    width: 100% !important;
}

/* BOTÓN "FINALIZAR COMPRA" */
.xoo-wsc-ft-btn {
    background-color: #ed3236 !important; /* Rojo corporativo */
    color: #ffffff !important;
    border-radius: 20px !important;       /* Bordes redondeados */
    text-transform: uppercase !important;
    font-weight: bold !important;
    padding: 10px !important;
    border: none !important;
    transition: transform 0.2s ease;
}

.xoo-wsc-ft-btn:hover {
    background-color: #c92226 !important;
    transform: scale(1.02);
}



/*-----------------------------------------------------------------------------------------------------------------------------*/

.thwepo-extra-fields .th_col_6 {
    width: 50%;
    float: left;
    padding-right: 10px;
    box-sizing: border-box;
}

/* Para que los campos de abajo no se suban */
.thwepo-extra-fields .checkbox {
    clear: both;
}



/* Slider---------------------------------------------------------------------------------------------*/

/* =============================================================================
   1. SLIDER PRO V3 - CORE ENGINE (Optimizado GPU & Layout)
   ============================================================================= */

.slider-pro-container {
    position: relative;
    width: 100%;
    overflow: hidden !important; /* CRÍTICO: Corta todo lo que salga del marco */
    background-color: #f0f0f0;   /* Placeholder para CLS */
    contain: paint layout;       /* Instrucción al navegador para optimizar render */
    z-index: 1;                  /* Evita conflictos de apilamiento */
    user-select: none;           /* Mejora la experiencia táctil al no seleccionar texto */
}

.slider-pro-wrapper {
    display: flex !important;       /* Fuerza el layout flexible */
    flex-wrap: nowrap !important;   /* CRÍTICO: Prohíbe que las slides caigan abajo */
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0); /* Aceleración por Hardware (GPU) */
    will-change: transform;          /* Prepara el compositor gráfico */
    box-sizing: border-box;
}

.slider-pro-slide {
    flex: 0 0 100% !important;      /* CRÍTICO: Fuerza ancho exacto del contenedor */
    width: 100% !important;
    min-width: 100% !important;     /* Seguridad extra para navegadores antiguos */
    position: relative;
    margin: 0 !important;           /* Elimina márgenes fantasma del tema */
    padding: 0 !important;
    backface-visibility: hidden;    /* Evita parpadeos en renderizado 3D */
    transform-style: preserve-3d;
}

/* --- GESTIÓN DE IMÁGENES Y ASPECT RATIO --- */

.slider-pro-slide a,
.slider-pro-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorte inteligente */
    border: none;
}

/* Escritorio: Formato Panorámico (16:5) */
@media (min-width: 768px) {
    .slider-pro-slide a {
        aspect-ratio: 16 / 5;
    }
}

/* Móvil: Formato Vertical (4:5) - Prioridad Táctil */
@media (max-width: 767px) {
    .slider-pro-slide a {
        aspect-ratio: 4 / 5;
    }
    /* Ocultamos flechas para UX limpia en móviles */
    .slider-btn { display: none !important; }
}

/* --- CONTROLES DE NAVEGACIÓN --- */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 24px;
    z-index: 10;
    transition: all 0.2s ease;
    backdrop-filter: blur(2px); /* Efecto vidrio moderno */
}

.slider-btn:hover { background: rgba(0, 0, 0, 0.8); }
.slider-btn:focus { outline: 2px solid white; } /* Accesibilidad TV/Teclado */
.prev { left: 0; border-radius: 0 5px 5px 0; }
.next { right: 0; border-radius: 5px 0 0 5px; }


/* ------------------------imágenes Lechona, Artesanales, Típicos, Tamales, Lechona en porción, Ensaladas, Arroces cambien a rojo------------------------------------------------------------------------------------*/

/* --- SOLUCIÓN INDIVIDUAL (ITEM-ROJO) --- */

/* 1. TEXTO: Se pone rojo al tocar SU columna específica */
.item-rojo:hover h3,
.item-rojo:hover h4,
.item-rojo:hover p,
.item-rojo:hover a,
.item-rojo:hover .stk-block-heading__text,
.item-rojo:hover .stk-block-text__text {
    color: #ED3236 !important;
    transition: color 0.3s ease;
}

/* 2. ÍCONO: Se pone rojo al tocar SU columna específica */
.item-rojo:hover svg,
.item-rojo:hover svg path,
.item-rojo:hover .stk-block-icon {
    fill: #ED3236 !important;    /* Rellena el cuerpo */
    stroke: #ED3236 !important;  /* Pinta las líneas */
    color: #ED3236 !important;   /* Asegura el color base */
    transition: all 0.3s ease;
}

/* 3. EMERGENCIA (Si alguno es imagen PNG/JPG) */
.item-rojo:hover img {
    filter: invert(26%) sepia(96%) saturate(7463%) hue-rotate(357deg) brightness(95%) contrast(116%) !important;
}