/* Флюсенко — база: скидання, типографіка, сітка, кнопки, поля, спільні компоненти. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fl-paper-50);
  color: var(--fl-graphite-700);
  font-family: var(--fl-font-body);
  font-size: var(--fl-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fl-font-display);
  color: var(--fl-graphite-900);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.06;
  margin: 0 0 .5em;
}
h1 { font-size: var(--fl-h1); }
h2 { font-size: var(--fl-h2); }
h3 { font-size: var(--fl-h3); font-weight: 700; }
h4 { font-size: var(--fl-h4); font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0 0 1em; max-width: 68ch; }

.fl-mono { font-family: var(--fl-font-mono); font-variant-numeric: tabular-nums; }
.fl-overline {
  font-family: var(--fl-font-mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--fl-graphite-500);
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.fl-dark .fl-overline { color: var(--fl-graphite-300); }

/* --- Сітка --- */
.fl-container { width: 100%; max-width: var(--fl-container); margin-inline: auto; padding-inline: var(--fl-gutter); }
.fl-section { padding-block: var(--fl-section); }
.fl-section--tight { padding-block: calc(var(--fl-section) * .6); }

.fl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.fl-head__text { min-width: 0; }
.fl-head h2 { margin-bottom: .25rem; }
.fl-head__sub { color: var(--fl-graphite-500); margin: 0; }

.fl-grid { display: grid; gap: 1.5rem; }
.fl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .fl-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .fl-grid--4, .fl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .fl-grid--3, .fl-grid--2 { grid-template-columns: 1fr; } }

/* --- Кнопки --- */
.fl-btn {
  --btn-bg: var(--fl-amber-500);
  --btn-fg: var(--fl-ink-on-amber);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .75rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--fl-r-btn);
  font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background var(--fl-dur) var(--fl-ease), box-shadow var(--fl-dur) var(--fl-ease), transform var(--fl-dur) var(--fl-ease), color var(--fl-dur) var(--fl-ease);
}
.fl-btn:hover { --btn-bg: var(--fl-amber-600); box-shadow: var(--fl-glow-amber); }
.fl-btn:active { transform: translateY(1px); }
.fl-btn--ghost { --btn-bg: transparent; --btn-fg: var(--fl-graphite-900); --btn-bd: var(--fl-graphite-100); }
.fl-btn--ghost:hover { --btn-bg: transparent; --btn-bd: var(--fl-amber-500); --btn-fg: var(--fl-amber-600); box-shadow: none; }
.fl-dark .fl-btn--ghost { --btn-fg: var(--fl-dark-text); --btn-bd: rgba(255,255,255,.35); }
.fl-dark .fl-btn--ghost:hover { --btn-fg: var(--fl-amber-400); --btn-bd: var(--fl-amber-500); }
.fl-btn--dark { --btn-bg: var(--fl-graphite-900); --btn-fg: #fff; }
.fl-dark .fl-btn--dark { --btn-bg: #fff; --btn-fg: var(--fl-graphite-900); }
.fl-btn--sm { min-height: 40px; padding: .4rem 1rem; font-size: .9375rem; }
.fl-btn--block { width: 100%; }

.fl-link-more { color: var(--fl-amber-700); font-weight: 600; text-decoration: none; white-space: nowrap; }
.fl-link-more:hover { text-decoration: underline; }
.fl-dark .fl-link-more { color: var(--fl-amber-500); }

/* --- Фокус --- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fl-amber-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.fl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--fl-amber-500); color: var(--fl-ink-on-amber);
  padding: .75rem 1.25rem; font-weight: 700; border-radius: 0 0 var(--fl-r-btn) 0;
}
.fl-skip:focus { left: 0; }

.screen-reader-text, .fl-sr {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Чипи --- */
.fl-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .3rem .75rem; border-radius: var(--fl-r-pill);
  border: 1px solid var(--fl-graphite-100); background: var(--fl-paper-0);
  font-size: .875rem; color: var(--fl-graphite-700); text-decoration: none;
  transition: border-color var(--fl-dur) var(--fl-ease), background var(--fl-dur) var(--fl-ease), color var(--fl-dur) var(--fl-ease);
}
.fl-chip:hover { border-color: var(--fl-amber-500); color: var(--fl-graphite-900); }
.fl-chip.is-active { background: var(--fl-graphite-900); border-color: var(--fl-graphite-900); color: #fff; }
.fl-chip--spec { font-family: var(--fl-font-mono); font-size: .6875rem; padding: .2rem .5rem; background: var(--fl-paper-50); color: var(--fl-graphite-500); }
.fl-dark .fl-chip { background: transparent; border-color: var(--fl-dark-line); color: var(--fl-graphite-300); }

.fl-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fl-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; scroll-snap-type: x proximity; }
.fl-chips--scroll::-webkit-scrollbar { display: none; }
.fl-chips--scroll > * { flex: 0 0 auto; scroll-snap-align: start; }

/* --- Бейджі --- */
.fl-badge {
  display: inline-block; padding: .25rem .6rem; border-radius: var(--fl-r-pill);
  font-size: .75rem; font-weight: 700; line-height: 1.4;
  background: var(--fl-amber-100); color: var(--fl-ink-on-amber);
}
.fl-badge--sale { background: var(--fl-graphite-900); color: #fff; }
.fl-badge--new  { background: var(--fl-pcb-100); color: var(--fl-pcb-600); }
.fl-badge--out  { background: var(--fl-graphite-100); color: var(--fl-graphite-500); }

/* --- Штамп --- */
.fl-stamp {
  display: inline-block; font-family: var(--fl-font-mono); font-size: .6875rem;
  letter-spacing: .06em; color: var(--fl-amber-700);
  border: 1px dashed var(--fl-copper-500); border-radius: var(--fl-r-pill);
  padding: .25rem .7rem;
}

/* --- Наявність --- */
.fl-stock { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem; color: var(--fl-graphite-500); }
.fl-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fl-pcb-600); flex: 0 0 auto; }
.fl-stock--low::before { background: var(--fl-amber-500); }
.fl-stock--out::before { background: var(--fl-graphite-300); }

/* --- Картка-поверхня --- */
.fl-card {
  background: var(--fl-paper-0);
  border: 1px solid var(--fl-graphite-100);
  border-radius: var(--fl-r-card);
  transition: transform var(--fl-dur) var(--fl-ease), box-shadow var(--fl-dur) var(--fl-ease), border-color var(--fl-dur) var(--fl-ease);
}
.fl-card--pad { padding: 1.5rem; }
.fl-panel { background: var(--fl-paper-0); border: 1px solid var(--fl-graphite-100); border-radius: var(--fl-r-panel); padding: clamp(1.25rem, .8rem + 1.6vw, 2rem); }

/* --- Порада майстра --- */
.fl-tip {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--fl-amber-100); border: 1px solid #F3E2BD;
  border-radius: var(--fl-r-card); padding: 1.25rem 1.5rem;
  color: var(--fl-graphite-900);
}
.fl-tip__drop { flex: 0 0 auto; width: 32px; height: 32px; }
.fl-tip p { margin: 0; }
.fl-tip strong { display: block; margin-bottom: .15rem; }

/* --- Довірчі чипи --- */
.fl-trust { display: flex; flex-wrap: wrap; gap: .75rem; }
.fl-trust__item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border: 1px solid var(--fl-graphite-100);
  border-radius: var(--fl-r-pill); font-size: .875rem; color: var(--fl-graphite-700);
  background: var(--fl-paper-0);
}
.fl-dark .fl-trust__item { background: transparent; border-color: var(--fl-dark-line); color: var(--fl-graphite-300); }
.fl-trust__item svg { flex: 0 0 auto; color: var(--fl-amber-500); }

/* --- Порожній стан --- */
.fl-empty { text-align: center; padding: clamp(2rem, 1rem + 5vw, 4.5rem) 1rem; }
.fl-empty svg, .fl-empty img { margin: 0 auto 1.5rem; }
.fl-empty h2 { margin-bottom: .5rem; }
.fl-empty p { margin-inline: auto; color: var(--fl-graphite-500); }
.fl-empty__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* --- Хлібні крихти --- */
.fl-breadcrumbs { font-family: var(--fl-font-mono); font-size: .8125rem; color: var(--fl-graphite-500); padding-block: 1.25rem; }
.fl-breadcrumbs a { text-decoration: none; }
.fl-breadcrumbs a:hover { color: var(--fl-amber-600); text-decoration: underline; }

/* --- Акордеон --- */
.fl-acc { border: 1px solid var(--fl-graphite-100); border-radius: var(--fl-r-card); background: var(--fl-paper-0); overflow: hidden; }
.fl-acc + .fl-acc { margin-top: .75rem; }
.fl-acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; background: none; border: 0; cursor: pointer; text-align: left;
  font-weight: 700; font-size: 1.0625rem; color: var(--fl-graphite-900);
}
.fl-acc__icon { flex: 0 0 auto; width: 20px; height: 20px; position: relative; }
.fl-acc__icon::before, .fl-acc__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--fl-amber-600);
  transform: translateY(-50%); transition: transform var(--fl-dur) var(--fl-ease);
}
.fl-acc__icon::after { transform: translateY(-50%) rotate(90deg); }
.fl-acc[open] .fl-acc__icon::after { transform: translateY(-50%) rotate(0deg); }
.fl-acc__body { padding: 0 1.25rem 1.25rem; color: var(--fl-graphite-500); }
.fl-acc__body p:last-child { margin-bottom: 0; }

/* --- Форми --- */
.fl-field { display: block; margin-bottom: 1rem; }
.fl-field > span, .fl-label { display: block; font-size: .875rem; font-weight: 600; color: var(--fl-graphite-700); margin-bottom: .35rem; }
.fl-input, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], textarea, select {
  width: 100%; padding: .8rem 1rem; min-height: 48px;
  background: var(--fl-paper-0); color: var(--fl-graphite-900);
  border: 1px solid var(--fl-graphite-100); border-radius: var(--fl-r-btn);
  transition: border-color var(--fl-dur) var(--fl-ease), box-shadow var(--fl-dur) var(--fl-ease);
}
.fl-input:focus, input:focus, textarea:focus, select:focus { border-color: var(--fl-amber-500); box-shadow: 0 0 0 3px var(--fl-amber-100); outline: none; }
textarea { min-height: 120px; resize: vertical; }
.fl-hint { font-size: .8125rem; color: var(--fl-graphite-500); margin-top: .3rem; }

/* --- Ціна --- */
.fl-price { font-family: var(--fl-font-display); font-weight: 800; color: var(--fl-graphite-900); letter-spacing: -.02em; }
.fl-price del { font-family: var(--fl-font-body); font-weight: 500; color: var(--fl-graphite-300); font-size: .8em; margin-left: .4rem; }
.fl-price ins { text-decoration: none; }

/* --- Утиліти --- */
.fl-dotgrid {
  background-image: radial-gradient(circle, var(--fl-dark-line) 1px, transparent 1px);
  background-size: 24px 24px;
}
.fl-glow { position: relative; }
.fl-glow::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 65% 45%, rgba(242,169,59,.18), transparent 70%);
}
.fl-hide-mobile { }
@media (max-width: 860px) { .fl-hide-mobile { display: none !important; } }
@media (min-width: 861px) { .fl-only-mobile { display: none !important; } }