/* ===========================================================================
   Katalog — panel filtera, traka sa rezultatima, aktivni filteri
   ---------------------------------------------------------------------------
   Zamenjuje stariji raspored iz 07-catalog.css. Glavna promena: panel filtera
   se skroluje nezavisno od stranice. Ranije se moralo skrolovati kroz ceo
   spisak proizvoda da bi se stiglo do dna filtera.
   =========================================================================== */

.catalog-head { padding-block: var(--dg-3) var(--dg-5); max-width: var(--dg-measure); }
.catalog-head h1 { font-size: var(--dg-fs-2xl); letter-spacing: -0.03em; }
.catalog-head__text { margin-top: var(--dg-3); color: var(--dg-ink-muted); }

/* --- Prečice ka potkategorijama -------------------------------------------- */
.subcats { margin-bottom: var(--dg-5); }
.subcats ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dg-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.subcats__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--dg-2);
    padding: var(--dg-2) var(--dg-4);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-pill);
    background: var(--dg-bg);
    color: var(--dg-ink);
    font-size: var(--dg-fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--dg-dur-fast) var(--dg-ease),
                background var(--dg-dur-fast) var(--dg-ease);
}
.subcats__chip:hover { border-color: var(--dg-primary); background: var(--dg-primary-tint); color: var(--dg-primary); }
.subcats__count { font-size: var(--dg-fs-xs); color: var(--dg-ink-muted); }

/* --- Raspored --------------------------------------------------------------- */
.catalog-layout { display: grid; gap: var(--dg-6); align-items: start; }
/* Bočna traka tek od 1200 px. Na 1024 px bi joj ostalo 672 px za mrežu, u
   šta staju samo dve kartice — pa su se razvlačile preko 320 px. */
@media (min-width: 75rem) {
    .catalog-layout { grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--dg-7); }
}

.catalog-main { min-width: 0; }

/* --- Panel filtera ---------------------------------------------------------- */
.filters-panel {
    display: flex;
    flex-direction: column;
    background: var(--dg-bg);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-lg);
    overflow: hidden;
}

@media (min-width: 75rem) {
    .catalog-layout__aside {
        position: sticky;
        top: calc(var(--dg-header-h) + var(--dg-3));
    }
    /* Ključna izmena: panel ima svoju visinu i svoj skrol. Bez ovoga se
       do dna filtera stizalo tek skrolovanjem kroz sve proizvode. */
    .filters-panel {
        max-height: calc(100svh - var(--dg-header-h) - var(--dg-6));
    }
    .filters-panel__body {
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

.filters-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dg-3);
    padding: var(--dg-4) var(--dg-5);
    border-bottom: 1px solid var(--dg-border);
    background: var(--dg-surface);
    flex: none;
}
.filters-panel__title {
    margin: 0;
    font-weight: 700;
    font-size: var(--dg-fs-base);
}

.filters-panel__body { padding: 0 var(--dg-5); flex: 1 1 auto; }

.filters-panel__foot {
    display: flex;
    gap: var(--dg-3);
    padding: var(--dg-4) var(--dg-5);
    border-top: 1px solid var(--dg-border);
    background: var(--dg-bg);
    flex: none;
}
.filters-panel__foot .btn { flex: 1; }

/* Na telefonu panel je fioka preko cele visine ekrana */
@media (max-width: 74.999rem) {
    .filters-panel {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 70;
        width: min(22rem, 92vw);
        max-width: 92vw;
        border-radius: 0;
        border: 0;
        box-shadow: var(--dg-shadow-3);
        transform: translateX(-102%);
        transition: transform var(--dg-dur) var(--dg-ease-out);
        visibility: hidden;
    }
    .filters-panel[data-open="true"] { transform: translateX(0); visibility: visible; }
    .filters-panel__body { overflow-y: auto; overscroll-behavior: contain; }
}

.filters-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgb(0 0 0 / 0.45);
    backdrop-filter: blur(2px);
}
@media (min-width: 75rem) { .filters-backdrop { display: none; } }

/* --- Traka sa rezultatima --------------------------------------------------- */
.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dg-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--dg-3) var(--dg-4);
    margin-bottom: var(--dg-4);
    background: var(--dg-surface);
    border-radius: var(--dg-radius);
}
.catalog-toolbar__count { margin: 0; font-size: var(--dg-fs-sm); color: var(--dg-ink-muted); }
.catalog-toolbar__count strong { color: var(--dg-ink); font-size: var(--dg-fs-md); }

.toolbar__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.3rem;
    border-radius: var(--dg-radius-pill);
    background: var(--dg-primary);
    color: var(--dg-on-primary);
    font-size: var(--dg-fs-2xs);
    font-weight: 700;
}

.catalog-sort { display: flex; align-items: center; gap: var(--dg-2); }
.select--sm {
    min-height: 2.4rem;
    font-size: var(--dg-fs-sm);
    border-radius: var(--dg-radius-pill);
    background-color: var(--dg-bg);
    padding-inline: var(--dg-4) var(--dg-7);
}

/* --- Aktivni filteri --------------------------------------------------------- */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dg-2) var(--dg-3);
    margin-bottom: var(--dg-5);
}
.active-filters__label {
    font-size: var(--dg-fs-xs);
    font-weight: 700;
    color: var(--dg-ink-muted);
}
.active-filters__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dg-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--dg-2);
    padding: var(--dg-1) var(--dg-3);
    border-radius: var(--dg-radius-pill);
    background: var(--dg-primary-tint);
    border: 1px solid transparent;
    color: var(--dg-primary);
    font-size: var(--dg-fs-xs);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dg-dur-fast) var(--dg-ease);
}
.filter-chip:hover { background: var(--dg-surface-sunken); border-color: var(--dg-danger); color: var(--dg-danger); }
.filter-chip svg { flex: none; opacity: 0.6; }
.filter-chip:hover svg { opacity: 1; }

.active-filters__clear {
    font-size: var(--dg-fs-xs);
    font-weight: 600;
    color: var(--dg-ink-muted);
}

/* --- Grupe filtera ----------------------------------------------------------- */
.filter-group { border-bottom: 1px solid var(--dg-border); padding-block: var(--dg-4); }
.filter-group:last-of-type { border-bottom: 0; }
.filter-group summary { font-size: var(--dg-fs-sm); font-weight: 700; }
.filter-group__body { display: grid; gap: var(--dg-1); padding-top: var(--dg-3); }

/* Redovi filtera su cilj za prst, ne samo tekst */
.filter-group__body .checkbox {
    padding: var(--dg-2);
    margin-inline: calc(-1 * var(--dg-2));
    border-radius: var(--dg-radius-sm);
    transition: background var(--dg-dur-fast) var(--dg-ease);
}
.filter-group__body .checkbox:hover { background: var(--dg-surface); }

.filter-count {
    margin-left: auto;
    padding-left: var(--dg-2);
    font-size: var(--dg-fs-xs);
    color: var(--dg-ink-muted);
}
.filter-group__body .checkbox > span {
    display: flex;
    align-items: center;
    gap: var(--dg-1);
    width: 100%;
}

.filters__head { display: none; }
.filters__price { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dg-3); }

.filters button[type="submit"] { display: none; }
/* Bez skripte dugme mora da postoji — inače filteri ne rade */
.no-js .filters button[type="submit"] { display: inline-flex; }