/**
 * /produkter/ — product archive.
 *
 * Extracted from an inline <style> block in product-archive.php. Card and grid rules are
 * not repeated here; they come from product-card.css. The reset, body font and container
 * padding come from the theme, since the page now renders inside its header and footer.
 */

/* ── Hero ── */

.category-hero {
    background: var(--wp--preset--color--lys-blaa, #eaf8fb);
    padding: 40px 0 48px;
}

.category-hero__title {
    font-family: var(--wp--preset--font-family--display, "Amatic SC", cursive);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--display-l, 5rem);
    line-height: 1.1;
    text-align: center;
    margin: 0 0 12px;
    color: var(--wp--preset--color--tekst, #1a1a1a);
}

.category-hero__desc {
    font-size: var(--wp--preset--font-size--brodtekst-l, 1.1rem);
    line-height: 1.6;
    color: var(--wp--preset--color--tekst-svak, #5a6660);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

/* ── Filter bar ── */

.filter-bar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 20px 0;
}

/*
 * The bar is the form itself since #98 — three dropdowns and the count, with the collection row
 * above it left alone. The type pills that used to sit on the left are gone, so there is nothing
 * for `justify-content: space-between` to space against.
 */
.filter-bar__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Still used by the collection row and by the empty states' routes onward. */
.filter-pill {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 20px;
    border-radius: var(--wp--custom--radius--pille, 30px);
    background: var(--wp--preset--color--lys-blaa, #eaf8fb);
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    font-weight: 500;
    color: var(--wp--preset--color--tekst, #1a1a1a);
    border: 1px solid transparent;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.filter-pill:hover {
    border-color: var(--wp--preset--color--tekst, #1a1a1a);
}

.filter-pill[aria-current='true'] {
    background: var(--wp--preset--color--tekst, #1a1a1a);
    color: var(--wp--preset--color--hvit, #fff);
    border-color: var(--wp--preset--color--tekst, #1a1a1a);
}

.filter-pill:focus-visible {
    outline: 2px solid var(--wp--preset--color--tekst, #1a1a1a);
    outline-offset: 2px;
}

.filter-bar__controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-bar__count {
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    color: var(--wp--preset--color--tekst-svak, #5a6660);
    white-space: nowrap;
}

.filter-dropdown {
    height: 36px;
    padding: 0 36px 0 16px;
    border-radius: var(--wp--custom--radius--pille, 30px);
    background-color: var(--wp--preset--color--lys-blaa, #eaf8fb);
    font-family: var(--wp--preset--font-family--brod, Figtree, system-ui, -apple-system, sans-serif);
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    color: var(--wp--preset--color--tekst, #1a1a1a);
    border: 1px solid transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpolyline points='1,1 5,4 9,1' fill='none' stroke='%2331332E' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color 0.2s;
}

.filter-dropdown:hover {
    border-color: var(--wp--preset--color--tekst, #1a1a1a);
}

/*
 * A keyboard shopper has to be able to see which dropdown has focus — more so now that the dropdowns
 * *do not* submit on change, since the facet they are travelling through is the one whose value the
 * "Bruk" button is about to send.
 */
.filter-dropdown:focus-visible {
    outline: 2px solid var(--wp--preset--color--tekst, #1a1a1a);
    outline-offset: 2px;
}

/*
 * The facets' commit button. `.filter-pill` carries everything visual, but it was written for `<a>`,
 * and a `<button>` inherits neither the page's font nor a pointer cursor from a UA stylesheet.
 */
.filter-bar__apply {
    font-family: var(--wp--preset--font-family--brod, Figtree, system-ui, -apple-system, sans-serif);
    cursor: pointer;
}

/*
 * "Bruk" is the fallback, not a control the design has — the prototype's bar is three bare selects.
 *
 * It is hidden rather than dropped because it carries two things nothing else does: without the
 * script a `change` commits nothing, and Enter on a focused select only submits when the form *has* a
 * submit button. `data-fts-auto` is the script's own word that the pointer shortcut is live, so a
 * bar it never reached keeps the button visible. Focus brings it back, the way a skip link does.
 */
[ data-fts-auto ] .filter-bar__apply {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[ data-fts-auto ] .filter-bar__apply:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

/* ── Empty state ── */

.products-empty {
    text-align: center;
    padding: 80px 0;
    color: var(--wp--preset--color--tekst-svak, #5a6660);
    font-size: 16px;
}

/*
 * A search that found nothing (#36). Same block as the plain empty state, with room for the
 * sentence that names the query and the routes onward under it — a bare centred line of muted
 * grey reads as "the shop is empty" rather than as "that word matched nothing".
 */
.products-empty--search p {
    margin: 0 0 8px;
}

.products-empty__lead {
    color: var(--wp--preset--color--tekst, #1a1a1a);
    font-size: 20px;
}

.products-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 24px;
}

/* ── Truncation notice ── */

.products-truncated {
    margin-top: 24px;
    text-align: center;
    font-size: var(--wp--preset--font-size--brodtekst-s, 0.875rem);
    color: var(--wp--preset--color--tekst-svak, #5a6660);
}

/* ── Pagination ── */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 60px;
}

.pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border-radius: 50%;
    font-size: var(--wp--preset--font-size--brodtekst, 1rem);
    font-weight: 500;
    color: var(--wp--preset--color--tekst, #1a1a1a);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.pagination__btn:hover {
    background: var(--wp--preset--color--lys-blaa, #eaf8fb);
}

.pagination__btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--tekst, #1a1a1a);
    outline-offset: 2px;
}

.pagination__btn[aria-current='page'] {
    background: var(--wp--preset--color--tekst, #1a1a1a);
    color: var(--wp--preset--color--hvit, #fff);
}

.pagination__btn--arrow {
    color: var(--wp--preset--color--tekst-svak, #5a6660);
}

.pagination__btn--arrow:hover {
    color: var(--wp--preset--color--tekst, #1a1a1a);
}

.pagination__btn--arrow svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pagination__btn--disabled {
    opacity: 0.3;
    pointer-events: none;
}

.pagination__ellipsis {
    padding: 0 4px;
    color: var(--wp--preset--color--tekst-svak, #5a6660);
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .filter-bar__inner {
        flex-direction: column;
        align-items: stretch;
    }

    /*
     * One dropdown per row rather than two-then-one: three controls of unequal label width wrap into
     * a ragged 2+1 that reads as two groups. Full width, and 44px tall with 16px text so tapping one
     * does not zoom the page on iOS — Safari zooms any font-size under 16px on focus.
     */
    .filter-bar__controls {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    /*
     * 16px flat, and never a fluid token: mobile Safari zooms the viewport on focus for any form control
     * under 16px, and every token at this step (`brodtekst`, `tittel-s`) is fluid down to 15px. So the
     * one rung that would read correctly here is the one that breaks it. The prototype makes the same
     * call explicitly — produkter.html bumps `.filter-dropdown` to 16px inside its own 768px query.
     */
    .filter-dropdown {
        width: 100%;
        height: 44px;
        font-size: 16px;
        padding-right: 40px;
    }

    .filter-bar__count {
        margin-top: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .filter-pill,
    .filter-dropdown,
    .pagination__btn {
        transition: none;
    }
}