/* ===== CSS Vars & Base ===== */
:root{
  --bg:#f5f7fb; --surface:#fff; --text:#1d2433; --muted:#4b5563;
  --border:#dfe3ec; --chip:#eef2f9; --focus:#8fb4ff; --shadow:0 8px 24px rgba(19,33,68,.07);
  --accent:#3b82f6;
  --danger:#b91c1c;
  /* Consistent checkbox list metrics */
  --filter-row-h: 26px;
  --filter-row-gap: 6px;
  --filter-pad: 10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
.container{max-width:1820px;margin:0 auto;padding:16px}

/* Embedded mode for iframe integrations (keeps default theme untouched). */
html.fg-embedded,
body.fg-embedded {
  background: transparent;
}

body.fg-embedded .container {
  max-width: 100%;
  padding: 8px;
}

body.fg-embedded .filters-panel,
body.fg-embedded .panel {
  border-radius: 10px;
  box-shadow: none;
}

body.fg-embedded .filters-panel {
  margin-bottom: 10px;
}

body.fg-embedded .filters-title {
  font-size: 15px;
}

body.fg-embedded #counter,
body.fg-embedded #exportBtn {
  display: none !important;
}

body.fg-embedded .card:hover {
  box-shadow: 0 8px 18px rgba(82,108,212,.08);
}

/* ===== Filters Panel (top) ===== */
.filters-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  padding:12px 16px; margin-bottom:16px;
  position: relative;
}
.filters-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.filters-title{font-size:16px; font-weight:700}
#counter{ color:var(--muted); font-size:12px}
.filters-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.filters-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(12, minmax(0,1fr));
}
.col-6{grid-column: span 6}
.col-3{grid-column: span 3}
.col-2{grid-column: span 2}
.col-1{grid-column: span 1}
@media (max-width:1100px){
  .filters-grid{grid-template-columns: repeat(6, minmax(0,1fr))}
  .col-6{grid-column: span 6}
  .col-3{grid-column: span 6}
  .col-2{grid-column: span 3}
  .col-1{grid-column: span 2}
}
@media (max-width:640px){
  .filters-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .col-6,.col-3,.col-2{grid-column: span 2}
  .col-1{grid-column: span 1}
}

.filter-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

/* Titles for DROPDOWN/TEXT filters only (not checkbox lists) */
.filters-panel .filters-grid > .filter-block > label,
.filters-panel .filters-grid > .filter-block > .filter-label,
#catalogBlock > label,
#stockBlock > label,
#stockBlock > .filter-label {
  display:block;
  width:auto;
  max-width:none;
  margin:0 0 6px 0;
  white-space:normal;
  font-size:12px;
  color:var(--muted);
  text-transform:none;
}

/* Inputs / selects in filter blocks */
.filter-block > input[type="text"],
.filter-block > select{ width:100%; }

.filter-block input[type="text"],
.filter-block select{
  background:#fff;color:#1d2433;border:1px solid var(--border);
  border-radius:8px;padding:9px 10px;outline:none
}
.filter-block input:focus,
.filter-block select:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(147,197,253,.35)}

/* ----- Ecommerce-like Selects (wrapper + chevron + clear) ----- */
.filters-panel .select-wrap{ position:relative; display:inline-block; width:100%; }
.filters-panel .select-wrap select{
  width:100%;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#fff; color:#1d2433; border:1px solid var(--border);
  border-radius:8px; height:36px; padding:7px 40px 7px 12px; outline:none; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.filters-panel .select-wrap::after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; opacity:.6; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23606b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position:center; background-size:14px 14px; background-repeat:no-repeat;
  transition: transform .12s ease, opacity .12s ease;
}
.filters-panel .select-wrap::after{ right:24px; }
.filters-panel .select-wrap:focus-within::after{ transform:translateY(-50%) rotate(180deg); opacity:.9; }
.filters-panel .select-wrap.is-disabled::after{ opacity:.35; }
.filters-panel .select-wrap .select-clear{
  display:none; position:absolute; right:28px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; border:0; background:transparent; color:var(--muted);
  cursor:pointer; line-height:18px; font-size:14px; padding:0;
}
.filters-panel .select-wrap .select-clear{ right:8px; }
.filters-panel .select-wrap .select-clear:hover{ color:#111827; }
.filters-panel .select-wrap.has-value .select-clear{ display:inline-flex; align-items:center; justify-content:center; }
.filters-panel .select-wrap select:disabled{ background:#f8fafc; color:#9ca3af; cursor:not-allowed; }


/* Supplier wrapper can appear is-disabled briefly; keep normal colors */
.select-wrap--f_supplier.is-disabled select{
  background:#fff !important;
  color:var(--text) !important;
  cursor:default !important;
}
/* Range separator for min/max pairs */
.filters-panel .range-sep{ color:var(--muted); font-size:12px; user-select:none; }

/* Fix garbled stock arrow text and style consistently */
#stockArrow{ font-size:0; display:inline-flex; align-items:center; justify-content:center; min-width:16px; }
#stockArrow::before{ content:'\2194'; font-size:12px; color:var(--muted); opacity:.75; }

/* Min/Max pair wrapper */
.two-selects{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px; /* compact and consistent */
}

/* QS 50%, Supplier 70% (desktop); full width on smaller screens */
#f_qs { width:50%; min-width:120px; }
#f_supplier { width:auto; min-width:160px; }
.select-wrap--f_qs { width:50%; min-width:120px; }
.select-wrap--f_supplier { width:auto; min-width:160px; }
@media (max-width:1100px){
  /* QS can expand full width on smaller screens */
  #f_qs { width:100%; min-width:0; }
  .select-wrap--f_qs { width:100%; min-width:0; }
  /* Keep Supplier compact even on small screens to avoid pre-load stretching */
  #f_supplier { width:auto; min-width:160px; }
  .select-wrap--f_supplier { width:auto; min-width:160px; }
}

/* Arrow / invert UI for Sort by stock (non-destructive) */
.stock-arrow{
  display:inline-block;
  min-width:20px;
  text-align:center;
  font-size:14px;
  line-height:1;
  color:var(--muted);
  user-select:none;
  transform: translateY(1px);
}
#stockBlock .stock-arrow{
  font-size:12px;
  opacity:.65;
  margin:0 2px;
}
.icon-btn{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border:1px solid var(--border);
  border-radius:8px; background:#fff; cursor:pointer;
  color:var(--muted);
  box-shadow:var(--shadow); transition:transform .12s, box-shadow .2s, color .15s, border-color .15s;
}
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(19,33,68,.08); color:#1d2433; border-color:#dfe6ff; }
.jam-refresh{ width:18px; height:18px; fill:currentColor; }
 
/* Allow icon button to show text label */
.icon-btn.order{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;              /* override fixed square */
  height:34px;
  padding:0 10px;          /* some horizontal padding */
}

.icon-btn.order .jam-refresh{
  width:18px; height:18px;
}

#stockInverse .order-text{
  font-size:12px;
  font-weight:400;         /* not bold */
  white-space:nowrap;
  color:var(--muted);
}


/* ===== Checkbox Filters (Composition, Type, Features, etc.) — RESTORED ===== */
.filters-panel .check-grid{
  display:grid !important;
  gap:12px !important;
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
}
@media (max-width:1100px){
  .filters-panel .check-grid{ grid-template-columns:repeat(3, 1fr) !important; }
}
@media (max-width:640px){
  .filters-panel .check-grid{ grid-template-columns:repeat(2, 1fr) !important; }
}
.filters-panel .check-grid > .filter-block{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:6px !important;
}
.filters-panel .check-grid > .filter-block > label,
.filters-panel .check-grid > .filter-block > .filter-label{
  display:block !important;
  width:auto !important;
  margin:0 0 6px 0 !important;
  padding:0 !important;
  font-size:12px !important;
  color:var(--muted) !important;
  text-transform:none !important;
}
.filters-panel .check-grid .checkboxes{
  /* Unified container styling applied later; keep only neutral base */
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  padding:8px !important;
  background:#fff !important;
  width:100% !important;
}
.filters-panel .check-grid .checkboxes label.row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  margin:0 !important;
  width:100% !important;
  min-height: 24px;
  padding: 2px 4px !important;
  border-radius:6px !important;
  transition: background-color .08s ease, color .08s ease !important;
}
.filters-panel .check-grid .checkboxes label.row:hover{
  background:#f2f4ff !important;
}
.filters-panel .check-grid .checkboxes label.row input{ margin:0 !important; flex-shrink:0 !important; }
.filters-panel .check-grid .checkboxes label.row span{  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#c_status label.row input[value="__DISCOUNT__"] + span { text-transform: uppercase; }

.filters-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:10px; align-items:center; flex-wrap:wrap}

/* Group the Clear + Show/Hide actions to keep relative order and spacing */
.filters-footer .footer-actions{ display:inline-flex; align-items:center; gap:8px; }

/* Keep relative order within the group */
.filters-footer .footer-actions #resetFilters{
  display: none;
  position: static;
  bottom: auto; right: auto;
  padding: 0;
  border: none; background: transparent; color: inherit;
  border-radius: 8px; box-shadow: none;
  font: inherit; align-items: center; gap: 6px;
  cursor: pointer;
}
.filters-footer .footer-actions #extraFiltersToggle{ order:2; }
/* Prevent footer buttons from overlapping and keep them inline */
.filters-footer .footer-action, 
/* Group the Clear + Show/Hide actions to keep relative order and spacing */
.filters-footer .footer-actions{ display:inline-flex; align-items:center; gap:8px; }

/* Keep relative order within the group */
.filters-footer .footer-actions #resetFilters{
  display: none;
  position: static;
  bottom: auto; right: auto;
  padding: 0;
  border: none; background: transparent; color: inherit;
  border-radius: 8px; box-shadow: none;
  font: inherit; align-items: center; gap: 6px;
  cursor: pointer;
}
.filters-footer .footer-actions #extraFiltersToggle{ order:2; }
/* Ensure Clear filters sits to the left of Show/Hide */
.filters-footer #resetFilters{
  display: none;
  position: static;
  bottom: auto; right: auto;
  padding: 0;
  border: none; background: transparent; color: inherit;
  border-radius: 8px; box-shadow: none;
  font: inherit; align-items: center; gap: 6px;
  cursor: pointer;
}
.filters-footer #extraFiltersToggle{ order:2; }

/* Footer actions: consistent look for Clear filters and Show/Hide extra filters */
.footer-action{
  background:transparent; color:var(--text);
  border:none; border-radius:8px;
  padding:4px 6px; display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap;
}
.footer-action .icon{ font-size:12px; line-height:1; }
.footer-action:hover{ background:#f5f7fb; }
/* Keep extra filters toggle background always transparent for a stable look */
.extra-filters-toggle.footer-action:hover,
.extra-filters-toggle.footer-action:active,
.extra-filters-toggle.footer-action:focus{ background:transparent !important; box-shadow:none !important; }
.footer-action:active{ transform: translateY(0.5px); }
.extra-filters-toggle.footer-action[aria-expanded="true"]{ background:transparent; }

/* Bottom-right text-style toggle so it blends into the panel */
.extra-filters-toggle{
  background:transparent; border:none; color:var(--text);
  font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:6px;
  padding:4px 6px; cursor:pointer;
}
.extra-filters-toggle .chev{ transition: transform .2s; }
.extra-filters-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* Smooth expand/collapse area for extra filters */
.extra-filters-wrap{ max-height:0; overflow:hidden; opacity:0; transition:max-height .28s ease, opacity .22s ease, margin .2s ease; }
.extra-filters-wrap.open{ opacity:1; margin-top:8px; }
.filters-panel .extra-filters{ display:none; }
.filters-panel .extra-filters.show{ display:grid; }

/* ===== Gallery / Cards ===== */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.gallery{display:grid;gap:12px;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1280px){.gallery{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1000px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.gallery{grid-template-columns:repeat(1,1fr)}}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:0 0 12px 12px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .15s,border-color .15s;
  content-visibility:auto;
  contain-intrinsic-size: 440px;
}
.card:hover{border-color:#dfe6ff;box-shadow:0 12px 28px rgba(82,108,212,.12)}

.thumb{position:relative;aspect-ratio:1/1;background:#f2f4f9;display:grid;place-items:center;cursor:zoom-in; overflow:hidden}
.thumb .qr{ position:absolute; right:8px; bottom:8px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:4px; box-shadow:var(--shadow); }
.thumb img{width:100%;height:100%;object-fit:cover}
.hoverbar{ z-index:20; }
.hoverbar{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .12s;background:linear-gradient(180deg,rgba(255,255,255,0) 60%, rgba(13,23,54,.35))}
.card:hover .hoverbar{opacity:1}
/* Keep hover overlay visible when a swatch/stock panel is open */
.card.card--swatch-open .hoverbar{opacity:1 !important; background:linear-gradient(180deg,rgba(255,255,255,0) 55%, rgba(13,23,54,.42));}

.preview-btn{
  background:transparent !important; border:none !important; padding:0 !important;
  box-shadow:none !important; opacity:.75; cursor:pointer;
}
.preview-btn svg{ height:35px; width:auto; display:block; fill:#fff; }

/* Look badge (always visible, top-left) */
.look-badge{
  position:absolute; top:8px; left:8px; background:rgba(0,0,0,.6); color:#fff;
  font-size:11px; font-weight:600; padding:4px 8px; border-radius:8px;
  display:inline-flex; align-items:center; gap:6px; z-index:40;
}
.look-badge img{height:18px; width:auto; display:block; filter:brightness(0) invert(1);}

/* Discount badge (inside image) */
.discount-badge{
position:absolute; top:8px; right:8px;
background:rgba(0,0,0,.6); color:#fff;
  font-size:11px; font-weight:600;
  padding:4px 8px; border-radius:8px;
  display:inline-flex; align-items:center; gap:0; line-height:1; z-index:30;
}
.discount-badge .disc-text{ font-size:11px; font-weight:600; line-height:1; }
.card .thumb, #detailGrid .imgwrap { position: relative; }
#detailGrid .imgwrap .discount-badge { top: 20px; right: 25px; }
.discount-badge[data-tooltip]:hover::after{
  content: attr(data-tooltip);
  position: absolute; right: 0; top: 110%;
  background: #111; color: #fff; padding: .35rem .5rem; border-radius: .3rem;
  font-weight: 600; white-space: nowrap; z-index: 60; pointer-events: none; transform: translateY(2px);
}

.meta{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0}
.meta .rowchips{ margin-top:auto; margin-bottom:0; }
.code-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.code{font-weight:800;letter-spacing:.3px}
.code-meta{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
  text-align:right;
}
.code-meta .price-stock{
  font-size:12px;
  color:#4b5563;
  white-space:nowrap;
}
.code-meta .price-stock b{
  font-weight:700;
  color:#1d2433;
}
.stock{font-size:12px;color:#4b5563;white-space:nowrap}
.stock-value{font-weight:700}
.stock-low{color:var(--danger)}
.subline{font-size:12px;color:#4b5563}
.rowchips{display:flex;gap:6px;flex-wrap:wrap}
.kv{background:var(--chip);border:1px solid var(--border);border-radius:8px;padding:5px 7px;font-size:12px;color:#4b5563}

/* Composition box with corner weight badge */
.compo{border:1px solid var(--border);border-radius:8px;background:#fff;padding:6px 8px; position:relative;}
.compo .heading{font-size:12px;color:#4b5563;margin-bottom:4px}
.compo .line{font-size:12px}
.compo .weight-badge{
  position:absolute; top:8px; right:10px; font-size:12px; padding:0; background:transparent; border:none; box-shadow:none; color:#374151; font-weight:normal;
}

/* Supplier row */
.supplier-row{
  display:flex; align-items:center; gap:8px; width:100%; justify-content:space-between;
}
.supplier-row .subline{
  flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.supplier-row .swatch-wrap{ width:auto !important; flex:0 0 auto; margin-left:auto; }
.supplier-row .swatch-cta.info{ justify-content:flex-end; gap:4px; }
.supplier-row .stock-info--card{ margin-left:auto; }
.supplier-row .stock-info--card .swatch-cta.info{ gap:4px; justify-content:flex-end; }
.supplier-row .stock-info--card .swatch-cta.info .chev{ margin-left:0; }

/* Details row: left info stack + optional QR on the right */
.details-row{ display:flex; align-items:flex-start; gap:8px; }
.details-left{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.details-qr{ flex:0 0 auto; margin:10px 5px 0 0; }
.details-qr canvas, .details-qr img{ width:65px; height:65px; display:block; }

/* Swatch CTA + Panel */
.swatch-wrap{position:relative; width:100%; margin:0;}
.swatch-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:#f7f9ff; border:1px solid var(--border); border-radius:999px;
  padding:6px 10px; cursor:pointer; user-select:none;
  transition:box-shadow .15s, transform .12s;
}
.swatch-cta.info{ background:#fff; }
.swatch-cta.info img{ display:none; }
.swatch-cta:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(19,33,68,.12)}
.swatch-cta img{height:17px;width:auto;display:block}
.swatch-cta .text{font-size:12px; text-decoration:underline; text-underline-offset:2px}
.swatch-cta .chev{margin-left:4px; transition:transform .2s}
.swatch-cta.open .chev{transform:rotate(180deg)}

.swatch-panel{
  position:fixed !important;
  display:none;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:10px 12px;
  z-index:5000; /* ensure above modals/overlays */
  width:auto;
  max-width:min(440px, 96vw);
  overflow-x:auto;
}
.swatch-panel.show{ display:block; animation:slideDown .15s ease-out; }
.swatch-panel, .swatch-panel * { color: var(--text); }
.swatch-panel .swatch-list > div{ white-space:nowrap; }
@keyframes slideDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Place swatch button inside images */
.swatch-in-image{ position:absolute; left:12px; bottom:16px; z-index:30; }
.thumb .swatch-in-image{ left:10px; bottom:12px; z-index:30; }
.detail .imgwrap .swatch-in-image{ position:absolute; left:25px; bottom:15px; z-index:100; }

/* ===== Modal & Detail ===== */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:1100}
.modal.show{display:flex}
.modal-card{background:#ffffff;border:1px solid var(--border);border-radius:14px;width:fit-content;max-width:96vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.modal-header{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border)}
.modal-title{flex:1;text-align:center}
.code-big{font-size:30px;line-height:1.1;font-weight:800}
.supplier-small,.season-small{font-size:12px;color:#6b7280;margin-top:2px}
.close{background:#fff;border:1px solid var(--border);color:#1d2433;border-radius:8px;padding:6px 10px;cursor:pointer}

.modal-body{padding:0}
.detail{display:grid;grid-auto-rows:auto;align-items:start}
.detail.no-look{grid-template-columns:minmax(380px,600px) minmax(420px,1fr)}
.detail.has-look{grid-template-columns:minmax(380px,600px) minmax(420px,1fr) auto}

.detail .imgwrap{position:relative;padding:8px 16px;display:block;height:100%;overflow:hidden;align-self:start}
.detail .imgwrap > img{
  height:100%; width:100%; display:block; margin:0; object-fit:cover; border-radius:0;
}
.detail .imgwrap img { cursor: default; }

.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:999px;border:none;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);display:grid;place-items:center;cursor:pointer;opacity:.95;transition:opacity .15s, transform .15s, box-shadow .15s}
.nav-arrow svg{width:16px;height:16px}
.nav-arrow:hover{opacity:1;transform:translateY(-50%) scale(1.05);box-shadow:0 6px 18px rgba(19,33,68,.15)}
.nav-prev{left:28px}
.nav-next{right:28px}

.img-zoom-corner,
.look-zoom-corner{
  position:absolute; right:10px; bottom:10px; background:transparent; border:none; padding:0; cursor:zoom-in; z-index:5;
}
.img-zoom-corner img{height:24px; width:auto; display:block; filter:invert(1) brightness(2)}
.look-zoom-corner{ right:8px; bottom:8px; width:28px; height:28px; display:grid; place-items:center; }
.look-zoom-corner img{height:20px; width:auto; display:block;}

.specs{border-left:1px solid var(--border);padding:12px 14px;overflow:visible}
.detail.has-look .look-side{ border-left:none !important; }
.detail.has-look .specs{ border-right:1px solid var(--border); }
.specs-list{overflow:auto;max-height:675px}
.specs h3{margin:0 0 10px 0;font-size:18px}
/* Add top spacing before subsequent section titles (e.g., Stock informations) */
.specs h3:not(:first-child){ margin-top: 10px; }
.spec{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:14px}
.label{color:#6b7280}
.value{font-weight:600}

/* Total look (right side) */
.look-side{border-left:1px solid var(--border);padding:12px 14px;display:none;align-self:start}
.look-thumb-wrap{position:relative;display:block;cursor:zoom-in;height:100%;overflow:hidden}
.look-thumb-wrap img{height:100%;width:100%;object-fit:contain;border-radius:0;border:none}

/* Lightbox */
.look-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:1200}
.look-modal.show{display:flex}
.look-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:12px;max-width:92vw;max-height:92vh;box-shadow:var(--shadow);padding:8px}
.look-card img{max-width:calc(92vw - 16px);max-height:calc(92vh - 16px);display:block;border-radius:10px}
.look-close{position:absolute;top:12px;right:12px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer}

/* Misc */
.hidden{display:none!important}
.alert{background:#fff5f5;border:1px solid #ffd7d7;color:#8a1f1f;padding:10px 12px;border-radius:10px;margin:10px 0}
.meta-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:8px 14px; margin-top:6px;
}
.meta-grid .line{ font-size:12px; color:#4b5563; display:flex; justify-content:space-between; gap:8px; }
.meta-grid .line .label{ color:#6b7280; }
.meta-grid .line .value{ font-weight:600; text-align:right; }

/* === FINAL spacing between filter blocks (Search, QS, Supplier, Weight, Price) === */
/* Put this at the bottom of the CSS so it wins the cascade */
.filters-panel .filters-grid{
  column-gap: 10px !important;   /* matches the current Search ↔ QS distance */
  row-gap: 10px !important;
}

/* Make sure individual blocks don't add extra margins that fight the grid gap */
.filters-panel .filters-grid .filter-block{
  margin: 0 !important;
}

/* === FINAL: 15px spacing between top filter blocks === */
/* Targets only the main row of filters inside #filtersPanel */
#filtersPanel > .filters-grid{
  gap: 15px !important;            /* row + column gap */
  column-gap: 15px !important;     /* explicit column gap override */
  grid-column-gap: 15px !important;/* legacy alias for safety */
}

/* Ensure no extra margins fight the grid gap */
#filtersPanel > .filters-grid > .filter-block{
  margin: 0 !important;
}

/* === TOP FILTER ROW: equal 15px spacing between blocks === */
#filtersPanel > .filters-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 15px !important;                 /* consistent spacing */
  column-gap: 15px !important;
  row-gap: 15px !important;
}

/* Neutralize col- spans only for the top row so empty grid tracks can't form */
#filtersPanel > .filters-grid > .col-1,
#filtersPanel > .filters-grid > .col-2,
#filtersPanel > .filters-grid > .col-3,
#filtersPanel > .filters-grid > .col-6{
  grid-column: auto !important;
}

/* Remove any margins that could fight the grid gap */
#filtersPanel > .filters-grid > .filter-block{
  margin: 0 !important;
}
/* === TOP FILTER ROW: left-aligned with a strict 15px gap === */
#filtersPanel > .filters-grid{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important;                /* uniform horizontal & vertical spacing */
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Neutralize old grid column spans ONLY here so they don't create empty tracks */
#filtersPanel > .filters-grid > .col-1,
#filtersPanel > .filters-grid > .col-2,
#filtersPanel > .filters-grid > .col-3,
#filtersPanel > .filters-grid > .col-6{
  grid-column: auto !important;
  width: auto !important;
  flex: 0 1 auto !important;
}

/* Each filter block = its natural width (title + control), with no extra margins */
#filtersPanel > .filters-grid > .filter-block{
  margin: 0 !important;
  flex: 0 1 auto !important;
  min-width: 240px;                    /* keep controls readable; adjust if needed */
}

/* Do NOT affect the checkbox section */


/* === TOP FILTERS: left-flow grid with exact 15px gaps === */
#filtersPanel .filters-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 15px !important;                 /* uniform spacing between blocks */
  align-items: end !important;          /* titles above, controls align along baseline */
  justify-items: stretch !important;    /* each block fills its track */
}

/* Neutralize legacy column spans so they don’t create empty tracks */
#filtersPanel .filters-grid > [class*="col-"]{
  grid-column: auto !important;
}

/* Keep each block tidy; no random margins or min-widths forcing spacing */
#filtersPanel .filters-grid > .filter-block{
  margin: 0 !important;
  min-width: 0 !important;
}

/* Inner min/max pairs keep their own small gap; doesn’t affect block spacing */
#filtersPanel .filters-grid .two-selects{
  gap: 8px; /* or 6px if you prefer it tighter */
}

/* Make the top filters row flex with an equal gap */
#filtersPanel .filters-grid{
  display:flex !important;
  flex-wrap:wrap;
  align-items:flex-end;
  /* equal 10px spacing between blocks */
}

/* Neutralize old grid-span widths in this row */
#filtersPanel .filters-grid > [class*="col-"]{
  flex:0 0 auto !important;
}

/* Search should grow and take the remaining space */
.filter--search{
  flex:1 1 520px !important;           /* grows wide; baseline ~520px */
  width:720px;                     /* keeps it roomy on large screens */
}
.filter--search input{ width:100% !important; }

/* Give the other filters a controllable base width (default 200px) */
.filter--qs,
.filter--catalog,
.filter--supplier,
.filter--weight,
.filter--price,
.filter--stock{
  width:200px !important;
  flex:0 0 200px !important;
  max-width:200px !important;
  min-width:200px !important;
}

/* Inside paired min/max filters, let selects share the width nicely */
.filter--weight .two-selects select,
.filter--price  .two-selects select,
.filter--stock  .two-selects select{
  flex:1 1 0 !important;
  width:100% !important;
  max-width:none !important;
}
.filter--weight .two-selects,
.filter--price  .two-selects,
.filter--stock  .two-selects{
  gap:8px;                              /* compact gap between min/max */
}

/* Keep stock arrow compact */
.filter--stock .stock-arrow{
  display:inline-block;
  min-width:16px;
  text-align:center;
  line-height:1;
  opacity:.7;
}

/* Mobile: stack full-width */
@media (max-width:640px){
  .filter--search{
    flex:1 1 100% !important;
    min-width:0;
  }
  .filter--qs,
  .filter--catalog,
  .filter--supplier,
  .filter--weight,
  .filter--price,
  .filter--stock{
    flex:1 1 100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
}

/* Let grid column spans control widths; avoid fixed widths that cause wrapping */
#filtersPanel .filters-grid > .filter-block.fb-search,
#filtersPanel .filters-grid > .filter-block.fb-qs,
#filtersPanel .filters-grid > .filter-block.fb-supplier,
#filtersPanel .filters-grid > .filter-block.fb-weight,
#filtersPanel .filters-grid > .filter-block.fb-price,
#filtersPanel .filters-grid > .filter-block.fb-stock{
  width:auto !important;
  min-width:0 !important;
}

/* Optional: on small screens, let them go full width */
@media (max-width: 1100px){
  #filtersPanel .filters-grid > .filter-block.fb-search,
  #filtersPanel .filters-grid > .filter-block.fb-qs,
  #filtersPanel .filters-grid > .filter-block.fb-supplier,
  #filtersPanel .filters-grid > .filter-block.fb-weight,
  #filtersPanel .filters-grid > .filter-block.fb-price,
  #filtersPanel .filters-grid > .filter-block.fb-stock{
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* Make QS fabric offer match Fabric supplier dropdown sizing */
#filtersPanel #f_supplier,
#filtersPanel #f_qs{
  width:auto;
  min-width:160px;
}

/* Mobile: full width for both */
@media (max-width:1100px){
  #filtersPanel #f_supplier,
  #filtersPanel #f_qs{
    width:100%;
    min-width:0;
  }
}

/* Weight min/max should match Price cat. min/max */
#filtersPanel #f_pmin,
#filtersPanel #f_wmin{
  width:90px !important;
  min-width:90px !important;
}

/* Supplier block respects its grid width */
#filtersPanel .filters-grid > .filter-block.fb-supplier{ width:auto !important; min-width:0 !important; }

/* Ensure supplier doesn't look disabled even if some script toggles it temporarily */
#filtersPanel #f_supplier:disabled{
  background:#fff !important;
  color:var(--text) !important;
  cursor: default !important;
}

#filtersPanel #f_pmax,
#filtersPanel #f_wmax{
  width:90px !important;
  min-width:90px !important;
}

/* Keep the pair spacing identical on both groups */
#filtersPanel .filter-weight .two-selects,
#filtersPanel .filter-price .two-selects{
  gap:6px;
}
/* Make Catalog title/spacing identical to QS & Supplier */
#filtersPanel .filters-grid > #catalogBlock {
  margin: 0 !important;             /* nixes old inline margin */
}

#filtersPanel #catalogBlock > label {
  display: block;
  margin: 0 0 6px 0;
  font-size: 12px;
  color: var(--muted);
  text-transform: none;
}

#filtersPanel #f_catalog { width: 100%; }  /* like other singles */

/* Unified filter title look (same as Search / QS / Supplier titles) */
.filter-title{
  display:block;
  margin:0 0 6px 0 !important;
  font-size:12px;
  color:var(--muted);
  text-transform:none;
}

/* Safety: force Catalog to have the spacing in case older rules linger */
#filtersPanel #catalogBlock > label{
  margin-bottom:6px !important;
}


/* Hide-until-ready utility */
.is-hidden { display: none !important; }

/* Make Catalog behave exactly like QS */
.filters-panel .filters-grid > .fb-qs,
.filters-panel .filters-grid > .fb-catalog {
  min-width: 200px;          /* same default as your other fb-* blocks */
  /* equal 10px spacing between blocks */
}

/* Ensure the label spacing matches the other filter titles */
#filtersPanel .filters-grid #catalogBlock > label{
  display:block;
  margin:0 0 6px 0;
  font-size:12px;
  color:var(--muted);
  text-transform:none;
}

/* Hide Catalog until JS decides to show it */
#filtersPanel #catalogBlock { display: none; }
/* Strong guard: hide unless explicitly .show */
#filtersPanel #catalogBlock:not(.show){ display:none !important; }


/* Unify Catalog title styling with Fabric supplier */
#filtersPanel #catalogBlock > label{
  display:block !important;
  width:auto !important;
  max-width:none !important;
  margin:0 0 6px 0 !important;
  white-space:normal !important;
  font-size:12px !important;
  color:var(--muted) !important;
  text-transform:none !important;
  padding:0 !important;
}

/* (Optional hard neutralizer) If you still have any earlier
   selectors like ".filters-panel .filters-grid #catalogBlock label"
   giving Catalog a different look, flatten them: */
.filters-panel .filters-grid #catalogBlock label{
  margin:0 0 6px 0 !important;
  font-size:12px !important;
  color:var(--muted) !important;
  text-transform:none !important;
  padding:0 !important;
  display:block !important;
}

/* Visibility toggle driven by JS */
#filtersPanel #catalogBlock{ display:none; }
#filtersPanel #catalogBlock.show{ display:block; }

/* Make Catalog title identical to other select-block titles */
#filtersPanel #catalogBlock > label{
  display:block;
  width:auto;
  max-width:none;
  margin:0 0 6px 0;      /* ← same as Fabric supplier */
  white-space:normal;
  font-size:12px;
  color:var(--muted);
  text-transform:none;
  padding:0;
}

/* Let the grid control spacing; don't let #catalogBlock add its own */
#filtersPanel .filters-grid #catalogBlock{ margin:0; }

/* Optional: keep Catalog select width consistent with Supplier (you can adjust) */
#f_catalog{ width:70%; min-width:160px; }
@media (max-width:1100px){
  #f_catalog{ width:100%; min-width:0; }
}

/* CATALOG VISIBILITY — hidden by default; only visible when .show is present */
#filtersPanel .filters-grid > .filter-block#catalogBlock { 
  display: none !important;               /* default hidden */
}
#filtersPanel .filters-grid > .filter-block#catalogBlock.show {
  display: block !important;               /* shown when QS has a value */
}

/* ===== Reset Filters button ===== */
#resetFilters{
  display: none;
  position: static;
  bottom: auto; right: auto;
  padding: 0;
  border: none; background: transparent; color: inherit;
  border-radius: 8px; box-shadow: none;
  font: inherit; align-items: center; gap: 6px;
  cursor: pointer;
}

#resetFilters svg{
  width: 16px; height: 16px; display: block;
}
#resetFilters:hover{
  border-color: #c8cfdb;
  transform: translateY(-1px);
}
#resetFilters:active{
  transform: translateY(0);
}

#f_search{
  width:265px;
}

/* Unavailable filter options */
.filter-block .row.is-disabled{
  opacity:.45;
  pointer-events:none;   /* no clicking */
}
.filter-block select option[disabled]{
  color:#9aa3b2;
}

/* Grey-out filters that would return 0 results */
.filters-panel .row.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}
.filters-panel .row.is-disabled input {
  pointer-events: none; /* extra safety, input is also disabled in JS */
}

#stockInfo{
  margin-top: 14px;
}
#stockInfo .spec{
  display:flex; justify-content:space-between; gap:12px;
  padding:6px 0; border-bottom:1px dashed var(--border);
}
#stockInfo h3{
  margin:16px 0 8px; font-size:16px; font-weight:600;
}
/* Ensure overlays don’t intercept clicks over the image */
.card .badge,
.card .discount-badge,
.card .total-look,
.card .total-look-badge,
.card .stock-chip,
.card .percent-flag {
  pointer-events: none;
}

.card .img-overlay { pointer-events: none; }






/* ===== UI Polish: Modern checkboxes ===== */
.filters-panel .check-grid .checkboxes label.row{
  height: var(--filter-row-h) !important;
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  margin:0 !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}
.filters-panel .check-grid .checkboxes label.row:hover{
  background: #f7f9ff !important;
  border-color: #e2e8f0 !important;
}
.filters-panel .check-grid .checkboxes label.row:focus-within{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(143,197,253,.28) !important;
}

.filters-panel .check-grid .checkboxes label.row input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 16px;
  width: 16px; height: 16px;
  min-width: 16px; min-height: 16px;
  border: 1.5px solid #cdd4e1;
  border-radius: 4px;
  background: #fff;
  display: inline-block;
  position: relative;
  color: var(--accent); /* used by ::after */
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.filters-panel .check-grid .checkboxes label.row input[type="checkbox"]:hover{ border-color: #cdd4e1; }
.filters-panel .check-grid .checkboxes label.row input[type="checkbox"]:active{ transform: scale(.96); }
.filters-panel .check-grid .checkboxes label.row input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(143,197,253,.35);
  border-color: var(--focus);
}
.filters-panel .check-grid .checkboxes label.row input[type="checkbox"]::after{
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: 2px solid currentColor; /* small accent tick */
  border-top: 0; border-left: 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .08s ease;
}
.filters-panel .check-grid .checkboxes label.row input[type="checkbox"]:checked{
  background: #fff;                /* keep white, reduce blue */
  border-color: var(--accent);     /* subtle brand accent */
}
.filters-panel .check-grid .checkboxes label.row input[type="checkbox"]:checked::after{
  transform: rotate(45deg) scale(1);
}

/* Selected text: keep same style as dropdowns (no chip, no bold) */
.filters-panel .check-grid .checkboxes label.row input[type="checkbox"]:checked + span{
  color: var(--text) !important;
  background: transparent !important;
  font-weight: 400 !important;
}

/* Smooth grey-out animation for disabled filter rows */
.filters-panel .row{ transition: opacity .22s ease, filter .22s ease, background-color .2s ease !important; }
.filters-panel .row.is-disabled{ opacity:.42; filter: grayscale(.25) brightness(.98); pointer-events:none; }

/* Standout Search input with blue border and shimmering placeholder */
.fb-search input:not(.is-code),
#f_search:not(.is-code){
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 1px rgba(143,197,253,.25) inset !important;
}
.fb-search input::placeholder,
#f_search::placeholder{
  background: linear-gradient(90deg, rgba(93,115,165,.55), rgba(255,255,255,.95), rgba(93,115,165,.55));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: placeholderShimmer 2.8s ease-in-out infinite;
}
@keyframes placeholderShimmer{ 0%{ background-position: 0% 0; } 50%{ background-position: 100% 0; } 100%{ background-position: 0% 0; } }

/* Subtle interaction polish for selects across filters */
.filter-block select{ transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.filter-block select:hover{ border-color: #cdd4e1; }
.filter-block select:focus{ border-color: var(--focus); box-shadow: 0 0 0 3px rgba(143,197,253,.35); }

/* ===== Skeletons for fast first paint ===== */
.skeleton-card{ 
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.skeleton-thumb{ 
  aspect-ratio: 1/1; 
  background: linear-gradient(90deg, #eef1f7 25%, #f7f9ff 37%, #eef1f7 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}
.skeleton-meta{ padding:8px 10px 12px; }
.skeleton-line{ height:12px; border-radius:6px; background:#eef1f7; margin:6px 0; }
.skeleton-line.w50{ width:50%; }
.skeleton-line.w70{ width:70%; }
.skeleton-line.w30{ width:30%; }
@keyframes skeletonShimmer{ 0%{ background-position: 100% 0 } 100%{ background-position: 0 0 } }

/* Image fallback overlay for missing images (cards + modal) */
.img-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:12px;
  color:#606b85; font-weight:600; font-size:14px;
  background: linear-gradient(90deg, #eef1f7 25%, #f7f9ff 37%, #eef1f7 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}

/* ===== Extra Filters Toggle ===== */
.filters-extra-toggle-wrap{ display:flex; justify-content:flex-start; margin: 8px 0; }
.extra-filters-toggle{
  background:transparent; border:none; color:var(--text);
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 6px; cursor:pointer; user-select:none; font-size:14px; font-weight:600;
  box-shadow: none;
}
.extra-filters-toggle .chev{ transition: transform .2s; }
.extra-filters-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* Hidden by default; shown when toggled */
.filters-panel .extra-filters{ display:none !important; }
.filters-panel .extra-filters.show{ display:grid !important; }

/* Checkbox list: collapse to 1 column on small screens */

/* Minimal scrollbar styling for checkbox lists */
.filters-panel .checkboxes{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.25) transparent; }
.filters-panel .checkboxes::-webkit-scrollbar{ width: 8px; }
.filters-panel .checkboxes::-webkit-scrollbar-track{ background: transparent; }
.filters-panel .checkboxes::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 8px; }
.filters-panel .checkboxes:hover::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.32); }

/* ===== Search input: match select styling (wrapper + clear + icon) ===== */
.filters-panel .input-wrap{ position:relative; width:100%; }
.filters-panel .input-wrap input[type="text"]{
  width:100%; background:#fff; color:#1d2433; border:1px solid var(--border);
  border-radius:8px; height:36px; padding:7px 32px 7px 32px; outline:none;
}
.filters-panel .input-wrap::before{
  content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; opacity:.65; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23606b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-position:center; background-size:14px 14px; background-repeat:no-repeat;
}
.filters-panel .input-wrap .input-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; border:0; background:transparent; color:var(--muted);
  cursor:pointer; line-height:18px; font-size:14px; padding:0;
}
.filters-panel .input-wrap .input-clear:hover{ color:#111827; }
.filters-panel .input-wrap:focus-within input{ border-color:var(--focus); box-shadow:0 0 0 3px rgba(143,197,253,.35); }

/* Fallback before JS wraps search */
.filters-panel #f_search:not([data-wrapped]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23606b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:10px center; background-size:14px 14px;
  padding-left:32px; border-radius:8px; height:36px;
}

/* ===== Desktop: force top filters into one row even when Catalog is visible ===== */
/* Guard with body:not(.is-portrait) so portrait layout (used for small laptop
   landscape like 1366x768 and close sizes) is not overridden. */
@media (min-width: 1101px){
  body:not(.is-portrait) #filtersPanel .filters-grid{
    grid-template-columns: 1fr repeat(6, max-content) !important;
    align-items: end;
  }
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block{ grid-column: auto !important; min-width: 0 !important; }
  body:not(.is-portrait) #filtersPanel .filters-grid > .fb-qs,
  body:not(.is-portrait) #filtersPanel .filters-grid > #catalogBlock{ margin-right: 0 !important; min-width: 0 !important; }
  body:not(.is-portrait) #filtersPanel .filters-grid > .filter-block:not(.fb-search) .select-wrap{ width:auto !important; display:inline-block !important; max-width:100%; }
  body:not(.is-portrait) #filtersPanel .filters-grid .select-wrap--f_qs,
  body:not(.is-portrait) #filtersPanel .filters-grid .select-wrap--f_supplier{ width:auto !important; min-width:0 !important; }
  body:not(.is-portrait) #filtersPanel #f_qs,
  body:not(.is-portrait) #filtersPanel #f_supplier,
  body:not(.is-portrait) #filtersPanel #f_catalog{ width:auto !important; min-width:0 !important; }
}

  /* Neutralize generic col-* spans inside this row */
  #filtersPanel .filters-grid > .filter-block{ grid-column: auto !important; min-width: 0 !important; }
  /* Remove extra margins that can force wrapping */
  #filtersPanel .filters-grid > .fb-qs,
  #filtersPanel .filters-grid > #catalogBlock{ margin-right: 0 !important; }
  /* Ensure QS and Catalog blocks can shrink inside the grid */
  #filtersPanel .filters-grid > .fb-qs,
  #filtersPanel .filters-grid > .fb-catalog{ min-width: 0 !important; }


/* ===== Checkbox rows: clearer selected state (row highlight) ===== */
.filters-panel .checkboxes label.row.is-checked{
  background:#e7f0ff !important; /* clearer blue highlight */
  border-color:#c7d2fe !important;
}
/* Stronger specificity for checkbox lists to ensure the highlight wins */
.filters-panel .check-grid .checkboxes label.row.is-checked{
  background:#e7f0ff !important;
  border-color:#c7d2fe !important;
}
/* Also reflect selection if class is missing but the input is checked */
.filters-panel .check-grid .checkboxes label.row input[type="checkbox"]:checked ~ span,
.filters-panel .check-grid .checkboxes label.row input[type="checkbox"]:checked{
  background-color:#e7f0ff !important;
}
.filters-panel .checkboxes label.row span{ transition: color .12s ease; }
.filters-panel .checkboxes label.row.is-checked span{ color: var(--text) !important; font-weight:400; }

/* Match dropdown text style for checkbox labels */
.filters-panel .check-grid .checkboxes label.row span{
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
}

/* Unified checkbox containers: two columns, exactly 5 rows tall */
.filters-panel .check-grid .checkboxes,
.filters-panel #c_type{
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-auto-rows: var(--filter-row-h) !important;
  row-gap: var(--filter-row-gap) !important;
  column-gap: 12px !important;
  align-content: start !important;
  height: calc(var(--filter-row-h) * 5 + var(--filter-row-gap) * 4 + var(--filter-pad) * 2 + 5px) !important;
  min-height: calc(var(--filter-row-h) * 5 + var(--filter-row-gap) * 4 + var(--filter-pad) * 2 + 5px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  padding: var(--filter-pad) !important;
  background:#fff !important;
  box-sizing: border-box !important;
}


/* Portrait: render checkbox filters in a single column for readability */
@media (orientation: portrait), (max-width: 768px){
  .filters-panel .check-grid .checkboxes,
  .filters-panel #c_type{
    display: block !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
}

/* (Reverted) Keep default grid layout for filters; flex rules apply via overrides only */

.filters-panel .check-grid label.row{
  height: var(--filter-row-h) !important;
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.filters-panel .check-grid label.row:last-child{ margin-bottom: 0 !important; }

/* ===== Stock arrow: use text content, not ::before fallback ===== */
body #stockArrow{ font-size:12px !important; color:var(--muted); }
body #stockArrow::before{ content:none !important; }
\n/* ===== Ecommerce Selects: stronger visible styling and fallback ===== */
/* Wrapper select appearance */
.filters-panel .select-wrap select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#f9fafb; color:#0f172a; border:1px solid #e5e7eb;
  border-radius:999px; height:38px; padding:8px 36px 8px 12px; outline:none; font-weight:500;
}
.filters-panel .select-wrap select:hover{ background:#f3f6fb; border-color:#dbe1ea; }
.filters-panel .select-wrap select:focus{ border-color:var(--focus); box-shadow:0 0 0 3px rgba(143,197,253,.35); background:#fff; }
.filters-panel .select-wrap.has-value select{ border-color:#c7d2fe; background:#fff; }

/* Fallback: before JS wraps, make selects look improved too */
.filters-panel select:not([data-wrapped]){
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#fff; color:#1d2433; border:1px solid var(--border);
  border-radius:8px; height:36px; padding:7px 40px 7px 12px; outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23606b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position:right 24px center; background-size:14px 14px; background-repeat:no-repeat;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.filters-panel select:not([data-wrapped]):hover{ border-color:#cdd4e1; }
.filters-panel select:not([data-wrapped]):focus{ border-color:var(--focus); box-shadow:0 0 0 3px rgba(143,197,253,.35); }

/* Override stock arrow content safely, later in cascade */
body #stockArrow{ font-size:0; display:inline-flex; align-items:center; justify-content:center; min-width:16px; }
body #stockArrow::before{ content:"\2194"; font-size:12px; color:var(--muted); opacity:.75; }
 




/* Keep Catalog column reserved to avoid layout shift: hide via visibility, not display */


/* Make all top selects ellipsize and never push arrows */
.filters-panel .select-wrap select{ box-sizing: border-box; }
.filters-panel select:not([data-wrapped]){ box-sizing: border-box; }


/* Compact stock control on desktop: prevent wrapping due to text */
@media (min-width: 1101px){
  #filtersPanel .filters-grid{
    grid-template-columns: 1fr repeat(6, max-content) !important;
    align-items: end;
  }
  #filtersPanel .filters-grid > .filter-block{ grid-column: auto !important; min-width: 0 !important; }
  #filtersPanel .filters-grid > .fb-qs,
  #filtersPanel .filters-grid > #catalogBlock{ margin-right: 0 !important; min-width: 0 !important; }
  #filtersPanel .filters-grid > .filter-block:not(.fb-search) .select-wrap{ width:auto !important; display:inline-block !important; max-width:100%; }
  #filtersPanel .filters-grid .select-wrap--f_qs,
  #filtersPanel .filters-grid .select-wrap--f_supplier{ width:auto !important; min-width:0 !important; }
  #filtersPanel #f_qs,
  #filtersPanel #f_supplier,
  #filtersPanel #f_catalog{ width:auto !important; min-width:0 !important; }
}

  .fb-stock .order-text{ display:none !important; }
  .fb-stock .icon-btn.order{ width:34px !important; padding:0 !important; }
/* ===== Final overrides to keep top row stable and consistent ===== */
#f_qs,
.select-wrap--f_qs{ width:100% !important; min-width:0 !important; }

#f_supplier,
.select-wrap--f_supplier{ width:auto !important; min-width:160px !important; }

/* Final tightening to keep Supplier compact and left-aligned */
#filtersPanel .filters-grid > .filter-block.fb-supplier{ justify-self:auto !important; }
#filtersPanel .filters-grid .select-wrap--f_supplier,
#filtersPanel .filters-grid .select-wrap--f_supplier.is-disabled{ width:auto !important; min-width:160px !important; }
#filtersPanel #f_supplier,
#filtersPanel #f_supplier:disabled{ width:auto !important; min-width:160px !important; }
/* Portrait: force Supplier to 100% width */
@media (orientation: portrait), (max-width: 768px){
  #filtersPanel .filters-grid > .filter-block.fb-supplier{ flex:1 1 100% !important; max-width:100% !important; }
  #filtersPanel .filters-grid .select-wrap--f_supplier,
  #filtersPanel .filters-grid .select-wrap--f_supplier.is-disabled,
  #filtersPanel #f_supplier,
  #filtersPanel #f_supplier:disabled{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
}

/* Restore stock order text and keep flexible width */
.fb-stock .order-text{ display:inline !important; }
.fb-stock .icon-btn.order{ width:auto !important; padding:0 10px !important; }

/* Ensure Catalog only shows when .show is present; remove any flicker */
#filtersPanel #catalogBlock{ display:none !important; }
#filtersPanel #catalogBlock.show{ display:block !important; }
/* ===== Final consistent dropdown arrow positioning ===== */
#filtersPanel .select-wrap::after{ right:24px !important; }
#filtersPanel .select-wrap select{ padding-right:40px !important; }
#filtersPanel select:not([data-wrapped]){ background-position: right 24px center !important; padding-right:40px !important; }
/* ===== Final arrow/clear positioning: arrow at far right (8px), clear 20px left */
#filtersPanel .select-wrap::after{ right:8px !important; }
#filtersPanel .select-wrap .select-clear{ right:28px !important; }
#filtersPanel select:not([data-wrapped]){ background-position: right 8px center !important; padding-right:40px !important; }


#filtersPanel .select-wrap--f_pmin,
#filtersPanel .select-wrap--f_wmin,
#filtersPanel .select-wrap--f_pmax,
#filtersPanel .select-wrap--f_wmax{
  width:90px !important;
  min-width:90px !important;
}

/* Lock Supplier width pre/post load so it never shifts */
/* Clamp Fabric supplier dropdown width to prevent pre/post-load shifts */
#filtersPanel .filters-grid .select-wrap--f_supplier,
#filtersPanel .filters-grid .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;
}

/* Stock min/max match same fixed width */
#filtersPanel #f_smin,
#filtersPanel #f_smax{
  width:80px !important;
  min-width:80px !important;
}

#filtersPanel .select-wrap--f_smin,
#filtersPanel .select-wrap--f_smax{
  width:80px !important;
  min-width:80px !important;
}


#filtersPanel #stockBlock .stock-field{
  position:relative;
}
#filtersPanel #stockBlock .stock-field .unit{
  display:none !important;
}
#filtersPanel #stockBlock .stock-field::after{
  content:'m';
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:var(--muted);
  pointer-events:none;
}
#filtersPanel #stockBlock .stock-input{
  width:80px;
  min-width:80px;
  padding-right:24px;
}

/* Search input clear visibility and active look */
#filtersPanel .input-wrap .input-clear{ display:none !important; }
#filtersPanel .input-wrap.has-value .input-clear{ display:inline-flex !important; }
#filtersPanel .input-wrap.has-value input{ background:#f5f7fb !important; border-color:#e2e8f0 !important; }
/* Transform search to uppercase visually */
#f_search{ text-transform: uppercase; }
/* But keep placeholder (default text) in normal case */
#f_search::placeholder{ text-transform: none !important; }
#f_search::-webkit-input-placeholder{ text-transform: none !important; }

/* Active look for selects and numeric min/max when set */
#filtersPanel .select-wrap.has-value select{ background:#f5f7fb !important; border-color:#e2e8f0 !important; }
#filtersPanel .two-selects.is-active .select-wrap:not(.has-value) select{ background:transparent !important; border-color:inherit !important; }
#filtersPanel #stockInverse.is-active{ background:#f5f7fb !important; border-color:#e2e8f0 !important; }


/* Catalog label spacing override */
#filtersPanel #catalogBlock > label{ margin: 0 0 12px 0 !important; }


.order-icon{ width:18px; height:18px; display:inline-block; }


/* Remove shadow from stock order button */
#stockInverse, #stockInverse:hover{ box-shadow: none !important; }


/* ===== Export Modal ===== */
.export-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); z-index:1300; }
.export-modal.show{ display:flex; }
.export-card{ background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); max-width:90vw; width:90vw; max-height:88vh; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.export-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); }
.export-head .title{ font-size:16px; font-weight:700; }
.export-close{ margin-left:auto; background:#fff; border:1px solid var(--border); border-radius:8px; padding:6px 10px; cursor:pointer; }
.export-body{ display:grid; grid-template-columns: 1fr; gap:12px; padding:12px; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; touch-action: pan-y; }
.export-section .section-title{ font-weight:700; margin:0 0 8px 0; }
/* Config/filters table (visually distinct from preview) */
.export-config .config-table{
  width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid var(--border); border-radius:8px; overflow:hidden;
  font-size:13px;
}
.export-config .config-table thead th{
  background:#f3f4f6; color:#111827; font-weight:600; text-align:left;
  border-bottom:1px solid var(--border); padding:8px 10px; white-space:nowrap;
}
.export-config .config-table tbody td, .export-config .config-table tbody th{
  border-bottom:1px solid #edf2f7; padding:8px 10px; vertical-align:middle;
}
.export-config .config-table tbody tr:last-child td, .export-config .config-table tbody tr:last-child th{ border-bottom:0; }
.export-config .config-table .order-cell{ width:120px; text-align:right; white-space:nowrap; }
.export-config .config-table .include-cell{ width:80px; }
.export-config .config-table .name-cell{ width:auto; }

/* Order buttons (improved chevrons) */
.order-btn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--border); border-radius:6px; background:#fff; color:#475569; cursor:pointer; padding:0; margin-left:6px; }
.order-btn:hover{ background:#f8fafc; border-color:#cbd5e1; }
.order-btn:active{ transform:translateY(1px); }
.order-btn:focus{ outline:2px solid #93c5fd; outline-offset:1px; }
.order-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.order-btn .chev{ font-size:14px; line-height:1; }
.export-columns{ display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; align-items:stretch; margin-bottom:10px; }
.export-col-row{ display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:#fff; box-sizing:border-box; flex:0 0 260px; height:44px; }
.export-col-row .reorder{ display:inline-flex; flex-direction:row; gap:6px; }
.export-col-row label span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.export-col-row .drag{ cursor:pointer; user-select:none; font-weight:700; color:#475569; background:transparent; border:none; padding:0; line-height:1; border-radius:6px; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; }
.export-col-row .drag:hover{ background:#f1f5f9; }
.export-col-row .drag:focus{ outline:2px solid #94a3b8; outline-offset:2px; border-radius:6px; }
.export-col-row .drag[disabled]{ opacity:.4; cursor:not-allowed; }
.export-col-row.moved{ animation:exportRowMoved .9s ease-out; }
.export-col-row.drag-over{ box-shadow:0 0 0 2px #93c5fd inset; background:#eff6ff; }
.export-col-row.dragging{ opacity:.6; }
@keyframes exportRowMoved{
  0%{ background:#fef3c7; border-color:#f59e0b; }
  100%{ background:#fff; border-color:var(--border); }
}
.export-col-row label{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.export-preview .table-wrap{
  position:relative;
  overflow-x:auto; /* allow horizontal navigation */
  overflow-y:hidden; /* no vertical scrollbar in preview */
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  max-height:50vh;
  width:100%;
  /* hide scrollbars cross-browser while keeping scroll behavior */
  -ms-overflow-style:none; /* IE/Edge */
  scrollbar-width:none;    /* Firefox */
}
.export-preview .table-wrap::-webkit-scrollbar{ width:0; height:0; }
.export-preview .table-wrap::before{
  content:""; position:absolute; top:0; bottom:0; left:0; right:0; pointer-events:none; border-radius:8px;
  /* side scrims, default hidden via size 0 */
  background:
    linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)) left center/0 100% no-repeat,
    linear-gradient(to left,  rgba(255,255,255,1), rgba(255,255,255,0)) right center/0 100% no-repeat;
  opacity:0; transition:opacity .15s ease;
}
.export-preview .table-wrap.has-h-left::before{ background-size:24px 100%, 0 100%; opacity:1; }
.export-preview .table-wrap.has-h-right::before{ background-size:0 100%, 24px 100%; opacity:1; }
.export-preview .table-wrap.has-h-left.has-h-right::before{ background-size:24px 100%, 24px 100%; opacity:1; }
.export-preview .table-wrap.has-more{ border-bottom-color: transparent; }
.export-preview .table-wrap.has-more::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:56px; /* fully cover last row area */
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  border-bottom-left-radius:8px; border-bottom-right-radius:8px;
}
.export-preview .mini-table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:12px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
.export-preview .mini-table col{ width:auto; }
.export-preview .mini-table thead th{ position:sticky; top:0; z-index:1; background:#eef2ff; color:#1f2937; font-weight:700; border-bottom:1px solid #cbd5e1; padding:6px 8px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.export-preview .mini-table tbody td{ border-top:1px solid #e5e7eb; padding:6px 8px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.export-foot{ display:flex; justify-content:flex-end; padding:10px 12px; border-top:1px solid var(--border); }

/* Export download button styling (restored) */
.export-download{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--text);
  border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; cursor:pointer;
  box-shadow:var(--shadow);
  min-height:34px; line-height:1;
  transition: box-shadow .2s ease, transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.export-download .icon{ display:inline-grid; place-items:center; width:18px; height:18px; color:var(--muted); }
.export-download .label{ font-weight:600; }
.export-download:hover{ background:#f5f7fb; transform:translateY(-1px); box-shadow:0 10px 24px rgba(19,33,68,.08); border-color:#dfe6ff; }
.export-download:active{ transform: translateY(0); }
.export-download:focus-visible{ outline:3px solid rgba(147,197,253,.55); outline-offset:2px; }

/* Export Catalog source select styling */
.export-columns .export-col-row{ align-items:center; }
.export-catalog-source{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.export-catalog-source .ec-label{ font-size:12px; color:var(--muted); }
.export-catalog-source .ec-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  height:32px; padding:4px 28px 4px 10px; min-width:140px;
}
.export-catalog-source .ec-select:focus{ border-color:var(--focus); box-shadow:0 0 0 3px rgba(147,197,253,.35); outline:none; }
.export-catalog-source{ position:relative; }
.export-catalog-source::after{
  content:""; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; opacity:.6; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23606b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position:center; background-size:14px 14px; background-repeat:no-repeat;
}

/* Hide any leftover ordering UI in export columns */
.export-col-row .reorder, .export-col-row .drag, .order-btn{ display:none !important; }

.export-preview .mini-table tbody tr:nth-child(even){ background:#f9fafb; }


/* Hide inner span.chev text (we draw arrows with ::before) */
.order-btn .chev{ display:inline-block; width:0; height:0; overflow:hidden; }
.order-btn.move-left::before{ content:"\25C0"; }
.order-btn.move-right::before{ content:"\25B6"; }

/* Keep chips horizontal when using config-columns-table */
.config-columns-table .export-columns{ display:flex; flex-wrap:wrap; gap:8px; }
.config-columns-table th{ width:100%; }




main.container{overflow-x:hidden}

/* ==========================================================================
   Embedded theme for Fabric Offer Tracking iframe only
   Keeps the default gallery experience untouched.
   ========================================================================== */
body.fg-embedded .container{
  max-width:100% !important;
  padding:8px !important;
}
html.fg-embedded,
body.fg-embedded{
  background:#ffffff !important;
}

body.fg-embedded #embedFiltersToggle{
  appearance:none;
  border:1px solid #d4dce8;
  background:#fff;
  color:#1d2433;
  border-radius:10px;
  height:36px;
  padding:0 12px;
  margin:0 0 8px 0;
  font-size:13px;
  font-weight:600;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;
}
body.fg-embedded #embedFiltersToggle:hover{
  background:#f7f9fd;
  border-color:#c7d1e3;
}
body.fg-embedded #embedFiltersToggle:focus-visible{
  outline:2px solid #8fb4ff;
  outline-offset:2px;
}

/* Collapsed by default in embedded mode; opened by JS toggle class */
body.fg-embedded #filtersPanel{
  display:none !important;
}
body.fg-embedded.fg-embedded-filters-open #filtersPanel{
  display:block !important;
}

/* 5 cards per row on embedded desktop, with responsive fallback */
body.fg-embedded #galleryPanel{
  padding:10px !important;
}
body.fg-embedded .gallery{
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:10px !important;
}
@media (max-width:1320px){
  body.fg-embedded .gallery{ grid-template-columns:repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width:880px){
  body.fg-embedded .gallery{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width:640px){
  body.fg-embedded .gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width:420px){
  body.fg-embedded .gallery{ grid-template-columns:repeat(1, minmax(0, 1fr)) !important; }
}

/* Hide elements requested for embed presentation */
body.fg-embedded .swatch-wrap.swatch-in-image,
body.fg-embedded .stock-info--card,
body.fg-embedded .details-qr,
body.fg-embedded .thumb .qr{
  display:none !important;
}

/* Compact card information for the embedded container */
body.fg-embedded .card{
  border-radius:0 0 10px 10px;
}
body.fg-embedded .meta{
  padding:6px 8px 8px !important;
  gap:4px !important;
}
body.fg-embedded .code-row{
  gap:6px !important;
}
body.fg-embedded .code-meta{
  gap:1px !important;
}
body.fg-embedded .rowchips{
  gap:4px !important;
}
body.fg-embedded .kv{
  padding:4px 6px !important;
  font-size:11px !important;
}
body.fg-embedded .stock,
body.fg-embedded .subline,
body.fg-embedded .compo .heading,
body.fg-embedded .compo .line,
body.fg-embedded .compo .weight-badge{
  font-size:11px !important;
  line-height:1.3 !important;
}
body.fg-embedded .compo{
  padding:5px 7px !important;
}

/* Embedded modal: responsive and consistent inside iframe containers */
body.fg-embedded .modal{
  padding:8px !important;
}
body.fg-embedded .modal-card{
  width:calc(100vw - 16px) !important;
  max-width:calc(100vw - 16px) !important;
  max-height:calc(100vh - 16px) !important;
  border-radius:12px !important;
}
body.fg-embedded .modal-header{
  padding:8px 10px !important;
}
body.fg-embedded .code-big{
  font-size:clamp(30px, 3.5vw, 42px) !important;
}
body.fg-embedded .detail.no-look,
body.fg-embedded .detail.has-look{
  grid-template-columns:minmax(0, 1fr) !important;
}
body.fg-embedded .detail .imgwrap{
  padding:8px !important;
  height:auto !important;
  max-height:none !important;
}
body.fg-embedded .detail .imgwrap > img{
  width:100% !important;
  height:auto !important;
  max-height:min(60vh, 640px) !important;
  object-fit:contain !important;
}
body.fg-embedded .specs{
  border-left:none !important;
  border-top:1px solid var(--border) !important;
  padding:10px 12px !important;
}
body.fg-embedded .specs-list{
  max-height:min(30vh, 320px) !important;
}
body.fg-embedded .look-side{
  display:none !important;
}
body.fg-embedded .nav-prev{ left:14px !important; }
body.fg-embedded .nav-next{ right:14px !important; }