/* ==========================================================================
   Fastkava — B10 vendings / «Обери кав'ярню під свій бюджет»
   Horizontal scroll-snapping slider of machine cards + dots + centered CTA.
   ========================================================================== */

.fk-vend {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 120px);
}

.fk-vend__inner { position: relative; }

/* ---- Head ---------------------------------------------------------------- */
.fk-vend__head { margin-bottom: clamp(28px, 4vw, 56px); }
.fk-vend__kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-size: clamp(10.5px, 1vw, 13px); font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--fk-text-muted);
}
.fk-vend__kicker-line { flex: none; width: 34px; height: 2px; background: var(--fk-accent); }
.fk-vend__title {
  margin: 0;
  font-size: clamp(27px, 4vw, 52px); line-height: 1.12; font-weight: 800; letter-spacing: .5px;
}
.fk-vend__title span { color: var(--fk-heading); }
.fk-vend__title span.fk-vend__title-accent { color: var(--fk-accent); }
.fk-vend__title-line { display: block; }

/* ---- Track --------------------------------------------------------------- */
.fk-vend__track {
  display: flex; align-items: stretch;
  gap: clamp(14px, 1.8vw, 24px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  margin-inline: calc(var(--fk-gutter) * -1);
  padding-inline: var(--fk-gutter);
  scroll-padding-inline-start: var(--fk-gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fk-vend__track::-webkit-scrollbar { display: none; }
.fk-vend__track:focus-visible { outline: 2px solid var(--fk-accent); outline-offset: 4px; }

/* ---- Card ---------------------------------------------------------------- */
/*
 * Per the design the card itself paints nothing — the photo fills the top and
 * the body is glass over whatever is behind the section. The gradient rim is a
 * masked ::before rather than the old padding-box/border-box background, since
 * that trick needs an opaque fill to sit on and would kill the glass.
 */
.fk-vend__card {
  position: relative;
  flex: 0 0 min(392px, 80vw);
  display: flex; flex-direction: column;
  scroll-snap-align: start;
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 90px rgba(255,110,20,.10);

  /*
   * The whole card, a tenth smaller in both axes.
   *
   * `zoom` and not a hand-edit of the numbers: the card's size comes from ~20
   * interlocking values — the flex basis, the photo's aspect-ratio, five
   * clamp() type sizes, the body padding and gaps, the badges, three radii and
   * two breakpoint overrides. Scaling those one at a time guarantees they drift
   * apart. This scales the used values of all of them at once, so the card
   * keeps its exact proportions and only its size changes.
   *
   * `zoom` rather than `transform: scale()` because zoom shrinks the LAYOUT box
   * as well — the track lays the cards out at their new width, with no leftover
   * gap where the old box used to be, and the slider's rect-based scroll maths
   * in theme.js keeps working unchanged.
   *
   * vw-based values inside still resolve against the unscaled viewport and are
   * then scaled here, so `80vw` becomes an effective 72vw — the same 10%.
   *
   * Firefox below 126 ignores this and renders the card at its old size, which
   * is the previous design rather than a broken one.
   */
  zoom: .9;
}
:root[data-theme="light"] .fk-vend__card { box-shadow: 0 24px 60px rgba(26,21,18,.10); }

.fk-vend__card::before {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; padding: 1.5px;
  background: linear-gradient(150deg,
    rgba(251, 83, 0, .80),
    rgba(255, 162, 77, .45) 32%,
    rgba(255, 162, 77, .38) 62%,
    rgba(251, 83, 0, .65));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  pointer-events: none;
}

/* Photo — the design's 392×560 proportion, so it tracks the card at every width. */
.fk-vend__photo { position: relative; aspect-ratio: var(--fk-machine-ratio); overflow: hidden; }
/*
 * The machine photos are 576×1024 (0.5625) inside a ~0.70 frame, so `contain`
 * fitted them by HEIGHT and left the blurred fill showing down both sides.
 * `100% auto` fits by WIDTH instead: the machine fills the card and the ~19.6%
 * height overflow is cropped. That crop is safe — the shots carry ~14% empty
 * backdrop above the kiosk and ~15% below it, so centred it takes ~10% off each
 * end and never reaches the signage or the base.
 *
 * `100% auto` rather than `cover`: it always fits by width, whereas `cover`
 * would silently switch to fitting by height if a wider photo were ever
 * uploaded. The blurred fill stays as the safety net for exactly that case.
 */
.fk-vend__photo-fill {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.1); transform: scale(1.18);
}
.fk-vend__photo-img {
  position: relative; width: 100%; height: 100%;
  background-size: 100% auto; background-repeat: no-repeat;
  background-position: center var(--fk-machine-focus);
}
.fk-vend__photo-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(251,83,0,.18), transparent 62%),
    linear-gradient(180deg, #17110A, #0B0806);
}
:root[data-theme="light"] .fk-vend__photo-ph {
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(251,83,0,.14), transparent 62%),
    linear-gradient(180deg, #FFF6EA, #F3EDE3);
}
.fk-vend__photo-ph-icon {
  width: 96px; height: 96px; opacity: .55;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* Badges + cold-drinks chip */
.fk-vend__badges {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.fk-vend__badge {
  background: var(--fk-accent); color: #fff;
  font-size: clamp(9.5px, .85vw, 11px); font-weight: 800; letter-spacing: 1.5px;
  padding: 8px 12px; border-radius: 8px;
}
.fk-vend__cold {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,7,5,.5); border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
:root[data-theme="light"] .fk-vend__cold {
  background: rgba(255,253,249,.62); border-color: rgba(26,21,18,.18);
}
.fk-vend__cold-icon { width: 22px; height: 22px; background-size: contain; background-repeat: no-repeat; background-position: center; }

/* Body — glass, exactly the treatment the design gives it (same numbers as the
   B8 quiz / B9 calc panels), with a hairline separating it from the photo. */
.fk-vend__body {
  flex: 1; box-sizing: border-box;
  display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 22px);
  padding: clamp(20px, 2vw, 26px) clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px);
  background: rgba(18, 15, 12, .28);
  -webkit-backdrop-filter: blur(34px) saturate(1.5);
  backdrop-filter: blur(34px) saturate(1.5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0 0 27px 27px;
}
:root[data-theme="light"] .fk-vend__body {
  background: rgba(255, 255, 255, .22);
  border-top-color: rgba(26, 21, 18, .08);
}

.fk-vend__name {
  margin: 0;
  font-size: clamp(13px, 1.3vw, 17px); line-height: 1.35; font-weight: 700;
  letter-spacing: clamp(.4px, .05vw, .6px);
  text-transform: uppercase; color: var(--fk-heading);
}

/* Whole-card click target (.fk-vend__cover, a direct child of the card) — the
   rim (z-index 3) is pointer-events:none, so the cover at 4 sits over photo,
   badges and body alike; the buttons at 5 keep their own targets. */
.fk-vend__cover { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.fk-vend__name a { color: inherit; }
.fk-vend__name a:hover,
.fk-vend__card:hover .fk-vend__name a { color: var(--fk-accent); }
.fk-vend__link:focus-visible { outline: none; }
.fk-vend__card:has(.fk-vend__link:focus-visible) { outline: 2px solid var(--fk-accent); outline-offset: 3px; }
/* Hover: the gradient rim becomes a solid 2px accent border (the masked
   ::before's padding IS the border width). */
.fk-vend__card:hover::before { background: var(--fk-accent); padding: 2px; }

/* Price row: "брутто" left, struck-through old + current price right, all on
   one baseline. `margin-top:auto` pins it down so uneven titles still line the
   prices and buttons up across the slider.
   All three are DIRECT flex children on purpose. Wrapping the two prices in
   their own baseline flexbox makes that wrapper's baseline come from its FIRST
   item, so a card with an old price aligned on the small 15px number while a
   card without one aligned on the big 31px number — the prices sat ~11px apart
   across the slider. Flat, they always share one baseline. */
.fk-vend__price-row {
  margin-top: auto;
  display: flex; align-items: baseline; gap: 8px;
}
.fk-vend__price-note {
  margin-right: auto;
  font-size: clamp(10.5px, 1vw, 12.5px); letter-spacing: .5px; color: var(--fk-text-muted);
}
.fk-vend__price-old {
  white-space: nowrap;
  font-size: clamp(12px, 1.1vw, 15px); font-weight: 600; text-decoration: line-through;
  color: var(--fk-text-dim);
}
.fk-vend__price-new {
  white-space: nowrap;
  font-size: clamp(24px, 2.4vw, 31px); font-weight: 800; line-height: 1; color: var(--fk-accent);
}

/* Card actions — no `margin-top: auto` here. The price row above already claims
   the slack; a second auto margin SPLITS it between the two, so cards with a
   short title pushed their price up ~12px while the buttons stayed put. */
.fk-vend__actions { display: flex; gap: clamp(9px, .9vw, 12px); }
.fk-vend__btn {
  position: relative; z-index: 5;   /* above the stretched card link */
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(13px, 1.3vw, 16px) 8px; border-radius: 10px;
  font-size: clamp(10px, 1vw, 12.5px); font-weight: 700; letter-spacing: 1.2px;
  border: 1px solid transparent;
  transition: background-color var(--fk-dur) var(--fk-ease), border-color var(--fk-dur) var(--fk-ease), color var(--fk-dur) var(--fk-ease);
}
.fk-vend__btn--ghost {
  border-color: var(--fk-border-strong);
  background: var(--fk-surface-soft);
  color: var(--fk-text);
}
:root[data-theme="light"] .fk-vend__btn--ghost { border-color: rgba(26,21,18,.22); background: transparent; }
/* FINAL hover: the outline brightens, the label goes full-strength — not orange. */
.fk-vend__btn--ghost:hover { border-color: rgba(255,255,255,.4); color: var(--fk-text-strong); }
:root[data-theme="light"] .fk-vend__btn--ghost:hover { border-color: rgba(26,21,18,.4); }
.fk-vend__btn--primary { background: var(--fk-accent); color: #FFFFFF; }
.fk-vend__btn--primary:hover { background: var(--fk-accent-2); color: #FFFFFF; }

/* ---- Slider controls ------------------------------------------------------
   The dots and arrows themselves are the shared component in base.css — this
   block only positions the row. The old .fk-vend__dot rules were byte-identical
   to what .fk-slider-dot now carries, so they were deleted rather than kept as
   a second copy that could drift. */
.fk-vend__nav { margin-top: clamp(22px, 2.6vw, 34px); }

/* ---- Bottom CTA ---------------------------------------------------------- */
.fk-vend__cta-wrap { display: flex; justify-content: center; margin-top: clamp(24px, 2.8vw, 36px); }
.fk-vend__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(15px, 1.5vw, 19px) clamp(28px, 3.4vw, 46px);
  border-radius: 10px; background: var(--fk-accent); color: #FFFFFF;
  font-size: clamp(12px, 1.1vw, 14px); font-weight: 700; letter-spacing: 1.5px;
  transition: background-color var(--fk-dur) var(--fk-ease), color var(--fk-dur) var(--fk-ease);
}
.fk-vend__cta:hover { background: var(--fk-accent-2); color: #FFFFFF; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .fk-vend__card { flex-basis: min(350px, 82vw); border-radius: 24px; }
  /* Photo ratio steps down with the card via --fk-machine-ratio (tokens.css). */
  /* The blurred backdrop is completely covered now that the photo is fitted by
     width, so on a phone it is a full-card blurred layer per card — eight of
     them — rendering nothing. Kept on desktop purely as the fallback for a
     landscape image, which can afford it. */
  .fk-vend__photo-fill { display: none; }
  .fk-vend__body { border-radius: 0 0 23px 23px; }

  /*
   * Eight backdrop-filters, one per card, each re-sampling and re-blurring what
   * is behind it on every scroll frame — together the largest remaining GPU
   * cost on a phone. Swapped for an opaque panel that reads the same at this
   * size; the background is raised from .28 to .82 to replace the legibility
   * the blur was providing. The glass is kept on the header, the B2 pills and
   * the single calc/quiz panels, where it is the signature and not repeated.
   */
  .fk-vend__body {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(18, 15, 12, .82);
  }
  :root[data-theme="light"] .fk-vend__body { background: rgba(252, 249, 244, .88); }
  .fk-vend__cold { width: 38px; height: 38px; top: 14px; right: 14px; }
  .fk-vend__badges { top: 14px; left: 14px; }
  .fk-vend__badge { padding: 7px 10px; letter-spacing: 1.2px; }
}
@media (max-width: 640px) {
  .fk-vend__card { flex-basis: min(300px, 84vw); border-radius: 20px; }
  .fk-vend__body { border-radius: 0 0 19px 19px; }
  .fk-vend__title-line { display: inline; }
  .fk-vend__cold { width: 34px; height: 34px; top: 12px; right: 12px; }
  .fk-vend__badges { top: 12px; left: 12px; gap: 5px; }
  .fk-vend__badge { padding: 6px 9px; letter-spacing: 1px; border-radius: 6px; }
  .fk-vend__cta-wrap { display: block; }
  .fk-vend__cta { display: flex; width: 100%; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
  .fk-vend__track { scroll-behavior: auto; }
  .fk-vend__dot,
  .fk-vend__btn,
  .fk-vend__cta { transition: none; }
}