/* ==========================================================================
   Foodini core components — reusable classes, built ONLY from the tokens in
   foodini-tokens.css. Generated from docs/design/DESIGN-SYSTEM.md §4.
   Bootstrap-compatible: keep Bootstrap's grid/utilities, these override look.
   Shape rule: buttons/chips = --r-pill, cards/images/sheets = --r-lg,
   inputs = --r-md. Never mix.
   ========================================================================== */

/* --------------------------------------------------------------------------
   S4-3 a11y — GLOBAL brand focus ring (§6: "visible focus ring on every
   interactive element").
   There was no global rule: only ~17 component-scoped :focus-visible rules, so
   everything else (nav brand, search input, cart button, cuisine tiles,
   restaurant/dish cards, footer, bottom nav) had NO ring. Legacy style.css also
   blanket-killed rings with `a{outline:none}`, `button:focus{outline:none}`,
   `.btn:focus{outline:0}` and `.accordion-button:focus{outline:0!important}` —
   those are now scoped to :not(:focus-visible) so mouse clicks stay ring-free.
   Measured before: nav brand / search / cart all matched :focus-visible yet
   computed outline-style:none.
   --brand-ink is theme-aware (#4E7E15 light / #9AD14E dark) so one rule reads in
   both themes. :focus-visible = keyboard only. The element+pseudo selectors below
   sit at (0,1,1) to out-rank legacy element-level :focus rules on load order
   (this file loads after style.css); the component rules further down are more
   specific and still win.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="switch"]:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Type scale (§3 table) — apply per element, don't restyle raw h1/h2 globally
   -------------------------------------------------------------------------- */
.t-display { font: 800 28px/1.15 var(--font-sans); letter-spacing: -0.01em; }
.t-h2      { font: 800 22px/1.2  var(--font-sans); }
.t-h3      { font: 700 18px/1.3  var(--font-sans); }
.t-body    { font: 400 16px/1.5  var(--font-sans); }
.t-small   { font: 500 13px/1.45 var(--font-sans); }
.t-caption { font: 500 12px/1.4  var(--font-sans); }
.t-price   { font: 800 16px/1.2  var(--font-sans); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .t-display { font-size: 32px; }
}
.t-muted  { color: var(--text-muted); }
.t-subtle { color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   Buttons (§4) — one primary action per screen, label ≤ 3 words
   -------------------------------------------------------------------------- */
.btn-foodini {            /* primary */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  font: 700 16px/1 var(--font-sans); cursor: pointer;
  text-decoration: none; /* also used on <a> */
  transition: transform .06s ease, background .15s ease;
}
.btn-foodini:hover  { background: var(--brand-hover); color: var(--on-brand); text-decoration: none; }
.btn-foodini:active { transform: translateY(1px); }          /* tactile press */
.btn-foodini:disabled, .btn-foodini.disabled { opacity: .5; cursor: not-allowed; }
.btn-foodini:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--brand-050), 0 0 0 4.5px var(--brand-ink);
}

.btn-foodini--ghost {
  background: transparent; color: var(--brand-ink); border: 1.5px solid var(--brand-ink);
}
.btn-foodini--ghost:hover { background: var(--brand-050); color: var(--brand-ink); }

.btn-foodini--muted { background: var(--bg-subtle); color: var(--text); }
.btn-foodini--muted:hover { background: var(--border); color: var(--text); }

.btn-foodini--block { display: flex; width: 100%; }  /* full-width main CTA on mobile */

/* round "+" add button on dish rows */
.btn-foodini--icon {
  min-height: 44px; min-width: 44px; width: 44px; padding: 0;
  border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   Inputs & forms (§4) — label ABOVE, error BELOW, never placeholder-as-label
   -------------------------------------------------------------------------- */
.field-foodini { display: flex; flex-direction: column; gap: 6px; }
.field-foodini label { font: 600 13px/1.4 var(--font-sans); color: var(--text); }
.field-foodini input,
.field-foodini select,
.field-foodini textarea {
  min-height: 48px; padding: 0 14px; border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md); font: 400 16px var(--font-sans); /* 16px avoids iOS auto-zoom */
  background: var(--surface); color: var(--text); width: 100%;
}
.field-foodini textarea { padding: 12px 14px; min-height: 96px; }
.field-foodini input:focus,
.field-foodini select:focus,
.field-foodini textarea:focus {
  outline: none; border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-050);
}
.field-foodini input::placeholder,
.field-foodini textarea::placeholder { color: var(--text-subtle); }
.field-foodini .error { color: var(--danger-ink); font: 500 13px var(--font-sans); }
.field-foodini.has-error input,
.field-foodini.has-error select,
.field-foodini.has-error textarea { border-color: var(--danger); }

/* --------------------------------------------------------------------------
   Restaurant card (§4) — whole card is ONE tap target, image 16:9 lazy-loaded
   -------------------------------------------------------------------------- */
.rcard {
  display: block; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; color: var(--text); text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.rcard:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
  color: var(--text); text-decoration: none;
}
.rcard__media {
  position: relative; aspect-ratio: 16 / 9; background: var(--bg-subtle);
  overflow: hidden; /* fixed ratio prevents layout shift */
}
.rcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rcard__badge {           /* promo badge, top-left over the image */
  position: absolute; top: var(--s-2); left: var(--s-2);
  background: var(--brand-050); color: var(--brand-ink);
  font: 700 12px/1 var(--font-sans);
  padding: 6px 10px; border-radius: var(--r-pill);
}
.rcard__body { padding: var(--s-3) var(--s-4) var(--s-4); }
.rcard__title-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
}
.rcard__name {
  font: 700 18px/1.3 var(--font-sans); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcard__meta {
  font: 500 13px/1.45 var(--font-sans); color: var(--text-muted);
  margin-top: var(--s-1);
}

/* --------------------------------------------------------------------------
   Dish / menu item row (§4) — text left, price + thumb + "+" right
   -------------------------------------------------------------------------- */
.dish-row {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.dish-row__info { flex: 1 1 auto; min-width: 0; }
.dish-row__name { font: 700 16px/1.3 var(--font-sans); color: var(--text); margin: 0 0 2px; }
.dish-row__desc {
  font: 400 13px/1.45 var(--font-sans); color: var(--text-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;                      /* 2 lines max, truncate */
}
.dish-row__price {
  font: 800 16px/1.2 var(--font-sans); font-variant-numeric: tabular-nums;
  margin-top: var(--s-2);
}
.dish-row__media { flex: 0 0 auto; position: relative; }
.dish-row__media img {
  width: 88px; height: 88px; object-fit: cover;
  border-radius: var(--r-md); display: block; background: var(--bg-subtle);
}

/* --------------------------------------------------------------------------
   Chips / filters (§4) — pill, scroll-snap row on mobile
   -------------------------------------------------------------------------- */
.chip-foodini {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-pill);
  background: var(--bg-subtle); color: var(--text);
  font: 600 14px/1 var(--font-sans); cursor: pointer;
  white-space: nowrap; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.chip-foodini:hover { background: var(--border); color: var(--text); text-decoration: none; }
.chip-foodini.is-active,
.chip-foodini[aria-pressed="true"],
.chip-foodini[aria-expanded="true"] {
  background: var(--brand-050); color: var(--brand-ink);
}
.chip-foodini:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--brand-050), 0 0 0 4.5px var(--brand-ink);
}
.chip-row {                /* horizontal scroll-snap rail for cuisines/filters */
  display: flex; gap: var(--s-2); overflow-x: auto;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-1); scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row > * { scroll-snap-align: start; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Badges (§4)
   -------------------------------------------------------------------------- */
.badge-rating {            /* ★ 4.6 small pill */
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--bg-subtle); color: var(--text);
  font: 700 13px/1.2 var(--font-sans); font-variant-numeric: tabular-nums;
}
.badge-meta {              /* delivery time / distance — muted small + icon */
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-muted); font: 500 13px/1.45 var(--font-sans);
}
.badge-promo {             /* promo/discount */
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--brand-050); color: var(--brand-ink);
  font: 700 12px/1.2 var(--font-sans);
}

/* --------------------------------------------------------------------------
   Skeletons (§4) — perceived speed; shape must match what's loading
   -------------------------------------------------------------------------- */
.skel {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%; animation: skel 1.4s ease infinite;
  border-radius: var(--r-md);
}
@keyframes skel { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }

.skel--text  { height: 14px; border-radius: var(--r-sm); }
.skel--title { height: 20px; width: 60%; border-radius: var(--r-sm); }
.skel--media { aspect-ratio: 16 / 9; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.skel--card  { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }

/* --------------------------------------------------------------------------
   Empty & error states (§4) — never a blank screen
   -------------------------------------------------------------------------- */
.state-foodini {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-3); padding: var(--s-12) var(--s-4);
}
.state-foodini__icon  { font-size: 40px; line-height: 1; }
.state-foodini__title { font: 700 18px/1.3 var(--font-sans); color: var(--text); margin: 0; }
.state-foodini__text  { font: 400 15px/1.5 var(--font-sans); color: var(--text-muted); margin: 0; max-width: 42ch; }
.state-foodini__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-2); }
.state-foodini--inline { padding: var(--s-6) var(--s-4); }   /* in a drawer / list, not a full page */

/* Loading more cards must remain direct children of the existing result grid
   without introducing a nested grid that breaks the desktop column rhythm. */
.fdn-listing-load { display: contents; }
#fdnListingError { grid-column: 1 / -1; }

/* Live tracking retains the last good map. If the next refresh fails, this
   small in-context status explains the stale location without obscuring it. */
.fdn-track-inline-error {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); background: var(--danger-050); color: var(--danger-ink);
  font: 600 13px/1.4 var(--font-sans);
}
.fdn-track-inline-error[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Toasts (§4 / S2-7) — Sonner-style stacked toaster driven by window.fdnToast()
   in inc/script.php. Bottom-center on mobile, top-right on desktop; each toast
   auto-dismisses (pause on hover, swipe to close). success=green, error=red via
   the semantic tokens; the old single .toast-foodini element was never wired up.
   -------------------------------------------------------------------------- */
/* The bottom offset clears the mobile bottom nav only on pages that HAVE one
   (see body.fdn-has-bottomnav) — it used to add 56px unconditionally, so
   toasts on checkout and the landing floated ~72px off the bottom edge for no
   reason. MUST stay inside the <768px query: above it the toaster flips to
   top-right with `bottom:auto` at a LOWER specificity than this selector, so
   an unscoped version would win there and stretch the desktop toast between
   top and bottom. */
@media (max-width: 767.98px) {
  body.fdn-has-bottomnav .fdn-toaster {
    bottom: calc(var(--bottom-nav-h) + var(--s-4) + env(safe-area-inset-bottom, 0px));
  }
}
.fdn-toaster {
  position: fixed; z-index: var(--z-toast);
  left: 50%; bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center;
  gap: var(--s-2); width: min(92vw, 400px);
  margin: 0; padding: 0; list-style: none; pointer-events: none;
}
.fdn-toast {
  pointer-events: auto; box-sizing: border-box; width: 100%;
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-left: 3px solid var(--text-subtle);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  touch-action: pan-y;
  animation: fdn-toast-in .28s cubic-bezier(.16, 1, .3, 1) both;
}
.fdn-toast--drag { animation: none; cursor: grabbing; user-select: none; }
.fdn-toast--out  { animation: fdn-toast-out .3s cubic-bezier(.4, 0, 1, 1) both; }
.fdn-toast--success { border-left-color: var(--success); }
.fdn-toast--error   { border-left-color: var(--danger); }
.fdn-toast--info    { border-left-color: var(--brand-ink); }
.fdn-toast__ico { flex: 0 0 auto; display: inline-flex; margin-top: 1px; line-height: 0; color: var(--text-subtle); }
.fdn-toast--success .fdn-toast__ico { color: var(--success); }
.fdn-toast--error   .fdn-toast__ico { color: var(--danger); }
.fdn-toast--info    .fdn-toast__ico { color: var(--brand-ink); }
.fdn-toast__body  { flex: 1 1 auto; min-width: 0; }
.fdn-toast__title { margin: 0; font: 600 14px/1.4 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.fdn-toast__desc  { margin: 2px 0 0; font: 400 13px/1.4 var(--font-sans); color: var(--text-muted); overflow-wrap: anywhere; }
.fdn-toast__action {
  flex: 0 0 auto; align-self: center;
  padding: 6px 12px; border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  font: 700 13px/1 var(--font-sans); cursor: pointer;
}
.fdn-toast__action:hover { background: var(--brand-hover); }
.fdn-toast__close {
  flex: 0 0 auto; align-self: flex-start;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-subtle); cursor: pointer; line-height: 0;
}
.fdn-toast__close:hover { color: var(--text); background: var(--bg-subtle); }
.fdn-toast__spin {
  width: 18px; height: 18px; display: inline-block; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--brand-ink);
  animation: fdn-toast-spin .7s linear infinite;
}
@keyframes fdn-toast-in   { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fdn-toast-out  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes fdn-toast-spin { to { transform: rotate(360deg); } }
@media (min-width: 768px) {
  .fdn-toaster {
    left: auto; right: var(--s-6); bottom: auto;
    top: calc(var(--header-h) + var(--s-4));
    transform: none; flex-direction: column; align-items: stretch;
  }
  @keyframes fdn-toast-in  { from { opacity: 0; transform: translateX(22px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes fdn-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(26px) scale(.98); } }
}

/* --------------------------------------------------------------------------
   Motion guardrail (§5) — disable non-essential motion on request
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
  .fdn-toast, .fdn-toast--out, .fdn-toast__spin { animation: none; }
  .btn-foodini, .rcard, .chip-foodini { transition: none; }
  .btn-foodini:active { transform: none; }
  .rcard:hover { transform: none; }
}

/* ==========================================================================
   Navigation (S2-2) — sticky top bar + mobile bottom nav + footer reskin.
   Restyles the existing header markup in place: every ID, onclick and
   data-attribute is untouched; selectors are specificity-matched against
   style.css (which loads before this file) so these rules win.
   ========================================================================== */

/* ---- Fixed header shell (<=64px rows) ----
   ONE rule for the header shell. It used to be authored twice, ~980 lines
   apart, with contradicting `position` values (sticky here, fixed there): the
   later block won on position and margin-bottom, while z-index, background and
   border-bottom were still supplied ONLY from here. Nothing rendered wrong,
   but the earlier half read like superseded sticky-era CSS and was the obvious
   thing to delete during a cleanup — which would have silently dropped the
   header out of the z-scale and made it transparent. Merged 2026-07-23. */
.returning_user_home_header.returning_user_home_header,
.main_home_content .returning_user_home_header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* 0, not --s-6: the bar is out of flow, so a bottom margin does nothing but
     confuse. (The later block already zeroed it; folded in here.) */
  margin-bottom: 0;
}
.returning_user_home_header.returning_user_home_header .navbar,
.main_home_content .returning_user_home_header .navbar {
  padding: var(--s-2) 0;
  min-height: var(--header-h);
}
.returning_user_home_header .navbar-brand img {
  height: 38px;
  width: auto;
}
.returning_user_home_header .mobile_header .navbar-brand img {
  height: 30px;
}

/* ---- Desktop middle group: address chip + search, one 44px line ---- */
.returning_user_home_header .search-boxes {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 var(--s-5);
}

/* address selector as a pill chip */
.returning_user_home_header #accordionaddress .accordion-button {
  background: var(--bg-subtle);
  border-radius: var(--r-pill);
  min-height: 44px;
  padding: 0 var(--s-4);
  box-shadow: none;
}
.returning_user_home_header .my_address_header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
}
.returning_user_home_header .my_address_header .address-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.returning_user_home_header .my_address_header .address_detail h5 {
  font: 600 13px/1.2 var(--font-sans);
  color: var(--text);
  margin: 0;
  white-space: nowrap;
}
.returning_user_home_header .addhress-arrow img {
  width: 12px;
}

/* address dropdown panel — same selector style.css uses, re-skinned */
#accordionaddress .accordion-item:last-of-type .accordion-collapse {
  position: absolute;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  width: 360px;
  z-index: var(--z-drawer);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  max-height: 70vh;
  overflow-y: auto;
}

/* search input as a pill (IDs beat any class rule in style.css) */
#myDesktopSearch {
  min-height: 44px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  border: 1.5px solid transparent;
  padding: 0 var(--s-4);
  font: 400 15px var(--font-sans);
  color: var(--text);
  width: 100%;
}
#myDesktopSearch:focus,
#myMobileSearch:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px var(--brand-050);
}
#myDesktopSearch::placeholder,
#myMobileSearch::placeholder {
  color: var(--text-subtle);
}
#myMobileSearch {
  min-height: 44px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  padding: 0 var(--s-4);
  font: 400 16px var(--font-sans); /* 16px avoids iOS zoom */
  width: 100%;
}
.returning_user_home_header .search-location {
  flex: 1 1 auto;
  min-width: 0;
}
.returning_user_home_header .search-location .form-group {
  position: relative;
  margin: 0;
}
.returning_user_home_header .search-location .form-group i {
  position: absolute;
  right: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.returning_user_home_header .search-location .form-group i img {
  width: 16px;
  display: block;
}

/* ---- Right group: account + cart ---- */
.returning_user_home_header .heder-login .submenu > a.show-submenu {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  text-decoration: none;
}
.returning_user_home_header .heder-login .submenu > a.show-submenu:hover {
  background: var(--bg-subtle);
}
.returning_user_home_header .heder-login .submenu h4 {
  font: 700 14px/1 var(--font-sans);
  color: var(--text);
  margin: 0;
}

/* cart pill — flat brand fill replaces the old gradient */
.my-cart-btn.my-cart-btn {
  background: var(--brand);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  transition: background .15s ease;
}
.my-cart-btn.my-cart-btn:hover {
  background: var(--brand-hover);
}
.my-cart-btn.my-cart-btn h5 {
  font: 700 14px/1 var(--font-sans);
  color: var(--on-brand);
}
.my-cart-btn .total_item {
  font-variant-numeric: tabular-nums;
}

/* cart dropdown panel — re-skin of style.css popover */
#accordioncheckout .accordion-item:last-of-type .accordion-collapse {
  position: absolute;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  width: 440px;
  z-index: var(--z-drawer);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  right: 0;
  max-height: 75vh;
  overflow-y: auto;
}
#accordioncheckout .model-title h2 {
  font: 800 20px/1.2 var(--font-sans);
  color: var(--text);
}

/* ---- Burger drawer (S2-9 re-skin; slide mechanics in style.css stay) ----
   The drawer is a flex column: logo header / nav rows / app-download block.
   style.css absolute-pinned .sidebar-footer-main to the bottom, which let
   the store badges crop against short viewports — the footer is in-flow
   now (margin-top:auto) so it can never be cut off or overlap the rows. */
.sidebar {
  background-color: var(--surface);
  box-shadow: var(--shadow-lg);
}
.sidebar .Menubar-side {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 264px; /* content keeps its shape while the width animates */
  padding: 0 22px 22px;
  overflow-y: auto;
}
.sidebar .sidemenu-header {
  flex: 0 0 auto;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--border);
}
.sidebar .sidemenu-header .foodini-text img { width: 116px; }
.sidebar .closebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
}
.sidebar .closebtn:hover { background: var(--bg-subtle); }
.sidebar .closebtn span {
  color: var(--text);
  font-size: 30px;
  line-height: 1;
}
.sidebar .menu_list a {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 10px;
  border-radius: var(--r-md);
  font: 600 16px/1.35 var(--font-sans);
  color: var(--text);
  text-decoration: none;
}
.sidebar .menu_list a:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.sidebar .menu_list a .bi {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  font-size: 19px;
  color: var(--text-muted);
}
.sidebar .sidebar-footer-main {
  position: static; /* beats style.css absolute bottom pin */
  margin-top: auto;
  padding-top: 22px;
}
.sidebar .side-footer {
  justify-content: flex-start;
  gap: 12px;
}
.sidebar .foodini-side-icon { margin-right: 0; }
.sidebar .foodini-side-icon img {
  width: 48px;
  border-radius: 12px;
}
.sidebar .foodini-side-description h5 {
  font: 700 14px/1.3 var(--font-sans);
  color: var(--text);
  letter-spacing: .02em;
  margin: 0 0 2px;
}
.sidebar .foodini-side-description p {
  font: 500 13px/1.4 var(--font-sans);
  color: var(--text-muted);
  margin: 0;
}
.sidebar .mobile-app {
  justify-content: flex-start !important; /* bootstrap utility in markup */
  gap: 10px;
  margin-top: 14px !important;
}
.sidebar .mobile-app img {
  height: 40px;
  width: auto;
}
/* while any full-screen layer is up (drawer, search sheet) the fixed
   bottom nav must not paint over it — it wins its z-100 tie against the
   header's stacking context purely by DOM order */
html.fdn-lock .fdn-bottom-nav { visibility: hidden; }

/* ---- Mobile top bar: logo . search . cart . burger ---- */
.returning_user_home_header .mobile_header {
  gap: var(--s-2);
}
.fdn-mobile-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);   /* S4-17: neutral until the cart holds items */
  color: var(--text);
  font-size: 19px;
  text-decoration: none;
  margin-left: auto;
}
.fdn-mobile-cart:hover,
.fdn-mobile-cart:focus {
  background: var(--border);
  color: var(--text);
}
/* S4-17: when the cart holds items the icon's own STROKES go green (user:
   "the cart lines green, not a panel behind the cart") — the round button
   keeps its subtle neutral background, no green fill. --brand-ink is the
   AA-legible green for strokes. .has-items is toggled by the cart-count
   observer in inc/script.php. */
.fdn-mobile-cart.has-items {
  color: var(--brand-ink);
}
.fdn-mobile-cart__count {
  position: absolute;
  top: -4px;
  right: -9px;                    /* S4-17: tucked to the far right, where the pill ends */
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  font: 800 11px/18px var(--font-sans);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* no "0" bubble on an empty cart — the count appears once there's something in it */
.fdn-mobile-cart:not(.has-items) .fdn-mobile-cart__count { display: none; }
.returning_user_home_header .mobile_header .search-filter {
  margin-left: 0 !important; /* markup has .ms-auto; the cart chip takes the auto gap now */
}
@media (max-width: 991.98px) {
  .returning_user_home_header.returning_user_home_header .navbar {
    min-height: 56px;
    padding: var(--s-1) 0;
  }
}

/* ---- Mobile bottom nav (DESIGN-SYSTEM section 4, Navigation) ---- */
.fdn-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* One step UNDER the full-screen dims (.fdn-search-dim / .fdn-nav-dim, both
     z-99), not level with the header. Sharing --z-header (100) gave this bar
     the header's deliberate above-the-dim exemption by accident: with the
     mobile search sheet or the side/cart drawer open, the page went dark but
     the tab bar stayed lit AND tappable, so a tap navigated away mid-overlay
     instead of dismissing it. The header and this bar never overlap (top:0 vs
     bottom:0), so nothing else depends on them sharing a layer. */
  z-index: calc(var(--z-header) - 2);
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.fdn-bottom-nav__item {
  flex: 1 1 0;
  /* min-width:0 is load-bearing: the default min-width:auto floors a flex item
     at its min-content width (the nowrap label), so with 5-6 tabs the bar could
     not shrink and the last tab was pushed OFF-SCREEN (Albanian @320: Account
     tab at x=338 in a 320px viewport; @280 it was 58px past the edge). The nav
     is position:fixed, so this never showed up in any page-scrollWidth test.
     With min-width:0 the tabs shrink evenly and __item span's existing
     text-overflow:ellipsis finally engages. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  color: var(--text-muted);
  font: 600 11px/1.2 var(--font-sans);
  text-decoration: none;
}
.fdn-bottom-nav__item i {
  font-size: 20px;
  line-height: 1;
}
.fdn-bottom-nav__item:hover,
.fdn-bottom-nav__item:focus {
  color: var(--text);
  text-decoration: none;
}
.fdn-bottom-nav__item.is-active {
  color: var(--brand-ink);
}
@media (min-width: 992px) {
  .fdn-bottom-nav {
    display: none;
  }
}
@media (max-width: 991.98px) {
  /* Scoped to pages that ACTUALLY render the nav. The bar is included from the
     two header partials, but this reservation was written against <body>
     unconditionally — so the marketing landing and the checkout page, neither
     of which includes a header partial, ended with a ~56px band of empty page
     background under their last content (on checkout it sat right below the
     Place Order card and read as a page that failed to finish loading).
     inc/bottom-nav.php sets the class next to the <nav> itself, so the
     reservation can never outlive the element it reserves for. */
  body.fdn-has-bottomnav {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  }
}

/* ---- Footer reskin (markup untouched) ---- */
.footer-section.footer-section {
  background-color: var(--bg-subtle);
  background-image: none;
  border-top: 1px solid var(--border);
  padding: var(--s-10) 0 var(--s-4);
}
.footer-section .main-title,
.footer-section .c-white {
  color: var(--text);
  font: 700 14px/1.3 var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.footer-section .link-list .list-group-item {
  background: transparent;
  color: var(--text-muted);
  font: 500 14px/1.5 var(--font-sans);
  padding: var(--s-1) 0;
}
.footer-section .link-list .list-group-item:hover {
  color: var(--brand-ink);
}
.footer-section .copyright p {
  color: var(--text-subtle);
  font: 500 13px/1.4 var(--font-sans);
  margin: var(--s-6) 0 0;
}

/* ==========================================================================
   Home / discovery (S2-3) — cuisine rail, filter chips, banner + card rails.
   Built only from tokens; used by inc/home-discovery.php (home + index).
   ========================================================================== */

.fdn-home {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-bottom: var(--s-10);
}
.fdn-sec { min-width: 0; }

/* ---- Emergency broadcast: slim brand-tint strip ---- */
.fdn-broadcast {
  background: var(--brand-050);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
}
.fdn-broadcast__text {
  color: var(--brand-ink);
  font: 700 15px/1.4 var(--font-sans);
  margin: 0;
  text-align: center;
}
.fdn-broadcast__img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--r-md);
  margin-top: var(--s-4);
}

/* ---- Cuisine rail ---- */
.fdn-cuisine-rail { padding: var(--s-2) 0; }
.fdn-cuisine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  min-width: 76px;
  text-decoration: none;
  color: var(--text);
}
.fdn-cuisine__thumb {
  width: 68px;
  height: 68px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fdn-cuisine:hover .fdn-cuisine__thumb {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.fdn-cuisine__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fdn-cuisine__emoji { font-size: 30px; line-height: 1; }
.fdn-cuisine__label {
  font: 600 13px/1.2 var(--font-sans);
  color: var(--text);
  text-align: center;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdn-cuisine:hover .fdn-cuisine__label { color: var(--brand-ink); }

/* ---- Filter panel (same form fields as before) ---- */
.fdn-filter-panel {
  margin-top: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
}
.fdn-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-6);
}
.fdn-filter-group__title {
  display: block;
  font: 700 14px/1.3 var(--font-sans);
  margin-bottom: var(--s-3);
  color: var(--text);
}
.fdn-filter-panel .select_cat {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.fdn-filter-panel .form-check-label { font: 400 14px/1.6 var(--font-sans); color: var(--text-muted); }
.fdn-filter-actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

/* ---- Horizontal rails (scroll-snap) ---- */
.fdn-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.fdn-rail-title {
  font: 800 22px/1.2 var(--font-sans);
  color: var(--text);
  margin: 0;
}
.fdn-rail-sub {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--text-muted);
  margin: var(--s-1) 0 0;
}
.fdn-viewmore {
  font: 700 14px/1.2 var(--font-sans);
  color: var(--brand-ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fdn-viewmore:hover { color: var(--brand-ink); text-decoration: none; }

.fdn-rail,
.fdn-banner-rail {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-1) var(--s-1) var(--s-3);
  scrollbar-width: none;
}
.fdn-rail::-webkit-scrollbar,
.fdn-banner-rail::-webkit-scrollbar { display: none; }
.fdn-rail > *,
.fdn-banner-rail > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* ---- Banner cards ---- */
.fdn-banner {
  display: block;
  width: min(78vw, 560px);
  aspect-ratio: 21 / 8;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-subtle);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.fdn-banner:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.fdn-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Restaurant card (rail variant of .rcard) ---- */
.fdn-card {
  position: relative;
  width: min(78vw, 300px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.fdn-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.fdn-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg-subtle);
  overflow: hidden;
  position: relative;
}
.fdn-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fdn-card__status {
  position: absolute;
  left: var(--s-2);
  bottom: var(--s-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--success-050);
  color: var(--success-ink);
  font: 700 12px/1.2 var(--font-sans);
}
.fdn-card__status--closed {
  background: var(--danger-050);
  color: var(--danger-ink);
}
.fdn-card__fav {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  object-fit: contain;
  z-index: 1;
}
.fdn-card__body { padding: var(--s-3) var(--s-4) var(--s-4); }
.fdn-card__toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.fdn-card__namelink { text-decoration: none; min-width: 0; }
.fdn-card__namelink:hover { text-decoration: none; }
.fdn-card__name {
  font: 700 17px/1.3 var(--font-sans);
  color: var(--text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdn-card__namelink:hover .fdn-card__name { color: var(--brand-ink); }
.fdn-card__meta {
  font: 500 13px/1.45 var(--font-sans);
  color: var(--text-muted);
  margin: var(--s-1) 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .fdn-card { width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .fdn-card, .fdn-banner, .fdn-cuisine__thumb { transition: none; }
  .fdn-card:hover, .fdn-banner:hover { transform: none; }
  .fdn-cuisine:hover .fdn-cuisine__thumb { transform: none; }
}

/* ==========================================================================
   Discovery layout v2 (S2-3, discovery.png) — solid left sidebar + main col,
   owl banner carousel, rail arrow buttons.
   ========================================================================== */

.fdn-layout { display: block; }
@media (min-width: 992px) {
  .fdn-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
}

/* ---- Left sidebar: categories + offers (desktop only) ---- */
.fdn-side { display: none; }
@media (min-width: 992px) {
  .fdn-side {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    max-height: calc(100vh - var(--header-h) - var(--s-8));
    overflow-y: auto;
    padding-right: var(--s-2);
    scrollbar-width: thin;
  }
}
.fdn-side__group { display: flex; flex-direction: column; }
.fdn-side__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border-left: 3px solid transparent;
  color: var(--text);
  font: 600 14px/1.4 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.fdn-side__link:hover { background: var(--bg-subtle); color: var(--text); text-decoration: none; }
.fdn-side__link.is-active {
  background: var(--bg-subtle);
  border-left-color: var(--brand-ink);
  color: var(--text);
}
.fdn-side__emoji { font-size: 17px; line-height: 1; width: 22px; text-align: center; flex: 0 0 auto; }
.fdn-side__link--offer { color: var(--brand-ink); }
.fdn-side__link--offer:hover { color: var(--brand-ink); }
.fdn-side__divider { height: 1px; background: var(--border); margin: var(--s-3) 0; }

.fdn-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-width: 0;
}

/* ---- Rail wrapper + arrow buttons ---- */
.fdn-railwrap { position: relative; }
.fdn-rail-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}
.fdn-rail-btn:hover { background: var(--bg-subtle); }
.fdn-rail-btn--prev { left: -12px; }
.fdn-rail-btn--next { right: -12px; }
@media (min-width: 768px) {
  .fdn-rail-btn { display: inline-flex; }
}

/* ---- Owl banner carousel (auto-play) ---- */
.fdn-ads-owl .fdn-banner {
  width: 100%;
  aspect-ratio: 21 / 8;
}
.fdn-ads-owl .owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  margin: 0;
}
.fdn-ads-owl .owl-nav button.owl-prev,
.fdn-ads-owl .owl-nav button.owl-next {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  margin: 0 -12px;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-pill);
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.fdn-ads-owl .owl-nav button.owl-prev:hover,
.fdn-ads-owl .owl-nav button.owl-next:hover { background: var(--bg-subtle) !important; }

/* Sidebar pushes content: keep rails from under the arrows on small screens */
@media (max-width: 767.98px) {
  .fdn-railwrap { margin: 0; }
}

/* ==========================================================================
   Discovery polish (S2-3c) — rail edge fades, reference-style address chip
   and search pill (replaces the legacy orange gradient + heavy shadows).
   ========================================================================== */

/* ---- Edge fades on the scrollable emoji rail ---- */
.fdn-fade-wrap { position: relative; min-width: 0; }
.fdn-fade-wrap::before,
.fdn-fade-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 150ms ease;
}
.fdn-fade-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
}
.fdn-fade-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
}
/* The fade on each side mirrors that side's scroll arrow: no arrow → no
   fade. At the far left there is no prev arrow, so the left fade must not
   sit over the first tile ("Dyqane"); at the far right no next arrow, no
   right fade; a rail that fits shows neither. The rail JS toggles
   is-start / is-end on the wrap from the same scroll sync that drives
   .fdn-rail-btn--gone, so fade and arrow appear and vanish together. */
.fdn-fade-wrap.is-start::before,
.fdn-fade-wrap.is-end::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fdn-fade-wrap::before,
  .fdn-fade-wrap::after { transition: none; }
}

/* ---- S2-7: scroll-aware arrows + fades (user request) --------------------
   inc/script.php stamps .fdn-railwrap--dyn on every rail wrap except the
   auto-advancing Oferta and keeps is-start/is-end in sync with scrollLeft:
   far left → no prev arrow, no left fade; middle → both sides; far right →
   no next arrow, no right fade. A rail that fits entirely carries BOTH
   state classes, so it shows no arrows or fades at all. ---- */
.fdn-railwrap--dyn::before,
.fdn-railwrap--dyn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 150ms ease;
}
.fdn-railwrap--dyn::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
}
.fdn-railwrap--dyn::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
}
.fdn-railwrap--dyn.is-start::before,
.fdn-railwrap--dyn.is-end::after { opacity: 0; }
.fdn-railwrap--dyn.is-start .fdn-rail-btn--prev,
.fdn-railwrap--dyn.is-end .fdn-rail-btn--next { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fdn-railwrap--dyn::before,
  .fdn-railwrap--dyn::after { transition: none; }
}

/* ---- Address chip: grey pill, pin glyph, one-line address, caret ---- */
.my_address_header.my_address_header {
  background: var(--bg-subtle);          /* kills the orange gradient */
  border-radius: var(--r-pill);
  padding: 0 var(--s-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.my_address_header .address-icon {
  width: auto;
  box-shadow: none;
  border-radius: 0;
}
.fdn-pin { font-size: 17px; color: var(--text); line-height: 1; }
.my_address_header .address_detail h5,
.address_detail h5 {
  color: var(--text);
  font: 600 14px/1.2 var(--font-sans);
  margin: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdn-caret { font-size: 12px; color: var(--text-muted); transition: transform .15s ease; }
.accordion-button:not(.collapsed) .fdn-caret { transform: rotate(180deg); }
.returning_user_home_header .addhress-arrow { display: flex; align-items: center; }

/* ---- Search: one wide pill, magnifier on the LEFT (reference look) ---- */
.custom-search-input.custom-search-input {
  background: transparent;
  padding: 0;
  border-radius: var(--r-pill);
  box-shadow: none;
  margin: 0;
}
.custom-search-input input,
#myDesktopSearch {
  min-height: 44px;
  height: 44px;
  width: 100%;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  padding: 0 var(--s-4) 0 44px;          /* room for the left icon */
  font: 400 15px var(--font-sans);
  color: var(--text);
  box-shadow: none;
}
.returning_user_home_header .search-location .form-group i {
  left: var(--s-4);
  right: auto;
}
@media (prefers-reduced-motion: reduce) {
  .fdn-caret { transition: none; }
}

/* ==========================================================================
   S2-3d — permanently visible header, green app-download strip, search-icon
   centering (discovery.png adaptation).
   ========================================================================== */

/* ---- Header: fixed, never disappears on scroll ----
   (the shell rule itself now lives in ONE place — the "Fixed header shell"
   block in the Navigation section above — so this half was folded into it) */
/* content flows below the fixed bar. The mobile 56px case is handled by the
   --header-h redefinition in foodini-tokens.css, not by a patch here. */
body { padding-top: var(--header-h); }

/* (the green .fdn-appstrip download banner was removed on user request —
   the store badges live in the footer brand block now) */

/* ---- Search icon: dead-center vertically, same level as the text ---- */
.returning_user_home_header .search-location .form-group i,
.custom-search-input .form-group i {
  position: absolute;
  left: var(--s-4);
  right: auto;
  top: 0;
  bottom: 0;
  height: 100%;
  margin: 0;
  transform: none;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.returning_user_home_header .search-location .form-group i img,
.custom-search-input .form-group i img {
  width: 16px;
  height: 16px;
  display: block;
}

/* ---- Discovery polish: breathing room above content now that the
       header is fixed and the strip sits at the very top of the flow ---- */
.fdn-home { padding-top: var(--s-6); }

/* ==========================================================================
   S2-3e — sidebar hugs the far-left edge; main column gets maximum width.
   ========================================================================== */

/* strip the container's spare gutters on the discovery page only */
.fdn-home > .container-fluid {
  max-width: none;
  padding-left: var(--s-3);
  padding-right: var(--s-4);
}

@media (min-width: 992px) {
  /* 2026-07-21 (user: "make it exactly like Uber Eats … spread to be
     2000px"): the sidebar + content block is CENTERED at a wide 2000px max
     (was 1200) instead of hugging the full viewport (reverses the S2-3e
     far-left hug). Keeps the sidebar. The header inner content is centered to
     the SAME 2000px column (see .fdn-nav--home / desktop_header below) so the
     logo sits above the sidebar and the cart above the content's right edge,
     exactly like the reference. */
  .fdn-layout {
    grid-template-columns: 208px minmax(0, 1fr);
    gap: var(--s-5);
    max-width: 2000px;
    margin-inline: auto;
  }
  .fdn-side { padding-right: 0; }
  .fdn-side__link { padding: var(--s-2) var(--s-2); }
}
@media (min-width: 1500px) {
  .fdn-layout { grid-template-columns: 230px minmax(0, 1fr); }
}

/* ==========================================================================
   S2-10 — discovery filters as a chip row under the category rail (reference
   layout); the legacy Filtra panel opens from a chip in that row and reads
   as a card in the main column. Doubled class beats the sidebar-era
   seamless .fdn-filter-panel override further down.
   ========================================================================== */
.fdn-filter-panel.fdn-filter-panel--card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s-5);
  margin: 0 0 var(--s-4);
}

/* ==========================================================================
   S2-11 — back button on inner pages (store/restaurant, listings): round
   44px chip-grey circle; fdnGoBack() (inc/script.php) returns to the
   previous same-site page, direct arrivals go home.
   ========================================================================== */
.fdn-backbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  transition: background .15s ease;
}
.fdn-backbtn:hover { background: var(--border); color: var(--text); }
.fdn-backbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-050), 0 0 0 4.5px var(--brand-ink);
}
/* title rows on listing pages — the head keeps its rhythm, the row owns it */
.fdn-page-headrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-4);
}
.fdn-page-headrow .fdn-page-head { margin: 0; }
.fdn-page-headrow .page-title h2 { margin: 0; }
/* on the restaurant hero photo: floating white circle, mirrors the fav */
.fdn-resto-hero .fdn-backbtn {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.fdn-resto-hero .fdn-backbtn:hover { background: var(--bg-subtle); }

/* deal name label on campaign banners */
.fdn-banner { position: relative; }
.fdn-banner__label {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  max-width: calc(100% - 2 * var(--s-3));
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: 700 13px/1.2 var(--font-sans);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   S2-3g - deal artwork fits fully inside the banner frame (no crop/zoom).
   Campaign GIFs come in mixed aspect ratios; contain shows the whole visual.
   Restaurant-photo rails elsewhere keep object-fit: cover.
   ========================================================================== */
#fdn-offers .fdn-banner, #fdn-dishdeals .fdn-banner {
  background: var(--surface);
  border: 1px solid var(--border);
}
#fdn-offers .fdn-banner img, #fdn-dishdeals .fdn-banner img {
  object-fit: contain;
  padding: var(--s-2);
}

/* ==========================================================================
   S2-4 / Uber-Eats-style reference pass — seamless surfaces (no panel
   divisions), real artwork categories (no emoji chips, no shadows), clean
   cards with a DB meta line, pill search + autosuggest, listing grid with
   sticky filter chips. Tokens only (DESIGN-SYSTEM section 3).
   ========================================================================== */

/* ---- Category rail: free-floating artwork, label under, NO chip/shadow ---- */
.fdn-cuisine-rail { padding: var(--s-2) 0 var(--s-1); }
.fdn-cuisine { min-width: 84px; gap: var(--s-2); }
/* legacy .cate (style.css:9893, old owl carousel) leaks a big grey drop
   shadow under every item — the class survives only as markup marker on
   the new rail, so strip its skin here (this file loads after style.css) */
.fdn-cuisine.cate {
  box-shadow: none;
  background: transparent;
}
.fdn-cuisine__thumb {
  width: 76px;
  height: 64px;
  border-radius: 0;
  background: transparent;              /* seamless: kills the grey disc */
  box-shadow: none;
  overflow: hidden;
  transition: transform .15s ease;
}
.fdn-cuisine:hover .fdn-cuisine__thumb {
  transform: translateY(-2px);
  box-shadow: none;                     /* seamless: no hover shadow either */
}
.fdn-cuisine__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;                  /* full artwork, uncropped — floats
                                           on the page like the reference */
  display: block;
}
.fdn-cuisine__fallback { font-size: 28px; color: var(--text-muted); line-height: 1; }
.fdn-cuisine__label { font: 600 14px/1.2 var(--font-sans); max-width: 96px; }

/* ---- Broadcast: slim full-bleed strip riding the header's bottom edge ----
   It is emitted BEFORE .main-body-section (see inc/home-discovery.php), so as
   the first element in flow it sits exactly on var(--header-h) with nothing
   between. Square corners and a full-bleed width are deliberate: a rounded,
   inset card floating below the header read as a detached advert, this reads
   as part of the chrome. Announcement, not decoration — so it stays slim. */
.fdn-broadcast.fdn-broadcast {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: var(--s-2) var(--s-10) var(--s-2) var(--s-4);
  background: var(--brand-green);
  /* a hairline of the darker brand shade separates the strip from the page
     without introducing a second colour */
  border: 0;
  border-bottom: 1px solid var(--brand-600);
  border-radius: 0;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
/* the inner row is what gets centred and width-capped, so the strip itself can
   still span edge to edge on ultra-wide */
.fdn-broadcast__in {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.fdn-broadcast.fdn-broadcast .fdn-broadcast__text {
  margin: 0;
  color: var(--on-brand-green);
  font: 600 14px/1.35 var(--font-sans);
  text-align: center;
}
.fdn-broadcast__ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22);
  color: var(--on-brand-green);
  font-size: 14px;
}
/* the API ships the link inline in the copy; as a pill it reads as the action
   it is, and gets a real 44px-tall target instead of a URL to squint at */
.fdn-broadcast__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--on-brand-green);
  color: #fff;
  font: 700 13px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.fdn-broadcast__cta:hover { background: #0f1c02; color: #fff; text-decoration: none; }
.fdn-broadcast__cta:active { transform: translateY(1px); }
.fdn-broadcast__cta i { font-size: 11px; }
.fdn-broadcast.fdn-broadcast .fdn-broadcast__img {
  width: auto;
  max-height: 30px;
  margin: 0;
  border-radius: var(--r-sm);
}
.fdn-broadcast__close {
  position: absolute;
  right: var(--s-2);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--on-brand-green);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 32 -> 44 hit area, no visual change (same pattern as the other icon buttons) */
.fdn-broadcast__close::before { content: ""; position: absolute; inset: -6px; }
.fdn-broadcast__close:hover { background: rgba(255, 255, 255, .22); }
/* dismissal fade — the strip used to vanish in one frame */
.fdn-broadcast.is-gone { opacity: 0; transform: translateY(-6px); }

@media (max-width: 575px) {
  /* On a 390px phone the untightened strip ran to 124px — three wrapped lines
     plus the CTA on its own row, which is a lot of the fold for an
     announcement. Keep every word (an emergency notice must never be clipped)
     but tighten the type and let the icon and CTA share the last line. */
  .fdn-broadcast.fdn-broadcast {
    padding: 6px var(--s-8) 6px var(--s-3);
    min-height: 40px;
  }
  .fdn-broadcast__in { justify-content: flex-start; gap: 4px var(--s-2); }
  .fdn-broadcast.fdn-broadcast .fdn-broadcast__text {
    font: 600 12.5px/1.3 var(--font-sans);
    text-align: left;
    /* share row 1 with the icon (a 100% basis pushed the icon onto a row of its
       own and cost ~28px), but keep a basis wide enough that the CTA still
       wraps below instead of squeezing the copy into a column */
    flex: 1 1 60%;
    min-width: 0;
    order: 2;
  }
  .fdn-broadcast__ic { width: 22px; height: 22px; font-size: 12px; order: 1; }
  .fdn-broadcast__cta { order: 3; min-height: 28px; font-size: 12px; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .fdn-broadcast.fdn-broadcast, .fdn-broadcast__cta { transition: none; }
}

/* ---- Sidebar: icon/artwork tile + label, grey pill active (reference) ---- */
.fdn-side__ic {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--text);
}
.fdn-side__ic img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
}
/* inline Lucide icons (inc/fdn-icons.php): no width/height attrs on the
   <svg>, so size them here; stroke rides on currentColor like the bi-* font */
.fdn-ic {
  width: 1em;
  height: 1em;
  display: block;
  flex: 0 0 auto;
}
.fdn-side__ic .fdn-ic {
  width: 20px;
  height: 20px;
}
.fdn-side__link {
  border-left: 0;
  border-radius: var(--r-md);
  font: 600 15px/1.4 var(--font-sans);
}
.fdn-side__link.is-active {
  background: var(--bg-subtle);
  border-left: 0;
}
.fdn-side__link--offer,
.fdn-side__link--offer .fdn-side__ic { color: var(--brand-ink); }
.fdn-side__link--offer:hover { color: var(--brand-ink); }

/* ---- Cards: borderless, soft shadow, heart in the body row (reference) ---- */
.fdn-card {
  border: 0;
  box-shadow: var(--shadow-sm);
}
.fdn-card:hover { box-shadow: var(--shadow-md); }
.fdn-card__fav {
  position: static;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
}
.fdn-card__meta { margin-top: 2px; }
.fdn-star { font-size: 11px; color: var(--text); }
.fdn-meta-dim { color: var(--text-subtle); }
.fdn-card__state {
  margin: 2px 0 0;
  font: 700 13px/1.4 var(--font-sans);
  color: var(--success-ink);
}
.fdn-card__state--closed { color: var(--danger-ink); }
.fdn-card--closed .fdn-card__media img { filter: grayscale(.5); opacity: .8; }

/* dish result card: price + round add button */
.fdn-card__pricerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.fdn-dishadd.fdn-dishadd { text-decoration: none; color: var(--brand-ink); }

/* ---- Deals rail: frameless artwork (seamless) ---- */
#fdn-offers .fdn-banner, #fdn-dishdeals .fdn-banner {
  border: 0;
  background: transparent;
  box-shadow: none;
}
#fdn-offers .fdn-banner img, #fdn-dishdeals .fdn-banner img { padding: 0; border-radius: var(--r-lg); }

/* ---- Listing / favourites / search: responsive card grid ---- */
.fdn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-5) var(--s-4);
}
.fdn-grid .fdn-card { width: auto; }
.fdn-page-head {
  font: 800 28px/1.15 var(--font-sans);
  color: var(--text);
  margin: var(--s-6) 0 var(--s-4);
}
@media (min-width: 992px) {
  .fdn-page-head { font-size: 32px; }
}

/* ---- Sticky filter chips on the listing (S2-4) ---- */
.fdn-chipbar {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-header) - 10);
  background: var(--bg);
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--s-2) 0 var(--s-3);
  margin-bottom: var(--s-2);
}
.fdn-chipbar::-webkit-scrollbar { display: none; }
.fdn-chipbar .chip-foodini { flex: 0 0 auto; }
.fdn-chipbar .chip-foodini img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: var(--r-pill);
  display: block;
}
/* (the mobile 56px offset now comes from --header-h itself — foodini-tokens.css) */
/* The filter chip bar (#fdnChips on discovery + search) carries the Rating /
   Sort DROPDOWN chips. A horizontal scroll container (overflow-x:auto) makes
   CSS compute overflow-y to `auto` as well, which CLIPPED the dropdown menu —
   the Vlerësimi filter opened invisibly on every width, and on mobile the
   chip itself was half-cut at the scroll edge. There are only ~5 filters, so
   wrap them instead of scrolling: every chip is fully visible AND the menu is
   free to overhang below the bar. (The listing page's scrolling cuisine rail
   is a separate .fdn-chipwrap structure — untouched.) */
#fdnChips { flex-wrap: wrap; overflow: visible; }

/* ---- S2-8: listing chip row as an arrow rail. The bar overflowed with a
   hidden scrollbar — desktop mice had no way to reach the clipped chips.
   The wrapper takes over the bar's sticky duty (sticky on the inner
   scroller would be capped by the wrap's own height); the shared S2-7
   module supplies scroll-aware arrows + edge fades via --dyn. ---- */
.fdn-chipwrap {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-header) - 10);
  background: var(--bg);
  margin-bottom: var(--s-2);
}
.fdn-chipwrap .fdn-chipbar {
  position: static;
  top: auto;
  z-index: auto;
  margin-bottom: 0;
}
.fdn-chipwrap .fdn-rail-btn {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.fdn-chipwrap .fdn-rail-btn--prev { left: -8px; }
.fdn-chipwrap .fdn-rail-btn--next { right: -8px; }
/* (the mobile 56px offset now comes from --header-h itself — foodini-tokens.css) */

/* ---- Header search: grey pill + autosuggest dropdown (reference) ----
   #myMobileSearch lives in .main-search-filter (accordion), not
   .custom-search-input — list it explicitly everywhere. */
.custom-search-input input,
#myDesktopSearch,
#myMobileSearch {
  border: 1.5px solid transparent;
  background: var(--bg-subtle);
  height: 46px;
  min-height: 46px;
  /* 16px, not 15px: iPad Safari applies the same zoom-on-focus rule as the
     phone, and this is the pill that renders at >=992px — tapping it in
     landscape zoomed the page. Only typed text gains the 1px; the placeholder
     is pinned below so the resting bar is pixel-identical. */
  font-size: 16px;
}
/* Placeholders keep the size they were drawn at, independent of the bump
   above. In the header pills style.css already pins them
   (`.search-location .form-group .form-control::placeholder`, 14px
   !important) and wins, so this rule is what holds the size in the states
   that rule does NOT reach — chiefly #myMobileSearch once the search sheet
   opens and the `:not(.fdn-searchwrap--overlay)` mobile rule stops matching,
   where the placeholder used to simply inherit the input's 15px. */
.custom-search-input input::placeholder,
#myDesktopSearch::placeholder,
#myMobileSearch::placeholder {
  font-size: 15px;
}
.custom-search-input input:focus,
#myDesktopSearch:focus,
#myMobileSearch:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px var(--brand-050);
}
.fdn-searchwrap { position: relative; }
.fdn-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-drawer);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  max-height: min(60vh, 440px);
  overflow-y: auto;
  padding: var(--s-2);
  display: none;
}
.fdn-suggest.is-open { display: block; }
.fdn-suggest__sec {
  font: 700 12px/1.4 var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: var(--s-2) var(--s-3) var(--s-1);
  margin: 0;
}
.fdn-suggest__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.fdn-suggest__row:hover,
.fdn-suggest__row.is-active { background: var(--bg-subtle); color: var(--text); text-decoration: none; }
.fdn-suggest__img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--bg-subtle);
}
.fdn-suggest__ic {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: 0 0 auto;
}
.fdn-suggest__name {
  font: 600 14px/1.3 var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdn-suggest__sub {
  font: 500 12px/1.3 var(--font-sans);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdn-suggest__main { min-width: 0; flex: 1 1 auto; }
.fdn-suggest__price { font: 700 13px/1.2 var(--font-sans); color: var(--text); flex: 0 0 auto; }
.fdn-suggest__empty {
  padding: var(--s-4);
  text-align: center;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--text-muted);
}

/* empty-state icon: Bootstrap Icon instead of emoji */
.state-foodini__icon i { font-size: 40px; color: var(--text-subtle); line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .fdn-cuisine:hover .fdn-cuisine__thumb { transform: none; }
}

/* ==========================================================================
   S2-4d/e - header right group (auth buttons + burger pinned far right),
   minimal search icon, chip-style filter choices, quiet closed tag on
   cards, reference-style search dropdown. Tokens only.
   ========================================================================== */

/* ---- Right group: pin to the far right, one row, tidy gaps ---- */
.returning_user_home_header .main-header-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}
.fdn-authrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fdn-authrow .submenu { margin: 0; }

/* auth buttons: Identifikohu = quiet, Regjistrohu = primary */
.returning_user_home_header .heder-login .submenu > a.fdn-authbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  text-decoration: none;
  background: var(--bg-subtle);
  color: var(--text);
  transition: background .15s ease;
}
.returning_user_home_header .heder-login .submenu > a.fdn-authbtn h4 {
  margin: 0;
  font: 700 14px/1 var(--font-sans);
  color: inherit;
  white-space: nowrap;
}
.returning_user_home_header .heder-login .submenu > a.fdn-authbtn--ghost:hover {
  background: var(--border);
  color: var(--text);
}
.returning_user_home_header .heder-login .submenu > a.fdn-authbtn--primary {
  background: var(--brand);
  color: var(--on-brand);
}
.returning_user_home_header .heder-login .submenu > a.fdn-authbtn--primary:hover {
  background: var(--brand-hover);
  color: var(--on-brand);
}

/* ---- Burger: one fixed-size target on every screen (was a tiny svg) ---- */
.returning_user_home_header .openbtn,
.openbtn.openbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
  flex: 0 0 auto;
}
.returning_user_home_header .openbtn:hover,
.openbtn.openbtn:hover { background: var(--bg-subtle); color: var(--text); }
.openbtn.openbtn i { line-height: 1; }

/* ---- Mobile search toggle: same minimal icon language ---- */
.icon_btn.search_icon_mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-size: 20px;
}
.icon_btn.search_icon_mobile:hover { background: var(--bg-subtle); }

/* ---- In-bar search icon: one quiet glyph, brand on focus ---- */
.returning_user_home_header .search-location .form-group i.fdn-searchico,
.custom-search-input .form-group i.fdn-searchico {
  font-size: 17px;
  color: var(--text-subtle);
  font-style: normal;
}
.fdn-searchwrap:focus-within .fdn-searchico { color: var(--brand-ink); }

/* ---- Filter choices as chips (same inputs, hidden; labels do the UI) ---- */
.fdn-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
}
.fdn-choices .form-check,
.fdn-choices li {
  margin: 0 !important;
  padding: 0;
  list-style: none;
  min-height: 0;
}
.fdn-choices input[type="radio"],
.fdn-choices input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  /* Reset the box. `.field-foodini input` (width:100%; min-height:48px) also
     matches these radios, and this rule never overrode width -> each hidden
     radio became a box 100% of the nearest POSITIONED ancestor (not the <li>),
     sitting at its staggered static position. opacity:0 hides it but it still
     creates scrollable overflow: my_account scrolled 207px sideways at every
     mobile width with nothing visibly wrong. Sized to 1px rather than
     display:none/visibility:hidden so the input stays in the tab order for
     `input:focus-visible + label` below (the standard visually-hidden
     pattern) — this rule already relied on opacity:0 for that. */
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.fdn-choices label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  margin: 0;
}
.fdn-choices label:hover { border-color: var(--text-subtle); color: var(--text); }
.fdn-choices label i { font-size: 11px; }
.fdn-choices input:checked + label {
  background: var(--brand-050);
  border-color: var(--brand-ink);
  color: var(--brand-ink);
}
.fdn-choices input:focus-visible + label {
  box-shadow: 0 0 0 3px var(--brand-050), 0 0 0 4.5px var(--brand-ink);
}
.fdn-filter-panel .select_cat.fdn-choices {
  max-height: 240px;
  overflow-y: auto;
}

/* ---- Cards: quiet closed tag on the image (no more big green Hapur) ---- */
.fdn-card__closedtag {
  position: absolute;
  left: var(--s-2);
  bottom: var(--s-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(26, 26, 26, .72);
  color: #FFFFFF;
  font: 700 12px/1.2 var(--font-sans);
}

/* ---- Search dropdown: reference look (round logos, hairline rows) ---- */
.fdn-suggest {
  padding: var(--s-2) var(--s-4) var(--s-3);
  min-width: min(92vw, 480px);
  /* Was min(60vh, 440px). With only a handful of tall rows the panel came out
     short and very wide — it read as a banner rather than a list, which is why
     the same width that works on Uber looked wrong here. More height + more
     rows (top_suggest(8)) restores the proportion. */
  max-height: min(70vh, 560px);
  /* sit closer to the field so the two read as one surface, the way the
     reference nests its input inside the panel card */
  top: calc(100% + 4px);
  transform-origin: top center;
}

/* Opening was a raw display:none → block flip: the panel appeared in a single
   frame while the scrim behind it faded over 200ms, so the two moved out of
   sync and the whole thing felt abrupt. Animate the panel on the same curve as
   the scrim, a touch slower, so field → scrim → list settle together. */
@keyframes fdnSuggestIn {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.fdn-suggest.is-open {
  animation: fdnSuggestIn 320ms cubic-bezier(.16, 1, .3, 1) both;
}
/* (the scrim's own 320ms transition is set on .fdn-search-dim itself, below —
   duplicating it here would lose to that later rule anyway) */

@media (prefers-reduced-motion: reduce) {
  .fdn-suggest.is-open { animation: none; }
  .fdn-search-dim { transition: none; }
}
.fdn-suggest__sec {
  text-transform: none;
  letter-spacing: 0;
  font: 500 15px/1.4 var(--font-sans);
  color: var(--text-muted);
  padding: var(--s-3) 0 var(--s-1);
}
.fdn-suggest__row {
  /* ~72px rows made five results fill a 1200px-wide panel with air; the
     reference runs a tighter ~64px rhythm so more of the list is visible
     at once, which is what makes a wide panel feel deliberate. */
  padding: var(--s-2) var(--s-1);
  border-radius: 0;
}
.fdn-suggest__row + .fdn-suggest__row { border-top: 1px solid var(--border); }
.fdn-suggest__row:hover,
.fdn-suggest__row.is-active { background: var(--bg-subtle); border-radius: var(--r-md); }
.fdn-suggest__img,
.fdn-suggest__ic {
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
}
.fdn-suggest__ic--plain { background: transparent; color: var(--text); font-size: 19px; }
.fdn-suggest__name { font: 500 16px/1.3 var(--font-sans); }
@media (max-width: 991.98px) {
  .fdn-suggest { min-width: 0; max-height: min(70vh, 480px); }
  .fdn-suggest__img, .fdn-suggest__ic { width: 40px; height: 40px; }
  .fdn-suggest__name { font-size: 15px; }
}

/* ---- Search focus dim: while the dropdown is open the page behind fades
   slightly; z-index sits one step under --z-header (100) so the fixed bar,
   the search pill and the dropdown stay lit. pointer-events swallows the
   tap-away so it only closes the dropdown (inc/script.php dimSync). ---- */
.fdn-search-dim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background: rgba(26, 26, 26, .3);
  opacity: 0;
  pointer-events: none;
  /* 320ms, matching fdnSuggestIn — at 200ms the scrim finished well before the
     panel had settled and the two motions read as separate events. */
  transition: opacity 320ms cubic-bezier(.16, 1, .3, 1);
}
.fdn-search-dim.is-on { opacity: 1; pointer-events: auto; }
/* must live AFTER the rule above: a reduced-motion override placed earlier in
   the file loses the cascade to it at equal specificity. */
@media (prefers-reduced-motion: reduce) {
  .fdn-search-dim { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fdn-search-dim { transition: none; }
}

/* ==========================================================================
   S2-4f - the suggest dropdown must escape the search bar: style.css puts
   overflow hidden on .search-location, which clipped the absolutely
   positioned .fdn-suggest to zero. Loaded after style.css, so this wins.
   ========================================================================== */
.returning_user_home_header .search-location.custom-search-input,
.search-location.custom-search-input,
.returning_user_home_header .search-location .form-group,
.main-search-filter,
.main-search-filter > div {
  overflow: visible !important;
}

/* ==========================================================================
   Restaurant detail + menu (S1.5) — Uber-Eats-style reference: hero banner
   with overlapping round logo, name + rating + in-restaurant search, a
   rounded info bar (services · open hours · min order · earliest arrival),
   sticky category nav (left rail on desktop, chip row on mobile), a
   "Featured items" rail and 2-col dish cards with a round "+" add button.
   Tokens only; every legacy hook (dish_detail / check_cart_data / fav_unfav)
   stays on the markup side.
   ========================================================================== */
.fdn-resto { max-width: 1320px; margin: 0 auto; padding: 0 var(--s-4); }

/* ---- Hero banner + overlapping logo ----
   Full-bleed (user, 4th round): one photo COVERS the whole fixed panel,
   edge to edge — the earlier contain + blurred-echo treatment is gone. */
.fdn-resto-hero { position: relative; margin-top: var(--s-4); }
.fdn-resto-hero__media {
  position: relative;
  aspect-ratio: 16 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-subtle);
}
.fdn-resto-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fdn-resto-hero__fav {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.fdn-resto-hero__fav img { width: 22px; height: 22px; object-fit: contain; }
.fdn-resto-hero__logo {
  position: absolute; left: var(--s-6); bottom: calc(-1 * var(--s-8));
  /* z-index 2 = above the __scrim (z-index:1), same layer as the back btn —
     without it the scrim/banner paints over the badge */
  z-index: 2;
  width: 96px; height: 96px; border-radius: var(--r-pill);
  border: 4px solid var(--surface); background: var(--surface);
  outline: 1px solid var(--border);
  box-shadow: var(--shadow-md); object-fit: cover;
}
/* S1.5+: legibility scrim over the banner — darkens only the top strip
   (back + fav controls) and the very bottom (logo seat); middle stays clear
   so the food photo reads. pointer-events:none keeps the fav tap working. */
.fdn-resto-hero__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(to top, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 20%);
}
.fdn-resto-hero__media.skel .fdn-resto-hero__scrim { display: none; }

/* ---- Name / rating / address + in-restaurant search ---- */
.fdn-resto-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-10);
}
.fdn-resto-name { font: 800 32px/1.15 var(--font-sans); color: var(--text); margin: 0; }
.fdn-resto-ratingline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font: 600 15px/1.4 var(--font-sans); color: var(--text);
  margin: var(--s-2) 0 0; font-variant-numeric: tabular-nums;
}
.fdn-resto-infolink { color: var(--text-muted); font-weight: 500; text-decoration: underline; }
.fdn-resto-infolink:hover { color: var(--text); text-decoration: underline; }
/* S1.5+: cuisine chip in the rating line (e.g. "· Sushi ·") */
.fdn-resto-tag {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--bg-subtle); border: 1px solid var(--border);
  font: 600 13px/1.4 var(--font-sans); color: var(--text-muted);
}
.fdn-resto-address {
  font: 400 14px/1.45 var(--font-sans); color: var(--text-muted);
  margin: 2px 0 0; max-width: 60ch;
}
.fdn-resto-search {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-4);
  width: min(380px, 100%); flex: 0 0 auto;
  background: var(--bg-subtle); border-radius: var(--r-pill);
}
.fdn-resto-search .bi { color: var(--text); font-size: 16px; }
.fdn-resto-search input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font: 400 16px/1.4 var(--font-sans); color: var(--text);
}
.fdn-resto-search input::placeholder { color: var(--text-subtle); }
.fdn-resto-search:focus-within { box-shadow: 0 0 0 3px var(--brand-050), 0 0 0 4.5px var(--brand-ink); }

/* ---- Info bar: services · open+hours · min order · earliest arrival ---- */
.fdn-resto-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-4); margin-top: var(--s-5);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface);
}
.fdn-resto-openstate {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 15px/1.3 var(--font-sans); color: var(--success-ink); margin: 0;
}
.fdn-resto-openstate--closed { color: var(--danger-ink); }
/* S1.5+: status dot — inherits the open/closed text colour via currentColor */
.fdn-resto-openstate__dot {
  width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.fdn-resto-hourstext { font: 400 13px/1.4 var(--font-sans); color: var(--text-muted); margin: 0; }
.fdn-resto-stats { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
.fdn-resto-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding-left: var(--s-4); border-left: 1px solid var(--border);
}
.fdn-resto-stat:first-child { border-left: 0; padding-left: 0; }
.fdn-resto-stat__value {
  display: inline-flex; align-items: center; gap: 6px;
  font: 800 15px/1.2 var(--font-sans); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fdn-resto-stat__value .bi { color: var(--success); font-size: 17px; }
.fdn-resto-stat__label { font: 400 12px/1.3 var(--font-sans); color: var(--text-muted); }

/* ---- Two-column body: sticky (category nav + location map) + menu ---- */
.fdn-resto-layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--s-8); margin-top: var(--s-8);
}
.fdn-resto-side { min-width: 0; }
/* S4-7/S4-8/S4-9: the left column stays STICKY/pinned while you scroll the menu
   (the fixed-sidebar behavior the user wanted), AND the category list shows
   EVERY category at its natural height — no inner max-height/overflow, so there
   is never a second scrollbar hiding categories behind a confusing "double
   scroll". When the list + map are SHORTER than the viewport they lock at the
   top (this default `top`). When they are TALLER (pharmacies with many
   categories), restaurant-menu.php's JS sets a negative `top` so the column
   scrolls THROUGH — it moves a bit as you scroll to reveal the lower categories
   + map, then locks bottom-aligned. No inner scrollbar either way. */
.fdn-resto-stick { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.fdn-resto-nav {
  /* the rail is a plain vertical column again; when a store has more
     categories than fit the viewport the JS caps its height and it scrolls
     INTERNALLY (scrollbar hidden) so the active category always follows the
     menu section you're reading into view — no page-level scroll-through */
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.fdn-resto-nav::-webkit-scrollbar { display: none; }
.fdn-resto-map {
  height: 200px; margin-top: var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; background: var(--bg-subtle);
}
.fdn-resto-nav__title { font: 800 15px/1.3 var(--font-sans); color: var(--text); margin: 0 0 var(--s-2) var(--s-4); }
.fdn-resto-nav__link {
  display: block; padding: 10px var(--s-4);
  border-left: 4px solid transparent;
  font: 500 15px/1.4 var(--font-sans); color: var(--text-muted);
  text-decoration: none; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.fdn-resto-nav__link:hover { color: var(--text); background: var(--bg-subtle); text-decoration: none; }
/* active category: green haze fading out to the right + lime spine,
   ink text (4.5:1 on --brand-050) — was a flat grey pill */
.fdn-resto-nav__link.is-active {
  background: linear-gradient(90deg, var(--brand-050) 55%, transparent);
  border-left-color: var(--brand);
  color: var(--brand-ink); font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .fdn-resto-nav__link { transition: none; }
}
.fdn-resto-nav__link:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--brand-050), 0 0 0 4.5px var(--brand-ink);
}

/* ---- Menu sections (anchor targets clear the sticky header) ---- */
.fdn-resto-section { margin-bottom: var(--s-8); scroll-margin-top: calc(var(--header-h) + var(--s-6)); }
.fdn-railnav { display: inline-flex; gap: var(--s-2); }
.fdn-railbtn {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; transition: background .15s ease;
}
.fdn-railbtn:hover { background: var(--bg-subtle); }
.fdn-railbtn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Featured items rail ---- */
.fdn-featured-rail {
  display: flex; gap: var(--s-4); overflow-x: auto;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: var(--s-1);
}
.fdn-featured-rail::-webkit-scrollbar { display: none; }
.fdn-fcard { flex: 0 0 218px; scroll-snap-align: start; cursor: pointer; }
.fdn-fcard__media {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: var(--r-lg); overflow: hidden; background: var(--bg-subtle);
}
.fdn-fcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdn-fcard__name {
  font: 700 17px/1.3 var(--font-sans); color: var(--text);
  margin: var(--s-2) 0 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.fdn-fcard__price { font: 600 15px/1.3 var(--font-sans); color: var(--text); margin: 2px 0 0; font-variant-numeric: tabular-nums; }

/* round white "+" (reference) — shared by featured tiles and dish cards */
.fdn-addbtn {
  position: absolute; right: var(--s-2); bottom: var(--s-2);
  width: 40px; height: 40px; border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease;
}
.fdn-addbtn:hover { box-shadow: var(--shadow-lg); }
.fdn-addbtn:active { transform: translateY(1px); }
.fdn-addbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-050), 0 0 0 4.5px var(--brand-ink); }

/* ---- Dish cards: text left, image right, "+" overlapping the image ---- */
.fdn-dishgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.fdn-dishcard {
  display: flex; justify-content: space-between;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; cursor: pointer;
  min-height: 132px; transition: box-shadow .15s ease;
}
.fdn-dishcard:hover { box-shadow: var(--shadow-md); }
.fdn-dishcard__info { flex: 1 1 auto; min-width: 0; padding: var(--s-4); }
.fdn-dishcard__name {
  font: 700 16px/1.3 var(--font-sans); color: var(--text); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.fdn-dishcard__price {
  font: 800 15px/1.3 var(--font-sans); color: var(--text);
  margin: var(--s-1) 0 0; font-variant-numeric: tabular-nums;
}
.fdn-dishcard__desc {
  font: 400 13px/1.45 var(--font-sans); color: var(--text-muted);
  margin: var(--s-2) 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fdn-dishcard__media {
  position: relative; flex: 0 0 132px; background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Fixed photo box so EVERY dish card is the same height. The image is absolutely
   positioned, so a PORTRAIT shot can't stretch the card taller than its row-mates
   — previously width/height:100% in this flex row (no definite media height)
   collapsed to the image's NATURAL size, so tall photos made tall cards (the
   reported "some products bigger than others"). object-fit: contain shows the
   whole dish, never cropped; any letterbox sits on --bg-subtle. The card's
   min-height:132 then pins every card to the same 132px. */
.fdn-dishcard__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.fdn-dishcard__media .bi { font-size: 28px; color: var(--text-subtle); }

/* ---- Info modal: tabbed (Info | Foto) — photos render in-modal, hours are
   grouped one row per day with today highlighted ---- */
.fdn-infomodal { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); background: var(--surface); }
.fdn-infomodal .modal-body { padding: var(--s-4) var(--s-6) var(--s-6); }
.fdn-infomodal__title { font: 800 22px/1.2 var(--font-sans); color: var(--text); margin: 0; }
/* segmented tab bar */
.fdn-infomodal__tabs {
  display: flex; gap: 4px; margin: var(--s-4) var(--s-6) 0;
  padding: 4px; border-radius: var(--r-pill); background: var(--bg-subtle);
}
.fdn-infomodal__tab {
  flex: 1 1 0; border: 0; border-radius: var(--r-pill); padding: 9px 12px;
  font: 700 13.5px/1 var(--font-sans); color: var(--text-muted);
  background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s ease, color .15s ease;
}
.fdn-infomodal__tab .bi { font-size: 14px; }
.fdn-infomodal__tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* about blurb */
.fdn-infomodal__about { margin: 0 0 var(--s-4); font: 400 14px/1.65 var(--font-sans); color: var(--text-muted); }
/* hours card */
.fdn-infocard {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-subtle); padding: var(--s-4) var(--s-4) var(--s-3);
  margin: 0 0 var(--s-4);
}
.fdn-infocard__head {
  margin: 0 0 var(--s-2); display: flex; align-items: center; gap: 8px;
  font: 800 13px/1 var(--font-sans); color: var(--text);
  text-transform: uppercase; letter-spacing: .05em;
}
.fdn-infocard__head .bi { color: var(--brand-ink); font-size: 15px; }
.fdn-infohours { width: 100%; }
.fdn-infohours__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding: 7px 8px; margin: 0 -8px; border-radius: var(--r-md);
  font: 400 13.5px/1.4 var(--font-sans); color: var(--text-muted);
}
.fdn-infohours__day { flex: 0 0 auto; }
.fdn-infohours__time { font-variant-numeric: tabular-nums; text-align: right; }
.fdn-infohours__time i { font-style: normal; color: var(--text-subtle); padding: 0 2px; }
.fdn-infohours__row.is-today { color: var(--text); font-weight: 700; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.fdn-infohours__row.is-today .fdn-infohours__day { display: inline-flex; align-items: center; gap: 7px; }
.fdn-infohours__row.is-today .fdn-infohours__day::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: 0 0 auto;
}
/* fact rows: address / minimum order / payments */
.fdn-infofact {
  display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0;
  border-top: 1px solid var(--border);
  font: 400 14px/1.5 var(--font-sans); color: var(--text);
}
.fdn-infofact:first-child { border-top: 0; padding-top: 0; }
.fdn-infofact p { margin: 0; }
.fdn-infofact__ic {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-subtle); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
}
.fdn-infofact__ic .bi { color: var(--brand-ink); font-size: 14px; }
.fdn-infofact__chip {
  display: inline-block; padding: 4px 10px; margin: 2px 2px 0 0;
  border-radius: var(--r-pill); background: var(--bg-subtle); border: 1px solid var(--border);
  font: 700 12px/1.2 var(--font-sans); color: var(--text-muted);
}
/* Foto tab — image grid inside the modal; each photo opens the lightbox */
.fdn-infomodal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.fdn-infomodal__ph {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--r-md); overflow: hidden;
}
.fdn-infomodal__ph:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.fdn-infomodal__ph img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-subtle);
  transition: transform .18s ease;
}
.fdn-infomodal__ph:hover img { transform: scale(1.03); }
/* lightbox — full-size photo viewer above the modal */
.fdn-lightbox { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: var(--s-6); }
.fdn-lightbox[hidden] { display: none; }
.fdn-lightbox__dim {
  position: absolute; inset: 0; background: rgba(8, 11, 4, .86);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.fdn-lightbox > img {
  position: relative; z-index: 1; max-width: min(1100px, 92vw); max-height: 82vh;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); background: var(--bg-subtle);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  opacity: 0; transform: scale(.985); transition: opacity .22s ease, transform .22s ease;
}
.fdn-lightbox > img.is-shown { opacity: 1; transform: none; }
/* loading spinner while the full-size image fetches */
.fdn-lightbox__spin {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: fdnLbSpin .8s linear infinite; display: none;
}
.fdn-lightbox.is-loading .fdn-lightbox__spin { display: block; }
@keyframes fdnLbSpin { to { transform: rotate(1turn); } }
.fdn-lightbox__btn {
  position: absolute; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s ease;
}
.fdn-lightbox__btn:hover { background: rgba(255, 255, 255, .26); }
.fdn-lightbox__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fdn-lightbox__close { top: 18px; right: 18px; }
.fdn-lightbox__nav { top: 50%; transform: translateY(-50%); }
.fdn-lightbox__nav--prev { left: 14px; }
.fdn-lightbox__nav--next { right: 14px; }
.fdn-lightbox__count {
  position: absolute; z-index: 2; bottom: 20px; left: 50%; transform: translateX(-50%);
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 700 12.5px/1 var(--font-sans); font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .fdn-lightbox { padding: var(--s-3); }
  .fdn-lightbox > img { max-width: 96vw; max-height: 76vh; }
  .fdn-lightbox__nav--prev { left: 8px; }
  .fdn-lightbox__nav--next { right: 8px; }
}
/* tab-pane fade when switching Info ⇄ Foto */
.fdn-fadein { animation: fdnFadeIn .24s ease; }
@keyframes fdnFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .fdn-infomodal__tabs { margin: var(--s-4) var(--s-4) 0; }
  .fdn-infomodal .modal-body { padding: var(--s-4) var(--s-4) var(--s-5); }
  .fdn-infohours__row { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fdn-lightbox > img { transition: none; transform: none; }
  .fdn-lightbox__spin { animation-duration: 1.6s; }
  .fdn-fadein { animation: none; }
}

/* ---- Tablet / mobile ---- */
@media (max-width: 991.98px) {
  /* minmax(0,…) matters: the featured rail's min-content (a row of
     fixed-width cards) would otherwise inflate a plain 1fr track past the
     viewport and cause sideways page scroll */
  .fdn-resto-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* dissolve the sidebar wrappers: the chip nav and the map become direct
     grid items, so the nav can stick to the viewport for the whole page and
     the map flows as a band between the chips and the menu */
  .fdn-resto-side, .fdn-resto-stick { display: contents; }
  .fdn-resto-map { height: 180px; margin: 0 0 var(--s-4); }
  /* category rail becomes a sticky chip row under the header */
  .fdn-resto-nav {
    position: sticky; top: var(--header-h); z-index: calc(var(--z-header) - 1);
    display: flex; align-items: center; gap: var(--s-2);
    max-height: none; overflow-x: auto; overflow-y: hidden;
    background: var(--bg); padding: var(--s-2) 0;
    border-bottom: 1px solid var(--border); margin-bottom: var(--s-4);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .fdn-resto-nav::-webkit-scrollbar { display: none; }
  .fdn-resto-nav__title { display: none; }
  .fdn-resto-nav__link {
    flex: 0 0 auto; border-left: 0; border-radius: var(--r-pill);
    background: var(--bg-subtle); padding: 10px 16px;
    font: 600 14px/1 var(--font-sans); color: var(--text);
  }
  .fdn-resto-nav__link.is-active { background: var(--brand-050); color: var(--brand-ink); border-left: 0; }
  .fdn-resto-section { scroll-margin-top: calc(var(--header-h) + 64px); }
}
@media (max-width: 767.98px) {
  .fdn-resto { padding: 0 var(--s-3); }
  .fdn-resto-hero__media { aspect-ratio: 16 / 9; }
  .fdn-resto-hero__logo { width: 72px; height: 72px; left: var(--s-4); bottom: calc(-1 * var(--s-6)); border-width: 3px; }
  .fdn-resto-head { flex-direction: column; align-items: stretch; margin-top: var(--s-8); }
  .fdn-resto-name { font-size: 28px; }
  .fdn-resto-search { width: 100%; }
  .fdn-resto-bar { padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); gap: var(--s-3); }
  .fdn-resto-stats { margin-left: 0; width: 100%; justify-content: flex-start; }
  .fdn-fcard { flex-basis: 160px; }
  .fdn-dishgrid { grid-template-columns: 1fr; }
  .fdn-dishcard__media { flex-basis: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .fdn-addbtn, .fdn-railbtn, .fdn-dishcard { transition: none; }
  .fdn-addbtn:active { transform: none; }
}

/* ==========================================================================
   Search results page (S3) — grouped sections + dropdown chips
   ========================================================================== */

/* chip-filtered cards / sections / rail rows */
.fdn-hide { display: none !important; }

/* Top Result: one hero card, same card component, capped width */
.fdn-topresult { grid-template-columns: minmax(230px, 360px); }

/* More Results rows: breathing room between the arrow rails */
.fdn-more-row { margin-bottom: var(--s-5); }

/* dropdown chips (Rating / Sort) */
.fdn-chip-dd { position: relative; flex: 0 0 auto; }
.fdn-chip-dd .chip-foodini .bi-chevron-down { font-size: 11px; }
.fdn-chip-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-drawer);
  min-width: 180px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-2);
  display: none;
}
.fdn-chip-menu.is-open { display: block; }
.fdn-chip-menu button {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--r-md);
  padding: 10px var(--s-3);
  font: 600 14px/1.2 var(--font-sans);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
.fdn-chip-menu button:hover { background: var(--bg-subtle); }
.fdn-chip-menu button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-050);
}

/* ==========================================================================
   S2-4g - header search, reference look: ONE seamless grey pill. The input
   itself is the pill; the magnifier sits inside it (no white box), the
   placeholder is readable. Kills the legacy white slab + shadow + boxed
   icon from style.css (.custom-search-input / .custom-search-input i).
   ========================================================================== */
.returning_user_home_header .search-location.custom-search-input,
.search-location.custom-search-input {
  background: transparent;
  box-shadow: none;
  border-radius: var(--r-pill);
  padding: 0;
  margin-top: 0;
}
.custom-search-input .form-group.fdn-searchwrap { margin: 0; }
.custom-search-input input,
#myDesktopSearch,
#myMobileSearch {
  border-radius: var(--r-pill);
  padding-left: 46px;
  padding-right: 18px;
  color: var(--text);
}
/* the magnifier lives INSIDE the pill: flat, dark, vertically centred.
   .main-search-filter i (style.css) draws a bordered white 20x42 box on
   every <i> in the mobile accordion - neutralised here too (border: 0). */
.custom-search-input i.fdn-searchico,
.returning_user_home_header .search-location .form-group i.fdn-searchico,
.custom-search-input .form-group i.fdn-searchico,
.main-search-filter i.fdn-searchico,
.main-search-filter .fdn-searchwrap i.fdn-searchico {
  position: absolute;
  left: 16px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  line-height: 1;
  background: transparent;
  color: var(--text);
  z-index: 2;
  pointer-events: none;
}
/* readable placeholder (reference: dark grey on the light grey pill) */
.custom-search-input input::placeholder,
#myDesktopSearch::placeholder,
#myMobileSearch::placeholder { color: var(--text-muted); opacity: 1; }
/* focus: same colour, seamless - just a quiet dark hairline, no glow */
.custom-search-input input:focus,
#myDesktopSearch:focus,
#myMobileSearch:focus {
  background: var(--bg-subtle);
  border-color: var(--text);
  box-shadow: none;
}
/* S4-3 a11y: the seamless "quiet hairline, no glow" above is deliberate, but it is
   a border-colour change, not the brand focus RING §6 requires, and it looks the
   same for mouse and keyboard. These #id:focus rules sit at (1,1,0) and so
   out-rank the global `input:focus-visible` ring at the top of this file — the
   search box was the ONE control still measuring no ring after that fix.
   Re-assert at matching specificity, :focus-visible only, so the mouse look is
   untouched. Sets `outline` (not border/box-shadow), so the overlay rule below
   (.fdn-searchwrap--overlay ... border-color:transparent) can't cancel it either. */
.custom-search-input input:focus-visible,
#myDesktopSearch:focus-visible,
#myMobileSearch:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

/* 2026-07-28 (user): "remove that green line over the search bar".
   This does NOT leave the field without a focus indicator — focusing it paints
   the whole panel card, the page scrim and the recommendation list, which is a
   far louder indicator than a 2px outline. Scoped by the .fdn-suggest-input JS
   hook: `#id.class` = (1,2,0), which beats both the rule above (1,1,0) and the
   global `input:focus-visible` (0,1,1) — so the /search page input (class
   .search, no panel, no card) KEEPS its brand ring. Deleting the rule above
   instead would just hand the job back to the global one and the green would
   silently reappear. */
#myDesktopSearch.fdn-suggest-input:focus-visible,
#myMobileSearch.fdn-suggest-input:focus-visible {
  outline: none;
  outline-offset: 0;
}

/* ==========================================================================
   S2-4h - Uber-style search overlay. DESKTOP (reference): one white PANEL
   anchored right where the bar sits — the card extends a little beyond the
   pill and the suggestions hang off its bottom edge; the rest of the page
   stays put (scroll-locked + dimmed). MOBILE: the wrap becomes a fixed
   full-width sheet (also fixes the accordion's clipped dropdown and the
   stray mid-panel magnifier — icon was centred on the grown wrap).
   ========================================================================== */
html.fdn-lock { overflow: hidden !important; }
/* body is CLIPPED, not hidden: overflow:hidden on <body> turns it into a
   scroll-container, which re-parents the position:sticky left sidebar
   (.fdn-side) and jerks it down by its sticky offset the moment the search
   overlay / a drawer opens (user 2026-07-09: "the left categories slightly go
   down when i press [search]"). overflow:clip freezes body just the same but
   does NOT establish a scrollport, so the sticky sidebar stays put. */
html.fdn-lock body { overflow: clip !important; }
/* reserve the scrollbar gutter at all times so applying the overflow:hidden
   freeze above never removes the scrollbar and reflows the page sideways —
   "the screen must not move when the tab is opened" (user 2026-07-09) */
html { scrollbar-gutter: stable; }

/* clear (x) button inside the pill, reference-style; only lives on the panel */
.fdn-searchclear {
  display: none;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  font-size: 19px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  z-index: 2;
}
.fdn-searchwrap--overlay .fdn-searchclear { display: block; }
.fdn-searchclear:hover { color: var(--text); }

/* on the panel the pill stays a plain grey pill - no focus outline
   (the white card already signals the state, like the reference) */
.fdn-searchwrap--overlay input:focus,
.fdn-searchwrap--overlay #myDesktopSearch:focus,
.fdn-searchwrap--overlay #myMobileSearch:focus {
  border-color: transparent;
  box-shadow: none;
}

/* ---- desktop: floating panel in place (bar + list as one card) ---- */
@media (min-width: 992px) {
  .fdn-searchwrap--overlay,
  .returning_user_home_header .search-location .form-group.fdn-searchwrap--overlay,
  .custom-search-input .form-group.fdn-searchwrap--overlay {
    position: relative;
    z-index: 1001;
  }
  /* the card behind the pill: painted by ::before so the header layout
     never shifts — it just outsets 10px around the pill */
  .fdn-searchwrap--overlay::before {
    content: '';
    position: absolute;
    inset: -14px -12px 0 -12px;   /* 14px top: enough white above the field to read as one card */
    background: var(--surface);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: var(--shadow-lg);
    z-index: -1;
    animation: fdnCardIn 320ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .fdn-searchwrap--overlay .fdn-suggest {
    top: 100%;
    left: -12px;
    right: -12px;
    margin: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--shadow-lg);
    /* The panel paints ABOVE the ::before card (the pseudo is z-index:-1), so
       --shadow-lg's upward spill (offset 12 / blur 32 = ~4px above its own top
       edge) smeared grey across the junction and broke the single-card look.
       Clip the shadow at the TOP edge only — the negative insets leave the
       sides, the bottom and the rounded corners fully intact. */
    clip-path: inset(0 -48px -48px -48px);
    max-height: min(70vh, 560px);
    padding: 0 var(--s-4) var(--s-3);   /* top 0 so the sticky tab row sits flush */
  }
}

/* ---- mobile: full-width sheet under the top edge ---- */
@media (max-width: 991.98px) {
  .fdn-searchwrap--overlay,
  .returning_user_home_header .search-location .form-group.fdn-searchwrap--overlay,
  .custom-search-input .form-group.fdn-searchwrap--overlay,
  .main-search-filter .fdn-searchwrap--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    margin: 0 !important;
    padding: 14px max(4vw, 16px) 0;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
  }
  .fdn-searchwrap--overlay input,
  .custom-search-input .fdn-searchwrap--overlay input {
    width: 100% !important;
    height: 46px;
  }
  /* pin the pill magnifier + clear to the BAR row (base rule centres them
     on the wrap, which is now the whole sheet) */
  .fdn-searchwrap--overlay i.fdn-searchico,
  .custom-search-input .fdn-searchwrap--overlay i.fdn-searchico,
  .main-search-filter .fdn-searchwrap--overlay i.fdn-searchico,
  .returning_user_home_header .search-location .fdn-searchwrap--overlay i.fdn-searchico {
    top: 37px;
    left: calc(max(4vw, 16px) + 16px);
  }
  .fdn-searchwrap--overlay .fdn-searchclear {
    top: 37px;
    right: calc(max(4vw, 16px) + 10px);
  }
  /* inside the sheet the list is part of the panel, not a floating card */
  .fdn-searchwrap--overlay .fdn-suggest {
    position: static;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    max-height: calc(100vh - 90px);
    margin-top: 4px;
    padding: 0 0 var(--s-4);
  }
}

/* ---- tab row (reference): quiet labels, black underline on the active ---- */
.fdn-suggest__tabs {
  display: flex;
  gap: var(--s-5);
  padding: 2px 2px 0;
  margin: 0 0 var(--s-1);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.fdn-suggest__tab {
  appearance: none;
  border: 0;
  background: transparent;
  font: 600 14px/1 var(--font-sans);
  color: var(--text-muted);
  padding: var(--s-3) 2px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.fdn-suggest__tab:hover { color: var(--text); }
.fdn-suggest__tab.is-active {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* dish rows: name above vendor (they rendered inline and ran together) */
.fdn-suggest__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* NOTE: the sheet lives INSIDE the fixed header's stacking context (z 100),
   so the dim must stay BELOW 100 or it would grey the sheet itself. The
   sheet covers the header area, so the header never shows through. */

/* Legacy style.css styles EVERY <i> inside the search containers
   (.custom-search-input i / .main-search-filter i: position absolute +
   white box) which hijacked the suggestion rows' magnifier glyphs — the
   floating "big search icon" bug. Inside the panel, icons are plain. */
.fdn-suggest i,
.custom-search-input .fdn-suggest i,
.main-search-filter .fdn-suggest i,
.returning_user_home_header .search-location .form-group .fdn-suggest i,
.fdn-searchclear i,
.custom-search-input .fdn-searchclear i,
.main-search-filter .fdn-searchclear i {
  position: static !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  display: inline-block;
}

/* ==========================================================================
   S2-4i - footer, Uber-Eats-reference layout: BIG and airy on plain white.
   Brand block (logo + store badges) left, two quiet link columns right,
   hairline rule, then social left / legal + payment marks right, copyright
   under it. Replaces the old dark 5-column footer markup entirely.
   ========================================================================== */
.fdn-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin-top: var(--s-8);
  padding: 64px 0 48px;
}
.fdn-footer__in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.fdn-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
}
.fdn-footer__logo { height: 40px; width: auto; display: block; }
.fdn-footer__badges {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: 56px;
}
.fdn-footer__badges img { height: 46px; width: auto; display: block; }
.fdn-footer__col { display: flex; flex-direction: column; }
.fdn-footer__col a {
  font: 500 15px/1.4 var(--font-sans);
  color: var(--text);
  text-decoration: none;
  padding: 10px 0;
}
.fdn-footer__col a:hover { color: var(--text); text-decoration: underline; }
.fdn-footer__rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 40px 0 24px;
  opacity: 1;
}
.fdn-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.fdn-footer__social { display: flex; align-items: center; gap: var(--s-4); }
.fdn-footer__social img { height: 28px; width: 28px; display: block; }
.fdn-footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-5);
}
.fdn-footer__legal a {
  font: 500 14px/1.4 var(--font-sans);
  color: var(--text);
  text-decoration: none;
}
.fdn-footer__legal a:hover { text-decoration: underline; }
.fdn-footer__pay { display: inline-flex; align-items: center; gap: var(--s-2); }
.fdn-footer__pay img { height: 22px; width: auto; display: block; }
.fdn-footer__copy {
  margin: var(--s-4) 0 0;
  font: 400 13px/1.4 var(--font-sans);
  color: var(--text-muted);
  text-align: right;
}
/* Single-column from 992px down (was 768px): at 768–991px the 3-column
   desktop grid let the ~289px store badges overflow the ~280px first column
   and overlap the link column, AND the footer had no clearance for the fixed
   bottom nav (which shows <=991.98px) so its last rows hid behind it. */
@media (max-width: 991.98px) {
  .fdn-footer { padding: 48px 0 32px; }
  .fdn-footer__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .fdn-footer__badges { margin-top: var(--s-5); }
  .fdn-footer__copy { text-align: left; }
  /* comfortable >=44px tap targets on mobile (were ~28px social / ~29px pills) */
  .fdn-footer__social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .fdn-footer .fdn-langsw__opt { min-height: 44px; }
  /* keep clear of the fixed mobile bottom nav */
  .fdn-footer { padding-bottom: 96px; }
}

/* ==========================================================================
   S2-6 — dish / toppings sheet (#product-details-model, inc/modal.php).
   Reference picture: white card, big artwork on a subtle grey square (left
   on desktop), name + price + description + "Extras" checkbox rows (right),
   footer with the orange - 1 + stepper and the full-width green Add button
   carrying the live total. Bottom sheet on mobile (DESIGN-SYSTEM §Motion:
   slide 200ms cubic-bezier(.16,1,.3,1), reduced-motion safe). Tokens only.
   Legacy hooks preserved on the markup side: ids dish_image_01 / dish_name_01
   / dish_des_01 / dish_price_01 / product-list-02 / qty / minus / plus.
   The stepper deliberately avoids the legacy .quantity/.plus/.minus classes
   (style.css skins + parse-time jQuery handlers) — inc/script.php gives the
   sheet its own delegated stepper on .fdn-dish__step.
   ========================================================================== */
.fdn-dish-dialog.fdn-dish-dialog { max-width: 960px; }
.fdn-dish {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.fdn-dish__close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 5;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fdn-dish__close:hover { background: var(--bg-subtle); }
/* share button — mirrors the close circle on the right (reference mock);
   .is-copied is the clipboard-fallback confirmation flash */
.fdn-dish__share {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 5;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.fdn-dish__share:hover { background: var(--bg-subtle); }
.fdn-dish__share.is-copied {
  background: var(--brand-050);
  color: var(--brand-ink);
}
.fdn-dish__form {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 760px);
}
.fdn-dish__grid {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: var(--s-6);
  padding: var(--s-6);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.fdn-dish__media {
  background: var(--bg-subtle);
  border-radius: var(--r-lg);
  /* containing block for the on-sale "-N%" pill (JS appends it here) */
  position: relative;
  /* explicit height, NOT aspect-ratio: in the stacked single-column grid
     the ratio-derived height never reaches the auto row track (the img is
     height:100% of an indefinite box), the row collapses to 0 and the
     photo paints over the info column. */
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  align-self: start;
}
.fdn-dish__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fdn-dish__info { padding-top: var(--s-5); min-width: 0; }
.fdn-dish__name {
  font: 700 28px/1.2 var(--font-sans);
  color: var(--text);
  margin: 0 0 var(--s-2);
}
.fdn-dish__price {
  font: 600 18px/1.3 var(--font-sans);
  color: var(--text);
  margin: 0 0 var(--s-3);
}
.fdn-dish__des {
  font: 400 15px/1.5 var(--font-sans);
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
}
.fdn-dish__sechead { margin: 0 0 var(--s-1); }
.fdn-dish__sectitle {
  display: block;
  font: 700 18px/1.3 var(--font-sans);
  color: var(--text);
}
.fdn-dish__sechelp {
  display: block;
  font: 400 13px/1.5 var(--font-sans);
  color: var(--text-muted);
}
.fdn-dish__opt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  margin: 0;
  cursor: pointer;
}
.fdn-dish__opt .form-check-input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  cursor: pointer;
}
/* S4-11: brand check. Bootstrap's tick is hardcoded white, so on the old
   --text fill it vanished in dark mode (light box, white tick); redraw the
   tick in --on-brand ink so it reads on the lime fill in BOTH themes. */
.fdn-dish__opt .form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231E3305' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.4' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.fdn-dish__opt:hover .form-check-input:not(:checked) {
  border-color: var(--brand);
}
.fdn-dish__opt .form-check-input:focus {
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px var(--brand-050);
}
.fdn-dish__optname {
  flex: 1 1 auto;
  font: 500 15px/1.4 var(--font-sans);
  color: var(--text);
  min-width: 0;
}
.fdn-dish__optprice {
  flex: 0 0 auto;
  font: 600 13px/1.3 var(--font-sans);
  color: var(--text-muted);
}
.fdn-dish__footer {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex: 0 0 auto;
}
/* pill stepper. Neutral grey (2026-07 rebrand: one green everywhere — a
   green stepper next to the green Add button read as one blob, and orange
   is out), so the CTA keeps all the color weight, like the reference app.
   Own classes on purpose — the legacy .quantity/.plus/.minus carry
   style.css skins and parse-time handlers. */
.fdn-dish__qty {
  display: inline-flex;
  align-items: center;
  background: var(--bg-subtle);
  border-radius: var(--r-pill);
  padding: 4px;
  flex: 0 0 auto;
}
.fdn-dish__step {
  width: 42px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 700 20px/1 var(--font-sans);
  cursor: pointer;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fdn-dish__step:hover { background: var(--border); }
.fdn-dish__qtyval {
  width: 34px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: center;
  font: 700 16px/1 var(--font-sans);
  padding: 0;
  pointer-events: none;   /* readonly display — the buttons drive it */
}
.fdn-dish__qtyval:focus { outline: none; }
.fdn-dish__add {
  flex: 1 1 auto;
  min-height: 52px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--brand-green);
  color: var(--on-brand-green);
  font: 700 17px/1.2 var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  cursor: pointer;
  padding: var(--s-2) var(--s-4);
}
.fdn-dish__add:hover { filter: brightness(.94); }
.fdn-dish__total::before { content: "\00B7"; margin-right: var(--s-2); }
.fdn-dish__total:empty::before { content: none; }

/* photo-less dish: collapse to a single clean column (dish_detail toggles) */
.fdn-dish--noimg .fdn-dish__media { display: none; }
.fdn-dish--noimg .fdn-dish__grid { grid-template-columns: 1fr; }
.fdn-dish--noimg .fdn-dish__info { padding-top: var(--s-2); padding-right: var(--s-8); }

/* the close button floats over the photo on mobile — lift it slightly */
.fdn-dish__close { box-shadow: var(--shadow-sm); }
.fdn-dish__des[hidden] { display: none; }

/* ---- mobile: bottom sheet ---- */
@media (max-width: 767.98px) {
  #product-details-model { padding: 0 !important; }
  #product-details-model .modal-dialog {
    margin: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    min-height: 0;
    display: block;
  }
  #product-details-model.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 200ms cubic-bezier(.16, 1, .3, 1);
  }
  #product-details-model.show .modal-dialog { transform: none; }
  .fdn-dish { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .fdn-dish__form { max-height: 92vh; }
  .fdn-dish__grid {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding: var(--s-4);
  }
  .fdn-dish__media { height: 224px; }
  .fdn-dish__info { padding-top: 0; }
  .fdn-dish__name { font-size: 22px; }
  /* stacked footer: the one-row layout wrapped the CTA label to two lines
     (worse in Albanian/Italian) — stepper centered, full-width button */
  .fdn-dish__footer {
    padding: var(--s-3) var(--s-4) var(--s-4);
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
  }
  .fdn-dish__qty { align-self: center; }
  .fdn-dish__add { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  #product-details-model.fade .modal-dialog { transition: none; }
}

/* ==========================================================================
   In-header address modal (S2-2c) — Uber-Eats-style, Foodini-branded.
   Two steps in one modal: Addresses (search + saved) -> Address info
   (map with a draggable pin + label chips + save). Replaces the old
   dropdown that linked to a separate add-address page.
   ========================================================================== */
.fdn-addrmodal { max-width: 460px; }

.fdn-addrmodal__sec {
  font: 800 15px/1.3 var(--font-sans); color: var(--text);
  margin: var(--s-4) 0 var(--s-1);
}
.fdn-addrmodal__hint {
  font: 400 14px/1.5 var(--font-sans); color: var(--text-muted);
  margin: var(--s-3) 0 0;
}

/* search pill (same look as the in-restaurant menu search) */
.fdn-addrsearch {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 50px; padding: 0 var(--s-4);
  background: var(--bg-subtle); border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fdn-addrsearch > .bi { color: var(--text-muted); font-size: 17px; flex: 0 0 auto; }
.fdn-addrsearch input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font: 400 16px/1.4 var(--font-sans); color: var(--text);
}
.fdn-addrsearch input::placeholder { color: var(--text-subtle); }
.fdn-addrsearch:focus-within { border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-050); }
.fdn-addrsearch__clear {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 13px; line-height: 0;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.fdn-addrsearch__clear:hover { background: var(--border); color: var(--text); }

/* one results panel: typed suggestions + the location tools + saved list */
.fdn-addrresults { margin-top: var(--s-2); }
.fdn-addrpredict { display: flex; flex-direction: column; }
.fdn-addrrow__ic--accent { background: var(--brand-050); color: var(--brand-ink); }
/* predictions pack tightly with hairline separators (they replace the search
   dropdown, so they read as one continuous list) */
.fdn-addrrow--pred { margin-top: 0; padding: var(--s-1) 0; }
.fdn-addrpredict .fdn-addrrow--pred + .fdn-addrrow--pred { border-top: 1px solid var(--border); }
.fdn-addrpredict:not([hidden]) { padding-bottom: var(--s-2); border-bottom: 1px solid var(--border); margin-bottom: var(--s-1); }
.fdn-addrpredict__msg { text-align: center; padding: var(--s-3) 0; margin: 0; }

/* address / action rows: icon circle + text (+ edit/delete actions) */
.fdn-addrrow {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; padding: var(--s-2) 0;
}
.fdn-addrrow + .fdn-addrrow { border-top: 1px solid var(--border); }
.fdn-addrrow--btn {
  border: 0; background: transparent; text-align: left; cursor: pointer;
  margin-top: var(--s-2);
}
.fdn-addrrow__main {
  display: flex; align-items: center; gap: var(--s-3);
  flex: 1 1 auto; min-width: 0; text-decoration: none;
  border-radius: var(--r-md); padding: var(--s-1);
}
.fdn-addrrow--btn:hover .fdn-addrrow__ic,
.fdn-addrrow__main:hover .fdn-addrrow__ic { background: var(--border); }
.fdn-addrrow__main:hover { text-decoration: none; }
.fdn-addrrow__ic {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--r-pill); background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--text); font-size: 17px;
  transition: background .15s ease;
}
.fdn-addrrow.is-current .fdn-addrrow__ic { background: var(--brand-050); color: var(--brand-ink); }
.fdn-addrrow__txt { display: flex; flex-direction: column; min-width: 0; }
.fdn-addrrow__name {
  font: 500 14px/1.4 var(--font-sans); color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.fdn-addrrow__sub { font: 400 12px/1.4 var(--font-sans); color: var(--text-muted); }
.fdn-addrrow__actions { display: flex; gap: 2px; flex: 0 0 auto; }
.fdn-addrrow__act {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 15px; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.fdn-addrrow__act:hover { background: var(--bg-subtle); color: var(--text); text-decoration: none; }

/* step 2: map + draggable pin */
.fdn-addrmap {
  height: 220px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-subtle); border: 1px solid var(--border);
}
.fdn-addrmap__hint {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 500 12px/1.4 var(--font-sans); color: var(--text-muted);
  margin: var(--s-2) 0 0;
}
.fdn-addrline {
  font: 700 15px/1.4 var(--font-sans); color: var(--text);
  margin: var(--s-3) 0 0;
}
.fdn-addrtags { margin-top: var(--s-3); }
.fdn-addrmodal__foot {
  display: flex; justify-content: flex-end; gap: var(--s-2);
  margin-top: var(--s-5);
}

/* Google Places suggestions must float above the modal (default z ~1000
   sits under Bootstrap's 1055 modal) and match the design language */
.pac-container {
  z-index: 1090 !important;
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); margin-top: 4px;
  font-family: var(--font-sans);
}
.pac-item { padding: 8px 12px; font: 400 13px/1.5 var(--font-sans); cursor: pointer; }
.pac-item:hover { background: var(--bg-subtle); }
.pac-item-query { font: 600 14px/1.5 var(--font-sans); color: var(--text); }

@media (max-width: 575.98px) {
  .fdn-addrmodal { max-width: none; margin: var(--s-2); }
  .fdn-addrmap { height: 180px; }
  .fdn-addrmodal__foot .btn-foodini { flex: 1 1 0; }
}

/* ==========================================================================
   S2-4j - category artwork rail on very wide screens: all tiles fit with a
   lopsided empty gap on the right, so center them. `safe` makes center
   fall back to normal start-alignment the moment the rail overflows again
   (otherwise centering would clip the leftmost tiles out of reach), so
   smaller screens keep exactly the current scrolling behaviour.
   ========================================================================== */
@media (min-width: 1600px) {
  .fdn-cuisine-rail { justify-content: safe center; }
}

/* ==========================================================================
   2026-07 green rebrand — legacy fixups
   ========================================================================== */
/* cart pill: legacy h5 + white PNG glyph sit on the lime fill now */
.my-cart-btn.my-cart-btn h5 { color: var(--on-brand); }
.my-cart-btn.my-cart-btn img { filter: brightness(0) opacity(.82); }

/* ---- header rework: burger BEFORE the logo + cart pinned right ---- */
/* snug burger+logo pair (one flex child, so space-between keeps the
   header's left/middle/right rhythm) */
.fdn-brandrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
  min-width: 0;
}
.fdn-brandrow .navbar-brand { display: block; }

/* fdn_icon() svgs carry no width/height — size them wherever they sit */
.openbtn .fdn-ic,
.fdn-burger .fdn-ic { width: 22px; height: 22px; display: block; }
.my-cart-btn .fdn-ic { width: 20px; height: 20px; flex: 0 0 auto; }
.fdn-mobile-cart .fdn-ic { width: 20px; height: 20px; }

/* press/hover feedback on the two panel triggers (burger + cart): a soft
   hover disc on the burger and a quick squish on press — the guest
   lookalike cart is pointer-events:none, so it never reacts */
.fdn-burger.fdn-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  transition: background-color 140ms ease, transform 140ms ease;
}
.fdn-burger.fdn-burger:hover { background: var(--bg-subtle); }
.fdn-burger.fdn-burger:active { transform: scale(.86); }
.my-cart-btn.my-cart-btn { transition: background .15s ease, transform 140ms ease; }
.my-cart-btn.my-cart-btn:active { transform: scale(.95); }
.fdn-mobile-cart { transition: background-color 140ms ease, transform 140ms ease; }
.fdn-mobile-cart:active { transform: scale(.9); }
/* S4-17: a quick pop when an item is ADDED. Driven by fdnCartPop() in
   inc/script.php with a leading-edge throttle, so a burst of rapid adds
   plays it once, not once per tap. */
@keyframes fdn-cart-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  55%  { transform: scale(.93); }
  100% { transform: scale(1); }
}
.fdn-mobile-cart.fdn-cart-pop,
.my-cart-btn.my-cart-btn.fdn-cart-pop { animation: fdn-cart-pop 420ms ease; }
@media (prefers-reduced-motion: reduce) {
  .fdn-burger.fdn-burger,
  .my-cart-btn.my-cart-btn,
  .fdn-mobile-cart { transition: none; }
  .fdn-mobile-cart.fdn-cart-pop,
  .my-cart-btn.my-cart-btn.fdn-cart-pop { animation: none; }
}

/* cart pill text/icon share the on-brand ink (svg = currentColor) */
.my-cart-btn.my-cart-btn { color: var(--on-brand); }
span.my-cart-btn,
button.my-cart-btn { display: inline-flex; align-items: center; gap: var(--s-1); }

/* guest cart (S2-4k → S2-9c): CLICKABLE, and it now opens the SAME
   right-side drawer as the signed-in cart (#fdnGuestCartPanel carries
   .fdn-cartdrawer — the old fixed top-right card is gone). */
button.fdn-guestcart__btn {
  border: 0;
  cursor: pointer;
}
/* the signed-in mobile cart is a <button> too now (2026-07-15 — it used to be an
   <a> straight to checkout); reset the UA border so it matches the guest one */
button.fdn-mobile-cart {
  border: 0;
  cursor: pointer;
  padding: 0;
}
/* ✕ in the drawer's top-LEFT corner (reference screenshot) — shared by
   the guest drawer and both signed-in header copies */
.fdn-cartclose {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  cursor: pointer;
  margin-left: calc(-1 * var(--s-2));
}
.fdn-cartclose:hover,
.fdn-cartclose:focus { background: var(--bg-subtle); color: var(--text); }

/* mobile: keep [burger·logo] [search] [cart] on ONE row — the wide logo
   used to wrap the new cart circle onto a second line */
@media (max-width: 991.98px) {
  .mobile_header { flex-wrap: nowrap; }
  .fdn-brandrow { flex: 0 1 auto; }
  .fdn-brandrow .navbar-brand { min-width: 0; }
  .fdn-brandrow .navbar-brand img { max-width: 128px; }
  .mobile_header .fdn-mobile-cart { flex: 0 0 auto; margin-left: var(--s-2); }
}

/* ---- account/menu drawer: LEFT side + dark frozen backdrop ---- */
/* Uber-Eats style (user 2026-07-21: "the sidebar from the left … starts from
   the actual top of the browser, not from the header"). The panel is now
   FULL-HEIGHT from top:0 and COVERS the header, exactly like the cart drawer.
   Because the page burger is now hidden behind the panel, the drawer carries
   its OWN three-stripes close button (.closebtn in .sidemenu-header) sitting
   right where the page burger was, so the two read as one control. Its dim is
   raised to z-998 in fdnChromeSync (same as the cart drawer) so the header
   darkens too. (style.css pins .sidebar right:0 top:0 — doubled class wins.) */
.sidebar.sidebar {
  left: 0;
  right: auto;
  top: 0;
  height: 100%;
  box-shadow: var(--shadow-lg);
  padding-top: 0; /* the drawer header spaces itself (style.css: 60px) */
  overflow-x: hidden; /* the <769px block sets scroll — visible scrollbar */
  /* slide, don't width-reveal: the old width transition re-laid-out the
     panel every frame (stutter) and unclipped the content instead of
     gliding it. State = .is-open (JS); inline width is sizing only.
     -103%: 3% overshoot keeps the box-shadow off-screen while closed. */
  transform: translateX(-103%);
  visibility: hidden;
  will-change: transform;
  transition: transform 240ms cubic-bezier(.32, .72, 0, 1),
              visibility 0s linear 240ms;
}
.sidebar.sidebar.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1),
              visibility 0s;
}
/* the menu list settles in a beat behind the panel — quiet luxury */
.sidebar.sidebar .Menubar-side {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.sidebar.sidebar.is-open .Menubar-side {
  opacity: 1;
  transform: none;
  transition: opacity 260ms ease-out 60ms,
              transform 320ms cubic-bezier(.32, .72, 0, 1) 60ms;
}
@media (max-width: 991.98px) {
  /* full-height from the very top on mobile too (Uber style) */
  .sidebar.sidebar { top: 0; height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar.sidebar,
  .sidebar.sidebar.is-open,
  .sidebar.sidebar .Menubar-side,
  .sidebar.sidebar.is-open .Menubar-side { transition: none; }
}
/* the site logo now sits permanently right above the panel — the
   drawer's own wordmark row would just duplicate it */
.sidebar .sidemenu-header .foodini-text { display: none; }
/* the drawer's close control is the SAME three-stripes burger (user
   request) — it sits right under the header burger and both toggle the
   panel, so the two read as one control. Styled like .fdn-burger. */
/* full-height drawer: the close-burger sits in a header-height band at the
   very top so it lands right where the page burger was (reads as one button) */
.sidebar.sidebar .sidemenu-header {
  border-bottom: 0;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0;
}
.sidebar .closebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  color: var(--text);
  transition: background-color 140ms ease, transform 140ms ease;
}
.sidebar .closebtn:hover { background: var(--bg-subtle); color: var(--text); }
.sidebar .closebtn:active { transform: scale(.86); }
.sidebar .closebtn .fdn-ic { width: 22px; height: 22px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .sidebar .closebtn { transition: none; }
}

/* ---- drawer interior v2 (2026-07-08, per user's Uber Eats screenshots):
   guest = stacked Regjistrohu/Identifikohu buttons + plain text links;
   signed-in = avatar profile row + icon rows + muted sign-out; both end
   with a divider + the app promo pinned to the bottom. Existing functions
   only — no new actions. ---- */
.sidebar .Menubar-side {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: var(--s-5);
}
.sidebar .Menubar-side > .row { flex: 0 0 auto; }
.sidebar .sidebar-footer-main {
  position: static;          /* style.css pins it absolute bottom:30px */
  margin-top: auto;          /* flex pushes it to the panel floor */
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
}
/* guest: full-width auth CTAs (existing modals) */
.fdn-drawer-cta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-4);
}
.fdn-drawer-cta__btn {
  display: block;
  text-align: center;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font: 700 15px/1.2 var(--font-sans);
  text-decoration: none;
  transition: background-color 140ms ease, transform 140ms ease;
}
.fdn-drawer-cta__btn:active { transform: scale(.98); }
.fdn-drawer-cta__btn--solid { background: var(--brand); color: var(--on-brand); }
.fdn-drawer-cta__btn--solid:hover { background: var(--brand-hover); color: var(--on-brand); }
.fdn-drawer-cta__btn--soft { background: var(--bg-subtle); color: var(--text); }
.fdn-drawer-cta__btn--soft:hover { background: var(--border); color: var(--text); }
/* guest: icon rows under the CTAs (2026-07-14 — were plain text, looked
   sparse; now match the signed-in .fdn-drawer-nav treatment) */
.fdn-drawer-links { display: flex; flex-direction: column; }
.fdn-drawer-links a {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 12px 0;
  font: 600 15px/1.3 var(--font-sans);
  color: var(--text);
  text-decoration: none;
  transition: color 140ms ease;
}
.fdn-drawer-links a > i {
  font-size: 18px;
  line-height: 1;
  width: 20px;
  text-align: center;
  color: var(--text-muted);
  transition: color 140ms ease;
}
.fdn-drawer-links a:hover { color: var(--brand-ink); text-decoration: none; }
.fdn-drawer-links a:hover > i { color: var(--brand-ink); }
/* signed-in: avatar + name + green manage-account link */
.fdn-drawer-profile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-3);
}
.fdn-drawer-profile__avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 22px;
}
.fdn-drawer-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fdn-drawer-profile__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fdn-drawer-profile__name {
  font: 700 17px/1.2 var(--font-sans);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdn-drawer-profile__link { font: 600 13px/1.2 var(--font-sans); color: var(--brand-ink); text-decoration: none; }
.fdn-drawer-profile__link:hover { color: var(--brand-ink); text-decoration: underline; }
/* signed-in: icon rows + muted sign-out */
.fdn-drawer-nav { display: flex; flex-direction: column; }
.fdn-drawer-nav a {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 12px 0;
  font: 600 15px/1.3 var(--font-sans);
  color: var(--text);
  text-decoration: none;
  transition: color 140ms ease;
}
.fdn-drawer-nav a i { font-size: 18px; line-height: 1; }
.fdn-drawer-nav a:hover { color: var(--brand-ink); text-decoration: none; }
/* Log out: was a bare muted text link (no icon, no separation) — reads as
   an afterthought next to the icon rows. Now a proper destructive row:
   hairline divider closing the nav group, box-arrow icon, --danger text
   (user feedback 2026-07-16: "some buttons need to be done better, for
   example the log out"). Same modal trigger, markup class unchanged. */
.fdn-drawer-nav a.fdn-drawer-signout {
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-weight: 600;
  color: var(--danger-ink);
}
.fdn-drawer-nav a.fdn-drawer-signout:hover {
  color: color-mix(in srgb, var(--danger-ink) 78%, var(--text));
}
/* app promo: compact left-aligned card row (was oversized/centered) */
.sidebar .side-footer { justify-content: flex-start; gap: var(--s-3); }
.sidebar .foodini-side-icon { margin-right: 0; }
.sidebar .foodini-side-icon img { width: 48px; border-radius: var(--r-md); }
.sidebar .foodini-side-description h5 { font: 700 14px/1.3 var(--font-sans); color: var(--text); margin: 0 0 2px; }
.sidebar .foodini-side-description p { font: 500 13px/1.3 var(--font-sans); color: var(--text-muted); }
.sidebar .mobile-app { justify-content: flex-start !important; gap: var(--s-2); }
.sidebar .mobile-app img { height: 38px; width: auto; }
/* page dim while the drawer is open — same system as the search overlay,
   one shade darker. z-index MUST stay one under --z-header (100), exactly
   like .fdn-search-dim: above the header it blacked out the whole screen
   and made the header's right-side buttons unclickable (reported bug). The
   drawer itself (z-999) still floats above everything. */
.fdn-nav-dim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background: rgba(26, 26, 26, .45);
  opacity: 0;
  pointer-events: none;
  /* same duration/curve as the panels so the fade and the slide land
     together (fdnNavDim flushes styles on creation — first fade eases) */
  transition: opacity 240ms cubic-bezier(.32, .72, 0, 1);
}
.fdn-nav-dim.is-on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .fdn-nav-dim { transition: none; }
}

/* ==========================================================================
   S2-4k - header cart dropdown, empty state (reference): while the cart has
   0 items the product body hides and a friendly centered state shows —
   illustration circle, "Add items to start a cart", muted sub-line and a
   dark Start-shopping pill. Toggled by .fdn-cart--empty (PHP on first
   paint, a MutationObserver on the .total_item badge afterwards).
   ========================================================================== */
.fdn-cart-empty { display: none; }
.fdn-cartbody.fdn-cart--empty #card-details-body { display: none; }
.fdn-cartbody.fdn-cart--empty .fdn-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s-8) var(--s-5) var(--s-6);
}
.fdn-cart-empty__art {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-size: 48px;
}
/* small floating accents, echoing the reference illustration */
.fdn-cart-empty__art::before,
.fdn-cart-empty__art::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.fdn-cart-empty__art::before {
  width: 14px;
  height: 14px;
  background: var(--brand-green);
  top: 2px;
  right: 10px;
}
.fdn-cart-empty__art::after {
  width: 9px;
  height: 9px;
  background: var(--brand);
  bottom: 8px;
  left: 4px;
}
.fdn-cart-empty__title {
  margin: var(--s-5) 0 0;
  font: 700 18px/1.3 var(--font-sans);
  color: var(--text);
}
.fdn-cart-empty__sub {
  margin: var(--s-2) 0 0;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--text-muted);
  max-width: 300px;
}
.fdn-cart-empty__btn {
  margin-top: var(--s-5);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--surface);
  font: 700 14px/1 var(--font-sans);
  text-decoration: none;
}
.fdn-cart-empty__btn:hover,
.fdn-cart-empty__btn:focus {
  background: #000000;
  color: var(--surface);
  text-decoration: none;
}

/* ==========================================================================
   S2-8 — compact-width banner rail (user screenshot, 2026-07-07).
   Between the phone and desktop breakpoints a 560px slide filled the whole
   row: one giant contain-fit collage gif plus a sliver of the next slide.
   Two slides now peek at these widths. And because the deals rail is
   frameless (transparent background), a lazy slide that hadn't loaded yet
   read as a white void with a floating label — pending slides keep the
   skeleton surface until their artwork arrives.
   ========================================================================== */
@media (min-width: 576px) and (max-width: 991.98px) {
  .fdn-banner { width: min(48vw, 420px); }
}
#fdn-offers .fdn-banner.skel, #fdn-dishdeals .fdn-banner.skel {
  background: var(--bg-subtle);
}

/* ==========================================================================
   S2-4l - in-place category feed (Uber style): the pressed category gets a
   quiet selected state on the rail tile and the sidebar link while its
   results section replaces the feed below.
   ========================================================================== */
/* selected category on the top rail / listing chip bar: just the brand-ink
   bold label — user didn't want the ring around the thumb. */
.fdn-cuisine.is-cuisine-active .fdn-cuisine__label {
  font-weight: 800;
  color: var(--brand-ink);
}
.fdn-side__link.is-cuisine-active {
  background: var(--bg-subtle);
  border-radius: var(--r-pill);
  font-weight: 700;
}

/* ==========================================================================
   S2-10 — mobile header search BAR (user request): the magnifier + accordion
   are gone; the pill itself sits inline right after the logo and fills the
   row up to the cart. Tapping it focuses the input directly, which opens
   the full-width sheet at once. The :not(--overlay) scoping keeps the
   sheet-mode rules (46px input, pinned icon) winning once it opens.
   ========================================================================== */
.mobile_header .fdn-mobile-search {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 2px;
}
.mobile_header .fdn-mobile-search .fdn-searchwrap { width: 100%; }
.mobile_header .fdn-mobile-search .fdn-searchwrap:not(.fdn-searchwrap--overlay) #myMobileSearch {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding-left: 38px;
  /* MUST stay >= 16px. iOS Safari zooms the whole page in whenever a focused
     input computes under 16px, and this pill is the most-tapped control on the
     site — tapping search shoved the layout sideways and left the user pinching
     back out. The earlier `font: 400 16px` on #myMobileSearch was correct in
     intent but lost the cascade to this rule (later, higher specificity), so
     the bar was still measuring 14px (13px under 375px) and still zooming.
     The 14/13px was only ever about fitting the PLACEHOLDER in the narrow
     in-bar pill, and the placeholder is styled separately below — so the pill
     looks exactly as designed while the input itself no longer trips iOS. */
  font-size: 16px;
}
.mobile_header .fdn-mobile-search .fdn-searchwrap:not(.fdn-searchwrap--overlay) #myMobileSearch::placeholder {
  font-size: 14px;
}
.mobile_header .fdn-mobile-search .fdn-searchwrap:not(.fdn-searchwrap--overlay) i.fdn-searchico {
  left: 13px;
  font-size: 15px;
}

/* shimmer rows while the first suggest response is in flight — the sheet
   opens instantly on focus and these hold the space (S2-10) */
.fdn-suggest__load { padding: 4px 0 8px; }
.fdn-suggest__load span {
  display: block;
  height: 46px;
  margin: 8px 0;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  animation: fdn-suggest-pulse 1.1s ease-in-out infinite;
}
@keyframes fdn-suggest-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  .fdn-suggest__load span { animation: none; }
}

/* style.css (≤425px) pulls whatever follows the logo 3rem INTO it
   (margin-right: -3rem !important) — fine when that was a centred
   magnifier, but it shoved the S2-10 search bar over the wordmark */
@media (max-width: 425.98px) {
  .main_home_content .returning_user_home_header .navbar .fdn-brandrow .navbar-brand {
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   S2-9b — cart drawer (user request): the header cart opens a full-height
   panel from the RIGHT, mirroring the burger drawer on the left — same
   .fdn-nav-dim darkening (z 99, under the z-999 panel, so the drawer itself
   is never dimmed) and the same html.fdn-lock scroll freeze.
   State stays Bootstrap-compatible: .fdn-cartdrawer.show = open (legacy
   add_to_cart/close_modal toggle exactly that class). The heavy selector
   matches style.css's dropdown-era rule
   (#accordioncheckout .accordion-item:last-of-type .accordion-collapse,
   specificity 1-3-0, transition:all !important) so every box property and
   the transition are reliably overridden — both header copies included.
   ========================================================================== */
#accordioncheckout .accordion-item:last-of-type .fdn-cartdrawer.collapse,
.fdn-cartdrawer.fdn-cartdrawer.collapse { display: block; }
/* Breakpoint visibility for the two header copies AFTER inc/script.php portals
   them to <body> (the .d-none.d-lg-flex / .d-lg-none wrappers stay behind, so
   without these both copies would render at every width and stack on top of
   each other). Hide-only by design: the rule above keeps .fdn-cartdrawer at
   display:block permanently and open/close runs on visibility+transform, so a
   forced `display:block` here would have pinned a drawer open. These are also
   what fdnCartVisible()'s `offsetParent !== null` test reads to pick the copy
   the user can actually see. */
@media (max-width: 991.98px) {
  .fdn-cartdrawer.fdn-cartdrawer--desktop { display: none !important; }
}
@media (min-width: 992px) {
  .fdn-cartdrawer.fdn-cartdrawer--mobile { display: none !important; }
}
#accordioncheckout .accordion-item:last-of-type .accordion-collapse.fdn-cartdrawer,
.fdn-cartdrawer.fdn-cartdrawer {
  position: fixed;
  /* S4-2d: the cart is a FLOATING card, not a full-height edge-attached panel.
     Inset from the top/right, rounded all round, height hugs its content (up to
     the viewport) so the dimmed page shows around + below it — exactly the
     reference. .fdn-nav-dim already darkens the page behind. */
  top: var(--s-4);
  right: var(--s-4);
  bottom: auto;
  left: auto;
  width: min(430px, calc(100vw - var(--s-4) * 2));
  height: auto;
  max-height: calc(100vh - var(--s-4) * 2);
  max-height: calc(100dvh - var(--s-4) * 2);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  z-index: 999;                 /* same layer as the left menu drawer */
  overflow-y: auto;
  overflow-x: hidden;
  /* slide fully off to the right — clear its own width + the inset gap */
  transform: translateX(calc(100% + var(--s-4) + 10px));
  visibility: hidden;
  will-change: transform;
  /* mirror of the menu drawer: 320ms in / 240ms out, same curve, so the
     two sides feel like one system (200ms read as instant) */
  transition: transform 240ms cubic-bezier(.32, .72, 0, 1),
              visibility 0s linear 240ms !important;
}
#accordioncheckout .accordion-item:last-of-type .accordion-collapse.fdn-cartdrawer.show,
.fdn-cartdrawer.fdn-cartdrawer.show {
  transform: none;
  visibility: visible;
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1),
              visibility 0s !important;
}
/* S4-2f: while a receipt is expanded, two REAL semicircle bites are punched
   through the whole card at the perforation (reference mockup) — the dimmed
   page genuinely shows through the holes. --fdn-perf-y is measured by
   fdnBillNotches() in inc/script.php (render + drawer scroll + resize).
   mask-composite INTERSECTS the two hole layers (default add would let each
   layer's solid area refill the other's hole). The card's box-shadow would
   be clipped by the mask, so the notched state carries it as a drop-shadow
   filter instead — which hugs the bitten silhouette like a real ticket.
   Browsers without mask-composite just show no bites (@supports guard). */
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .fdn-cartdrawer.fdn-cartdrawer.fdn-notched {
    -webkit-mask-image:
      radial-gradient(circle 14px at 0 var(--fdn-perf-y, -99px), transparent 13px, #000 13.5px),
      radial-gradient(circle 14px at 100% var(--fdn-perf-y, -99px), transparent 13px, #000 13.5px);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(circle 14px at 0 var(--fdn-perf-y, -99px), transparent 13px, #000 13.5px),
      radial-gradient(circle 14px at 100% var(--fdn-perf-y, -99px), transparent 13px, #000 13.5px);
    mask-composite: intersect;
    box-shadow: none;
    filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .24));
  }
}
/* cart body settles in a beat behind the panel (menu drawer twin) */
.fdn-cartdrawer.fdn-cartdrawer > .accordion-body {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.fdn-cartdrawer.fdn-cartdrawer.show > .accordion-body {
  opacity: 1;
  transform: none;
  transition: opacity 260ms ease-out 60ms,
              transform 320ms cubic-bezier(.32, .72, 0, 1) 60ms;
}
/* comfortable inner padding for the legacy cart body inside the panel */
.fdn-cartdrawer > .accordion-body {
  padding: var(--s-4) var(--s-5) var(--s-6);
  min-height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  #accordioncheckout .accordion-item:last-of-type .accordion-collapse.fdn-cartdrawer,
  .fdn-cartdrawer.fdn-cartdrawer,
  #accordioncheckout .accordion-item:last-of-type .accordion-collapse.fdn-cartdrawer.show,
  .fdn-cartdrawer.fdn-cartdrawer.show,
  .fdn-cartdrawer.fdn-cartdrawer > .accordion-body,
  .fdn-cartdrawer.fdn-cartdrawer.show > .accordion-body { transition: none !important; }
}

/* ==========================================================================
   S2-9c — drawer interior, reference layout (user screenshot 2026-07-08):
   ✕ alone in the top-left, and while the cart is empty the illustration /
   "add items" copy / dark Start-shopping pill sit vertically CENTERED in
   the full-height panel. The guest header's #fdnGuestCartPanel is now the
   same .fdn-cartdrawer, so one set of rules covers signed-in + guest.
   ========================================================================== */
.fdn-cartdrawer > .accordion-body {
  display: flex;
  flex-direction: column;
}
/* the id variant outguns style.css's
   `#accordioncheckout .model-title { justify-content: space-between }`
   (1-1-0), which shoved the heading to the far edge, away from the ✕ */
#accordioncheckout .fdn-cartdrawer .model-title,
.fdn-cartdrawer .model-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-3);
  flex: 0 0 auto;
  margin: 0;
}
.fdn-cartdrawer .model-title h2 {
  font: 700 20px/1.2 var(--font-sans);
  color: var(--text);
  margin: 0;
}
/* center the empty state in the leftover height (the base
   .fdn-cartbody.fdn-cart--empty .fdn-cart-empty rule supplies display:flex) */
.fdn-cartdrawer .fdn-cartbody.fdn-cart--empty .fdn-cart-empty {
  flex: 1 1 auto;
  justify-content: center;
  padding: var(--s-4) var(--s-4) var(--s-10);
}
/* while the drawer cart is open the dim must cover the header too — the
   reference dims the whole page behind the panel. The base .fdn-nav-dim
   stays at z 99 (under the z-100 header) for the burger/menu drawer, whose
   panel hangs below the header row; fdnChromeSync() adds this modifier
   only when a .fdn-cartdrawer is open. Still under the z-999 panel: the
   drawer itself is never darkened. */
.fdn-nav-dim.fdn-nav-dim--cart { z-index: 998; }

/* ==========================================================================
   S2-4m - design-audit fixes (frontend only).
   ========================================================================== */

/* 1) The desktop header row was shrink-to-fit (~1135px in a 1440px
   viewport), so the flexing middle group had no free space and the search
   pill collapsed into a 49px icon-circle on EVERY page. Full-width row +
   an Uber-like cap so the pill stays elegant on very wide screens. */
.returning_user_home_header .navbar.desktop_header {
  width: 100%;
}
.returning_user_home_header .search-location.custom-search-input {
  max-width: 640px;
}

/* 2) /search "Top result": it rendered as one lonely default grid cell.
   Make it a proper hero card like the reference. */
.fdn-topresult {
  grid-template-columns: minmax(0, 620px);
}
.fdn-topresult .fdn-card {
  width: 100%;
}
.fdn-topresult .fdn-card__media {
  aspect-ratio: 21 / 9;
}

/* 3) Oferta tiles: mostly-transparent campaign gifs floated on a near-white
   box and read as loose stickers — give the tile a visible surface. */
.fdn-banner {
  background: linear-gradient(150deg, var(--bg-subtle) 0%, #ECEDEF 100%);
  border: 1px solid var(--border);
}

/* 4) Mobile polish: rail/page headings wrapped awkwardly and pushed the
   view-more link around; tighten type and keep the link on one line. */
@media (max-width: 767.98px) {
  .fdn-rail-title { font-size: 20px; }
  .fdn-rail-head { gap: var(--s-3); }
  .fdn-viewmore { white-space: nowrap; flex: 0 0 auto; }
  .fdn-page-head { font-size: 24px; margin-top: var(--s-4); }
}

/* (follow-up to fix 1) The real thief: the GLOBAL legacy rule
   `.container-fluid { padding: 0 150px }` — inside the header it left the
   middle group only ~285px, so the address chip ate the row and the search
   pill collapsed to its 49px icon minimum. Scoped to the header container
   only (page containers keep their legacy padding), plus a saner cap on
   the desktop logo so the pill gets Uber-like room. */
.returning_user_home_header > .container-fluid {
  padding-left: clamp(16px, 3vw, 48px);
  padding-right: clamp(16px, 3vw, 48px);
}
.returning_user_home_header .desktop_header .navbar-brand img {
  max-width: 240px;
  height: auto;
}

/* --------------------------------------------------------------------------
   S2-4n: listing category row — the pill chips read as ugly outlined boxes;
   it is now the SAME seamless look as the discovery category rail: emoji
   tile art (webassets/images/fdn-cat/, local — no CDN transform to 429)
   floating free with the label under it, no pill/border/background. The
   tiles reuse .fdn-cuisine wholesale; this block only adapts the row
   itself (still the sticky arrow rail the S2-8 module drives).
   -------------------------------------------------------------------------- */
.fdn-chipbar--tiles {
  gap: var(--s-5);
  align-items: flex-start;
  padding: var(--s-2) var(--s-1) var(--s-2);
}
.fdn-chipbar--tiles .fdn-cuisine { flex: 0 0 auto; }
/* campaign names run long ("Ivi Luleshtrydhe") — wrap them centered */
.fdn-chipbar--tiles .fdn-cuisine__label {
  text-align: center;
  white-space: normal;
}
@media (max-width: 767.98px) {
  .fdn-chipbar--tiles { gap: var(--s-3); }
  .fdn-chipbar--tiles .fdn-cuisine { min-width: 68px; }
  .fdn-chipbar--tiles .fdn-cuisine__thumb { width: 62px; height: 52px; }
}

/* ==========================================================================
   S3-1 — cart drawer redesign (2026-07-08): Uber-style item rows + pill
   quantity steppers, restyled price breakdown, sticky checkout CTA, and a
   bottom sheet on phones. Everything is a RESKIN of the legacy markup
   (.product-select-section rows, .quantity steppers, .tables-payment) —
   ids and jQuery/onclick hooks untouched, so the add / update_quantity /
   remove / update_cart sync keeps working. The restaurant-switch prompt
   (#cart_restaurant) is rebuilt as .fdn-newcart.
   ========================================================================== */

/* ---- item rows (#cart_dish_item; the JS add-template appends the same
   markup, its inline 70x65 img style loses to !important) ---- */
.fdn-cartdrawer .cart_dish_item .product-select-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 !important;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.fdn-cartdrawer .cart_dish_item .product-select-title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 auto;
  min-width: 0;
}
.fdn-cartdrawer .cart_dish_item .product-img { position: relative; flex: 0 0 auto; }
.fdn-cartdrawer .cart_dish_item .product-img > img {
  width: 56px !important;
  height: 56px !important;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  display: block;
}
.fdn-cartdrawer .cart_dish_item .product-delete {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 22px;
  height: 22px;
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fdn-cartdrawer .cart_dish_item .product-delete img { width: 10px; height: 10px; display: block; }
.fdn-cartdrawer .cart_dish_item .product-select-name h6 {
  font: 600 14px/1.35 var(--font-sans);
  color: var(--text);
  margin: 0 0 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fdn-cartdrawer .cart_dish_item .product-select-name p { font: 600 13px/1.2 var(--font-sans); color: var(--text-muted); margin: 0; }
.fdn-cartdrawer .cart_dish_item h4 a { font: 600 12.5px/1.4 var(--font-sans); color: var(--brand-ink); cursor: pointer; }

/* ---- pill quantity stepper (legacy .quantity minus/qty/plus inputs) ---- */
.fdn-cartdrawer .quantity {
  display: inline-flex;
  align-items: center;
  background: var(--bg-subtle);
  border-radius: var(--r-pill);
  padding: 3px;
}
.fdn-cartdrawer .quantity input[type="button"] {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font: 700 16px/1 var(--font-sans);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.fdn-cartdrawer .quantity input[type="button"]:hover { background: var(--surface); }
.fdn-cartdrawer .quantity .qty {
  width: 30px;
  border: 0;
  background: transparent;
  text-align: center;
  font: 700 14px/1 var(--font-sans);
  color: var(--text);
  padding: 0;
}
.fdn-cartdrawer .plastic-set-add-remove { flex: 0 0 auto; }

/* ---- vendor header row (the inner accordion toggle) ---- */
.fdn-cartdrawer .accordion-header .accordion-button {
  background: transparent;
  box-shadow: none;
  padding: 0;
  cursor: pointer;
}
.fdn-cartdrawer .accordion-header .product-select-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--s-3);
  margin: 0 !important;
  padding: var(--s-3) 0;
}
.fdn-cartdrawer .accordion-header .product-select-title { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.fdn-cartdrawer .accordion-header .product-img { position: relative; flex: 0 0 auto; }
.fdn-cartdrawer .accordion-header .product-img > img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
}
.fdn-cartdrawer .accordion-header .product-number {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-pill);
  font: 700 11px/18px var(--font-sans);
  text-align: center;
}
.fdn-cartdrawer .accordion-header .product-select-name h6 { font: 700 15px/1.3 var(--font-sans); color: var(--text); margin: 0 0 2px; }
.fdn-cartdrawer .accordion-header .product-select-name p { font: 500 13px/1.2 var(--font-sans); color: var(--text-muted); margin: 0; }
.fdn-cartdrawer .arrowup-down img { width: 16px; }

/* ---- price breakdown (.tables-payment — classes update_cart keeps live) ---- */
.fdn-cartdrawer .tables-payment {
  margin-top: var(--s-4);
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
}
.fdn-cartdrawer .payment-list {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 3px 0;
}
.fdn-cartdrawer .payment-list h5 { font: 500 13.5px/1.6 var(--font-sans); color: var(--text-muted); margin: 0; }
.fdn-cartdrawer .payment-list h5 p { display: inline; margin: 0; }
.fdn-cartdrawer .payment-list.totle-box {
  border-top: 1px solid var(--border);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
}
.fdn-cartdrawer .payment-list.totle-box h5 { font: 700 15px/1.6 var(--font-sans); color: var(--text); }

/* ---- "+ add new item" ghost row ---- */
.fdn-cartdrawer .add-location-btn .btn-white {
  font: 600 13.5px/1.2 var(--font-sans);
  color: var(--brand-ink);
  background: transparent;
  border: 0;
  padding: var(--s-2) 0;
}

/* ---- sticky checkout CTA (server-tagged .fdn-cart-cta on both copies) ---- */
.fdn-cartdrawer .fdn-cart-cta {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: var(--s-4) 0 0 !important;
  padding: var(--s-3) 0 var(--s-4);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.fdn-cartdrawer .fdn-cart-cta .btn-green {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: var(--brand);
  color: var(--on-brand);
  border: 0;
  border-radius: var(--r-md);
  font: 700 15px/1.2 var(--font-sans);
  transition: background-color 140ms ease, transform 140ms ease;
}
.fdn-cartdrawer .fdn-cart-cta .btn-green:hover { background: var(--brand-hover); color: var(--on-brand); }
.fdn-cartdrawer .fdn-cart-cta .btn-green:active { transform: scale(.98); }

/* ---- phone: the drawer becomes a bottom sheet (slide-up; the shared
   .show rule sets transform:none, which covers both axes) ---- */
@media (max-width: 767.98px) {
  #accordioncheckout .accordion-item:last-of-type .accordion-collapse.fdn-cartdrawer,
  .fdn-cartdrawer.fdn-cartdrawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: min(86vh, 680px);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(103%);
  }
}

/* ---- restaurant-switch prompt (#cart_restaurant, rebuilt as .fdn-newcart) ---- */
.fdn-newcart-dialog { max-width: 420px; }
.fdn-newcart {
  position: relative;
  border: 0;
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
  box-shadow: var(--shadow-lg);
}
.fdn-newcart__x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fdn-newcart__x:hover { background: var(--bg-subtle); }
.fdn-newcart__title { font: 800 20px/1.25 var(--font-sans); color: var(--text); margin: 0 0 var(--s-2); }
.fdn-newcart__body { font: 400 14.5px/1.55 var(--font-sans); color: var(--text-muted); margin: 0 0 var(--s-5); }
.fdn-newcart__body strong { color: var(--text); font-weight: 700; }
.fdn-newcart__actions { display: flex; flex-direction: column; gap: var(--s-3); }
.fdn-newcart__keep,
.fdn-newcart__new {
  border: 0;
  border-radius: var(--r-md);
  padding: 13px 16px;
  font: 700 15px/1.2 var(--font-sans);
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease;
}
.fdn-newcart__keep { background: var(--bg-subtle); color: var(--text); }
.fdn-newcart__keep:hover { background: var(--border); }
.fdn-newcart__new { background: var(--brand); color: var(--on-brand); }
.fdn-newcart__new:hover { background: var(--brand-hover); }
.fdn-newcart__keep:active,
.fdn-newcart__new:active { transform: scale(.98); }

/* ---- S3-1 follow-up: neutralize legacy cart-popover skin inside the
   drawer (grey accordion body, white row cards, doubled chevrons,
   nowrap dish names) ---- */
.fdn-cartdrawer .accordion-body { background: var(--surface); }
.fdn-cartdrawer #collapseproduct > .accordion-body,
.fdn-cartdrawer .accordion-collapse .accordion-body { background: var(--surface); padding-left: 0; padding-right: 0; }
.fdn-cartdrawer .accordion-button::after { display: none; }
.fdn-cartdrawer .cart_dish_item .product-select-section,
.fdn-cartdrawer .accordion-header .product-select-section {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.fdn-cartdrawer .cart_dish_item .product-select-name h6 { white-space: normal; }
.fdn-cartdrawer .accordion-header .product-select-name h6 { white-space: normal; }
.fdn-cartdrawer .accordion-header .product-select-name p .sub_total { color: var(--brand-ink); }

/* ==========================================================================
   S2-13 — deals rail, reference promo cards (user screenshot 2026-07-08:
   Uber One banner). Each slide is a solid dark card: text panel on the
   left (campaign/vendor title, one localized sub-line, white pill CTA) and
   the artwork cover-fit on the right, fading into the panel. Replaces the
   raw full-bleed banners + floating label pill (#fdn-offers only — the
   top-placement rail keeps plain .fdn-banner slides).
   ========================================================================== */
#fdn-offers .fdn-banner.fdn-promo, #fdn-dishdeals .fdn-banner.fdn-promo {
  display: flex;
  align-items: stretch;
  /* The base .fdn-banner locks a short 21/8 box; a 2-line campaign title then
     collided with the sub + CTA (user: "text gets cropped and is destroyed").
     Drop the ratio for a uniform, roomier height that always fits a 2-line
     title, a 2-line sub and the pill CTA with air to spare. */
  aspect-ratio: auto;
  height: 176px;
  /* light card: nearly all campaign art ships on a white ground, so a
     white panel lets the masked art melt into the card with no seam
     (a dark panel showed a muddy grey gradient against the same art) */
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.fdn-promo__txt {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centre the stack — no margin-top:auto pin that
                              let a 2-line title push the sub onto the CTA */
  gap: 6px;
  flex: 0 0 48%;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
}
.fdn-promo__title {
  color: var(--text);
  font: 800 clamp(16px, 1.6vw, 21px)/1.2 var(--font-sans);
  overflow: hidden;
  overflow-wrap: anywhere; /* a long single word truncates instead of spilling */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fdn-promo__sub {
  color: var(--text-muted);
  font: 400 13px/1.4 var(--font-sans);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fdn-promo__cta {
  margin-top: 4px; /* was margin-top:auto (pinned to bottom → collided with a
                      2-line sub); the centred column spaces it cleanly now */
  align-self: flex-start;
  background: var(--text);
  color: var(--surface);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font: 700 13px/1 var(--font-sans);
  white-space: nowrap;
}
#fdn-offers .fdn-banner.fdn-promo:hover .fdn-promo__cta, #fdn-dishdeals .fdn-banner.fdn-promo:hover .fdn-promo__cta { background: #000; }
/* artwork slice: cover (the frameless-rail rules set contain) + soft fade
   into the panel so mixed-ratio campaign art never shows a hard seam */
#fdn-offers .fdn-banner.fdn-promo img, #fdn-dishdeals .fdn-banner.fdn-promo img {
  flex: 1 1 auto;
  width: 54%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26%);
}
/* loading slide: quiet grey until the artwork arrives */
#fdn-offers .fdn-banner.fdn-promo.skel, #fdn-dishdeals .fdn-banner.fdn-promo.skel { background: var(--bg-subtle); }

/* ==========================================================================
   Top-placement "-50%" rail (.fdn-topband) — user: "do the same thing … it is
   with different photos as well". These are restaurant PHOTO banners (not the
   Oferta text cards): mixed-ratio profile images cover-fit into one frame.
   Match the taller deal-card height so both deal rails line up, and give the
   varied photos a consistent frame + soft label backdrop so a name burnt into
   the corner of an off-ratio photo doesn't read as clipped. Cover-fill stays
   (a real photo should fill; contain would letterbox with grey bars).
   ========================================================================== */
.fdn-topband .fdn-banner {
  aspect-ratio: auto;
  height: 176px;
  background: var(--bg-subtle);
}
.fdn-topband .fdn-banner img { object-fit: cover; }

@media (max-width: 575.98px) {
  /* sub is hidden here, so the card needs less height (title + CTA only) */
  #fdn-offers .fdn-banner.fdn-promo, #fdn-dishdeals .fdn-banner.fdn-promo { height: 132px; }
  .fdn-promo__txt { flex-basis: 52%; padding: var(--s-4); gap: 4px; }
  .fdn-promo__sub { display: none; }
  /* ...but the dish rail's sub is the RESTAURANT, and "Pizza Margherita"
     with no shop name is not orderable information - keep it (one line)
     and give that card back the height the extra row needs. */
  #fdn-dishdeals .fdn-banner.fdn-promo { height: 152px; }
  #fdn-dishdeals .fdn-promo__sub {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 12px;
  }
  .fdn-promo__cta { padding: 7px 12px; font-size: 12px; }
  .fdn-topband .fdn-banner { height: 128px; }
}

/* --------------------------------------------------------------------------
   Deals rail: whole-card fit (user: "deals not to be cut in half"). The
   generic .fdn-banner width (min(62vw,420px)) left ~2.x cards visible, so the
   last deal card (e.g. "Discounts") rested half-clipped. Size the promo cards
   to an exact fraction of the rail so a whole number always fills it — no
   partial card at rest — and make the snap mandatory so manual swipes + the
   auto-advance always land on a card edge. Rail gap here is var(--s-3)
   (density-pass override above); the calc subtracts the inter-card gaps so N
   cards + (N-1) gaps fill the content width exactly. Below 576px keep one card
   plus a deliberate peek (reads as a hint, not a clipped card).
   -------------------------------------------------------------------------- */
#fdn-offers .fdn-banner-rail, #fdn-dishdeals .fdn-banner-rail { scroll-snap-type: x mandatory; }
#fdn-offers .fdn-banner.fdn-promo, #fdn-dishdeals .fdn-banner.fdn-promo { width: 86%; }                       /* mobile: 1 card + peek */
@media (min-width: 576px) {
  #fdn-offers .fdn-banner.fdn-promo, #fdn-dishdeals .fdn-banner.fdn-promo { width: calc((100% - var(--s-3)) / 2); }        /* 2 cards */
}
/* 3-across needs a real text column: at 992-1199 it left ~108px, which
   wrapped the sale price onto two lines and pushed the nowrap CTA ~17px
   under the photo on every card (measured 2026-07-21). Hold 2-across
   until 1200. */
@media (min-width: 1200px) {
  #fdn-offers .fdn-banner.fdn-promo, #fdn-dishdeals .fdn-banner.fdn-promo { width: calc((100% - 2 * var(--s-3)) / 3); }     /* 3 cards (max) */
}

/* --------------------------------------------------------------------------
   S2-4o: top bar goes reference-minimal — the "Llogaria ime" entry is gone
   (the burger drawer's profile row owns the account) and the cart pill
   becomes a bare glyph with a small green count badge, Uber-style. The
   .total_item span keeps its class untouched: every legacy cart script
   rewrites that node, and the S2-4k empty-state observer watches it.
   -------------------------------------------------------------------------- */
.my-cart-btn.my-cart-btn {
  background: transparent;
  color: var(--text);
  position: relative;
  padding: 8px;
  border-radius: var(--r-pill);
}
.my-cart-btn.my-cart-btn:hover { background: var(--bg-subtle); }
.my-cart-btn.my-cart-btn .fdn-ic { width: 24px; height: 24px; }
/* "N Artikuj" collapses to just the badge: font-size 0 swallows the label
   text node, the count span gets its own size back as a green dot badge */
.my-cart-btn.my-cart-btn h5 {
  font-size: 0;
  margin: 0;
  position: absolute;
  top: -4px;
  right: -9px;   /* S4-17: number tucked to the far right, where the cart ends */
}
.my-cart-btn.my-cart-btn h5 .total_item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--brand-green);
  color: var(--on-brand-green);
  font: 700 11px/1 var(--font-sans);
}
/* S4-17 (user: "not a panel behind the cart but the cart LINES green"): once
   the cart holds items the glyph's own strokes go green — NO background pill.
   The icon is stroke="currentColor", so tinting the button's color greens the
   lines. --brand-ink is the AA-legible green for strokes on the header surface
   (lime --brand is fills-only per the rebrand); the count badge keeps its own
   green. Empty stays a plain dark glyph with no bubble. .has-items is toggled
   by the cart-count observer in inc/script.php. */
.my-cart-btn.my-cart-btn.has-items {
  color: var(--brand-ink);
}
.my-cart-btn.my-cart-btn:not(.has-items) h5 { display: none; }
.my-cart-btn .arrow-up { display: none; }
/* S2-4o follow-ups: legacy header rules re-show the decorative arrow img
   with higher specificity — hard-kill it; and if any cart script ever
   writes an empty string into the count, the badge still reads "0". */
.my-cart-btn img.arrow-up { display: none !important; }
.my-cart-btn.my-cart-btn h5 .total_item:empty::before { content: '0'; }

/* ==========================================================================
   S2-4q — density pass (reference parity, user request 2026-07-08): the
   reference packs noticeably more into the fold. Tighter vertical rhythm
   between sections, smaller restaurant cards + promo banners, tighter rail
   gaps and card typography. Applies everywhere the shared card renders
   (discovery, listing, search, favourites) so the density is consistent.
   ========================================================================== */
.fdn-main { gap: var(--s-4); }
.fdn-rail-head { margin-bottom: var(--s-2); }
.fdn-rail-title { font-size: 20px; }
.fdn-rail-sub { margin-top: 2px; font-size: 13px; }
.fdn-rail,
.fdn-banner-rail {
  gap: var(--s-3);
  padding: var(--s-1) var(--s-1) var(--s-2);
}
/* Restaurant-card sizing/typography USED to be set here (260px wide, 10/12/12
   body padding, 15px name, 12.5px meta). Every one of those declarations was
   dead: the S2-4r block ~35 lines below re-declares the same properties on the
   same selectors at equal specificity, so source order handed it the win and
   cards have always shipped at 280px. Removed 2026-07-23 — reading them here
   and tuning them was a guaranteed "my CSS isn't loading" wild goose chase.
   Card size and type now live in ONE place: the S2-4r block. Only these two
   declarations were ever live, so only they remain. */
.fdn-card__meta { margin-top: 1px; }
.fdn-card__fav { width: 22px; height: 22px; }
/* promo/offer banners: reference tile width (was 560px) */
.fdn-banner { width: min(62vw, 420px); }
/* listing/search grids: smaller cells, tighter gutters */
.fdn-grid {
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: var(--s-4) var(--s-3);
}
.fdn-page-head { margin: var(--s-4) 0 var(--s-3); }
@media (min-width: 992px) { .fdn-page-head { font-size: 26px; } }
/* category rail: same art, less air around and below it */
.fdn-cuisine-rail { padding: var(--s-1) 0 0; }
.fdn-cuisine { min-width: 76px; }

/* ==========================================================================
   S2-4r — reference card anatomy: the reference's cards are not boxes.
   A rounded image tile with the text sitting directly on the page — no
   white surface, no border, no shadow, no hover lift — and a wider,
   flatter photo. Applies to every shared card (rails + grids + dishes).
   ========================================================================== */
.fdn-card,
.fdn-card:hover {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  transform: none;
}
.fdn-card { width: min(72vw, 280px); }
@media (min-width: 992px) { .fdn-card { width: 280px; } }
.fdn-card__media {
  border-radius: var(--r-lg);
  aspect-ratio: 2.15 / 1;
}
/* quiet hover: the reference dims the photo instead of lifting the card */
.fdn-card:hover .fdn-card__media img { opacity: .92; }
.fdn-card__body { padding: 8px 2px 2px; }
.fdn-card__name { font-size: 16px; }
.fdn-card__meta { font-size: 13px; }

/* ==========================================================================
   S2-4s — sidebar selected state, reference-exact: a "cropped" square-
   cornered block flush with the rail (no pill rounding), an indicator
   bar on the left edge, and a bolder label. 2026-07-28 (user: "make it
   green, the designs true colour"): the gray block + black bar became the
   brand tint --brand-050 with a --brand-ink bar, label and icon, matching
   the offer links below it. Both tokens flip under html.fdn-dark.
   ========================================================================== */
.fdn-side__link.is-active,
.fdn-side__link.is-cuisine-active {
  background: var(--brand-050);
  border-radius: 0;
  border-left: 4px solid var(--brand-ink);
  padding-left: calc(var(--s-3) - 4px);
  font-weight: 700;
  color: var(--brand-ink);
}
/* the icon carries its own color (.fdn-side__ic), so it has to be told to
   follow the label into brand green - the Lucide stroke rides currentColor. */
.fdn-side__link.is-active .fdn-side__ic,
.fdn-side__link.is-cuisine-active .fdn-side__ic {
  color: var(--brand-ink);
}

/* S2-4t — account entry restored next to the cart (user request): a round
   avatar + quiet label that fits the minimal header; the old inline
   51x42 style squished the photo into an ellipse. */
.fdn-acctlink {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  text-decoration: none;
}
.fdn-acctlink:hover { background: var(--bg-subtle); text-decoration: none; }
.fdn-acctlink__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}
.fdn-acctlink__avatar--icon { padding: 2px; }
.fdn-acctlink h4 {
  font: 600 14px/1 var(--font-sans);
  color: var(--text);
  margin: 0;
  white-space: nowrap;
}

/* ==========================================================================
   S2-14 — dark mode (user mockups 2026-07-08). Token-driven components flip
   via the html.fdn-dark token remap in foodini-tokens.css; this section
   catches the LEGACY hardcoded colors (style.css whites/grays) on the
   surfaces a user actually sees. Scoped strictly under html.fdn-dark so
   light mode is byte-identical.
   ========================================================================== */
html.fdn-dark { --bg-header: #12180C; }   /* header sits a step below the page */

html.fdn-dark body { background: var(--bg); color: var(--text); }
/* style.css: .bg-body { background-color: #ffffff !important } */
html.fdn-dark .bg-body { background-color: var(--bg) !important; }

/* headings/labels: style.css pins near-black grays all over */
html.fdn-dark h1, html.fdn-dark h2, html.fdn-dark h3,
html.fdn-dark h4, html.fdn-dark h5, html.fdn-dark h6 { color: var(--text); }

/* fixed headers (desktop + mobile + auth variants) */
html.fdn-dark .main_home_content .returning_user_home_header,
html.fdn-dark .returning_user_home_header {
  background: var(--bg-header);
  box-shadow: 0 1px 0 var(--border);
}
html.fdn-dark .show-submenu h4,
html.fdn-dark .heder-login.main-menu > ul > li > a,
html.fdn-dark .main-menu > ul > li > a { color: var(--text); }

/* inputs everywhere (header pill, forms, modals) */
html.fdn-dark .form-control {
  background-color: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border);
}
html.fdn-dark .form-control:focus {
  background-color: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border-strong);
}
html.fdn-dark .form-control::placeholder { color: var(--text-subtle); }
html.fdn-dark select,
html.fdn-dark .form-select {
  background-color: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border);
}

/* burger / account drawer (style.css .sidebar is #fff) */
html.fdn-dark .sidebar { background-color: var(--surface); }
html.fdn-dark .sidebar .menu_list a,
html.fdn-dark .sidebar .closebtn { color: var(--text); }

/* footer (style.css uses !important on the light band) */
html.fdn-dark .footer { background: var(--bg-header) !important; }
html.fdn-dark .sub-footer { background-color: var(--surface); }
html.fdn-dark .footer p, html.fdn-dark .footer a,
html.fdn-dark .footer li, html.fdn-dark .footer span { color: var(--text-muted); }

/* bootstrap modals (sign-in/sign-up, info, address) */
html.fdn-dark .modal-content { background: var(--surface); color: var(--text); }
html.fdn-dark .modal-content p { color: var(--text-muted); }

/* accordion internals the cart drawer reuses */
html.fdn-dark .accordion-item,
html.fdn-dark .accordion-button { background: transparent; color: var(--text); }

/* deals promo cards STAY light — the artwork ships on white grounds and
   the card is the one deliberately bright object on the dark page (the
   user's mock keeps its banners bright). Pin the text back to the light
   palette since the tokens underneath flipped. */
html.fdn-dark #fdn-offers .fdn-banner.fdn-promo, html.fdn-dark #fdn-dishdeals .fdn-banner.fdn-promo { background: #FFFFFF; border-color: transparent; }
html.fdn-dark .fdn-promo__title { color: #1A1A1A; }
html.fdn-dark .fdn-promo__sub { color: #6B6B6B; }
html.fdn-dark .fdn-promo__cta { background: #1A1A1A; color: #FFFFFF; }
/* the dish rail's price row rides the same always-white card, so it needs
   the same pin - without it --text/--text-muted flip to the dark palette
   and the price renders white-on-white (measured 1.10:1, 2026-07-21). */
html.fdn-dark .fdn-promo__price { color: #1A1A1A; }
html.fdn-dark .fdn-promo__price .fdn-price-was { color: #6B6B6B; }
html.fdn-dark #fdn-offers .fdn-banner.fdn-promo:hover .fdn-promo__cta, html.fdn-dark #fdn-dishdeals .fdn-banner.fdn-promo:hover .fdn-promo__cta { background: #000; }

/* ---- Appearance toggle (left panel + burger drawer) ---- */
.fdn-theme {
  margin-top: var(--s-6);
  padding: var(--s-4) 0 var(--s-2);
  border-top: 1px solid var(--border);
}
.fdn-theme__label {
  font: 700 13px/1 var(--font-sans);
  color: var(--text-muted);
  margin: 0 0 var(--s-3);
}
.fdn-theme-toggle {
  display: inline-flex;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.fdn-theme-toggle button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 600 13px/1 var(--font-sans);
  padding: 7px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.fdn-theme-toggle button.is-on {
  background: var(--text);
  color: var(--surface);
  font-weight: 700;
}

/* ==========================================================================
   S3-3 — header search fits every viewport (user: "responsive to the
   device width, true to all screens"). Root causes measured headless:
   (1) the legacy .menu wrapper (now only hosting the FIXED drawer) still
   sat in the header row with its style.css 15px margin + the row gap —
   ~23px of dead width on every screen; (2) at 992–1199px the address chip
   refused to shrink so the search pill collapsed to ~92px; (3) tiny
   phones clipped the placeholder.
   ========================================================================== */

/* (1) take the drawer host out of the row — absolute, NOT display:none
   (that would hide the fixed-position drawer inside it) */
.desktop_header .menu,
.mobile_header .menu {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* (2) the search pill keeps a usable floor; the address chip is the one
   that yields — its whole chain may shrink and the h5 ellipsizes */
.returning_user_home_header .search-location.custom-search-input {
  min-width: 190px;
}
.returning_user_home_header .search-boxes .accordion,
.returning_user_home_header .search-boxes .accordion-item,
.returning_user_home_header .search-boxes .accordion-button,
.returning_user_home_header .search-boxes .location-auto,
.returning_user_home_header .search-boxes .my_address_header {
  min-width: 0;
}
.returning_user_home_header .search-boxes .accordion { flex: 0 1 auto; }
.returning_user_home_header .search-boxes .my_address_header .address_detail {
  min-width: 0;
  overflow: hidden;
}

/* narrow desktop (992–1199px): smaller logo, tighter gaps and auth pills
   so the search keeps a real share of the row */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .returning_user_home_header .desktop_header .navbar-brand img { max-width: 150px; }
  .returning_user_home_header .search-boxes { margin: 0 var(--s-3); }
  .returning_user_home_header .heder-login .submenu > a.fdn-authbtn { padding: 0 var(--s-3); }
  .returning_user_home_header .my_address_header .address_detail h5 {
    max-width: clamp(64px, 24vw - 160px, 180px);
  }
}

/* (3) tiny phones: tighter in-bar pill so the placeholder fits */
@media (max-width: 374.98px) {
  .mobile_header .fdn-mobile-search .fdn-searchwrap:not(.fdn-searchwrap--overlay) #myMobileSearch {
    padding-left: 30px;
    padding-right: 8px;
    /* input stays 16px (iOS zoom guard — see the base rule); only the
       PLACEHOLDER tightens to 13px so the wording still fits the narrower
       pill on a 320-wide phone, which is all this block was ever doing. */
  }
  .mobile_header .fdn-mobile-search .fdn-searchwrap:not(.fdn-searchwrap--overlay) #myMobileSearch::placeholder {
    font-size: 13px;
  }
  .mobile_header .fdn-mobile-search .fdn-searchwrap:not(.fdn-searchwrap--overlay) i.fdn-searchico {
    left: 9px;
    font-size: 14px;
  }
  .mobile_header .fdn-mobile-cart { margin-left: 4px; }
}

/* page-level misfit found while sweeping: the footer wordmark/badges are
   height-sized (width:auto), so their intrinsic widths (logo 344px,
   badges 289px) forced sideways scroll under ~364px viewports */
.fdn-footer__logo {
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.fdn-footer__badges img {
  object-fit: contain;
  object-position: left center;
}
/* only very narrow phones need the width cap that keeps the two badges on
   one row without sideways scroll; above that they show at full height */
@media (max-width: 380px) {
  .fdn-footer__badges img { max-width: calc(50% - 6px); height: auto; }
}
/* toggle inside the burger drawers: match the drawer's own gutters */
.fdn-theme--drawer .fdn-theme { margin: var(--s-4) 0 0; } /* settings zone: follows lang, no extra divider */

/* ==========================================================================
   S2-4u — cart drawer, mockup anatomy (2026-07-08): ✕ · Cart · Delivery|
   Pickup switch, the restaurant order as a green-outlined section card
   (logo + name + count badge, item rows with compact steppers), promo and
   services as quiet pill rows, dashed divider, fee rows, big CHECKOUT.
   All legacy hooks untouched (total_item2/3, dish_price_*, quantity_*,
   remove(), update_quantity(), applyPromocode, service ±). Scoped to
   .fdn-cartbody so the checkout page is unaffected.
   ========================================================================== */
/* flex-wrap: the Delivery|Pickup switch is flex:0 0 auto (never shrinks), so on
   a 280px phone — or with the longer IT/EN labels — it pushed ~38px past the
   drawer edge. Wrapping drops it onto its own row instead of overflowing; at
   >=320px with the short labels nothing wraps, so the row is unchanged. */
.fdn-cartbody .model-title { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; row-gap: var(--s-2); }
.fdn-cartbody .model-title h2 { flex: 1 1 auto; margin: 0; }
/* when it does wrap, it spans the row and splits evenly rather than sitting lonely on the left */
.fdn-cartbody .model-title .fdn-cartmode { margin-left: auto; }
.fdn-cartmode {
  display: inline-flex;
  background: var(--bg-subtle);
  border-radius: var(--r-pill);
  padding: 3px;
  flex: 0 0 auto;
}
.fdn-cartmode__opt {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 700 13px/1 var(--font-sans);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.fdn-cartmode__opt.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* the whole restaurant order = one green-outlined card (mockup 1) */
.fdn-cartbody .select-product-main .accordion-item {
  border: 1.5px solid var(--brand-green);
  border-radius: 16px;
  background: var(--surface);
  padding: var(--s-2) var(--s-3) var(--s-3);
  overflow: hidden;
}
/* restaurant header: square-round logo + count badge + name/subline */
.fdn-cartbody .product-img { position: relative; }
.fdn-cartbody .product-img > img { border-radius: 10px; object-fit: cover; }
.fdn-cartbody #vendor_image { width: 46px !important; height: 46px !important; }
.fdn-cartbody .product-number {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  border-radius: var(--r-pill);
  background: var(--brand-green);
  color: var(--on-brand-green);
  font: 700 11px/19px var(--font-sans);
  text-align: center;
  padding: 0 5px;
}
.fdn-cartbody .product-select-name h6 { font: 700 16px/1.3 var(--font-sans); color: var(--text); margin: 0; }
.fdn-cartbody .product-select-name p { font: 500 12.5px/1.5 var(--font-sans); color: var(--text-muted); margin: 2px 0 0; }

/* item rows: photo · name+price · stepper */
.fdn-cartbody .cart_dish_item .product-select-section {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.fdn-cartbody .cart_dish_item .product-select-title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 auto;
  min-width: 0;
}
.fdn-cartbody .cart_dish_item .product-img > img { width: 52px !important; height: 48px !important; }
.fdn-cartbody .cart_dish_item .product-select-name h6 { font-size: 14px; }
.fdn-cartbody .product-delete {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fdn-cartbody .product-delete img { width: 11px; height: 11px; }
/* compact stepper pill: - 2 + */
.fdn-cartbody .quantity {
  display: inline-flex;
  align-items: center;
  background: var(--bg-subtle);
  border-radius: var(--r-pill);
  padding: 2px;
}
.fdn-cartbody .quantity .minus,
.fdn-cartbody .quantity .plus {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: 700 15px/1 var(--font-sans);
  cursor: pointer;
}
.fdn-cartbody .quantity .minus:hover,
.fdn-cartbody .quantity .plus:hover { background: var(--border); }
.fdn-cartbody .quantity .qty {
  width: 28px;
  border: 0;
  background: transparent;
  text-align: center;
  font: 700 13px/1 var(--font-sans);
  color: var(--text);
}

/* promo / services headers as quiet bordered rows (mockup promo pill) */
.fdn-cartbody .offer-box-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 9px 14px;
  background: var(--surface);
}
.fdn-cartbody .offer-box-main .offer-section { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.fdn-cartbody .offer-box-main .offer-description h5 { font: 700 13.5px/1.3 var(--font-sans); margin: 0; color: var(--text); }
.fdn-cartbody .offer-box-main .offer-description p { font: 500 12px/1.4 var(--font-sans); margin: 0; color: var(--text-muted); }

/* fee block: dashed divider like the mockup's ticket edge */
.fdn-cartbody .tables-payment {
  border-top: 2px dashed var(--border);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
}
.fdn-cartbody .payment-list { display: flex; align-items: baseline; justify-content: space-between; }
.fdn-cartbody .payment-list h5 { font: 500 14px/1.7 var(--font-sans); color: var(--text-muted); margin: 0; }
.fdn-cartbody .payment-list h5 p { display: inline; margin: 0; }
.fdn-cartbody .payment-list.totle-box { border-top: 1px solid var(--border); margin-top: var(--s-2); padding-top: var(--s-2); }
.fdn-cartbody .payment-list.totle-box h5 { font: 800 18px/1.5 var(--font-sans); color: var(--text); }

/* big CHECKOUT (mockup 2) */
.fdn-cartbody .fdn-cart-cta .btn-green {
  display: block;
  width: 100%;
  border-radius: 12px;
  padding: 14px;
  font: 800 15px/1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ==========================================================================
   S2-4v — checkout page, mockup layout: grey page, white rounded cards
   (delivery details/options left, order summary + payment right), option
   pills as bordered choice cards, big green place-order button. All form
   fields, ids and the placeOrder flow untouched.
   ========================================================================== */
.checkout-main { background: var(--bg-subtle); padding-bottom: var(--s-8); }
.fdn-checkout-head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 0 var(--s-2); }
.fdn-checkout-head h2 { margin: 0; font: 800 24px/1.2 var(--font-sans); }
.fdn-backstore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font: 700 14px/1 var(--font-sans);
  text-decoration: none;
}
.fdn-backstore:hover { color: var(--text); text-decoration: underline; }
/* the two halves become separate white cards, not one divided sheet */
.checkout-main .checkout-content > .row > .border-right { border-right: 0 !important; }
.checkout-main .checkout-details,
.checkout-main .checkout-section {
  background: var(--surface);
  border-radius: 16px;
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.checkout-main .main-title-theme h3 { font: 800 20px/1.3 var(--font-sans); }
/* delivery type + timing pills → bordered choice cards (mockup options) */
.checkout-main .checkout-tab .nav-link,
.checkout-main .delivery-timing .nav-link {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: 700 14px/1.3 var(--font-sans);
  padding: 12px 16px;
}
.checkout-main .checkout-tab .nav-link.active,
.checkout-main .delivery-timing .nav-link.active {
  border: 2px solid var(--text);
  background: var(--surface);
  color: var(--text);
}
/* summary items reuse the drawer look */
.checkout-main .checkout-section .product-select-title { display: flex; align-items: center; gap: var(--s-3); flex: 1 1 auto; min-width: 0; }
.checkout-main .checkout-section .product-select-section { display: flex; align-items: center; gap: var(--s-3); }
.checkout-main .checkout-section .product-img { position: relative; }
.checkout-main .checkout-section .product-img > img { width: 52px !important; height: 48px !important; border-radius: 10px; object-fit: cover; }
.checkout-main .checkout-section .product-select-name h6 { font: 700 14px/1.3 var(--font-sans); margin: 0; }
.checkout-main .checkout-section .tables-payment { border-top: 2px dashed var(--border); margin-top: var(--s-4); padding-top: var(--s-3); }
.checkout-main .checkout-section .payment-list { display: flex; align-items: baseline; justify-content: space-between; }
.checkout-main .checkout-section .payment-list h5 { font: 500 14px/1.7 var(--font-sans); color: var(--text-muted); margin: 0; }
.checkout-main .checkout-section .payment-list.totle-box h5 { font: 800 18px/1.5 var(--font-sans); color: var(--text); }
.fdn-placeorder {
  display: block;
  width: 100%;
  margin-top: var(--s-4);
  border-radius: 12px;
  padding: 15px;
  font: 800 15px/1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .4px;
}
/* S2-4v follow-up: the legacy active tab was a filled green pill with a
   WHITE icon + label — on the new white option cards that read as blank.
   Ink the label and turn the white glyph black. */
.checkout-main .checkout-tab .nav-link span,
.checkout-main .checkout-tab .nav-link.active span { color: var(--text) !important; }
.checkout-main .checkout-tab .nav-link img { filter: brightness(0); width: 22px; height: auto; }

/* ==========================================================================
   S3-2 — checkout, one clean vertical flow: white section cards (address →
   delivery type → time → payment/tip → notes) with a sticky order summary
   + the page's single primary Place-order button. Reuses the S2-4v option
   cards / summary styles; every legacy id and jQuery hook is unchanged.
   ========================================================================== */
.fdn-co { max-width: 1200px; margin: 0 auto; }
.fdn-co__restname { color: var(--text-muted); font: 600 15px/1.3 var(--font-sans); margin-left: auto; }
.fdn-co__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-5); align-items: start; padding-bottom: var(--s-8); }
.fdn-co__main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.fdn-co__card { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); }
.fdn-co__cardtitle { display: flex; align-items: center; gap: 8px; font: 800 16px/1.3 var(--font-sans); margin: 0 0 var(--s-4); color: var(--text); }
.fdn-co__cardtitle i { font-size: 18px; }
.fdn-co__side { position: sticky; top: 84px; }
@media (max-width: 991px) {
  .fdn-co__grid { grid-template-columns: 1fr; }
  .fdn-co__side { position: static; }
}

/* ==========================================================================
   S3-2d — focused checkout chrome (reference: back + centered logo, white
   cards floating on a grey page). The full site header is hidden on
   .fdn-co-page; its modals live outside <header> so they still work.
   ========================================================================== */
.fdn-co-page .returning_user_home_header { display: none !important; }
/* Focused checkout = ONE header (the topbar). The full site footer renders a
   second Foodini logo + link columns at the bottom — that stacked brand bar is
   the "two headers" the user saw, and it's off-brief for the reference, so hide
   it here (the reference checkout has just the topbar + cards). */
.fdn-co-page .fdn-footer { display: none !important; }
.fdn-co-page .main-body-section { margin-top: 0; }
/* the site <body> reserves ~56px at the top for the FIXED site header — but
   that header is hidden here, so the reserved padding was empty dead space
   ABOVE the topbar that read as a SECOND header bar. Zero it so the topbar
   sits flush at the top, then give the cards real breathing room UNDER it. */
.fdn-co-page { padding-top: 0 !important; }
.fdn-co-page .checkout-main { padding-top: var(--s-6); }
/* Bootstrap's .bg-body utility paints the body white with !important; the
   checkout must sit on its grey page so the white cards read as "clearly
   divided" — win the cascade explicitly (else it's white cards on white). */
.fdn-co-page.bg-body,
.fdn-co-page,
.fdn-co-page .checkout-main { background: #EAEAE6 !important; }
html.fdn-dark .fdn-co-page.bg-body,
html.fdn-dark .fdn-co-page,
html.fdn-dark .fdn-co-page .checkout-main { background: #10150B !important; }

/* 3-column grid (back | logo | store). The logo used to be
   position:absolute;left:50% — out of flow, so nothing could stop the back
   link sliding underneath it. On a ~375px phone the FOODINI wordmark plus
   "Kthehu te dyqani" don't both fit, and the two printed on top of each other.
   A real centre column can't overlap: the columns reserve each other's space. */
.fdn-co-topbar {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--s-4);
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 14px 28px;
}
.fdn-co-topbar__back {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent;
  color: var(--text); font: 800 15px/1 var(--font-sans); cursor: pointer; text-decoration: none;
  /* min-width:0 lets the grid track actually shrink instead of forcing the
     row wider than the viewport; the label then ellipsises rather than
     pushing the logo off-centre. */
  min-width: 0; justify-self: start;
}
.fdn-co-topbar__backtxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdn-co-topbar__back i { font-size: 18px; flex: none; }
.fdn-co-topbar__back:hover { color: var(--brand-ink); }
.fdn-co-topbar__logo {
  justify-self: center;
  display: inline-flex; align-items: center;
}
.fdn-co-topbar__logo img { height: 30px; width: auto; }
/* store name: was small + muted (easy to miss). Make it a clear chip so the
   customer always sees which store they're ordering from. */
.fdn-co-topbar__rest {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--bg-subtle); color: var(--text);
  font: 800 14.5px/1.2 var(--font-sans);
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fdn-co-topbar__rest i { font-size: 15px; color: var(--brand-ink); }
.fdn-co-topbar__rest { justify-self: end; }
@media (max-width: 640px) {
  .fdn-co-topbar { padding: 12px 16px; }
  .fdn-co-topbar__rest { display: none; }
  .fdn-co-topbar__logo img { height: 26px; }
  /* The wordmark is wide (~195px at 26px tall). Even in a grid, keeping the
     back LABEL would squeeze the logo off-centre or ellipsise it to nothing on
     a 320-390px screen. Drop to an arrow-only control — the <a> carries an
     aria-label, so the accessible name survives — and give it a full 44px
     touch target while we're here (it was a 15px-tall text hit area). */
  .fdn-co-topbar__backtxt { display: none; }
  .fdn-co-topbar__back { min-width: 44px; min-height: 44px; }
  .fdn-co-topbar__back i { font-size: 22px; }
  /* Fixed, EQUAL side columns so the wordmark is optically centred rather than
     nudged off by whichever side happens to be wider (it sat 36px right of
     centre at 320px). The store chip is display:none here, so the third
     column is purely a mirror of the back button's width. */
  .fdn-co-topbar { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
  /* Cap by BOTH axes: a hard height + max-width would cap the width while
     leaving the height fixed, squashing the logo out of aspect on a 320px
     screen. height:auto keeps the ratio and simply renders it smaller. */
  .fdn-co-topbar__logo img { height: auto; max-height: 26px; max-width: 100%; }
}

/* comfy floating cards + icon tiles to match the reference */
.fdn-co-page .fdn-co__card { border-radius: var(--r-xl); padding: var(--s-6); }
.fdn-co-page .fdn-co__cardtitle { font-size: 18px; }
.fdn-co-page .fdn-co__rowic {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
  background: var(--bg-subtle); place-items: center; font-size: 19px; color: var(--text-muted);
}

/* order-total rows (new markup: <span>label</span><b>value</b>) */
.fdn-co__totals { display: flex; flex-direction: column; gap: 6px; border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }
.fdn-co-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 600 14.5px/1.6 var(--font-sans); color: var(--text-muted); }
.fdn-co-row > b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fdn-co-row--grand { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.fdn-co-row--grand > span { font: 800 19px/1.2 var(--font-sans); color: var(--text); }
.fdn-co-row--grand > b { font: 800 22px/1.2 var(--font-sans); color: var(--text); }

/* address rows */
.fdn-co__addr { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.fdn-co__addr:last-of-type { border-bottom: 0; }
.fdn-co__addricon { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }
.fdn-co__addrtxt { flex: 1 1 auto; min-width: 0; font: 500 14px/1.4 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.fdn-co__chip {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-pill);
  padding: 4px 12px; font: 700 12px/1.2 var(--font-sans);
  color: var(--text); text-decoration: none; background: var(--surface);
}
.fdn-co__chip:hover { border-color: var(--text); color: var(--text); }
.fdn-co__chip.is-on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.fdn-co__addrdel { flex: 0 0 auto; color: var(--text-muted); font-size: 16px; }
.fdn-co__addrdel:hover { color: var(--danger); }
.fdn-co__addractions { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); flex-wrap: wrap; }
.fdn-co__addractions .btn-foodini { min-height: 40px; font-size: 14px; }
.fdn-co__gps { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--font-sans); color: var(--text-muted); text-decoration: none; }
.fdn-co__gps:hover { color: var(--text); }

/* option rows (delivery type + timing) — bordered choice cards */
.checkout-main .checkout-tab,
.checkout-main .delivery-timing { display: flex; gap: var(--s-3); flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.checkout-main .checkout-tab .nav-item,
.checkout-main .delivery-timing .nav-item { flex: 1 1 150px; max-width: 240px; }
.checkout-main .checkout-tab .nav-link,
.checkout-main .delivery-timing .nav-link { display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; text-align: center; min-height: 52px; }

/* payment extras */
.checkout-main .field-foodini label { font: 600 13px/1.4 var(--font-sans); color: var(--text); }
.checkout-main #my_card_list .card-lists-section {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: 10px 14px; gap: var(--s-3);
}
.checkout-main #my_card_list .card-lists-section h5 { font: 700 15px/1.3 var(--font-sans); margin: 0 0 0 10px; }
.checkout-main #my_card_list .form-check { margin: 0; padding: 0; }
.checkout-main #my_card_list .form-check-input { float: none; margin: 0; width: 20px; height: 20px; }
.checkout-main .courir-tips { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: var(--s-3); }
.checkout-main .courir-tips h5 { font: 700 14px/1.3 var(--font-sans); margin: 0; }
.checkout-main .courir-tips .quantity { display: inline-flex; align-items: center; gap: 12px; }
.checkout-main .incdec {
  width: 30px; height: 30px; border: 1.5px solid var(--border-strong); border-radius: 50%;
  background: var(--surface); color: var(--text); font: 700 16px/1 var(--font-sans);
  cursor: pointer; padding: 0;
}
.checkout-main .incdec:hover { border-color: var(--text); }
.checkout-main #rider_tip_amount_show { font: 800 15px/1 var(--font-sans); min-width: 28px; text-align: center; display: inline-block; }

/* time field — the legacy .timer hard-codes background:#fff + a light-grey
   box-shadow (the "white glow"); both break dark mode. Re-token the wrapper,
   drop the stray caret pseudo-carets, and make the native input a themed pill
   whose clock/spinner follow the active theme (color-scheme). */
.checkout-main .timer,
.checkout-main .delivery_time {
  background: transparent; box-shadow: none; border: 0; padding: 0; margin-left: 0;
}
.checkout-main .time-minit::before,
.checkout-main .time-minit::after { display: none; }
.checkout-main .time-minit input[type="time"] {
  max-width: 220px;
  background: var(--bg-subtle); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  padding: 10px 16px; font: 700 14px/1 var(--font-sans);
  color-scheme: light;
}
.checkout-main .time-minit input[type="time"]:focus {
  outline: none; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand);
}
html.fdn-dark .checkout-main .time-minit input[type="time"] { color-scheme: dark; }

/* the summary card keeps the S2-4v .checkout-section look; just spacing */
.fdn-co__side .checkout-section { padding: var(--s-5); }

/* ==========================================================================
   S3-5 — multi-shop cart drawer (mock): up to 3 green-outlined shop
   sections — the LIVE API cart plus locally parked ones — each with its
   restaurant header (logo · name · delivery eta · trash), item rows with
   qty steppers, and its own "Go to checkout". The live section reuses the
   legacy accordion markup (S2-4u skin); parked sections are .fdn-shopcart--
   parked. fdn-cart--liveempty hides just the live section.
   ========================================================================== */
.fdn-cartbody .fdn-shopcart {
  border: 2px solid var(--brand-green);
  border-radius: 18px;
  background: var(--surface);
  margin-top: var(--s-4);
  padding: var(--s-4);
}
/* the shop section stays expanded — guards against close_modal() stripping
   .show from inner collapses */
.fdn-cartdrawer .accordion-collapse.fdn-always-open { display: block !important; height: auto !important; }

/* header row: logo · name · eta · (expand) · trash, with a divider under it */
.fdn-shopcart__head { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.fdn-shopcart__logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; background: var(--bg-subtle); }
.fdn-shopcart__title { flex: 1 1 auto; min-width: 0; }
.fdn-shopcart__title h6 { margin: 0 0 2px; font: 800 19px/1.15 var(--font-sans); color: var(--text); letter-spacing: -.01em; overflow-wrap: anywhere; }
.fdn-shopcart__eta { margin: 0; font: 500 12.5px/1.4 var(--font-sans); color: var(--text-muted); }
.fdn-shopcart__expand, .fdn-shopcart__trash {
  flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-subtle); font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
}
.fdn-shopcart__expand:hover { background: var(--bg-subtle); color: var(--brand-ink); }
.fdn-shopcart__trash:hover { background: var(--bg-subtle); color: var(--danger); }

/* item rows: thumb · name+stepper · price · edit pencil */
.fdn-shopcart__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.fdn-shopcart__items .fdn-shopcart__item:last-child { border-bottom: 0; }
.fdn-shopcart__thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--bg-subtle); }
.fdn-shopcart__iteminfo { flex: 1 1 auto; min-width: 0; }
.fdn-shopcart__iteminfo h6 { margin: 0 0 5px; font: 700 14px/1.3 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.fdn-shopcart__price { margin: 0; font: 600 13px/1.3 var(--font-sans); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fdn-shopcart__edit { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--bg-subtle); color: var(--text-muted); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fdn-shopcart__edit:hover { color: var(--brand-ink); }

/* plain "− N +" stepper (no pill) — NOT .quantity/.plus/.minus so the legacy
   direct-bound handlers never double-fire on these buttons */
.fdn-pqty { display: inline-flex; align-items: center; gap: 14px; }
.fdn-pqty__btn {
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted);
  font: 700 17px/1 var(--font-sans); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.fdn-pqty__btn:hover { background: var(--bg-subtle); color: var(--text); }
.fdn-pqty__btn:disabled { opacity: .5; cursor: wait; }
.fdn-pqty__val { min-width: 12px; text-align: center; font: 700 14px/1 var(--font-sans); color: var(--text); }

/* per-shop CTA */
.fdn-shopcart__go,
.fdn-cartbody .fdn-cart-cta .btn-green {
  display: flex; align-items: center; justify-content: center; width: 100%;
  margin-top: var(--s-4);
  border-radius: 14px; padding: 14px;
  font: 800 15px/1.2 var(--font-sans);
  text-align: center; text-transform: none;
}
/* ==================== S5-6 · smoother "proceed to checkout" ====================
   Pressing CHECKOUT fires a sync round-trip to the live order API, so the wait
   is real and varies with it. The old feedback was a single opacity: .6, which
   reads as "disabled, nothing is happening" rather than "working". Three honest
   layers replace it:
     1. the button keeps its label and gains a spinner (it is busy, not dead);
     2. a slim top bar fades in only once the wait is long enough to notice —
        below that it would just flash;
     3. once the server says go, a short veil fades to the page background so
        the hard navigation stops making the drawer vanish mid-gesture.
   Everything animates transform/opacity only, so it stays on the compositor,
   and all of it is switched off under prefers-reduced-motion (see the
   guardrail block near the top of this file). */
.fdn-shopcart__go.is-busy { opacity: 1; pointer-events: none; cursor: progress; }
/* ring with a transparent quadrant: inherits the button's own text colour, so
   it works on the white-on-lime drawer CTA and the dark-on-lime receipt CTA
   alike, in both themes, with no extra token */
.fdn-shopcart__go.is-busy::before,
.fdn-rc__checkout.is-busy::before {
  content: ""; flex: 0 0 auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: fdn-toast-spin .7s linear infinite;
}
/* .fdn-rc__checkout already carries gap: 10px; the drawer CTA does not */
.fdn-shopcart__go.is-busy::before { margin-right: 10px; }

/* indeterminate top bar — appended to <body>, so it is never trapped by the
   .main{z-index:1} stacking context that has swallowed overlays before */
.fdn-goprog {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: calc(var(--z-toast) - 1);
  background: var(--brand-050); overflow: hidden;
  opacity: 0; transition: opacity var(--dur-1) var(--ease-out);
  pointer-events: none;
}
.fdn-goprog.is-on { opacity: 1; }
.fdn-goprog::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: var(--brand); border-radius: var(--r-pill);
  animation: fdnGoProg 1.1s var(--ease-out) infinite;
}
@keyframes fdnGoProg {
  from { transform: translateX(-105%); }
  to   { transform: translateX(305%); }
}

/* navigation veil — fades to the page background (var(--bg) follows the
   theme, so dark mode never flashes light) and holds a spinner while the
   checkout page loads */
.fdn-goveil {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: var(--z-toast);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  opacity: 0; pointer-events: none;
  transition: opacity 190ms var(--ease-out);
}
.fdn-goveil.is-on { opacity: 1; pointer-events: auto; }
.fdn-goveil__mark {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--brand-ink);
  animation: fdn-toast-spin .7s linear infinite;
}
/* The motion guardrail near the top of this file cannot reach these rules —
   it is declared thousands of lines EARLIER, so at equal specificity these
   later declarations would win and keep spinning. Reduced motion is therefore
   handled here, immediately after the rules it has to beat. States are kept
   (still busy, still covered), only the movement goes; fdnGoVeil() separately
   skips the veil entirely and navigates straight away. */
@media (prefers-reduced-motion: reduce) {
  .fdn-shopcart__go.is-busy::before,
  .fdn-rc__checkout.is-busy::before,
  .fdn-goveil__mark { animation: none; }
  .fdn-goprog { transition: none; }
  .fdn-goprog::before { animation: none; width: 100%; }
  .fdn-goveil { transition: none; }
}

/* ==================== S4-2 · expanded receipt (focus mode) ====================
   The shop card's expand button opens a ticket-style bill: the multi-shop list
   hides (.fdn-cart--focus on the cart body) and one shop fills the drawer as a
   real receipt — notched/perforated card, item steppers, Promotion Code entry,
   a "Do you need service?" row, and honest totals (Sub Total + the REAL
   delivery charge; promo + service finalise on the checkout page). All colours
   are design tokens, so light/dark come for free (foodini-tokens.css). */

/* expand affordance in the collapsed shop head (sits just before the trash) */
.fdn-shopcart__expand {
  flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted); font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
}
.fdn-shopcart__expand:hover { background: var(--bg-subtle); color: var(--text); }

/* focus mode: swap the list (+ empty art) for the receipt in both drawer copies */
.fdn-cartbody.fdn-cart--focus .fdn-cart-shops,
.fdn-cartbody.fdn-cart--focus .fdn-cart-empty { display: none !important; }
.fdn-receipt { display: none; }
/* focus: show the receipt and let its column grow so the floating surface fills
   the drawer height (never a half-height band with bare drawer showing beneath) */
.fdn-cartbody.fdn-cart--focus #card-details-body,
.fdn-cartbody.fdn-cart--focus .fdn-receipt { display: flex; flex-direction: column; flex: 1 1 auto; }
/* the empty-state rule collapses #card-details-body; focus must keep it shown */
.fdn-cartbody.fdn-cart--focus.fdn-cart--empty #card-details-body { display: flex; }

/* S4-2e — the receipt is NOT a card-on-a-tray any more: the WHOLE drawer IS the
   ticket. There is no framed grey tray AND no inner white card — the restaurant
   head, items, promo, perforation, totals and Checkout all sit directly on the
   drawer surface, edge to edge. --rc-notch is the "dimmed page through torn
   paper" tone — used ONLY by the rip opening during the tear animation. (It
   used to paint side notches on the perforation too; every painted notch —
   dark disc, then soft die-cut — read as a gray blob, and the user asked for
   the perforation to be EMPTY. The dashed rule stands alone now.) */
.fdn-rc {
  --rc-notch: #5c5c56;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  background: transparent;
}
html.fdn-dark .fdn-rc { --rc-notch: #0c0f08; }

.fdn-rc__back {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
  color: var(--text-muted); font: 700 13px/1 var(--font-sans); cursor: pointer;
  padding: 6px 4px; margin-bottom: 12px;
}
.fdn-rc__back:hover { color: var(--text); }
.fdn-rc__back i { font-size: 15px; }

/* S4-2e: flattened — the ticket IS the drawer now (no bg / shadow / radius / pad).
   Its only remaining job is to be the positioning context for the perf notches. */
.fdn-rc__ticket { position: relative; background: transparent; border-radius: 0; padding: 0; box-shadow: none; }

/* shop header: logo · name · eta · trash, divider under it */
.fdn-rc__head { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
.fdn-rc__logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; background: var(--bg-subtle); }
.fdn-rc__title { flex: 1 1 auto; min-width: 0; }
.fdn-rc__title h6 { margin: 0 0 3px; font: 800 18px/1.15 var(--font-sans); color: var(--text); letter-spacing: -.01em; overflow-wrap: anywhere; }
.fdn-rc__title .fdn-shopcart__eta { margin: 0; }
.fdn-rc__trash { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--text-subtle); font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; }
.fdn-rc__trash:hover { background: var(--bg-subtle); color: var(--danger); }

/* item lines: thumb · name+stepper · price · edit pencil */
.fdn-rc-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
.fdn-rc-item__thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--bg-subtle); }
.fdn-rc-item__info { flex: 1 1 auto; min-width: 0; }
.fdn-rc-item__info h6 { margin: 0 0 5px; font: 700 14px/1.3 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.fdn-rc-item__price { margin: 0; font: 600 13px/1.3 var(--font-sans); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fdn-rc-item__edit { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--bg-subtle); color: var(--text-muted); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fdn-rc-item__edit:hover { color: var(--brand-ink); }

/* Promotion Code row: label + code/input pill */
.fdn-rc-promo { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); border: 1.5px solid var(--border); border-radius: var(--r-pill); padding: 6px 6px 6px 18px; }
.fdn-rc-promo__label { flex: 0 0 auto; font: 700 13px/1 var(--font-sans); color: var(--text); }
.fdn-rc-promo__field { flex: 1 1 auto; min-width: 0; text-align: right; border: 0; border-radius: var(--r-pill); background: var(--bg-subtle); color: var(--text); font: 700 13px/1 var(--font-sans); padding: 11px 16px; }
.fdn-rc-promo__field::placeholder { color: var(--text-subtle); font-weight: 600; }
.fdn-rc-promo__field:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand-green); }
.fdn-rc-promo.is-applied .fdn-rc-promo__field { background: var(--brand-050); color: var(--brand-ink); letter-spacing: .03em; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.fdn-rc-promo__clear { border: 0; background: transparent; color: var(--brand-ink); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; }

/* "Do you need service?" expandable picker (its selected total becomes the
   Service Fee line) */
.fdn-rc-service { margin-top: var(--s-3); border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; }
.fdn-rc-service__head { display: flex; align-items: center; gap: var(--s-3); width: 100%; border: 0; background: var(--surface); padding: 12px 14px; cursor: pointer; text-align: left; color: var(--text); }
.fdn-rc-service__ic { font-size: 18px; color: var(--brand-ink); flex: 0 0 auto; display: inline-flex; }
.fdn-rc-service__txt { flex: 1 1 auto; font: 700 13.5px/1.3 var(--font-sans); }
.fdn-rc-service__sub { display: block; margin-top: 2px; font: 500 11.5px/1.3 var(--font-sans); color: var(--text-muted); }
.fdn-rc-service__chev { color: var(--text-subtle); flex: 0 0 auto; transition: transform .2s ease; }
.fdn-rc-service.is-open .fdn-rc-service__chev { transform: rotate(90deg); }
.fdn-rc-service__list { display: none; border-top: 1px solid var(--border); padding: 4px 14px 8px; }
.fdn-rc-service.is-open .fdn-rc-service__list { display: block; }
.fdn-rc-svc { display: flex; align-items: center; gap: var(--s-3); width: 100%; border: 0; background: transparent; padding: 10px 0; cursor: pointer; text-align: left; color: var(--text); border-bottom: 1px solid var(--border); }
.fdn-rc-svc:last-child { border-bottom: 0; }
.fdn-rc-svc__check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--on-brand); }
.fdn-rc-svc.is-on .fdn-rc-svc__check { background: var(--brand); border-color: var(--brand); }
.fdn-rc-svc__name { flex: 1 1 auto; min-width: 0; font: 600 13px/1.3 var(--font-sans); }
.fdn-rc-svc__price { flex: 0 0 auto; font: 700 13px/1.3 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* perforation — the dashed rule ALONE. The side half-circles are GONE by
   user request ("i dont want anything behind the half circles, i need it
   empty" — 2026-07-16): every painted notch (dark --rc-notch discs, then
   soft die-cuts) still read as "something behind" the bite. Do not add
   notch discs back; the rip animation is the only place a torn opening
   may show. */
.fdn-rc__perf { position: relative; height: 0; margin: var(--s-5) 0; border-top: 2px dashed var(--border-strong); }

/* bill */
.fdn-rc-totals { display: flex; flex-direction: column; gap: 2px; }
.fdn-rc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; font: 600 14px/1.6 var(--font-sans); color: var(--text-muted); }
.fdn-rc-row > b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.fdn-rc-row--grand { margin-top: 10px; padding-top: 14px; border-top: 1.5px solid var(--border); }
.fdn-rc-row--grand > span { font: 800 18px/1.2 var(--font-sans); color: var(--text); }
.fdn-rc-row--grand > b { font: 800 22px/1.2 var(--font-sans); color: var(--text); }
.fdn-rc__min, .fdn-rc__msg { margin: 10px 0 0; font: 600 12.5px/1.45 var(--font-sans); color: var(--danger-ink); }

/* receipt CHECKOUT — inside the ticket, lime fill (fills-only per the rebrand) */
.fdn-rc__checkout {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: var(--s-5); border: 0; border-radius: 15px; padding: 16px;
  background: var(--brand); color: var(--on-brand); font: 800 15px/1.2 var(--font-sans);
  cursor: pointer; text-transform: uppercase; letter-spacing: .05em;
}
.fdn-rc__checkout:hover { filter: brightness(.97); }
.fdn-rc__checkout.is-busy { opacity: .6; pointer-events: none; }
.fdn-rc__sum { font-variant-numeric: tabular-nums; }

/* =====================================================================
   S4-9 receipt-rip (rebuilt from scratch) — tapping the receipt CHECKOUT tears
   the floating bill IN TWO along the perforation, just like ripping a real
   ticket, then navigates. The top piece (head/items/promo/service) holds; the
   lower piece (.fdn-rc__stub = totals + CHECKOUT) PEELS FREE and FLIES OFF TO
   THE RIGHT while the ragged seam is uncovered LEFT→RIGHT. There is NO dark
   band, NO scrim and NO veil anywhere — what shows behind the departing stub is
   just --surface (the drawer's own paper). Driven by fdnReceiptTear(); the
   duration mirrors FDN_RIP_MS in inc/script.php. prefers-reduced-motion never
   receives the .is-tearing class, and the media block at the end is a hard
   backstop. The teeth are irregular SVG-mask silhouettes (varied heights) so
   the torn edge reads hand-made and the drop-shadow hugs it.
   (Replaces the old right→left single-stub drop with a --rc-notch opening;
   --rc-notch is now unused. The "Faleminderit, {name}" personalization is a
   separate post-order toast on the HOME screen — fdn_thanks session flag set
   by Cart::placeOrder, popped in inc/script.php.) */
.fdn-rc {
  --fdn-rip-dur: 820ms;
  --fdn-tooth-up:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12 H24 V8 L20 0 L16 9 L12 2 L8 10 L4 1 L0 7 Z' fill='%23000'/%3E%3C/svg%3E");
  --fdn-tooth-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 0 H24 V4 L20 12 L16 3 L12 10 L8 2 L4 11 L0 5 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* lower piece = the stub that tears off. Opaque paper hinged at its LEFT edge so
   the left corner lifts first, then the whole piece sweeps out to the RIGHT and
   off the drawer's right edge (= the viewport edge; the drawer is flush-right and
   fdnBillCheckout sets overflow:hidden, which clips it there). It fades only in
   the final stretch, and its leftover space collapses (max-height → 0) so the
   top part is left clean. */
.fdn-rc__stub {
  position: relative;
  background: var(--surface);
  transform-origin: left center;
  will-change: transform;
}
.fdn-rc.is-tearing .fdn-rc__stub {
  animation: fdnRipFly var(--fdn-rip-dur) cubic-bezier(.34, .12, .28, 1) forwards;
}
@keyframes fdnRipFly {
  0%   { transform: translate3d(0, 0, 0)      rotate(0deg);    opacity: 1;  max-height: 520px; visibility: visible; box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  16%  { transform: translate3d(1%, -2px, 0)  rotate(.6deg);   opacity: 1;  max-height: 520px; visibility: visible; box-shadow: -6px 9px 16px rgba(0, 0, 0, .14); }   /* left corner lifts + grabs */
  55%  { transform: translate3d(40%, 5px, 0)  rotate(4deg);    opacity: 1;  max-height: 520px; visibility: visible; box-shadow: -14px 14px 22px rgba(0, 0, 0, .12); }  /* torn free, sweeping right */
  80%  { transform: translate3d(98%, 15px, 0) rotate(7.5deg);  opacity: .5; max-height: 520px; visibility: visible; box-shadow: -18px 16px 26px rgba(0, 0, 0, .09); }  /* leaving the drawer edge */
  100% { transform: translate3d(138%, 26px, 0) rotate(11deg);  opacity: 0;  max-height: 0;     visibility: hidden;  box-shadow: 0 0 0 rgba(0, 0, 0, 0); }               /* gone off the right; footprint closes */
}

/* the seam is just an anchor now (no dark opening). Its ::before carries the top
   piece's ragged bottom edge, uncovered LEFT→RIGHT as the stub peels away. */
.fdn-rc__rip {
  position: absolute; left: 0; right: 0; top: 0; height: 0;
  pointer-events: none;
}

/* ragged BOTTOM edge of the top piece — irregular paper teeth hanging down, soft
   shadow below. Hidden until the tear, then wiped in from the left. */
.fdn-rc__rip::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: 0; height: 12px;
  background: var(--surface);
  -webkit-mask: var(--fdn-tooth-down) repeat-x top center / 24px 12px;
          mask: var(--fdn-tooth-down) repeat-x top center / 24px 12px;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .16));
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}
.fdn-rc.is-tearing .fdn-rc__rip::before {
  animation: fdnSeamReveal var(--fdn-rip-dur) cubic-bezier(.34, .12, .28, 1) forwards;
}
@keyframes fdnSeamReveal {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
  12%  { opacity: 1; clip-path: inset(0 88% 0 0);  -webkit-clip-path: inset(0 88% 0 0); }
  60%  { opacity: 1; clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0); }
}

/* ragged TOP edge of the lower piece — irregular paper teeth pointing up. Lives
   ON the stub, so it flies away with the piece it belongs to. */
.fdn-rc__tear {
  position: absolute; left: -2px; right: -2px; top: -12px; height: 12px;
  background: var(--surface);
  -webkit-mask: var(--fdn-tooth-up) repeat-x bottom center / 24px 12px;
          mask: var(--fdn-tooth-up) repeat-x bottom center / 24px 12px;
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, .14));
  opacity: 0; pointer-events: none; transition: opacity 120ms ease;
}
.fdn-rc.is-tearing .fdn-rc__tear { opacity: 1; }

/* the perforation gives way: the dashed line fades as the paper separates */
.fdn-rc__perf { transition: border-top-color 200ms ease; }
.fdn-rc.is-tearing .fdn-rc__perf { border-top-color: transparent; }

/* CHECKOUT stays locked while the rip plays (JS also guards via .is-busy +
   window.fdnRipBusy) */
.fdn-rc.is-tearing .fdn-rc__checkout { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  /* hard backstop — no rip ever; JS already skips straight to checkout */
  .fdn-rc__stub, .fdn-rc__rip::before, .fdn-rc__tear,
  .fdn-rc__perf { transition: none !important; }
  .fdn-rc.is-tearing .fdn-rc__stub { animation: none !important; transform: none !important; opacity: 1 !important; max-height: none !important; visibility: visible !important; box-shadow: none !important; }
  .fdn-rc.is-tearing .fdn-rc__rip::before { animation: none !important; opacity: 0 !important; }
  .fdn-rc.is-tearing .fdn-rc__tear { opacity: 0 !important; }
}

/* broken thumbnails degrade to a neutral tile (see fdnImgFallback) */
.fdn-img--broken { background: var(--bg-subtle) !important; }
.fdn-img--broken::after {
  content: "\F317"; font-family: "bootstrap-icons"; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 16px;
}

/* S4-2: checkout reminder for a promo saved in the cart receipt */
.fdn-co__promohint {
  display: flex; align-items: center; gap: 10px; margin-top: var(--s-3);
  border: 1.5px solid var(--brand-green); border-radius: 14px; background: var(--bg-subtle);
  padding: 12px 14px; font: 600 13px/1.4 var(--font-sans); color: var(--text);
}
.fdn-co__promohint i { color: var(--brand-ink); font-size: 16px; flex: 0 0 auto; }

/* ==================== S3-7 · checkout redesign (reference layout) ====================
   Delivery-details / options / payment cards left, collapsible cart summary +
   hold-to-order right. Legacy hooks (.asap/.delivery, .by_driver/.take_away/
   .dine_in, #payment_method, #rider_tip_div, total spans) all keep working —
   these classes only re-skin the elements around them. */

/* rows in the Delivery details card */
.fdn-co__row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; }
.fdn-co__row--note { border-top: 1px solid var(--border); }
.fdn-co__rowic { flex: 0 0 34px; height: 34px; display: grid; place-items: center; font-size: 20px; color: var(--text); }
.fdn-co__rowtxt { flex: 1 1 auto; min-width: 0; }
.fdn-co__rowtxt strong { display: block; font: 700 15px/1.3 var(--font-sans); color: var(--text); }
.fdn-co__rowtxt p { margin: 0; font: 500 14px/1.4 var(--font-sans); color: var(--text-muted); overflow-wrap: anywhere; }
.fdn-co__edit {
  flex: 0 0 auto; border: 0; background: var(--bg-subtle); color: var(--text);
  font: 700 13px/1 var(--font-sans); padding: 10px 16px; border-radius: 999px; cursor: pointer;
}
.fdn-co__edit:hover, .fdn-co__edit.is-open { background: var(--border); }
.fdn-co__manage { padding: var(--s-2) 0 var(--s-3); border-top: 1px dashed var(--border); }
.fdn-co__note {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; resize: none;
  font: 500 14px/1.5 var(--font-sans); color: var(--text); padding: 7px 0 0; min-height: 32px; overflow: hidden;
}
.fdn-co__note::placeholder { color: var(--text-muted); }
/* S4-3 a11y: keyboard users need the ring on the order-note field; scoped to
   :not(:focus-visible) keeps the clean look for mouse focus. */
.fdn-co__note:focus:not(:focus-visible) { outline: none; }
.fdn-co__divider { height: 1px; background: var(--border); margin: var(--s-4) 0; }

/* the delivery-options card holds TWO distinct choices — the METHOD (mode
   pills) and the TIME (option cards). Caption each group and rule a divider
   between them so they don't blur together (user: "me korrier/pick up/rezervo
   are not well separated from standarde/planifiko"). */
.fdn-co__optgroup-label {
  display: block; margin: 0 0 var(--s-3);
  font: 700 12px/1.2 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-subtle);
}
.fdn-co__optdivider { height: 1px; background: var(--border); margin: var(--s-5) 0; }

/* delivery mode pills (only rendered when the venue offers >1 mode) — equal
   widths so 2 or 3 modes share one clean row (no lone wrapped pill). */
/* .checkout-tab (style.css) sets the <ul> to flex-wrap:wrap and each .nav-item
   to flex-grow:unset/flex-basis:fit-content at equal specificity — qualify with
   .checkout-tab so THESE win and the pills stay one equal-width row. */
.fdn-co__modes.checkout-tab { display: flex; gap: 10px; margin: 0; flex-wrap: nowrap; }
.fdn-co__modes.checkout-tab .nav-item { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
.fdn-co__modes { display: flex; gap: 10px; margin: 0; flex-wrap: nowrap; }
/* legacy .checkout-tab .nav-link (style.css) is a tall column card with a
   gradient active state — flatten it back to a compact pill */
.fdn-co__modes .nav-link {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 12px 14px;
  height: auto; box-shadow: none; color: var(--text);
  font: 700 13.5px/1 var(--font-sans); background: var(--surface);
}
.fdn-co__modes .nav-link span { margin: 0; font-size: 13.5px; font-weight: 700; color: inherit; }
.fdn-co__modes .nav-item { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
.fdn-co__modes .nav-link.active { border-color: var(--text); background: var(--bg-subtle); color: var(--text); width: 100%; box-shadow: inset 0 0 0 1px var(--text); }
.fdn-co__modes .nav-link.active span { color: var(--text); }

/* delivery option cards (Standard = .asap, Schedule = .delivery) */
.fdn-co__opts { display: flex; flex-direction: column; gap: var(--s-3); }
.fdn-co-opt {
  display: flex; align-items: center; gap: var(--s-3); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-4); color: var(--text); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fdn-co-opt:hover { border-color: var(--text-muted); color: var(--text); }
.fdn-co-opt.active { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.fdn-co-opt__ic { font-size: 20px; width: 28px; text-align: center; flex: 0 0 auto; }
.fdn-co-opt__txt { display: flex; flex-direction: column; min-width: 0; }
.fdn-co-opt__txt strong { font: 700 15px/1.3 var(--font-sans); }
.fdn-co-opt__txt small { font: 500 13px/1.4 var(--font-sans); color: var(--text-muted); }

/* payment option rows — the real select stays in the DOM for the legacy JS */
.fdn-co__payselect {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px;
}
.fdn-co__payopts { display: flex; flex-direction: column; gap: var(--s-3); }
.fdn-co-pay {
  display: flex; align-items: center; gap: var(--s-3); border: 1.5px solid var(--border);
  background: var(--surface); border-radius: var(--r-lg); padding: var(--s-4);
  font: 600 15px/1.3 var(--font-sans); color: var(--text); cursor: pointer; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fdn-co-pay:hover { border-color: var(--text-muted); }
.fdn-co-pay.is-on { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }

/* courier tip row (payment card) */
.fdn-co__tip { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); border-top: 1px solid var(--border); margin-top: var(--s-4); padding-top: var(--s-4); }
.fdn-co__tip h5 { margin: 0; font: 600 14px/1.3 var(--font-sans); color: var(--text); }

/* cart summary */
.fdn-co__sumhead {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; border: 0; background: transparent;
  padding: 0 0 var(--s-3); font: 800 16px/1.3 var(--font-sans); color: var(--text); cursor: pointer; text-align: left;
}
.fdn-co__sumhead > i:first-child { font-size: 20px; }
.fdn-co__chev { margin-left: auto; transition: transform .2s ease; }
.fdn-co__sumhead.is-closed .fdn-co__chev { transform: rotate(180deg); }
.fdn-co-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.fdn-co-item__img { width: 52px; height: 52px; border-radius: var(--r-md); object-fit: cover; background: var(--bg-subtle); flex: 0 0 auto; }
.fdn-co-item__txt { flex: 1 1 auto; min-width: 0; }
.fdn-co-item__txt h6 { margin: 0; font: 700 14px/1.35 var(--font-sans); color: var(--text); }
.fdn-co-item__txt p { margin: 2px 0 0; font: 600 13px/1.3 var(--font-sans); color: var(--text-muted); }
.fdn-co-qty { display: inline-flex; align-items: center; gap: 2px; background: var(--bg-subtle); border-radius: 999px; padding: 3px; }
.fdn-co-qty .incdec, .fdn-co-item .incdec {
  width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--surface);
  color: var(--text); font-size: 16px; line-height: 1; padding: 0; cursor: pointer; box-shadow: var(--shadow-sm);
}
.fdn-co-qty .incdec:hover { background: var(--border); }
.fdn-co-qty__n { width: 30px; border: 0; background: transparent; text-align: center; font: 700 14px/1 var(--font-sans); color: var(--text); pointer-events: none; }
.fdn-co__totaltitle { font-size: 18px; margin-bottom: var(--s-3); }

/* hold-to-order (physics: rAF fill on press, ~3× spring-back on release,
   wobble hint on quick taps — see checkout.php) */
.fdn-hold {
  position: relative; overflow: hidden; width: 100%; min-height: 54px; border: 0;
  border-radius: var(--r-lg); background: var(--brand); color: var(--on-brand);
  font: 800 16px/1.2 var(--font-sans); cursor: pointer; margin-top: var(--s-4);
  touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .12s ease;
}
.fdn-hold:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.fdn-hold.is-holding { transform: scale(.985); }
.fdn-hold__fill {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .28);
  transform-origin: left center; transform: scaleX(0); pointer-events: none;
}
.fdn-hold__label { position: relative; z-index: 1; display: inline-flex; gap: 6px; align-items: center; }
.fdn-hold.is-done { pointer-events: none; opacity: .92; }
.fdn-hold.is-done .fdn-hold__fill { transform: scaleX(1); }
.fdn-hold.is-hinting { animation: fdn-hold-wobble .4s ease; }
@keyframes fdn-hold-wobble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.fdn-hold__hint { margin: 8px 0 0; text-align: center; font: 500 12px/1.4 var(--font-sans); color: var(--text-muted); opacity: 0; transition: opacity .2s ease; }
.fdn-hold__hint.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fdn-hold, .fdn-co__chev, .fdn-co-opt, .fdn-co-pay { transition: none; }
  .fdn-hold.is-hinting { animation: none; }
  .fdn-hold__hint { opacity: 1; }
}

/* ==========================================================================
   S3-4 — no flash of unstyled carousel in modals. Owl carousels that were
   initialized while their modal was display:none have an UNSIZED stage
   (no inline width) until the refresh on show.bs.modal (inc/script.php)
   runs — during that window the slides would paint as raw stacked markup
   ("the old design pops out"). An unsized stage is never allowed to paint.
   ========================================================================== */
.modal .owl-carousel .owl-stage:not([style*="width"]) {
  visibility: hidden;
}

/* ==========================================================================
   S3-8: cart drawer BILL / preorder stage (reference mock)
   "Go to checkout" flips .fdn-cart--bill on the drawer body: the drawer
   becomes a one-shop receipt — shop head + item rows stay (same DOM, same
   steppers/handlers), parked shops and the services upsell step aside, and
   the .fdn-cartbill footer (dashed rule + fee breakdown + CHECKOUT) shows.
   Token-driven throughout so html.fdn-dark restyles it for free.
   ========================================================================== */
.fdn-billback {
  display: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  cursor: pointer;
  margin-left: calc(-1 * var(--s-2));
}
.fdn-billback:hover,
.fdn-billback:focus { background: var(--bg-subtle); color: var(--text); }

.fdn-cartbill { display: none; }

/* bill stage on: back arrow swaps in for the close x, receipt footer shows */
.fdn-cart--bill .fdn-billback { display: inline-flex; }
.fdn-cart--bill .fdn-cartclose { display: none; }
.fdn-cart--bill .fdn-cartbill { display: block; }

/* the bill is ONE shop's receipt: parked shop sections, the services
   upsell, the add-item link and the stage-1 CTA leave the view (all still
   there on the cart list a back-arrow tap away) */
.fdn-cart--bill .fdn-shopcart--parked,
.fdn-cart--bill [id="accordionneedservice"],
.fdn-cart--bill .fdn-cart-cta,
.fdn-cart--bill .add-location-btn.text-right { display: none; }

/* the shop head's inline "Sub Total : x" line moves into the breakdown
   (scoped to the headbtn so item-row .product-select-name prices survive) */
.fdn-cart--bill .fdn-shopcart__headbtn .product-select-name p:not(.fdn-shopcart__eta) { display: none; }

/* receipt footer: dashed rule, label/amount rows, strong total, CHECKOUT */
.fdn-cartbill::before {
  content: "";
  display: block;
  margin: var(--s-6) 0 var(--s-5);
  border-top: 2px dashed var(--border-strong);
}
.fdn-cartbill__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  margin: 0 0 var(--s-3);
  font-size: 14px;
  color: var(--text);
}
.fdn-cartbill__row > span { color: var(--text-muted); }
.fdn-cartbill__row b { font-weight: 600; white-space: nowrap; }
.fdn-cartbill--noserv .fdn-cartbill__row--serv,
.fdn-cartbill--nopromo .fdn-cartbill__row--promo { display: none; }
.fdn-cartbill__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
/* doubled class: out-specificizes style.css .btn sizing without !important */
.fdn-cartbill__go.fdn-cartbill__go {
  display: block;
  width: 100%;
  margin-top: var(--s-6);
  padding: 14px var(--s-5);
  border-radius: var(--r-pill);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}

/* an empty cart renders the shop-head logo with src="" — hide the broken-
   image glyph until update_cart() fills a real url after the first add */
#vendor_image[src=""] { visibility: hidden; }

/* ==========================================================================
   S3-9 — Uber-style compact discovery (user request 2026-07-09, Uber Eats
   reference): the feed was a variable-width horizontal swipe (~3.x cards of
   280px) that sprawled full-bleed on wide screens and read as "too many
   restaurants, not eye-pleasing". Match Uber: cap the content width, show
   EXACTLY 4 restaurant cards per rail on desktop (3 on tablet), a clean
   4-column category grid, and clearer air between sections. CSS-only — no
   markup, no hooks, no JS touched (the arrow pager already scrolls ~1 page).
   ========================================================================== */

/* 1 · cap the content so it stays centered on big monitors (2026-07-21 user:
      "spread to be 2000px, exactly like Uber Eats" — 2000px wide, centered).
      Discovery layout (.fdn-layout capped from ≥992 above) + the standalone
      grid pages, here for wide screens. */
@media (min-width: 1500px) {
  .fdn-layout { max-width: 2000px; margin-inline: auto; }
  .fdn-page-headrow,
  .container-fluid > .fdn-grid { max-width: 2000px; margin-inline: auto; }
}

/* 2 · rails: exactly 4 cards across the rail's visible width; the rest
      scroll (arrows page through). Percentage basis resolves against the
      rail's visible box, so 4 show and overflow scrolls — the Uber feel.
      Below 992 the fixed-width swipe (S2-4r) stays. */
@media (min-width: 992px) {
  .fdn-rail { gap: var(--s-4); }
  .fdn-rail .fdn-card {
    width: calc((100% - 3 * var(--s-4)) / 4);
    min-width: 0;
    max-width: none;
  }
}
/* tablet (sidebar hidden 768-991): 3 across reads better than a stretched 4 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .fdn-rail .fdn-card {
    width: calc((100% - 2 * var(--s-3)) / 3);
    min-width: 0;
    max-width: none;
  }
}

/* 3 · category grid (clicked-category view + listing/search pages): a clean
      4-column grid instead of auto-fill 5, so cards breathe like the rails */
@media (min-width: 992px) {
  .fdn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
}

/* 4 · clearer division between sections (S2-4q had tightened this to 16px;
      the reference gives each category real breathing room) */
.fdn-main { gap: var(--s-8); }
#fdnFeed { display: flex; flex-direction: column; gap: var(--s-8); }
/* Discovery pane crossfade (2026-07-21, user: category switch "bugs for a
   second"): #fdnFeed ↔ #fdnCuisineSection no longer flip display instantly —
   the swap JS (inc/home-discovery.php fdnXfade) fades the visible pane out,
   swaps while nothing shows, then fades the new one in. */
#fdnFeed,
#fdnCuisineSection { transition: opacity 150ms ease; }
#fdnFeed.fdn-pane-fade,
#fdnCuisineSection.fdn-pane-fade { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #fdnFeed,
  #fdnCuisineSection { transition: none; }
}

/* ==========================================================================
   S3-10 — cart drawer polish + dark-mode "no neon-white glow"
   (user 2026-07-09, ref: foodini-concept-design deck §06 Cart / §Dark mode).

   (1) The cart read as box-in-box-in-box: Bootstrap's accordion active-blue
       bled onto the shop-head / promo / service buttons, style.css stacked a
       grey #f2f2f2 inner panel and white #fff item cards (+ a 30px shadow),
       and the S2-4u green outline leaked onto the NESTED promo/service
       accordion-items. Flatten to ONE green-outlined shop card holding
       transparent, token-driven rows — the reference's clean cart.

   (2) Dark mode showed "neon white" two ways: those hardcoded style.css light
       backgrounds never flipped (white cards, invisible text), and
       selected/active accents keyed off var(--text) — near-black in light but
       near-WHITE in dark — as borders, fills and 0 0 0 1px glow rings.
       Part (1) flips the surfaces for free; the rules below retire the
       remaining white accents to the calm brand ink / green tint. No glow.

   Light mode changes ONLY through the (1) de-clutter, which it needed too;
   every legacy hook (quantity_*, remove(), applyPromocode, totals) is intact.
   ========================================================================== */

/* (1) cart de-clutter — both themes -------------------------------------- */
/* kill Bootstrap's accordion active-blue + focus ring inside the cart body
   (the shop-head / promo / service buttons carry no .collapsed class) */
.fdn-cartbody .accordion-button,
.fdn-cartbody .accordion-button:not(.collapsed),
.fdn-cartbody .accordion-button:focus {
  background: transparent;
  box-shadow: none;
  color: var(--text);
}
/* shop-head + item rows go transparent — the green shop card is the only
   frame (style.css skinned .product-select-section as a white slab w/ shadow) */
.fdn-cartbody .product-select-section { background: transparent; box-shadow: none; }
.fdn-cartbody #collapseproduct .product-select-section { border-color: var(--border); }
/* the stepper's legacy outer wrapper (style.css #EEEEEE pill) double-boxed the
   token-driven S2-4u .quantity pill — flatten it so only .quantity shows
   (in dark the #EEEEEE stayed a bright white pill; in light it was a redundant
   ring around the real pill) */
.fdn-cartbody .plastic-set-add-remove { background: transparent; padding: 0; }
/* the legacy grey #f2f2f2 box behind the item list → transparent */
.fdn-cartbody #accordionproduct .accordion-item:last-of-type .accordion-collapse {
  background: transparent;
}
/* the S2-4u green outline belongs to the SHOP card only — strip it and its
   padding from the nested promo / service accordion-items so they read as the
   quiet bordered pills S2-4u already gives .offer-box-main, not green boxes */
.fdn-cartbody #collapseproduct .accordion-item {
  border: 0;
  background: transparent;
  padding: 0;
  overflow: visible;
}

/* (2) dark mode — retire every near-white var(--text) accent ------------- */
/* start-shopping pill was background:var(--text) (→ white) with a #000 hover
   (→ vanishes on the dark ground); brand green matches the reference CTAs */
html.fdn-dark .fdn-cart-empty__btn { background: var(--brand); color: var(--on-brand); }
html.fdn-dark .fdn-cart-empty__btn:hover,
html.fdn-dark .fdn-cart-empty__btn:focus { background: var(--brand-hover); color: var(--on-brand); }
/* appearance toggle active chip was a bright near-white pill */
html.fdn-dark .fdn-theme-toggle button.is-on { background: var(--brand); color: var(--on-brand); }
/* checkout delivery / payment option cards had a white border + a white
   0 0 0 1px glow ring when selected — the literal "glow" the user flagged */
html.fdn-dark .fdn-co-opt.active,
html.fdn-dark .fdn-co-pay.is-on {
  border-color: var(--brand-ink);
  box-shadow: none;
  background: var(--brand-050);
}
/* delivery-type / timing tabs + mode pills + address chip hover: white → ink */
html.fdn-dark .checkout-main .checkout-tab .nav-link.active,
html.fdn-dark .checkout-main .delivery-timing .nav-link.active { border-color: var(--brand-ink); }
html.fdn-dark .fdn-co__modes .nav-link.active { border-color: var(--brand-ink); background: var(--brand-050); }
html.fdn-dark .fdn-co__chip:hover { border-color: var(--brand-ink); }

/* ==========================================================================
   S3-8 — deals rail "stand out" pass (user 2026-07-09: make #fdn-offers pop;
   "maybe a light green panel behind each offer"). Chosen from a 6-way design
   panel + critic: the SOFT LIME BAND. The whole deals block sits on its own
   rounded --brand-050 panel so it lifts off the plain-white feed; white cards
   float on the tint (shadow-md + hover lift) each flagged with a lime "%"
   savings chip, and the header gains a lime "%" badge + a green tagline
   (.fdn-rail-sub). All token-based, so in DARK theme --brand-050 flips to
   deep green and the whole thing becomes the dramatic dark band automatically
   (the look from the reference screenshot). Loads after the S2-13 rules and
   the dark block (4203+), so #fdn-offers specificity + source order win.
   Every hook preserved; color-mix accents each carry a plain-token fallback.
   ========================================================================== */

/* the band */
#fdn-offers {
  position: relative;
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: var(--brand-050); /* fallback where color-mix is unsupported */
  background: radial-gradient(140% 120% at 50% -30%,
              color-mix(in srgb, var(--brand) 16%, var(--brand-050)) 0%,
              var(--brand-050) 62%);
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--brand-ink) 18%, transparent);
  box-shadow: var(--shadow-sm);
}

/* header: "%" badge + title on row 1, green tagline on row 2 */
#fdn-offers .fdn-rail-head, #fdn-dishdeals .fdn-rail-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--s-3);
  row-gap: 2px;
  margin-bottom: var(--s-4);
}
#fdn-offers .fdn-rail-title, #fdn-dishdeals .fdn-rail-title {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0;
  font: 800 clamp(20px, 2.4vw, 27px)/1.15 var(--font-sans);
  color: var(--text);
  letter-spacing: -0.02em;
}
#fdn-offers .fdn-rail-title::before { /* lime "%" deal badge */
  content: "%";
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 1.8em; height: 1.8em;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  font: 900 0.6em/1 var(--font-sans);
  box-shadow: var(--shadow-sm);
}
#fdn-offers .fdn-rail-sub, #fdn-dishdeals .fdn-rail-sub {
  grid-column: 1; grid-row: 2;
  margin: 0;
  font: 600 clamp(13px, 1.4vw, 15px)/1.4 var(--font-sans);
  color: var(--brand-ink);
}

/* cards: white, lifted off the tint, with a corner "%" savings chip */
#fdn-offers .fdn-banner.fdn-promo, #fdn-dishdeals .fdn-banner.fdn-promo {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--brand-ink) 10%, var(--border));
  box-shadow: var(--shadow-md);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
#fdn-offers .fdn-banner.fdn-promo:hover, #fdn-dishdeals .fdn-banner.fdn-promo:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
#fdn-offers .fdn-banner.fdn-promo::before { /* corner "%" saving flag */
  content: "%";
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  z-index: 2;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font: 900 12px/1 var(--font-sans);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

/* loading slide stays a quiet placeholder (no chip, no lift) */
#fdn-offers .fdn-banner.fdn-promo.skel, #fdn-dishdeals .fdn-banner.fdn-promo.skel {
  background: var(--bg-subtle);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
#fdn-offers .fdn-banner.fdn-promo.skel::before { display: none; }
#fdn-offers .fdn-banner.fdn-promo.skel:hover, #fdn-dishdeals .fdn-banner.fdn-promo.skel:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* dark theme: --brand-050 already flips to deep green (the band goes dark);
   just brighten the rounded edges so they read. Existing 4203 rule keeps the
   promo cards white for the on-white artwork. */
html.fdn-dark #fdn-offers {
  border-color: color-mix(in srgb, var(--brand-ink) 24%, transparent);
}
html.fdn-dark #fdn-offers .fdn-banner.fdn-promo, html.fdn-dark #fdn-dishdeals .fdn-banner.fdn-promo {
  border-color: color-mix(in srgb, var(--brand-ink) 16%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #fdn-offers .fdn-banner.fdn-promo, #fdn-dishdeals .fdn-banner.fdn-promo { transition: none; }
  #fdn-offers .fdn-banner.fdn-promo:hover, #fdn-dishdeals .fdn-banner.fdn-promo:hover { transform: none; }
}

@media (max-width: 575.98px) {
  #fdn-offers {
    border-radius: var(--r-lg);
    padding: var(--s-4) var(--s-3) var(--s-3);
  }
  #fdn-offers .fdn-rail-head, #fdn-dishdeals .fdn-rail-head { margin-bottom: var(--s-3); column-gap: var(--s-2); }
  #fdn-offers .fdn-rail-title, #fdn-dishdeals .fdn-rail-title { font-size: 19px; }
  #fdn-offers .fdn-rail-sub, #fdn-dishdeals .fdn-rail-sub { font-size: 12.5px; }
  #fdn-offers .fdn-banner.fdn-promo::before {
    top: var(--s-2); right: var(--s-2);
    height: 20px; min-width: 20px; font-size: 11px;
  }
}

/* ==========================================================================
   S4-1: independent per-restaurant cart sections. Each .fdn-shopcart is one
   restaurant's own cart (no live/parked asymmetry); the footer carries a
   per-shop item subtotal + its own "Go to checkout". Reuses the S3-5
   .fdn-shopcart / .fdn-pqty / .fdn-shopcart__go styles above.
   ========================================================================== */
.fdn-cart-shops { display: flex; flex-direction: column; gap: var(--s-4); }
.fdn-shopcart__foot { margin-top: var(--s-3); }
.fdn-shopcart__subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font: 600 14px/1.3 var(--font-sans); color: var(--text);
}
.fdn-shopcart__subtotal b { font-weight: 800; white-space: nowrap; }
.fdn-shopcart__msg {
  margin: 0 0 var(--s-2); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--danger-050); color: var(--danger-ink);
  font: 600 12.5px/1.35 var(--font-sans);
}

/* ==========================================================================
   S4-2: "restaurant closed" sheet (application/modules/web/views/restaurant-menu.php)
   Replaces the off-brand red-X swal + red danger banner that fired when the
   checkout gate refused a closed restaurant. A calm, centred card in the
   design language: soft tinted clock badge, today's hours, one brand CTA.
   ========================================================================== */
.fdn-closedsheet .modal-dialog { max-width: 380px; }
.fdn-closedsheet__card {
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding: var(--s-8) var(--s-6) var(--s-6);
  text-align: center;
  align-items: center;
}
.fdn-closedsheet__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--warning-050); color: var(--warning-ink);
  font-size: 30px; line-height: 1;
}
.fdn-closedsheet__title {
  margin: 0 0 var(--s-2);
  font: 800 20px/1.25 var(--font-sans); color: var(--text);
}
.fdn-closedsheet__text {
  margin: 0; max-width: 30ch;
  font: 500 14px/1.5 var(--font-sans); color: var(--text-muted);
}
.fdn-closedsheet__hours {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: var(--s-4) 0 0; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--brand-050); color: var(--brand-ink);
  font: 700 13.5px/1 var(--font-sans);
}
.fdn-closedsheet__hours .bi { font-size: 15px; }
.fdn-closedsheet__btn {
  margin-top: var(--s-6); width: 100%;
  padding: var(--s-3) var(--s-5);
  border: 0; border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  font: 800 15px/1 var(--font-sans);
  cursor: pointer;
  transition: background .15s ease;
}
.fdn-closedsheet__btn:hover,
.fdn-closedsheet__btn:focus-visible { background: var(--brand-hover); }

/* ==========================================================================
   S3-11 / S4-4 / S4-6 — appearance switch as a food-delivery "day -> night run".
   (S3-11 2026-07-09: scooter drives light<->dark. S4-4: retro Vespa + roomier.
    S4-6 2026-07-09: "make it fit the theme better, it looks very out of place ...
    make it less buffy" — so: (a) the NIGHT sky now uses the app's dark-olive
    ramp (#1B2416 -> #232C19) instead of navy, so the pill BLENDS into the dark
    drawer instead of reading as a foreign blue weather-widget; a subtle rim +
    soft shadow keep it legible as a control; (b) the scooter is a FLATTER,
    cleaner flat-icon silhouette (no gloss / drop-shadow), the brand-green
    delivery box kept as the one accent the user likes; (c) the pill slimmed
    100x54 -> 88x46. Day sky is a soft near-white blue so it stays unobtrusive
    on the white UI.) Whole scene still driven off html.fdn-dark (zero per-switch
    JS); fdnThemeToggle() keeps its leading-edge throttle.
    (S4-6's "inline SVG fills, drawer-only" note is superseded: S4-13 below moved
    the fills onto classes, and the account rail + footer include the partial too.)
   ========================================================================== */
/* S4-13 2026-07-15: user supplied a reference icon — a COURIER RIDING the
   scooter — and asked for "white with green by day, dark and green at night",
   plus "not so chubby vertically, a little longer horizontally": pill
   88x46 -> 96x40, and the scooter's colours moved OFF inline SVG fills onto the
   .sc-* palette below so the icon can invert with the theme. Green is the one
   constant (rider + box + fender) in both palettes. Sun/moon shrank into the top
   corners so the now-taller rider passes cleanly under them at BOTH ends of the
   ride; stars moved to the left half, which the scooter vacates at night.
   NB the switch is no longer drawer-only: the account rail (S4-9) and the footer
   settings row include the same partial, so this block styles every copy. */
.fdn-appearance {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(180deg, #eef5fb 0%, #dcebf7 100%); /* soft day sky */
  box-shadow: inset 0 0 0 1px rgba(28,48,66,.10), 0 1px 3px rgba(15,23,42,.14);
  -webkit-tap-highlight-color: transparent;
  transition: background .46s ease, box-shadow .46s ease;
}
html.fdn-dark .fdn-appearance {
  /* app dark-olive ramp so the pill blends into the drawer; rim keeps it legible */
  background: linear-gradient(180deg, #1B2416 0%, #232C19 100%);
  box-shadow: inset 0 0 0 1px rgba(226,240,205,.16), 0 1px 4px rgba(0,0,0,.45);
}
.fdn-appearance:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.fdn-appearance__scene { position: absolute; inset: 0; display: block; }

/* sun — warm yellow top-left, only in the day */
.fdn-appearance__sun {
  position: absolute; left: 6px; top: 2.5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #FFC53D;
  box-shadow: 0 0 6px 1px rgba(255,197,61,.5);
  transition: opacity .4s ease, transform .46s ease;
}
html.fdn-dark .fdn-appearance__sun { opacity: 0; transform: translateY(-9px) scale(.5); }

/* moon — a true crescent (offset inset shadow carves it), only at night */
.fdn-appearance__moon {
  position: absolute; right: 6px; top: 3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: transparent;
  box-shadow: inset -4px -1px 0 0 #EDF2DB;
  opacity: 0; transform: translateY(6px) scale(.55) rotate(-10deg);
  transition: opacity .4s ease, transform .46s ease;
}
html.fdn-dark .fdn-appearance__moon { opacity: 1; transform: translateY(0) scale(1) rotate(-10deg); }

/* stars — a few dots, only at night */
.fdn-appearance__stars { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
html.fdn-dark .fdn-appearance__stars { opacity: 1; }
.fdn-appearance__stars::before,
.fdn-appearance__stars::after { content: ""; position: absolute; border-radius: 50%; background: #EDF2DB; }
/* stars sit in the LEFT half — the half the scooter vacates when it parks at
   the moon, so they are never driven over */
.fdn-appearance__stars::before {
  width: 2.4px; height: 2.4px; left: 14px; top: 8px;
  box-shadow: 11px 8px 0 -0.4px #EDF2DB, -3px 16px 0 -0.8px #EDF2DB;
}
.fdn-appearance__stars::after { width: 1.8px; height: 1.8px; left: 33px; top: 11px; opacity: .85; }

/* scooter — the sliding knob; rests left (day), drives right (night) */
.fdn-appearance__scooter {
  position: absolute; left: 3px; bottom: 1px;
  width: 40px; height: 33.3px;
  transform: translateX(0);
  transition: transform .46s cubic-bezier(.5,.15,.2,1);
}
/* stops short of the right edge on purpose — it parks NEXT to the moon, not
   under it (the rider is tall enough to collide with it otherwise) */
html.fdn-dark .fdn-appearance__scooter { transform: translateX(44px); }
.fdn-appearance__scooter svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* S4-13 scooter palette — DAY: white body, dark ink, green rider/box/fender. */
.fdn-appearance__scooter {
  --sc-fill: #FFFFFF;   /* body panels + wheel interiors */
  --sc-line: #2E3440;   /* ink: outlines, tyres, seat, grip, rack, hubs */
  --sc-green: #8DC63F;  /* brand green — constant across both themes */
}
/* NIGHT: the same icon inverted — dark body, light ink, green untouched.
   The body goes darker than the pill's own sky ramp and the ink goes pale so
   the silhouette still reads against it (a dark body + dark ink would vanish). */
html.fdn-dark .fdn-appearance__scooter {
  --sc-fill: #141C0C;
  /* a dimmed sage, not a bright cream: pale ink GLOWS against the olive sky and
     the icon stops reading as "dark" at all. It still has to stay clearly
     lighter and greyer than --sc-green, though — the ink is what separates the
     rider's limbs from each other, so anything nearer the green blurs them. */
  --sc-line: #AFC495;
}
/* NB stroke-width is deliberately NOT set here — each shape carries its own as
   an SVG presentation attribute, and any stroke-width in CSS would override
   every one of them (CSS beats presentation attributes). */
.fdn-appearance__scooter .sc-f { fill: var(--sc-fill); }
.fdn-appearance__scooter .sc-l { fill: var(--sc-line); }
.fdn-appearance__scooter .sc-o { stroke: var(--sc-line); stroke-linejoin: round; }
.fdn-appearance__scooter .sc-os { fill: none; stroke: var(--sc-line); stroke-linecap: round; }
.fdn-appearance__scooter .sc-g { fill: var(--sc-green); }
.fdn-appearance__scooter .sc-gs { fill: none; stroke: var(--sc-green); stroke-linecap: round; }
.fdn-appearance__scooter svg * { transition: fill .4s ease, stroke .4s ease; }

@media (prefers-reduced-motion: reduce) {
  .fdn-appearance, .fdn-appearance * { transition: none !important; }
}

/* ==========================================================================
   RAIL ARROW VISIBILITY (2026-07-09) — reverted to the ORIGINAL edge-overlay
   arrows (base .fdn-rail-btn rules near the top of this file are unchanged);
   the earlier S3-11 header-relocation / paired-nav treatment is gone. The
   pager JS in inc/home-discovery.php now simply toggles .fdn-rail-btn--gone
   per arrow by scroll position: at the start only the right arrow shows, at
   the end only the left, both in the middle, neither when the rail fits.
   Only this one hide switch is needed. !important beats the >=768 inline-flex
   rule that reveals the arrows on desktop.
   ========================================================================== */
.fdn-rail-btn--gone { display: none !important; }


/* ==========================================================================
   Home header search centering (user 2026-07-09: "move the search to be at the
   centre"). The address chip was moved next to the brand (markup) so the search
   pill can sit dead-centre of the bar; a 1fr/auto/1fr grid centres it between
   equal side columns. The address becomes a compact pin+caret LOCATION BUTTON
   here — the full "Adresa e d1rges1s" text + a centred wide search cannot both
   fit at ~1280 without overlap — it still opens the address modal on click.
   Scoped to .fdn-nav--home (only the home headers carry it) so the /search page
   header is untouched. Desktop only (>=992); the mobile header is unchanged.
   ========================================================================== */
@media (min-width: 992px) {
  .returning_user_home_header .fdn-nav--home {
    display: grid !important;              /* beat bootstrap .d-lg-flex */
    /* Uber layout (user 2026-07-21: "move the address + search more to the
       LEFT, remove the panel behind the address"): brand | (address + search,
       FILLING) | nav. The middle column FILLS so the address + search hug the
       left right after the logo and the search pill spans toward the cart —
       no longer a centred 1fr/auto/1fr. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s-4);
    /* centre the whole header row to the SAME 2000px column as the body */
    max-width: 2000px;
    margin-inline: auto;
  }
  .fdn-nav--home .fdn-brandrow { justify-self: start; gap: var(--s-3); min-width: 0; }
  /* fill the middle column, left-aligned: address sits first, search grows */
  .fdn-nav--home .search-boxes { justify-self: stretch; margin: 0; width: auto; }
  .fdn-nav--home .search-location.custom-search-input { max-width: none; width: 100%; }
  .fdn-nav--home .main-header-nav { justify-self: end; margin-left: 0; }
  .fdn-nav--home .fdn-brandrow .address_detail { display: none; }

  /* Uber-style address: no pill/circular panel behind it — just the pin +
     name + caret as plain text (user 2026-07-21: "remove the circular panel
     behind the address, just leave the name"). The pill lived on BOTH the
     .accordion-button (~line 396) AND .my_address_header (~line 1256, doubled
     class) — strip both. The search keeps its own pill. */
  .returning_user_home_header .fdn-nav--home #accordionaddress .accordion-button,
  .returning_user_home_header .fdn-nav--home #accordionaddress .my_address_header {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-height: 0;
  }
}

/* ==========================================================================
   CMS / legal content pages — about, terms, privacy (S3.5)
   Long-form reading layout on the type scale (DESIGN-SYSTEM §3). The body is
   admin-authored HTML pulled from tbl_cms_pages, so rules target generic
   descendants (h*, p, ul, a, table…). Token-driven → dark mode for free.
   Scoped to .fdn-cms so the legacy .page-title / .main-title rules can't leak.
   ========================================================================== */
.fdn-cms {
  max-width: 760px;                 /* ~68ch — comfortable measure */
  margin: 0 auto;
  padding: var(--s-12) var(--s-5) var(--s-16);
}
.fdn-cms__head {
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
}
.fdn-cms__eyebrow {
  margin: 0 0 var(--s-2);
  font: 800 12px/1.4 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.fdn-cms__title {
  margin: 0;
  font: 800 clamp(28px, 4vw, 34px)/1.15 var(--font-sans);
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
}

/* ---- long-form body: style whatever markup the CMS HTML ships ---- */
.fdn-cms__body {
  font: 400 16px/1.7 var(--font-sans);
  color: var(--text);
}
.fdn-cms__body > :first-child { margin-top: 0; }
.fdn-cms__body > :last-child  { margin-bottom: 0; }
.fdn-cms__body p { margin: 0 0 var(--s-5); }
.fdn-cms__body h1,
.fdn-cms__body h2,
.fdn-cms__body h3,
.fdn-cms__body h4,
.fdn-cms__body h5 {
  margin: var(--s-8) 0 var(--s-3);
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}
.fdn-cms__body h1 { font-size: 24px; }
.fdn-cms__body h2 { font-size: 22px; }
.fdn-cms__body h3 { font-size: 18px; font-weight: 700; }
.fdn-cms__body h4,
.fdn-cms__body h5 { font-size: 16px; font-weight: 700; }
.fdn-cms__body ul,
.fdn-cms__body ol { margin: 0 0 var(--s-5); padding-left: var(--s-6); }
.fdn-cms__body li { margin: 0 0 var(--s-2); }
.fdn-cms__body li::marker { color: var(--text-muted); }
.fdn-cms__body a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.fdn-cms__body a:hover { color: var(--brand-600); }
.fdn-cms__body strong,
.fdn-cms__body b { font-weight: 700; color: var(--text); }
.fdn-cms__body hr { margin: var(--s-8) 0; border: 0; border-top: 1px solid var(--border); }
.fdn-cms__body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.fdn-cms__body blockquote {
  margin: 0 0 var(--s-5);
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  border-left: 3px solid var(--brand);
  color: var(--text-muted);
}
.fdn-cms__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s-5);
  font-size: 15px;
}
.fdn-cms__body th,
.fdn-cms__body td { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); text-align: left; }
.fdn-cms__body th { background: var(--bg-subtle); font-weight: 700; }

/* The legacy admin editor bakes light-page inline colours (black text, white
   fills) into the stored HTML; neutralise the worst so dark mode stays legible.
   Scoped to dark + .fdn-cms__body so light rendering is untouched. */
html.fdn-dark .fdn-cms__body [style*="color:#000"],
html.fdn-dark .fdn-cms__body [style*="color: #000"],
html.fdn-dark .fdn-cms__body [style*="color:black"],
html.fdn-dark .fdn-cms__body [style*="color: black"],
html.fdn-dark .fdn-cms__body [style*="color:rgb(0"],
html.fdn-dark .fdn-cms__body [style*="color: rgb(0"] { color: var(--text) !important; }
html.fdn-dark .fdn-cms__body [style*="background"] { background: transparent !important; }

@media (max-width: 575px) {
  .fdn-cms { padding: var(--s-8) var(--s-4) var(--s-12); }
}


/* =====================================================================
   S3-10 order-history cards (my-orders.php). Token-driven replacement for
   the flat .my-order-list block in style.css: header row (id + date | total),
   a restaurant line, a compact dish list, and a footer with a colour-coded
   status pill + the primary action (Reorder). Inherits dark-mode via tokens.
   ===================================================================== */
.fdn-order {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
  transition: box-shadow .15s ease;
}
.fdn-order:hover { box-shadow: var(--shadow-md); }

.fdn-order__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.fdn-order__id { font: 700 15px/1.2 var(--font-sans); color: var(--text); }
.fdn-order__id a { color: inherit; text-decoration: none; }
.fdn-order__id a:hover { color: var(--brand-ink); }
.fdn-order__date { display: block; margin-top: 3px; font: 400 13px var(--font-sans); color: var(--text-muted); }
.fdn-order__total { font: 700 17px var(--font-sans); color: var(--text); white-space: nowrap; }

.fdn-order__rest { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) 0 var(--s-1); }
.fdn-order__rest a { font: 700 16px var(--font-sans); color: var(--brand-ink); text-decoration: none; }
.fdn-order__rest a:hover { text-decoration: underline; }
.fdn-order__count { font: 400 13px var(--font-sans); color: var(--text-muted); }

.fdn-order__items { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0 var(--s-1); }
.fdn-order__line { display: flex; align-items: center; gap: var(--s-3); }
.fdn-order__thumb {
  width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover;
  border-radius: var(--r-md); background: var(--bg-subtle);
}
.fdn-order__lname {
  flex: 1 1 auto; min-width: 0;
  font: 500 14px var(--font-sans); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fdn-order__lqty { color: var(--text-muted); font-weight: 600; }
.fdn-order__lprice { font: 600 14px var(--font-sans); color: var(--text); white-space: nowrap; }

.fdn-order__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
/* status pill — neutral base, colour-coded by state modifier; the leading
   dot uses currentColor so it always tracks the text colour */
.fdn-order__status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  font: 600 13px var(--font-sans);
  background: var(--bg-subtle); color: var(--text-muted);
}
.fdn-order__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fdn-order__status--done   { background: var(--success-050); color: var(--success-ink); }
.fdn-order__status--active { background: var(--brand-050);   color: var(--brand-ink); }
.fdn-order__status--wait   { background: var(--warning-050); color: var(--warning-ink); }
.fdn-order__status--dead   { background: var(--danger-050);  color: var(--danger-ink); }

.fdn-order__act { flex: 0 0 auto; }
.fdn-order__act .btn-foodini { min-height: 40px; padding: 0 var(--s-5); }

@media (max-width: 575.98px) {
  .fdn-order { padding: var(--s-4); }
  .fdn-order__foot { flex-wrap: wrap; }
  .fdn-order__status { flex: 1 1 auto; justify-content: center; }
  .fdn-order__act, .fdn-order__act .btn-foodini { width: 100%; }
}

/* ==========================================================================
   S4-9 — account + addresses (my-account / add-address / edit-address /
   addGuestAddress / notification). Uber-style settings screen per reference:
   left rail (Account · Privacy · Terms · Log Out + Appearance pill pinned to
   the bottom), centred content column (avatar → name → email → "Personal
   info" chevron rows that expand into §4 .field-foodini editors). Address +
   card lists reuse the .fdn-addrrow anatomy from the address modal. All
   colours via tokens, so dark mode is free.
   ========================================================================== */
.fdn-acct { max-width: 1080px; margin: 0 auto; padding: var(--s-8) var(--s-4) var(--s-16); }
/* the page has no separate title — the rail's active "Llogaria ime" item IS the label */
.fdn-acct__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-12); align-items: start; }

/* left rail */
.fdn-acct__side { position: sticky; top: 96px; display: flex; flex-direction: column; }
.fdn-acct__nav { display: flex; flex-direction: column; gap: 2px; }
/* rail rows styled EXACTLY like the discovery sidebar (.fdn-side__link):
   rounded row + bg-subtle hover; active = the S2-4s selected state — square
   "cropped" gray block (--border), 4px dark indicator bar, bolder label.
   (The old rounded-pill + green border-left let the radius clip the bar at
   the corners and looked broken — user 2026-07-21.) */
.fdn-acct__nav a {
  display: flex; align-items: center; padding: 10px var(--s-3); margin: 0;
  border-radius: var(--r-md);
  font: 600 14.5px/1.3 var(--font-sans); color: var(--text); text-decoration: none;
}
.fdn-acct__nav a:hover { background: var(--bg-subtle); color: var(--text); }
.fdn-acct__nav a.is-active {
  background: var(--border);
  border-radius: 0;
  border-left: 4px solid var(--text);
  padding-left: calc(var(--s-3) - 4px);
  font-weight: 700;
}
.fdn-acct__nav a.fdn-acct__signout { color: var(--danger-ink); }   /* text-safe danger: raw --danger = 3.91:1, under AA */
/* Appearance pinned to the rail's bottom (reference: bottom-left) — hosts the
   S3-11 scooter switch (inc/fdn-theme-toggle.php); .fdn-theme brings its own
   top divider + Appearance label, so this slot only positions it */
.fdn-acct__appearance { margin-top: var(--s-6); padding: 0 0 0 calc(var(--s-3) + 3px); }   /* left inset = link text edge; sits just below the nav (was margin-top:auto pinning it to the bottom of a 620px min-height column) */
.fdn-acct__appearance .fdn-theme { margin-top: var(--s-4); }
/* interface-language switch (inc/fdn-lang-switch.php) above the scooter —
   same divider treatment as .fdn-theme, flush with the nav text */
.fdn-acct__appearance .fdn-langsw { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
/* content column */
.fdn-acct__body { max-width: 620px; width: 100%; margin: 0 auto; }
.fdn-acct__head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s-6) 0 var(--s-8); text-align: center; }
.fdn-acct__avatarwrap { position: relative; margin-bottom: var(--s-3); }
/* graceful person fallback under the photo (shows through if it 404s) */
.fdn-acct__avatarwrap::before {
  content: "\F4DA"; font-family: "bootstrap-icons"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: 40px;
  color: var(--text-subtle); background: var(--bg-subtle); border-radius: 50%; z-index: 0;
}
.fdn-acct__avatar {
  position: relative; z-index: 1; width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover; display: block;
}
.fdn-acct__avatarbtn {
  position: absolute; right: -2px; bottom: -2px; z-index: 2; width: 30px; height: 30px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); font-size: 14px; cursor: pointer; margin: 0;
}
.fdn-acct__avatarbtn:hover { color: var(--brand-ink); }
.fdn-acct__avatarbtn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
/* S4-9b: photo UX — whole avatar is the click target; a picked (not yet
   saved) photo gets a brand ring + brand camera chip so the state is obvious */
.fdn-acct__avatarwrap { cursor: pointer; }
.fdn-acct__avatarwrap.is-picked .fdn-acct__avatar { box-shadow: 0 0 0 3px var(--brand); }
.fdn-acct__avatarwrap.is-picked .fdn-acct__avatarbtn { color: var(--brand-ink); border-color: var(--brand); }
.fdn-acct__name { margin: 0; font: 800 22px/1.2 var(--font-sans); color: var(--text); letter-spacing: -.01em; }
.fdn-acct__mail { margin: 0; font: 500 14px/1.4 var(--font-sans); color: var(--text-muted); overflow-wrap: anywhere; }

.fdn-acct__sec { margin-top: var(--s-8); scroll-margin-top: 110px; }   /* rail jump lands below the sticky header */
.fdn-acct__sec > h3 { margin: 0 0 var(--s-2); font: 800 18px/1.25 var(--font-sans); color: var(--text); letter-spacing: -.01em; }

/* chevron rows (reference: label over value, hairline between, chevron right) */
.fdn-acct-row {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: 15px 4px; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; text-align: left; cursor: pointer; color: var(--text);
}
.fdn-acct-row__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fdn-acct-row__label { font: 700 14.5px/1.2 var(--font-sans); color: var(--text); }
.fdn-acct-row__value { font: 500 14px/1.35 var(--font-sans); color: var(--text-muted); overflow-wrap: anywhere; }
.fdn-acct-row__chev { flex: 0 0 auto; color: var(--text-subtle); font-size: 14px; transition: transform .18s ease; }
.fdn-acct-row[aria-expanded="true"] .fdn-acct-row__chev { transform: rotate(90deg); }
.fdn-acct-row:hover .fdn-acct-row__label { color: var(--brand-ink); }
.fdn-acct-row:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; border-radius: var(--r-sm); }
.fdn-acct__nav a:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; }
.fdn-infomodal__tab:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; }
/* inline editor under its row — smooth height + fade expand (collapsed
   fields are visibility:hidden so keyboard Tab skips them) */
.fdn-acct-edit {
  overflow: hidden; max-height: 0; opacity: 0; visibility: hidden;
  padding: 0 4px; border-bottom: 0;
  transition: max-height .28s ease, opacity .2s ease, padding .28s ease, visibility 0s linear .28s;
}
.fdn-acct-edit.is-open {
  max-height: 640px; opacity: 1; visibility: visible;
  padding: var(--s-4) 4px var(--s-5); border-bottom: 1px solid var(--border);
  transition: max-height .3s ease, opacity .24s ease .04s, padding .3s ease, visibility 0s;
}
.fdn-acct-edit__cols { display: flex; gap: var(--s-3); }
.fdn-acct-edit__cols .field-foodini:first-child { flex: 0 1 220px; }
.fdn-acct-edit__cols .field-foodini:last-child { flex: 1 1 auto; }
/* save bar appears once something is being edited */
.fdn-acct__save { display: none; margin-top: var(--s-5); }
.fdn-acct__form.is-dirty .fdn-acct__save { display: block; animation: fdnFadeIn .24s ease; }

/* address / card lists — .fdn-addrrow anatomy + account-page extras */
.fdn-acct .fdn-addrrow { padding: 13px 4px; }
.fdn-acct .fdn-addrrow__actions { gap: 4px; }
.fdn-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: var(--r-pill); background: var(--brand-050); color: var(--brand-ink);
  font: 700 11.5px/1 var(--font-sans); text-decoration: none;
}
.fdn-chip--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--text-muted); }
.fdn-chip--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--brand-ink); color: var(--brand-ink); }
.fdn-acct__addrow {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-4);
  font: 700 14px/1 var(--font-sans); color: var(--brand-ink); text-decoration: none;
}
.fdn-acct__addrow:hover { color: var(--brand-ink); text-decoration: underline; }
.fdn-acct__empty { margin: var(--s-3) 0 0; font: 500 13.5px/1.5 var(--font-sans); color: var(--text-muted); }
.fdn-cardrow { display: flex; align-items: center; gap: var(--s-3); padding: 13px 4px; border-bottom: 1px solid var(--border); }
.fdn-cardrow__img { width: 40px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.fdn-cardrow__pan { flex: 1 1 auto; font: 600 14px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* ===== address form pages (add / edit / guest): map card + §4 form ===== */
.fdn-addrpage { max-width: 760px; margin: 0 auto; padding: var(--s-4) var(--s-4) var(--s-16); }
.fdn-addrpage__title { margin: var(--s-2) 0 var(--s-5); text-align: center; font: 800 20px/1.2 var(--font-sans); color: var(--text); letter-spacing: -.01em; }
.fdn-addrpage__map {
  height: clamp(300px, 44vh, 460px) !important; width: 100% !important;
  border-radius: var(--r-xl); overflow: hidden; background: var(--bg-subtle);
  box-shadow: var(--shadow-sm);
}
.fdn-addrpage__form {
  margin-top: var(--s-6); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--s-6);
}
.fdn-addrpage__form > h3 { margin: 0 0 var(--s-2); font: 800 17px/1.25 var(--font-sans); color: var(--text); }
.fdn-addrpage__current { margin: 0 0 var(--s-4); font: 500 13.5px/1.5 var(--font-sans); color: var(--text-muted); overflow-wrap: anywhere; }
.fdn-addrpage__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); flex-wrap: wrap; }
/* tag/language pill lists — used on the address pages AND the account page */
.fdn-addrtags { margin: 0; padding: 0; }
.fdn-addrtags li { list-style: none; }

/* S4-9b: quick language switch (drawer + anywhere) — Shqip · Italiano · English */
.fdn-langsw__label { margin: 0 0 var(--s-3); font: 700 13px/1 var(--font-sans); color: var(--text-muted); }
.fdn-langsw__opts { display: flex; gap: 8px; flex-wrap: wrap; }
.fdn-langsw__opt {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
  font: 700 12.5px/1 var(--font-sans); color: var(--text-muted); text-decoration: none;
}
.fdn-langsw__opt:hover { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text-subtle); }
.fdn-langsw__opt.is-on { background: var(--brand-050); color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--brand); }
/* drawer placement: first item of the settings zone — one divider above,
   aligned to the drawer's content edge (2026-07-14 unified with theme + tg) */
.fdn-langsw--drawer .fdn-langsw { margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--border); }

/* ===== notifications: restyle the server-rendered .notification-blog cards ===== */
.main-notification .container-fluid { max-width: 720px; margin: 0 auto; padding-bottom: var(--s-16); }
.main-notification .page-title h2 { text-align: center; font: 800 20px/1.2 var(--font-sans); color: var(--text); letter-spacing: -.01em; }
.main-notification .notification-blog {
  display: flex; align-items: flex-start; gap: var(--s-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5); margin-top: var(--s-3);
}
.main-notification .notification-blog > img { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; }
.main-notification .notification-details { flex: 1 1 auto; min-width: 0; }
.main-notification .notification-date-time h5 { margin: 0 0 4px; font: 700 12.5px/1.2 var(--font-sans); color: var(--text-subtle); }
.main-notification .notification-details > p { margin: 0; font: 500 14px/1.55 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }

/* mobile-only account chrome (user mockup): a centred "Account" title stands
   in for the section tabs, and a footer of legal links + red Log Out closes
   the page. Hidden by default; the account breakpoint below reveals them
   (NOT Bootstrap's d-lg-none — its 992px cut would double-show on 900–991 tablets). */
.fdn-acct__mtitle, .fdn-acct__mfoot { display: none; }

/* responsive: the desktop left rail collapses; on phones the page becomes a
   single clean scroll matching the mockup — no pill tabs. */
@media (max-width: 899.98px) {
  /* Stack order: title → profile content → settings → legal/logout footer.
     The rail is dissolved (display:contents) so its children become direct
     flex items of the grid and can be re-ordered — opening the account lands
     on your info, not a screen of tabs or Gjuhe/Pamja before the avatar.
     align-items:stretch RESETS the desktop grid's `start` (line ~6234) so the
     settings + footer cards span the column instead of shrink-wrapping to a
     stub (which drew the stray short hairlines the audit flagged). */
  .fdn-acct__grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-5); }
  .fdn-acct__side { display: contents; }
  /* mockup has no section tabs on mobile — the rail nav is desktop-only */
  .fdn-acct__nav { display: none; }
  .fdn-acct__mtitle {
    display: block; order: 0; margin: 0; text-align: center;
    font: 800 20px/1.2 var(--font-sans); color: var(--text); letter-spacing: -.01em;
  }
  .fdn-acct__body { order: 2; }

  /* Card each section to the cart/checkout gold standard — was a flat run of
     hairline rows on the bare page bg (the "really bad" look). --surface keeps
     dark mode working; the profile head (avatar/name/email) stays uncarded. */
  .fdn-acct__sec {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
    padding: var(--s-2) var(--s-5) var(--s-4); margin-top: var(--s-4);
  }
  .fdn-acct__sec > h3 { margin: var(--s-3) 0 var(--s-1); }
  /* rows drop their inline inset so the card gutter governs; the last row's
     divider is redundant against the card edge */
  .fdn-acct-row, .fdn-acct .fdn-addrrow, .fdn-acct .fdn-cardrow { padding-left: 0; padding-right: 0; }
  .fdn-acct__sec .fdn-acct-row:last-of-type { border-bottom: 0; }
  .fdn-acct .fdn-addrrow:last-child, .fdn-acct .fdn-cardrow:last-child { border-bottom: 0; }

  /* Appearance (Gjuhe + Pamja) is its own card — kills the stray short hairline
     the shrink-wrapped border-top used to draw */
  .fdn-acct__appearance {
    /* width:100% is load-bearing. .fdn-acct__grid is a COLUMN flex container, so
       its cross axis is horizontal, and per flexbox an `auto` CROSS-axis margin
       defeats align-items:stretch — the item shrink-wraps and centres. So this
       card rendered 266px wide inside a 398px column while every sibling
       .fdn-acct__sec spanned full width (measured 430px viewport). Giving it a
       definite cross size restores the stretch; the auto margins then only
       centre it once max-width:620 actually binds on wider phones. */
    order: 3; width: 100%; max-width: 620px; margin: var(--s-4) auto 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: var(--s-5);
  }
  .fdn-acct__appearance .fdn-langsw { margin-top: 0; padding-top: 0; border-top: 0; }

  /* legal links + a full-width Log Out button; the hairline spans once stretched */
  .fdn-acct__mfoot {
    display: flex; order: 4; flex-direction: column; align-items: stretch; gap: var(--s-3);
    /* same auto-cross-margin trap as .fdn-acct__appearance above: without
       width:100% this shrink-wrapped, so the border-top hairline drew short and
       the "full-width" Log Out button below rendered as a ~126px pill. */
    width: 100%; max-width: 620px; margin: var(--s-6) auto 0; padding-top: var(--s-5);
    border-top: 1px solid var(--border);
  }
  .fdn-acct__mlink { display: flex; align-items: center; min-height: 44px; font: 500 14px/1.3 var(--font-sans); color: var(--text-muted); text-decoration: none; }
  .fdn-acct__mlink:hover { color: var(--text); }
  /* Log Out promoted from a stray red text link to a full-width outlined
     danger button (tokens only, no fill) — matches the full-width-CTA bar */
  .fdn-acct__mlogout {
    display: block; width: 100%; margin-top: var(--s-3); min-height: 48px;
    padding: var(--s-3) var(--s-4); text-align: center;
    border: 1px solid var(--danger); border-radius: var(--r-pill);
    background: var(--surface); color: var(--danger-ink);   /* text-safe danger (border keeps --danger: 3:1 is enough for non-text) */
    font: 800 15px/1.4 var(--font-sans); text-decoration: none;
  }
  .fdn-acct__mlogout:hover { background: var(--danger-050); }

  /* comfortable tap target for the "+ add address" row */
  .fdn-acct__addrow { min-height: 44px; padding-block: var(--s-2); }

  .fdn-acct-edit__cols { flex-direction: column; }
  .fdn-acct-edit__cols .field-foodini:first-child { flex: 1 1 auto; }
  .fdn-addrpage__form { padding: var(--s-5) var(--s-4); }
  .fdn-addrpage__foot .btn-foodini { width: 100%; }
  /* Save floats at the bottom of the screen so it's always reachable while
     editing a long form on a phone; -s-5 margin bleeds it to the card edge.
     `bottom` must clear the fixed bottom nav: position:sticky pins to the
     SCROLLPORT, and body's padding-bottom reserves space in the flow only —
     it does not move the pin. With bottom:0 the bar came to rest exactly
     inside the nav's 56px band, invisible and untappable (taps landed on the
     nav tabs and navigated away, discarding the edit). The safe-area term
     moves from padding to `bottom` with it, so it is not counted twice. */
  .fdn-acct__form.is-dirty .fdn-acct__save {
    position: sticky; z-index: 6; margin: var(--s-5) calc(var(--s-5) * -1) 0;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding: var(--s-3) var(--s-4);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
  }
}
/* narrow phones only: let the address row's actions wrap below the name so the
   full address shows instead of truncating to "Rruga e Durre…" at 320px.
   Scoped with :has(.fdn-addrrow__actions) to the ADDRESS rows only — the plain
   nav rows (Njoftime / About / Help) have a chevron, not an actions cluster,
   and must NOT wrap (that pushed their chevron onto its own line). */
@media (max-width: 400px) {
  .fdn-acct .fdn-addrrow:has(.fdn-addrrow__actions) { flex-wrap: wrap; row-gap: var(--s-2); }
  .fdn-acct .fdn-addrrow:has(.fdn-addrrow__actions) .fdn-addrrow__main { flex: 1 1 100%; }
  .fdn-acct .fdn-addrrow:has(.fdn-addrrow__actions) .fdn-addrrow__name { -webkit-line-clamp: unset; }
  .fdn-acct .fdn-addrrow__actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fdn-acct-edit { transition: none; }
  .fdn-acct-row__chev { transition: none; }
  .fdn-acct__form.is-dirty .fdn-acct__save { animation: none; }
}

/* Full-screen overlay scroll lock: freeze the page behind a takeover
   overlay so it cannot scroll under it. Toggled on <html> from JS by
   the post-delivery review panel (inc/fdn-review.php). The fixed bottom
   nav must not peek out from under a full-screen, close-able overlay. */
html.fdn-scroll-lock, html.fdn-scroll-lock body { overflow: hidden; }
html.fdn-scroll-lock .fdn-bottom-nav { visibility: hidden; }


/* =====================================================================
   S3-10b drinks upsell modal (#drinks-model / .drinks-list-modal).
   Kills the "neon white" glow rows (hard #fff + a big white box-shadow on a
   dark backdrop) and the cramped, gapless list. Token-driven so it reads in
   BOTH themes; scoped tightly to .drinks-list-modal so the shared
   .model-header / .plastic-set-* rules other modals use are left alone.
   HOUSE RULE (Foodini): never use neon / pure-#fff glowing surfaces. Use
   --surface or --bg-subtle with a hairline --border instead.
   ===================================================================== */
.drinks-list-modal .modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.drinks-list-modal .model-header {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.drinks-list-modal .model-header h3 { color: var(--text); font-weight: 700; }
/* neutral, theme-aware close chip — replaces the orange PNG X */
.drinks-list-modal .model-btn-close {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); border: 0; border-radius: var(--r-pill);
  color: var(--text-muted); font: 400 20px/1 var(--font-sans);
  transition: background .15s ease, color .15s ease;
}
.drinks-list-modal .model-btn-close::before { content: "\00d7"; }
.drinks-list-modal .model-btn-close:hover { background: var(--border); color: var(--text); }

.drinks-list-modal .modal-body { padding: var(--s-4) var(--s-5) var(--s-5); }
/* rows: subtle surface, hairline border, real gap between them — no glow */
.drinks-list-modal .plastic-set-sections {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: none;
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  gap: var(--s-3);
}
.drinks-list-modal .plastic-set-sections:last-of-type { margin-bottom: 0; }
.drinks-list-modal .plastic-set-sections img {
  width: 48px; height: 48px; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.drinks-list-modal .drinks-details { gap: var(--s-3); min-width: 0; }
.drinks-list-modal .drinks-details .plastic-set-description { margin-left: 0; min-width: 0; }
.drinks-list-modal .plastic-set-description h5 {
  color: var(--text); font-size: 15px; font-weight: 600; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drinks-list-modal .plastic-set-description h6 { color: var(--brand-ink); font-size: 14px; font-weight: 700; margin-bottom: 0; }
/* stepper pill sits on --surface so it separates from the --bg-subtle row */
.drinks-list-modal .plastic-set-sections .plastic-set-add-remove {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 4px;
  gap: 2px;
}
.drinks-list-modal .plastic-set-add-remove .minus,
.drinks-list-modal .plastic-set-add-remove .plus {
  background: var(--brand); color: var(--on-brand);
  width: 30px; height: 30px; margin: 0; font-size: 18px;
}
.drinks-list-modal .plastic-set-add-remove .qty {
  color: var(--text); width: 34px; height: auto; font-weight: 700; border: 0;
}
.drinks-list-modal .modal-footer {
  border-top: 1px solid var(--border);
  padding: var(--s-4) var(--s-5);
  margin-top: 0;
}
.drinks-list-modal .modal-footer .btn-primary {
  background: var(--brand); border: 0; color: var(--on-brand);
  border-radius: var(--r-pill); min-height: 48px; padding: 0 var(--s-8); font-weight: 700;
}
.drinks-list-modal .modal-footer .btn-primary:hover { background: var(--brand-hover); color: var(--on-brand); }

/* ==========================================================================
   Auth modals — sign-in / sign-up / OTP (S3.4 rebuild)
   One shared skin (.fdn-auth) for the three modals in inc/modal.php. The owl
   carousel and the social-login buttons are gone; everything is tokens, so
   dark mode is free. Loads after Bootstrap → equal-specificity overrides win.
   ========================================================================== */
.fdn-auth-dialog { max-width: 420px; }
.fdn-auth {
  position: relative;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.fdn-auth__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.fdn-auth__close:hover { background: var(--border); }
.fdn-auth__body {
  padding: var(--s-8) var(--s-6) var(--s-6);
  text-align: center;
}
.fdn-auth__hero img { height: 132px; max-width: 100%; object-fit: contain; }
/* The sign-up hero is the WORDMARK, not an illustration, so it stays small.
   Reserve the close button's footprint (40px + its 12px inset, both sides so
   the mark stays optically centred) — otherwise a wide wordmark runs straight
   under the x. With max-width: 100% inherited above, the logo shrinks to fit
   that safe width instead of overflowing it. */
.fdn-auth__hero--logo { padding-inline: 52px; }
.fdn-auth__hero--logo img { height: 40px; }
.fdn-auth__title {
  margin: var(--s-4) 0 var(--s-1);
  font: 800 24px/1.2 var(--font-sans);
  letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}
.fdn-auth__sub {
  margin: 0 0 var(--s-5);
  font: 400 14px/1.5 var(--font-sans);
  color: var(--text-muted);
}
.fdn-auth__dest { color: var(--text); font-weight: 700; }

/* inline feedback — filled by JS .text(); empty = invisible */
.fdn-auth__alert { display: none; }
.fdn-auth__alert.is-error,
.fdn-auth__alert.is-ok {
  display: block;
  margin-bottom: var(--s-4);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font: 500 13.5px/1.45 var(--font-sans);
  text-align: left;
}
.fdn-auth__alert.is-error { background: var(--danger-050); color: var(--danger-ink); }
.fdn-auth__alert.is-ok { background: var(--success-050); color: var(--success-ink); }

/* email | phone segmented tabs (Bootstrap pills under the hood) */
.fdn-auth__tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 var(--s-5);
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  list-style: none;
}
.fdn-auth__tabs .nav-item { flex: 1; }
.fdn-auth__tabs .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: var(--r-pill);
  font: 700 14px/1 var(--font-sans);
  color: var(--text-muted);
}
.fdn-auth__tabs .nav-link.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.fdn-auth__field { margin-bottom: var(--s-4); text-align: left; }
.fdn-auth__field label {
  display: block;
  margin-bottom: 6px;
  font: 700 13px/1.4 var(--font-sans);
  color: var(--text);
}
.fdn-auth__field .form-control {
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: 400 16px/1.4 var(--font-sans);   /* 16px kills iOS zoom */
  box-shadow: none;
}
.fdn-auth__field .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-050);
  outline: none;
}
.fdn-auth__phonerow { display: flex; gap: var(--s-2); }
.fdn-auth__phonerow select.form-control { flex: 0 0 41%; min-width: 0; }
.fdn-auth__phonerow input.form-control { flex: 1 1 auto; min-width: 0; }

.fdn-auth__terms {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  margin: var(--s-2) 0 var(--s-4);
  font: 400 13.5px/1.5 var(--font-sans);
  color: var(--text-muted);
  text-align: left;
}
.fdn-auth__terms input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand-ink);
}
.fdn-auth__terms a { color: var(--brand-ink); font-weight: 600; }

.fdn-auth__cta {
  width: 100%;
  min-height: 50px;
  margin-top: var(--s-2);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font: 800 16px/1 var(--font-sans);
  cursor: pointer;
  transition: transform .06s ease, background .15s ease;
}
.fdn-auth__cta:hover { background: var(--brand-hover); }
.fdn-auth__cta:active { transform: translateY(1px); }
.fdn-auth__cta:disabled { opacity: .55; cursor: default; transform: none; }

.fdn-auth__switch {
  margin: var(--s-5) 0 0;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--text-muted);
}
.fdn-auth__switch a { color: var(--brand-ink); font-weight: 700; }

/* OTP boxes */
.fdn-otp {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: var(--s-2) 0 var(--s-5);
}
.fdn-otp input.form-control {
  width: 56px;
  height: 56px;
  padding: 0;
  text-align: center;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: 800 22px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}
.fdn-otp input.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-050);
  outline: none;
}

@media (max-width: 575px) {
  .fdn-auth-dialog { margin: var(--s-3); max-width: none; }
  .fdn-auth__body { padding: var(--s-8) var(--s-4) var(--s-5); }
  /* :not() keeps this off the wordmark variant. Without it the two rules have
     identical specificity (0,1,1) and this one, being later in the file, won
     — blowing the sign-up logo up to 112px and sliding it under the close
     button on every phone. */
  .fdn-auth__hero:not(.fdn-auth__hero--logo) img { height: 112px; }
  .fdn-auth__hero--logo { padding-inline: 48px; }
  .fdn-auth__hero--logo img { height: 36px; }
  .fdn-otp input.form-control { width: 52px; height: 52px; }
}

/* ==========================================================================
   Fav hearts (S4 restyle) — outline ↔ lime fill, NO discs.
   The outline SVG is authored WHITE: dark mode uses it as-is; light mode
   flips it dark with invert(1) (scoped by src so the lime fill never inverts).
   The restaurant-hero copy sits over a PHOTO on both themes → always white
   with a drop-shadow, and its legacy white disc is gone.
   ========================================================================== */
.fdn-card__fav { object-fit: contain; cursor: pointer; }
html:not(.fdn-dark) .fdn-card__fav[src$="fdn-heart-outline.svg"] { filter: invert(1); }

.fdn-resto-hero__fav {
  background: transparent;
  box-shadow: none;
}
.fdn-resto-hero__fav img { width: 26px; height: 26px; }
.fdn-resto-hero__fav img[src$="fdn-heart-outline.svg"],
.fdn-resto-hero__fav img[src$="fdn-heart-fill.svg"] {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

/* ==== SWAL-GREEN: brand confirm button on SweetAlert dialogs ==== */
/* SweetAlert v1 injects its default light-blue (#8CD4F5) as an inline
   style on the confirm button, so tokens must win with !important.
   Green rebrand: fills use --brand with --on-brand text. */
.sweet-alert button.confirm {
    background-color: var(--brand) !important;
    color: var(--on-brand) !important;
    border-radius: var(--r-pill);
    box-shadow: none !important;
}
.sweet-alert button.confirm:hover,
.sweet-alert button.confirm:focus {
    background-color: var(--brand-hover) !important;
}
.sweet-alert button.cancel {
    background-color: var(--bg-subtle) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    box-shadow: none !important;
}


/* =====================================================================
   S4 — order-details dark mode (user: "in dark mode ALL windows must be
   dark"). The page still runs on legacy style.css classes with hardcoded
   whites (.my-order-list #fff card, #53565e/#929497 inks); the S2-14
   global heading remap turned it white-on-white in dark. Token overrides
   only — light mode untouched.
   ===================================================================== */
html.fdn-dark .my-order-list,
html.fdn-dark .your-location {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}
html.fdn-dark .order-header,
html.fdn-dark .product-list-main { border-bottom-color: var(--border); }
html.fdn-dark .my-order-list .border-bottom { border-bottom-color: var(--border) !important; }
html.fdn-dark .page-title h2,
html.fdn-dark .payment-list h5,
html.fdn-dark .totle-box h5,
html.fdn-dark .your-location h2 { color: var(--text); }
html.fdn-dark .order-number h4,
html.fdn-dark .restaurant-details-name p,
html.fdn-dark .picku-title h5,
html.fdn-dark .product-name h4,
html.fdn-dark .your-location p { color: var(--text-muted); }
html.fdn-dark .order-number p { color: var(--text-subtle); }
html.fdn-dark .product-name h5,
html.fdn-dark .product-price-sub h3,
html.fdn-dark .totle-box h5 span { color: var(--brand-ink); }
html.fdn-dark .btn-delivered,
html.fdn-dark .btn-delivered:hover { background-color: var(--brand-050); color: var(--brand-ink); }

/* the LIVE CHAT popup (chat/chat-admin|restaurant|driver.php): Bootstrap
   accordion-item white panel + inline #f5f6f7 bubble backgrounds */
html.fdn-dark .user-contact-section .accordion-item {
  background: var(--surface);
  border-color: var(--border);
}
html.fdn-dark .user-contact-section .card-footer { border-color: var(--border); }
html.fdn-dark .user-contact-section #message_list p[style*="background-color"] {
  background-color: var(--bg-subtle) !important;
  color: var(--text);
}

/* ==== S4-11-TOPS: chosen extras under cart/checkout line names ==== */
.fdn-line-tops {
  margin: 2px 0 4px;
  font: 400 12px/1.45 var(--font-sans);
  color: var(--text-muted);
}
.fdn-co-item__txt .fdn-line-tops {
  margin: 0 0 2px;
}

/* =====================================================================
   S4 — order-details redesign (.fdn-odet): discovery-style centered
   column reusing the S3-10 .fdn-order card language. Token-driven, so
   dark mode is free; the earlier legacy dark overrides above became
   moot for this page but stay for safety (my-order-list is gone here).
   ===================================================================== */
.fdn-odet { max-width: 760px; margin: 0 auto; padding: var(--s-2) 0 var(--s-12); }
.fdn-odet__card:hover { box-shadow: var(--shadow-sm); }   /* it's not a link — don't lift */

/* location: quiet inset panel, icon disc + two-line text */
.fdn-odet__loc {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin: var(--s-4) 0; padding: var(--s-4);
  background: var(--bg-subtle); border-radius: var(--r-md);
}
.fdn-odet__locic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); color: var(--brand-ink); font-size: 16px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.fdn-odet__loctxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fdn-odet__loclabel { font: 700 12px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.fdn-odet__locaddr { font: 500 14.5px/1.45 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }

/* bill rows */
.fdn-odet__bill { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-2); }
.fdn-odet__row { display: flex; justify-content: space-between; gap: var(--s-4); font: 500 14px/1.4 var(--font-sans); }
.fdn-odet__row > span:first-child { color: var(--text-muted); }
.fdn-odet__row > span:last-child { color: var(--text); text-align: right; }
.fdn-odet__row--promo > span:last-child { color: var(--success-ink); }
.fdn-odet__row--total { padding-top: var(--s-1); font: 700 17px/1.3 var(--font-sans); }
.fdn-odet__row--total > span:first-child { color: var(--text); }
.fdn-odet__row--total > span:last-child { color: var(--brand-ink); }
.fdn-odet__sep { border-top: 1px solid var(--border); margin: var(--s-2) 0; }

/* footer: chat pill left, track/cancel right */
.fdn-odet__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  flex-wrap: wrap; margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.fdn-odet__chatwrap { margin: 0; cursor: pointer; }
.fdn-odet__chat i { font-size: 15px; margin-right: 4px; }
.fdn-odet__actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.fdn-odet__cancel { color: var(--danger-ink); }
.fdn-odet__cancel:hover { color: var(--danger-ink); }
@media (max-width: 599.98px) {
  .fdn-odet__foot { flex-direction: column; align-items: stretch; }
  .fdn-odet__foot .btn-foodini { width: 100%; justify-content: center; }
}

/* restaurant's-own-courier callout on order details (delivery_by =
   vendor_driver → no Foodini tracking; this note replaces the Track button) */
.fdn-odet__note {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--brand-050); border-radius: var(--r-md);
  font: 500 14px/1.45 var(--font-sans); color: var(--brand-ink);
}
.fdn-odet__note i { font-size: 18px; flex: 0 0 auto; }

/* =====================================================================
   S4 — dark mode for the TRACKING widget + CHAT (track-order/chat-track.php
   and chat/chat-*.php). These load site-wide via inc/script.php for any
   logged-in user with an in-transit order, so their legacy style.css whites
   (#fff card, #f5f6f6 progress panel, #54575e text) and inline #f5f6f7 chat
   bubbles were the last light surfaces that survived in dark mode on EVERY
   page. Token-only overrides; light mode untouched.
   ===================================================================== */
/* the floating mini-tracker card (bottom-right) — the modal copy is already
   covered by html.fdn-dark .modal-content */
html.fdn-dark #accordiontrackorder .accordion-item:last-of-type .accordion-collapse {
  background-color: var(--surface);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-lg);
}
/* tracking widget — token restyle of the legacy style.css stepper + panels
   (track-order/chat-track.php). Was hardcoded #f5f6f6 / #54575e / 7px labels
   and a grey->green-gradient circle; token-driven now, so BOTH themes read
   correctly (this replaces the old dark-only patches folded in here). */
.track-process-main { background-color: var(--bg-subtle); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.food-track-text h2 { color: var(--text); }
.food-track-text p { color: var(--text-muted); }
.food-delivery-track img {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.food-price-details { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--r-md); }
.food-price-details h3 { color: var(--text); }
.food-price-details p { color: var(--text-muted); }
.user-text h4 { color: var(--text); }
.user-text h5 { color: var(--text-muted); }
/* step track + fill (JS may set .progress width; colour is token now) */
.progress-container::before { border-color: var(--border); }
.progress { background-color: var(--brand); }
/* nodes: grey 20px -> 24px token disc; active fill = lime, white svg check
   forced dark so it reads AA on lime in both themes */
.circle {
  width: 24px; height: 24px;
  background-color: var(--bg-subtle);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--dur-2) var(--ease-out);
}
.circle.active { background: var(--brand); box-shadow: none; }
.circle.active img { filter: brightness(0); }
.process-text h5 { font-size: 9.5px; line-height: 1.25; margin-top: var(--s-1); color: var(--text-muted); }
.process-text .circle.active + h5 { color: var(--text); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .circle { transition: none; } }

/* chat surfaces (used inside the tracking modal AND the order-details LIVE
   CHAT): the incoming bubbles carry inline background-color:#f5f6f7 — remap
   them and their text in every chat context. Sent bubbles are Bootstrap
   .bg-primary (fine) and timestamps are .text-muted (fine). */
html.fdn-dark #track-list-model .card-footer,
html.fdn-dark #track-list-model .accordion-item,
html.fdn-dark .track-order-main .accordion-item { border-color: var(--border); background: transparent; }
html.fdn-dark #track-list-model [id^="message_list"] p[style*="background-color"],
html.fdn-dark .track-order-main [id^="message_list"] p[style*="background-color"] {
  background-color: var(--bg-subtle) !important;
  color: var(--text);
}

/* 2026-07-14: the bottom nav gained a Favourites tab (every ordering /
   restaurant button lives down here on mobile now) — with 5 tabs the longer
   labels ("Porositë e mia", "Të preferuarat") need clipping safety so a tab
   never wraps to two lines or pushes its neighbours. */
.fdn-bottom-nav__item span {
  max-width: 100%;
  padding: 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==== S4-12: legacy-page redesigns — in-order chat, photo gallery, OTP ==== */

/* ---- in-order chat (order-details accordion + track-modal fragments).
   The socket handlers APPEND the legacy bootstrap bubble markup at runtime,
   so bubbles are restyled at the class level here (scoped to
   .user-contact-section) — server-rendered history and live messages get
   the identical look without touching the fragile JS templates. */
.user-contact-section .accordion-item { border: 0; background: transparent; }
.user-contact-section .accordion-body { padding: 0; }
.user-contact-section #orderchat2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.user-contact-section .chat-header {
  display: flex;
  justify-content: flex-end;
  padding: var(--s-2) var(--s-3) 0;
}
.user-contact-section .chat-header img {
  width: 28px; height: 28px;
  padding: 7px;
  background: var(--bg-subtle);
  border-radius: 50%;
}
.user-contact-section #message_list { padding: var(--s-3) var(--s-4); }
.user-contact-section .chat-profile-img {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
/* bubbles — incoming (default). !important beats the inline #f5f6f7. */
.user-contact-section p.small.rounded-3 {
  background: var(--bg-subtle) !important;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px !important;
  padding: 8px 12px !important;
  font: 500 13.5px/1.5 var(--font-sans);
  max-width: 340px;
  overflow-wrap: anywhere;
}
/* outgoing (templates mark these .bg-primary) — brand fill, AA ink */
.user-contact-section p.small.rounded-3.bg-primary {
  background: var(--brand) !important;
  border-color: transparent;
  color: var(--on-brand) !important;
}
/* timestamps also carry .small.rounded-3 — strip the bubble look back off
   (declared AFTER the bubble rules so the tie breaks this way) */
.user-contact-section p.small.text-muted {
  background: transparent !important;
  border: 0;
  padding: 0 4px !important;
  margin-bottom: var(--s-3) !important;
  font: 500 11px/1.3 var(--font-sans);
  color: var(--text-subtle) !important;
  max-width: none;
}
.user-contact-section p.small.rounded-3 img.img-fluid {
  max-width: 220px;
  border-radius: 10px;
  display: block;
}
.user-contact-section .single-check-tick-image { width: 14px; height: 14px; margin-left: 4px; }
html.fdn-dark .user-contact-section .single-check-tick-image { filter: invert(1) brightness(1.4); }
/* input bar */
.user-contact-section .fdn-chat__bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--s-3);
  gap: var(--s-2);
}
.user-contact-section .fdn-chat__bar .form-control {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text);
  font: 500 14px/1.4 var(--font-sans);
  padding: 0 16px;
  box-shadow: none;
}
.user-contact-section .fdn-chat__bar .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-050);
}
.user-contact-section .fdn-chat__attach {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 16px;
  text-decoration: none;
}
.user-contact-section .fdn-chat__attach:hover { color: var(--brand-ink); border-color: var(--brand); }
.user-contact-section .fdn-chat__attach label {
  cursor: pointer;
  margin: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.user-contact-section .fdn-chat__send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 17px;
  text-decoration: none;
  transition: background .15s ease;
}
.user-contact-section .fdn-chat__send:hover { background: var(--brand-hover); color: var(--on-brand); }

/* ---- empty-chat placeholder (auto-hides the instant a message joins it) */
.fdn-chat__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 180px; height: 100%;
  padding: var(--s-6) var(--s-4);
  text-align: center;
  animation: fdnChatEmptyIn var(--dur-3) var(--ease-out) both;
}
.fdn-chat__empty:not(:only-child) { display: none; }   /* a real message arrived */
.fdn-chat__empty-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg-subtle); color: var(--brand-ink);
  font-size: 22px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.fdn-chat__empty p { margin: 0; font: 500 13.5px/1.4 var(--font-sans); color: var(--text-muted); }
@keyframes fdnChatEmptyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fdn-chat__empty { animation: none; } }

/* ---- courier "call" button in the tracker (was a dead href="#") */
.fdn-track-call {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-subtle);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.fdn-track-call:hover { background: var(--brand-050); box-shadow: inset 0 0 0 1px var(--brand); }
.fdn-track-call:active { transform: scale(.94); }
.fdn-track-call img { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .fdn-track-call { transition: none; }
  .fdn-track-call:active { transform: none; }
}

/* ---- reusable confirm modal interior (.fdn-confirm on .modal-content).
   Keeps the Bootstrap .modal shell (JS calls .modal('show')); restyles the
   body onto tokens. .modal-content.fdn-confirm (0,2,0) beats the legacy
   .sign-up-modal .modal-content #fff rule by load order. Used by checkout's
   delete-card confirm; reusable for any future confirm. */
.modal-content.fdn-confirm {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.fdn-confirm__x {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--bg-subtle); color: var(--text-muted);
  font-size: 14px; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.fdn-confirm__x:hover { background: var(--border); color: var(--text); }
.fdn-confirm__body {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--s-3);
  padding: var(--s-8) var(--s-6) var(--s-6);
}
.fdn-confirm__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; font-size: 24px;
}
.fdn-confirm__ic--danger { background: var(--danger-050); color: var(--danger-ink); }
.fdn-confirm__title { margin: 0; font: 700 19px/1.3 var(--font-sans); color: var(--text); }
.fdn-confirm__msg { margin: 0; font: 500 14px/1.5 var(--font-sans); color: var(--text-muted); max-width: 320px; }
.fdn-confirm__actions { display: flex; gap: var(--s-3); margin-top: var(--s-2); width: 100%; justify-content: center; }
.fdn-confirm__btn {
  flex: 0 1 auto; min-width: 120px;
  padding: 11px 20px; border-radius: var(--r-pill);
  font: 700 14px/1 var(--font-sans);
  text-align: center; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.fdn-confirm__btn:active { transform: translateY(1px); }
.fdn-confirm__btn--ghost { background: var(--bg-subtle); color: var(--text); border: 1px solid var(--border); }
.fdn-confirm__btn--ghost:hover { background: var(--border); color: var(--text); }
.fdn-confirm__btn--danger { background: var(--danger-050); color: var(--danger-ink); border: 1px solid transparent; }
.fdn-confirm__btn--danger:hover { background: var(--danger-050); box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--danger-ink); }
@media (prefers-reduced-motion: reduce) {
  .fdn-confirm__x, .fdn-confirm__btn { transition: none; }
  .fdn-confirm__btn:active { transform: none; }
}

/* ---- branded text selection (was the browser-default blue) */
::selection { background: var(--brand); color: var(--on-brand); }
::-moz-selection { background: var(--brand); color: var(--on-brand); }

/* ---- restaurant photo gallery (restaurant-photo.php) */
.fdn-photogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-3);
}
.fdn-photogrid__cell {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  aspect-ratio: 4 / 3;
}
.fdn-photogrid__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.fdn-photogrid__cell:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .fdn-photogrid__cell img { transition: none; }
  .fdn-photogrid__cell:hover img { transform: none; }
}
@media (max-width: 575.98px) {
  .fdn-photogrid { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
}

/* ---- standalone OTP pages (otp.php + otp-edit-profile.php). The old
   .login-css layout came from the retired web_assets theme, so these pages
   rendered bare. */
.fdn-vfy-main {
  display: flex;
  justify-content: center;
  padding: var(--s-10) var(--s-4) var(--s-16);
  min-height: 55vh;
}
.fdn-vfy { width: 100%; max-width: 440px; }
.fdn-vfy__alert {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: var(--s-3);
  font: 500 13.5px/1.5 var(--font-sans);
}
.fdn-vfy__alert--ok { background: var(--success-050); color: var(--success-ink); }
.fdn-vfy__alert--err { background: var(--danger-050); color: var(--danger-ink); }
.fdn-vfy__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: var(--s-8) var(--s-6);
  text-align: center;
}
.fdn-vfy__ic {
  display: inline-flex;
  width: 56px; height: 56px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand-ink);
  font-size: 26px;
  margin-bottom: var(--s-4);
}
.fdn-vfy__title {
  font: 800 22px/1.2 var(--font-sans);
  color: var(--text);
  letter-spacing: -.01em;
  margin: 0 0 var(--s-2);
}
.fdn-vfy__sub {
  font: 500 14px/1.6 var(--font-sans);
  color: var(--text-muted);
  margin: 0 0 var(--s-5);
}
.fdn-vfy__sub b { color: var(--text); }
.fdn-vfy__input {
  width: 100%;
  height: 56px;
  text-align: center;
  font: 700 22px/1 var(--font-sans);
  letter-spacing: 10px;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: none;
}
.fdn-vfy__input::placeholder { letter-spacing: 6px; color: var(--text-subtle); }
.fdn-vfy__input:focus {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-050);
  color: var(--text);
  outline: none;
}
.fdn-vfy__submit { width: 100%; margin-top: var(--s-4); min-height: 48px; }
.fdn-vfy__resend {
  margin: var(--s-5) 0 0;
  font: 500 13.5px/1.5 var(--font-sans);
  color: var(--text-muted);
}
.fdn-vfy__resend a { color: var(--brand-ink); font-weight: 700; text-decoration: none; }
.fdn-vfy__resend a:hover { text-decoration: underline; }
/* validation output: CI form_error()'s bare <p> + parsley's list + the
   legacy .error span all read as danger text */
.fdn-vfy__form > p,
.fdn-vfy__form .error,
.fdn-vfy__form .parsley-errors-list {
  color: var(--danger-ink);
  font: 500 12.5px/1.4 var(--font-sans);
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
/* S4 — "Popular" rail on the restaurant page (order-history driven, first tab
   on every restaurant). Same .fdn-fcard layout as Featured, but wrapped in a
   soft lighter-green highlight panel so it reads as the star section. Rank
   badge on genuinely most-ordered items + a fire glyph on the title.
   --brand-050 is theme-aware (pale lime in light, deep olive in dark). */
#fdn-popular {
  background: var(--brand-050);
  border-radius: var(--r-xl);
  padding: var(--s-5) clamp(14px, 2vw, 22px) var(--s-6);
}
#fdn-popular .fdn-rail-head { margin-bottom: var(--s-4); }
#fdn-popular .fdn-rail-title { color: var(--brand-ink); }
/* the rail arrows sit on the green — keep them on a solid surface chip */
#fdn-popular .fdn-railbtn { background: var(--surface); border-color: var(--border); }
@media (max-width: 575.98px) { #fdn-popular { padding: var(--s-4) var(--s-3) var(--s-5); border-radius: var(--r-lg); } }
.fdn-rail-title__ic { color: var(--brand-ink); margin-right: 2px; }
.fdn-fcard__rank {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  font: 800 12px/1 var(--font-sans);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ---- On-sale marking (dish cards + dish sheet) ----
   Only renders when the RESTAURANT put the dish on sale (their final_price is
   below their price) — we never compute a price, we just show both of theirs.
   The "-51%" pill sits TOP-RIGHT so it never collides with the rank badge
   (top-left) or the add button (bottom-right). Same lime-fill/--on-brand
   language as .fdn-fcard__rank; both tokens are theme-aware, so light + dark
   are covered without an override. */
.fdn-saletag {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  font: 800 12px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  pointer-events: none;
}
/* the restaurant's original price, struck through next to the sale price */
.fdn-price-was {
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 6px;
  text-decoration: line-through;
}

/* ==========================================================================
   Guest footer settings (2026-07-15): the mobile hamburger is gone, so the
   language + appearance controls that used to live in the drawer sit in the
   footer for guests. Laid out as a tidy left-aligned settings stack, capped
   so it doesn't sprawl on wide screens. Token-driven → dark mode for free.
   ========================================================================== */
.fdn-footer__settings {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
  max-width: 320px;
  margin-top: var(--s-5);
}
.fdn-footer__settings .fdn-langsw,
.fdn-footer__settings .fdn-theme { margin: 0; padding: 0; border: 0; width: 100%; }


/* ==========================================================================
   2026-07-15 MOBILE-POLISH AUDIT fixes (parallel per-page audit + adversarial
   verify vs the approved cart/checkout bar). Every rule is mobile-scoped
   (<=991.98/767.98/575px) or component-local, so desktop (>=992px) is
   untouched; tokens only (no hex/orange/#fff). See memory: mobile-polish-audit.
   ========================================================================== */

/* CONTACT — the form floated bare on the page bg (.fdn-contact-form had ZERO
   CSS). Group it into a surface card like checkout; full-width submit on
   mobile. Class is used only on contact-us.php, so desktop gains the card too. */
.fdn-contact-form {
  display: flex; flex-direction: column; gap: var(--s-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: var(--s-6); margin-top: var(--s-4);
}
@media (max-width: 575px) { .fdn-contact-form { padding: var(--s-5); } }
@media (max-width: 991.98px) { .fdn-contact-form .btn-foodini { width: 100%; } }

/* RESTAURANT — 44px touch targets for the primary "+" add, the rail arrows and
   the sticky category chips (were 40/40/34px); reveal 2-line dish names on
   single-column phones; make the image-less fallback icon actually visible. */
@media (max-width: 991.98px) {
  .fdn-addbtn { width: 44px; height: 44px; }
  .fdn-railbtn { width: 44px; height: 44px; }
  .fdn-resto-nav__link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 767.98px) { .fdn-dishcard__name { -webkit-line-clamp: 2; } }
.fdn-dishcard__media .bi { color: var(--text-muted); }   /* was --text-subtle: ~2.6:1, invisible on --bg-subtle */

/* LISTING — the favourite heart was a 22px hit target (~28 per page). Grow the
   hit area to a true 44px WITHOUT moving the drawn glyph (the -11px margins
   cancel the 11px pad, so row height + right-edge alignment are unchanged);
   mobile-only so the desktop mouse target stays compact. */
@media (max-width: 991.98px) {
  .fdn-card__fav { box-sizing: border-box; width: 44px; height: 44px; padding: 11px; margin: -11px; }
}

/* ADDRESS pages — the tag pills (Home/Office/Other) were a shared 36px label;
   bump to 44px page-scoped so the compact filter-panel + modal pills stay. */
@media (max-width: 991.98px) { .fdn-addrpage .fdn-choices label { min-height: 44px; } }

/* TRENDING / full-page list empty states — were top-weighted with a big void
   (the empty #restaurant grid kept its 48px mb-5 on top of the state's own top
   pad). Collapse that gap, center the state in the viewport, and give it a
   surface card. Scoped to .fdn-home so the shared inline/error/drawer states
   (plain .state-foodini) are untouched. */
@media (max-width: 991.98px) {
  .fdn-home #restaurant.fdn-grid:not(:has(*)) { margin-block: 0; }
  .fdn-home .state-foodini {
    min-height: 52vh; justify-content: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
    padding: var(--s-8) var(--s-6); max-width: 420px; margin-inline: auto;
  }
}

/* ==========================================================================
   S4-3 a11y — 44px TAP TARGETS (DESIGN-SYSTEM §6 "Tap targets >= 44px").
   Measured at 390px before this block: .fdn-searchclear 28x28.8,
   .fdn-cartclose 36, .fdn-auth__close 40,
   .fdn-dish__close 40, .fdn-suggest__tab 40 tall ("Pjata" only 38.5 wide).

   These are art-directed icon buttons — a 44px VISIBLE clear button would fill
   the 46px search pill. So instead of
   inflating the circles, expand the HIT AREA with an invisible ::before overlay
   (a transparent pseudo-element still hit-tests, and it belongs to the button,
   so clicks/taps land on the button itself). Same intent as .fdn-card__fav's
   existing padding/negative-margin trick, but with zero visual change.
   Insets are per-element: 44 - own size, halved.
   ========================================================================== */
.fdn-cartclose { position: relative; }            /* was static; anchor the ::before */
.fdn-cartclose::before        { content: ""; position: absolute; inset: -4px; }  /* 36 -> 44 */
.fdn-auth__close::before      { content: ""; position: absolute; inset: -2px; }  /* 40 -> 44 */
.fdn-dish__close::before      { content: ""; position: absolute; inset: -2px; }  /* 40 -> 44 */
.fdn-searchclear::before      { content: ""; position: absolute; inset: -8px; }  /* 28 -> 44 */

/* the suggest tabs are text, not art — grow them for real. inline-flex so the
   label stays centred once min-height exceeds the line box; the -1px margin +
   transparent border-bottom underline indicator are preserved. */
.fdn-suggest__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 10px;
}

/* ==========================================================================
   S4-3 a11y — dish cards: keyboard-operable "open detail" (DESIGN-SYSTEM §6).
   The card open-detail used to be onclick on the <article> — mouse-only,
   keyboard-unreachable, and wrapping it in role=button would have hidden the
   inner + add button from assistive tech. Instead a transparent, named
   <button class="…__open"> is stretched over the whole card (real button =
   native Enter/Space + the global brand :focus-visible ring traces the card).
   The card is the positioned ancestor; the media layer sits above the overlay
   but is pointer-events:none so image clicks fall THROUGH to the overlay
   (→ open detail), while the + add button re-enables pointer-events and stacks
   above everything (→ add to cart, with its own aria-label). Purely
   interaction plumbing — zero visual change (the overlay is transparent). */
.fdn-fcard, .fdn-dishcard { position: relative; }
.fdn-fcard__open, .fdn-dishcard__open {
  position: absolute; inset: 0; z-index: 1;
  background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
}
.fdn-fcard__media, .fdn-dishcard__media { z-index: 2; pointer-events: none; }
.fdn-fcard .fdn-addbtn, .fdn-dishcard .fdn-addbtn { z-index: 3; pointer-events: auto; }


/* =====================================================================
   S4-14 -- checkout order summary as the bill (S4-2's look, carried to the
   page). Additive skin on the existing aside card: every id/class/hook the
   totals JS drives is untouched -- this is chrome only. The bill cue is the
   PERFORATION ONLY -- the card keeps its normal rounded bottom (a torn
   bottom edge was tried 2026-07-16 and rejected: "this looks bad ... make
   it like it used to be"). The half-circle side bites are GONE too — same
   user request as the cart receipt's ("i dont want anything behind the half
   circles, i need it empty"): any painted disc reads as a gray blob. The
   perforation is the dashed rule alone. */
.fdn-tkt {
  position: relative;
}
/* the plain divider above the totals becomes the perforation: dashed rule,
   full-bleed to the card edges */
.fdn-tkt .fdn-co__divider {
  position: relative; height: 0; background: transparent;
  border-top: 2px dashed var(--border-strong);
  margin: var(--s-5) calc(var(--s-5) * -1);
}
/* the totals heading reads like a receipt section stamp */
.fdn-tkt .fdn-co__totaltitle { letter-spacing: .04em; text-transform: uppercase; font-size: 13px; color: var(--text-muted); }

/* (the tracking-widget torn stub that lived here was removed the same day it
   was added -- user: "the rips are too much, need less rips". The tracking
   widget is back to its previous look.) */


/* =====================================================================
   S4-15 -- checkout extras under the hold-to-order button. */

/* (the printed "Faleminderit, {name}!" greeting that lived here moved again —
   it is now the post-order thanks toast on the home screen, S4-8 v7) */

/* priority delivery (S4-15): one switch row above hold-to-order. Rendered
   only when the platform flag is on AND the vendor quote carries a charge;
   JS shows it only for By_driver. The lightning + fee make the trade
   obvious at a glance. */
.fdn-co-prio { margin: var(--s-4) 0 0; }
.fdn-co-prio__btn {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--surface); padding: 12px 14px;
  cursor: pointer; text-align: left; color: var(--text);
  transition: border-color 160ms ease, background 160ms ease;
}
.fdn-co-prio__btn[aria-checked="true"] {
  border-color: var(--brand);
  background: var(--brand-050);
}
.fdn-co-prio__ic {
  flex: 0 0 auto; display: inline-flex; font-size: 18px; color: var(--brand-ink);
}
.fdn-co-prio__txt { flex: 1 1 auto; min-width: 0; }
.fdn-co-prio__txt b { display: block; font: 700 13.5px/1.3 var(--font-sans); }
.fdn-co-prio__txt small { display: block; margin-top: 2px; font: 500 11.5px/1.35 var(--font-sans); color: var(--text-muted); }
.fdn-co-prio__fee {
  flex: 0 0 auto; font: 800 13px/1 var(--font-sans); color: var(--brand-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* the switch: simple track + knob, brand-filled when on */
.fdn-co-prio__switch {
  flex: 0 0 auto; position: relative; width: 40px; height: 24px;
  border-radius: var(--r-pill); background: var(--border-strong);
  transition: background 160ms ease;
}
.fdn-co-prio__switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform 180ms ease;
}
.fdn-co-prio__btn[aria-checked="true"] .fdn-co-prio__switch { background: var(--brand); }
.fdn-co-prio__btn[aria-checked="true"] .fdn-co-prio__switch::after { transform: translateX(16px); }
html.fdn-dark .fdn-co-prio__btn[aria-checked="true"] { background: rgba(141, 198, 63, .12); }
@media (prefers-reduced-motion: reduce) {
  .fdn-co-prio__btn, .fdn-co-prio__switch, .fdn-co-prio__switch::after { transition: none !important; }
}

/* ---- Drinks-upsell stepper physics (#drinks-model) ----
   The minus visibly sleeps at 0 (0 = "no drink" is a legal state again) and
   the count pops when it changes. Animation honours reduced-motion. */
#drinks-model .quantity .minus[aria-disabled="true"] { opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  #drinks-model .qty.fdn-qty-pop { animation: fdn-qty-pop 180ms ease; }
}
@keyframes fdn-qty-pop {
  50% { transform: scale(1.22); }
}

/* ---- S4-16: animated theme switch ----
   The dark<->light flip used to repaint the page in one frame — a hard
   flash. fdnThemeSet (inc/script.php) now runs it two ways:

   1. View Transitions (Chromium/Safari): the old theme is held as a static
      snapshot while the NEW theme sweeps over it — a circle growing from
      the scooter switch, driven by a JS clip-path animation on
      ::view-transition-new(root). The default crossfade is disabled below
      (the sweep IS the animation); with it left on, the old frame fades
      while the circle grows and the two effects fight. mix-blend-mode:
      normal keeps both layers opaque so no half-blended in-between frame
      ever shows.

   2. html.fdn-theme-xfade (no-View-Transitions fallback): a one-shot
      ~.45s window where every colour-ish property crossfades. The scooter
      scene is excluded — its sun/moon/ride choreography (S3-11) has its
      own tuned timings and must not be re-eased. transition-property is a
      REPLACING longhand, so during the window other transitions (hovers
      etc.) pause animating; that is intended — during a theme swap only
      colours should move. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* S4-16b direction: switching TO LIGHT keeps the outgoing DARK frame on
   top so the JS animation can shrink it back into the switch — the exact
   contrary of the to-dark grow (fdnThemeSet sets html.fdn-vt-out for the
   duration of that transition only). */
html.fdn-vt-out::view-transition-old(root) { z-index: 1; }

/* S4-16b settle: while a theme swap is in flight every element jumps
   straight to its themed state. Bootstrap-style per-element colour
   transitions (~.15s — the header address pill is an .accordion-button)
   otherwise re-play INSIDE the revealed new theme, reading as buttons
   "lighting up" a second time. The scooter scene is excluded — its ride
   is the choreography, not a leak. */
html.fdn-theme-settle *:not(.fdn-appearance):not(.fdn-appearance *),
html.fdn-theme-settle *:not(.fdn-appearance):not(.fdn-appearance *)::before,
html.fdn-theme-settle *:not(.fdn-appearance):not(.fdn-appearance *)::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

html.fdn-theme-xfade *:not(.fdn-appearance):not(.fdn-appearance *),
html.fdn-theme-xfade *:not(.fdn-appearance):not(.fdn-appearance *)::before,
html.fdn-theme-xfade *:not(.fdn-appearance):not(.fdn-appearance *)::after {
  transition-property: background-color, color, border-color, fill, stroke, box-shadow !important;
  transition-duration: .45s !important;
  transition-timing-function: ease !important;
  transition-delay: 0s !important;
}

/* ============================================================
   Wolt-style footer reveal (desktop ≥992px) — paired with the
   hoist script in inc/footer.php. The footer is moved to be a
   direct child of <body> and pinned to the viewport bottom, and
   .main is an opaque cover (var(--bg)) stacked ABOVE it.

   2026-07-21 (user: "the footer buttons are not pressable"): the
   footer used to be z-index:-1, painted BEHIND <body>, so the
   reserved gap — which is <body>'s own padding — captured every
   click and the links were visible-but-dead. Fix: cover the footer
   the honest way instead — .main gets position:relative; z-index:1
   and the footer sits at z-index:0. At rest .main(1) covers the
   footer(0); in the revealed gap nothing is painted over the footer,
   so its links are the real hit target.

   Making .main a stacking context is SAFE here (verified): the
   modals (z-index 1060) and the cart drawer (z-index 999) are
   direct <body> children, so they still stack above .main(1); the
   header (z-index 100) lives INSIDE .main and its only body-level
   rival is .fdn-search-dim (z-index 99), which on desktop is inert
   (opacity:0; pointer-events:none — it only turns on for the <992px
   mobile search overlay, where reveal is off). All of this is scoped
   to ≥992px, so mobile / no-JS keep the normal in-flow footer.
   ============================================================ */
html.fdn-reveal-on .main {
  background: var(--bg);
}
@media (min-width: 992px) {
  /* Reserve the reveal gap on BODY, not as .main's margin-bottom: a bottom
     margin on the last in-flow child collapses through to <body> and does
     NOT extend the scroll height, so tall pages got no reveal space. Padding
     never collapses and always adds to the scrollable area. On desktop <body>
     has no other padding (the mobile bottom-nav padding is < 992px only). */
  html.fdn-reveal-on body {
    padding-bottom: var(--fdn-footer-h, 0px);
  }
  html.fdn-reveal-on .main {
    /* opaque cover stacked ABOVE the footer so the footer's links are
       clickable when revealed (see the block comment above) */
    position: relative;
    z-index: 1;
    /* soft cast so the page reads as lifting off the revealed footer */
    box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .22);
    /* 2026-07-20 (user): SHORT pages (contact, empty states) were shorter
       than the viewport, so the fixed footer showed through beneath the
       content instead of being revealed by scroll. Elongate the opaque cover
       to always fill the viewport — every page then covers the footer at rest
       and reveals it over exactly the reserved scroll gap. */
    min-height: 100vh;
  }
  html.fdn-reveal-on body > .fdn-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin-top: 0;
    z-index: 0;
  }
}


/* ==========================================================================
   S5 — Wolt-style discovery accents (2026-07-20)

   1) .fdn-band — themed section bands for chosen rails ("here and there",
      not everywhere): same visual language as the #fdn-offers deals band
      (S3-8) — rounded-xl tinted radial, hairline accent border, emoji badge
      chip before the title, faint oversized glyph on the right edge.
      Themes pull ONLY from the token ramps (sun=warning, lime=brand,
      mint=success), so dark mode re-tints for free and AA text comes from
      the -ink twins. color-mix accents all carry plain-token fallbacks.

   2) .fdn-brand — "Top brands" logo tiles (Wolt reference): square light
      plate with the mark letterboxed (vendor art is landscape; no square
      logo exists anywhere), name strip below. The plate stays LIGHT in dark
      mode — third-party marks are drawn for light grounds.
   ========================================================================== */

.fdn-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-6) var(--s-5);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.fdn-band > .fdn-rail-head { position: relative; z-index: 1; }
.fdn-band .fdn-rail-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fdn-band .fdn-rail-title::before {
  content: var(--fdn-band-emoji, "");
  content: var(--fdn-band-emoji, "") / "";  /* decorative — silent for SR */
  flex: 0 0 auto;
  display: none;                            /* themes turn the chip on */
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: var(--r-md);
  font-size: 0.62em;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
.fdn-band .fdn-rail-sub { color: var(--fdn-band-ink, var(--text-muted)); font-weight: 600; }
.fdn-band .fdn-viewmore { color: var(--fdn-band-ink, var(--brand-ink)); }
/* faint oversized glyph floating on the right edge, clipped by the band */
.fdn-band--sun .fdn-rail-title::before,
.fdn-band--lime .fdn-rail-title::before,
.fdn-band--mint .fdn-rail-title::before { display: inline-grid; }
/* S5b: cuisine-rail titles carry their fdn-cat artwork inline */
.fdn-rail-title__ic {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: -6px;
  margin-right: var(--s-2);
}
.fdn-band::after {
  content: var(--fdn-band-emoji, "");
  content: var(--fdn-band-emoji, "") / "";  /* decorative — silent for SR */
  position: absolute;
  right: -10px;
  top: -22px;
  font-size: 110px;
  line-height: 1;
  opacity: 0.10;
  transform: rotate(12deg);
  pointer-events: none;
}

/* sun — the promoted top-placement rail (warm gold) */
.fdn-band--sun {
  --fdn-band-ink: var(--warning-ink);
  --fdn-band-emoji: "🪙";   /* coin */
  background: var(--warning-050);
  background: radial-gradient(140% 120% at 50% -30%,
              color-mix(in srgb, var(--warning) 16%, var(--warning-050)) 0%,
              var(--warning-050) 62%);
  border-color: color-mix(in srgb, var(--warning-ink) 18%, transparent);
}
.fdn-band--sun .fdn-rail-title::before {
  background: var(--warning-050);
  background: color-mix(in srgb, var(--warning) 26%, var(--warning-050));
}

/* lime — best-sellers (brand ramp, "fire") */
.fdn-band--lime {
  --fdn-band-ink: var(--brand-ink);
  --fdn-band-emoji: "🔥";   /* fire */
  background: var(--brand-050);
  background: radial-gradient(140% 120% at 50% -30%,
              color-mix(in srgb, var(--brand) 16%, var(--brand-050)) 0%,
              var(--brand-050) 62%);
  border-color: color-mix(in srgb, var(--brand-ink) 18%, transparent);
}
.fdn-band--lime .fdn-rail-title::before {
  background: var(--brand-050);
  background: color-mix(in srgb, var(--brand) 26%, var(--brand-050));
}

/* mint — community favourites (success ramp, "green heart") */
.fdn-band--mint {
  --fdn-band-ink: var(--success-ink);
  --fdn-band-emoji: "💚";   /* green heart */
  background: var(--success-050);
  background: radial-gradient(140% 120% at 50% -30%,
              color-mix(in srgb, var(--success) 14%, var(--success-050)) 0%,
              var(--success-050) 62%);
  border-color: color-mix(in srgb, var(--success-ink) 18%, transparent);
}
.fdn-band--mint .fdn-rail-title::before {
  background: var(--success-050);
  background: color-mix(in srgb, var(--success) 22%, var(--success-050));
}

/* cards keep their surface, so they lift off the tint exactly like the
   deals band promos; nothing else inside the band needs restyling */

@media (max-width: 575.98px) {
  .fdn-band {
    border-radius: var(--r-lg);
    padding: var(--s-4) var(--s-3) var(--s-3);
  }
  .fdn-band::after { font-size: 82px; right: -14px; top: -18px; }
}

/* ---- Top brands tiles ----
   v2 (user: "make a better outline, don't keep the original design"):
   the strip-under-photo box became a bold full-image brand card — artwork
   covers the whole rounded-xl tile, the name sits ON the photo over a dark
   scrim (always-dark scrim + white text = identical in both themes), and
   hovering draws a brand ring + lift. Markup unchanged (logo/name spans). */
.fdn-brandrail { align-items: stretch; }
.fdn-brand {
  flex: 0 0 auto;
  position: relative;
  width: 190px;
  aspect-ratio: 1 / 1.15;
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-subtle);      /* shows only while the photo loads */
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.fdn-brand:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand);        /* the lime ring is the hover outline */
  text-decoration: none;
}
.fdn-brand__logo {
  position: absolute;
  inset: 0;
  display: block;
}
.fdn-brand__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fdn-brand__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px var(--s-4) var(--s-3);
  /* scrim, not a panel: the photo runs to the card edge underneath */
  background: linear-gradient(180deg, rgba(10, 14, 6, 0) 0%, rgba(10, 14, 6, 0.78) 68%);
  color: #FFFFFF;
  font: 800 15px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
  .fdn-brand { width: 148px; border-radius: var(--r-lg); }
  .fdn-brand__name { padding: 32px var(--s-3) var(--s-2); font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fdn-brand { transition: none; }
  .fdn-brand:hover { transform: none; }
}

/* ==========================================================================
   S5f — "Pjatat më të shitura" in the Oferta promo-card style (user
   2026-07-21). The card scope above widened from #fdn-offers to
   a plain "#fdn-offers X, #fdn-dishdeals X" selector list. Deliberately NOT
   :is(): these rules are load-bearing, and a browser that does not know a
   pseudo-class drops the WHOLE rule, which would strip the deals cards that
   have shipped for months. The list is identical in specificity (both arms
   are one id) and is understood everywhere. The section keeps the lime band
   (its own tint + fire chip), and the %-badge ::before rules stay
   deals-only. Below: the one thing a dish card has that a deal card does
   not — the restaurant's own price line (fdn_price_html — shown, never
   computed), sitting between the restaurant name and the CTA.
   ========================================================================== */
.fdn-promo__price { font: 800 15px/1.2 var(--font-sans); color: var(--text); }
.fdn-promo__price .fdn-price-was { color: var(--text-muted); font-weight: 600; font-size: 12.5px; }
/* title keeps 2 lines; the restaurant line yields to the price row */
#fdn-dishdeals .fdn-promo__sub { -webkit-line-clamp: 1; }

/* ==========================================================================
   Legacy overrides that used to ride an inline <style> in inc/stylesheet.php
   (and a duplicate one in restaurant-menu.php). That block was the LAST
   stylesheet in the head of every page, so it silently outranked every
   file-based rule for these selectors site-wide. This file already loads
   after style.css, so the cascade result is unchanged — it is just visible
   and overridable now.
   ========================================================================== */
.product-listing-section {
  display: block;
}

/* ---- address actions POST instead of linking (2026-07-27) ---------------
   setPrimaryAddress / delete_address used to be plain <a href> GETs. Anything
   that merely FOLLOWS a url could fire them - browser prefetch, a link
   scanner, a crawler - and a third-party page could forge one with <img src>,
   because CI's CSRF filter only guards POST. They are <form method="post">
   now (inc/fdn-csrf.php injects the token at submit time).
   The form must not disturb the flex rows it sits in, and each button must
   keep looking exactly like the anchor it replaced - so every rule below sets
   ONLY properties the component class does not already own. */
.fdn-actform { display: contents; }
/* belt-and-braces: if display:contents is ever ignored, the row form still
   behaves like the full-width anchor it replaced */
.fdn-actform--row { flex: 1 1 auto; min-width: 0; }
button.fdn-addrrow__main {
  background: none; border: 0; cursor: pointer;
  width: 100%; text-align: left; font-family: inherit;
}
button.fdn-addrrow__act,
button.fdn-co__addrdel {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit;
}
button.fdn-co__addrdel { display: inline-flex; align-items: center; }
button.fdn-chip { border: 0; cursor: pointer; }
button.fdn-co__chip { cursor: pointer; }


/* ================= 2026-07-27 mobile/responsive QA fixes ================= */

/* Dark mode: the footer social marks are <img> SVGs with the fill baked in as
   #010101 and no CSS hook, so the dark-theme token remap could not reach them
   — on the dark footer they were solid near-black glyphs with no counterform.
   They are monochrome, so a straight invert is exact rather than approximate. */
html.fdn-dark .fdn-footer__social img { filter: invert(1); }

/* The 44x44 hit area for the social links existed only inside the mobile media
   query, so from 992px up they collapsed to the 28px image box. Hit-area size
   is not a viewport concern (WCAG 2.5.5 / project S4-3) — apply it at every
   width. Purely a hit area: the icon itself stays 28px. */
.fdn-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Footer legal links were 20px-tall targets sitting directly above the page
   edge, the hardest place on a phone to hit accurately. */
.fdn-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* ============ 2026-07-28 search panel: Uber-style single card ============ */

/* the ::before card fades in with the list instead of snapping */
@keyframes fdnCardIn { from { opacity: 0; } to { opacity: 1; } }

/* Tab row. Permanent now (it used to render only for a query WITH hits), so it
   also acts as the bridge between the field and the list. Its hairline runs the
   full card width and the active underline sits on that line. */
.fdn-suggest__tabs {
  display: flex;
  align-items: stretch;
  gap: var(--s-5);
  margin: 0 calc(-1 * var(--s-4)) var(--s-2);
  padding-inline: var(--s-4);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}
.fdn-suggest__tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--s-3) 0;
  font: 500 15px/1.4 var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  /* underline drawn as an inset shadow ON the shared hairline, so switching
     tabs never changes the row height and the list below cannot shift */
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 160ms ease, box-shadow 160ms ease;
}
.fdn-suggest__tab:hover { color: var(--text); }
.fdn-suggest__tab.is-active {
  color: var(--text);
  font-weight: 700;
  /* brand green as a FILL, never as label text — keeps the label at full AA */
  box-shadow: inset 0 -2px 0 var(--brand);
}
.fdn-suggest__tab:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: -3px;
  border-radius: var(--r-sm);
}
/* This block's `padding: var(--s-3) 0` above resets the padding-inline: 10px the
   S4-3 tap-target pass gave these tabs, dropping the SHORT labels back under
   44px wide ("Pjata" ~36). Padding cannot come back: the active underline is now
   an inset box-shadow spanning the border box, so widening the box widens the
   underline and changes the new design. Use the invisible ::before overlay this
   file already established for the icon buttons above — hit area only, zero
   visual change. min-height: 44px from S4-3 still applies, so height is fine. */
.fdn-suggest__tab { position: relative; }
.fdn-suggest__tab::before { content: ""; position: absolute; inset: 0 -4px; }

.fdn-suggest__panel { outline: none; }

/* divider BETWEEN groups only: one directly under the tab row would double up
   with the tab row's own border */
.fdn-suggest__group + .fdn-suggest__group { border-top: 1px solid var(--border); }

/* height morph on tab switch (JS supplies the from/to heights) */
.fdn-suggest.is-swapping {
  overflow: hidden;
  transition: height 220ms cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 991.98px) {
  /* The mobile sheet's panel is already padding-inline: 0 (see
     .fdn-searchwrap--overlay .fdn-suggest), so the tab row ALREADY reaches its
     edges — there is nothing to bleed into. A negative margin here just pushes
     12px past the panel on each side, and because .fdn-suggest carries
     overflow-y: auto, overflow-x computes to auto too, so that bleed became a
     real sideways scroll inside the panel. Both sides of the desktop
     margin/padding pair must be zeroed explicitly: the base rule sets them via
     the `margin` shorthand, so merely dropping one would leave a 16px bleed. */
  .fdn-suggest__tabs {
    margin-inline: 0;
    padding-inline: 0;
    gap: var(--s-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fdn-searchwrap--overlay::before { animation: none; }
  .fdn-suggest.is-swapping { transition: none; }
  .fdn-suggest__tab { transition: none; }
}


/* ---- first-open skeleton ----------------------------------------------
   Geometry deliberately MIRRORS .fdn-suggest__row (same 64px rhythm, same
   44px round thumb, same gap and padding) so when the real rows replace it
   the card height barely moves — the whole point is that nothing jumps. */
.fdn-suggest__skelrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-1);
  min-height: 64px;
}
.fdn-suggest__skelimg {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  flex: none;
}
.fdn-suggest__skeltext {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
}
.fdn-suggest__sec--skel { padding-block: var(--s-3) var(--s-1); }
/* the real list fades in over the placeholder rather than cutting */
.fdn-suggest__list:not(.is-skel) { animation: fdnListIn 200ms ease both; }
@keyframes fdnListIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 991.98px) {
  .fdn-suggest__skelimg { width: 40px; height: 40px; }   /* matches the mobile thumb */
}

@media (prefers-reduced-motion: reduce) {
  .fdn-suggest__list:not(.is-skel) { animation: none; }
  /* the shimmer itself is motion: hold a flat tone instead */
  .fdn-suggest__skelrow .skel { animation: none; }
}

/* ==========================================================================
   2026-07-28 — discovery filter row.

   .chip-foodini--clear: the reset action that replaced the deleted Filtra
   panel's Reset button. Deliberately NOT a brand-filled chip - it is not an
   active filter, so it reads as a quiet outline until hovered, and it only
   exists in the DOM-visible sense while something is actually on.
   (The .fdn-lede promo strip that used to be documented here was removed on
   2026-07-29 — see the note below.)
   ========================================================================== */
.chip-foodini--clear {
  background: transparent;
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1.5px var(--border);
}
.chip-foodini--clear:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.chip-foodini--clear .bi-x-lg { font-size: 11px; }

/* .fdn-lede (lede heading + Kicker/Oferta banner pair) was REMOVED
   2026-07-29 at the owners' request, markup and styles together. */

/* ==========================================================================
   2026-07-29 — checkout enrichment.

   (a) .fdn-co-rest — the restaurant identity card at the top of the left
       column. The page named the restaurant only in a small topbar chip, which
       read as "very empty" on the one screen where the customer is committing
       money. Banner + logo + rating/time/cuisine + open-until + address.
   (b) .fdn-co-tkthead — the same identity in miniature at the top of the
       order ticket, mirroring the cart drawer's shop head.
   (c) .fdn-co-prio--koha — the priority switch moved out of the summary
       column into the KOHA group, resized to sit with the .fdn-co-opt tiles.
       CRITICAL: never set `display` on .fdn-co-prio — the JS hides it with the
       `hidden` ATTRIBUTE, which only works while the UA [hidden] rule stands.
   ========================================================================== */

/* .fdn-co-page .fdn-co__card pads every card; this one is edge-to-edge, so it
   needs equal specificity (two classes) plus later source order to win. */
.fdn-co__card.fdn-co-rest {
  padding: 0;
  overflow: hidden;
}
.fdn-co-rest__media {
  position: relative;
  height: 170px;
  background: var(--bg-subtle);
}
.fdn-co-rest__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the banner meets the card surface under the logo - fade it so the circle
   never sits on a hard photo edge */
.fdn-co-rest__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 56%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .34));
}
.fdn-co-rest__body {
  position: relative;
  padding: var(--s-5) var(--s-6) var(--s-6);
}
/* vendor art is always landscape, so the markup asks for a 384x192 box and the
   circle is cropped here (never by the resizer) */
.fdn-co-rest__logo {
  position: absolute;
  top: -36px;
  left: var(--s-6);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--surface), var(--shadow-sm);
}
.fdn-co-rest__over {
  margin: var(--s-4) 0 2px;
  font: 700 11.5px/1.2 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fdn-co-rest__name {
  margin: 0 0 6px;
  font: 800 21px/1.2 var(--font-sans);
  letter-spacing: -.01em;
}
.fdn-co-rest__name a {
  color: var(--text);
  text-decoration: none;
}
.fdn-co-rest__name a:hover {
  color: var(--brand-ink);
  text-decoration: none;
}
.fdn-co-rest__meta {
  margin: 0 0 6px;
  font: 600 14px/1.4 var(--font-sans);
  color: var(--text);
}
.fdn-co-rest__state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  min-width: 0;
  font: 600 13.5px/1.45 var(--font-sans);
  color: var(--text-muted);
}
.fdn-co-rest__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex: 0 0 auto;
}
.fdn-co-rest__sep { opacity: .55; }
/* a long street address must never widen the grid column */
.fdn-co-rest__addr {
  min-width: 0;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- ticket head ---- */
.fdn-co-tkthead {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.fdn-co-tkthead__logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--bg-subtle);
}
.fdn-co-tkthead__txt { min-width: 0; }
.fdn-co-tkthead__txt h6 {
  margin: 0;
  font: 800 14.5px/1.25 var(--font-sans);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdn-co-tkthead__eta {
  margin: 1px 0 0;
  font: 600 12.5px/1.3 var(--font-sans);
  color: var(--text-muted);
}

/* ---- priority switch, re-homed in KOHA ---- */
/* Belt and braces: the JS toggles the `hidden` attribute, so nothing in this
   file may give .fdn-co-prio a display value. */
.fdn-co-prio[hidden] { display: none !important; }
.fdn-co-prio--koha { margin-top: var(--s-3); }
.fdn-co-prio--koha .fdn-co-prio__btn {
  border-radius: var(--r-lg);
  padding: var(--s-4);
  gap: var(--s-3);
}
.fdn-co-prio--koha .fdn-co-prio__ic {
  width: 28px;
  font-size: 20px;
  flex: 0 0 auto;
}
.fdn-co-prio--koha .fdn-co-prio__txt b { font-size: 15px; }
.fdn-co-prio--koha .fdn-co-prio__txt small { font-size: 13px; }

@media (max-width: 991px) {
  .fdn-co-rest__media { height: 140px; }
  .fdn-co-rest__body { padding: var(--s-4) var(--s-5) var(--s-5); }
  .fdn-co-rest__logo { left: var(--s-5); width: 56px; height: 56px; top: -30px; }
  .fdn-co-rest__name { font-size: 19px; }
  .fdn-co-rest__addr { max-width: 22ch; }
}

/* ==========================================================================
   2026-07-29 - top-placement slides get a name.

   User: "in this banner there are no names of the restaurants, add the names
   just like other banners". The slide was artwork ONLY - a bare photo whose
   only identification was whatever logo the restaurant had burnt into its own
   artwork. It becomes a captioned tile: the same photo frame it always had,
   plus a body carrying the name and the shared meta line.

   The body sits on --surface rather than straight on the band: --text-muted
   measures 4.17:1 against the top of .fdn-band--sun's radial (AA wants 4.5),
   while on --surface it is the site-wide 5.4:1 that every other card meta
   line already relies on. Same reason the deals cards in this feed carry a
   panel instead of floating their text on the tint.
   ========================================================================== */
.fdn-topband .fdn-banner.fdn-tpcard {
  /* the photo-only rule above pins height:176px on the <a> itself; the tile is
     now photo + caption, so the frame height moves to __media and the card
     measures itself. Three classes, so it also outranks the 576px override. */
  height: auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.fdn-tpcard__media {
  display: block;
  position: relative;   /* the closed tag pins to this box */
  flex: 0 0 auto;
  height: 176px;
  /* deliberately NO background: .skel paints the shimmer here and this rule
     is later in the file at equal specificity, so a background would win and
     the tile would load as a flat grey box instead. */
}
.fdn-tpcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fdn-tpcard__body {
  display: block;
  min-width: 0;
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.fdn-tpcard__name {
  display: block;
  font: 700 16px/1.3 var(--font-sans);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fdn-tpcard:hover .fdn-tpcard__name { color: var(--brand-ink); }
.fdn-tpcard__meta {
  display: block;
  margin-top: 2px;
  font: 500 13px/1.45 var(--font-sans);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .fdn-tpcard__media { height: 128px; }
  .fdn-tpcard__body { padding: var(--s-2) var(--s-3) var(--s-3); }
  .fdn-tpcard__name { font-size: 15px; }
  .fdn-tpcard__meta { font-size: 12px; }
}

/* ==========================================================================
   2026-07-29 - tracking before a courier exists.

   The widget assumed every tracked order had a driver, because the query
   behind it only ever returned orders that did (see
   Common::get_delivery_orders). Now that a just-placed order is tracked too,
   the avatar slot needs something to hold: a neutral shop mark, same 50px
   box as the photo it stands in for, so the row does not reflow the moment
   dispatch assigns someone.
   ========================================================================== */
.fdn-track-nodriver__ic {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
}

/* ==========================================================================
   2026-07-29 - track-order launcher: a draggable bubble wearing the
   restaurant's picture.

   Replaces the green "Ndiqni porosinE tuaj" pill that sat in the corner of
   every page. User: a bubble with the face of the restaurant, movable by
   mouse, snapping to whichever side you drop it nearest, with the label and a
   glow on hover.

   style.css already fixes .track-order-main to the corner (and clears the
   mobile bottom nav); these rules only reshape it. Once dragged, the JS writes
   inline left/top and sets right/bottom to auto, which beats both.
   ========================================================================== */
.fdn-trkbub.track-order-main {
  width: 60px;
  height: 60px;
  z-index: 1040;                 /* over the feed, under the tracking screen */
  touch-action: none;            /* the drag owns the gesture, not the scroller */
}
.fdn-trkbub .accordion,
.fdn-trkbub .accordion-item,
.fdn-trkbub .accordion-header,
.fdn-trkbub .track-order-button { position: static; margin: 0; }
/* Once the user has moved it, left/top drive the position. style.css pins the
   corner with `right: 7% !important`, which an inline `right:auto` cannot beat
   — so the release is a CLASS: equal weight, later in the file, and it wins. */
.fdn-trkbub.is-placed { right: auto !important; bottom: auto !important; }

.fdn-trkbub__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  transition: transform var(--dur-1, .15s) var(--ease-out, ease);
}
.fdn-trkbub__btn:active,
.fdn-trkbub.is-dragging .fdn-trkbub__btn { cursor: grabbing; }
.fdn-trkbub__btn:hover { transform: scale(1.06); }
.fdn-trkbub.is-dragging .fdn-trkbub__btn { transform: scale(1.10); }

/* the disc itself: a --surface plate, because vendor artwork is landscape and
   is FITTED inside (never cropped) - the plate is what makes it read round */
.fdn-trkbub__disc {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-lg);
}
.fdn-trkbub__img {
  width: 100%;
  height: 100%;
  object-fit: contain;           /* NOT cover: house rule, never crop a vendor image */
  padding: 5px;
  /* the button owns the gesture; the image must not start a native drag or
     become the pointer target mid-drag */
  pointer-events: none;
  -webkit-user-drag: none;
}
.fdn-trkbub__disc { pointer-events: none; }

/* hover glow — a soft brand halo behind the disc */
.fdn-trkbub__glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle,
              color-mix(in srgb, var(--brand) 55%, transparent) 0%,
              transparent 68%);
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
  transition: opacity var(--dur-2, .22s) var(--ease-out, ease),
              transform var(--dur-2, .22s) var(--ease-out, ease);
}
.fdn-trkbub__btn:hover .fdn-trkbub__glow,
.fdn-trkbub__btn:focus-visible .fdn-trkbub__glow,
.fdn-trkbub.is-dragging .fdn-trkbub__glow { opacity: 1; transform: scale(1); }

/* live-order pulse: a quiet brand ring, so the bubble reads as "something is
   happening" rather than as a decorative avatar */
.fdn-trkbub__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: .9;
  pointer-events: none;
  animation: fdn-trkbub-pulse 2.4s ease-out infinite;
}
@keyframes fdn-trkbub-pulse {
  0%   { transform: scale(1);    opacity: .85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* label — sits ABOVE the bubble on hover */
.fdn-trkbub__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  z-index: 2;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--surface);
  font: 700 12.5px/1 var(--font-sans);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1, .15s) var(--ease-out, ease),
              transform var(--dur-1, .15s) var(--ease-out, ease);
}
.fdn-trkbub__tip::after {          /* little pointer down to the bubble */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--text);
}
.fdn-trkbub:hover .fdn-trkbub__tip,
.fdn-trkbub__btn:focus-visible ~ .fdn-trkbub__tip { opacity: 1; transform: translate(-50%, 0); }
/* while dragging the label is just in the way */
.fdn-trkbub.is-dragging .fdn-trkbub__tip { opacity: 0 !important; }

/* parked against an edge the label would overflow the viewport — pull it in */
.fdn-trkbub[data-side="left"] .fdn-trkbub__tip { left: 0; transform: translate(0, 4px); }
.fdn-trkbub[data-side="left"]:hover .fdn-trkbub__tip { transform: translate(0, 0); }
.fdn-trkbub[data-side="left"] .fdn-trkbub__tip::after { left: 30px; }
.fdn-trkbub[data-side="right"] .fdn-trkbub__tip { left: auto; right: 0; transform: translate(0, 4px); }
.fdn-trkbub[data-side="right"]:hover .fdn-trkbub__tip { transform: translate(0, 0); }
.fdn-trkbub[data-side="right"] .fdn-trkbub__tip::after { left: auto; right: 25px; }

/* the flight to the edge after you let go */
.fdn-trkbub.is-settling { transition: left .28s var(--ease-spring, cubic-bezier(.22,1,.36,1)), top .28s var(--ease-spring, cubic-bezier(.22,1,.36,1)); }

html.fdn-dark .fdn-trkbub__tip { background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
html.fdn-dark .fdn-trkbub__tip::after { border-top-color: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  .fdn-trkbub.is-settling { transition: none; }
  .fdn-trkbub__pulse { animation: none; opacity: .55; }
  .fdn-trkbub__btn:hover { transform: none; }
}