/* Modal responsive overrides and iOS fixes */

/* Lock background scroll when modal is open */
html.modal-open, body.modal-open{ overflow: hidden !important; height: 100% !important; }

/* General modal scroll container */
.modal-card{ display:flex; flex-direction:column; }
.modal-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; touch-action: pan-y; }

/* Portrait: stack vertically and respect safe areas */
@media (orientation: portrait){
  .modal{ align-items:flex-start; padding-top: max(12px, env(safe-area-inset-top)); }
  .modal-card{ width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
  /* Full-width images without cropping */
  .detail .imgwrap{ overflow:visible !important; }
  .detail .imgwrap > img{ width:100% !important; height:auto !important; object-fit: initial !important; }
  .look-thumb-wrap img{ width:100% !important; height:auto !important; }
  /* One-column stack: Image -> Specs -> Look */
  .detail.no-look{ grid-template-columns: 1fr !important; grid-template-areas: 'img' 'specs' !important; }
  .detail.has-look{ grid-template-columns: 1fr !important; grid-template-areas: 'img' 'specs' 'look' !important; }
  /* Single, general scroll: no inner scroll in specs */
  .specs-list{ overflow: visible !important; max-height: none !important; }
}

/* Fallback for older iOS safe-area variable */
@supports (padding-top: constant(safe-area-inset-top)){
  @media (orientation: portrait){
    .modal{ padding-top: max(12px, constant(safe-area-inset-top)); }
  }
}

/* Make links black inside modal on iOS (avoid default blue) */
.modal a, .modal a:visited, .modal a:active{ color:#000 !important; text-decoration: underline !important; }

/* Portrait refinements: ensure full-width image and single scroll */
@media (orientation: portrait){
  .modal{ justify-content:center; }
  .detail .imgwrap{ height:auto !important; }
  .look-thumb-wrap{ height:auto !important; }
}
@media (orientation: portrait){
  .modal-header{ padding-top: calc(10px + env(safe-area-inset-top)); }
}
@supports (padding-top: constant(safe-area-inset-top)){
  @media (orientation: portrait){
    .modal-header{ padding-top: calc(10px + constant(safe-area-inset-top)); }
  }
}
/* Ensure CTA buttons in modal are black (iOS sometimes tints inline text) */
.modal .swatch-cta { color:#000 !important; -webkit-text-fill-color:#000; text-decoration: none !important; }
.modal .swatch-cta .text, .modal .swatch-cta.info .text { color:#000 !important; -webkit-text-fill-color:#000; text-decoration: underline !important; }
/* Also force any inline svg/icon chevrons to inherit a dark tone if needed */
.modal .swatch-cta .chev{ color:#000 !important; text-decoration: none !important; }
/* Homepage gallery: force link text to black */
.gallery a, .gallery a:visited, .gallery a:active,
.card a, .card a:visited, .card a:active{
  color:#000 !important;
  -webkit-text-fill-color:#000; /* iOS Safari */
  text-decoration: underline !important;
}
/* Homepage gallery/card CTAs: force black text and icons */
.gallery .swatch-cta, .card .swatch-cta { color:#000 !important; -webkit-text-fill-color:#000; text-decoration: none !important; }
.gallery .swatch-cta .text, .card .swatch-cta .text { color:#000 !important; -webkit-text-fill-color:#000; text-decoration: underline !important; }
.gallery .swatch-cta .chev, .card .swatch-cta .chev { color:#000 !important; text-decoration: none !important; }
/* Also cover any anchors inside cards/galleries explicitly */
.gallery a, .gallery a:visited, .gallery a:active,
.card a, .card a:visited, .card a:active{
  color:#000 !important;
  -webkit-text-fill-color:#000;
  text-decoration: underline !important;
}

/* ===== FINAL: Portrait and small-width filters layout (flex 2/2/3) ===== */
@media (orientation: portrait), (max-width: 768px){
  /* Use flex to avoid legacy grid spans; this block wins last in cascade */
  
  #filtersPanel .filters-grid > .filter-block{ flex: 1 1 100% !important; min-width:0 !important; }

  /* Row 1: Search | QS (two equal columns) */
  #filtersPanel .filters-grid > .filter-block.fb-search,
  #filtersPanel .filters-grid > .filter-block.fb-qs{ flex:1 1 calc(50% - 10px) !important; }

  /* Row 2 default: Supplier full width */
  #filtersPanel .filters-grid > .filter-block.fb-supplier{ flex:1 1 100% !important; }

  /* When Catalog is visible: Catalog | Supplier (two equal columns) */
  #filtersPanel .filters-grid > #catalogBlock.show{ display:block !important; flex:1 1 calc(50% - 10px) !important; }
  #filtersPanel .filters-grid > #catalogBlock.show + .fb-supplier{ flex:1 1 calc(50% - 10px) !important; }
  /* Also support JS-added class (for Safari versions without :has support) */
  #filtersPanel.has-catalog .filters-grid > .filter-block.fb-supplier{ flex:1 1 calc(50% - 10px) !important; }

  /* Row 3: Weight | Price | Stock (three equal columns) */
  #filtersPanel .filters-grid > .filter-block.fb-weight,
  #filtersPanel .filters-grid > .filter-block.fb-price,
  #filtersPanel .filters-grid > #stockBlock{ flex:1 1 calc(33.333% - 10px) !important; }

  /* Stack min/max vertically inside each column */
  #filtersPanel .filters-grid .fb-weight .two-selects,
  #filtersPanel .filters-grid .fb-price .two-selects,
  #filtersPanel .filters-grid #stockBlock .two-selects{
    display:grid !important; grid-template-columns:1fr !important; row-gap:6px !important;
  }

  /* Sort tweaks */
  #stockOrderText{ display:none !important; }
  #stockInverse{ display:none !important; }
  #stockArrow{ font-size:0 !important; }
  #stockArrow::before{ content:"\2193" !important; font-size:12px !important; }
  .filters-panel .two-selects .range-sep{ font-size:0 !important; }
  .filters-panel .two-selects .range-sep::before{ content:"\2193"; font-size:12px; }
}

@media (orientation: portrait), (max-width: 768px){
  /* FINAL: force flex layout and neutralize any grid props */
  #filtersPanel .filters-grid{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    grid-auto-flow: unset !important;
  }
  #filtersPanel .filters-grid > .filter-block{ flex: 1 1 100% !important; min-width:0 !important; }
  /* Row 1 */
  #filtersPanel .filters-grid > .filter-block.fb-search,
  #filtersPanel .filters-grid > .filter-block.fb-qs{ flex:1 1 calc(50% - 10px) !important; max-width: calc(60% - 10px) !important; }
  /* Row 2 */
  #filtersPanel .filters-grid > .filter-block.fb-supplier{ flex:1 1 100% !important; max-width: 100% !important; }
  #filtersPanel .filters-grid > #catalogBlock.show{ display:block !important; flex:1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  #filtersPanel .filters-grid > #catalogBlock.show + .fb-supplier{ flex:1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  #filtersPanel.has-catalog .filters-grid > .filter-block.fb-supplier{ flex:1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  /* Row 3 */
  #filtersPanel .filters-grid > .filter-block.fb-weight,
  #filtersPanel .filters-grid > .filter-block.fb-price,
  #filtersPanel .filters-grid > #stockBlock{ flex:1 1 calc(33.333% - 10px) !important; max-width: calc(33.333% - 10px) !important; }
}
/* Ensure Supplier is full width when Catalog is not shown */
@media (orientation: portrait), (max-width: 768px){
  #filtersPanel:not(.has-catalog) .filters-grid > .filter-block.fb-supplier{ flex:1 1 100% !important; max-width:100% !important; }
  #filtersPanel .filters-grid > #catalogBlock:not(.show) + .fb-supplier{ flex:1 1 100% !important; max-width:100% !important; }
}
/* Portrait: force Supplier select to full width overriding base auto widths */
@media (orientation: portrait), (max-width: 768px){
  #filtersPanel #f_supplier,
  #filtersPanel #f_supplier:disabled,
  #filtersPanel .select-wrap--f_supplier,
  #filtersPanel .select-wrap--f_supplier.is-disabled{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    display:block !important;
  }
}
/* Portrait: normalize inner control widths so columns align left/right */
@media (orientation: portrait), (max-width: 768px){
  /* All filter controls fill their column */
  #filtersPanel .filters-grid .filter-block > .select-wrap,
  #filtersPanel .filters-grid .filter-block > select,
  #filtersPanel .filters-grid .filter-block > input{ 
    width:100% !important; 
    max-width:100% !important; 
    min-width:0 !important; 
    box-sizing:border-box !important;
  }
  /* Also ensure selects wrapped inside two-selects stretch to edges */
  #filtersPanel .filters-grid .two-selects .select-wrap,
  #filtersPanel .filters-grid .two-selects select{
    width:100% !important; 
    max-width:100% !important; 
    min-width:0 !important; 
    box-sizing:border-box !important;
  }
  /* Uniform inner gap for stacked pairs */
  #filtersPanel .filters-grid .two-selects{ row-gap:8px !important; column-gap:0 !important; }
  /* Keep the stock arrow and button from affecting width */
  #stockBlock .two-selects{ align-items:stretch !important; }
  #stockBlock .icon-btn.order{ margin-left:0 !important; }
}
/* Portrait: hide separators/arrows in Weight/Price/Stock */
@media (orientation: portrait), (max-width: 768px){
  /* Hide the range separator entirely for Weight and Price */
  #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
  #filtersPanel .filters-grid .fb-price  .two-selects .range-sep{
    display:none !important;
  }
  /* Hide the stock direction arrow entirely */
  #stockBlock #stockArrow{ display:none !important; }
}
/* Portrait: make checkbox filter lists single column */
@media (orientation: portrait), (max-width: 768px){
  body .filters-panel .check-grid .checkboxes{ grid-template-columns: 1fr !important; column-gap: 0 !important; }
}
/* Portrait: ensure checkbox containers never crop on the right */
@media (orientation: portrait), (max-width: 768px){
  #filtersPanel .check-grid .checkboxes,
  #filtersPanel #c_type{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow-x: visible !important; /* avoid right-side clipping */
    margin-right: 0 !important;
  }
}

/* iPhone portrait polish: ensure top filter row wraps cleanly and controls fit */
@media (orientation: portrait){
  /* Force flex layout for consistent wrapping */
  #filtersPanel .filters-grid{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }
  /* Row 1: Search | QS -> equal halves */
  #filtersPanel .filters-grid > .fb-search,
  #filtersPanel .filters-grid > .fb-qs{
    flex:1 1 calc(50% - 5px) !important;
    max-width:calc(50% - 5px) !important;
  }
  /* Make inner controls fill their columns */
  #filtersPanel .filters-grid > .fb-search .input-wrap{ width:100% !important; max-width:100% !important; }
  #filtersPanel #f_search{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
  #filtersPanel .filters-grid > .fb-qs .select-wrap,
  #filtersPanel #f_qs{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  /* Supplier full width when Catalog is not visible */
  #filtersPanel:not(.has-catalog) .filters-grid > .fb-supplier{ flex:1 1 100% !important; max-width:100% !important; }
  #filtersPanel .filters-grid > .fb-supplier .select-wrap,
  #filtersPanel #f_supplier,
  #filtersPanel #f_supplier:disabled{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  /* Ensure dropdown arrows fit inside selects */
  #filtersPanel .filters-grid .select-wrap::after{ right:10px !important; }
  #filtersPanel .filters-grid .select-wrap .select-clear{ right:28px !important; }
  #filtersPanel .filters-grid .select-wrap select,
  #filtersPanel .filters-grid select:not([data-wrapped]){ padding-right:30px !important; box-sizing:border-box !important; }

  /* Row 3: enforce three columns and make inner selects stack vertically */
  #filtersPanel .filters-grid > .fb-weight,
  #filtersPanel .filters-grid > .fb-price,
  #filtersPanel .filters-grid > #stockBlock{
    flex:0 0 calc((100% - 20px)/3) !important; /* 2 gaps of 10px between 3 items */
    max-width:calc((100% - 20px)/3) !important;
  }
  #filtersPanel .filters-grid .fb-weight .two-selects,
  #filtersPanel .filters-grid .fb-price  .two-selects,
  #filtersPanel .filters-grid #stockBlock .two-selects{
    display:grid !important;
    grid-template-columns: 1fr !important;
    row-gap:8px !important;
  }
  #filtersPanel .filters-grid .fb-weight .two-selects select,
  #filtersPanel .filters-grid .fb-price  .two-selects select,
  #filtersPanel .filters-grid #stockBlock .two-selects select{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  /* Keep stock order icon compact */
  #stockBlock .icon-btn.order{ width:26px !important; padding:0 !important; flex:0 0 26px !important; }
  /* Hide stock order text to save space; keep only icon */
  #stockOrderText{ display:none !important; }
  #stockBlock .icon-btn.order{ width:28px !important; padding:0 !important; }
}

/* Portrait high-res (>=1366px width): apply same compact filter layout as 1366x768 */
@media (orientation: portrait) and (min-width: 1366px){
  /* Hide sort label; keep only icon */
  #stockOrderText{ display:none !important; }

  /* Use full-width controls (avoid fixed pixel widths) */
  #filtersPanel .filters-grid > .fb-search .input-wrap{ width:100% !important; max-width:100% !important; }
  #filtersPanel #f_search{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }

  #filtersPanel .select-wrap--f_qs,
  #filtersPanel #f_qs{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  #filtersPanel .select-wrap--f_supplier,
  #filtersPanel .select-wrap--f_supplier.is-disabled,
  #filtersPanel #f_supplier,
  #filtersPanel #f_supplier:disabled{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  #filtersPanel .select-wrap--f_catalog,
  #filtersPanel #f_catalog{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  /* Arrow and padding adjustments to prevent clipping */
  #filtersPanel .select-wrap::after{ right:12px !important; }
  #filtersPanel .select-wrap .select-clear{ right:32px !important; }
  #filtersPanel .select-wrap select{ padding-right:28px !important; }
  #filtersPanel select:not([data-wrapped]){ background-position: right 12px center !important; padding-right:28px !important; }

  /* Min/max selects also full-width to match columns */
  #filtersPanel #f_wmin, #filtersPanel #f_wmax,
  #filtersPanel #f_pmin, #filtersPanel #f_pmax,
  #filtersPanel #f_smin, #filtersPanel #f_smax{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  /* Flex row arrangement: Search|QS, Supplier (or Catalog|Supplier), and 3-column last row */
  #filtersPanel .filters-grid{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:flex-end; }
  #filtersPanel .filters-grid > .fb-search,
  #filtersPanel .filters-grid > .fb-qs{ flex:1 1 calc(50% - 10px) !important; max-width:calc(50% - 10px) !important; }

  #filtersPanel:not(.has-catalog) .filters-grid > .fb-supplier{ flex:1 1 100% !important; max-width:100% !important; }
  #filtersPanel.has-catalog .filters-grid > #catalogBlock{ flex:1 1 calc(50% - 10px) !important; max-width:calc(50% - 10px) !important; }
  #filtersPanel.has-catalog .filters-grid > .fb-supplier{ flex:1 1 calc(50% - 10px) !important; max-width:calc(50% - 10px) !important; }

  #filtersPanel .filters-grid > .fb-weight,
  #filtersPanel .filters-grid > .fb-price,
  #filtersPanel .filters-grid > #stockBlock{ flex:0 0 calc((100% - 20px)/3) !important; max-width:calc((100% - 20px)/3) !important; }

  /* Ensure inner controls fill their columns */
  #filtersPanel .filters-grid > .filter-block .select-wrap,
  #filtersPanel .filters-grid > .filter-block select,
  #filtersPanel .filters-grid > .filter-block input{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  /* Stack min/max vertically inside each column */
  #filtersPanel .filters-grid .fb-weight .two-selects,
  #filtersPanel .filters-grid .fb-price  .two-selects,
  #filtersPanel .filters-grid #stockBlock .two-selects{ display:grid !important; grid-template-columns:1fr !important; row-gap:8px !important; }
}

/* iPhone SE and very small widths: stack all controls to avoid overlap */
@media (max-width: 420px){
  body #filtersPanel .filters-grid{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; }
  /* Row 1 stacked */
  body #filtersPanel .filters-grid > .fb-search,
  body #filtersPanel .filters-grid > .fb-qs{ flex:1 1 100% !important; max-width:100% !important; }
  body #filtersPanel .filters-grid > .fb-search .input-wrap{ width:100% !important; max-width:100% !important; }
  body #filtersPanel #f_search{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
  body #filtersPanel .filters-grid > .fb-qs .select-wrap,
  body #filtersPanel #f_qs{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  /* Supplier full width */
  body #filtersPanel .filters-grid > .fb-supplier{ flex:1 1 100% !important; max-width:100% !important; }
  body #filtersPanel .filters-grid > .fb-supplier .select-wrap,
  body #filtersPanel #f_supplier,
  body #filtersPanel #f_supplier:disabled{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  /* Row 3: keep three columns even on small widths */
  body #filtersPanel .filters-grid > .fb-weight,
  body #filtersPanel .filters-grid > .fb-price,
  body #filtersPanel .filters-grid > #stockBlock{
    flex:0 0 calc((100% - 16px)/3) !important; /* 2 gaps x 8px */
    max-width:calc((100% - 16px)/3) !important;
  }
  body #filtersPanel .filters-grid .two-selects{ display:grid !important; grid-template-columns:1fr !important; row-gap:8px !important; }

  /* Dropdown arrows fit */
  body #filtersPanel .filters-grid .select-wrap::after{ right:8px !important; }
  body #filtersPanel .filters-grid .select-wrap .select-clear{ right:26px !important; }
  body #filtersPanel .filters-grid .select-wrap select,
  body #filtersPanel .filters-grid select:not([data-wrapped]){ padding-right:30px !important; box-sizing:border-box !important; }
}

/* 1299x768: filters sizing + hide sort text */
@media (max-width: 1299px) and (max-height: 768px){
  /* Hide sort label; keep only icon */
  #stockOrderText{ display:none !important; }

  /* Search width: fixed 180px */
  #filtersPanel #f_search{ width:180px !important; max-width:180px !important; box-sizing:border-box !important; }
  #filtersPanel .filters-grid > .fb-search .input-wrap{ width:auto !important; max-width:none !important; }

  /* QS width: fixed 110px */
  #filtersPanel .select-wrap--f_qs,
  #filtersPanel #f_qs{
    width:110px !important;
    max-width:110px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Supplier width: fixed 120px */
  #filtersPanel .select-wrap--f_supplier,
  #filtersPanel .select-wrap--f_supplier.is-disabled,
  #filtersPanel #f_supplier,
  #filtersPanel #f_supplier:disabled{
    width:120px !important;
    max-width:120px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Account for dropdown arrow: tighten arrow position and padding */
  #filtersPanel .select-wrap::after{ right:12px !important; }
  #filtersPanel .select-wrap .select-clear{ right:32px !important; }
  #filtersPanel .select-wrap select{ padding-right:28px !important; }
  #filtersPanel select:not([data-wrapped]){ background-position: right 12px center !important; padding-right:28px !important; }

  /* Reduce min/max widths to avoid overflow */
  #filtersPanel #f_wmin, #filtersPanel #f_wmax,
  #filtersPanel #f_pmin, #filtersPanel #f_pmax{
    width:80px !important;
    min-width:0 !important;
  }

  /* Labels: keep compact spacing so controls have room */
  #filtersPanel .filters-grid > .filter-block > label,
  #filtersPanel .filters-grid > .filter-block > .filter-label{ margin-bottom:6px !important; }

  /* Ensure wrappers cannot exceed their columns */
  #filtersPanel .filters-grid .select-wrap{ max-width:100% !important; box-sizing:border-box !important; }

  /* Catalog width: fixed 100px */
  #filtersPanel .select-wrap--f_catalog,
  #filtersPanel #f_catalog{
    width:100px !important;
    max-width:100px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Global font-size reduction by 2px across the page */
  html, body{ font-size: 12px !important; }
}
@media (max-width: 1710px) and (min-width: 1366px){
  #stockOrderText{ display:none !important; }
  #filtersPanel #f_search{ width:180px !important; max-width:180px !important; box-sizing:border-box !important; }
  #filtersPanel .filters-grid > .fb-search .input-wrap{ width:auto !important; max-width:none !important; }
  #filtersPanel .select-wrap--f_qs,
  #filtersPanel #f_qs{ width:110px !important; max-width:110px !important; min-width:0 !important; box-sizing:border-box !important; }
  #filtersPanel .select-wrap--f_supplier,
  #filtersPanel .select-wrap--f_supplier.is-disabled,
  #filtersPanel #f_supplier,
  #filtersPanel #f_supplier:disabled{ width:120px !important; max-width:120px !important; min-width:0 !important; box-sizing:border-box !important; }
  #filtersPanel .select-wrap--f_catalog,
  #filtersPanel #f_catalog{ width:100px !important; max-width:100px !important; min-width:0 !important; box-sizing:border-box !important; }
  #filtersPanel .select-wrap::after{ right:12px !important; }
  #filtersPanel .select-wrap .select-clear{ right:32px !important; }
  #filtersPanel .select-wrap select{ padding-right:28px !important; }
  #filtersPanel select:not([data-wrapped]){ background-position: right 12px center !important; padding-right:28px !important; }
  #filtersPanel #f_wmin, #filtersPanel #f_wmax,
  #filtersPanel #f_pmin, #filtersPanel #f_pmax,
  #filtersPanel #f_smin, #filtersPanel #f_smax{ width:80px !important; min-width:0 !important; }
  #filtersPanel .filters-grid > .filter-block > label,
  #filtersPanel .filters-grid > .filter-block > .filter-label{ margin-bottom:6px !important; }
  #filtersPanel .filters-grid .select-wrap{ max-width:100% !important; box-sizing:border-box !important; }
  html, body{ font-size: 12px !important; }
}

/* Portrait high-res (>=1366px width): reuse 1366x768 filter layout */
@media (orientation: portrait) and (min-width: 1366px){
  /* Hide sort label; keep only icon */
  #stockOrderText{ display:none !important; }

  /* Search width: fixed 180px */
  #filtersPanel #f_search{ width:180px !important; max-width:180px !important; box-sizing:border-box !important; }
  #filtersPanel .filters-grid > .fb-search .input-wrap{ width:auto !important; max-width:none !important; }

  /* QS width: fixed 110px */
  #filtersPanel .select-wrap--f_qs,
  #filtersPanel #f_qs{
    width:110px !important;
    max-width:110px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Supplier width: fixed 120px */
  #filtersPanel .select-wrap--f_supplier,
  #filtersPanel .select-wrap--f_supplier.is-disabled,
  #filtersPanel #f_supplier,
  #filtersPanel #f_supplier:disabled{
    width:120px !important;
    max-width:120px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Catalog width: fixed 100px */
  #filtersPanel .select-wrap--f_catalog,
  #filtersPanel #f_catalog{
    width:100px !important;
    max-width:100px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Account for dropdown arrow: tighten arrow position and padding */
  #filtersPanel .select-wrap::after{ right:12px !important; }
  #filtersPanel .select-wrap .select-clear{ right:32px !important; }
  #filtersPanel .select-wrap select{ padding-right:28px !important; }
  #filtersPanel select:not([data-wrapped]){ background-position: right 12px center !important; padding-right:28px !important; }

  /* Reduce min/max widths to avoid overflow */
  #filtersPanel #f_wmin, #filtersPanel #f_wmax,
  #filtersPanel #f_pmin, #filtersPanel #f_pmax{
    width:80px !important;
    min-width:0 !important;
  }

  /* Labels: keep compact spacing so controls have room */
  #filtersPanel .filters-grid > .filter-block > label,
  #filtersPanel .filters-grid > .filter-block > .filter-label{ margin-bottom:6px !important; }

  /* Ensure wrappers cannot exceed their columns */
  #filtersPanel .filters-grid .select-wrap{ max-width:100% !important; box-sizing:border-box !important; }

  /* Slight font-size reduction to mirror the compact look */
  html, body{ font-size: 12px !important; }
}




/* ===== Final landscape 1366�1710 layout overrides (wins last) ===== */
/* Landscape 1300-1359px: mimic 1366 desktop proportions */
@media screen and (min-width: 1300px) and (max-width: 1359px){
  #stockOrderText{ display:none !important; }

  #filtersPanel .filters-grid{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    align-items:flex-end !important;
  }

  #filtersPanel .filters-grid > .fb-search,
  #filtersPanel .filters-grid > .fb-qs{
    flex:1 1 calc(50% - 10px) !important;
    max-width:calc(50% - 10px) !important;
  }
  #filtersPanel .filters-grid > .fb-search .input-wrap{ width:auto !important; max-width:none !important; }
  #filtersPanel #f_search{ width:180px !important; max-width:180px !important; box-sizing:border-box !important; }
  #filtersPanel .select-wrap--f_qs,
  #filtersPanel #f_qs{ width:110px !important; max-width:110px !important; min-width:0 !important; box-sizing:border-box !important; }

  #filtersPanel:not(.has-catalog) .filters-grid > .fb-supplier{ flex:1 1 100% !important; max-width:100% !important; }
  #filtersPanel .filters-grid > .fb-supplier .select-wrap,
  #filtersPanel #f_supplier,
  #filtersPanel #f_supplier:disabled{ width:120px !important; max-width:120px !important; min-width:0 !important; box-sizing:border-box !important; }

  #filtersPanel.has-catalog .filters-grid > #catalogBlock{ display:block !important; flex:1 1 calc(50% - 10px) !important; max-width:calc(50% - 10px) !important; }
  #filtersPanel.has-catalog .filters-grid > .fb-supplier{ flex:1 1 calc(50% - 10px) !important; max-width:calc(50% - 10px) !important; }

  #filtersPanel .filters-grid > .fb-weight,
  #filtersPanel .filters-grid > .fb-price,
  #filtersPanel .filters-grid > #stockBlock{
    flex:0 0 calc((100% - 20px)/3) !important;
    max-width:calc((100% - 20px)/3) !important;
  }
  #filtersPanel .filters-grid .fb-weight .two-selects,
  #filtersPanel .filters-grid .fb-price  .two-selects,
  #filtersPanel .filters-grid #stockBlock .two-selects{
    display:flex !important;
    column-gap:8px !important;
    row-gap:0 !important;
    align-items:center !important;
  }
  #filtersPanel .filters-grid .fb-weight .two-selects select,
  #filtersPanel .filters-grid .fb-price  .two-selects select,
  #filtersPanel .filters-grid #stockBlock .two-selects select{
    width:100px !important;
    max-width:100px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  #filtersPanel .select-wrap::after{ right:12px !important; }
  #filtersPanel .select-wrap .select-clear{ right:32px !important; }
  #filtersPanel .select-wrap select{ padding-right:28px !important; }
  #filtersPanel select:not([data-wrapped]){ background-position: right 12px center !important; padding-right:28px !important; }

  #filtersPanel #f_wmin, #filtersPanel #f_wmax,
  #filtersPanel #f_pmin, #filtersPanel #f_pmax,
  #filtersPanel #f_smin, #filtersPanel #f_smax{ width:80px !important; min-width:0 !important; }
}

@media screen and (min-width: 1366px) and (max-width: 1710px) and (orientation: landscape){
  /* Hide stock order text label to save space */
  #stockOrderText{ display:none !important; }
}


/* Portrait =1366px: restore non-phone behavior to match 1366x768 layout */
@media (orientation: portrait) and (min-width: 1366px){
  /* Show stock arrow and range separator */
  #stockBlock #stockArrow{ display:inline-flex !important; }
  /* Specifically undo earlier portrait-only hides for Weight/Price separators */
  #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
  #filtersPanel .filters-grid .fb-price  .two-selects .range-sep{ display:inline-block !important; font-size:12px !important; }
  #filtersPanel .filters-grid .fb-weight .two-selects .range-sep::before,
  #filtersPanel .filters-grid .fb-price  .two-selects .range-sep::before{ content:none !important; }
  /* Keep only the icon label hidden as on 1366x768 */
  #stockOrderText{ display:none !important; }
  /* Ensure order icon is visible */
  #stockInverse{ display:inline-flex !important; }

  /* Restore multi-column checkbox lists (same as desktop baseline) */
  body .filters-panel .check-grid .checkboxes,
  body .filters-panel #c_type,
  #filtersPanel .check-grid .checkboxes,
  #filtersPanel #c_type{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    column-gap:12px !important;
  }
  /* One row, no wrapping: same as 1366x768 landscape */
  #filtersPanel .filters-grid{ display:flex !important; flex-wrap: wrap !important; gap:10px !important; align-items:flex-end !important; }
  #filtersPanel .filters-grid > .filter-block{ flex:1 1 auto !important; min-width:0 !important; }
  /* Keep pairs horizontal, not stacked */
  #filtersPanel .filters-grid .fb-weight .two-selects,
  #filtersPanel .filters-grid .fb-price  .two-selects,
  #filtersPanel .filters-grid #stockBlock .two-selects{ display:flex !important; column-gap:8px !important; row-gap:0 !important; grid-template-columns:none !important; align-items:center !important; }

  /* Fixed control widths as on 1366x768 */
  #filtersPanel #f_search{ width:180px !important; max-width:180px !important; box-sizing:border-box !important; }
  #filtersPanel .filters-grid > .fb-search .input-wrap{ width:auto !important; max-width:none !important; }
  #filtersPanel .select-wrap--f_qs,
  #filtersPanel #f_qs{ width:110px !important; max-width:110px !important; min-width:0 !important; box-sizing:border-box !important; }
  #filtersPanel .select-wrap--f_supplier,
  #filtersPanel .select-wrap--f_supplier.is-disabled,
  #filtersPanel #f_supplier,
  #filtersPanel #f_supplier:disabled{ width:120px !important; max-width:120px !important; min-width:0 !important; box-sizing:border-box !important; }
  #filtersPanel .select-wrap--f_catalog,
  #filtersPanel #f_catalog{ width:100px !important; max-width:100px !important; min-width:0 !important; box-sizing:border-box !important; }
  /* Tighten arrow & padding */
  #filtersPanel .select-wrap::after{ right:12px !important; }
  #filtersPanel .select-wrap .select-clear{ right:32px !important; }
  #filtersPanel .select-wrap select{ padding-right:28px !important; }
  #filtersPanel select:not([data-wrapped]){ background-position: right 12px center !important; padding-right:28px !important; }
  /* Min/max widths */
  #filtersPanel #f_wmin, #filtersPanel #f_wmax,
  #filtersPanel #f_pmin, #filtersPanel #f_pmax,
  #filtersPanel #f_smin, #filtersPanel #f_smax{ width:80px !important; min-width:0 !important; }
  /* Compact labels & wrapper max width */
  #filtersPanel .filters-grid > .filter-block > label,
  #filtersPanel .filters-grid > .filter-block > .filter-label{ margin-bottom:6px !important; }
  #filtersPanel .filters-grid .select-wrap{ max-width:100% !important; box-sizing:border-box !important; }
  /* Slight font-size reduction to mirror compact look */
  html, body{ font-size: 12px !important; }
}

/* Near-square small widths (e.g., 769x768): reuse phone portrait layout */
@media screen and (max-width: 820px) and (min-width: 760px){
  /* Use the same 2/2/3 flex layout as small portrait */
  #filtersPanel .filters-grid{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; }
  #filtersPanel .filters-grid > .filter-block{ flex: 1 1 100% !important; min-width:0 !important; }
  /* Row 1: Search | QS */
  #filtersPanel .filters-grid > .filter-block.fb-search,
  #filtersPanel .filters-grid > .filter-block.fb-qs{ flex:1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  /* Row 2: Catalog | Supplier (when catalog visible); otherwise Supplier full width */
  #filtersPanel .filters-grid > .filter-block.fb-supplier{ flex:1 1 100% !important; max-width: 100% !important; }
  #filtersPanel .filters-grid > #catalogBlock.show{ display:block !important; flex:1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  #filtersPanel .filters-grid > #catalogBlock.show + .fb-supplier{ flex:1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  #filtersPanel.has-catalog .filters-grid > .filter-block.fb-supplier{ flex:1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  /* Row 3: Weight | Price | Stock */
  #filtersPanel .filters-grid > .filter-block.fb-weight,
  #filtersPanel .filters-grid > .filter-block.fb-price,
  #filtersPanel .filters-grid > #stockBlock{ flex:1 1 calc(33.333% - 10px) !important; max-width: calc(33.333% - 10px) !important; }
  /* Stack min/max selects vertically for compactness */
  #filtersPanel .filters-grid .fb-weight .two-selects,
  #filtersPanel .filters-grid .fb-price  .two-selects,
  #filtersPanel .filters-grid #stockBlock .two-selects{ display:grid !important; grid-template-columns: 1fr !important; row-gap:8px !important; }
  /* Make inner controls fill columns */
  #filtersPanel .filters-grid .filter-block > .select-wrap,
  #filtersPanel .filters-grid .filter-block > select,
  #filtersPanel .filters-grid .filter-block > input{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }
  #filtersPanel .filters-grid .two-selects .select-wrap,
  #filtersPanel .filters-grid .two-selects select{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }
  #filtersPanel .filters-grid .two-selects{ row-gap:8px !important; column-gap:0 !important; }
  /* Hide range separators and stock arrow to match phone portrait */
  #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
  #filtersPanel .filters-grid .fb-price  .two-selects .range-sep{ display:none !important; }
  #stockBlock #stockArrow{ display:none !important; }
  /* Checkbox lists: single column */
  body .filters-panel .check-grid .checkboxes{ grid-template-columns: 1fr !important; column-gap: 0 !important; }
  #filtersPanel .check-grid .checkboxes,
  #filtersPanel #c_type{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; overflow-x: visible !important; margin-right: 0 !important; }
}

/* Near-square medium widths (e.g., ~966x948): reuse phone portrait layout */
@media screen and (min-width: 900px) and (max-width: 1000px) and (max-aspect-ratio: 6/5){
  /* Use the same 2/2/3 flex layout as small portrait */
  #filtersPanel .filters-grid{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; }
  #filtersPanel .filters-grid > .filter-block{ flex: 1 1 100% !important; min-width:0 !important; }
  /* Row 1: Search | QS */
  #filtersPanel .filters-grid > .filter-block.fb-search,
  #filtersPanel .filters-grid > .filter-block.fb-qs{ flex:1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  /* Row 2: Catalog | Supplier (when catalog visible); otherwise Supplier full width */
  #filtersPanel .filters-grid > .filter-block.fb-supplier{ flex:1 1 100% !important; max-width: 100% !important; }
  #filtersPanel .filters-grid > #catalogBlock.show{ display:block !important; flex:1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  #filtersPanel .filters-grid > #catalogBlock.show + .fb-supplier{ flex:1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  #filtersPanel.has-catalog .filters-grid > .filter-block.fb-supplier{ flex:1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
  /* Row 3: Weight | Price | Stock */
  #filtersPanel .filters-grid > .filter-block.fb-weight,
  #filtersPanel .filters-grid > .filter-block.fb-price,
  #filtersPanel .filters-grid > #stockBlock{ flex:1 1 calc(33.333% - 10px) !important; max-width: calc(33.333% - 10px) !important; }
  /* Stack min/max selects vertically for compactness */
  #filtersPanel .filters-grid .fb-weight .two-selects,
  #filtersPanel .filters-grid .fb-price  .two-selects,
  #filtersPanel .filters-grid #stockBlock .two-selects{ display:grid !important; grid-template-columns: 1fr !important; row-gap:8px !important; }
  /* Make inner controls fill columns */
  #filtersPanel .filters-grid .filter-block > .select-wrap,
  #filtersPanel .filters-grid .filter-block > select,
  #filtersPanel .filters-grid .filter-block > input{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }
  #filtersPanel .filters-grid .two-selects .select-wrap,
  #filtersPanel .filters-grid .two-selects select{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }
  #filtersPanel .filters-grid .two-selects{ row-gap:8px !important; column-gap:0 !important; }
  /* Hide range separators and stock arrow to match phone portrait */
  #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
  #filtersPanel .filters-grid .fb-price  .two-selects .range-sep{ display:none !important; }
  #stockBlock #stockArrow{ display:none !important; }
  /* Checkbox lists: single column */
  body .filters-panel .check-grid .checkboxes{ grid-template-columns: 1fr !important; column-gap: 0 !important; }
  #filtersPanel .check-grid .checkboxes,
  #filtersPanel #c_type{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; overflow-x: visible !important; margin-right: 0 !important; }
}

/* Export modal: portrait/iOS polish for scrolling and safe areas */
@media (orientation: portrait){
  .export-modal{ align-items:flex-start; padding-top: max(12px, env(safe-area-inset-top)); }
  .export-card{ width:90vw; max-width: calc(100vw - 20px); }
  .export-body{ min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; touch-action: pan-y !important; }
}
@supports (padding-top: constant(safe-area-inset-top)){
  @media (orientation: portrait){
    .export-modal{ padding-top: max(12px, constant(safe-area-inset-top)); }
  }
}






@media (max-width: 480px){
  .card .info-qr-qr{
    display:none;
  }
}


.card .info-qr-wrap{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  align-items:center;
}
.card .info-qr-text{
  flex:1 1 160px;
  min-width:0;
}
.card .info-qr-qr{
  flex:0 0 auto;
  width:72px;
  max-width:72px;
}
.card .info-qr-qr .fabric-qr{
  width:100%;
  max-width:100%;
}
.card .info-qr-qr .fabric-qr canvas,
.card .info-qr-qr .fabric-qr img{
  width:100%;
  height:auto;
  display:block;
}

/* Square / short landscape layout */
@media (max-width: 1400px) and (max-aspect-ratio: 8/5){
  #filtersPanel .filters-grid{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    align-items:flex-start !important;
  }
  #filtersPanel .filters-grid > .filter-block{
    flex:1 1 100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }
  #filtersPanel .filters-grid .filter-block > .select-wrap,
  #filtersPanel .filters-grid .filter-block > select,
  #filtersPanel .filters-grid .filter-block > input,
  #filtersPanel #f_search,
  #filtersPanel #f_qs,
  #filtersPanel #f_supplier,
  #filtersPanel #f_catalog,
  #filtersPanel #f_wmin,
  #filtersPanel #f_wmax,
  #filtersPanel #f_pmin,
  #filtersPanel #f_pmax,
  #filtersPanel #f_smin,
  #filtersPanel #f_smax{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  #filtersPanel .select-wrap--f_qs,
  #filtersPanel .select-wrap--f_supplier,
  #filtersPanel .select-wrap--f_catalog,
  #filtersPanel .select-wrap--f_wmin,
  #filtersPanel .select-wrap--f_wmax,
  #filtersPanel .select-wrap--f_pmin,
  #filtersPanel .select-wrap--f_pmax,
  #filtersPanel .select-wrap--f_smin,
  #filtersPanel .select-wrap--f_smax{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:block !important;
  }
  #filtersPanel .filters-grid .two-selects{
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px !important;
    width:100% !important;
    align-items:start !important;
  }
  #filtersPanel .filters-grid .two-selects > *,
  #filtersPanel .filters-grid .two-selects select,
  #filtersPanel .filters-grid .two-selects input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:block !important;
    box-sizing:border-box !important;
  }
  #filtersPanel .filters-grid > .fb-search .input-wrap{
    width:100% !important;
    max-width:100% !important;
  }
  #filtersPanel #f_search{ width:100% !important; max-width:100% !important; }
  #stockBlock #stockArrow{ display:none !important; }
  #stockBlock .two-selects{
    align-items:stretch !important;
  }
  #stockBlock .two-selects .icon-btn.order{
    width:100% !important;
    justify-content:center !important;
  }
}

body.is-portrait #filtersPanel .filters-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:flex-start !important;
}
body.is-portrait #filtersPanel .filters-grid > .filter-block{
  flex:1 1 100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
body.is-portrait #filtersPanel .filters-grid > .filter-block.fb-search,
body.is-portrait #filtersPanel .filters-grid > .filter-block.fb-qs{
  flex:1 1 calc(50% - 10px) !important;
}
body.is-portrait #filtersPanel .filters-grid > .filter-block.fb-supplier{
  flex:1 1 100% !important;
  max-width:100% !important;
}
body.is-portrait #filtersPanel .filters-grid > #catalogBlock.show{
  display:block !important;
  flex:1 1 calc(50% - 10px) !important;
  max-width:calc(50% - 10px) !important;
}
body.is-portrait #filtersPanel .filters-grid > #catalogBlock.show + .fb-supplier,
body.is-portrait #filtersPanel.has-catalog .filters-grid > .filter-block.fb-supplier{
  flex:1 1 calc(50% - 10px) !important;
  max-width:calc(50% - 10px) !important;
}
body.is-portrait #filtersPanel .filters-grid > .filter-block.fb-weight,
body.is-portrait #filtersPanel .filters-grid > .filter-block.fb-price,
body.is-portrait #filtersPanel .filters-grid > #stockBlock{
  flex:1 1 calc(33.333% - 10px) !important;
  max-width:calc(33.333% - 10px) !important;
}
body.is-portrait #filtersPanel:not(.has-catalog) .filters-grid > .filter-block.fb-supplier,
body.is-portrait #filtersPanel .filters-grid > #catalogBlock:not(.show) + .fb-supplier{
  flex:1 1 100% !important;
  max-width:100% !important;
}
body.is-portrait #filtersPanel #f_supplier,
body.is-portrait #filtersPanel #f_supplier:disabled,
body.is-portrait #filtersPanel .select-wrap--f_supplier,
body.is-portrait #filtersPanel .select-wrap--f_supplier.is-disabled{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  display:block !important;
}
body.is-portrait #filtersPanel .filters-grid .filter-block > .select-wrap,
body.is-portrait #filtersPanel .filters-grid .filter-block > select,
body.is-portrait #filtersPanel .filters-grid .filter-block > input{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
body.is-portrait #filtersPanel .filters-grid .two-selects .select-wrap,
body.is-portrait #filtersPanel .filters-grid .two-selects select{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
body.is-portrait #filtersPanel .filters-grid .two-selects{
  display:grid !important;
  grid-template-columns:1fr !important;
  row-gap:8px !important;
  column-gap:0 !important;
  width:100% !important;
}
body.is-portrait #filtersPanel .filters-grid .fb-weight .two-selects,
body.is-portrait #filtersPanel .filters-grid .fb-price .two-selects,
body.is-portrait #filtersPanel .filters-grid #stockBlock .two-selects{
  align-items:stretch !important;
}
body.is-portrait #stockBlock .two-selects .icon-btn.order{
  width:100% !important;
  margin-left:0 !important;
  justify-content:center !important;
}
body.is-portrait #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
body.is-portrait #filtersPanel .filters-grid .fb-price .two-selects .range-sep{
  display:none !important;
}
body.is-portrait #stockBlock #stockArrow{
  display:none !important;
}
body.is-portrait .filters-panel .check-grid .checkboxes{
  grid-template-columns:1fr !important;
  column-gap:0 !important;
}
body.is-portrait #filtersPanel .check-grid .checkboxes,
body.is-portrait #filtersPanel #c_type{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow-x:visible !important;
  margin-right:0 !important;
}
@media screen and (max-width: 1100px){
  #filtersPanel .filters-grid{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    align-items:flex-start !important;
  }
  #filtersPanel .filters-grid > .filter-block{
    flex:1 1 100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  #filtersPanel .filters-grid > .filter-block.fb-search,
  #filtersPanel .filters-grid > .filter-block.fb-qs{
    flex:1 1 calc(50% - 10px) !important;
  }
  #filtersPanel .filters-grid > .filter-block.fb-supplier{
    flex:1 1 100% !important;
    max-width:100% !important;
  }
  #filtersPanel .filters-grid > #catalogBlock.show{
    display:block !important;
    flex:1 1 calc(50% - 10px) !important;
    max-width:calc(50% - 10px) !important;
  }
  #filtersPanel .filters-grid > #catalogBlock.show + .fb-supplier,
  #filtersPanel.has-catalog .filters-grid > .filter-block.fb-supplier{
    flex:1 1 calc(50% - 10px) !important;
    max-width:calc(50% - 10px) !important;
  }
  #filtersPanel .filters-grid > .filter-block.fb-weight,
  #filtersPanel .filters-grid > .filter-block.fb-price,
  #filtersPanel .filters-grid > #stockBlock{
    flex:1 1 calc(33.333% - 10px) !important;
    max-width:calc(33.333% - 10px) !important;
  }
  #filtersPanel .filters-grid .filter-block > .select-wrap,
  #filtersPanel .filters-grid .filter-block > select,
  #filtersPanel .filters-grid .filter-block > input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  #filtersPanel .filters-grid .two-selects{
    display:grid !important;
    grid-template-columns:1fr !important;
    row-gap:8px !important;
    column-gap:0 !important;
    width:100% !important;
  }
  #filtersPanel .filters-grid .two-selects .select-wrap,
  #filtersPanel .filters-grid .two-selects select,
  #filtersPanel .filters-grid .two-selects input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
  #filtersPanel .filters-grid .fb-price .two-selects .range-sep{
    display:none !important;
  }
  #stockBlock #stockArrow{
    display:none !important;
  }
}
@media (orientation: portrait) and (min-width: 1600px){
  body:not(.is-portrait) #filtersPanel .filters-grid{
    display:grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap:15px !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid .filter-block > .select-wrap,
  body:not(.is-portrait) #filtersPanel .filters-grid .filter-block > select,
  body:not(.is-portrait) #filtersPanel .filters-grid .filter-block > input{
    width:auto !important;
    max-width:none !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid .two-selects{
    display:flex !important;
    column-gap:8px !important;
    row-gap:0 !important;
    width:auto !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid .two-selects .select-wrap,
  body:not(.is-portrait) #filtersPanel .filters-grid .two-selects select,
  body:not(.is-portrait) #filtersPanel .filters-grid .two-selects input{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
  body:not(.is-portrait) #filtersPanel .filters-grid .fb-price .two-selects .range-sep{
    display:inline-block !important;
  }
  body:not(.is-portrait) #stockBlock #stockArrow{
    display:flex !important;
  }
}

@media screen and (max-width: 1280px) and (min-width: 900px){
  body:not(.is-portrait) #filtersPanel .filters-grid{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    align-items:flex-start !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block{
    flex:1 1 100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block.fb-search,
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block.fb-qs{
    flex:1 1 calc(50% - 10px) !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block.fb-supplier{
    flex:1 1 100% !important;
    max-width:100% !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid > #catalogBlock.show{
    display:block !important;
    flex:1 1 calc(50% - 10px) !important;
    max-width:calc(50% - 10px) !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid > #catalogBlock.show + .fb-supplier,
  body:not(.is-portrait) #filtersPanel.has-catalog .filters-grid > .filter-block.fb-supplier{
    flex:1 1 calc(50% - 10px) !important;
    max-width:calc(50% - 10px) !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block.fb-weight,
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block.fb-price,
  body:not(.is-portrait) #filtersPanel .filters-grid > #stockBlock{
    flex:1 1 calc(33.333% - 10px) !important;
    max-width:calc(33.333% - 10px) !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid .filter-block > .select-wrap,
  body:not(.is-portrait) #filtersPanel .filters-grid .filter-block > select,
  body:not(.is-portrait) #filtersPanel .filters-grid .filter-block > input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid .two-selects{
    display:grid !important;
    grid-template-columns:1fr !important;
    row-gap:8px !important;
    column-gap:0 !important;
    width:100% !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid .two-selects .select-wrap,
  body:not(.is-portrait) #filtersPanel .filters-grid .two-selects select,
  body:not(.is-portrait) #filtersPanel .filters-grid .two-selects input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
  body:not(.is-portrait) #filtersPanel .filters-grid .fb-price .two-selects .range-sep{
    display:none !important;
  }
  body:not(.is-portrait) #stockBlock #stockArrow{
    display:none !important;
  }
}

/* Fix: ensure full-width controls at ~1117x736 (small laptop landscape)
   The earlier block set fixed pixel widths which caused inputs/selects
   to render narrower than their columns. Force 100% widths here. */
@media (max-width: 1299px) and (max-height: 768px){
  /* Make wrappers and plain controls fill their column */
  #filtersPanel .filters-grid .filter-block > .select-wrap,
  #filtersPanel .filters-grid .filter-block > select,
  #filtersPanel .filters-grid .filter-block > input,
  #filtersPanel .filters-grid .two-selects .select-wrap,
  #filtersPanel .filters-grid .two-selects select,
  #filtersPanel .filters-grid .two-selects input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  /* Search input wrapper */
  #filtersPanel .filters-grid > .fb-search .input-wrap{
    width:100% !important;
    max-width:100% !important;
  }
  /* Beat style.css desktop rule that forces auto width on pairs */
  #filtersPanel .filters-grid > .filter-block:not(.fb-search).fb-weight .two-selects,
  #filtersPanel .filters-grid > .filter-block:not(.fb-search).fb-price  .two-selects,
  #filtersPanel .filters-grid > #stockBlock .two-selects{
    width:100% !important;
    max-width:100% !important;
  }
  #filtersPanel .filters-grid > .filter-block:not(.fb-search).fb-weight .two-selects select,
  #filtersPanel .filters-grid > .filter-block:not(.fb-search).fb-price  .two-selects select,
  #filtersPanel .filters-grid > #stockBlock .two-selects input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  /* Explicit IDs to override older fixed widths */
  #filtersPanel #f_search,
  #filtersPanel #f_qs,
  #filtersPanel #f_supplier,
  #filtersPanel #f_catalog,
  #filtersPanel #f_wmin, #filtersPanel #f_wmax,
  #filtersPanel #f_pmin, #filtersPanel #f_pmax,
  #filtersPanel #f_smin, #filtersPanel #f_smax{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  /* Higher-specificity duplicates to beat earlier rules using body #filtersPanel ... */
  html body #filtersPanel #f_search,
  html body #filtersPanel #f_qs,
  html body #filtersPanel #f_supplier,
  html body #filtersPanel #f_catalog,
  html body #filtersPanel #f_wmin, html body #filtersPanel #f_wmax,
  html body #filtersPanel #f_pmin, html body #filtersPanel #f_pmax,
  html body #filtersPanel #f_smin, html body #filtersPanel #f_smax{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  /* Also cover select wrappers that previously had fixed widths */
  #filtersPanel .select-wrap--f_qs,
  #filtersPanel .select-wrap--f_supplier,
  #filtersPanel .select-wrap--f_supplier.is-disabled,
  #filtersPanel .select-wrap--f_catalog{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    display:block !important;
  }
  html body #filtersPanel .select-wrap--f_qs,
  html body #filtersPanel .select-wrap--f_supplier,
  html body #filtersPanel .select-wrap--f_supplier.is-disabled,
  html body #filtersPanel .select-wrap--f_catalog{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    display:block !important;
  }
}

/* Portrait layout baseline (applies at any width when body.has .is-portrait).
   Ensures stable 2/2/3 arrangement similar to 1366x768. */
body.is-portrait #filtersPanel .filters-grid,
#filtersPanel.is-portrait .filters-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:flex-end !important;
}
body.is-portrait #filtersPanel .filters-grid > .filter-block,
#filtersPanel.is-portrait .filters-grid > .filter-block{
  flex:1 1 100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
/* Row 1: Search | QS */
body.is-portrait #filtersPanel .filters-grid > .filter-block.fb-search,
body.is-portrait #filtersPanel .filters-grid > .filter-block.fb-qs,
#filtersPanel.is-portrait .filters-grid > .filter-block.fb-search,
#filtersPanel.is-portrait .filters-grid > .filter-block.fb-qs{
  flex:1 1 calc(50% - 10px) !important;
  max-width:calc(50% - 10px) !important;
}
/* Row 2: Supplier alone, or Catalog | Supplier when catalog visible */
body.is-portrait #filtersPanel:not(.has-catalog) .filters-grid > .filter-block.fb-supplier,
#filtersPanel.is-portrait:not(.has-catalog) .filters-grid > .filter-block.fb-supplier{
  flex:1 1 100% !important;
  max-width:100% !important;
}
body.is-portrait #filtersPanel.has-catalog .filters-grid > #catalogBlock,
#filtersPanel.is-portrait.has-catalog .filters-grid > #catalogBlock{
  display:block !important;
  flex:1 1 calc(50% - 10px) !important;
  max-width:calc(50% - 10px) !important;
}
body.is-portrait #filtersPanel.has-catalog .filters-grid > .filter-block.fb-supplier,
#filtersPanel.is-portrait.has-catalog .filters-grid > .filter-block.fb-supplier{
  flex:1 1 calc(50% - 10px) !important;
  max-width:calc(50% - 10px) !important;
}
/* Row 3: Weight | Price | Stock */
body.is-portrait #filtersPanel .filters-grid > .filter-block.fb-weight,
body.is-portrait #filtersPanel .filters-grid > .filter-block.fb-price,
body.is-portrait #filtersPanel .filters-grid > #stockBlock,
#filtersPanel.is-portrait .filters-grid > .filter-block.fb-weight,
#filtersPanel.is-portrait .filters-grid > .filter-block.fb-price,
#filtersPanel.is-portrait .filters-grid > #stockBlock{
  flex:0 0 calc((100% - 20px)/3) !important; /* 2 gaps x 10px */
  max-width:calc((100% - 20px)/3) !important;
}
/* Inner controls fill the column */
body.is-portrait #filtersPanel .filters-grid .filter-block > .select-wrap,
body.is-portrait #filtersPanel .filters-grid .filter-block > select,
body.is-portrait #filtersPanel .filters-grid .filter-block > input,
#filtersPanel.is-portrait .filters-grid .filter-block > .select-wrap,
#filtersPanel.is-portrait .filters-grid .filter-block > select,
#filtersPanel.is-portrait .filters-grid .filter-block > input{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
/* Keep min/max pairs inline with gap inside columns */
body.is-portrait #filtersPanel .filters-grid .two-selects,
#filtersPanel.is-portrait .filters-grid .two-selects{
  display:flex !important;
  column-gap:8px !important;
  row-gap:0 !important;
  width:100% !important;
  align-items:center !important;
}
body.is-portrait #filtersPanel .filters-grid .two-selects .select-wrap,
body.is-portrait #filtersPanel .filters-grid .two-selects select,
body.is-portrait #filtersPanel .filters-grid .two-selects input,
#filtersPanel.is-portrait .filters-grid .two-selects .select-wrap,
#filtersPanel.is-portrait .filters-grid .two-selects select,
#filtersPanel.is-portrait .filters-grid .two-selects input{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
body.is-portrait #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
body.is-portrait #filtersPanel .filters-grid .fb-price  .two-selects .range-sep,
#filtersPanel.is-portrait .filters-grid .fb-weight .two-selects .range-sep,
#filtersPanel.is-portrait .filters-grid .fb-price  .two-selects .range-sep{
  display:inline-block !important;
  font-size:12px !important;
}
body.is-portrait #stockBlock #stockArrow,
#filtersPanel.is-portrait #stockBlock #stockArrow{ display:flex !important; }

/* Guard band: small-laptop landscape (covers ~1314x808 and 1366x768)
   Force the same 2/2/3 layout without relying on JS flags. */
/* disabled guard-band for 1100-1400 x 700-900 to restore original 1366x768 layout */


/* When desktop (not portrait) and Weight | Price | Stock are arranged in three columns,
   stack their inner min/max controls vertically with consistent gaps. The JS marks
   this condition by toggling .triplet-3col on #filtersPanel. */
body:not(.is-portrait) #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects{
  display: grid !important;
  grid-template-columns: 1fr !important;
  row-gap: 8px !important;
  column-gap: 0 !important;
  width: 100% !important;
}
body:not(.is-portrait) #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects .select-wrap,
body:not(.is-portrait) #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects select,
body:not(.is-portrait) #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects input{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure the above wins specifically for desktop >=1101px where other rules set width:auto */
@media (min-width: 1101px){
  body:not(.is-portrait) #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
    column-gap: 0 !important;
    width: 100% !important;
  }
  /* Also cover the variant without body:not(.is-portrait) that may appear elsewhere */
  #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
    column-gap: 0 !important;
    width: 100% !important;
  }
  /* Highest specificity: target only when JS marks the exact two-selects with .stack-grid */
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block:not(.fb-search) .two-selects.stack-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
    column-gap: 0 !important;
    width: 100% !important;
  }
  #filtersPanel .filters-grid > .filter-block:not(.fb-search) .two-selects.stack-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
    column-gap: 0 !important;
    width: 100% !important;
  }
  body:not(.is-portrait) #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects .select-wrap,
  body:not(.is-portrait) #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects select,
  body:not(.is-portrait) #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects input,
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block:not(.fb-search) .two-selects.stack-grid .select-wrap,
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block:not(.fb-search) .two-selects.stack-grid select,
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block:not(.fb-search) .two-selects.stack-grid input,
  #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects .select-wrap,
  #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects select,
  #filtersPanel.triplet-3col .filters-grid > .filter-block:not(.fb-search) .two-selects input,
  #filtersPanel .filters-grid > .filter-block:not(.fb-search) .two-selects.stack-grid .select-wrap,
  #filtersPanel .filters-grid > .filter-block:not(.fb-search) .two-selects.stack-grid select,
  #filtersPanel .filters-grid > .filter-block:not(.fb-search) .two-selects.stack-grid input{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  box-sizing: border-box !important;
  }
}

/* Near-square tall landscape (~1310x1006): stacked rows + 50/50 QS|Catalog */
@media screen and (min-width:1200px) and (max-width:1366px) and (min-height:900px) and (orientation: landscape) and (max-aspect-ratio: 4/3){
  /* Base: stack blocks full width */
  #filtersPanel .filters-grid{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:flex-start !important; }
  #filtersPanel .filters-grid > .filter-block{ flex:1 1 100% !important; max-width:100% !important; min-width:0 !important; }

  /* Search full width */
  #filtersPanel .filters-grid > .filter-block.fb-search .input-wrap{ width:100% !important; max-width:100% !important; }
  #f_search{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }

  /* QS full width by default */
  #filtersPanel .filters-grid > .filter-block.fb-qs .select-wrap{ width:100% !important; max-width:100% !important; }
  .select-wrap--f_qs,
  #f_qs{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  /* Catalog visibility + pairing with QS */
  #filtersPanel .filters-grid > #catalogBlock{ display:none !important; }
  #filtersPanel .filters-grid > #catalogBlock.show{ display:block !important; }
  #filtersPanel.has-catalog .filters-grid > .filter-block.fb-qs,
  #filtersPanel .filters-grid > #catalogBlock.show{
    flex:1 1 calc(50% - 10px) !important;
    max-width:calc(50% - 10px) !important;
  }

  /* Supplier full width */
  #filtersPanel .filters-grid > .filter-block.fb-supplier .select-wrap,
  .select-wrap--f_supplier, .select-wrap--f_supplier.is-disabled,
  #f_supplier, #f_supplier:disabled{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }

  /* Stack min/max pairs and fill width */
  #filtersPanel .filters-grid .fb-weight .two-selects,
  #filtersPanel .filters-grid .fb-price  .two-selects,
  #filtersPanel .filters-grid #stockBlock .two-selects{
    display:grid !important; grid-template-columns: 1fr !important; row-gap:8px !important; column-gap:0 !important; width:100% !important;
  }
  #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
  #filtersPanel .filters-grid .fb-price  .two-selects .range-sep{ display:none !important; }
  #filtersPanel .filters-grid .fb-weight .two-selects select,
  #filtersPanel .filters-grid .fb-price  .two-selects select{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }

  /* Stock: 100% inputs, hide arrow, keep icon small */
  #filtersPanel #stockBlock #stockArrow{ display:none !important; }
  #filtersPanel #stockBlock .stock-input,
  #filtersPanel #f_smin, #filtersPanel #f_smax,
  #filtersPanel .select-wrap--f_smin, #filtersPanel .select-wrap--f_smax{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }
  #filtersPanel .filters-grid #stockBlock .two-selects input,
  #filtersPanel .filters-grid #stockBlock .two-selects select{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }
  #filtersPanel #stockBlock .icon-btn.order{ width:28px !important; padding:0 !important; }
  #stockOrderText{ display:none !important; }
}


/* Near-square/short landscape (~1344x851): apply same stacked layout */
@media screen and (min-width:1200px) and (max-width:1366px) and (min-height:800px) and (max-height:900px) and (orientation: landscape){
  /* Stack rows full width */
  #filtersPanel .filters-grid{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:flex-start !important; }
  #filtersPanel .filters-grid > .filter-block{ flex:1 1 100% !important; max-width:100% !important; min-width:0 !important; }

  /* Search full width */
  #filtersPanel .filters-grid > .filter-block.fb-search .input-wrap{ width:100% !important; max-width:100% !important; }
  #f_search{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }

  /* QS 100% by default */
  #filtersPanel .filters-grid > .filter-block.fb-qs .select-wrap{ width:100% !important; max-width:100% !important; }
  .select-wrap--f_qs,
  #f_qs{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  /* Catalog appears and pairs 50/50 with QS */
  #filtersPanel .filters-grid > #catalogBlock{ display:none !important; }
  #filtersPanel .filters-grid > #catalogBlock.show{ display:block !important; }
  #filtersPanel.has-catalog .filters-grid > .filter-block.fb-qs,
  #filtersPanel .filters-grid > #catalogBlock.show{
    flex:1 1 calc(50% - 10px) !important;
    max-width:calc(50% - 10px) !important;
  }

  /* Supplier full width */
  #filtersPanel .filters-grid > .filter-block.fb-supplier .select-wrap,
  .select-wrap--f_supplier, .select-wrap--f_supplier.is-disabled,
  #f_supplier, #f_supplier:disabled{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }

  /* Weight/Price/Stock: stack min/max, remove separators */
  #filtersPanel .filters-grid .fb-weight .two-selects,
  #filtersPanel .filters-grid .fb-price  .two-selects,
  #filtersPanel .filters-grid #stockBlock .two-selects{
    display:grid !important; grid-template-columns: 1fr !important; row-gap:8px !important; column-gap:0 !important; width:100% !important;
  }
  #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
  #filtersPanel .filters-grid .fb-price  .two-selects .range-sep{ display:none !important; }
  #filtersPanel .filters-grid .fb-weight .two-selects select,
  #filtersPanel .filters-grid .fb-price  .two-selects select{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }

  /* Stock inputs 100%; hide arrow; compact icon */
  #filtersPanel #stockBlock #stockArrow{ display:none !important; }
  #filtersPanel #stockBlock .stock-input,
  #filtersPanel #f_smin, #filtersPanel #f_smax,
  #filtersPanel .select-wrap--f_smin, #filtersPanel .select-wrap--f_smax{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }
  #filtersPanel #stockBlock .icon-btn.order{ width:28px !important; padding:0 !important; }
  #stockOrderText{ display:none !important; }
}

/* Shorter landscape (~1270x768 etc.): make QS/Supplier/Stock 100% like Weight/Price */
@media screen and (min-width:1200px) and (max-width:1365px) and (min-height:700px) and (max-height:820px) and (orientation: landscape) and (max-aspect-ratio: 17/10){
  /* Stack rows full width */
  #filtersPanel .filters-grid{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:flex-start !important; }
  #filtersPanel .filters-grid > .filter-block{ flex:1 1 100% !important; max-width:100% !important; min-width:0 !important; }

  /* Search full width */
  #filtersPanel .filters-grid > .filter-block.fb-search .input-wrap{ width:100% !important; max-width:100% !important; }
  #f_search{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }

  /* QS full width (wrapper + control) */
  #filtersPanel .filters-grid > .filter-block.fb-qs .select-wrap,
  .select-wrap--f_qs,
  #f_qs{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  /* Catalog pairs with QS 50/50 when visible */
  #filtersPanel .filters-grid > #catalogBlock{ display:none !important; }
  #filtersPanel .filters-grid > #catalogBlock.show{ display:block !important; }
  #filtersPanel.has-catalog .filters-grid > .filter-block.fb-qs,
  #filtersPanel .filters-grid > #catalogBlock.show{
    flex:1 1 calc(50% - 10px) !important;
    max-width:calc(50% - 10px) !important;
  }

  /* Supplier full width (wrapper + control) */
  #filtersPanel .filters-grid > .filter-block.fb-supplier .select-wrap,
  .select-wrap--f_supplier, .select-wrap--f_supplier.is-disabled,
  #f_supplier, #f_supplier:disabled{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }

  /* Weight/Price stacked full-width, hide separators */
  #filtersPanel .filters-grid .fb-weight .two-selects,
  #filtersPanel .filters-grid .fb-price  .two-selects,
  #filtersPanel .filters-grid #stockBlock .two-selects{
    display:grid !important; grid-template-columns: 1fr !important; row-gap:8px !important; column-gap:0 !important; width:100% !important;
  }
  #filtersPanel .filters-grid .fb-weight .two-selects .range-sep,
  #filtersPanel .filters-grid .fb-price  .two-selects .range-sep{ display:none !important; }
  #filtersPanel .filters-grid .fb-weight .two-selects select,
  #filtersPanel .filters-grid .fb-price  .two-selects select{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }

  /* Stock full width (inputs + wrappers), hide arrow */
  #filtersPanel #stockBlock #stockArrow{ display:none !important; }
  #filtersPanel #stockBlock .stock-input,
  #filtersPanel #f_smin, #filtersPanel #f_smax,
  #filtersPanel .select-wrap--f_smin, #filtersPanel .select-wrap--f_smax{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }
  #stockOrderText{ display:none !important; }
}