/* ==========================================================================
   Fastkava — catalogue sub-pages
   B3.1 all drinks · B10.1 all machines · B10.2 machine detail
   Shared page chrome (glows, head, chips, CTA panel) then per-page pieces.
   ========================================================================== */

/*
 * The surface starts at the document top, not at .fk-page's top.
 *
 * .fk-page begins below the sticky header (see the body_class note in
 * inc/setup.php), so painting the surface only there left a lighter band across
 * the header. Colouring the body means the strip behind the header, and any
 * space past the last section, is the same tone as the page itself.
 */
body.fkl-surface { background: var(--fk-flow-bg); }

.fk-page {
  position: relative;
  /* No `overflow: hidden` — the glows below sit at negative offsets and would
     be sliced into hard rectangles, exactly as they were in .fk-quiz. */
  /* Top spacing only — `.fk-site-main` already pays back the sticky header's
     -84px margin (`padding-top: var(--fk-header-h) + 40px`), so anything added
     here is a SECOND header offset and the page opens with a dead band. */
  padding-block: clamp(4px, 1vw, 12px) clamp(56px, 7vw, 90px);
  background: var(--fk-flow-bg);
  overflow-x: clip;
}
.fk-page__inner { position: relative; z-index: 1; }

/*
 * Ambient glows, painted rather than blurred.
 *
 * These used to be solid-colour circles carrying `filter: blur(150px)`. That is
 * the most expensive way to draw a soft shape on a phone: to blur by radius r
 * the engine has to allocate a backing buffer roughly 3r wider and taller than
 * the element on EVERY side, at device pixel density. At 150px and DPR 3 that
 * is on the order of 50MB per glow — and this page carries three. On a page
 * only ~8 screens tall you are never far from one, so Safari cannot evict them
 * to reclaim memory, and once it runs short it stops rasterising tiles: the
 * symptom is content that scrolls in blank and only paints seconds later.
 *
 * A radial gradient that already fades to transparent needs no blur to look
 * soft — only enough stops not to band. It costs one gradient fill, no layer,
 * no buffer. Same trick bgfx.css uses for the phone orbs.
 *
 * The boxes grow by 2x the old blur radius (and the offsets shift by half that)
 * so the painted falloff covers the same ground the blur's bleed used to, and
 * the peak alpha drops slightly because a blur never quite kept the original
 * centre value.
 */
.fk-page__glow { position: absolute; z-index: 0; pointer-events: none; }
.fk-page__glow--a {
  top: calc(clamp(-160px, -11vw, -100px) - 150px);
  right: calc(clamp(-120px, -8.3vw, -80px) - 150px);
  width: calc(clamp(320px, 41.7vw, 600px) + 300px);
  height: calc(clamp(280px, 34.7vw, 500px) + 300px);
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(251, 83, 0, .17) 0%,
    rgba(251, 83, 0, .155) 18%,
    rgba(251, 83, 0, .12) 34%,
    rgba(251, 83, 0, .075) 50%,
    rgba(251, 83, 0, .04) 64%,
    rgba(251, 83, 0, .018) 78%,
    rgba(251, 83, 0, .005) 90%,
    transparent 100%);
}
.fk-page__glow--b {
  bottom: calc(clamp(-220px, -15.3vw, -120px) - 150px);
  left: calc(clamp(-200px, -13.9vw, -110px) - 150px);
  width: calc(clamp(300px, 44.4vw, 640px) + 300px);
  height: calc(clamp(300px, 44.4vw, 640px) + 300px);
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(120, 70, 30, .15) 0%,
    rgba(120, 70, 30, .135) 18%,
    rgba(120, 70, 30, .105) 34%,
    rgba(120, 70, 30, .066) 50%,
    rgba(120, 70, 30, .035) 64%,
    rgba(120, 70, 30, .016) 78%,
    rgba(120, 70, 30, .004) 90%,
    transparent 100%);
}
:root[data-theme="light"] .fk-page__glow--a {
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(251, 83, 0, .115) 0%,
    rgba(251, 83, 0, .105) 18%,
    rgba(251, 83, 0, .08) 34%,
    rgba(251, 83, 0, .05) 50%,
    rgba(251, 83, 0, .027) 64%,
    rgba(251, 83, 0, .012) 78%,
    rgba(251, 83, 0, .003) 90%,
    transparent 100%);
}
:root[data-theme="light"] .fk-page__glow--b {
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(200, 130, 70, .115) 0%,
    rgba(200, 130, 70, .105) 18%,
    rgba(200, 130, 70, .08) 34%,
    rgba(200, 130, 70, .05) 50%,
    rgba(200, 130, 70, .027) 64%,
    rgba(200, 130, 70, .012) 78%,
    rgba(200, 130, 70, .003) 90%,
    transparent 100%);
}

/* ---- Page head ----------------------------------------------------------- */
.fk-page__kicker {
  display: flex; align-items: center; gap: clamp(10px, .85vw, 12px);
  margin-bottom: clamp(10px, 1.1vw, 16px);
  font-size: clamp(10.5px, .9vw, 13px); font-weight: 700;
  letter-spacing: clamp(1.8px, .21vw, 3px); text-transform: uppercase;
  color: var(--fk-text-muted);
}
.fk-page__kicker-line { flex: none; width: clamp(26px, 2.4vw, 34px); height: 2px; background: var(--fk-accent); }

.fk-page__title {
  margin: 0;
  font-size: clamp(27px, 3.6vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; text-wrap: balance;
  color: var(--fk-heading);
}
.fk-page__title-accent { color: var(--fk-accent); }
.fk-page__sub {
  margin: clamp(8px, 1vw, 14px) 0 0;
  font-size: clamp(11.5px, .94vw, 13.5px); font-weight: 600; letter-spacing: .5px;
  color: var(--fk-text-muted);
}

/* ---- Controls ------------------------------------------------------------ */
.fk-page__controls {
  display: flex; align-items: flex-start; gap: clamp(12px, 1.1vw, 16px);
  margin-top: clamp(20px, 2vw, 30px);
  flex-wrap: wrap;
}
.fk-search { flex: none; width: min(320px, 100%); }
.fk-search__input {
  box-sizing: border-box; width: 100%;
  padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--fk-border-strong);
  background: var(--fk-surface-soft);
  color: var(--fk-heading);
  font: inherit; font-size: 13px;
  outline: none;
}
.fk-search__input::placeholder { color: var(--fk-text-dim); }
.fk-search__input:focus-visible { border-color: var(--fk-accent); }

.fk-page__chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.fk-page--machines .fk-page__chips { margin-top: clamp(20px, 2vw, 30px); }

.fk-chip {
  flex: none; cursor: pointer;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--fk-border-strong);
  background: var(--fk-surface-soft);
  color: var(--fk-text-muted);
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .7px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.fk-chip:hover { color: var(--fk-text-strong); border-color: var(--fk-accent); }
.fk-chip.is-active { background: var(--fk-accent); border-color: var(--fk-accent); color: #FFFFFF; }

.fk-page__result {
  margin: clamp(12px, 1.1vw, 16px) 0 0;
  font-size: 12.5px; font-weight: 700; color: var(--fk-accent);
}
.fk-page__empty {
  margin: clamp(24px, 3vw, 40px) 0 0;
  font-size: 14px; font-weight: 600; color: var(--fk-text-muted);
}

/* ---- B3.1 menu ----------------------------------------------------------- */
.fk-menu { display: flex; flex-direction: column; gap: clamp(24px, 2.4vw, 34px); margin-top: clamp(24px, 2.2vw, 32px); }
.fk-menu__group-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 10px;
  font-size: clamp(11.5px, .97vw, 14px); font-weight: 800; letter-spacing: 1.4px;
  color: var(--fk-heading);
}
.fk-menu__group-rule { flex: 1; height: 1px; background: rgba(251, 83, 0, .28); }
.fk-menu__group-count { flex: none; font-size: 11px; font-weight: 800; color: var(--fk-accent); }

.fk-menu__items {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px 28px;
}
/* Icon 3x and name 1.5x their original size (22px / clamp(11px, .87vw, 12.5px)).
   The gap grows with them — 8px read as cramped once the icon tripled — and the
   no-image fallback dot is scaled by the same 3x so it still sits centred. */
.fk-menu__item { display: flex; align-items: center; gap: 12px; padding: 3px 0; }
.fk-menu__icon {
  flex: none; width: 66px; height: 66px;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  /* No image on a drink? A small accent dot keeps the row aligned. */
  background-image: radial-gradient(circle 7.8px at 50% 55%, rgba(251, 83, 0, .8) 0 7.8px, rgba(0, 0, 0, 0) 7.9px);
}
/* 1.2x the original 12.5px, as a whole number. No clamp(): a vw term computes to
   a fractional size at most widths, so the only way to guarantee an integer at
   every viewport is a fixed value plus a breakpoint step (see the 700px block). */
.fk-menu__name { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--fk-text); }

/* ---- Machine grid + card ------------------------------------------------- */
.fk-mgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 24px);
  margin-top: clamp(24px, 2.2vw, 32px);
}
.fk-mcard {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 90px rgba(255, 110, 20, .10);
}
:root[data-theme="light"] .fk-mcard { box-shadow: 0 24px 60px rgba(26, 21, 18, .10); }
.fk-mcard[hidden] { display: none; }

.fk-mcard::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;
}

/* Same frame as the B10 slider card — see --fk-machine-ratio in tokens.css. */
.fk-mcard__photo { position: relative; aspect-ratio: var(--fk-machine-ratio); overflow: hidden; }
/* Fitted by width over a blurred copy, same as the home slider — see the note
   on .fk-vend__photo-img in vendings.css for why `100% auto` and not `cover`. */
.fk-mcard__photo-fill {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.1); transform: scale(1.18);
}
.fk-mcard__photo-img {
  position: relative; width: 100%; height: 100%;
  background-size: 100% auto; background-repeat: no-repeat;
  background-position: center var(--fk-machine-focus);
}
.fk-mcard__badges { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.fk-mcard__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-mcard__cold {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  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-mcard__cold { background: rgba(255,253,249,.62); border-color: rgba(26,21,18,.18); }
.fk-mcard__cold-icon { width: 22px; height: 22px; background-size: contain; background-repeat: no-repeat; background-position: center; }

.fk-mcard__body {
  flex: 1; box-sizing: border-box;
  display: flex; flex-direction: column; gap: clamp(16px, 1.5vw, 20px);
  padding: clamp(20px, 1.8vw, 24px) clamp(20px, 1.9vw, 26px) clamp(20px, 1.9vw, 26px);
  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-mcard__body { background: rgba(255,255,255,.22); border-top-color: rgba(26,21,18,.08); }

.fk-mcard__name {
  margin: 0;
  font-size: clamp(13px, 1.08vw, 15.5px); line-height: 1.35; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--fk-heading);
}
.fk-mcard__name a { color: inherit; }
.fk-mcard__name a:hover,
.fk-mcard:hover .fk-mcard__name a { color: var(--fk-accent); }

/*
 * Whole-card click target: .fk-mcard__cover is a direct child of the card,
 * stretched over it at z-index 4 — above photo, badges and the glass body, below
 * the buttons (5). A real link, so it opens in a new tab, shows the URL on hover
 * and works with JS off. (A ::after on the title link was tried first and only
 * covered the body: its backdrop-filter is a containing block for absolute
 * descendants.)
 */
.fk-mcard__cover { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.fk-mcard__link:focus-visible { outline: none; }
.fk-mcard:has(.fk-mcard__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-mcard:hover::before { background: var(--fk-accent); padding: 2px; }

.fk-mcard__price-row { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.fk-mcard__note { margin-right: auto; font-size: clamp(10.5px, .83vw, 12px); letter-spacing: .5px; color: var(--fk-text-muted); }
.fk-mcard__price-old {
  white-space: nowrap; font-size: clamp(12px, .97vw, 14px); font-weight: 600;
  text-decoration: line-through; color: var(--fk-text-dim);
}
.fk-mcard__price-new {
  white-space: nowrap; font-size: clamp(22px, 1.94vw, 28px); font-weight: 800; line-height: 1;
  color: var(--fk-accent);
}
.fk-mcard__actions { display: flex; gap: 12px; }
/* Both buttons sit ABOVE the stretched card link (z-index 4), so a click on
   either does what the button says rather than opening the machine page. */
.fk-mcard__btn {
  position: relative; z-index: 5;
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(13px, 1.04vw, 15px) 8px; border-radius: 10px;
  border: 1px solid transparent;
  font-size: clamp(10px, .83vw, 12px); font-weight: 700; letter-spacing: 1.1px;
  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-mcard__btn--ghost {
  border-color: var(--fk-border-strong);
  background: var(--fk-surface-soft);
  color: var(--fk-text);
}
:root[data-theme="light"] .fk-mcard__btn--ghost { border-color: rgba(26,21,18,.22); background: transparent; }
.fk-mcard__btn--ghost:hover { border-color: rgba(255,255,255,.4); color: var(--fk-text-strong); }
:root[data-theme="light"] .fk-mcard__btn--ghost:hover { border-color: rgba(26,21,18,.4); }
/* Same orange as .fk-vend__btn--primary on the home page — one look for "reserve". */
.fk-mcard__btn--primary { background: var(--fk-accent); color: #FFFFFF; }
.fk-mcard__btn--primary:hover { background: var(--fk-accent-2); color: #FFFFFF; }

/* ---- CTA panel ----------------------------------------------------------- */
.fk-panelcta {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 2.8vw, 40px);
  margin-top: clamp(36px, 3.9vw, 56px);
  box-sizing: border-box;
  border: 1.5px solid var(--fk-accent); border-radius: 20px;
  padding: clamp(24px, 2.6vw, 38px) clamp(22px, 3vw, 44px);
  background:
    radial-gradient(38% 62% at 8% 6%, rgba(216, 96, 26, .22), rgba(216, 96, 26, 0) 70%),
    radial-gradient(34% 58% at 92% 12%, rgba(168, 36, 6, .2), rgba(168, 36, 6, 0) 70%),
    radial-gradient(120% 120% at 50% 50%, rgba(46, 12, 4, .55), rgba(14, 6, 3, .85));
}
:root[data-theme="light"] .fk-panelcta {
  background:
    radial-gradient(38% 62% at 8% 6%, rgba(255, 150, 80, .34), rgba(255, 150, 80, 0) 70%),
    radial-gradient(34% 58% at 92% 12%, rgba(232, 96, 40, .26), rgba(232, 96, 40, 0) 70%),
    radial-gradient(120% 120% at 50% 50%, rgba(255, 240, 224, .75), rgba(246, 220, 196, .9));
}
.fk-panelcta__title { font-size: clamp(18px, 1.8vw, 26px); font-weight: 800; letter-spacing: .4px; color: var(--fk-heading); }
.fk-panelcta__lead { margin: 10px 0 0; max-width: 640px; font-size: clamp(12px, 1vw, 14.5px); font-weight: 500; line-height: 1.55; color: var(--fk-text-muted); }
.fk-panelcta__btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(15px, 1.3vw, 19px) clamp(28px, 3.2vw, 46px);
  border-radius: 10px; background: var(--fk-accent); color: #FFFFFF;
  font-size: clamp(12px, .97vw, 14px); font-weight: 700; letter-spacing: 1.5px;
  transition: background-color var(--fk-dur) var(--fk-ease);
}
.fk-panelcta__btn:hover { background: var(--fk-accent-2); color: #FFFFFF; }

/* ---- B10.2 detail -------------------------------------------------------- */
.fk-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; font-weight: 600;
  color: var(--fk-text-muted);
}
.fk-crumbs a { color: var(--fk-text-muted); }
.fk-crumbs a:hover { color: var(--fk-text-strong); }
.fk-crumbs__sep { color: var(--fk-accent); }
.fk-crumbs__here { color: var(--fk-text); }

.fk-mdetail {
  display: grid;
  /* 448px, not 560 — the photo column is a fifth narrower, and because the
     frame below is driven by aspect-ratio its height follows, so the hero is
     20% smaller in both axes. Done as real layout rather than `zoom` (which is
     what the B10 card uses): there is no type inside this frame to shrink, and
     the freed width goes to the spec column instead of being left blank. */
  grid-template-columns: minmax(0, 448px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
  margin-top: clamp(22px, 2.2vw, 32px);
}
.fk-mdetail__media {
  position: relative; border-radius: 28px; overflow: hidden;
  /* Was a hardcoded 560/660 (0.848) — the one machine frame on the site that
     did NOT follow --fk-machine-ratio (0.700), so the same machine appeared
     noticeably squarer here than in the B10 slider and the B10.1 grid. Now on
     the shared token, and it steps down with the others at the two
     breakpoints in tokens.css. */
  aspect-ratio: var(--fk-machine-ratio);
  box-shadow: 0 0 90px rgba(255, 110, 20, .10);
}
.fk-mdetail__media::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;
}
.fk-mdetail__photo-fill {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(30px) saturate(1.1); transform: scale(1.2);
}
.fk-mdetail__photo {
  position: relative; width: 100%; height: 100%;
  /* Fitted by WIDTH, exactly like .fk-vend__photo-img — see the long note in
     vendings.css for why `100% auto` rather than `cover`. Was `contain`, which
     fitted by height and left the blurred fill showing down both sides; the
     machine now fills the frame and the ~19.6% height overflow is cropped
     against --fk-machine-focus, the same anchor the cards use. */
  background-size: 100% auto; background-repeat: no-repeat;
  background-position: center var(--fk-machine-focus);
}
.fk-mdetail__badge { position: absolute; top: 18px; left: 18px; z-index: 4; }
.fk-mdetail__cold { top: 18px; right: 18px; z-index: 4; }

.fk-mdetail__title {
  margin: 0;
  font-size: clamp(24px, 2.64vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; text-wrap: balance;
  color: var(--fk-heading);
}

.fk-specs { margin: clamp(20px, 2vw, 30px) 0 0; display: flex; flex-direction: column; }
.fk-specs__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: clamp(14px, 1.7vw, 24px);
  padding: clamp(11px, 1vw, 15px) 0;
  border-top: 1px solid var(--fk-border);
}
.fk-specs__row:last-child { border-bottom: 1px solid var(--fk-border); }
.fk-specs__key { margin: 0; flex: none; font-size: clamp(11.5px, .9vw, 13px); font-weight: 600; letter-spacing: .5px; color: var(--fk-text-muted); }
.fk-specs__val { margin: 0; text-align: right; font-size: clamp(12.5px, 1.01vw, 14.5px); font-weight: 700; color: var(--fk-heading); }

.fk-mdetail__price {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: clamp(20px, 1.9vw, 28px);
}
.fk-mdetail__price-note { margin-right: auto; font-size: clamp(11px, .9vw, 13px); letter-spacing: .5px; color: var(--fk-text-muted); }
.fk-mdetail__price-old {
  white-space: nowrap; font-size: clamp(15px, 1.32vw, 19px); font-weight: 600;
  text-decoration: line-through; color: var(--fk-text-dim);
}
.fk-mdetail__price-new { white-space: nowrap; font-size: clamp(32px, 3.2vw, 46px); font-weight: 800; line-height: 1; color: var(--fk-accent); }

.fk-mdetail__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 1.9vw, 28px); }
.fk-mdetail__btn {
  flex: 1 1 180px; display: flex; align-items: center; justify-content: center;
  padding: clamp(15px, 1.25vw, 18px) 8px; border-radius: 10px;
  font-size: clamp(12px, .94vw, 13.5px); font-weight: 700; letter-spacing: 1.3px;
  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-mdetail__btn--primary { background: var(--fk-accent); color: #FFFFFF; }
.fk-mdetail__btn--primary:hover { background: var(--fk-accent-2); color: #FFFFFF; }
.fk-mdetail__btn--ghost { border-color: var(--fk-border-strong); background: var(--fk-surface-soft); color: var(--fk-text); }
.fk-mdetail__btn--ghost:hover { border-color: rgba(255,255,255,.4); color: var(--fk-text-strong); }
:root[data-theme="light"] .fk-mdetail__btn--ghost:hover { border-color: rgba(26,21,18,.4); }

.fk-msection { margin-top: clamp(40px, 5vw, 72px); }
.fk-msection__title {
  margin: 0;
  font-size: clamp(20px, 2.1vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--fk-heading);
}
.fk-msection__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: clamp(18px, 1.8vw, 26px); }
.fk-msection__more { flex: none; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; color: var(--fk-accent); }
.fk-msection--split { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.fk-msection__body { display: flex; flex-direction: column; gap: clamp(18px, 1.7vw, 24px); }
.fk-mtext__head { margin: 0; font-size: clamp(14px, 1.11vw, 16px); font-weight: 700; letter-spacing: .3px; color: var(--fk-heading); }
.fk-mtext__body { margin: 8px 0 0; font-size: clamp(12.5px, 1.01vw, 14.5px); font-weight: 500; line-height: 1.6; text-wrap: pretty; color: var(--fk-text-muted); }

.fk-complist { list-style: none; margin: clamp(16px, 1.5vw, 22px) 0 0; padding: 0; columns: 2; column-gap: clamp(28px, 4.4vw, 64px); }
.fk-complist__row {
  display: flex; align-items: flex-start; gap: clamp(12px, 1.25vw, 18px);
  padding: clamp(11px, 1vw, 15px) 0;
  border-top: 1px solid var(--fk-border);
  break-inside: avoid;
}
.fk-complist__num { flex: none; padding-top: 1px; font-size: clamp(11px, .9vw, 13px); font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--fk-accent); }
.fk-complist__text { min-width: 0; flex: 1; font-size: clamp(12.5px, 1.01vw, 14.5px); font-weight: 600; line-height: 1.45; color: var(--fk-heading); }

.fk-offer { list-style: none; margin: clamp(18px, 1.7vw, 24px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fk-offer__item {
  display: flex; align-items: center; gap: 14px;
  box-sizing: border-box;
  border: 1px solid var(--fk-border); border-radius: 12px;
  padding: 16px 20px;
  background: var(--fk-surface-soft);
  font-size: clamp(12px, .94vw, 13.5px); font-weight: 600; line-height: 1.4;
  color: var(--fk-text);
}
.fk-offer__arrow { flex: none; color: var(--fk-accent); font-size: 15px; font-weight: 800; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .fk-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fk-menu__items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 20px; }
  .fk-mdetail { grid-template-columns: 1fr; }
  /* Same fifth off the stacked single-column size (was 520px). */
  .fk-mdetail__media { max-width: 416px; }
  .fk-msection--split { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* Covered by the width-fitted photo — see the note in vendings.css. The
     detail hero is now fitted by width too, so its fill is equally invisible
     and equally droppable; both stay on desktop purely as the fallback for a
     landscape image, which a wide viewport can afford. */
  .fk-mcard__photo-fill,
  .fk-mdetail__photo-fill { display: none; }

  /*
   * The OTHER half of that vendings.css treatment, which never made it across.
   *
   * .fk-mcard__body is a copy of .fk-vend__body, backdrop-filter and all, but
   * only the photo-fill line above was ported — so on a phone this page kept
   * eight live glass panels while the front page's identical cards had none.
   * That is the whole difference in feel between the two pages.
   *
   * Each panel re-samples and re-blurs what sits behind it on every scroll
   * frame, and nothing between it and <html> is a backdrop root, so "behind it"
   * is the entire page composite — including the fixed .fk-bgfx field, whose
   * content changes as the page scrolls. Eight of those never get to cache.
   *
   * Worse here than on the front page even at desktop width: the front page
   * lays its eight cards in a horizontal slider, so half are off-screen and at
   * most four are ever composited at once. This page uses a 3×3 grid on a page
   * only ~3.7k tall, so all eight are on screen together and that worst case is
   * essentially the whole page.
   *
   * Same swap as the front page — an opaque panel at the same alpha, which
   * replaces the legibility the blur was providing and makes the two pages'
   * cards cost the same.
   */
  .fk-mcard__body {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(18, 15, 12, .82);
  }
  :root[data-theme="light"] .fk-mcard__body { background: rgba(252, 249, 244, .88); }
}
@media (max-width: 700px) {
  .fk-mgrid { grid-template-columns: 1fr; }
  .fk-menu__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; }
  /* 1.2x the 11px this used to bottom out at — the step the clamp used to do. */
  .fk-menu__name { font-size: 13px; }
  .fk-complist { columns: 1; }
  .fk-offer { grid-template-columns: 1fr; }
  .fk-search { width: 100%; }
  .fk-panelcta { flex-direction: column; align-items: flex-start; }
  .fk-panelcta__btn { width: 100%; box-sizing: border-box; }
  /* The chip row scrolls sideways instead of wrapping into a tall block. */
  .fk-page__chips {
    flex-wrap: nowrap; overflow-x: auto;
    margin-inline: calc(var(--fk-gutter) * -1); padding-inline: var(--fk-gutter);
    scrollbar-width: none;
  }
  .fk-page__chips::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fk-chip, .fk-mcard__btn, .fk-mdetail__btn, .fk-panelcta__btn { transition: none; }
}