/* =============================================================================
   TOOLBAR
============================================================================= */

/*
|--------------------------------------------------------------------------
| CONTENEUR
|--------------------------------------------------------------------------
*/

.ic33-toolbar{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:24px;

    margin:0 0 34px;

    padding:18px 24px;

    background:#ffffff;

    border:1px solid #e8edf3;

    border-radius:18px;

    box-shadow:
        0 8px 24px rgba(15,23,42,.04);

}

/*
|--------------------------------------------------------------------------
| COLONNES
|--------------------------------------------------------------------------
*/

.ic33-toolbar__left,
.ic33-toolbar__right{

    display:flex;
    align-items:center;

    gap:18px;

}

.ic33-toolbar__right{

    margin-left:auto;

}

/*
|--------------------------------------------------------------------------
| NOMBRE DE PRODUITS
|--------------------------------------------------------------------------
*/

.ic33-toolbar__count{

    font-size:.95rem;

    font-weight:600;

    color:#24364b;

    white-space:nowrap;

}
/*
|--------------------------------------------------------------------------
| TRI WOOCOMMERCE
|--------------------------------------------------------------------------
*/

.ic33-toolbar .woocommerce-ordering{

    margin:0;

}

.ic33-toolbar .woocommerce-ordering select{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    min-width:240px;
    height:46px;

    padding:0 48px 0 18px;

    border:1px solid #dbe3ec;
    border-radius:12px;

    background:
        #ffffff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2310243d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
        no-repeat
        right 16px center;

    color:#10243d;

    font-size:.92rem;
    font-weight:600;

    cursor:pointer;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;

}

.ic33-toolbar .woocommerce-ordering select:hover{

    border-color:var(--ic33-color-accent);

}

.ic33-toolbar .woocommerce-ordering select:focus{

    outline:none;

    border-color:var(--ic33-color-accent);

    box-shadow:
        0 0 0 4px rgba(242,127,33,.12);

}

/*
|--------------------------------------------------------------------------
| LABEL
|--------------------------------------------------------------------------
*/

.ic33-toolbar .woocommerce-ordering label{

    display:none;

}
/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width:1200px){

    .ic33-toolbar{

        padding:16px 20px;

    }

}

@media (max-width:991px){

    .ic33-toolbar{

        flex-wrap:wrap;

        gap:16px;

    }

    .ic33-toolbar__left,
    .ic33-toolbar__right{

        width:100%;

    }

    .ic33-toolbar__right{

        justify-content:flex-end;

        margin-left:0;

    }

}

@media (max-width:767px){

    .ic33-toolbar{

        padding:18px;

    }

    .ic33-toolbar__left,
    .ic33-toolbar__right{

        justify-content:center;

    }

    .ic33-toolbar .woocommerce-ordering{

        width:100%;

    }

    .ic33-toolbar .woocommerce-ordering select{

        width:100%;

        min-width:100%;

    }

    .ic33-toolbar__count{

        text-align:center;

    }

}

@media (max-width:480px){

    .ic33-toolbar{

        padding:16px;

        border-radius:14px;

    }

    .ic33-toolbar .woocommerce-ordering select{

        height:44px;

        font-size:.88rem;

    }

}

/*
|--------------------------------------------------------------------------
| ANIMATIONS
|--------------------------------------------------------------------------
*/

.ic33-toolbar{

    transition:
        box-shadow .25s ease,
        border-color .25s ease;

}

.ic33-toolbar:hover{

    box-shadow:
        0 16px 42px rgba(15,23,42,.08);

}

.ic33-toolbar .woocommerce-ordering select{

    will-change:
        border-color,
        box-shadow,
        transform;

}

.ic33-toolbar .woocommerce-ordering select:active{

    transform:scale(.99);

}

/* --------------------------------------------------------------------------
   TRI NATIF WOOCOMMERCE HORS TOOLBAR
   La toolbar IC33 conserve son propre sélecteur de tri.
   Tous les sélecteurs natifs injectés ailleurs dans la page catégorie
   sont masqués afin d'éviter les doublons en haut et en bas des produits.
   -------------------------------------------------------------------------- */

.ic33-category-page .woocommerce-ordering {

    display: none !important;

}

.ic33-category-page .ic33-toolbar .woocommerce-ordering {

    display: block !important;

}