/* Sistema de Filtros - Estilos CSS */

/* Panel principal de filtros */
.search-filters-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: none;
    margin: 8px 0 10px;
    /*
     * El tope se mide contra el hueco REAL del panel, no contra la ventana: en
     * modo "debajo del input" el overlay ya está acotado por
     * --dropdownsearch-available-height (la pone el JS al anclarlo), y un 46vh
     * fijo se comía casi todo ese hueco dejando los resultados en una rendija.
     * Los filtros nunca deben pesar más que los resultados: de ahí el 38%.
     */
    max-height: min(38vh, calc(var(--dropdownsearch-available-height, 100vh) * .38));
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1000;
}

.search-filters-panel.is-collapsed {
    max-height: none;
    overflow: visible;
}

.search-filters-panel.is-collapsed .filters-content {
    display: none;
}

.search-filters-panel.is-collapsed .filters-panel-toggle-icon {
    transform: rotate(0deg);
}

/* Header de filtros. Es lo ÚNICO visible mientras el panel está plegado, así que
   pesa en cada búsqueda: se mantiene en una sola línea baja. */
.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-bottom: 1px solid #eee;
    background: var(--dropdownsearch-secondary, #f8f9fa);
    border-radius: 6px 6px 0 0;
}

/* Plegado no separa nada: la línea sobra. */
.search-filters-panel.is-collapsed .filters-header { border-bottom: 0; }

.filters-panel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.filters-panel-toggle-icon {
    color: #666;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.clear-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid #d7dce2;
    border-radius: 4px;
    background-color: #fff;
    color: #495057;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.clear-filters-btn:hover {
    background-color: #f1f3f5;
    border-color: #adb5bd;
    color: #212529;
}

/* Filtros activos. Se ven también con el panel plegado, así que van en la misma
   línea que su rótulo en vez de apilarse. */
.active-filters {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 7px 14px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
}

.active-filters-title {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 0;
}

.active-filters-list { flex: 1 1 auto; }

.active-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background-color: #e9f2ff;
    color: #174a7c;
    border: 1px solid #cfe3ff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}

.active-filter-tag .remove-filter {
    background: none;
    border: none;
    color: #174a7c;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 3px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.active-filter-tag .remove-filter:hover {
    opacity: 1;
}

/* Contenido de filtros */
.filters-content {
    padding: 0;
}

/* Grupos de filtros */
.filter-group {
    border-bottom: 1px solid #eee;
}

.filter-group:last-child {
    border-bottom: none;
}

.filter-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
}

.filter-group-header:hover {
    background-color: var(--dropdownsearch-secondary, #f8f9fa);
}

.filter-group-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.filter-toggle {
    transition: transform 0.3s ease;
    color: #666;
}

/* Opciones de filtros */
.filter-options {
    padding: 0 14px 10px 14px;
    /* Un grupo con muchos valores no puede empujar a los resultados fuera de
       la vista: scrollea dentro de sí mismo. */
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 200px;
        padding-top: 0;
        padding-bottom: 10px;
    }
}

.filter-option {
    display: block;
    margin-bottom: 4px;
}

/* Checkboxes personalizados */
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: color 0.2s;
    padding: 6px 8px;
    border-radius: 4px;
    margin: 0;
}

.filter-checkbox:hover {
    background-color: var(--dropdownsearch-secondary, #f8f9fa);
    color: var(--dropdownsearch-link, #007bff);
}

.filter-checkbox input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-radius: 3px;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}

.filter-checkbox input[type="checkbox"]:checked + .checkmark {
    background-color: var(--dropdownsearch-primary, #007bff);
    border-color: var(--dropdownsearch-primary, #007bff);
}

.filter-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-grow: 1;
}

.product-count {
    color: #666;
    font-size: 11px;
    margin-left: auto;
}

/* Filtro de precio */
.price-range-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-min,
.price-max {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.2s;
}

.price-min:focus,
.price-max:focus {
    outline: none;
    border-color: var(--dropdownsearch-primary, #007bff);
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.price-separator {
    font-weight: 600;
    color: #666;
}

/* Grupos de atributos y características */
.attribute-group,
.feature-group {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.attribute-group:last-child,
.feature-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.attribute-group-name,
.feature-group-name {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-left: 8px;
}

/* Colores en atributos */
.color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    margin-right: 4px;
}

/* Header de resultados mejorado */
.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #dee2e6;
}

.search-results-count {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

.search-results-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-select {
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.sort-select:focus {
    outline: none;
    border-color: var(--dropdownsearch-primary, #007bff);
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

/* Productos en resultados mejorados */
.search-result-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: #f8f9fa;
}

.search-result-item:last-child {
    border-bottom: none;
}

#search-results .product-image {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}

#search-results .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
}

#search-results .out-of-stock-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #dc3545;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
}

#search-results .product-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#search-results .product-name {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

#search-results .product-name a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}

#search-results .product-name a:hover {
    color: var(--dropdownsearch-link, #007bff);
}

#search-results .product-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #666;
}

#search-results .product-manufacturer {
    font-weight: 500;
    color: #495057;
}

#search-results .product-reference {
    color: #868e96;
}

#search-results .product-description {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin: 0;
}

/* Atributos del producto */
#search-results .product-attributes {
    margin: 10px 0;
}

#search-results .product-attributes .attribute-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 0;
    border-bottom: none;
}

#search-results .attribute-group-label {
    font-size: 12px;
    font-weight: 500;
    color: #495057;
    min-width: 60px;
}

#search-results .attribute-values {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

#search-results .color-attribute {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    cursor: pointer;
    transition: transform 0.2s;
}

#search-results .color-attribute:hover {
    transform: scale(1.1);
}

#search-results .text-attribute {
    padding: 2px 8px;
    background-color: #e9ecef;
    color: #495057;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

/* Características del producto */
#search-results .product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

#search-results .feature-item {
    padding: 3px 8px;
    background-color: #f1f3f4;
    color: #5f6368;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

#search-results .more-features {
    padding: 3px 8px;
    background-color: var(--dropdownsearch-primary, #007bff);
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}

/* Footer del producto */
#search-results .product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
}

#search-results .product-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--dropdownsearch-price, #007bff);
}

#search-results product-stock {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

#search-results .product-stock.in-stock {
    background-color: #d4edda;
    color: #155724;
}

#search-results .product-stock.out-of-stock {
    background-color: #f8d7da;
    color: #721c24;
}

/* Estados de carga y error */
.search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: #666;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--dropdownsearch-primary, #007bff);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.no-results .error-content,
.no-results .no-results-content {
    text-align: center;
    padding: 40px;
    color: #666;
}

.no-results h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.no-results p {
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 1.5;
}

.no-results button {
    padding: 10px 20px;
    background-color: var(--dropdownsearch-primary, #007bff);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.no-results button:hover {
    background-color: #0056b3;
}

/* Responsive Design */
@media (max-width: 768px) {
    .search-filters-panel {
        margin: 8px 0 10px;
        max-height: 50vh;
    }
    
    .filters-header {
        padding: 10px 12px;
    }
    
    .filter-options {
        padding: 0 12px 12px 12px;
    }
    
    .search-result-item {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }
    
    .product-image {
        width: 100%;
        height: 200px;
    }
    
    .product-footer {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .search-results-header {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .price-range-inputs {
        flex-direction: column;
        gap: 8px;
    }
    
    .active-filters-list {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .search-filters-panel {
        margin: 5px;
        border-radius: 6px;
    }
    
    .filters-header {
        padding: 10px 12px;
    }
    
    .filters-panel-toggle {
        font-size: 14px;
    }
    
    .clear-filters-btn {
        font-size: 11px;
        padding: 5px 10px;
    }
    
    .filter-options {
        padding: 0 12px 10px 12px;
    }
    
    .search-result-item {
        padding: 12px;
    }
    
    .product-image {
        height: 150px;
    }
    
    .product-name {
        font-size: 14px;
    }
    
    .product-price {
        font-size: 16px;
    }
}

/* Mejoras de accesibilidad */
.filter-checkbox:focus-within .checkmark {
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.clear-filters-btn:focus,
.sort-select:focus {
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

/* Animaciones suaves - Renombradas para evitar conflictos */
.search-result-item.filter-fadeIn {
    animation: filterFadeInUp 0.3s ease;
}

@keyframes filterFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar personalizada para el panel de filtros */
.search-filters-panel::-webkit-scrollbar {
    width: 6px;
}

.search-filters-panel::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.search-filters-panel::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.search-filters-panel::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}



/* ============================================================
   MODO BARRA

   El problema que resuelve: en el modo apilado los grupos se abren
   a todo lo ancho y empujan los resultados fuera de la pantalla.
   En un buscador instantáneo eso es lo contrario de lo que hace
   falta — filtras y dejas de ver lo que estás filtrando.

   Aquí cada grupo es un botón compacto en una fila, y sus opciones
   se abren en un panel FLOTANTE sobre los resultados. La lista no
   se mueve ni un píxel, así que se ve el efecto de cada filtro
   mientras se aplica.
   ============================================================ */

/*
 * EL PANEL NO PUEDE RECORTAR EN MODO BARRA.
 *
 * En modo apilado el panel se acota a sí mismo (max-height + overflow) para no
 * comerse los resultados. Pero aquí los desplegables son elementos ABSOLUTOS
 * que tienen que salirse del panel: con overflow puesto quedan recortados, y el
 * navegador ofrece desplazar el contenedor para verlos. De ahí el scroll raro
 * dentro del scroll. El único que debe desplazarse es el propio desplegable.
 */
.search-filters-panel--bar {
    max-height: none;
    overflow: visible;
}

.search-filters-panel--bar .filters-content {
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
}

.search-filters-panel--bar .filter-group {
    position: relative;     /* ancla del desplegable */
    border: 0;
    margin: 0;
    padding: 0;
}

/* La cabecera del grupo pasa a ser el botón de la barra. */
.search-filters-panel--bar .filter-group-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #d8dde5;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}

.search-filters-panel--bar .filter-group-header:hover {
    border-color: #b9c1cc;
    background: #f7f9fb;
}

.search-filters-panel--bar .filter-group-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

/* Un grupo con filtros puestos tiene que distinguirse de un vistazo:
   es la única pista de por qué la lista se ha reducido. */
/* El estado activo hereda el color que el comerciante configura en Apariencia,
   no un color nuestro: el buscador tiene que parecer parte de SU tienda. El
   relleno se deriva del mismo tono, así que nunca desentona. */
.search-filters-panel--bar .filter-group.has-active .filter-group-header {
    border-color: var(--dropdownsearch-primary, #007cba);
    background: color-mix(in srgb, var(--dropdownsearch-primary, #007cba) 10%, #fff);
    color: var(--dropdownsearch-primary, #007cba);
}

/* Sin color-mix (navegadores viejos) se cae a un gris claro neutro, que
   distingue igual sin arriesgar un color ilegible. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .search-filters-panel--bar .filter-group.has-active .filter-group-header {
        background: #f3f6f9;
    }
}

.search-filters-panel--bar .filter-group.is-open .filter-group-header {
    border-color: #9aa3b0;
    background: #f2f4f7;
}

/* Abierto Y con filtros puestos a la vez: manda el color, porque «este grupo
   está filtrando» es más importante que «este grupo está abierto» — lo segundo
   ya se ve por el desplegable. Se declara aparte y no se deja al orden del
   fichero, que es frágil. */
.search-filters-panel--bar .filter-group.is-open.has-active .filter-group-header {
    border-color: var(--dropdownsearch-primary, #007cba);
    background: color-mix(in srgb, var(--dropdownsearch-primary, #007cba) 14%, #fff);
    color: var(--dropdownsearch-primary, #007cba);
}

.search-filters-panel--bar .filter-toggle {
    transition: transform .15s ease;
    flex: 0 0 auto;
    opacity: .55;
}

.search-filters-panel--bar .filter-group.is-open .filter-toggle {
    transform: rotate(180deg);
}

/* ---------- El desplegable ---------- */
.search-filters-panel--bar .filter-options {
    display: none;
    animation: none;   /* slideDown anima max-height y pisa el tope de abajo */
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-width: 340px;
    /* Tope de alto para que un grupo con cien valores no llegue al pie de la
       pantalla; a partir de ahí se desplaza dentro del panel, que aquí sí es
       correcto porque el panel es su propia superficie. */
    max-height: 320px;
    overflow-y: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid #d8dde5;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(20, 26, 38, .14);
}

.search-filters-panel--bar .filter-group.is-open .filter-options {
    display: block;
}

/* Si el grupo está muy a la derecha, el panel se alinea por ese lado para no
   salirse de la pantalla. */
.search-filters-panel--bar .filter-group:nth-last-child(-n+2) .filter-options {
    left: auto;
    right: 0;
}

/* Cada valor en su línea, con el contador PEGADO a su etiqueta. Antes el
   número acababa en el extremo opuesto de la pantalla y no había forma de
   emparejarlos de un vistazo. */
.search-filters-panel--bar .filter-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.35;
    cursor: pointer;
}

.search-filters-panel--bar .filter-options label:hover {
    background: #f5f7fa;
}

.search-filters-panel--bar .filter-options .filter-count {
    margin-left: auto;
    color: #7c8695;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Pantallas estrechas: panel deslizante ----------
   Una barra de botones con desplegables no cabe en un móvil: el panel
   flotante taparía la pantalla entera igualmente. Se convierte en una
   hoja que sube desde abajo, que es lo que espera cualquiera que haya
   comprado por el móvil. */
@media (max-width: 768px) {
    /* Las píldoras ENVUELVEN, no se desplazan.
     *
     * Con scroll horizontal y la barra oculta (así estaba), los filtros que no
     * caben en la primera pantalla son invisibles: nada indica que haya más a la
     * derecha y nadie arrastra una fila de botones por si acaso. Envolviendo se
     * ven todos de golpe, que es de lo que va un panel de filtros. Cuesta dos o
     * tres líneas de alto, y esas sí se ven. */
    .search-filters-panel--bar .filters-content {
        gap: 6px;
        padding: 8px 12px;
        overflow-x: visible;
        flex-wrap: wrap;
    }

    .search-filters-panel--bar .filter-group.is-open .filter-options {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -12px 32px rgba(20, 26, 38, .22);
        animation: dsSubirPanel .18s ease-out;
    }

    @keyframes dsSubirPanel {
        from { transform: translateY(100%); }
        to   { transform: none; }
    }

    .search-filters-panel--bar .filter-options label {
        padding: 11px 6px;   /* objetivo táctil decente */
        font-size: 14px;
    }
}


/* El grupo de precio dentro de un desplegable estrecho.

   Los dos campos traían ancho propio y no encogían: con marcadores largos
   («Precio mín. 1.31€») su ancho intrínseco sumaba más que el panel, y aparecía
   un desplazamiento horizontal. La pieza que lo arregla es min-width: 0 — sin
   ella un elemento flex nunca baja de lo que mide su contenido. */
.search-filters-panel--bar .price-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
}

.search-filters-panel--bar .price-range-inputs input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    padding: 8px 10px;
    font-size: 13px;
}

.search-filters-panel--bar .price-range-inputs .price-separator {
    flex: 0 0 auto;
    color: #7c8695;
}

/* Nada dentro del desplegable debe provocar desplazamiento lateral. */
.search-filters-panel--bar .filter-options {
    overflow-x: hidden;
}