/* ============================================================
   SHOPICKS — catalog redesign UI: searchable combo, top nav +
   mega menu + mobile drawer, multi-select filter panel, catalog
   layout, and the rebuilt preferences modal. RTL-first; tokens
   shared with the rest of the app (--gold / --ink / --cream …).
   ============================================================ */

/* ---------- searchable combobox (brand / city) ---------- */
.combo{ position:relative; }
.combo-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px;
  font:inherit; color:var(--ink); cursor:pointer; text-align:start; }
.combo-btn:hover{ border-color:var(--gold); }
.combo-ph{ color:var(--muted); }
.combo-caret{ color:var(--muted); font-style:normal; font-size:11px; }
.combo-pop{ position:absolute; z-index:60; top:calc(100% + 4px); inset-inline:0; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:8px; }
.combo-search{ width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 10px; font:inherit; margin-bottom:6px; }
.combo-list{ max-height:230px; overflow:auto; display:flex; flex-direction:column; }
.combo-opt{ text-align:start; background:none; border:0; padding:7px 10px; border-radius:var(--r-sm);
  font:inherit; color:var(--ink); cursor:pointer; }
.combo-opt:hover{ background:var(--cream); }
.combo-opt.is-sel{ background:var(--gold-pale,#f3ead6); font-weight:600; }
.combo-other{ border-top:1px solid var(--line); margin-top:4px; color:var(--gold-deep); }
.combo-otherbox,.size-cell .combo-otherbox{ margin-top:6px; width:100%; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:8px 10px; font:inherit; }
.size-cell{ display:flex; flex-direction:column; gap:0; }

/* ---------- top nav ---------- */
.topnav{ position:relative; display:flex; align-items:center; gap:14px; padding:0 clamp(12px,4vw,40px);
  border-top:1px solid var(--line); background:var(--paper,#fff); min-height:46px; }
.nav-burger{ display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:6px; }
.topnav-main{ display:flex; align-items:stretch; gap:2px; flex:0 0 auto; }
.topnav-item{ display:flex; }   /* NO position here: the mega menu positions against .topnav (full width) */
.topnav-search{ flex:1; min-width:0; display:flex; align-items:center; gap:7px; max-width:460px;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 14px; color:var(--muted); }
.topnav-search input{ flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; font-size:13px; color:var(--ink); }
.topnav-search .tns-go{ background:none; border:0; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; padding:0; }
.topnav-sell{ background:var(--ink); color:#fff; border:0; border-radius:var(--r-pill); font:inherit; font-weight:600;
  font-size:13px; cursor:pointer; padding:9px 16px; white-space:nowrap; }
.topnav-sell:hover{ background:var(--gold-deep); }
.topnav-link{ background:none; border:0; font:inherit; font-weight:600; color:var(--ink); cursor:pointer;
  padding:13px 14px; border-bottom:2px solid transparent; }
.topnav-link:hover,.topnav-link.on{ color:var(--gold-deep); border-bottom-color:var(--gold); }
.topnav-end{ display:flex; align-items:center; gap:4px; }
.topnav-aux{ background:none; border:0; font:inherit; font-size:13px; color:var(--muted); cursor:pointer; padding:8px 10px; border-radius:var(--r-pill); }
.topnav-aux:hover{ color:var(--ink); background:var(--cream); }

/* ---------- mega menu ---------- */
.mega{ position:absolute; z-index:55; top:100%; inset-inline-start:0; inset-inline-end:0; display:grid;
  grid-template-columns:1fr 300px; gap:24px; background:#fff; border:1px solid var(--line);
  border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:var(--sh-float,var(--sh-2)); padding:22px 26px; }
.mega-cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px 22px; }
.mega-col-h{ background:none; border:0; font:inherit; font-weight:700; color:var(--ink); cursor:pointer;
  padding:0 0 6px; border-bottom:1px solid var(--line); margin-bottom:6px; text-align:start; width:100%; }
.mega-col-h:hover{ color:var(--gold-deep); }
.mega-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.mega-col li button{ background:none; border:0; font:inherit; font-size:13.5px; color:var(--muted-2,var(--muted));
  cursor:pointer; padding:3px 0; text-align:start; width:100%; }
.mega-col li button:hover{ color:var(--gold-deep); }
.mega-side{ display:flex; flex-direction:column; gap:14px; border-inline-start:1px solid var(--line); padding-inline-start:22px; }
.mega-brands h5{ margin:0 0 8px; font-size:13px; color:var(--ink); }
.mega-brand-tiers{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mbt-h{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:3px; }
.mega-brand-tier button{ display:block; background:none; border:0; font:inherit; font-size:12.5px; color:var(--ink-2,var(--ink));
  cursor:pointer; padding:2px 0; text-align:start; }
.mega-brand-tier button:hover{ color:var(--gold-deep); }
.mega-featured{ margin-top:auto; display:flex; flex-direction:column; gap:4px; text-align:start;
  background:var(--gold-grad,linear-gradient(135deg,#EAD29A,#C9A24B)); color:#3a2e16; border:0;
  border-radius:var(--r-md); padding:16px; cursor:pointer; }
.mf-eyebrow{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.mf-title{ font-family:var(--serif); font-size:20px; }
.mf-cta{ font-size:12px; font-weight:700; }

/* ---------- mobile drawer ---------- */
.nav-drawer-scrim{ position:fixed; inset:0; z-index:120; background:rgba(20,16,12,.4); }
.nav-drawer{ position:absolute; inset-block:0; inset-inline-start:0; width:min(86vw,340px); background:#fff;
  box-shadow:var(--sh-float,var(--sh-2)); display:flex; flex-direction:column; padding:14px; overflow:auto; }
.nd-top{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.nd-search{ flex:1; display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 12px; color:var(--muted); }
.nd-search input{ border:0; outline:0; font:inherit; flex:1; background:none; }
.nd-close{ background:none; border:0; font-size:18px; color:var(--muted); cursor:pointer; padding:6px; }
.nd-back{ background:none; border:0; font:inherit; color:var(--gold-deep); cursor:pointer; padding:6px 2px; text-align:start; }
.nd-list{ display:flex; flex-direction:column; }
.nd-row{ display:flex; align-items:center; justify-content:space-between; background:none; border:0; border-bottom:1px solid var(--line);
  font:inherit; font-size:15px; color:var(--ink); cursor:pointer; padding:13px 4px; text-align:start; }
.nd-row i{ color:var(--muted); font-style:normal; }
.nd-row.strong{ font-weight:700; color:var(--gold-deep); }

/* ---------- catalog page layout ---------- */
.catalog-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.catalog-head h2{ margin:0; }
/* control row: sort · filter button · item search (RTL: sort right, search grows left) */
.catalog-toolbar{ display:flex; align-items:center; gap:10px; margin:2px 0 12px; }
.ct-search{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 16px; color:var(--muted); }
.ct-search input{ flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; color:var(--ink); }
.catalog-sort{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.sort-control{ border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 15px; font:inherit;
  font-weight:600; font-size:13px; background:var(--cream); color:var(--ink); cursor:pointer; }
.catalog-results{ min-width:0; }
/* legacy (no longer rendered): kept harmless for older cached pages */
.catalog-layout{ display:grid; grid-template-columns:248px 1fr; gap:22px; align-items:start; }
.catalog-mobilebar{ display:none; margin-bottom:10px; }
@media (max-width:600px){ .catalog-toolbar{ flex-wrap:wrap; } .ct-search{ order:2; flex-basis:100%; } }

/* ---------- filter panel ---------- */
.filter-rail{ position:sticky; top:12px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden; }
.filter-section{ border-bottom:1px solid var(--line); }
.filter-section:last-child{ border-bottom:0; }
.fs-head{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:0;
  font:inherit; font-weight:600; color:var(--ink); cursor:pointer; padding:12px 14px; text-align:start; }
.fs-head i{ color:var(--muted); font-style:normal; font-size:15px; }
.fs-body{ padding:2px 14px 14px; }
.filter-checks{ display:flex; flex-direction:column; gap:6px; max-height:230px; overflow:auto; }
.fb-check{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink); cursor:pointer; }
.fb-check input{ accent-color:var(--gold); }
.filter-tree{ display:flex; flex-direction:column; gap:8px; max-height:300px; overflow:auto; }
.ft-catrow{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px; cursor:pointer; }
.ft-subs{ display:flex; flex-direction:column; gap:4px; padding-inline-start:20px; margin-top:4px; }
.ft-sub{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted-2,var(--muted)); cursor:pointer; }
.fb-mini-search{ width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 10px; font:inherit; margin-bottom:8px; }
.fb-brand-list,.pref-brandlist{ max-height:260px; overflow:auto; display:flex; flex-direction:column; gap:10px; }
.fb-brand-group{ display:flex; flex-direction:column; gap:5px; }
.fb-brand-tier{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.filter-sizes{ display:flex; flex-direction:column; gap:12px; }
.fsz-h,.pref-sysname{ display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.fsz-opts,.pref-sizes{ display:flex; flex-wrap:wrap; gap:6px; }
.fsz-opts button,.pref-sizes button,.pref-chiprow button,.pref-subs button{ background:#fff; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:5px 11px; font:inherit; font-size:13px; color:var(--ink); cursor:pointer; }
.fsz-opts button.on,.pref-sizes button.on,.pref-chiprow button.on,.pref-subs button.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.filter-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.swatch{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(0,0,0,.12); cursor:pointer; position:relative; padding:0; }
.swatch .sw-check{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:14px; opacity:0; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.swatch.on{ outline:2px solid var(--gold); outline-offset:2px; }
.swatch.on .sw-check{ opacity:1; }
.filter-price{ display:flex; align-items:center; gap:8px; }
.filter-price input{ width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 10px; font:inherit; }
.filter-location{ display:flex; flex-direction:column; gap:4px; }
.floc-region{ border-bottom:1px solid var(--line); padding-bottom:4px; }
.floc-rrow{ display:flex; align-items:center; justify-content:space-between; }
.floc-rtoggle{ background:none; border:0; color:var(--muted); cursor:pointer; font-size:15px; padding:4px 8px; }
.floc-cities{ display:flex; flex-direction:column; gap:5px; padding:6px 0 8px 18px; padding-inline-start:18px; max-height:180px; overflow:auto; }
.filter-empty{ color:var(--muted); font-size:13px; margin:4px 0; }

/* active chips */
.active-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 16px; }
.chip{ display:inline-flex; align-items:center; gap:6px; background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:5px 12px; font:inherit; font-size:12.5px; color:var(--ink); cursor:pointer; }
.chip:hover{ border-color:var(--gold); }
.chip .chip-x{ color:var(--muted); font-size:11px; }
.chip-clear{ background:none; border:0; color:var(--gold-deep); font:inherit; font-size:12.5px; cursor:pointer; text-decoration:underline; }

/* filter trigger ("סינון · N") + right-side slide-in drawer (all viewports) */
.filter-open-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--ink); border:0;
  border-radius:var(--r-pill); padding:10px 18px; font:inherit; font-weight:600; font-size:13.5px; color:#fff; cursor:pointer; white-space:nowrap; }
.filter-open-btn:hover{ background:var(--gold-deep); }
.filter-drawer-scrim{ position:fixed; inset:0; z-index:130; background:rgba(20,16,12,.42); animation:fdrawer-fade .2s ease; }
.filter-drawer{ position:absolute; inset-block:0; right:0; width:min(460px,92vw); background:var(--paper,#fff);
  display:flex; flex-direction:column; box-shadow:var(--sh-float,var(--sh-2)); animation:fdrawer-in .26s cubic-bezier(.4,0,.2,1); }
@keyframes fdrawer-in{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
@keyframes fdrawer-fade{ from{ opacity:0; } to{ opacity:1; } }
.fdrawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.fdrawer-head b{ font-size:17px; }
.fdrawer-close{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff;
  font-size:15px; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.fdrawer-close:hover{ border-color:var(--gold); }
.filter-drawer .filter-body{ flex:1; overflow:auto; padding:2px 22px 10px; }
.fdrawer-foot{ display:flex; gap:12px; padding:14px 22px; border-top:1px solid var(--line); }
.fdrawer-foot .btn{ flex:1; }

/* ---------- preferences modal additions ---------- */
.prefs-modal{ max-width:600px; max-height:88vh; overflow:auto; }
.pref-lede{ color:var(--muted); font-size:13px; margin:0 0 14px; }
.pref-step{ padding:12px 0; border-top:1px solid var(--line); }
.pref-step:first-of-type{ border-top:0; }
.pref-h{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:15px; }
.pref-h i{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  background:var(--gold); color:#fff; font-style:normal; font-size:12px; }
.pref-h em{ color:var(--muted); font-style:normal; font-size:12px; font-weight:400; }
.pref-chiprow{ display:flex; flex-wrap:wrap; gap:8px; }
.pref-cats2{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.pref-catrow{ display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.pref-subs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; padding-inline-start:22px; }
.pref-deptsizes{ margin-bottom:14px; }
.pref-deptname{ display:block; font-weight:700; font-size:13px; color:var(--gold-deep); margin-bottom:6px; }
.pref-sizesys{ margin:0 0 8px; padding-inline-start:8px; }
.pref-brandgrp{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pref-brandgrp .fb-brand-tier{ flex-basis:100%; }
.pref-brandgrp button{ background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 11px; font:inherit; font-size:13px; cursor:pointer; }
.pref-brandgrp button.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pref-row2{ display:flex; gap:18px; flex-wrap:wrap; }
.pref-row2>*{ flex:1; min-width:200px; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .catalog-layout{ grid-template-columns:1fr; }
  .filter-rail{ display:none; }
  .catalog-mobilebar{ display:block; }
  .nav-burger{ display:inline-flex; }
  .topnav-main,.topnav-end,.topnav-search{ display:none; }
  .mega{ display:none; }
}