/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 28 2025 | 01:30:37 */
/* --- LAYOUT PRINCIPAL Y STICKY SIDEBAR --- */

/* Contenedor principal del layout 2-columnas */
.product-single-page .product-main-grid {
    display: grid;
    grid-template-columns: 2fr 1.1fr; 
    gap: 3rem;
    align-items: flex-start;
	margin-top: 4rem;
}

/* Sidebar de Compra (Columna Derecha) */
.product-right-sidebar {
    position: sticky;
    top: 100px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    z-index: 5;
}


/* --- GALERÍA Y CONTENIDO IZQUIERDO --- */

/* --- REFUERZO EXTREMO PARA LA GALERÍA --- */

/* 🟢 Contenedor Principal (Para el fallback y el shortcode) */
.product-single-page .product-gallery,
.product-single-page .gallery-fallback-wrapper {
    /* Forzamos la disposición horizontal de las dos columnas de la galería */
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    align-items: flex-start !important;
}

/* 🟢 Miniaturas (Columna Izquierda Fija) */
.product-single-page .gallery-thumbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 80px !important; 
    flex-shrink: 0 !important;
}

/* 🟢 Imágen Miniatura Individual */
.product-single-page .thumb-item,
.product-single-page .gallery-thumbs img {
    width: 50px !important; /* Ancho fijo */
    height: 50px !important; /* Altura fija */
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
    border: 2px solid var(--border-color) !important;
    /* Anulamos cualquier margen de WP */
    margin: 0 !important; 
    padding: 0 !important; 
}


/* 🟢 Imagen Principal (Columna Derecha que Crece) */
.product-single-page .gallery-main-image {
    flex-grow: 1 !important;
    overflow: hidden !important;
}
.product-single-page .main-photo,
.product-single-page .gallery-main-image img {
    /* Hacemos que la imagen principal ocupe todo el espacio restante */
    width: 100% !important;
    height: auto !important; 
    border-radius: 35px !important;
    display: block !important;
}
/* 🟢 Secciones de Contenido (Descripción, Detalles, Reviews) */
.product-single-page .product-content-sections {
    margin-top: 1rem;
}
.product-single-page .content-section {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
}
.product-single-page .content-title-small {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 0.5rem;
}



.product-content-sections .content-section.description-section .buscador-tickets{
	display: none !important;
}

/* --- SIDEBAR: TÍTULO, DETALLES Y CONTADOR --- */

/* Bloque General */
.product-right-sidebar .sidebar-info-block {
    text-align: left;
}
.product-right-sidebar .stars-review-small {
    margin-bottom: 0.5rem;
    display: block;
}

/* 🟢 1. DETALLES RÁPIDOS (Tabla de Ubicación, Dormitorios, etc.) */

.product-right-sidebar .raffle-details-small {
    display: block;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.product-right-sidebar .detail-row-small {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    border-bottom: 1px dashed var(--border-color);
}
.product-right-sidebar .detail-row-small:last-child {
    border-bottom: none;
}
.product-right-sidebar .detail-label {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--dark-text);
}
.product-right-sidebar .detail-value {
    text-align: right;
    flex-grow: 1;
    color: var(--dark-text); /* Corregido a dark-text para que se vea */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* 🟢 2. CONTADOR DE TIEMPO (Countdown) */

.product-right-sidebar .raffle-countdown-block {
    margin-bottom: 1.5rem;
}
.product-right-sidebar .countdown-timer {
    display: flex;
    justify-content: space-between;
    background-color: var(--light-bg);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}
.product-right-sidebar .timer-unit {
    flex-grow: 1;
    min-width: 50px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.product-right-sidebar .timer-unit:last-child {
    border-right: none;
}
.product-right-sidebar .timer-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-text);
    display: block;
}
.product-right-sidebar .timer-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}


/* 🟢 3. BLOQUE DE COMPRA Y CANTIDAD */

.product-right-sidebar .raffle-purchase-block {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
}
.product-right-sidebar .price-and-remaining {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.product-right-sidebar .purchase-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark-text);
}
.product-right-sidebar .tickets-remaining {
    font-size: 0.9rem;
    color: var(--accent-green-bright);
    font-weight: 600;
}

/* Selector de Cantidad + Botón */
.product-right-sidebar .ticket-quantity-and-btn {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.product-right-sidebar .quantity-selector {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    height: 48px;
    flex-shrink: 0;
}

/* 🔴 Ajuste de compatibilidad con WooCommerce */
.product-right-sidebar form.cart {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
	flex-wrap: wrap;
}
.product-right-sidebar .quantity {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}
.product-right-sidebar input.qty { 
    width: 60px;
    height: 100%;
    text-align: center;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 0;
}
.product-right-sidebar .single_add_to_cart_button {
    flex-grow: 1;
    height: 48px;
    line-height: 48px;
    /* Colores y estilos del botón verde (se definen en otro lugar, pero se aplican aquí) */
}


/* 🟢 4. BLOQUE DE GARANTÍA Y LEGALIDAD */
.product-right-sidebar .raffle-legal-guarantee {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.product-right-sidebar .legal-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--dark-text);
}
.product-right-sidebar .legal-item i {
    color: var(--accent-green-bright);
    font-size: 1.2rem;
}

/* 🟢 5. BARRA DE PROGRESO */
.product-right-sidebar .progress-bar-small {
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}
.product-right-sidebar .progress-bar-small .progress-info-small {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 0.25rem;
}
.product-right-sidebar .progress-bar-small .progress-bar-line div {
    background-color: var(--accent-green-bright);
}

/* --- LAYOUT PRINCIPAL Y STICKY SIDEBAR --- */

/* Contenedor principal del layout 2-columnas (ESCRITORIO) */
.product-single-page .product-main-grid {
    display: grid;
    grid-template-columns: 2fr 1.1fr; 
    gap: 3rem;
    align-items: flex-start;
}

/* Sidebar de Compra (Columna Derecha) - ESCRITORIO */
.product-right-sidebar {
    position: sticky;
    top: 100px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    z-index: 5;
}

/* ... (El resto de tus estilos de escritorio) ... */


/* ======================================= */
/* === AJUSTES RESPONSIVOS (MÓVIL) === */
/* ======================================= */

@media (max-width: 767px) {
    
    /* 🔴 CORRECCIÓN 1: LAYOUT DE UNA SOLA COLUMNA */
    
    /* Convierte el grid de escritorio a una pila vertical (Flexbox es más seguro que Grid aquí) */
    .product-single-page .product-main-grid {
        display: flex; 
        flex-direction: column; /* Apila las columnas */
        gap: 1.5rem;
    }

    /* 🔴 CORRECCIÓN 2: DESACTIVAR STICKY Y REORDENAR */
    
    /* El sidebar de compra (derecha) va arriba en móvil */
    .product-right-sidebar {
        order: 1; 
        position: static; /* Desactiva el 'sticky' */
        top: auto; 
        width: 100%; /* Asegura que ocupe todo el ancho */
        padding: 1rem; /* Ajusta el padding para móvil */
        margin: 0;
    }
    
    /* La columna izquierda (galería/descripción) va abajo */
    .product-left-column {
        order: 2; 
        width: 100%;
        margin: 0;
    }
    
    /* 🔴 CORRECCIÓN 3: GALERÍA DE IMÁGENES */
    
    /* La galería debe ocupar todo el ancho en móvil */
    .product-single-page .product-gallery,
    .product-single-page .gallery-fallback-wrapper {
        flex-direction: column; 
        width: 100%;
        gap: 0.5rem !important;
    }

    /* Puedes ocultar las miniaturas o hacerlas horizontales */
    .product-single-page .gallery-thumbs {
        /* Opción A: Ocultar para ahorrar espacio */
        display: none !important; 
        /* Opción B: Si quieres que sean horizontales: 
           flex-direction: row !important;
           width: 100% !important; */
    }

    /* 🟢 El resto de elementos como el contador y los detalles se adaptarán 
       automáticamente gracias a tus estilos base de flex/block. */
}