/* Kazmi Filter - all scoped under .kazmi-filter-catalog / .kzf-* */

.kazmi-filter-catalog{--kz-ivory:#F6F1E8;--kz-cream:#FFFCF6;--kz-ink:#241A13;--kz-body:#5B4A3A;--kz-muted:#8A7862;--kz-bronze:#8B6A3C;--kz-hair:#E2D7C5;--kz-hair2:#E0D4C0;--kz-border:#D6C8B2;font-family:'Jost',system-ui,sans-serif}
.kazmi-filter-catalog *,.kazmi-filter-catalog *::before,.kazmi-filter-catalog *::after{box-sizing:border-box}

/* ---------- bar ---------- */
.kzf-bar{width:100%;max-width:1120px;margin-left:0;margin-right:auto;background:rgba(255,252,246,.82);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--kz-hair);border-radius:8px;box-shadow:0 18px 44px rgba(60,40,25,.07);padding:16px 20px;display:flex;flex-direction:column;gap:16px;position:sticky;top:var(--kazmi-header-height,92px);z-index:45;transition:padding .35s ease,gap .35s ease,box-shadow .35s ease}
.kzf-bar.is-pinned{padding:8px 20px;gap:8px;box-shadow:0 22px 52px rgba(60,40,25,.12)}
.kzf-probe{height:1px;width:100%}

.kzf-row{display:flex;align-items:center;gap:8px;min-width:0}
.kzf-row--search{gap:16px;padding:0 8px 16px;border-bottom:1px solid var(--kz-hair2)}
.kzf-bar.is-pinned .kzf-row--search{padding-bottom:8px}
.kzf-row--status,.kzf-row--reeds,.kzf-row--sizes{padding-inline:8px;gap:8px;flex-wrap:nowrap}
.kzf-group{display:flex;align-items:center;gap:8px;min-width:0}
.kzf-divider{width:1px;height:24px;background:#DDD1BE;flex:0 0 auto;margin:0 4px}

.kzf-search__icon{color:var(--kz-muted);display:flex;flex:0 0 auto}
.kzf-search{flex:1 1 auto;min-width:0;height:40px;border:none;outline:none;background:transparent;font-family:inherit;font-size:15px;font-weight:400;color:var(--kz-ink)}
.kzf-search::placeholder{color:#6B625A}
.kzf-search::-webkit-search-cancel-button{-webkit-appearance:none}

/* ---------- pills + buttons: one geometry ---------- */
.kzf-pill,.kzf-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border-radius:100px;border:1px solid var(--kz-border);background:rgba(255,255,255,.45);color:#4A3A2C;font-family:inherit;font-size:10px;font-weight:500;line-height:1;letter-spacing:.20em;text-transform:uppercase;white-space:nowrap;flex:0 0 auto;cursor:pointer;transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.kzf-btn{padding:0 24px;letter-spacing:.22em}
.kzf-pill:hover,.kzf-btn:hover{border-color:var(--kz-bronze);color:var(--kz-ink)}
.kzf-pill:focus-visible,.kzf-btn:focus-visible{outline:2px solid var(--kz-bronze);outline-offset:2px}
.kzf-pill.is-active{background:var(--kz-ink);border-color:var(--kz-ink);color:var(--kz-ivory)}
.kzf-btn--solid{background:var(--kz-ink);border-color:var(--kz-ink);color:var(--kz-ivory)}

.kzf-advanced{padding:0 8px}
.kzf-advanced__label{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--kz-muted);margin-bottom:10px}
.kzf-advanced__group .kzf-group{flex-wrap:wrap;gap:8px}

/* ---------- results ---------- */
.kzf-results{margin-top:8px}
.kzf-count{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--kz-muted);margin:0 0 22px}
.kzf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}

.kzf-card{min-width:0;background:var(--kz-cream);border:1px solid var(--kz-border);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.16,.8,.24,1),box-shadow .55s ease,border-color .55s ease}
.kzf-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(60,40,25,.14);border-color:#A8834E}
.kzf-card__media{position:relative;display:block;overflow:hidden;line-height:0}
.kzf-card__media img{width:100%;height:330px;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.16,.8,.24,1)}
.kzf-card:hover .kzf-card__media img{transform:scale(1.07)}
.kzf-card__badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--kz-ink);color:var(--kz-ivory);font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:6px 14px;border-radius:100px}
.kzf-card__body{padding:22px 22px 26px;display:flex;flex-direction:column;min-width:0}
.kzf-card__cat{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--kz-muted)}
.kzf-card__title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:21px;line-height:1.25;margin:10px 0;letter-spacing:-.01em}
.kzf-card__title a{color:var(--kz-ink);text-decoration:none;transition:color .4s ease}
.kzf-card__title a:hover{color:var(--kz-bronze)}
.kzf-card__price{font-size:14px;color:var(--kz-bronze)}

@keyframes kzfIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.kzf-in{animation:kzfIn .56s cubic-bezier(.16,.8,.24,1) both}

.kzf-empty{text-align:center;padding:50px 20px;display:flex;flex-direction:column;align-items:center;gap:18px}
.kzf-empty p{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;color:var(--kz-ink);margin:0}
.kzf-more{display:flex;justify-content:center;margin-top:40px}

/* ---------- mobile ---------- */
@media (max-width:1023px){
  .kzf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .kzf-card__media img{height:240px}
}
@media (max-width:767px){
  .kzf-bar{padding:12px 12px;gap:12px;border-radius:6px;top:var(--kazmi-header-height,84px)}
  .kzf-bar.is-pinned{padding:8px 12px;gap:8px}
  .kzf-row--search{gap:10px;padding:0 4px 12px}
  .kzf-row--status,.kzf-row--fine{padding:0 4px}
  .kzf-search{font-size:14px;height:38px}
  .kzf-btn--filters,.kzf-btn--reset{padding:0 16px;font-size:9px;letter-spacing:.16em}
  .kzf-row--status,.kzf-group{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}
  .kzf-row--status::-webkit-scrollbar,.kzf-group::-webkit-scrollbar{display:none}
  .kzf-row--fine{flex-direction:column;align-items:stretch;gap:8px}
  .kzf-divider{display:none}
  .kzf-advanced{display:none}
  .kzf-grid{gap:12px}
  .kzf-card__media img{height:auto;aspect-ratio:1.25/1}
  .kzf-card__body{padding:16px 14px 18px}
  .kzf-card__title{font-size:clamp(17px,4.8vw,22px);line-height:1.12;margin:8px 0}
  .kzf-card__cat{font-size:9px;letter-spacing:.26em}
  .kzf-card__price{font-size:13px}
  .kzf-card__badge{top:10px;left:10px;font-size:8px;padding:5px 11px}
  .kzf-count{font-size:10px;margin-bottom:16px}
}
@media (max-width:360px){.kzf-grid{gap:8px}.kzf-card__body{padding:12px 10px 14px}}

/* ---------- mobile sheet ---------- */
.kzf-backdrop{position:fixed;inset:0;background:rgba(20,14,10,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1000}
.kzf-sheet{position:fixed;left:0;right:0;bottom:0;max-height:82svh;overflow-y:auto;background:var(--kz-ivory,#F6F1E8);border-radius:16px 16px 0 0;z-index:1001;padding:20px 18px calc(20px + env(safe-area-inset-bottom));font-family:'Jost',system-ui,sans-serif;box-shadow:0 -20px 60px rgba(60,40,25,.24)}
.kzf-sheet__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.kzf-sheet__title{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;color:#241A13}
.kzf-sheet__close{width:44px;height:44px;border-radius:50%;border:1px solid #D6C8B2;background:#FFFCF6;color:#241A13;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kzf-sheet__group{margin-bottom:22px}
.kzf-sheet__label{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#8A7862;margin-bottom:12px}
.kzf-sheet__pills{display:flex;flex-wrap:wrap;gap:8px}
.kzf-sheet__foot{display:flex;gap:10px;position:sticky;bottom:0;background:linear-gradient(to top,rgba(246,241,232,1) 70%,rgba(246,241,232,0));padding-top:14px}
.kzf-sheet__foot .kzf-btn{flex:1 1 auto}
body.kzf-locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){.kzf-card,.kzf-pill,.kzf-btn,.kzf-bar{transition-duration:1ms}.kzf-in{animation-duration:1ms}}

/* four-row layout: every pill row starts at the same X */
.kzf-bar{gap:0}
.kzf-row--status{margin-top:16px}
.kzf-row--reeds{margin-top:12px}
.kzf-row--sizes{margin-top:10px}
.kzf-divider{display:none}
/* pinned: Reeds + Sizes collapse together as one secondary region */
.kzf-row--reeds,.kzf-row--sizes{overflow:hidden;transition:max-height .35s ease,opacity .3s ease,margin-top .35s ease;max-height:44px;opacity:1}
.kzf-bar.is-pinned .kzf-row--reeds,.kzf-bar.is-pinned .kzf-row--sizes{max-height:0;opacity:0;margin-top:0}
@media (max-width:767px){.kzf-row--status,.kzf-row--reeds,.kzf-row--sizes{padding-inline:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.kzf-row--status::-webkit-scrollbar,.kzf-row--reeds::-webkit-scrollbar,.kzf-row--sizes::-webkit-scrollbar{display:none}
.kzf-row--status{margin-top:12px}.kzf-row--reeds{margin-top:8px}.kzf-row--sizes{margin-top:8px}}
@media (prefers-reduced-motion:reduce){.kzf-row--reeds,.kzf-row--sizes{transition-duration:1ms}}

/* the panel wraps its controls rather than stretching the viewport */
@media (min-width:768px){.kzf-row--status,.kzf-row--reeds,.kzf-row--sizes{width:fit-content;max-width:100%}}
@media (max-width:1199px){.kzf-bar{width:100%;max-width:1120px}}
@media (max-width:767px){.kzf-bar{width:100%;max-width:none;margin-left:0;margin-right:0}
.kzf-row--status,.kzf-row--reeds,.kzf-row--sizes{width:auto}}

/* ================= MOBILE FILTER (<=767px) =================
   Search on its own row, Filters/Reset beneath, then three independent
   swipe rows. Everything here is inside a max-width query, so the
   approved desktop panel is untouched. */
@media (max-width: 767px) {

  .kzf-bar { padding: 14px; gap: 0; border-radius: 8px; }

  /* row 1 - full width search */
  .kzf-row--search {
    position: relative;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 0 12px;
    border-bottom: 1px solid #E0D4C0;
  }
  .kzf-search__icon { position: absolute; left: 12px; top: 15px; z-index: 2; pointer-events: none; }
  .kzf-search {
    order: 1; flex: 1 1 100%; width: 100%;
    height: 46px; padding: 0 14px 0 36px;
    border: 1px solid #D6C8B2; border-radius: 6px;
    background: rgba(255,255,255,.55); font-size: 14px;
  }

  /* row 2 - Filters + Reset share the line */
  .kzf-btn--filters, .kzf-btn--reset {
    order: 2; flex: 1 1 calc(50% - 5px);
    height: 44px; padding: 0; font-size: 9px; letter-spacing: .18em;
  }

  /* rows 3-5 - each owns its own horizontal overflow */
  .kzf-row--status { margin-top: 14px; }
  .kzf-row--reeds  { margin-top: 10px; }
  .kzf-row--sizes  { margin-top: 10px; }
  .kzf-row--status, .kzf-row--reeds, .kzf-row--sizes {
    display: flex; flex-wrap: nowrap; gap: 8px;
    width: auto; max-width: none;
    padding-inline: 0; padding-bottom: 2px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-padding-left: 0;
  }
  .kzf-row--status::-webkit-scrollbar,
  .kzf-row--reeds::-webkit-scrollbar,
  .kzf-row--sizes::-webkit-scrollbar { display: none; }

  /* compact pills, content-driven width */
  .kzf-pill {
    height: 38px; padding: 0 15px;
    font-size: 9px; letter-spacing: .16em;
    flex: 0 0 auto;
  }

  /* pinned on mobile: keep search + buttons + status, fold the rest away */
  .kzf-bar.is-pinned { padding: 10px 14px; }
  .kzf-bar.is-pinned .kzf-row--reeds,
  .kzf-bar.is-pinned .kzf-row--sizes { max-height: 0; opacity: 0; margin-top: 0; }
}

@media (max-width: 375px) {
  .kzf-bar { padding: 12px; }
  .kzf-pill { padding: 0 13px; font-size: 8.5px; letter-spacing: .14em; }
  .kzf-btn--filters, .kzf-btn--reset { letter-spacing: .14em; }
  .kzf-search { font-size: 13px; }
}

/* mobile: rows must never exceed the panel - they scroll inside it */
@media (max-width:767px){
  .kzf-bar{width:100%;max-width:none;margin-left:0;margin-right:0;overflow:visible}
  .kzf-row--status,.kzf-row--reeds,.kzf-row--sizes{
    width:100%;max-width:100%;min-width:0;
    display:flex;flex-wrap:nowrap;gap:8px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-inline:0;padding-bottom:2px;
  }
  .kzf-row--status::-webkit-scrollbar,.kzf-row--reeds::-webkit-scrollbar,.kzf-row--sizes::-webkit-scrollbar{display:none}
  .kzf-pill{flex:0 0 auto}
}
/* ==== MOBILE ROW ARCHITECTURE ====
   Desktop: .kzf-scroll is a plain flex group, so rows render exactly as before.
   Mobile: the ALL control is anchored and only the options scroll. */
.kzf-scroll{display:flex;align-items:center;gap:8px;min-width:0}

@media (max-width:767px){
  .kzf-bar{width:calc(100% - 28px);max-width:none;margin-inline:auto;padding:12px;overflow:visible}

  .kzf-row--status,.kzf-row--reeds,.kzf-row--sizes{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    align-items:center;gap:8px;width:100%;max-width:100%;min-width:0;overflow:visible}

  .kzf-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;min-width:0}
  .kzf-scroll::-webkit-scrollbar{display:none}

  /* the three ALL controls share one width to form a vertical anchor */
  .kzf-row--status>.kzf-pill,.kzf-row--reeds>.kzf-pill,.kzf-row--sizes>.kzf-pill{
    width:122px;padding:0 10px;justify-content:center}

  .kzf-pill{height:39px;padding:0 15px;font-size:9.5px;letter-spacing:.15em;white-space:nowrap;flex:0 0 auto}

  /* search on its own line, Filters/Reset beneath */
  .kzf-row--search{position:relative;flex-wrap:wrap;gap:8px;padding:0 0 12px}
  .kzf-search__icon{position:absolute;left:12px;top:14px;z-index:2;pointer-events:none}
  .kzf-search{order:1;flex:1 1 100%;width:100%;height:44px;padding:0 14px 0 36px;
    border:1px solid #D6C8B2;border-radius:6px;background:rgba(255,255,255,.55);font-size:14px}
  .kzf-btn--filters,.kzf-btn--reset{order:2;flex:1 1 calc(50% - 4px);height:42px;padding:0;font-size:9.5px;letter-spacing:.16em}

  .kzf-row--status{margin-top:12px}
  .kzf-row--reeds{margin-top:8px}
  .kzf-row--sizes{margin-top:8px}

  /* readable card typography - not a shrunken desktop */
  .kzf-count{font-size:10px;letter-spacing:.22em}
  .kzf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kzf-card__cat{font-size:8.5px;letter-spacing:.24em}
  .kzf-card__title{font-size:clamp(17px,4.9vw,20px);line-height:1.14;margin:8px 0}
  .kzf-card__price{font-size:12.5px}
  .kzf-card__body{padding:14px 12px 16px}
}

@media (max-width:390px){
  .kzf-bar{width:calc(100% - 20px);padding:11px}
  .kzf-row--status>.kzf-pill,.kzf-row--reeds>.kzf-pill,.kzf-row--sizes>.kzf-pill{width:112px;padding:0 8px}
  .kzf-pill{font-size:9px;padding:0 13px;letter-spacing:.13em}
  .kzf-grid{gap:8px}
}
/* ==== NO-WRAP GUARD ====
   The option track must never wrap at ANY mobile/tablet width.
   Verified failure case: ~500-767px, where the pills fitted the row
   width but still wrapped beside the anchored ALL control. */
@media (max-width:767px){
  .kzf-scroll{
    flex-wrap:nowrap !important;
    white-space:nowrap;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    min-width:0;max-width:100%;
  }
  .kzf-scroll::-webkit-scrollbar{display:none}
  .kzf-scroll>.kzf-pill{flex:0 0 auto !important;white-space:nowrap}

  /* rows stay one line, ~40-42px tall */
  .kzf-row--status,.kzf-row--reeds,.kzf-row--sizes{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center;gap:8px;
    width:100%;max-width:100%;min-width:0;
    overflow:visible;
  }
  .kzf-row--status{margin-top:12px}
  .kzf-row--reeds,.kzf-row--sizes{margin-top:8px}

  /* anchored ALL controls: one shared width, one left edge */
  .kzf-row--status>.kzf-pill,
  .kzf-row--reeds>.kzf-pill,
  .kzf-row--sizes>.kzf-pill{
    width:120px;padding:0 10px;justify-content:center;flex:0 0 auto}

  .kzf-pill{height:40px;padding:0 14px;font-size:9px;letter-spacing:.15em;border-radius:999px}
}

@media (max-width:390px){
  .kzf-row--status>.kzf-pill,
  .kzf-row--reeds>.kzf-pill,
  .kzf-row--sizes>.kzf-pill{width:112px;padding:0 8px}
}

/* the track carries inline nowrap; make sure its children agree */
.kzf-scroll>.kzf-pill{flex:0 0 auto !important;white-space:nowrap !important;max-width:none !important}
/* ==== MOBILE CONTAINMENT ====
   Panel and rows must clip; only the option track scrolls. */
@media (max-width:767px){
  .kzf-bar{width:calc(100% - 24px);max-width:calc(100% - 24px);min-width:0;box-sizing:border-box;overflow:hidden}
  .kzf-row--status,.kzf-row--reeds,.kzf-row--sizes{
    display:grid !important;grid-template-columns:105px minmax(0,1fr) !important;
    align-items:center;gap:8px;width:100%;max-width:100%;min-width:0;overflow:hidden !important}
  .kzf-row--status>.kzf-pill,.kzf-row--reeds>.kzf-pill,.kzf-row--sizes>.kzf-pill{
    width:105px !important;min-width:105px;max-width:105px;padding:0 8px;justify-content:center;flex:0 0 auto}
  .kzf-scroll{min-width:0 !important;max-width:100% !important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kzf-scroll::-webkit-scrollbar{display:none}
  .kzf-scroll>.kzf-pill{flex:0 0 auto !important;width:auto !important;max-width:none !important;white-space:nowrap !important}
}

/* ==== CATALOGUE PAGE, DESKTOP ONLY ====
   The panel carried max-width:1120px with margin-left:0, so it sat narrower
   than the 1280 boxed container holding the heading and the grid and left a
   gap on the right. Inside the same container it simply fills it.
   Mobile and tablet are deliberately untouched. */


/* ==== CATALOGUE PAGE, DESKTOP ONLY (kzf-collection-align) ====
   Three leftover desktop overrides pushed the panel out of the grid:
     container kc000037  width:73%  margin-left:11px
     widget    554f81a   custom width 98.612%
     .kzf-bar            max-width:1120px with margin-left:0
   Neutralised at >=1024px only. Mobile and tablet keep their own values. */
@media (min-width: 1024px) {
  body.kzf-collection .elementor-element-kc000037 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.kzf-collection .elementor-element-554f81a {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.kzf-collection .kzf-bar {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    box-sizing: border-box;
  }
}

/* ==== FILTER PANEL ROW ARCHITECTURE ======================================
   Target layout: search on its own line, Filters/Reset beneath, then one
   line per filter group with the ALL control anchored and the options
   scrolling horizontally inside their own track. This already existed below
   767px; it now covers tablet too, where the options were wrapping onto a
   second line. Desktop (>=1024px) is untouched. */
.kzf-search { box-sizing: border-box; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.kzf-scroll { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
.kzf-scroll > .kzf-pill { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 1023px) {
  .kzf-row--search {
    position: relative; display: flex; flex-wrap: wrap;
    gap: 8px; padding: 0 0 12px;
  }
  .kzf-search__icon { position: absolute; left: 13px; top: 22px; transform: translateY(-50%); z-index: 2; pointer-events: none; }
  .kzf-search {
    order: 1; flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%;
    height: 44px; padding: 0 14px 0 38px; box-sizing: border-box;
    border: 1px solid #D6C8B2; border-radius: 6px;
    background: rgba(255,255,255,.55);
    /* 16px keeps iOS Safari from zooming the page when the field is focused */
    font-size: 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kzf-btn--filters, .kzf-btn--reset { order: 2; flex: 1 1 calc(50% - 4px); height: 42px; padding: 0; }

  .kzf-row--status, .kzf-row--reeds, .kzf-row--sizes {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: 8px;
    width: 100%; max-width: 100%; min-width: 0;
    overflow: hidden; padding-inline: 0;
  }
  .kzf-row--status > .kzf-pill,
  .kzf-row--reeds  > .kzf-pill,
  .kzf-row--sizes  > .kzf-pill { width: 120px; padding: 0 10px; justify-content: center; flex: 0 0 auto; }

  .kzf-scroll {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    min-width: 0; max-width: 100%; padding-bottom: 2px;
  }
  .kzf-scroll::-webkit-scrollbar { display: none; }
}

/* ==== SEARCH FIELD GEOMETRY ==============================================
   The theme styles input[type=search] with higher specificity than .kzf-search,
   which reset padding-left to 16px and let the icon sit on top of the
   placeholder. Matching that specificity keeps the icon clear of the text and
   centres it against the field rather than the row. */
@media (max-width: 1023px) {
  .kzf-bar .kzf-row--search input.kzf-search {
    height: 44px; padding: 0 16px 0 46px;
    box-sizing: border-box; min-width: 0; max-width: 100%;
  }
  .kzf-bar .kzf-row--search .kzf-search__icon {
    left: 16px; top: 0; height: 44px; transform: none;
    display: flex; align-items: center;
  }
}

/* ==== MOBILE FILTER - FINAL (<=767px) ====================================
   Eight earlier mobile blocks had accumulated, several using !important and
   contradicting one another. This is the single authoritative mobile layout;
   !important appears only where it must outrank those older declarations.
   Desktop (>=768px) is not referenced here at all.                        */
@media (max-width: 767px) {
  .kzf-bar {
    width: calc(100% - 24px); max-width: calc(100% - 24px);
    margin-inline: auto; box-sizing: border-box;
    overflow: hidden; padding: 14px 12px;
  }
  .kzf-row--search { position: relative; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; }
  .kzf-bar .kzf-row--search input.kzf-search {
    order: 1; flex: 1 1 100%;
    width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
    height: 44px; padding: 0 14px 0 42px;
    border: 1px solid #D6C8B2; border-radius: 8px;
    background: rgba(255,255,255,.55);
    /* 16px keeps iOS Safari from zooming the page when the field is focused */
    font-size: 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kzf-bar .kzf-row--search .kzf-search__icon {
    position: absolute; left: 14px; top: 0; height: 44px;
    display: flex; align-items: center; transform: none;
    z-index: 2; pointer-events: none;
  }
  .kzf-btn--filters, .kzf-btn--reset { order: 2; flex: 1 1 calc(50% - 4px); min-width: 0; height: 42px; padding: 0; }

  .kzf-row--status, .kzf-row--reeds, .kzf-row--sizes {
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    align-items: center; gap: 8px;
    width: 100%; max-width: 100%; min-width: 0;
    overflow: hidden !important; padding-inline: 0;
  }
  .kzf-row--status > .kzf-pill,
  .kzf-row--reeds  > .kzf-pill,
  .kzf-row--sizes  > .kzf-pill {
    width: 108px !important; min-width: 108px; max-width: 108px;
    padding: 0 8px; justify-content: center; flex: 0 0 auto;
  }
  .kzf-scroll {
    display: flex; flex-wrap: nowrap !important; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    min-width: 0 !important; max-width: 100% !important; padding-bottom: 2px;
  }
  .kzf-scroll::-webkit-scrollbar { display: none; }
  .kzf-scroll > .kzf-pill { flex: 0 0 auto !important; white-space: nowrap !important; width: auto !important; max-width: none !important; }
}