/* Villa Hadas · shop filter.

   Sits between the shop hero and the product grid. Collapsed state is
   the same one-line "Filter" affordance that used to be static; expanded
   state reveals category chips + sort dropdown + a live product count. */

.villa-shop-filter {
    /* PDF pp.11–12 — the "≡ Filter" line sits centred just below the
       page header, without an underline. The grid starts a comfortable
       stretch below it. */
    padding-block: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    font-family: var(--font-serif);
    color: var(--villa-navy);
}

.villa-shop-filter__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: var(--villa-navy);
    font-family: var(--font-serif);
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.villa-shop-filter__toggle svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

.villa-shop-filter__toggle:hover { opacity: 0.7; }

.villa-shop-filter.is-open .villa-shop-filter__toggle {
    opacity: 0.6;
}

.villa-shop-filter__panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 24px;
    padding-block-start: 6px;
    animation: villa-shop-filter-fade 220ms ease-out;
}

.villa-shop-filter__panel[hidden] { display: none; }

@keyframes villa-shop-filter-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.villa-shop-filter__group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.villa-shop-filter__chip {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(27, 51, 90, 0.28);
    color: var(--villa-navy);
    padding: 8px 18px;
    font-family: var(--font-serif);
    font-size: 14px;
    letter-spacing: 0.02em;
    cursor: pointer;
    border-radius: 999px;
    transition:
        background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.villa-shop-filter__chip:hover {
    border-color: var(--villa-navy);
}

.villa-shop-filter__chip.is-active {
    background: var(--villa-navy);
    color: var(--villa-cream);
    border-color: var(--villa-navy);
}

.villa-shop-filter__sort {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--villa-navy);
    letter-spacing: 0.02em;
}

.villa-shop-filter__sort > span {
    opacity: 0.7;
}

.villa-shop-filter__sort select {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(27, 51, 90, 0.28);
    border-radius: 999px;
    color: var(--villa-navy);
    font-family: var(--font-serif);
    font-size: 14px;
    padding: 7px 30px 7px 14px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(-45deg, transparent 50%, currentColor 50%);
    background-position:
        calc(100% - 15px) 55%,
        calc(100% - 10px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

[dir="rtl"] .villa-shop-filter__sort select {
    padding: 7px 14px 7px 30px;
    background-position:
        15px 55%,
        10px 55%;
}

.villa-shop-filter__sort select:focus-visible {
    outline: none;
    border-color: var(--villa-navy);
}

.villa-shop-filter__count {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--villa-navy);
    opacity: 0.55;
}

/* Enable the sort `order` to actually reflow the grid.
   The grid itself is defined in villa.css; we don't touch its columns
   here, only make sure order-based sorting is respected. */
.villa-shop-grid { display: grid; }