/**
 * FlySearch - instant search layer
 *
 * Everything that can be configured in the back office (Appearance tab) is a CSS variable or a
 * modifier class set by flysearch.js on .fs-overlay. Defaults below = the "Light" preset.
 *
 * @author    FlyDev
 * @copyright FlyDev
 * @license   Commercial license
 */
.fs-overlay {
  /* colors (semantic tokens) */
  --fs-primary: #1f6feb;
  --fs-on-primary: #ffffff;         /* computed from the primary luminance */
  --fs-primary-text: #1f6feb;       /* primary adjusted to 4.5:1 on the background, for links */
  --fs-fg: #0f172a;
  --fs-muted-fg: #475569;
  --fs-control-border: #64748b;
  --fs-surface: #ffffff;
  --fs-subtle: #f1f5f9;
  --fs-border: #e2e8f0;
  --fs-sale: #b91c1c;
  --fs-on-sale: #ffffff;
  --fs-mark: #fef08a;
  --fs-scrim: rgba(15, 23, 42, .6);
  --fs-ring: var(--fs-primary);
  /* layout & size */
  --fs-layer-width: 1240px;
  --fs-layer-height: 92vh;
  --fs-offset-top: 24px;
  --fs-panel-width: 520px;
  --fs-facets-width: 264px;
  --fs-card-min: 184px;
  --fs-grid-cols: repeat(auto-fill, minmax(var(--fs-card-min), 1fr));
  --fs-img-ratio: 1 / 1;
  --fs-img-fit: contain;
  /* shape */
  --fs-radius-l: 14px;              /* layer */
  --fs-radius: 10px;                /* cards */
  --fs-radius-s: 6px;
  --fs-control-radius: 999px;       /* buttons, chips, search box */
  --fs-shadow: 0 24px 64px rgba(15, 23, 42, .28);
  /* spacing */
  --fs-space-1: 4px;
  --fs-space-2: 8px;
  --fs-space-3: 12px;
  --fs-space-4: 16px;
  --fs-space-5: 24px;
  --fs-space-6: 32px;
  /* type scale derived from the base size: 12 / 14 / 16 / 18 / 20 at 16px */
  --fs-font: inherit;
  --fs-base: 16px;
  --fs-text-xs: calc(var(--fs-base) * .75);
  --fs-text-s: calc(var(--fs-base) * .875);
  --fs-text-m: var(--fs-base);
  --fs-text-l: calc(var(--fs-base) * 1.125);
  --fs-text-xl: calc(var(--fs-base) * 1.25);
  /* motion: enter decelerates, exit is ~65% of enter and accelerates */
  --fs-dur-enter: 200ms;
  --fs-dur-exit: 130ms;
  --fs-dur-micro: 150ms;
  --fs-ease-out: cubic-bezier(.2, .8, .2, 1);
  --fs-ease-in: cubic-bezier(.4, 0, 1, 1);

  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--fs-offset-top) var(--fs-space-4) var(--fs-space-4);
  background: var(--fs-scrim);
  color: var(--fs-fg);
  font-family: var(--fs-font);
  font-size: var(--fs-text-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  opacity: 1;
  transition: opacity var(--fs-dur-enter) var(--fs-ease-out);
}
.fs-overlay[hidden] { display: none; }
.fs-overlay.fs-entering { opacity: 0; }
.fs-overlay.fs-closing { opacity: 0; transition: opacity var(--fs-dur-exit) var(--fs-ease-in); }
html.fs-locked, html.fs-locked body { overflow: hidden; }
.fs-overlay *, .fs-overlay *::before, .fs-overlay *::after { box-sizing: border-box; }
.fs-overlay button, .fs-overlay a, .fs-overlay label, .fs-overlay select { cursor: pointer; touch-action: manipulation; }
.fs-overlay button, .fs-overlay input, .fs-overlay select { font-family: inherit; }

.fs-overlay :focus { outline: none; }
.fs-overlay :focus-visible { outline: 2px solid var(--fs-ring); outline-offset: 2px; }
.fs-sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layer ---------- */
.fs-layer {
  position: relative;
  width: 100%;
  max-width: var(--fs-layer-width);
  height: min(var(--fs-layer-height), calc(100vh - var(--fs-offset-top) - var(--fs-space-4)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fs-surface);
  border-radius: var(--fs-radius-l);
  box-shadow: var(--fs-shadow);
  transform: none;
  transition: transform var(--fs-dur-enter) var(--fs-ease-out);
}
.fs-entering .fs-layer { transform: translateY(-12px) scale(.985); }
.fs-closing .fs-layer { transform: translateY(-8px); transition: transform var(--fs-dur-exit) var(--fs-ease-in); }

/* display modes (desktop; under 768px the layer is always full screen) */
.fs-valign-center { align-items: center; padding-top: var(--fs-space-4); }
.fs-valign-center .fs-layer { height: min(var(--fs-layer-height), calc(100vh - 2 * var(--fs-space-4))); }

.fs-mode-fullscreen { padding: 0; }
.fs-mode-fullscreen .fs-layer { max-width: none; height: 100%; border-radius: 0; box-shadow: none; }

.fs-mode-panel { padding: 0; justify-content: flex-end; align-items: stretch; }
.fs-mode-panel.fs-panel-left { justify-content: flex-start; }
.fs-mode-panel .fs-layer { max-width: var(--fs-panel-width); height: 100%; border-radius: 0; }
.fs-mode-panel.fs-entering .fs-layer { transform: translateX(32px); }
.fs-mode-panel.fs-panel-left.fs-entering .fs-layer { transform: translateX(-32px); }
.fs-mode-panel.fs-closing .fs-layer { transform: translateX(24px); }
.fs-mode-panel.fs-panel-left.fs-closing .fs-layer { transform: translateX(-24px); }

/* dropdown: the layer is positioned under the theme search field by JS (top / left / width) */
.fs-mode-dropdown.fs-anchored { display: block; padding: 0; }
.fs-mode-dropdown.fs-anchored .fs-layer { position: absolute; max-width: none; }
.fs-mode-dropdown.fs-entering .fs-layer { transform: translateY(-8px); }

/* shadows */
.fs-shadow-none { --fs-shadow: none; }
.fs-shadow-soft { --fs-shadow: 0 8px 28px rgba(15, 23, 42, .16); }

/* ---------- header / search box ---------- */
.fs-header {
  display: flex;
  align-items: center;
  gap: var(--fs-space-3);
  padding: var(--fs-space-4) var(--fs-space-5);
  border-bottom: 1px solid var(--fs-border);
}
.fs-searchbox {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  height: 52px;
  margin: 0;
  padding: 0 var(--fs-space-2) 0 var(--fs-space-4);
  background: var(--fs-subtle);
  border: 2px solid transparent;
  border-radius: min(var(--fs-control-radius), 26px);
  transition: border-color var(--fs-dur-micro) ease, background-color var(--fs-dur-micro) ease;
}
.fs-searchbox:focus-within { background: var(--fs-surface); border-color: var(--fs-primary); }
.fs-searchbox .fs-input:focus-visible { outline: none; }
.fs-searchbox-icon { position: relative; display: flex; color: var(--fs-muted-fg); flex-shrink: 0; }
.fs-spinner {
  position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--fs-border); border-top-color: var(--fs-primary);
  opacity: 0; animation: fs-spin .7s linear infinite;
}
.fs-busy .fs-spinner { opacity: 1; }
.fs-busy .fs-searchbox-icon svg { opacity: 0; }
@keyframes fs-spin { to { transform: rotate(360deg); } }
.fs-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--fs-fg) !important;
  font: inherit;
  font-size: var(--fs-text-l);
  -webkit-appearance: none;
  appearance: none;
}
.fs-input::placeholder { color: var(--fs-muted-fg); opacity: 1; }
.fs-input::-webkit-search-cancel-button, .fs-input::-webkit-search-decoration { -webkit-appearance: none; }
.fs-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fs-fg);
  transition: background-color var(--fs-dur-micro) ease, transform var(--fs-dur-micro) ease;
}
.fs-icon-btn:hover { background: var(--fs-subtle); }
.fs-icon-btn:active { transform: scale(.94); }
.fs-clear-input { width: 36px; height: 36px; color: var(--fs-muted-fg); }
.fs-clear-input[hidden] { display: none; }
/* voice search */
.fs-voice { position: relative; color: var(--fs-muted-fg); }
.fs-voice[hidden] { display: none; }
.fs-voice:hover { color: var(--fs-fg); }
.fs-listening .fs-voice { background: var(--fs-primary); color: var(--fs-on-primary); }
.fs-listening .fs-voice::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--fs-primary);
  animation: fs-pulse 1.4s ease-out infinite;
}
@keyframes fs-pulse { from { box-shadow: 0 0 0 0 var(--fs-primary); opacity: .6; } to { box-shadow: 0 0 0 12px var(--fs-primary); opacity: 0; } }
.fs-listening .fs-input::placeholder { color: var(--fs-primary-text); }
.fs-voice-msg {
  margin: 0;
  padding: var(--fs-space-2) var(--fs-space-5);
  border-bottom: 1px solid var(--fs-border);
  background: var(--fs-subtle);
  color: var(--fs-fg);
  font-size: var(--fs-text-s);
}
.fs-voice-msg[hidden] { display: none; }
.fs-close { background: var(--fs-subtle); }
.fs-close:hover { background: var(--fs-border); }

/* ---------- body ---------- */
.fs-body { flex: 1; display: flex; min-height: 0; }
.fs-facets-right .fs-body { flex-direction: row-reverse; }
.fs-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--fs-space-4) var(--fs-space-5) var(--fs-space-6);
}

/* ---------- facets ---------- */
.fs-facets {
  width: var(--fs-facets-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--fs-border);
  background: var(--fs-surface);
}
.fs-facets-right .fs-facets { border-right: 0; border-left: 1px solid var(--fs-border); }
.fs-facets-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--fs-space-4) var(--fs-space-5); }
.fs-no-facets .fs-facets, .fs-no-facets .fs-filter-toggle, .fs-home .fs-facets { display: none !important; }
.fs-no-results:not(.fs-filtered) .fs-facets, .fs-no-results:not(.fs-filtered) .fs-toolbar { display: none; }
.fs-facets-head, .fs-facets-foot { display: none; }
.fs-facet { margin: 0 0 var(--fs-space-5); padding: 0; border: 0; min-width: 0; }
.fs-facet-title {
  display: block;
  width: 100%;
  margin: 0 0 var(--fs-space-2);
  padding: 0;
  border: 0;
  color: var(--fs-fg);
  font-size: var(--fs-text-s);
  font-weight: 600;
  letter-spacing: .01em;
}
.fs-facet ul { list-style: none; margin: 0; padding: 0; }
.fs-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.fs-facet .fs-facet-title { margin: 0 0 var(--fs-space-1); }
.fs-facet-head {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  width: 100%;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fs-fg);
  font-size: var(--fs-text-s);
  font-weight: 600;
  text-align: left;
}
.fs-facet-head > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fs-facet-selected {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--fs-primary); color: var(--fs-on-primary);
  font-size: var(--fs-text-xs); line-height: 20px; text-align: center; font-variant-numeric: tabular-nums;
}
.fs-chevron { flex-shrink: 0; color: var(--fs-muted-fg); transition: transform var(--fs-dur-micro) ease; }
.fs-facet-head[aria-expanded="false"] .fs-chevron { transform: rotate(-90deg); }
.fs-facet-body[hidden] { display: none; }
.fs-facet-search {
  width: 100%;
  height: 36px;
  margin: var(--fs-space-1) 0 var(--fs-space-2);
  padding: 0 var(--fs-space-3);
  border: 1px solid var(--fs-control-border);
  border-radius: var(--fs-radius-s);
  background: var(--fs-surface);
  color: var(--fs-fg);
  font-size: var(--fs-text-s);
}
.fs-facet li[hidden] { display: none; }
/* buttons & color swatches: a real checkbox, visually replaced by a pill */
.fs-display-buttons, .fs-display-swatch { display: flex; flex-wrap: wrap; gap: var(--fs-space-2); }
.fs-overlay .fs-facet .fs-option { display: block; min-height: 0; margin: 0; padding: 0; }
.fs-overlay .fs-facet .fs-option:hover { background: none; }
.fs-option-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.fs-option-box {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-2);
  min-height: 36px;
  padding: 0 var(--fs-space-3);
  border: 1px solid var(--fs-control-border);
  border-radius: var(--fs-control-radius);
  background: var(--fs-surface);
  color: var(--fs-fg);
  font-size: var(--fs-text-s);
  transition: border-color var(--fs-dur-micro) ease, background-color var(--fs-dur-micro) ease;
}
.fs-option:hover .fs-option-box { border-color: var(--fs-fg); }
.fs-option-input:checked + .fs-option-box { border-color: var(--fs-primary); background: var(--fs-primary); color: var(--fs-on-primary); font-weight: 600; }
.fs-option-input:checked + .fs-option-box .fs-facet-count { background: transparent; color: inherit; }
.fs-option-input:focus-visible + .fs-option-box { outline: 2px solid var(--fs-ring); outline-offset: 2px; }
.fs-option-box .fs-facet-value { flex: none; }
.fs-display-swatch .fs-option-input:checked + .fs-option-box { background: var(--fs-subtle); color: var(--fs-fg); border-width: 2px; }
.fs-swatch-dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .25); }
.fs-facet li { margin: 0; }
.fs-overlay .fs-facet label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--fs-space-2);
  min-height: 32px;
  margin: 0 calc(var(--fs-space-2) * -1);
  padding: var(--fs-space-1) var(--fs-space-2);
  border-radius: var(--fs-radius-s);
  color: var(--fs-fg);
  font-size: var(--fs-text-s);
  font-weight: 400;
  text-align: left;
  transition: background-color var(--fs-dur-micro) ease;
}
.fs-overlay .fs-facet label:hover { background: var(--fs-subtle); }
.fs-facet input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--fs-primary); }
.fs-facet-value { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fs-facet-count {
  flex-shrink: 0;
  min-width: 28px;
  padding: 0 var(--fs-space-2);
  border-radius: 999px;
  background: var(--fs-subtle);
  color: var(--fs-muted-fg);
  font-size: var(--fs-text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: center;
}
.fs-link-btn {
  min-height: 32px;
  padding: var(--fs-space-1) 0;
  border: 0;
  background: none;
  color: var(--fs-primary-text);
  font-size: var(--fs-text-s);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fs-link-btn:hover { text-decoration-thickness: 2px; }

.fs-price-inputs { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--fs-space-2); align-items: end; }
.fs-overlay .fs-price-field { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: var(--fs-text-xs); color: var(--fs-muted-fg); cursor: default; }
.fs-price-field input {
  width: 100%;
  height: 40px;
  padding: 0 var(--fs-space-2);
  border: 1px solid var(--fs-control-border);
  border-radius: var(--fs-radius-s);
  background: var(--fs-surface);
  color: var(--fs-fg);
  font-size: var(--fs-text-s);
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */
.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  min-height: 40px;
  padding: 0 var(--fs-space-4);
  border: 1px solid transparent;
  border-radius: min(var(--fs-control-radius), 10px);
  font-size: var(--fs-text-s);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--fs-dur-micro) ease, border-color var(--fs-dur-micro) ease, transform var(--fs-dur-micro) ease, filter var(--fs-dur-micro) ease;
}
.fs-btn:active { transform: scale(.97); }
.fs-btn-primary { background: var(--fs-primary); color: var(--fs-on-primary); }
.fs-btn-primary:hover { filter: brightness(.92); }
.fs-btn-secondary { background: var(--fs-surface); border-color: var(--fs-control-border); color: var(--fs-fg); }
.fs-btn-secondary:hover { background: var(--fs-subtle); }
.fs-btn-dark { min-height: 36px; padding: 0 var(--fs-space-3); background: var(--fs-fg); color: var(--fs-surface); }
.fs-btn-dark:hover { filter: brightness(1.25); }
.fs-btn-lg { min-height: 48px; padding: 0 var(--fs-space-5); font-size: var(--fs-text-m); border-radius: var(--fs-control-radius); }

/* ---------- toolbar ---------- */
.fs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-3);
  margin-bottom: var(--fs-space-3);
}
.fs-home .fs-toolbar { display: none; }
.fs-count { margin: 0; color: var(--fs-muted-fg); font-size: var(--fs-text-s); font-variant-numeric: tabular-nums; }
.fs-count strong { color: var(--fs-fg); font-weight: 600; }
.fs-toolbar-actions { display: flex; gap: var(--fs-space-2); align-items: center; }
.fs-overlay .fs-sort-label { display: flex; align-items: center; gap: var(--fs-space-2); margin: 0; color: var(--fs-muted-fg); font-size: var(--fs-text-s); font-weight: 400; }
.fs-no-sort .fs-sort-label { display: none; }
.fs-sort {
  height: 40px;
  padding: 0 var(--fs-space-6) 0 var(--fs-space-3);
  border: 1px solid var(--fs-control-border);
  border-radius: var(--fs-radius-s);
  background-color: var(--fs-surface);
  background-image: linear-gradient(45deg, transparent 50%, var(--fs-muted-fg) 50%), linear-gradient(135deg, var(--fs-muted-fg) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  color: var(--fs-fg);
  font-size: var(--fs-text-s);
  -webkit-appearance: none;
  appearance: none;
}
.fs-filter-toggle { display: none; }
.fs-filter-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--fs-primary); color: var(--fs-on-primary); font-size: var(--fs-text-xs);
  font-variant-numeric: tabular-nums;
}
.fs-filter-badge:empty { display: none; }

/* ---------- chips: active filters, suggestions, popular, recent ---------- */
.fs-active-filters, .fs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-space-2); margin-bottom: var(--fs-space-4); }
.fs-active-filters:empty, .fs-chips:empty { display: none; }
.fs-chips-title { margin-right: var(--fs-space-1); color: var(--fs-muted-fg); font-size: var(--fs-text-s); }
.fs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-1);
  min-height: 36px;
  padding: 0 var(--fs-space-3);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-control-radius);
  background: var(--fs-surface);
  color: var(--fs-fg);
  font-size: var(--fs-text-s);
  overflow-wrap: anywhere;
  transition: border-color var(--fs-dur-micro) ease, background-color var(--fs-dur-micro) ease;
}
.fs-chip:hover { border-color: var(--fs-primary); background: var(--fs-subtle); }
.fs-chip-active { border-color: var(--fs-primary); background: var(--fs-subtle); font-weight: 500; }
.fs-chip-active svg { color: var(--fs-muted-fg); }
.fs-dym { margin: 0 0 var(--fs-space-3); color: var(--fs-muted-fg); font-size: var(--fs-text-s); }
.fs-dym:empty { display: none; }
.fs-dym button { padding: 0; border: 0; background: none; color: var(--fs-primary-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.fs-home-panel:empty, .fs-home-popular:empty, .fs-home-reco:empty { display: none; }
.fs-home-title { margin: 0 0 var(--fs-space-3); color: var(--fs-fg); font-size: var(--fs-text-l); font-weight: 700; line-height: 1.3; }

/* home screen: popular searches column + recommended products carousel */
.fs-home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fs-space-5); }
.fs-home-grid.fs-has-popular.fs-has-reco { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); }
.fs-popular-list { margin: 0; padding: 0; list-style: none; }
.fs-popular-list li { margin: 0; }
.fs-popular-link {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: var(--fs-space-1) 0;
  border: 0;
  background: none;
  color: var(--fs-fg);
  font-size: var(--fs-text-s);
  text-align: left;
  overflow-wrap: anywhere;
}
.fs-popular-link:hover { color: var(--fs-primary-text); text-decoration: underline; text-underline-offset: 3px; }
.fs-compact .fs-home-grid.fs-has-popular.fs-has-reco { grid-template-columns: minmax(0, 1fr); }
.fs-compact .fs-popular-list { display: flex; flex-wrap: wrap; gap: var(--fs-space-2); }
.fs-compact .fs-popular-link { width: auto; min-height: 36px; padding: 0 var(--fs-space-3); border: 1px solid var(--fs-border); border-radius: var(--fs-control-radius); }

/* carousel: native horizontal scroll with snap, arrows outside the cards */
.fs-carousel-frame { position: relative; display: flex; align-items: center; gap: var(--fs-space-2); }
.fs-overlay .fs-carousel-track {
  --fs-carousel-cols: 5;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: calc((100% - (var(--fs-carousel-cols) - 1) * var(--fs-space-4)) / var(--fs-carousel-cols));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 2px var(--fs-space-2);
}
.fs-carousel-track::-webkit-scrollbar { display: none; }
.fs-carousel-track > li { scroll-snap-align: start; }
.fs-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--fs-radius-s);
  background: none;
  color: var(--fs-primary-text);
  transition: opacity var(--fs-dur-micro) ease, background-color var(--fs-dur-micro) ease;
}
.fs-carousel-btn:hover:not(:disabled) { background: var(--fs-subtle); }
.fs-carousel-btn:disabled { opacity: .3; cursor: default; }
.fs-carousel-static .fs-carousel-btn { visibility: hidden; }
.fs-compact .fs-carousel-frame { gap: 0; }
.fs-compact .fs-carousel-btn { width: 28px; }
.fs-empty-reco { margin-top: var(--fs-space-6); text-align: left; }

.fs-recent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-space-2); margin-bottom: var(--fs-space-5); }
.fs-recent .fs-chips-title { font-weight: 600; color: var(--fs-fg); }
.fs-recent-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--fs-control-border);
  border-radius: var(--fs-control-radius);
  background: var(--fs-surface);
  transition: border-color var(--fs-dur-micro) ease;
}
.fs-recent-chip:hover { border-color: var(--fs-fg); }
.fs-recent-query {
  min-height: 36px;
  padding: 0 var(--fs-space-1) 0 var(--fs-space-3);
  border: 0;
  border-radius: var(--fs-control-radius) 0 0 var(--fs-control-radius);
  background: none;
  color: var(--fs-fg);
  font-size: var(--fs-text-s);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: left;
}
.fs-recent-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0 var(--fs-control-radius) var(--fs-control-radius) 0;
  background: none;
  color: var(--fs-muted-fg);
}
.fs-recent-remove:hover { color: var(--fs-fg); background: var(--fs-subtle); }

.fs-banner:empty { display: none; }
.fs-banner { margin-bottom: var(--fs-space-4); }
.fs-banner a { display: block; border-radius: var(--fs-radius); }
.fs-banner img { display: block; width: 100%; height: auto; border-radius: var(--fs-radius); }

/* ---------- results ---------- */
.fs-results {
  display: grid;
  grid-template-columns: var(--fs-grid-cols);
  gap: var(--fs-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity var(--fs-dur-micro) ease;
}
.fs-stale .fs-results { opacity: .55; }
.fs-results > li { margin: 0; min-width: 0; }
.fs-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  background: var(--fs-surface);
  color: var(--fs-fg) !important;
  text-decoration: none !important;
  transition: box-shadow var(--fs-dur-micro) ease, border-color var(--fs-dur-micro) ease, transform var(--fs-dur-micro) ease;
}
.fs-card:hover { border-color: var(--fs-control-border); box-shadow: 0 6px 20px rgba(15, 23, 42, .12); }
.fs-card:active { transform: scale(.985); }
.fs-card:focus-visible { outline: 2px solid var(--fs-ring); outline-offset: 2px; }
.fs-cards-shadow .fs-card { border-color: transparent; box-shadow: 0 2px 10px rgba(15, 23, 42, .1); }
.fs-cards-shadow .fs-card:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, .16); }
.fs-cards-flat .fs-card { border-color: transparent; background: transparent; }
.fs-cards-flat .fs-card:hover { box-shadow: none; border-color: var(--fs-border); }
.fs-cards-flat .fs-card-body { padding-left: 0; padding-right: 0; }
.fs-card-img { position: relative; display: block; aspect-ratio: var(--fs-img-ratio); overflow: hidden; background: var(--fs-subtle); border-radius: inherit; }
.fs-card .fs-card-img { border-radius: 0; }
.fs-cards-flat .fs-card-img { border-radius: var(--fs-radius); }
.fs-card-img img { display: block; width: 100%; height: 100%; object-fit: var(--fs-img-fit); }
.fs-noimg { display: block; width: 100%; height: 100%; }
.fs-badges { position: absolute; top: var(--fs-space-2); left: var(--fs-space-2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--fs-space-1); }
.fs-badge { padding: 2px var(--fs-space-2); border-radius: var(--fs-radius-s); font-size: var(--fs-text-xs); font-weight: 700; line-height: 1.5; }
.fs-badge-discount { background: var(--fs-sale); color: var(--fs-on-sale); }
.fs-badge-oos { background: #334155; color: #ffffff; }
.fs-card-body { flex: 1; display: flex; flex-direction: column; gap: var(--fs-space-1); padding: var(--fs-space-3); }
.fs-card-brand { color: var(--fs-muted-fg); font-size: var(--fs-text-xs); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.fs-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-text-s);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.fs-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--fs-muted-fg);
  font-size: var(--fs-text-xs);
  line-height: 1.5;
}
.fs-card-name mark { padding: 0 1px; border-radius: 2px; background: var(--fs-mark); color: inherit; font-weight: 600; }
.fs-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fs-space-2); margin-top: auto; padding-top: var(--fs-space-2); font-variant-numeric: tabular-nums; }
.fs-price { color: var(--fs-fg); font-size: var(--fs-text-m); font-weight: 700; }
.fs-price-sale { color: var(--fs-sale); }
.fs-price-old { color: var(--fs-muted-fg); font-size: var(--fs-text-s); }

.fs-skeleton { pointer-events: none; }
.fs-skeleton .fs-card-img, .fs-skeleton-line {
  background: linear-gradient(90deg, var(--fs-subtle) 0, var(--fs-border) 50%, var(--fs-subtle) 100%);
  background-size: 200% 100%;
  animation: fs-shimmer 1.2s ease-in-out infinite;
}
.fs-skeleton-line { display: block; height: 12px; border-radius: 4px; }
.fs-skeleton-line + .fs-skeleton-line { margin-top: var(--fs-space-2); }
@keyframes fs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- empty state & footer ---------- */
.fs-empty:empty { display: none; }
.fs-empty { padding: var(--fs-space-6) var(--fs-space-4); text-align: center; }
.fs-empty-title, .fs-empty-hint, .fs-empty-popular { max-width: 480px; margin-left: auto; margin-right: auto; }
.fs-empty-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; margin-bottom: var(--fs-space-3); border-radius: 50%; background: var(--fs-subtle); color: var(--fs-muted-fg); }
.fs-empty-title { margin: 0 0 var(--fs-space-2); color: var(--fs-fg); font-size: var(--fs-text-l); font-weight: 600; overflow-wrap: anywhere; }
.fs-empty-hint { margin: 0 0 var(--fs-space-4); color: var(--fs-muted-fg); font-size: var(--fs-text-s); }

.fs-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fs-space-3); margin-top: var(--fs-space-5); }
.fs-footer[hidden], .fs-more[hidden], .fs-see-all[hidden] { display: none; }

/* ---------- compact layer (narrow panel, dropdown or phone): filters in a drawer ---------- */
.fs-compact .fs-filter-toggle { display: inline-flex; }
.fs-compact.fs-home .fs-filter-toggle, .fs-compact.fs-no-results:not(.fs-filtered) .fs-filter-toggle { display: none; }
.fs-compact .fs-main { padding: var(--fs-space-3) var(--fs-space-4) var(--fs-space-6); }
.fs-compact .fs-facets {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  z-index: 2;
  width: min(88%, 360px);
  border-right: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform var(--fs-dur-exit) var(--fs-ease-in), visibility 0s linear var(--fs-dur-exit);
}
.fs-compact.fs-facets-right .fs-facets { left: auto; right: 0; border-left: 0; transform: translateX(100%); }
.fs-compact.fs-facets-open .fs-facets {
  visibility: visible;
  transform: none;
  box-shadow: 0 0 48px rgba(15, 23, 42, .3);
  transition: transform var(--fs-dur-enter) var(--fs-ease-out), visibility 0s;
}
.fs-compact.fs-facets-open .fs-layer::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: var(--fs-scrim); }
.fs-compact .fs-facets-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--fs-space-2) var(--fs-space-2) var(--fs-space-2) var(--fs-space-5);
  border-bottom: 1px solid var(--fs-border);
  font-size: var(--fs-text-l); font-weight: 600;
}
.fs-compact .fs-facets-foot { display: block; padding: var(--fs-space-3) var(--fs-space-5); border-top: 1px solid var(--fs-border); }
.fs-compact .fs-facets-foot .fs-btn { width: 100%; min-height: 48px; }

/* ---------- AI assistant (chat mode) ---------- */
.fs-overlay { --fs-ai: #6d28d9; --fs-ai-soft: #f5f3ff; --fs-ai-border: #ddd6fe; }
.fs-header { position: relative; }
.fs-ai-btn {
  display: inline-flex; align-items: center; gap: var(--fs-space-2); flex-shrink: 0;
  min-height: 44px; padding: 0 var(--fs-space-4);
  border: 1px solid var(--fs-ai-border); border-radius: var(--fs-control-radius);
  background: var(--fs-ai-soft); color: var(--fs-ai);
  font: inherit; font-size: var(--fs-text-s); font-weight: 600; white-space: nowrap;
  transition: background-color var(--fs-dur-micro) ease, border-color var(--fs-dur-micro) ease, transform var(--fs-dur-micro) ease;
}
.fs-ai-btn:hover { border-color: var(--fs-ai); }
.fs-ai-btn:active { transform: scale(.97); }
.fs-ai-btn[aria-pressed="true"] { background: var(--fs-ai); border-color: var(--fs-ai); color: #fff; }
.fs-ai-btn:focus-visible, .fs-chat-send:focus-visible, .fs-ai-crit-x:focus-visible { outline: 2px solid var(--fs-ai); outline-offset: 2px; }
.fs-chat-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--fs-space-3); min-height: 52px; }
.fs-chat-head[hidden], .fs-searchbox[hidden], .fs-body[hidden], .fs-chat[hidden] { display: none; }
.fs-chat-title { flex: 1; min-width: 0; margin: 0; color: var(--fs-fg); font-size: var(--fs-text-l); font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-chat-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--fs-ai), var(--fs-primary)); color: #fff;
}
.fs-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--fs-surface); }
.fs-chat-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--fs-space-4); padding: var(--fs-space-5); }
.fs-msg { display: flex; gap: var(--fs-space-3); max-width: 920px; width: 100%; margin: 0 auto; }
.fs-msg-body { min-width: 0; color: var(--fs-fg); font-size: var(--fs-text-m); line-height: 1.5; }
.fs-msg-ai .fs-msg-body { flex: 1; }
.fs-overlay .fs-msg-text { color: var(--fs-fg); font-size: var(--fs-text-m); line-height: 1.5; }
.fs-msg-text { margin: 0 0 var(--fs-space-2); max-width: 70ch; padding: var(--fs-space-3) var(--fs-space-4); border-radius: 4px 16px 16px 16px; background: var(--fs-subtle); }
.fs-msg-user { justify-content: flex-end; }
.fs-msg-user .fs-msg-body { max-width: min(80%, 60ch); padding: var(--fs-space-3) var(--fs-space-4); border-radius: 16px 4px 16px 16px; background: var(--fs-ai); color: #fff; overflow-wrap: anywhere; }
.fs-overlay .fs-msg-error .fs-msg-text { background: #fef2f2; color: #991b1b; }
.fs-ai-label { margin: var(--fs-space-2) 0 var(--fs-space-1); color: var(--fs-muted-fg); font-size: var(--fs-text-s); font-weight: 600; }
.fs-ai-note { margin: 0 0 var(--fs-space-2); color: var(--fs-muted-fg); font-size: var(--fs-text-s); }
.fs-ai-suggest { display: flex; flex-wrap: wrap; gap: var(--fs-space-2); margin: var(--fs-space-1) 0 var(--fs-space-2); }
.fs-ai-chip { cursor: pointer; text-align: left; }
.fs-ai-chip:hover { border-color: var(--fs-ai); background: var(--fs-ai-soft); }
.fs-ai-quick .fs-ai-chip { border-color: var(--fs-ai-border); color: var(--fs-ai); font-weight: 600; }
.fs-ai-understood { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-space-2); margin: 0 0 var(--fs-space-3); }
.fs-ai-understood:empty { display: none; }
.fs-ai-understood .fs-ai-label { margin: 0; }
.fs-ai-crit { padding-right: var(--fs-space-1); border-color: var(--fs-ai-border); background: var(--fs-ai-soft); color: var(--fs-fg); }
.fs-ai-crit-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fs-muted-fg); }
.fs-ai-crit-x:hover { background: var(--fs-ai-border); color: var(--fs-fg); }
.fs-overlay .fs-ai-results { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--fs-space-3); margin-bottom: var(--fs-space-3); }
.fs-ai-results .fs-card-desc { display: none; }
.fs-ai-see { margin-bottom: var(--fs-space-2); }
.fs-ai-feedback { display: flex; align-items: center; gap: var(--fs-space-1); margin-top: var(--fs-space-1); color: var(--fs-muted-fg); }
.fs-ai-feedback .fs-icon-btn { width: 36px; height: 36px; color: var(--fs-muted-fg); }
.fs-ai-feedback .fs-down svg { transform: rotate(180deg); }
.fs-ai-feedback [aria-pressed="true"] { background: var(--fs-ai-soft); color: var(--fs-ai); }
.fs-ai-thanks { font-size: var(--fs-text-s); }
.fs-dots { display: inline-flex; gap: 4px; padding: var(--fs-space-3) var(--fs-space-4); border-radius: 4px 16px 16px 16px; background: var(--fs-subtle); }
.fs-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--fs-muted-fg); animation: fs-dot 1.2s ease-in-out infinite; }
.fs-dots i:nth-child(2) { animation-delay: .15s; }
.fs-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes fs-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.fs-chat-composer {
  display: flex; align-items: flex-end; gap: var(--fs-space-2);
  width: calc(100% - 2 * var(--fs-space-5)); max-width: 920px; margin: 0 auto; padding: var(--fs-space-2);
  border: 2px solid var(--fs-border); border-radius: 26px; background: var(--fs-surface);
  transition: border-color var(--fs-dur-micro) ease;
}
.fs-chat-composer:focus-within { border-color: var(--fs-ai); }
.fs-chat-input {
  flex: 1; min-width: 0; min-height: 40px; max-height: 120px; margin: 0; padding: 8px var(--fs-space-3) !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none;
  color: var(--fs-fg) !important; font: inherit; font-size: var(--fs-text-m); line-height: 1.5; resize: none;
}
.fs-overlay .fs-chat-input:focus, .fs-overlay .fs-chat-input:focus-visible { outline: none !important; box-shadow: none !important; }
.fs-chat-input::placeholder { color: var(--fs-muted-fg); opacity: 1; }
.fs-chat-mic { width: 40px; height: 40px; color: var(--fs-muted-fg); }
.fs-chat-mic[hidden] { display: none; }
.fs-chat-mic.fs-listening { background: var(--fs-ai); color: #fff; }
.fs-chat-send {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--fs-ai); color: #fff;
  transition: filter var(--fs-dur-micro) ease, transform var(--fs-dur-micro) ease;
}
.fs-chat-send:hover { filter: brightness(1.1); }
.fs-chat-send:active { transform: scale(.94); }
.fs-chat-send:disabled { opacity: .5; cursor: progress; }
.fs-chat-disclaimer { max-width: 920px; margin: var(--fs-space-2) auto var(--fs-space-3); padding: 0 var(--fs-space-5); color: var(--fs-muted-fg); font-size: var(--fs-text-xs); line-height: 1.4; text-align: center; }
.fs-chat-disclaimer a { color: var(--fs-primary-text); font-weight: 600; }
.fs-coach {
  position: absolute; z-index: 3; top: calc(100% - 4px); right: var(--fs-space-5);
  width: min(300px, calc(100% - 2 * var(--fs-space-4))); padding: var(--fs-space-3) var(--fs-space-4);
  border-radius: 12px; background: var(--fs-fg); color: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, .3);
  font-size: var(--fs-text-s); animation: fs-coach-in var(--fs-dur-enter) var(--fs-ease-out);
}
.fs-coach::before { content: ""; position: absolute; top: -6px; right: 120px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); }
.fs-overlay .fs-coach p { margin: 0 0 var(--fs-space-2); color: #fff; font-size: var(--fs-text-s); line-height: 1.45; }
.fs-coach .fs-btn { min-height: 36px; }
@keyframes fs-coach-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fs-compact .fs-ai-btn-label { display: none; }
.fs-compact .fs-ai-btn { width: 44px; padding: 0; justify-content: center; }

/* ---------- phone: always full screen ---------- */
@media (max-width: 767px) {
  .fs-overlay, .fs-overlay.fs-mode-dropdown.fs-anchored { display: flex; padding: 0; align-items: stretch; justify-content: center; }
  .fs-overlay .fs-layer, .fs-mode-dropdown.fs-anchored .fs-layer {
    position: relative; top: auto !important; left: auto !important; width: 100% !important;
    max-width: none; height: 100%; border-radius: 0; box-shadow: none;
  }
  .fs-entering .fs-layer, .fs-mode-panel.fs-entering .fs-layer { transform: translateY(16px); }
  .fs-header { padding: var(--fs-space-2) var(--fs-space-3); padding-top: max(var(--fs-space-2), env(safe-area-inset-top)); }
  .fs-searchbox { height: 48px; }
  .fs-input { font-size: 16px; height: 44px; } /* 16px avoids iOS zoom */
  .fs-compact .fs-main, .fs-main { padding: var(--fs-space-3) var(--fs-space-3) calc(var(--fs-space-6) + env(safe-area-inset-bottom)); }
  .fs-results { grid-template-columns: repeat(var(--fs-cols-mobile, 2), minmax(0, 1fr)); gap: var(--fs-space-3); }
  .fs-toolbar { flex-wrap: nowrap; }
  .fs-count { flex: 1; min-width: 0; }
  .fs-sort-label span { display: none; }
  .fs-sort, .fs-filter-toggle { height: 44px; }
  .fs-sort { max-width: 46vw; }
  .fs-compact .fs-facets-head { padding-top: max(var(--fs-space-2), env(safe-area-inset-top)); }
  .fs-compact .fs-facets-foot { padding-bottom: max(var(--fs-space-3), env(safe-area-inset-bottom)); }
  .fs-overlay .fs-facet label { min-height: 44px; }
  .fs-recent-query { min-height: 44px; }
  .fs-recent-remove { width: 44px; height: 44px; }
  .fs-btn-dark { min-height: 44px; }
  .fs-ai-btn-label { display: none; }
  .fs-ai-btn { width: 44px; padding: 0; justify-content: center; }
  .fs-chat-log { padding: var(--fs-space-3); }
  .fs-msg-ai .fs-chat-avatar { display: none; }
  .fs-chat-composer { width: calc(100% - 2 * var(--fs-space-3)); }
  .fs-chat-input { font-size: 16px; }
  .fs-chat-disclaimer { margin-bottom: max(var(--fs-space-2), env(safe-area-inset-bottom)); padding: 0 var(--fs-space-3); }
  .fs-overlay .fs-ai-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-coach { right: var(--fs-space-3); }
  .fs-coach::before { right: 70px; }
  .fs-chat-head .fs-chat-avatar { display: none; }
}

.fs-no-anim, .fs-no-anim *, .fs-no-anim *::before, .fs-no-anim *::after { transition-duration: 1ms !important; }
@media (prefers-reduced-motion: reduce) {
  .fs-overlay, .fs-overlay *, .fs-overlay *::before, .fs-overlay *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .fs-entering .fs-layer, .fs-closing .fs-layer { transform: none !important; }
  .fs-spinner { animation: none; }
}
@media (forced-colors: active) {
  .fs-card, .fs-searchbox, .fs-chip, .fs-recent-chip, .fs-chat-composer, .fs-ai-btn, .fs-msg-text, .fs-msg-user .fs-msg-body { border: 1px solid CanvasText; }
  .fs-card-name mark { forced-color-adjust: none; }
}