/* ─────────────────────────────────────────────────────────────
   AZE_Featured — „Vybrané produkty“ pod sliderom.

   Karty vnútri sú .aze-cat-prod z katalógu (eshop.css) a tie čítajú
   --az-line / --az-cream / --az-red / --az-black. Tie tokeny sú
   deklarované na .aze-cat, čo tu nie je nadradený prvok — preto si
   ich sekcia musí vypísať sama, inak by karty stratili farby.
   ───────────────────────────────────────────────────────────── */

.aze-fp {
  --az-red:   var(--aze-brand);
  --az-red2:  var(--aze-brand-deep);
  --az-black: #141414;
  --az-khaki: #3d403a;
  --az-cream: #f6f5f2;
  --az-steel: #9c9c95;
  --az-line:  rgba(20, 20, 20, 0.08);

  /* pozadie sekcie musí sadnúť na okolie stránky (#f9f9f9), nie čistá biela —
     karty vnútri ostávajú biele, aby sa od podkladu odlíšili */
  --az-bg: #f9f9f9;

  width: 100%;
  padding: 56px clamp(20px, 3vw, 48px) 8px;
  color: var(--az-black);
  background: var(--az-bg);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}
.aze-fp *, .aze-fp *::before, .aze-fp *::after { box-sizing: border-box; }

.aze-fp-in { width: 100%; max-width: 1650px; margin: 0 auto; }

/* ─── HLAVIČKA ─── */
.aze-fp-head {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--az-line);
  margin-bottom: 24px;
}
.aze-fp-head-text { max-width: 720px; }
.aze-fp-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 11px;
  background: rgba(var(--aze-brand-rgb), 0.08);
  color: var(--az-red);
  border: 1px solid rgba(var(--aze-brand-rgb), 0.18);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 14px;
}
.aze-fp-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--az-red); }
.aze-fp-title {
  font-size: clamp(28px, 3.4vw, 42px); font-weight: 700;
  line-height: 1.04; letter-spacing: -0.025em;
  margin: 0 0 12px; color: var(--az-black);
}
.aze-fp-sub { font-size: 14.5px; line-height: 1.6; color: var(--az-khaki); margin: 0; }

.aze-fp-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--az-line); border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  color: var(--az-black); text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.aze-fp-cta svg { width: 16px; height: 16px; }
.aze-fp-cta:hover { color: var(--az-red); border-color: rgba(var(--aze-brand-rgb), 0.4); background: rgba(var(--aze-brand-rgb), 0.05); }

/* ─── ČIPY KATEGÓRIÍ ─── */
.aze-fp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.aze-fp-chip {
  appearance: none; cursor: pointer;
  padding: 8px 16px;
  background: #fff; color: var(--az-khaki);
  border: 1px solid var(--az-line); border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.aze-fp-chip:hover { color: var(--az-black); border-color: rgba(20, 20, 20, 0.2); }
.aze-fp-chip.is-on {
  color: #fff; background: var(--az-black); border-color: var(--az-black);
}

/* ─── CAROUSEL ─── */
.aze-fp-carousel { position: relative; }
.aze-fp-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 4px;
  margin: 0 -4px;
}
.aze-fp-track::-webkit-scrollbar { display: none; }
.aze-fp-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.aze-fp-track.no-click a, .aze-fp-track.no-click button { pointer-events: none; }

/* 4 karty + 3 medzery po 18px */
.aze-fp-item {
  flex: 0 0 auto;
  width: calc((100% - 54px) / 4);
  scroll-snap-align: start;
  display: flex;
}
.aze-fp-item[hidden] { display: none; }
.aze-fp-item > .aze-cat-prod { width: 100%; }

/* ─── ŠÍPKY ─── */
.aze-fp-arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--az-black);
  border: 1px solid var(--az-line); border-radius: 50%;
  box-shadow: 0 8px 22px rgba(20, 20, 20, 0.10);
  cursor: pointer;
  transition: opacity .2s ease, color .2s ease, border-color .2s ease;
}
.aze-fp-arr svg { width: 20px; height: 20px; }
.aze-fp-arr:hover:not(:disabled) { color: var(--az-red); border-color: rgba(var(--aze-brand-rgb), 0.4); }
.aze-fp-arr:disabled { opacity: 0; pointer-events: none; }
.aze-fp-arr--prev { left: -22px; }
.aze-fp-arr--next { right: -22px; }
.aze-fp-carousel.is-static .aze-fp-arr { display: none; }

/* ─── UKAZOVATEĽ POSUNU ─── */
.aze-fp-prog {
  position: relative; height: 3px;
  margin: 24px auto 0; max-width: 240px;
  border-radius: 99px; background: var(--az-line); overflow: hidden;
}
.aze-fp-prog span {
  position: absolute; inset: 0 auto 0 0;
  width: 100%; border-radius: 99px; background: var(--az-red);
  transform-origin: left center; transform: scaleX(0.06);
  transition: transform .2s ease;
}
.aze-fp-carousel.is-static ~ .aze-fp-prog { display: none; }

/* ─── RESPONZÍVNE ─── */
@media (max-width: 1500px) { .aze-fp-arr--prev { left: 6px; } .aze-fp-arr--next { right: 6px; } }
@media (max-width: 1200px) { .aze-fp-item { width: calc((100% - 36px) / 3); } }
@media (max-width: 900px)  {
  .aze-fp-item { width: calc((100% - 18px) / 2); }
  .aze-fp-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
}
@media (max-width: 600px)  {
  .aze-fp { padding-top: 40px; }
  .aze-fp-item { width: 78%; }
  .aze-fp-arr { display: none; }
}