/* ============================================================
   ANNY — TOOLBAR
   ============================================================
   Barra superior del catálogo WooCommerce.

   RESPONSABILIDADES:
   - Contenedor principal
   - Categorías / navegación
   - Contador de resultados
   - Ordenamiento
   - Separadores
   - Estados visuales
   - Limpieza WooCommerce

   NO INCLUIR AQUÍ:
   - Menú       → anny-menu.css
   - Grid       → anny-grid.css
   - Responsive  → anny-responsive.css
   ============================================================ */


/* ============================================================
   01 — TOOLBAR PRINCIPAL
   ============================================================ */

.anny-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    margin: 0 0 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--anny-border);
    border-bottom: 1px solid var(--anny-border);
    background-color: var(--anny-white);
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
}


/* ============================================================
   02 — LADO IZQUIERDO
   ============================================================ */

.anny-toolbar__left {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 1rem;

    min-width: 0;

}


/* ============================================================
   03 — LADO DERECHO
   ============================================================ */

.anny-toolbar__right {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 1rem;

    min-width: 0;

    margin-left: auto;

}


/* ============================================================
   04 — CONTADOR
   ============================================================ */

.anny-toolbar__count {

    display: inline-flex;

    align-items: center;

    min-height: 32px;

    margin: 0;

    color: var(--anny-text);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .66rem;

    font-weight: var(--anny-weight-ui);

    letter-spacing: .06em;

    line-height: 1.2;

    text-transform: uppercase;

    white-space: nowrap;

    opacity: .75;

}


/* ============================================================
   05 — NÚMERO CONTADOR
   ============================================================ */

.anny-toolbar__count strong {

    margin-left: .3rem;

    color: var(--anny-secondary);

    font-weight: 600;

}


/* ============================================================
   06 — SEPARADOR
   ============================================================ */

.anny-toolbar__separator {

    display: block;

    width: 1px;

    height: 20px;

    background-color: var(--anny-border);

}


/* ============================================================
   07 — FILTROS
   ============================================================ */

.anny-toolbar__filters {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: .5rem;

    margin: 0;

    padding: 0;

    list-style: none;

}


/* ============================================================
   08 — ITEM FILTRO
   ============================================================ */

.anny-toolbar__filters li {

    display: block;

    margin: 0;

    padding: 0;

    list-style: none;

}


/* ============================================================
   09 — ENLACE FILTRO
   ============================================================ */

.anny-toolbar__filters a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 32px;

    padding: .45rem .75rem;

    border: 1px solid transparent;

    border-radius: var(--anny-radius-sm);

    background-color: transparent;

    color: var(--anny-text);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .64rem;

    font-weight: var(--anny-weight-ui);

    letter-spacing: .05em;

    line-height: 1.2;

    text-transform: uppercase;

    white-space: nowrap;

    text-decoration: none;

    transition:
        color var(--anny-transition-fast),
        background-color var(--anny-transition-fast),
        border-color var(--anny-transition-fast);

}


/* ============================================================
   10 — HOVER FILTRO
   ============================================================ */

.anny-toolbar__filters a:hover {

    border-color: var(--anny-border);

    background-color: var(--anny-cream);

    color: var(--anny-secondary);

}


/* ============================================================
   11 — FILTRO ACTIVO
   ============================================================ */

.anny-toolbar__filters .current-cat > a,
.anny-toolbar__filters .current-menu-item > a,
.anny-toolbar__filters .is-active > a {

    border-color: var(--anny-secondary);

    background-color: var(--anny-secondary);

    color: var(--anny-white);

}


/* ============================================================
   12 — FILTRO ACTIVO HOVER
   ============================================================ */

.anny-toolbar__filters .current-cat > a:hover,
.anny-toolbar__filters .current-menu-item > a:hover,
.anny-toolbar__filters .is-active > a:hover {

    border-color: var(--anny-primary);

    background-color: var(--anny-primary);

    color: var(--anny-white);

}


/* ============================================================
   13 — CATEGORÍAS
   ============================================================ */

.anny-toolbar__categories {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: .35rem .75rem;

    margin: 0;

    padding: 0;

    list-style: none;

}


/* ============================================================
   14 — ENLACES CATEGORÍA
   ============================================================ */

.anny-toolbar__categories a {

    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding: .35rem 0;

    color: var(--anny-text);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .64rem;

    font-weight: var(--anny-weight-ui);

    letter-spacing: .06em;

    line-height: 1.2;

    text-transform: uppercase;

    white-space: nowrap;

    text-decoration: none;

}


/* ============================================================
   15 — INDICADOR CATEGORÍA
   ============================================================ */

.anny-toolbar__categories a::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background-color: var(--anny-primary);

    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform var(--anny-transition-fast);

}


/* ============================================================
   16 — HOVER CATEGORÍA
   ============================================================ */

.anny-toolbar__categories a:hover {

    color: var(--anny-primary);

}


.anny-toolbar__categories a:hover::after {

    transform: scaleX(1);

}


/* ============================================================
   17 — CATEGORÍA ACTIVA
   ============================================================ */

.anny-toolbar__categories .current-cat > a,
.anny-toolbar__categories .current-menu-item > a,
.anny-toolbar__categories .is-active > a {

    color: var(--anny-secondary);

}


.anny-toolbar__categories .current-cat > a::after,
.anny-toolbar__categories .current-menu-item > a::after,
.anny-toolbar__categories .is-active > a::after {

    transform: scaleX(1);

}


/* ============================================================
   18 — RESULTADOS WOOCOMMERCE
   ============================================================ */
body.woocommerce .anny-toolbar .woocommerce-result-count {

    float: none;

    margin: 0;

    padding: 0;

    color: var(--anny-text);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .65rem;

    font-weight: var(--anny-weight-ui);

    letter-spacing: .04em;

    line-height: 1.4;

    opacity: .7;

}


/* ============================================================
   19 — ORDENAMIENTO WOOCOMMERCE
   ============================================================ */

body.woocommerce .anny-toolbar .woocommerce-ordering {

    position: relative;

    display: flex;

    align-items: center;

    float: none;

    width: auto;

    margin: 0;

    padding: 0;

}


/* ============================================================
   20 — SELECT NATIVO
   ============================================================ */

.anny-sort__native {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;

}


/* ============================================================
   21 — SELECT PERSONALIZADO
   ============================================================ */

.anny-sort__custom {

    position: relative;

    display: block;

    width: 220px;

    min-width: 220px;

    box-sizing: border-box;

}


/* ============================================================
   22 — TRIGGER
   ============================================================ */

.anny-sort__trigger {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 40px;

    margin: 0;

    padding: .6rem .75rem;

    border: 1px solid var(--anny-border);

    border-radius: var(--anny-radius-sm);

    background-color: var(--anny-white);

    color: var(--anny-secondary);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .66rem;

    font-weight: var(--anny-weight-ui);

    letter-spacing: .04em;

    line-height: 1.2;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        color var(--anny-transition-fast),
        background-color var(--anny-transition-fast),
        border-color var(--anny-transition-fast);

}


/* ============================================================
   23 — TEXTO TRIGGER
   ============================================================ */

.anny-sort__trigger-text {

    display: block;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* ============================================================
   24 — FLECHA
   ============================================================ */

.anny-sort__arrow {

    flex: 0 0 auto;

    width: 7px;
    height: 7px;

    margin-left: .75rem;

    border-right: 1px solid currentColor;

    border-bottom: 1px solid currentColor;

    transform:
        rotate(45deg)
        translateY(-2px);

    transition:
        transform var(--anny-transition-fast);

}


/* ============================================================
   25 — HOVER TRIGGER
   ============================================================ */

.anny-sort__trigger:hover {

    border-color: var(--anny-secondary);

    background-color: var(--anny-cream-light);

    color: var(--anny-secondary);

}


/* ============================================================
   26 — TRIGGER ABIERTO
   ============================================================ */

.anny-sort__custom.is-open .anny-sort__trigger {

    border-color: var(--anny-secondary);

    background-color: var(--anny-white);

    color: var(--anny-secondary);

}


/* ============================================================
   27 — FLECHA ABIERTA
   ============================================================ */

.anny-sort__custom.is-open .anny-sort__arrow {

    transform:
        rotate(225deg)
        translateY(-2px);

}


/* ============================================================
   28 — DROPDOWN
   ============================================================ */

.anny-sort__dropdown {

    position: absolute;

    top: calc(100% + .4rem);

    right: 0;

    z-index: 999;

    display: none;

    width: 100%;

    margin: 0;

    padding: .35rem;

    border: 1px solid var(--anny-border);

    border-radius: var(--anny-radius-sm);

    background-color: var(--anny-white);

    box-shadow:
        0 12px 35px rgba(46, 38, 32, .10);

    box-sizing: border-box;

}


/* ============================================================
   29 — DROPDOWN ABIERTO
   ============================================================ */

.anny-sort__custom.is-open .anny-sort__dropdown {

    display: block;

}


/* ============================================================
   30 — OPCIONES
   ============================================================ */

.anny-sort__option {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 38px;

    margin: 0;

    padding: .6rem .7rem;

    border: 0;

    border-radius:
        calc(var(--anny-radius-sm) / 2);

    background-color: transparent;

    color: var(--anny-text);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .66rem;

    font-weight: var(--anny-weight-ui);

    letter-spacing: .03em;

    line-height: 1.3;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background-color var(--anny-transition-fast),
        color var(--anny-transition-fast);

}


/* ============================================================
   31 — HOVER OPCIÓN
   ============================================================ */

.anny-sort__option:hover {

    background-color: var(--anny-cream-light);

    color: var(--anny-secondary);

}


/* ============================================================
   32 — OPCIÓN ACTIVA
   ============================================================ */

.anny-sort__option.is-selected {

    background-color: var(--anny-secondary);

    color: var(--anny-white);

    font-weight: 600;

}


/* ============================================================
   33 — HOVER OPCIÓN ACTIVA
   ============================================================ */

.anny-sort__option.is-selected:hover {

    background-color: var(--anny-primary);

    color: var(--anny-white);

}


/* ============================================================
   34 — LIMPIEZA WOOCOMMERCE
   ============================================================ */

.anny-toolbar::before,
.anny-toolbar::after {

    display: none;

    content: none;

}


body.woocommerce .anny-toolbar .woocommerce-ordering::before,
body.woocommerce .anny-toolbar .woocommerce-ordering::after{

    display: none;

    content: none;

}


/* ============================================================
   35 — BOTÓN FILTROS
   ============================================================ */

.anny-toolbar__filter-toggle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .45rem;

    min-height: 34px;

    margin: 0;

    padding: .45rem .75rem;

    border: 1px solid var(--anny-border);

    border-radius: var(--anny-radius-sm);

    background-color: var(--anny-white);

    color: var(--anny-secondary);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .64rem;

    font-weight: var(--anny-weight-ui);

    letter-spacing: .06em;

    line-height: 1;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color var(--anny-transition-fast),
        background-color var(--anny-transition-fast),
        border-color var(--anny-transition-fast);

}


/* ============================================================
   36 — ICONO FILTROS
   ============================================================ */

.anny-toolbar__filter-toggle::after {

    content: "";

    display: block;

    width: 6px;
    height: 6px;

    border-right: 1px solid currentColor;

    border-bottom: 1px solid currentColor;

    transform:
        rotate(45deg)
        translateY(-2px);

}


/* ============================================================
   37 — HOVER BOTÓN FILTROS
   ============================================================ */

.anny-toolbar__filter-toggle:hover {

    border-color: var(--anny-secondary);

    background-color: var(--anny-secondary);

    color: var(--anny-white);

}


/* ============================================================
   38 — FILTROS ACTIVOS
   ============================================================ */

.anny-toolbar__filter-toggle.is-active,
.anny-toolbar__filter-toggle[aria-expanded="true"] {

    border-color: var(--anny-primary);

    background-color: var(--anny-primary);

    color: var(--anny-white);

}


/* ============================================================
   39 — CONTADOR FILTROS
   ============================================================ */

.anny-toolbar__filter-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 18px;
    height: 18px;

    padding: 0 .25rem;

    border-radius: 999px;

    background-color: var(--anny-accent);

    color: var(--anny-white);

    font-family:
        var(--anny-font-ui),
        sans-serif;

    font-size: .55rem;

    font-weight: 600;

    line-height: 1;

}


/* ============================================================
   40 — ESTADO VACÍO
   ============================================================ */

.anny-toolbar:empty {

    display: none;

}


/* ============================================================
   41 — FOCUS
   ============================================================ */

.anny-toolbar a:focus-visible,
.anny-toolbar button:focus-visible {

    outline: 2px solid var(--anny-accent);

    outline-offset: 3px;

}


.anny-toolbar a:focus:not(:focus-visible),
.anny-toolbar button:focus:not(:focus-visible) {

    outline: none;

}


/* ============================================================
   42 — REDUCIR MOVIMIENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .anny-toolbar a,
    .anny-toolbar button,
    .anny-toolbar__categories a::after {

        transition: none;

    }

}