/* --- Estructura Principal y Pestañas --- */
.wsr-container {margin: 2em 0;}
.wsr-tabs-container {overflow: hidden; margin-bottom: 1.5em; position: relative;}
.wsr-tabs-scroll-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    scrollbar-width: none; /* Ocultar scrollbar en Firefox */
    -ms-overflow-style: none;  /* Ocultar scrollbar en IE/Edge */
    padding-bottom: 0px; 
    margin-bottom: -15px; /* Compensa el padding-bottom */
    scroll-snap-type: x mandatory; /* Snap al deslizar */
}
.wsr-tabs-scroll-wrapper::-webkit-scrollbar {display: none;} /* Ocultar scrollbar en Chrome/Safari */

.wsr-tab-button {
    flex: 0 0 auto; /* No crecer, no encoger, base automática */
    padding: 5px 12px !important;
    margin-right: 10px;
    font-size: 1em;
    font-weight: 600;
    color: #000 !important;
    background-color: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    border-radius: 50px; /* Botones tipo píldora */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    outline: none;
    white-space: nowrap;
    scroll-snap-align: start;
}
.wsr-tab-button:hover {background-color: #e0e0e0; color: #111;}
.wsr-tab-button.active {
    color: #fff !important;
    background-color: #000 !important; 
    border-color: #000 !important;
}

/* --- Área de Contenido y Corrección de Salto --- */
.wsr-content-area {
    position: relative;
    /* **CLAVE PARA EVITAR EL SALTO:** Se establece una altura mínima. 
    Ajusta este valor si tus filas de productos son más altas o bajas. 
    (ej. 2 productos en móvil, cada uno de ~25em de alto = 50em) */
    min-height: 25em; 
}
.wsr-content-area.wsr-loading .wsr-products {
    opacity: 0.3;
}
.wsr-content-area .wsr-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    animation: wsr-spin 1s linear infinite;
    display: none; /* Se muestra con JS */
}
.wsr-content-area.wsr-loading .wsr-spinner {display: block;}

@keyframes wsr-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Parrilla de Productos (Tu CSS original con pequeños ajustes) --- */
.wsr-title {font-size: 1.5em; margin-bottom: 1em; font-weight: bold; text-align: left;}
.wsr-products {display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; transition: opacity 0.3s ease-in-out;}
.wsr-product {position: relative; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); background-color: #fff;}
.wsr-product:hover {transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1);}
.wsr-product-link {display: block; text-decoration: none; color: inherit;}
.wsr-product-image {
    display: block; /* Asegura que se comporte como un bloque */
    background-color: #f5f5f5; /* Fondo para imágenes con transparencia */
    line-height: 0; /* Elimina espacio extra debajo de la imagen */
}

.wsr-product-image img {
    width: 100%; /* La imagen siempre ocupa el 100% del ancho */
    height: auto; /* La altura se ajusta AUTOMÁTICAMENTE para mantener la proporción */
    transition: transform 0.3s ease;
}
.wsr-product:hover .wsr-product-image img {transform: scale(1.05);}
.wsr-discount {position: absolute; top: 10px; left: 10px; background-color: #f44336; color: white; padding: 3px 8px; border-radius: 4px; font-size: 0.75em; font-weight: bold; z-index: 2; line-height: 1;}
.wsr-product-title {font-size: 0.9em; margin: 0.75em 10px 0.5em; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; text-align: left; min-height: 1.3em;}
.wsr-product-price {padding: 0 10px 12px; font-weight: bold; text-align: left; font-size: 1.1em; color: #000;}
.wsr-product-price ins {text-decoration: none; color: #d32f2f; font-weight: bold;}
.wsr-product-price del {font-size: 0.85em; color: #999; margin-right: 5px; font-weight: normal;}
.wsr-no-products-found {text-align:center; color:#777; padding: 3em 1em; font-style: italic;}

@media (min-width: 768px) {
    .wsr-products {grid-template-columns: repeat(4, 1fr);} 
    .wsr-product-title {font-size: 1em;}
    .wsr-content-area {min-height: 28em;}
}