/* Kupiti faceted listings — scoped, additive; does not change existing product cards. */
.catalogue-filter-layout{display:grid;grid-template-columns:minmax(210px,245px) minmax(0,1fr);column-gap:25px;align-items:start;margin-top:18px}
.filter-sidebar{grid-column:1;grid-row:1 / span 2;border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px;min-width:0}
.filter-sidebar-head{display:flex;justify-content:space-between;align-items:center;padding:0 0 16px;font-size:17px;color:var(--ink)}
.filter-fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:17px 0 19px;min-width:0}
.filter-fieldset legend{font-size:14px;font-weight:700;padding-top:16px;color:var(--ink)}
.filter-check{display:flex;align-items:center;gap:10px;padding:5px 0;min-height:31px;font-size:12px;cursor:pointer}
.filter-check input{flex:0 0 auto;accent-color:#173c35;width:16px;height:16px;cursor:pointer}
.filter-check span{flex:1;min-width:0;overflow-wrap:anywhere}.filter-check small{font-size:11px;color:var(--muted)}
.filter-checkbox-list{max-height:280px;overflow-y:auto;scrollbar-width:thin}
.filter-checkbox-list:not(.expanded) .filter-optional{display:none}
.filter-retailer-list{max-height:245px}
.filter-more{border:0;background:none;color:#28583b;font-weight:700;font-size:12px;cursor:pointer;padding:10px 0 0}
.filter-price-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.filter-price-inputs label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted)}
.filter-price-inputs input{min-width:0;width:100%;background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 8px;font-size:13px;color:var(--ink);font:inherit}
.filter-hint{font-size:10px;line-height:1.45;color:var(--muted);margin:8px 0 0}
.filter-actions{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.filter-apply{border:0;border-radius:10px;background:#173c35;color:#fff;padding:14px 9px;font-size:13px;font-weight:700;cursor:pointer}
.filter-clear{text-align:center;color:#426647;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.filter-mobile-close,.filter-mobile-open{display:none}
.filter-backdrop{display:none}
.filter-listing-toolbar{grid-column:2;grid-row:1;min-width:0;margin:0 0 16px}
.filter-toolbar-main{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.filter-result-count{font-size:12px;color:var(--muted);margin-right:auto}
.filter-sort-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink);order:2}
.filter-sort-label select{font:inherit;font-size:12px;min-width:175px;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);cursor:pointer}
.filter-active-chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0;align-items:center}
.filter-chip{display:inline-flex;gap:6px;align-items:center;background:#edf4e0;color:#173c35;border-radius:18px;padding:8px 11px;font-size:11px;font-weight:600}
.filter-chip:hover{background:#dceebf}.filter-chip span{font-size:15px;line-height:10px}
.filter-clear-inline{color:#39663f;font-size:11px;font-weight:600;text-decoration:underline;margin-left:4px}
.catalogue-filter-results{grid-column:2;grid-row:2;min-width:0}
.catalogue-filter-results .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.catalogue-filter-results .product-card-body{padding:14px;gap:9px}
.catalogue-filter-results .product-card-image img{padding:14px}
.catalogue-filter-results .product-card-name{font-size:12px;min-height:55px}
.catalogue-filter-results .product-price{font-size:18px}
@media(min-width:1400px){.catalogue-filter-results .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1040px) and (min-width:681px){.catalogue-filter-layout{grid-template-columns:205px minmax(0,1fr);gap:16px}.catalogue-filter-results .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
 .catalogue-filter-layout{display:block;margin-top:16px}
 .filter-sidebar{display:none;position:fixed;inset:auto 0 0;top:12vh;bottom:0;overflow-y:auto;border-radius:22px 22px 0 0;padding:18px 20px calc(24px + env(safe-area-inset-bottom));z-index:210;background:#fff;box-shadow:0 -8px 40px #071b1526}
 .filter-sidebar.is-open{display:block}
 .filter-sidebar-head{position:sticky;top:-18px;background:#fff;z-index:1;padding:8px 0 16px}
 .filter-mobile-close{display:inline-flex;justify-content:center;align-items:center;background:#f2f5ee;border:0;border-radius:50%;width:34px;height:34px;font-size:22px;color:var(--ink);cursor:pointer}
 .filter-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:#061e1ab0;z-index:205}
 body.kupiti-filters-open{overflow:hidden}
 .filter-actions{position:sticky;bottom:-24px;background:#fff;padding:15px 0 8px;border-top:1px solid var(--line)}
 .filter-listing-toolbar{margin:0 0 14px}
 .filter-toolbar-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
 .filter-mobile-open,.filter-sort-label{display:flex;align-items:center;justify-content:center;min-height:43px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:9px;color:var(--ink);font-size:12px;font-weight:700;gap:8px}
 .filter-mobile-open{background:#173c35;border-color:#173c35;color:#fff;cursor:pointer}
 .filter-mobile-open .icon{width:18px;height:18px}
 .filter-sort-label{position:relative;font-size:0}
 .filter-sort-label:before{content:'Sortiraj';font-size:12px}
 .filter-sort-label select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-width:0;padding:0}
 .filter-result-count{grid-column:1/-1;order:3;justify-self:start;font-size:11px;margin:2px 0 0}
 .filter-active-chips{margin:11px 0 0;gap:6px}
 .filter-chip{padding:7px 9px;font-size:11px}
 .catalogue-filter-results .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .catalogue-filter-results .product-card-body{padding:13px;gap:9px}
 .catalogue-filter-results .product-card-name{font-size:12px;min-height:54px}
 .catalogue-filter-results .product-price{font-size:18px}
}

/* KUPITI_FILTER_FORM_LAYOUT_FIX_20261031
   The legacy site.css `form{display:flex;flex:1;...}` is meant for header
   search, not for the faceted listing form. Keep the filter sections stacked.
   Scope to this form only; never change the global header-search styling. */
.filter-sidebar #kupiti-filter-form {
  display: block;
  flex: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.filter-sidebar #kupiti-filter-form .filter-fieldset {
  display: block;
  width: 100%;
  min-width: 0;
}
.filter-sidebar #kupiti-filter-form .filter-check input[type=checkbox],
.filter-sidebar #kupiti-filter-form .filter-check input[type=radio] {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  padding: 0;
}

/* ============================================================
   DESKTOP FILTER ACCORDION (local experiment)
   Keep every visual rule here. The mobile bottom sheet above is unchanged.
   JS provides the sticky offset below the existing sticky navigation.
   Without JS, all filter options remain visible and usable.
   ============================================================ */
@media (min-width: 681px) {
  .catalogue-heading-count { display: none; }

  .catalogue-filter-layout > .filter-sidebar {
    position: sticky;
    top: var(--kupiti-filter-stick-top, 110px);
    max-height: calc(100vh - var(--kupiti-filter-stick-top, 110px) - 12px);
    max-height: calc(100dvh - var(--kupiti-filter-stick-top, 110px) - 12px);
    display: flex;
    flex-direction: column;
    padding: 18px 18px 14px;
  }

  /* Override only the site's legacy global search-form layout. */
  .catalogue-filter-layout > .filter-sidebar #kupiti-filter-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .catalogue-filter-layout > .filter-sidebar .filter-sidebar-head { flex: 0 0 auto; }
  .catalogue-filter-layout > .filter-sidebar .filter-fields-scroll {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #b5c5b9 transparent;
  }
  .catalogue-filter-layout > .filter-sidebar .filter-fields-scroll::-webkit-scrollbar { width: 5px; }
  .catalogue-filter-layout > .filter-sidebar .filter-fields-scroll::-webkit-scrollbar-thumb {
    background: #b5c5b9;
    border-radius: 8px;
  }
  .catalogue-filter-layout > .filter-sidebar .filter-fieldset { padding: 10px 0 12px; }
  .catalogue-filter-layout > .filter-sidebar .filter-fieldset legend {
    width: 100%;
    padding-top: 12px;
  }
  .catalogue-filter-layout > .filter-sidebar .desktop-accordion-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px;
    min-height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
  }
  .catalogue-filter-layout > .filter-sidebar .desktop-accordion-toggle:hover { color: #28583b; }
  .catalogue-filter-layout > .filter-sidebar .desktop-accordion-toggle:focus-visible {
    outline: 2px solid #648517;
    outline-offset: 3px;
  }
  .catalogue-filter-layout > .filter-sidebar .desktop-accordion-chevron {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 3px 3px 0;
    flex: 0 0 8px;
    border-right: 1.7px solid #5d7665;
    border-bottom: 1.7px solid #5d7665;
    transform: rotate(225deg);
    transition: transform .16s ease;
  }
  .catalogue-filter-layout > .filter-sidebar .filter-fieldset.is-collapsed .desktop-accordion-chevron {
    transform: rotate(45deg);
  }
  .catalogue-filter-layout > .filter-sidebar .filter-fieldset.is-collapsed .desktop-accordion-body {
    display: none;
  }
  .catalogue-filter-layout > .filter-sidebar .desktop-accordion-body { padding-top: 10px; }

  /* Keep Apply/Reset outside the scrolling fields, always reachable. */
  .catalogue-filter-layout > .filter-sidebar .filter-actions {
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    background: #fff;
  }
}

/* Desktop accordion markup stays visually equivalent to the original mobile legend. */
.desktop-accordion-toggle {
  font: inherit;
  color: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}
.desktop-accordion-chevron { display: none; }
@media (max-width: 680px) {
  .desktop-accordion-toggle { pointer-events: none; }
  .desktop-accordion-body { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-accordion-chevron { transition: none !important; }
}
