/* Product Grid Controls - Responsive */
.product-grid-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #2a2a2a;
    padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
    border-radius: clamp(0.375rem, 1vw, 0.5rem);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    gap: clamp(0.75rem, 2vw, 1.5rem);
    flex-wrap: wrap;
}

/* Primera linea: Ordenamiento e Items por p芍gina */
.controls-top-row {
    display: contents;
}

.controls-left-compact {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.5rem);
    flex-wrap: wrap;
}

/* Separador - oculto en desktop */
.controls-separator {
    display: none;
    width: 100%;
    height: 1px;
    background-color: #3a3a3a;
    margin: 0;
}

/* Segunda linea: Contador y Paginacion */
.controls-bottom-row {
    display: contents;
}

.controls-right-aligned {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1rem);
    flex-wrap: nowrap;
    margin-left: auto;
}

/* Selector de ordenamiento - compacto */
.orderby-select {
    background-color: #2a2a2a;
    color: #999999;
    border: 1px solid #555555;
    padding: clamp(0.375rem, 1.5vw, 0.5rem) clamp(0.75rem, 2vw, 1rem);
    border-radius: clamp(0.25rem, 1vw, 0.375rem);
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
    outline: none;
    cursor: pointer;
    min-width: clamp(120px, 20vw, 180px);
    width: fit-content;
    text-align: left;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.orderby-select:hover {
    border-color: #ffffff;
    color: #ffffff;
}

.orderby-select:focus {
    border-color: #ffffff;
    color: #ffffff;
    outline: none;
}

.orderby-select option {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 0.5rem;
}

.orderby-select option:first-child {
    color: #ff6600;
}

/* Selector de items por p芍gina */
.items-per-page-wrapper {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.6vw, 0.6rem);
    flex-wrap: nowrap;
}

.items-label {
    color: #999999;
    font-size: clamp(0.6125rem, 1.5vw, 0.82rem);
    white-space: nowrap;
}

.items-select {
    background-color: transparent;
    color: #ffffff;
    border: none;
    padding: clamp(0.2625rem, 1vw, 0.35rem) clamp(0.35rem, 1vw, 0.525rem);
    border-radius: 0;
    font-size: clamp(0.6125rem, 1.5vw, 0.82rem);
    outline: none;
    cursor: pointer;
    min-width: clamp(35px, 8vw, 50px);
    text-align: center;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.items-select:hover,
.items-select:focus {
    color: #ffffff;
    outline: none;
}

/* Contador de productos */
.product-counter {
    color: #999999;
    font-size: clamp(0.6125rem, 1.5vw, 0.82rem);
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Paginaci車n simple */
.pagination-simple {
    display: inline-flex !important;
    align-items: center;
    gap: clamp(0.2rem, 0.6vw, 0.3rem);
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

.pagination-simple .page-nav {
    color: #ffffff;
    background-color: #3a3a3a;
    border: none;
    padding: clamp(0.5rem, 1.2vw, 0.625rem);
    border-radius: clamp(0.125rem, 0.5vw, 0.25rem);
    text-decoration: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: clamp(2rem, 5vw, 2.5rem);
    height: clamp(2rem, 5vw, 2.5rem);
    min-width: clamp(2rem, 5vw, 2.5rem) !important;
    min-height: clamp(2rem, 5vw, 2.5rem) !important;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 0 !important;
    float: none !important;
}

.pagination-simple .page-nav svg {
    display: block;
    width: clamp(8px, 2vw, 12px);
    height: clamp(8px, 2vw, 12px);
}

.pagination-simple .page-nav:hover:not(.disabled) {
    background-color: #4a4a4a;
}

.pagination-simple .page-nav.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .controls-left-compact {
        flex-wrap: wrap;
    }
}

/* Tablet y m車vil - Cambiar a 3 filas */
@media (max-width: 768px) {
    .product-grid-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    
    /* Fila 1: Selectores en l赤nea */
    .controls-top-row {
        display: block;
        width: 100%;
        padding-bottom: clamp(0.75rem, 2vw, 1rem);
    }
    
    .controls-left-compact {
        flex-wrap: nowrap;
        gap: clamp(0.5rem, 2vw, 0.75rem);
        justify-content: space-between;
    }
    
    .orderby-select {
        flex: 1;
        min-width: 0;
        max-width: 40%;
    }
    
    .items-per-page-wrapper {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Fila 2: Separador */
    .controls-separator {
        display: block;
    }
    
    /* Fila 3: Contador y paginaci車n en l赤nea */
    .controls-bottom-row {
        display: block;
        width: 100%;
        padding-top: clamp(0.75rem, 2vw, 1rem);
    }
    
    .controls-right-aligned {
        display: flex; /* Aseg迆rate de que sea flex */
        width: 100%; /* Fuerza el ancho total */
        justify-content: space-between; /* Distribuye el espacio */
        align-items: center; /* Alinea verticalmente los hijos */
        
        /* Propiedades que ya ten赤as */
        margin-left: 0;
        flex-wrap: nowrap;
        gap: clamp(0.5rem, 2vw, 0.75rem);
    }
    
    .controls-right-aligned > p {
        display: none;
    }
    
    .controls-left-compact > p {
        display: none;
    }

    .product-counter {
        text-align: left;
        flex-shrink: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .pagination-simple {
        flex-shrink: 0;
    }
}