/* ============================================================
   BALY FOOD — SEO landing pages (city · neighbourhood · cuisine)
   Ported from the Baly Design System canvas (pages/food/food-landing.css).
   Namespace: dot-fl (food landing) + fcard, wrapped in a .baly-fl root.
   ------------------------------------------------------------
   The canvas file references the master colour / radius / shadow tokens
   from foundations tokens.css. This plugin ships the bf namespace instead
   (asset css baly-food-tokens.css), so the block below ALIASES every
   master token the design uses onto its bf equivalent, scoped to
   .baly-fl. A few rating / gold / 3xl tokens have no bf peer and are
   defined here directly. Everything after the alias block is the canvas
   CSS verbatim (only the 5 global reset lines are scoped to .baly-fl),
   so a future canvas export stays a clean diff. See DS-SYNC.md.
   NOTE: never write a token glob with a trailing slash in a comment here
   (it forms a premature comment-close and drops the next rule).
   ============================================================ */

/* master-token to bf-namespace alias layer (scoped) */
.baly-fl{
  /* brand */
  --color-brand:var(--bf-brand); --color-brand-hover:var(--bf-brand-hover);
  --color-brand-light:var(--bf-brand-light); --color-brand-lighter:var(--bf-brand-lighter);
  --color-brand-10:var(--bf-brand-10);
  /* neutrals */
  --color-white:var(--bf-white); --color-black:var(--bf-black);
  --color-grey-900:var(--bf-grey-900); --color-grey-800:var(--bf-grey-800);
  --color-grey-700:var(--bf-grey-700); --color-grey-600:var(--bf-grey-600);
  --color-grey-500:var(--bf-grey-500); --color-grey-400:var(--bf-grey-400);
  --color-grey-300:var(--bf-grey-300); --color-grey-200:var(--bf-grey-200);
  --color-grey-100:var(--bf-grey-100); --color-grey-50:var(--bf-grey-50);
  /* fg roles */
  --fg-primary:var(--bf-fg); --fg-secondary:var(--bf-grey-600);
  --fg-tertiary:var(--bf-grey-500); --fg-muted:var(--bf-grey-400);
  /* borders */
  --border-default:var(--bf-border); --border-subtle:var(--bf-border-subtle);
  /* semantic */
  --color-success:var(--bf-success); --color-pro:var(--bf-pro);
  /* radii (master 3xl has no --bf peer) */
  --radius-md:var(--bf-radius-md); --radius-lg:var(--bf-radius-lg);
  --radius-xl:var(--bf-radius-xl); --radius-2xl:var(--bf-radius-2xl);
  --radius-3xl:32px; --radius-pill:var(--bf-radius-pill);
  /* shadows */
  --shadow-1:var(--bf-shadow-1); --shadow-2:var(--bf-shadow-2); --shadow-3:var(--bf-shadow-3);
  --shadow-card:var(--bf-shadow-2);
  /* type */
  --font-family:var(--bf-font);
  --font-regular:var(--bf-fw-regular); --font-medium:var(--bf-fw-medium);
  --font-semibold:var(--bf-fw-semibold); --font-bold:var(--bf-fw-bold);
  --font-black:var(--bf-fw-black); --font-super:800;
  --text-base:var(--bf-text-base); --text-md:var(--bf-text-md); --text-lg:var(--bf-text-lg);
  /* motion */
  --duration-fast:var(--bf-fast); --ease-out:var(--bf-ease-out);
  /* gold / rating (no --bf peer) */
  --color-star:#F5B400; --color-accent-gold:#FFB300;
  --color-rating-bg:#FFF7E0; --color-rating-border:#F5D77E;
}

/* ── scoped resets (were global in the canvas file) ─────────────── */
.baly-fl{
  font-family:var(--font-family);
  background:var(--color-white);
  color:var(--fg-primary);
  direction:rtl;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.baly-fl *{box-sizing:border-box}
.baly-fl img{max-width:100%;display:block}
.baly-fl a{color:inherit;text-decoration:none}
.baly-fl .num{direction:ltr;unicode-bidi:isolate;font-feature-settings:"tnum" 1}

.fl-container{max-width:1320px;margin:0 auto;padding:0 clamp(16px,5vw,48px)}

/* ── Breadcrumbs ────────────────────────────────────────── */
.fl-crumbs{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:var(--font-medium);color:var(--fg-secondary);padding:20px 0 4px}
.fl-crumbs a:hover{color:var(--color-brand)}
.fl-crumbs .sep{color:var(--color-grey-300);display:inline-flex}
.fl-crumbs .sep svg{width:13px;height:13px}
.fl-crumbs .cur{color:var(--color-grey-900);font-weight:var(--font-bold)}

/* ── Section head ───────────────────────────────────────── */
.fl-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 18px}
.fl-shead__eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:var(--font-bold);color:var(--color-brand);margin-bottom:9px}
.fl-shead__eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--color-brand)}
.fl-shead h2{margin:0;font-size:var(--text-lg);font-weight:var(--font-black);line-height:1.15;color:var(--color-grey-900)}
.fl-shead p{margin:7px 0 0;font-size:14px;font-weight:var(--font-medium);color:var(--fg-secondary);line-height:1.55;max-width:560px}
.fl-shead__more{display:inline-flex;align-items:center;gap:6px;color:var(--color-brand);font-weight:var(--font-bold);font-size:13.5px;white-space:nowrap;flex:none}
.fl-shead__more svg{width:15px;height:15px;transform:scaleX(-1)}

/* ── Section spacing ────────────────────────────────────── */
.fl-section{padding:30px 0}
.fl-section--tight{padding:18px 0}

/* ============================================================
   HERO — above the fold
   ============================================================ */
.fl-hero{position:relative}
.fl-herob{display:grid;grid-template-columns:1.04fr 0.96fr;gap:18px;align-items:stretch;padding:8px 0 30px}
.fl-plaque{background:#fff;border-radius:var(--radius-3xl);padding:clamp(24px,3vw,40px);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);display:flex;flex-direction:column;justify-content:center}
.fl-herob--solo{grid-template-columns:1fr;justify-items:center;padding:22px 0 44px}
.fl-herob--solo .fl-plaque{background:transparent;border:0;box-shadow:none;padding:0;max-width:820px;align-items:center;text-align:center}
.fl-herob--solo .fl-hero__eyebrow{align-self:center}
.fl-herob--solo .fl-hero__lede{max-width:620px}
.fl-herob--solo .bsy-search{margin-inline:auto}
.fl-hero__eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:var(--color-brand-lighter);color:var(--color-brand);padding:7px 14px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:var(--font-bold);line-height:1;margin-bottom:18px}
.fl-hero__eyebrow img{height:15px;width:auto}
.fl-hero__eyebrow .pin{display:inline-flex}
.fl-hero__eyebrow .pin svg{width:14px;height:14px}
.fl-hero h1{margin:0;font-size:clamp(34px,5vw,60px);font-weight:var(--font-super);line-height:1.04;letter-spacing:-0.01em;color:var(--color-grey-900)}
.fl-hero h1 .accent{color:var(--color-brand)}
.fl-hero__lede{margin:18px 0 0;font-size:clamp(15px,1.5vw,18px);font-weight:var(--font-medium);color:var(--fg-secondary);line-height:1.6;max-width:520px;text-wrap:pretty}

/* hero search — design system component (.bsy-search, hero size) */
.bsy-search{position:relative;direction:rtl;margin-top:24px;width:100%;max-width:560px}
.bsy-search__field{display:flex;flex-direction:row-reverse;align-items:center;gap:12px;background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-pill);box-shadow:var(--shadow-1);padding:8px 10px;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.bsy-search__field:focus-within{border-color:var(--color-brand);box-shadow:var(--shadow-1),0 0 0 4px var(--color-brand-10)}
.bsy-search__puck{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--color-brand-lighter);color:var(--color-brand);border:none;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.bsy-search__puck:hover{background:var(--color-brand);color:#fff}
.bsy-search__puck svg{width:20px;height:20px}
.bsy-search__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-weight:500;font-size:var(--text-base);color:var(--color-black);text-align:right;direction:rtl;padding:10px 4px}
.bsy-search__input::placeholder{color:var(--fg-muted);opacity:1}
.bsy-search[data-size="hero"] .bsy-search__field{padding:10px 14px;gap:16px}
.bsy-search[data-size="hero"] .bsy-search__puck{width:56px;height:56px}
.bsy-search[data-size="hero"] .bsy-search__puck svg{width:24px;height:24px}
.bsy-search[data-size="hero"] .bsy-search__input{font-size:var(--text-lg);padding:18px 6px}

/* hero popular-search chips */
.fl-pop-search{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:20px}
.fl-pop-search .lbl{font-size:13px;font-weight:var(--font-bold);color:var(--fg-secondary)}
.fl-pop-chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:#fff;color:var(--color-grey-800);font-family:inherit;font-size:13px;font-weight:var(--font-bold);cursor:pointer;transition:all .12s}
.fl-pop-chip:hover{border-color:var(--color-brand);color:var(--color-brand);background:var(--color-brand-lighter)}

/* hero stats */
.fl-stats{display:flex;align-items:center;gap:26px;margin-top:26px;flex-wrap:wrap}
.fl-stat{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.fl-stat b{font-size:23px;font-weight:var(--font-black);color:var(--color-grey-900);line-height:1;display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;min-height:36px}
.fl-stat b svg{width:18px;height:18px;color:var(--color-star)}
.fl-stat span{font-size:12.5px;font-weight:var(--font-semibold);color:var(--fg-secondary)}
.fl-stat__div{width:1px;height:34px;background:var(--border-default)}
.fl-stat--rating b{background:var(--color-rating-bg);border:1px solid var(--color-rating-border);border-radius:var(--radius-pill);padding:4px 12px;gap:6px}
.fl-stat--rating b svg{width:20px;height:20px}
.fl-stat--rating .num{font-size:23px}

/* ============================================================
   CUISINE HERO (cuisine page) — full-bleed signature image
   ============================================================ */
.fl-chero{position:relative;border-radius:var(--radius-3xl);overflow:hidden;min-height:460px;background:var(--color-grey-100);box-shadow:var(--shadow-card);isolation:isolate}
.fl-chero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:62% 42%;filter:brightness(1.12) contrast(1.1) saturate(1.06);animation:fl-kenburns 26s ease-in-out infinite alternate}
.fl-chero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(110% 75% at 16% 8%,rgba(0,67,255,.18),transparent 56%),linear-gradient(180deg,rgba(8,12,30,.10),transparent 24%,transparent 62%,rgba(8,12,30,.42))}
.fl-chero__sheen{position:absolute;inset:-20% -12%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 41%,rgba(255,255,255,.26) 49%,transparent 57%);transform:translateX(-66%);animation:fl-sheen 7.5s ease-in-out infinite}
.fl-chero__brand{position:absolute;z-index:3;top:16px;inset-inline-start:16px;display:inline-flex;align-items:center;background:rgba(10,16,40,.46);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:11px 16px;border-radius:var(--radius-pill);box-shadow:0 10px 24px -10px rgba(0,16,64,.5),inset 0 0 0 1px rgba(255,255,255,.18)}
.fl-chero__brand img{height:32px;width:auto;display:block}
.fl-chero__cap{position:absolute;z-index:3;bottom:16px;inset-inline-start:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--color-grey-900);font-size:13px;font-weight:var(--font-black);padding:9px 15px;border-radius:var(--radius-pill);box-shadow:0 12px 26px -10px rgba(0,16,64,.55)}
.fl-chero__cap .d{width:7px;height:7px;border-radius:50%;background:var(--color-brand);flex:none}
.fl-chero::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);pointer-events:none}
@keyframes fl-kenburns{from{transform:scale(1.02)}to{transform:scale(1.1)}}
@keyframes fl-sheen{0%{transform:translateX(-66%)}55%,100%{transform:translateX(66%)}}

/* ============================================================
   DISTRICTS / NEIGHBOURHOODS directory (city page)
   ============================================================ */
.fl-districts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fl-district{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);color:inherit;transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s,background .18s}
.fl-district:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--color-brand);background:var(--color-brand-lighter)}
.fl-district__ic{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--color-brand-lighter);color:var(--color-brand);transition:background .18s,color .18s}
.fl-district__ic svg{width:20px;height:20px}
.fl-district:hover .fl-district__ic{background:var(--color-brand);color:#fff}
.fl-district__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.fl-district__body b{font-size:15px;font-weight:var(--font-black);color:var(--color-grey-900);line-height:1.2}
.fl-district__body span{font-size:12px;font-weight:var(--font-semibold);color:var(--color-grey-500)}
.fl-district__chev{margin-inline-start:auto;flex:none;display:inline-flex;color:var(--color-grey-300);transition:color .18s,transform .18s}
.fl-district__chev svg{width:18px;height:18px}
.fl-district:hover .fl-district__chev{color:var(--color-brand);transform:translateX(-2px)}

/* ============================================================
   CUISINES rail (cuisine page) — "مطابخ ثانية تعجبك"
   ============================================================ */
.fl-rail{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;padding:6px 0 14px;scroll-snap-type:x proximity}
.fl-rail::-webkit-scrollbar{display:none}
.fl-cuisine{flex:0 0 auto;width:128px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:11px}
.fl-cuisine__media{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--radius-2xl);overflow:hidden;background:var(--color-grey-50);box-shadow:var(--shadow-1);transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}
.fl-cuisine__media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(10,10,10,.05);pointer-events:none}
.fl-cuisine__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease-out)}
.fl-cuisine:hover .fl-cuisine__media{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.fl-cuisine:hover .fl-cuisine__media img{transform:scale(1.07)}
.fl-cuisine__txt{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.fl-cuisine__txt b{font-size:14.5px;font-weight:var(--font-black);color:var(--color-grey-900);line-height:1.2;transition:color .15s}
.fl-cuisine:hover .fl-cuisine__txt b{color:var(--color-brand)}
.fl-cuisine__txt i{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:10.5px;font-weight:var(--font-bold);color:var(--color-brand);line-height:1}
.fl-cuisine__txt i::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--color-brand)}
.fl-cuisine.is-current .fl-cuisine__media{background:var(--color-brand-lighter)}
.fl-cuisine.is-current .fl-cuisine__media::after{box-shadow:inset 0 0 0 2.5px var(--color-brand)}
.fl-cuisine.is-current .fl-cuisine__txt b{color:var(--color-brand)}

/* ── quick dish chips ─ */
.fl-dishrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fl-dishrow .lbl{font-size:13px;font-weight:var(--font-bold);color:var(--color-grey-700);margin-inline-end:2px}
.fl-dish{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:#fff;color:var(--color-grey-800);font-family:inherit;font-size:13.5px;font-weight:var(--font-bold);cursor:pointer;box-shadow:var(--shadow-1);transition:transform .14s var(--ease-out),box-shadow .14s var(--ease-out),background .12s,color .12s,border-color .12s;white-space:nowrap}
.fl-dish img{width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(10,10,10,.08)}
.fl-dish::after{content:"";width:6px;height:6px;flex:none;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:.4;transition:opacity .12s}
.fl-dish:hover{border-color:var(--color-brand);color:var(--color-brand);background:var(--color-brand-lighter);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.fl-dish:hover::after{opacity:.85}
.fl-dish:active{transform:translateY(0) scale(.97);box-shadow:var(--shadow-1)}
.fl-dish.active{background:var(--color-brand);border-color:var(--color-brand);color:#fff;box-shadow:0 6px 16px rgba(0,67,255,.22)}
.fl-dish.active::after{opacity:1}
.fl-dish.active img{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.fl-dish.active:hover{background:var(--color-brand-hover);border-color:var(--color-brand-hover);color:#fff;transform:translateY(-2px)}

/* ============================================================
   FEATURED vendor row (horizontal scroll)
   ============================================================ */
.fl-featrow{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;padding:6px 0 30px;margin-inline:-16px;scroll-snap-type:x proximity;scroll-padding-inline:16px}
.fl-featrow::-webkit-scrollbar{display:none}
.fl-featrow>:first-child{margin-inline-start:16px}
.fl-featrow>:last-child{margin-inline-end:16px}
.fl-featrow .fcard{flex:0 0 290px;scroll-snap-align:start}
@media (max-width:680px){.fl-featrow .fcard{flex:0 0 240px}}

/* ── per-dish vendor sections (browse by dish) ───────────── */
.fl-dishsec{scroll-margin-top:90px;border-radius:var(--radius-2xl)}
.fl-dishsec__title{display:flex;align-items:center;gap:14px}
.fl-dishsec__ic{width:50px;height:50px;border-radius:50%;overflow:hidden;flex:none;box-shadow:var(--shadow-1),inset 0 0 0 1px rgba(10,10,10,.06);background:var(--color-grey-100)}
.fl-dishsec__ic img{width:100%;height:100%;object-fit:cover}
@keyframes fl-flash{from{background:var(--color-brand-lighter)}to{background:transparent}}
.fl-dishsec.is-flash{animation:fl-flash 1.2s var(--ease-out)}

/* ============================================================
   VENDOR CARD (shared with listing)
   ============================================================ */
.fl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1080px){.fl-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.fl-grid{grid-template-columns:repeat(2,1fr);gap:12px}}

.fcard{background:#fff;border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(10,10,10,.04),0 1px 2px rgba(10,10,10,.03);color:inherit;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.fcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,10,10,.10),0 4px 8px rgba(10,10,10,.06)}
.fcard.is-closed{opacity:.62}
.fcard__hero{position:relative;aspect-ratio:2/1;background-size:cover;background-position:center;background-color:var(--color-grey-100)}
.fcard__hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 60%,rgba(0,0,0,.12) 100%)}
.fcard__closed{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3}
.fcard__closed span{background:rgba(10,10,10,.82);color:#fff;font-size:13px;font-weight:var(--font-bold);padding:7px 16px;border-radius:var(--radius-pill)}
.fcard__pro{position:absolute;top:10px;right:10px;z-index:2;background:var(--color-pro);color:#fff;font-size:11px;font-weight:var(--font-bold);padding:5px 9px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:6px;line-height:1.1;box-shadow:var(--shadow-1)}
.fcard__pro img{height:13px;display:block}
.fcard__badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--color-brand);color:#fff;font-size:12.5px;font-weight:var(--font-bold);padding:5px 11px;border-radius:var(--radius-pill);line-height:1.1;direction:ltr;box-shadow:var(--shadow-1)}
.fcard__new{position:absolute;top:10px;left:10px;z-index:2;background:var(--color-grey-900);color:#fff;font-size:11px;font-weight:var(--font-bold);padding:5px 10px;border-radius:var(--radius-pill);line-height:1.1;box-shadow:var(--shadow-1)}
.fcard.has-discount .fcard__new{left:auto;right:10px}
.fcard__rating{position:absolute;bottom:10px;left:10px;z-index:2;background:var(--color-rating-bg);border:1px solid var(--color-rating-border);color:var(--color-grey-900);font-size:12px;font-weight:var(--font-bold);padding:4px 9px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:4px;box-shadow:var(--shadow-1);direction:ltr;line-height:1.1}
.fcard__rating svg{width:12px;height:12px;color:var(--color-star)}
.fcard__rating .rc{color:var(--color-grey-500);font-weight:var(--font-semibold);font-size:10.5px}
.fcard__logo{position:absolute;bottom:10px;right:10px;z-index:2;width:46px;height:46px;border-radius:var(--radius-md);background:#fff center/cover no-repeat;box-shadow:0 2px 10px rgba(0,0,0,.16);border:2px solid #fff}
.fcard__body{padding:11px 13px 12px;display:flex;flex-direction:column;gap:6px}
.fcard__name{margin:0;font-size:15px;font-weight:var(--font-black);line-height:1.25;color:var(--color-grey-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.fcard__tags{font-size:12px;font-weight:var(--font-semibold);color:var(--fg-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcard__area{display:inline-flex;align-items:center;gap:4px}
.fcard__area svg{width:12px;height:12px;color:var(--color-brand)}
.fcard__meta{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:var(--font-bold);color:var(--color-grey-800);margin-top:1px}
.fcard__meta .cell{display:inline-flex;align-items:center;gap:5px}
.fcard__meta .ic{width:14px;height:14px;flex:none}
.fcard__meta .ic.t{color:var(--color-success)}
.fcard__meta .ic.b{color:var(--color-brand)}
.fcard__meta .free{color:var(--color-success)}

/* ============================================================
   LISTING controls (filter chips + sort + grid)
   ============================================================ */
.fl-controls{position:relative;z-index:1;background:var(--color-white);padding:10px 0 14px}
.fl-controls__row{display:flex;align-items:center;gap:10px}
.fl-chips{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;padding:2px}
.fl-chips::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto;height:40px;padding:0 15px;border-radius:var(--radius-pill);font-family:inherit;font-size:13.5px;font-weight:var(--font-bold);border:1px solid var(--border-default);background:#fff;color:var(--color-grey-700);cursor:pointer;transition:all .12s ease;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;line-height:1}
.fchip:hover{color:var(--fg-primary);background:var(--color-grey-50);border-color:var(--color-grey-300)}
.fchip svg{width:15px;height:15px;flex:none}
.fchip.active{background:var(--color-brand);color:#fff;border-color:var(--color-brand);box-shadow:0 4px 12px rgba(0,67,255,.18)}
.fchip .pro-mark{display:inline-flex;align-items:center;background:var(--color-pro);padding:4px 9px;border-radius:var(--radius-pill);line-height:1}
.fchip .pro-mark img{height:14px;display:block}
.fchip.active .pro-mark{background:rgba(255,255,255,.2)}

.fl-sortwrap{position:relative;flex:0 0 auto}
.fl-sortbtn{height:40px;padding:0 16px;border-radius:var(--radius-pill);font-family:inherit;font-size:13.5px;font-weight:var(--font-bold);border:1px solid var(--border-default);background:#fff;color:var(--color-grey-800);cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1;white-space:nowrap;transition:background .12s,border-color .12s}
.fl-sortbtn:hover{background:var(--color-grey-50);border-color:var(--color-grey-300)}
.fl-sortbtn svg{width:16px;height:16px}
.fl-sortbtn .sort-val{color:var(--color-brand);font-weight:var(--font-bold)}
.fl-pop{position:absolute;top:calc(100% + 10px);left:0;z-index:60;background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-3);padding:6px;min-width:230px;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transform-origin:top left;transition:opacity .14s var(--ease-out),transform .14s var(--ease-out)}
.fl-pop.open{opacity:1;transform:none;pointer-events:auto}
.fl-sortitem{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:11px 12px;border:none;background:none;border-radius:var(--radius-md);font-family:inherit;font-size:14px;font-weight:var(--font-semibold);color:var(--color-grey-800);cursor:pointer}
.fl-sortitem:hover{background:var(--color-grey-50)}
.fl-sortitem .ic{width:18px;height:18px;color:var(--color-grey-500);flex:none}
.fl-sortitem .check{margin-inline-start:auto;width:18px;height:18px;color:var(--color-brand);opacity:0}
.fl-sortitem.active{color:var(--color-brand)}
.fl-sortitem.active .ic{color:var(--color-brand)}
.fl-sortitem.active .check{opacity:1}

.fl-resultline{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;gap:12px}
.fl-resultline .rcount{font-size:14px;font-weight:var(--font-semibold);color:var(--fg-secondary)}
.fl-resultline .rcount b{color:var(--color-grey-900);font-weight:var(--font-bold)}

.fl-empty{display:none;flex-direction:column;align-items:center;text-align:center;padding:60px 20px;color:var(--fg-secondary)}
.fl-empty.show{display:flex}
.fl-empty .ec{width:72px;height:72px;border-radius:50%;background:var(--color-grey-200);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.fl-empty .ec svg{width:32px;height:32px;color:var(--color-grey-500)}
.fl-empty h3{margin:0 0 6px;font-size:18px;font-weight:var(--font-bold);color:var(--color-grey-900)}
.fl-empty p{margin:0 0 16px;font-size:14px;max-width:340px;line-height:1.5}
.fl-empty .btn{padding:0 22px;height:46px;border-radius:var(--radius-pill);border:none;background:var(--color-brand);color:#fff;font-family:inherit;font-weight:var(--font-bold);font-size:14px;cursor:pointer}
.fl-empty .btn:hover{background:var(--color-brand-hover)}

/* ============================================================
   SEO prose + FAQ
   ============================================================ */
.fl-seo{background:var(--color-white);border-top:1px solid var(--border-subtle);margin-top:20px}
.fl-seo__grid{display:grid;grid-template-columns:1fr;gap:36px;padding:46px 0}
.fl-prose h2{margin:0 0 14px;font-size:var(--text-lg);font-weight:var(--font-black);color:var(--color-grey-900);line-height:1.2}
.fl-prose p{margin:0 0 14px;font-size:15px;font-weight:var(--font-regular);color:var(--fg-secondary);line-height:1.8;text-wrap:pretty}
.fl-prose p:last-child{margin-bottom:0}
.fl-prose strong{color:var(--color-grey-900);font-weight:var(--font-bold)}

.fl-faq{display:flex;flex-direction:column;gap:9px}
.fl-faq__row{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:4px 18px;transition:border-color .15s,box-shadow .15s}
.fl-faq__row[open]{border-color:var(--color-brand-light);box-shadow:var(--shadow-1)}
.fl-faq__q{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;padding:14px 0;font-size:14.5px;font-weight:var(--font-bold);color:var(--color-grey-900)}
.fl-faq__q::-webkit-details-marker{display:none}
.fl-faq__chev{width:24px;height:24px;border-radius:50%;background:var(--color-grey-100);color:var(--color-grey-700);display:grid;place-items:center;flex:none;transition:transform .25s var(--ease-out),background .15s,color .15s}
.fl-faq__chev svg{width:14px;height:14px}
.fl-faq__row[open] .fl-faq__chev{background:var(--color-brand);color:#fff;transform:rotate(180deg)}
.fl-faq__a{margin:0;padding:0 0 16px;font-size:13.5px;font-weight:var(--font-regular);color:var(--fg-secondary);line-height:1.7}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .fl-herob{grid-template-columns:1fr;gap:16px;padding-bottom:24px}
  .fl-plaque{padding:26px}
  .fl-chero{min-height:400px}
  .fl-districts{grid-template-columns:repeat(3,1fr)}
  .fl-seo__grid{grid-template-columns:1fr;gap:32px;padding:38px 0}
}
@media (max-width:640px){
  .fl-crumbs{padding:14px 0 2px;font-size:12px}
  .fl-hero h1{font-size:clamp(28px,9vw,40px)}
  .fl-stats{gap:16px}
  .fl-stat__div{display:none}
  .fl-districts{grid-template-columns:repeat(2,1fr);gap:8px}
  .fl-district{padding:11px 12px;gap:10px}
  .fl-district__ic{width:36px;height:36px}
  .fl-district__ic svg{width:18px;height:18px}
  .fl-district__body b{font-size:13.5px}
  .fl-district__body span{font-size:11px}
  .fl-chero{order:-1;min-height:150px;border-radius:var(--radius-2xl)}
  .fl-section{padding:22px 0}
  .fl-shead h2{font-size:var(--text-md)}
  .fl-dishrow{gap:8px}
  .fl-dishrow .lbl{width:100%;margin:0 0 1px}
  .fl-dish{height:34px;padding:0 11px;gap:6px;font-size:12.5px}
  .fl-dish img{width:20px;height:20px}
  .fl-dish::after{display:none}
}