@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ================================================================
   FOOD EXPRESS — DESIGN SYSTEM v2
   Single source of truth for the full site redesign.
   All components, pages, and partials must reference these tokens.
   ================================================================ */

:root {

  /* ── Brand palette ── */
  --brand:          #e12114;
  --brand-dark:     #c01b10;
  --brand-xdark:    #9a1509;
  --brand-light:    rgba(225,33,20,.09);
  --brand-mid:      rgba(225,33,20,.18);
  --brand-gradient: linear-gradient(135deg, #e12114 0%, #b91c1c 100%);

  /* ── Neutral / surface ── */
  --dark:           #111827;
  --dark-2:         #1f2937;
  --dark-3:         #374151;
  --surface:        #ffffff;
  --surface-2:      #f9fafb;
  --surface-3:      #f3f4f6;

  /* ── Typography ── */
  --text:           #111827;
  --text-2:         #374151;
  --text-muted:     #6b7280;
  --text-faint:     #9ca3af;
  --font-sans:      'DM Sans', 'Open Sans', sans-serif;
  --font-display:   'Plus Jakarta Sans', 'DM Sans', sans-serif;

  /* ── Border ── */
  --border:         #e5e7eb;
  --border-light:   #f0f0f0;

  /* ── Radii ── */
  --radius-sm:      8px;
  --radius:         12px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-pill:    9999px;

  /* ── Shadows ── */
  --shadow-xs:      0 1px 4px rgba(0,0,0,.05);
  --shadow-sm:      0 2px 8px rgba(0,0,0,.06);
  --shadow:         0 6px 28px rgba(0,0,0,.10);
  --shadow-lg:      0 16px 56px rgba(0,0,0,.16);
  --shadow-brand:   0 6px 20px rgba(225,33,20,.35);
  --shadow-brand-lg:0 10px 32px rgba(225,33,20,.45);

  /* ── Spacing scale ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 96px;

  /* ── Section spacing ── */
  --section-py:     80px;
  --section-py-sm:  48px;

  /* ── Transition ── */
  --transition:     all .26s cubic-bezier(.4,0,.2,1);
  --transition-fast:all .16s cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════════════
   TYPOGRAPHY SCALE
   ════════════════════════════════════════════════ */
body {
  font-family: var(--font-sans);
  color: var(--text);
  background-color: var(--surface-2);
  line-height: 1.6;
}

/* Display / hero headings */
.fe-h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -0.5px;
}
.fe-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.3px;
}
.fe-h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.fe-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}
.fe-small {
  font-size: 13px;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════
   SECTION STRUCTURE
   ════════════════════════════════════════════════ */

/* Section wrapper */
.fe-section {
  padding: var(--section-py) 0;
}
.fe-section--sm {
  padding: var(--section-py-sm) 0;
}
.fe-section--dark {
  background: var(--dark);
  color: #fff;
}
.fe-section--surface {
  background: var(--surface-2);
}

/* Section eyebrow label — "——  BROWSE BY CATEGORY" */
.fe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.fe-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--brand);
  border-radius: 99px;
  flex-shrink: 0;
}

/* Section title block */
.fe-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin: 0 0 12px;
}
.fe-section-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 540px;
  line-height: 1.65;
  margin: 0 auto;
}

/* ════════════════════════════════════════════════
   BUTTON SYSTEM
   ════════════════════════════════════════════════ */

/* Base button — apply alongside fe-btn-* variant */
.fe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  cursor: pointer;
  text-decoration: none !important;
  border: 2px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
  line-height: 1;
}
.fe-btn svg { flex-shrink: 0; }

/* Primary — red gradient fill */
.fe-btn-primary {
  background: var(--brand-gradient);
  color: #fff !important;
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}
.fe-btn-primary:hover {
  background: linear-gradient(135deg, #c91c1c 0%, #991b1b 100%);
  box-shadow: var(--shadow-brand-lg);
  transform: translateY(-2px);
  color: #fff !important;
}
.fe-btn-primary:active { transform: translateY(0); }

/* Outline — red border, transparent fill */
.fe-btn-outline {
  background: transparent;
  color: var(--brand) !important;
  border-color: var(--brand);
}
.fe-btn-outline:hover {
  background: var(--brand-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(225,33,20,.15);
  color: var(--brand) !important;
}

/* Ghost white — for dark/image backgrounds */
.fe-btn-ghost {
  background: rgba(255,255,255,.12);
  color: #fff !important;
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}
.fe-btn-ghost:hover {
  background: rgba(255,255,255,.22);
  border-color: #fff;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Dark pill — app store / secondary dark */
.fe-btn-dark {
  background: var(--dark);
  color: #fff !important;
  border-color: var(--dark);
}
.fe-btn-dark:hover {
  background: var(--dark-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  color: #fff !important;
}

/* Size modifiers */
.fe-btn--sm  { padding: 9px 20px;  font-size: 13px; }
.fe-btn--lg  { padding: 15px 36px; font-size: 15.5px; }
.fe-btn--xl  { padding: 17px 32px; font-size: 16px; letter-spacing: 0.4px; }
.fe-btn--full { width: 100%; }

/* Icon-only pill */
.fe-btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
}
.fe-btn--icon.fe-btn--sm { width: 36px; height: 36px; }
.fe-btn--icon.fe-btn--lg { width: 52px; height: 52px; }

/* ════════════════════════════════════════════════
   CARD SYSTEM
   ════════════════════════════════════════════════ */
.fe-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
}
.fe-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.fe-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.fe-card__body {
  padding: 20px 22px 22px;
}
.fe-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.3;
}
.fe-card__desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}
.fe-card__footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border-light);
  background: var(--surface-2);
}

/* ════════════════════════════════════════════════
   BADGE / PILL LABELS
   ════════════════════════════════════════════════ */
.fe-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
}
.fe-badge--brand   { background: var(--brand-light);  color: var(--brand);  border: 1px solid var(--brand-mid); }
.fe-badge--dark    { background: var(--dark-2);        color: #fff; }
.fe-badge--light   { background: var(--surface-3);     color: var(--text-2); }
.fe-badge--success { background: #dcfce7; color: #15803d; }

/* ════════════════════════════════════════════════
   FORM INPUTS
   ════════════════════════════════════════════════ */
.fe-input {
  display: block;
  width: 100%;
  padding: 12px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--text);
  background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease;
  outline: none;
}
.fe-input::placeholder { color: var(--text-faint); }
.fe-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
.fe-input--pill { border-radius: var(--radius-pill); padding: 12px 22px; }

/* ════════════════════════════════════════════════
   DIVIDER
   ════════════════════════════════════════════════ */
.fe-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  border: none;
  margin: 0;
}

/* ════════════════════════════════════════════════
   UTILITY CLASSES
   ════════════════════════════════════════════════ */
.fe-text-brand  { color: var(--brand) !important; }
.fe-text-muted  { color: var(--text-muted) !important; }
.fe-text-dark   { color: var(--text) !important; }
.fe-text-white  { color: #fff !important; }
.fe-bg-brand    { background: var(--brand) !important; }
.fe-bg-surface  { background: var(--surface) !important; }
.fe-bg-surface2 { background: var(--surface-2) !important; }
.fe-bg-dark     { background: var(--dark) !important; }
.fe-rounded     { border-radius: var(--radius) !important; }
.fe-rounded-lg  { border-radius: var(--radius-lg) !important; }
.fe-rounded-pill{ border-radius: var(--radius-pill) !important; }
.fe-shadow      { box-shadow: var(--shadow) !important; }
.fe-shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.fe-shadow-brand{ box-shadow: var(--shadow-brand) !important; }


body.front-page h1,
body.front-page h2,
body.front-page h3,
body.front-page h4,
body.front-page h5,
.section-how-it-works h2,
.section-how-it-works h5,
.hero-stats-strip .stat-num,
.section-newmobileapp h1,
.section-newmobileapp h5 {
  font-family: 'DM Sans', 'Open Sans', sans-serif;
}

/* ════════════════════════════════════════════════
   GLOBAL COLOR SWAP  green → brand red
   ════════════════════════════════════════════════ */
.btn-green,
.btn-grey:hover,
.badge.badge-green,
.custom-control-input:checked ~ .custom-control-label::before,
.btn-green-line:hover {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.btn-green:hover,
.btn-green:focus {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}
.btn-green-line,
.border-green { border-color: var(--brand) !important; }

ul.top-menu a:hover,
.list-inline a:hover,
.menu-category a:hover,
.siderbar-menu li.active a,
#menu-category .col a.active,
.btn.normal:hover,
.text-green,
a:hover,
.menu-carousel a.active,
.menu-carousel a:hover,
.warm-pink,
.section-title span,
.change-address-wrap a { color: var(--brand) !important; }

.custom-range::-moz-range-thumb    { background-color: var(--brand) !important; }
.custom-range::-webkit-slider-thumb { background-color: var(--brand) !important; }

/* Element-Plus button success → brand */
.el-button--success {
  --el-button-bg-color:            var(--brand) !important;
  --el-button-border-color:        var(--brand) !important;
  --el-button-hover-bg-color:      var(--brand-dark) !important;
  --el-button-hover-border-color:  var(--brand-dark) !important;
  --el-button-active-bg-color:     var(--brand-xdark) !important;
  --el-button-active-border-color: var(--brand-xdark) !important;
}
.el-button--success.is-plain {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  background: var(--brand-light) !important;
}
.el-button--success.is-plain:hover {
  background: var(--brand) !important;
  color: #fff !important;
}
.el-link--success { color: var(--brand) !important; }

.el-switch.is-checked .el-switch__core {
  background-color: var(--brand) !important;
  border-color:     var(--brand) !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--brand) !important;
  border-color:     var(--brand) !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label { color: var(--brand) !important; }

.el-slider__bar  { background-color: var(--brand) !important; }
.el-slider__button { border-color: var(--brand) !important; }
.el-tag--success { background: var(--brand-light) !important; color: var(--brand) !important; border-color: rgba(225,33,20,.2) !important; }
.el-progress-bar__inner { background-color: var(--brand) !important; }
.el-input-number__increase:hover,
.el-input-number__decrease:hover { color: var(--brand) !important; }
.el-rate__item .el-icon { color: var(--brand) !important; }

/* ════════════════════════════════════════════════
   PREMIUM LIGHT GLASS NAVIGATION
   ════════════════════════════════════════════════ */

/* ── Sticky shell — warm frosted white ── */
.premium-nav-shell,
body.front-page > .container-fluid:first-child {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1050;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(225,33,20,.12),
    0 6px 32px rgba(0,0,0,.08);
}

/* Brand-red accent line at very bottom of header */
.premium-nav-shell::after,
body.front-page > .container-fluid:first-child::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent        0%,
    rgba(225,33,20,.4) 15%,
    var(--brand)       50%,
    rgba(225,33,20,.4) 85%,
    transparent       100%
  );
}

/* Remove old top-bar pseudo */
body.front-page > .container-fluid:first-child::before { display: none !important; }

/* ── Nav row ── */
body.front-page #top-navigation,
#top-navigation {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 0 28px;
  min-height: 90px;
  display: flex;
  align-items: center;
}
/* On inner/non-hero pages the nav inherits body bg — give it explicit white */
body:not(.front-page) #top-navigation {
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 12px rgba(0,0,0,.06) !important;
}

.premium-nav-col {
  padding-top: 8px;
  padding-bottom: 8px;
}
.widget-nav-below {
  width: 550px;
  padding: 4px 0 0;
  margin-left: 23px;
}
.widget-nav-below .widget-dropdown {
  width: 100%;
}
.widget-nav-below .widget-dropdown button {
  width: 100%;
  max-width: 550px;
}

/* ── Push content below fixed nav ── */
.page-content {
  padding-top: 92px;
}

/* ── HERO — banner starts directly below fixed nav ── */
body.front-page .page-content           { padding-top: 0; }
body.front-page #vm_home_search        { margin-top: 0; padding-top: 92px; }
body.front-page #main-search-banner    { height: 640px !important; }
body.front-page #main-search-banner .banner-center { padding-top: 40px !important; }

/* ── Logo ── */
.top-logo {
  padding: 5px 0;
  display: flex;
  align-items: center;
}
.top-logo img.img-200 {
  max-height: 90px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  transition: var(--transition);
}
.top-logo img.img-200:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 4px 12px rgba(225,33,20,.25));
}

/* ── Centre quick-nav links ── */
.premium-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 20px;
}
.pnl-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--dark-3) !important;
  font-family: 'DM Sans', 'Open Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 10px;
  transition: var(--transition);
  text-decoration: none !important;
  white-space: nowrap;
  position: relative;
}
.pnl-item::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 15px;
  right: 15px;
  height: 2px;
  background: var(--brand);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.pnl-item i {
  font-size: 12px;
  color: var(--brand);
}
.pnl-item:hover,
.pnl-item.pnl-active {
  color: var(--brand) !important;
  background: var(--brand-light) !important;
}
.pnl-item:hover::after,
.pnl-item.pnl-active::after { transform: scaleX(1); }

.premium-nav-links .pls-wrap {
  margin-left: 10px;
}

/* ── Right-side nav list ── */
ul.top-menu {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  height: 90px;
  list-style: none;
}
ul.top-menu > li {
  display: inline-flex !important;
  align-items: center;
}

/* ── Generic links ── */
ul.top-menu a:not(.cart-handle):not([class*="btn"]):not(.dropdown-item) {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--dark-3) !important;
  padding: 7px 12px !important;
  border-radius: 8px;
  transition: var(--transition) !important;
  white-space: nowrap;
}
ul.top-menu a:not(.cart-handle):not([class*="btn"]):not(.dropdown-item):hover {
  color: var(--brand) !important;
  background: var(--brand-light) !important;
}

/* ── Strip legacy left-border ── */
.line-left { border-left: 0 !important; }

/* ── "Sign In" — white ghost pill → red fill on hover ── */
ul.top-menu li.line-left > a[href*="login"] {
  background: #ffffff !important;
  color: var(--brand) !important;
  padding: 10px 26px !important;
  border-radius: 50px !important;
  font-family: 'DM Sans', 'Open Sans', sans-serif;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.4px;
  border: 1.5px solid var(--brand) !important;
  box-shadow: 0 2px 12px rgba(225,33,20,.12) !important;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease !important;
  display: inline-block;
  line-height: 1;
  text-decoration: none !important;
}
ul.top-menu li.line-left > a[href*="login"]:hover {
  background: var(--brand) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(225,33,20,.35) !important;
}

/* ── Cart text — muted dark ── */
ul.top-menu li.line-left > a:not([href*="login"]) {
  color: var(--dark-3) !important;
  font-weight: 600 !important;
}

/* ── Cart icon — light circle button ── */
a.cart-handle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #f4f5f7 !important;
  border: 1.5px solid var(--border) !important;
  color: #374151;
  transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
  padding: 0 !important;
  position: relative;
  text-decoration: none !important;
}
a.cart-handle:hover {
  background: var(--brand-light) !important;
  border-color: rgba(225,33,20,.35) !important;
  color: var(--brand);
  box-shadow: 0 4px 16px rgba(225,33,20,.18);
  transform: scale(1.07);
}
a.cart-handle svg {
  display: block;
  flex-shrink: 0;
  transition: stroke .22s ease;
}
.cart-handle span.badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  bottom: auto !important;
  left: auto !important;
  background: var(--brand) !important;
  color: #fff !important;
  border: 2px solid #fff;
  min-width: 20px !important;
  height: 20px !important;
  width: auto !important;
  border-radius: 50px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 0 4px !important;
  box-shadow: 0 2px 8px rgba(225,33,20,.45);
  animation: badgePop .3s cubic-bezier(.4,0,.2,1);
}
@keyframes badgePop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.basket-header-total {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
  letter-spacing: -0.3px;
  white-space: nowrap;
  margin-top: 2px;
}

/* ── Notification badge ── */
.notification-dropdown {
  display: inline-flex !important;
  align-items: center;
}
.notification-dropdown img.img-30 {
  display: none !important;
}
.notification-dropdown .el-badge__content {
  background: var(--brand) !important;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(225,33,20,.40);
}

/* ── User profile trigger ── */
.userprofile-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 50px !important;
  padding: 5px 14px 5px 5px !important;
  text-decoration: none !important;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  cursor: pointer;
}
.userprofile-trigger:hover,
.userprofile-trigger:focus {
  border-color: rgba(225,33,20,.35) !important;
  box-shadow: 0 4px 16px rgba(225,33,20,.12) !important;
  background: #fff !important;
  text-decoration: none !important;
}
.userprofile-trigger::after {
  display: none !important;
}

/* avatar circle */
.upt-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.upt-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--border);
}
.upt-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* name text */
.upt-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}
.userprofile-trigger:hover .upt-name,
.userprofile-trigger:focus .upt-name {
  color: var(--brand) !important;
}

/* chevron */
.upt-chevron {
  color: #9ca3af;
  flex-shrink: 0;
  transition: transform .22s ease, color .22s ease;
}
.userprofile-trigger:hover .upt-chevron,
.userprofile-trigger:focus .upt-chevron {
  color: var(--brand);
}
.userprofile.show .upt-chevron {
  transform: rotate(180deg);
  color: var(--brand);
}

/* ── Dropdown menu — clean white card ── */
.userprofile .dropdown-menu {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: 18px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.12),
    0 4px 16px rgba(0,0,0,.06) !important;
  padding: 8px !important;
  min-width: 232px !important;
  margin-top: 12px !important;
  animation: navDropIn .2s cubic-bezier(.4,0,.2,1);
}
@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.userprofile .dropdown-menu .dropdown-item {
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 11px 14px !important;
  color: var(--dark-3) !important;
  transition: var(--transition) !important;
}
.userprofile .dropdown-menu .dropdown-item:hover {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
}
.userprofile .dropdown-menu .dropdown-item.with-icon-logout {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  padding-top: 14px !important;
}
.userprofile .dropdown-menu .dropdown-item.with-icon-logout:hover {
  background: rgba(225,33,20,.07) !important;
  color: var(--brand) !important;
}

/* ── Language / currency ── */
ul.top-menu li .bootstrap-select .btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  padding: 6px 8px !important;
  box-shadow: none !important;
}
ul.top-menu li .bootstrap-select .btn:hover { color: var(--brand) !important; }

/* ── Premium Hamburger Button ── */
.premium-menu-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #f4f5f7;
  border: 1.5px solid var(--border);
  padding: 0 12px;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .18s ease;
  position: relative;
  box-sizing: border-box;
}
.premium-menu-btn:hover {
  background: var(--brand-light);
  border-color: rgba(225,33,20,.35);
  box-shadow: 0 4px 16px rgba(225,33,20,.14);
  transform: scale(1.05);
}
.pmb-line {
  display: block;
  height: 2px;
  border-radius: 99px;
  background: #374151;
  transition: width .28s cubic-bezier(.4,0,.2,1),
              transform .32s cubic-bezier(.4,0,.2,1),
              opacity .22s ease,
              background .22s ease;
  transform-origin: center;
}
.pmb-line--top { width: 20px; }
.pmb-line--mid { width: 14px; }
.pmb-line--bot { width: 8px; }

.premium-menu-btn:hover .pmb-line { background: var(--brand); }
.premium-menu-btn:hover .pmb-line--top { width: 20px; }
.premium-menu-btn:hover .pmb-line--mid { width: 20px; }
.premium-menu-btn:hover .pmb-line--bot { width: 20px; }

/* X morph when drawer is open */
.premium-menu-btn.pmb-active {
  background: var(--brand-light);
  border-color: rgba(225,33,20,.35);
}
.premium-menu-btn.pmb-active .pmb-line { background: var(--brand); }
.premium-menu-btn.pmb-active .pmb-line--top {
  width: 20px;
  transform: translateY(7px) rotate(45deg);
}
.premium-menu-btn.pmb-active .pmb-line--mid {
  opacity: 0;
  width: 0;
}
.premium-menu-btn.pmb-active .pmb-line--bot {
  width: 20px;
  transform: translateY(-7px) rotate(-45deg);
}

/* ════════════════════════════════════════════════
   PREMIUM MOBILE DRAWER  (.pmd-*)
   ════════════════════════════════════════════════ */

.pmd-drawer {
  height: 100vh !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: -12px 0 50px rgba(0,0,0,.22) !important;
  border-radius: 0 !important;
}
.pmd-drawer .el-drawer__body {
  flex: 1 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  background: #fff;
}
.pmd-drawer .el-drawer__body::-webkit-scrollbar { width: 4px; }
.pmd-drawer .el-drawer__body::-webkit-scrollbar-track { background: transparent; }
.pmd-drawer .el-drawer__body::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 99px; }

/* ── Header ── */
.pmd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 18px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.pmd-logo-img img {
  max-height: 42px;
  width: auto;
}
.pmd-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #e5e7eb;
  background: #f9fafb;
  color: #6b7280;
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
}
.pmd-close-btn:hover {
  background: #fef2f2;
  border-color: rgba(215,34,34,.4);
  color: var(--brand);
  transform: rotate(90deg);
}

/* ── Section label ── */
.pmd-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 18px 22px 6px;
  margin: 0;
}

/* ── Nav items ── */
.pmd-nav {
  padding: 4px 12px 8px;
}
.pmd-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 12px;
  color: #111827 !important;
  text-decoration: none !important;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.1px;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.pmd-nav-item:hover {
  background: #fef2f2;
  color: var(--brand) !important;
  transform: translateX(3px);
}
.pmd-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #f3f4f6;
  color: #6b7280;
  flex-shrink: 0;
  transition: all .2s ease;
}
.pmd-nav-item:hover .pmd-nav-icon {
  background: linear-gradient(135deg, #fde8e8, #fecaca);
  color: var(--brand);
  box-shadow: 0 3px 10px rgba(215,34,34,.18);
}
.pmd-nav-label {
  flex: 1;
  line-height: 1.3;
}
.pmd-nav-arrow {
  color: #d1d5db;
  flex-shrink: 0;
  transition: transform .2s ease, color .2s ease;
}
.pmd-nav-item:hover .pmd-nav-arrow {
  transform: translateX(3px);
  color: var(--brand);
}

/* ── Divider ── */
.pmd-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
  margin: 6px 22px;
}

/* ── Auth buttons ── */
.pmd-auth {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pmd-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 24px;
  border-radius: 50px;
  background: linear-gradient(135deg, #e12222 0%, #b91c1c 100%);
  color: #fff !important;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none !important;
  transition: all .22s ease;
  box-shadow: 0 6px 20px rgba(215,34,34,.40), inset 0 1px 0 rgba(255,255,255,.15);
}
.pmd-btn-primary:hover {
  background: linear-gradient(135deg, #c91c1c 0%, #991b1b 100%);
  box-shadow: 0 8px 28px rgba(215,34,34,.50), inset 0 1px 0 rgba(255,255,255,.15);
  transform: translateY(-2px);
  color: #fff !important;
}
.pmd-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  border-radius: 50px;
  background: #fff;
  color: var(--brand) !important;
  border: 1.8px solid var(--brand);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  transition: all .22s ease;
}
.pmd-btn-outline:hover {
  background: #fef2f2;
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(215,34,34,.15);
  color: var(--brand) !important;
}
.pmd-btn-logout {
  color: #6b7280 !important;
  border-color: #e5e7eb;
  font-weight: 500;
}
.pmd-btn-logout:hover {
  background: #fef2f2;
  color: var(--brand) !important;
  border-color: rgba(215,34,34,.35);
  box-shadow: 0 4px 14px rgba(215,34,34,.10);
}

/* ── Partner / join-us section ── */
.pmd-partner {
  padding: 6px 12px 14px;
}
.pmd-partner-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 0 0 6px 12px;
}
.pmd-partner-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #374151 !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.pmd-partner-item:hover {
  background: #fef2f2;
  color: var(--brand) !important;
  transform: translateX(3px);
}
.pmd-partner-item:hover .pmd-nav-icon {
  background: linear-gradient(135deg, #fde8e8, #fecaca);
  color: var(--brand);
  box-shadow: 0 3px 10px rgba(215,34,34,.18);
}
.pmd-partner-item .pmd-nav-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

/* ── Language section ── */
.pmd-lang {
  padding: 6px 20px 10px;
}

/* ── Drawer footer / tagline ── */
.pmd-footer {
  padding: 16px 22px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  text-align: center;
}
.pmd-footer-tagline {
  font-size: 11.5px;
  color: #9ca3af;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.2px;
}
.pmd-footer-tagline strong {
  color: var(--brand);
  font-weight: 600;
}

/* ── Legacy drawer (keep for compat) ── */
.el-drawer .btn.btn-black {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  box-shadow: 0 4px 16px rgba(225,33,20,.35);
}

/* ── Spacing tweaks ── */
ul.top-menu > li.d-inline.pr-2  { padding-right: 0 !important; }
ul.top-menu > li.mr-3           { margin-right: 0 !important; }
ul.top-menu > li.ml-3           { margin-left: 0 !important; }
ul.top-menu > li.line-left      { margin-left: 0 !important; }
ul.top-menu > li.d-inline.d-lg-none,
ul.top-menu > li.ml-3.ml-xs-1  { margin-left: 0 !important; }

/* ── Responsive ── */
@media (max-width: 1199px) {
  .premium-nav-links { display: none !important; }
}

@media (max-width: 991px) {
  .page-content { padding-top: 78px; }
  body.front-page #vm_home_search     { padding-top: 0; margin-top: 0; }
  body.front-page #main-search-banner { height: calc(360px + 76px) !important; background-size: cover !important; background-position: center 76px !important; }
  body.front-page #main-search-banner .banner-center { padding-top: 96px !important; padding-bottom: 0 !important; width: 100% !important; max-width: 680px; padding-left: 24px !important; padding-right: 24px !important; }
  #top-navigation { padding: 0 16px; min-height: 76px; }
  ul.top-menu     { height: 76px; }
}
@media (max-width: 767px) {
  .page-content { padding-top: 68px; }
  body.front-page #vm_home_search     { padding-top: 0; margin-top: 0; }
  body.front-page #main-search-banner { height: calc(280px + 66px) !important; background-size: cover !important; background-position: left 66px !important; }
  body.front-page #main-search-banner .banner-center { padding-top: 82px !important; padding-bottom: 0 !important; width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; }
  .hero-subtitle { display: none !important; }
  #top-navigation { min-height: 66px; padding: 0 12px !important; }
  ul.top-menu     { height: 66px; }
  .top-logo img.img-200 { max-height: 32px !important; max-width: 140px !important; }
}

/* ════════════════════════════════════════════════
   HERO BANNER
   ════════════════════════════════════════════════ */
body.front-page #main-search-banner {
  height: auto !important;
  min-height: 40vw !important;
  padding-top: 0 !important;
  padding-bottom: 80px !important;
  position: relative;
  background-image: url("../images/banner-home.jpg") !important;
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: #111827 !important;
  border-bottom: 0;
}
body.front-page #main-search-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    140deg,
    rgba(17,24,39,.88) 0%,
    rgba(17,24,39,.60) 50%,
    rgba(180,20,10,.40) 100%
  );
  z-index: 1;
}
body.front-page #main-search-banner .banner-center {
  position: relative;
  z-index: 2;
  width: 700px;
  max-width: 96vw;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0;
}
body.front-page #main-search-banner h2 {
  color: #fff;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 10px;
  text-shadow: 0 3px 16px rgba(0,0,0,.5);
  letter-spacing: -0.5px;
}

/* Responsive overrides — must come AFTER base block to win !important source-order */
@media (max-width: 991px) {
  body.front-page #main-search-banner {
    height: calc(360px + 76px) !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    background-size: cover !important;
    background-position: center 76px !important;
  }
}
@media (max-width: 767px) {
  body.front-page #main-search-banner {
    height: calc(280px + 66px) !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    background-size: cover !important;
    background-position: left 66px !important;
  }
}
@media (max-width: 575px) {
  body.front-page #main-search-banner .banner-center {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.front-page #main-search-banner h2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.front-page .home-search-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.front-page .home-search-wrap .flex-column {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  body.front-page .home-search-wrap .width_87 {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
  }
  body.front-page .home-search-wrap .el-input__wrapper {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 10px 0 14px !important;
  }
  body.front-page .home-search-wrap .el-input__inner {
    height: 42px !important;
    line-height: 42px !important;
    font-size: 14px !important;
  }
  body.front-page .home-search-wrap .flex-enabled-locate {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
  }
  body.front-page .home-search-wrap .flex-enabled-locate button,
  body.front-page .home-search-wrap [type="submit"] {
    width: 100% !important;
    height: 32px !important;
    border-radius: 50px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Hero subtitle */
.hero-subtitle {
  color: rgba(255,255,255,.78);
  font-size: 1.1rem;
  margin-bottom: 28px;
  font-weight: 400;
  letter-spacing: 0.1px;
}

/* Search bar — frosted glass */
body.front-page .home-search-wrap {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}
body.front-page .home-search-wrap .el-input__wrapper {
  background: rgba(255,255,255,.95) !important;
  border-radius: 50px !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 40px rgba(0,0,0,.28) !important;
  border: none !important;
  padding: 6px 6px 6px 20px !important;
  min-height: 58px;
}
body.front-page .home-search-wrap .el-input__inner {
  font-size: 15px !important;
  font-weight: 500 !important;
}
body.front-page .home-search-wrap .frm_search button,
body.front-page .home-search-wrap [type="submit"] {
  background: var(--brand) !important;
  border: none !important;
  border-radius: 50px !important;
  width: 46px !important;
  height: 46px !important;
  box-shadow: 0 4px 16px rgba(225,33,20,.5) !important;
  transition: var(--transition) !important;
}
body.front-page .home-search-wrap .frm_search button:hover,
body.front-page .home-search-wrap [type="submit"]:hover {
  background: var(--brand-dark) !important;
  transform: scale(1.06);
}

/* Mobile search input — placed AFTER base rules to win source-order */
@media (max-width: 575px) {
  body.front-page .home-search-wrap .el-input__wrapper {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 10px 0 14px !important;
  }
  body.front-page .home-search-wrap .el-input__inner {
    height: 42px !important;
    line-height: 42px !important;
    font-size: 14px !important;
  }
  body.front-page .home-search-wrap .frm_search button,
  body.front-page .home-search-wrap [type="submit"] {
    width: 100% !important;
    height: 42px !important;
  }
}

/* Hero stats strip */
.hero-stats-strip {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero-stats-strip .stat-item {
  text-align: center;
  position: relative;
}
.hero-stats-strip .stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  width: 1px;
  background: rgba(255,255,255,.2);
}
.hero-stats-strip .stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  display: block;
  line-height: 1;
}
.hero-stats-strip .stat-num em {
  color: var(--brand);
  font-style: normal;
}
.hero-stats-strip .stat-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,.62);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 5px;
  display: block;
}

/* ════════════════════════════════════════════════
   HOW IT WORKS SECTION
   ════════════════════════════════════════════════ */
.section-how-it-works {
  padding: 70px 0 56px;
  background: #fff;
}
.section-heading {
  text-align: center;
  margin-bottom: 50px;
}
.section-heading h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}
.section-heading .accent-line {
  width: 48px;
  height: 4px;
  background: var(--brand);
  margin: 14px auto 0;
  border-radius: 99px;
}
.section-heading p {
  color: var(--text-muted);
  font-size: 0.98rem;
  margin-top: 10px;
  margin-bottom: 0;
}
.how-it-works-steps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  flex-wrap: wrap;
  gap: 8px;
}
.how-it-works-steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 52%;
  height: 2px;
  border-top: 2px dashed #e5e7eb;
  z-index: 0;
}
.hiw-step {
  flex: 0 0 210px;
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.hiw-step .hiw-icon-wrap {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  border: 3px solid rgba(225,33,20,.15);
  transition: var(--transition);
  position: relative;
}
.hiw-step:hover .hiw-icon-wrap {
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(225,33,20,.32);
}
.hiw-step .hiw-icon-wrap i {
  font-size: 30px;
  color: var(--brand);
  transition: var(--transition);
}
.hiw-step:hover .hiw-icon-wrap i { color: #fff; }
.hiw-step .hiw-num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(225,33,20,.4);
}
.hiw-step h5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}
.hiw-step p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ════════════════════════════════════════════════
   SHARED SECTION HEADING — legacy support
   ════════════════════════════════════════════════ */
.swiperOutsideContainer > .mb-4.mt-4 h3,
.container > .swiperOutsideContainer > .mb-4.mt-4 h3 {
  font-family: 'DM Sans', 'Open Sans', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--dark);
  position: relative;
  padding-bottom: 12px;
}
.swiperOutsideContainer > .mb-4.mt-4 h3::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 40px; height: 3px;
  background: var(--brand);
  border-radius: 99px;
}

/* ════════════════════════════════════════════════
   PREMIUM SECTION HEADER — shared component
   ════════════════════════════════════════════════ */
.prem-section-header {
  margin: 48px 0 32px;
}
.psh-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.psh-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--brand);
  border-radius: 99px;
}
.psh-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.psh-title {
  font-family: 'DM Sans', 'Open Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.3px;
}
.cuisine-nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.psh-rule {
  width: 32px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), rgba(225,33,20,.3));
  border-radius: 99px;
}

/* ════════════════════════════════════════════════
   CUISINE CAROUSEL — PREMIUM
   ════════════════════════════════════════════════ */
.cuisine-section-wrap {
  margin-bottom: 12px;
  position: relative;
  isolation: isolate;
}
.cuisine-section-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/fast-food-seamless-pattern.png');
  background-repeat: repeat;
  background-size: 280px auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
  filter: grayscale(100%) brightness(0.6);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 20%, transparent 100%);
}
.cuisine-swiper-outer {
  position: relative;
  padding: 20px 0;
  overflow-x: clip;
  overflow-y: visible;
}

.swiperCuisine {
  overflow: visible !important;
}

/* Bust Swiper's default overflow:hidden so hover float is never clipped */
.cuisine-swiper-outer .swiper,
.cuisine-swiper-outer .swiper-wrapper,
.swiperCuisine,
.swiperCuisine .swiper-wrapper {
  overflow: visible !important;
}

.cuisine-swiper-slide {
  text-align: center;
  cursor: pointer;
  overflow: visible !important;
}
.cuisine-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  padding: 6px 4px 8px;
}
.cuisine-icon-wrap {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  background: #fff;
  border: 1.5px solid #ebebeb;
  box-shadow:
    0 2px 10px rgba(0,0,0,.06),
    0 0 0 0 rgba(225,33,20,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform .26s cubic-bezier(.34,1.56,.64,1),
    box-shadow .26s ease,
    background .22s ease,
    border-color .22s ease;
  position: relative;
  overflow: hidden;
}
.cuisine-icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(225,33,20,.06) 0%, transparent 70%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .22s ease;
}
.cuisine-icon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  transition: color .22s ease, transform .22s ease;
  width: 38px;
  height: 38px;
}
.cuisine-icon-inner svg {
  width: 38px;
  height: 38px;
}
.cuisine-name {
  font-family: 'DM Sans', 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  transition: color .22s ease;
  line-height: 1.3;
  text-align: center;
  max-width: 80px;
  display: block;
}
.cuisine-card:hover .cuisine-icon-wrap {
  transform: translateY(-6px) scale(1.05);
  background: #fff8f8;
  border-color: rgba(225,33,20,.3);
  box-shadow:
    0 12px 32px rgba(225,33,20,.14),
    0 0 0 4px rgba(225,33,20,.06);
}
.cuisine-card:hover .cuisine-icon-wrap::before { opacity: 1; }
.cuisine-card:hover .cuisine-icon-inner { color: var(--brand); transform: scale(1.08); }
.cuisine-card:hover .cuisine-name { color: var(--brand); }

/* External cuisine nav buttons — flex siblings, never overlap slides */
.cuisine-ext-btn {
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, color .22s ease,
              box-shadow .22s ease, transform .18s ease;
  outline: none;
  padding: 0;
}
.cuisine-ext-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 6px 20px rgba(225,33,20,.28);
  transform: scale(1.08);
}
.cuisine-ext-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ════════════════════════════════════════════════
   RESTAURANT CARDS
   ════════════════════════════════════════════════ */
.restaurant-carousel {
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.restaurant-carousel:hover {
  box-shadow: var(--shadow);
  transform: translateY(-5px);
}

/* ════════════════════════════════════════════════
   JOIN US — PREMIUM REDESIGN
   ════════════════════════════════════════════════ */
.join-section-wrap {
  margin: 64px 0 24px;
}
.join-section-header {
  text-align: center;
  margin-bottom: 32px;
}
.jsh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand-light);
  color: var(--brand);
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  border: 1px solid rgba(225,33,20,.18);
  margin-bottom: 18px;
}
.jsh-title {
  font-family: 'DM Sans', 'Open Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 14px;
}
.jsh-brand {
  color: var(--brand);
  position: relative;
  white-space: nowrap;
}
.jsh-brand::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), rgba(225,33,20,.3));
  border-radius: 99px;
}
.jsh-sub {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.65;
}
.join-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.join-card {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  transition: transform .3s cubic-bezier(.34,1.2,.64,1), box-shadow .3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.join-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 56px rgba(0,0,0,.12), 0 0 0 1px rgba(225,33,20,.08);
}
.join-card-img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.join-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
  display: block;
}
.join-card:hover .join-card-img { transform: scale(1.07); }
.join-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,.55) 100%
  );
}
.join-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  transition: background .22s ease, transform .22s ease;
}
.join-card:hover .join-card-badge {
  background: var(--brand);
  color: #fff;
  transform: scale(1.08);
}
.join-card-body {
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.join-card-title {
  font-family: 'DM Sans', 'Open Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 10px;
  line-height: 1.35;
}
.join-card-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 22px;
  flex: 1;
}
.join-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 50px;
  background: #fff;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  font-family: 'DM Sans', 'Open Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-decoration: none !important;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .18s ease;
  cursor: pointer;
}
.join-card-btn:hover,
.join-card:hover .join-card-btn {
  background: var(--brand);
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(225,33,20,.30);
  transform: translateY(-1px);
}
.join-card-btn svg { flex-shrink: 0; transition: transform .22s ease; }
.join-card-btn:hover svg,
.join-card:hover .join-card-btn svg { transform: translateX(3px); }

/* Responsive */
@media (max-width: 991px) {
  .join-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .jsh-title { font-size: 1.8rem; }
}
@media (max-width: 640px) {
  .join-cards-grid { grid-template-columns: 1fr; }
  .join-card-img-wrap { height: 200px; }
  .cuisine-icon-wrap { width: 68px; height: 68px; border-radius: 18px; }
  .cuisine-icon-inner, .cuisine-icon-inner svg { width: 32px; height: 32px; }
  .join-section-header .jsh-title {
    font-size: 1.5rem !important;
    margin-bottom: 28px !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .join-section-header .jsh-brand {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    display: inline !important;
  }
  .join-section-header .jsh-brand::after {
    display: none !important;
    content: none !important;
  }
  .join-section-wrap {
    overflow: hidden !important;
  }
}

/* Legacy join-sections safety */
.join-sections .swiper-slide { display: none; }

/* ════════════════════════════════════════════════
   APP DOWNLOAD SECTION — world-class premium
   ════════════════════════════════════════════════ */
.app-download-section {
  position: relative;
  background: linear-gradient(135deg, #b80e04 0%, #e12114 45%, #c9170f 75%, #9e0d07 100%);
  overflow: hidden;
  margin-top: 80px;
  padding: 0;
}

/* Decorative orbs — white/light on red bg */
.app-dl-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.app-dl-orb--1 {
  width: 520px; height: 520px;
  top: -120px; left: -80px;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 65%);
}
.app-dl-orb--2 {
  width: 400px; height: 400px;
  bottom: -80px; right: 5%;
  background: radial-gradient(circle, rgba(255,180,160,.22) 0%, transparent 65%);
}
.app-dl-orb--3 {
  width: 320px; height: 320px;
  top: 15%; left: 42%;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 65%);
}

/* Subtle dot-grid overlay */
.app-dl-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Diagonal stripe accent */
.app-dl-grid-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.04) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255,255,255,.04) 50%,
    rgba(255,255,255,.04) 75%,
    transparent 75%
  );
  background-size: 60px 60px;
}

/* ── Two-column layout — FIXED ── */
.app-dl-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 500px;
}
.app-dl-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 80px 40px 80px 0;
}
.app-dl-phone-col {
  flex: 0 0 420px;
  position: relative;
}
.app-dl-phone-col::before {
  content: '';
  position: absolute;
  inset: 0;
  left: 0;
  width: 120px;
  z-index: 3;
  background: linear-gradient(to right, #c9170f 0%, transparent 100%);
  pointer-events: none;
}

/* Eyebrow */
.app-dl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 7px 16px 7px 12px;
  border-radius: 50px;
  margin-bottom: 22px;
}
.app-dl-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.30);
  animation: appDotPulse 2s ease-in-out infinite;
}
@keyframes appDotPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,255,255,.30); }
  50%      { box-shadow: 0 0 0 7px rgba(255,255,255,.08); }
}

/* Headline */
.app-dl-headline {
  font-family: 'DM Sans', 'Open Sans', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 0 0 20px;
  text-shadow: 0 2px 20px rgba(0,0,0,.20);
}
.app-dl-headline-accent {
  background: linear-gradient(135deg, #ffe0d8 0%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

/* Subtitle */
.app-dl-sub {
  font-size: 15.5px;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
  margin: 0 0 32px;
  max-width: 440px;
}

/* Stats row */
.app-dl-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
}
.app-dl-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.80);
}
.app-dl-stat svg { flex-shrink: 0; color: rgba(255,255,255,.90); }
.app-dl-stat div { display: flex; flex-direction: column; }
.app-dl-stat strong {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.app-dl-stat span {
  font-size: 11px;
  color: rgba(255,255,255,.65);
  letter-spacing: 0.3px;
}
.app-dl-stat-div {
  width: 1px; height: 32px;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}

/* Store Buttons */
.app-dl-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.app-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 16px;
  text-decoration: none !important;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  min-width: 168px;
}
.app-dl-btn--apple {
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.12);
}
.app-dl-btn--google {
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.30);
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  backdrop-filter: blur(8px);
}
.app-dl-btn:hover {
  transform: translateY(-4px);
}
.app-dl-btn--apple:hover {
  box-shadow: 0 20px 56px rgba(0,0,0,.30);
  color: var(--brand);
}
.app-dl-btn--google:hover {
  background: rgba(255,255,255,.22);
  box-shadow: 0 20px 56px rgba(0,0,0,.20);
  color: #fff;
}
.app-dl-btn-text {
  display: flex;
  flex-direction: column;
}
.app-dl-btn-text span {
  font-size: 10.5px;
  font-weight: 500;
  opacity: .70;
  line-height: 1.3;
  letter-spacing: 0.2px;
}
.app-dl-btn-text strong {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

/* Trust strip */
.app-dl-trust {
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-dl-trust-avatars {
  display: flex;
}
.app-dl-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #6b1a15;
  margin-left: -8px;
}
.app-dl-avatar:first-child { margin-left: 0; }
.app-dl-trust-text { display: flex; flex-direction: column; gap: 2px; }
.app-dl-trust-stars {
  font-size: 13px;
  color: #ffd700;
  letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,.20);
}
.app-dl-trust-text > span {
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

/* Phone column */
.app-dl-phone-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Pulsing rings — white on red bg */
.app-dl-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.app-dl-ring--1 {
  width: 300px; height: 300px;
  animation: appRingPulse 3s ease-in-out infinite;
}
.app-dl-ring--2 {
  width: 420px; height: 420px;
  border-color: rgba(255,255,255,.12);
  animation: appRingPulse 3s ease-in-out infinite .8s;
}
.app-dl-ring--3 {
  width: 540px; height: 540px;
  border-color: rgba(255,255,255,.06);
  animation: appRingPulse 3s ease-in-out infinite 1.6s;
}
@keyframes appRingPulse {
  0%,100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: .5; transform: translate(-50%,-50%) scale(1.04); }
}

/* Phone image */
.app-dl-phone-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 0;
}
.app-dl-ring {
  display: none;
}

/* Floating notification cards */
.app-dl-float {
  position: absolute;
  z-index: 5;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.20), 0 4px 16px rgba(0,0,0,.10);
  padding: 12px 16px;
  white-space: nowrap;
}
.app-dl-float--order {
  left: 42%;
  top: 20%;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: appFloatBob 4s ease-in-out infinite;
}
.app-dl-float--rating {
  right: 20px;
  bottom: 24%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: appFloatBob 4s ease-in-out infinite 2s;
}
@keyframes appFloatBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.app-dl-float-icon {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.app-dl-float-body strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
}
.app-dl-float-body span {
  font-size: 11px;
  color: #6b7280;
}
.app-dl-float-stars {
  font-size: 14px;
  color: #f59e0b;
  letter-spacing: 1px;
}
.app-dl-float--rating span {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}

/* Responsive */
@media (max-width: 991px) {
  .app-dl-container {
    flex-direction: column;
    gap: 0;
    min-height: unset;
  }
  .app-dl-content {
    align-items: center;
    text-align: center;
    padding: 60px 20px 40px;
  }
  .app-dl-phone-col { flex: 0 0 100%; height: 300px; }
  .app-dl-phone-col::before { width: 100%; height: 80px; top: 0; background: linear-gradient(to bottom, #c9170f 0%, transparent 100%); }
  .app-dl-phone-img { width: 100%; height: 300px; object-fit: cover; object-position: center 40%; }
  .app-dl-sub { margin: 0 auto 32px; }
  .app-dl-stats { justify-content: center; }
  .app-dl-buttons { justify-content: center; }
  .app-dl-trust { justify-content: center; }
  .app-dl-float--order { left: 12px; }
  .app-dl-float--rating { right: 12px; }
  .app-download-section { padding-bottom: 60px; }
}
@media (max-width: 640px) {
  .app-dl-headline { font-size: 2.1rem; }
  .app-dl-float { display: none; }
  .app-dl-ring--2, .app-dl-ring--3 { display: none; }
  .app-dl-btn { min-width: 148px; padding: 12px 18px; }
  .app-dl-stats { gap: 12px; flex-wrap: wrap; }
  .app-dl-stat-div { display: none; }
}

/* ════════════════════════════════════════════════
   PREMIUM FOOTER — complete redesign
   ════════════════════════════════════════════════ */

/* ── Top accent bar ── */
.footer-top-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, #ff6b35 50%, var(--brand) 100%);
  background-size: 200% 100%;
  animation: footerAccentShimmer 4s linear infinite;
}
@keyframes footerAccentShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ── Sub-footer shell ── */
.sub-footer {
  position: relative;
  background: #1e2235 !important;
  margin-top: 0 !important;
  padding-top: 80px !important;
  padding-bottom: 48px !important;
  border-top: 0 !important;
}
.sub-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(225,33,20,.14) 0%, transparent 65%);
  pointer-events: none;
}
.sub-footer::after {
  content: '';
  position: absolute;
  bottom: 100px;
  right: 0;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(225,33,20,.07) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Brand column ── */
.footer-brand-col { display: flex; flex-direction: column; gap: 20px; }
.sub-footer .footer-logo img {
  filter: brightness(0) invert(1);
  max-height: 48px !important;
  width: auto !important;
}
.footer-desc {
  color: rgba(255,255,255,.48) !important;
  font-size: 0.88rem;
  line-height: 1.75;
  max-width: 300px;
  margin: 0 !important;
}

/* ── Social icons ── */
.footer-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.55) !important;
  font-size: 17px;
  transition: var(--transition);
  text-decoration: none !important;
  background: rgba(255,255,255,.04);
}
.footer-social-link:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(225,33,20,.40);
}

/* ── Nav columns ── */
.footer-nav-wrap { padding-top: 8px; }
.sub-footer-nav { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
.sub-footer-nav h6 {
  color: #fff !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-weight: 700;
  margin-bottom: 20px !important;
  padding-bottom: 10px;
  position: relative;
  font-family: 'DM Sans', sans-serif;
}
.sub-footer-nav h6::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}
.sub-footer-nav a {
  display: flex !important;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.48) !important;
  font-size: 13.5px !important;
  padding: 5px 0 !important;
  transition: var(--transition);
  text-decoration: none !important;
}
.sub-footer-nav a::before {
  content: '›';
  font-size: 16px;
  line-height: 1;
  color: var(--brand);
  opacity: 0;
  transform: translateX(-6px);
  transition: var(--transition);
}
.sub-footer-nav a:hover {
  color: #fff !important;
  padding-left: 4px !important;
}
.sub-footer-nav a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* ── Newsletter band ── */
.footer-newsletter-band {
  position: relative;
  margin-top: 56px;
  margin-bottom: 8px;
  padding: 36px 32px;
  border-radius: 20px;
  background: linear-gradient(135deg, #c0170d 0%, #e12114 45%, #b5230a 100%);
  overflow: hidden;
  box-shadow: none;
}
.footer-newsletter-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.12) 0%, transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(0,0,0,.15) 0%, transparent 35%);
  pointer-events: none;
}
.footer-newsletter-band::after {
  content: none;
}
.footer-newsletter-glow {
  position: absolute;
  top: -60px;
  right: 120px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 65%);
  pointer-events: none;
}
.newsletter-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.80);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  font-family: 'DM Sans', sans-serif;
}
.newsletter-eyebrow i { font-size: 14px; }
.newsletter-headline {
  color: #fff !important;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 !important;
  font-family: 'DM Sans', sans-serif;
}

/* Newsletter form — inside band */
.footer-newsletter-band .esubscription {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 54px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.97);
  box-shadow: 0 12px 40px rgba(0,0,0,.30);
}
.footer-newsletter-band .esubscription .field-wrap {
  flex: 1;
  height: 100%;
}
.footer-newsletter-band .esubscription .el-input,
.footer-newsletter-band .esubscription .el-input__wrapper {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
}
.footer-newsletter-band .esubscription .el-input__inner {
  color: #111 !important;
  font-size: 14px;
  height: 54px !important;
  line-height: 54px !important;
  padding: 0 18px !important;
}
.footer-newsletter-band .esubscription .el-input__inner::placeholder {
  color: rgba(0,0,0,.38) !important;
}
.footer-newsletter-band .esubscription .butoon-wrap {
  flex-shrink: 0;
  height: 100%;
  display: flex;
}
.footer-newsletter-band .esubscription .butoon-wrap .el-button {
  border-radius: 0 14px 14px 0 !important;
  height: 54px !important;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.6px;
  background: #0f1020 !important;
  border-color: #0f1020 !important;
  color: #fff !important;
  padding: 0 32px !important;
  white-space: nowrap;
  margin: 0 !important;
  transition: var(--transition);
  display: flex !important;
  align-items: center !important;
}
.footer-newsletter-band .esubscription .butoon-wrap .el-button:hover {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Subscribe section — stacked column on phone (placed AFTER base rules to win source-order) */
@media (max-width: 575px) {
  .footer-newsletter-band {
    padding: 24px 20px !important;
  }
  .footer-newsletter-band .esubscription {
    flex-direction: column !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    gap: 10px !important;
  }
  .footer-newsletter-band .esubscription .field-wrap {
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.20) !important;
  }
  .footer-newsletter-band .esubscription .el-input,
  .footer-newsletter-band .esubscription .el-input__wrapper {
    background: rgba(255,255,255,.97) !important;
    border-radius: 12px !important;
    height: 52px !important;
    box-shadow: none !important;
  }
  .footer-newsletter-band .esubscription .el-input__inner {
    height: 52px !important;
    line-height: 52px !important;
    color: #333 !important;
  }
  .footer-newsletter-band .esubscription .butoon-wrap {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 52px !important;
    flex-shrink: 0 !important;
  }
  .footer-newsletter-band .esubscription .butoon-wrap .el-button {
    border-radius: 12px !important;
    width: 100% !important;
    height: 52px !important;
    justify-content: center !important;
    font-size: 15px !important;
    letter-spacing: 0.8px !important;
  }
}

/* White gap fix — remove trailing margin in vue-home-widgets */
#vue-home-widgets > .container:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ════════════════════════════════════════════════
   FOOTER BAR — premium bottom strip
   ════════════════════════════════════════════════ */
footer {
  background: #0f1020 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none !important;
}

/* Gradient separator line */
footer::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(225,33,20,.35) 20%,
    rgba(225,33,20,.65) 50%,
    rgba(225,33,20,.35) 80%,
    transparent 100%
  );
}

.footer-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}

/* Left block */
.footer-copy-block {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.footer-brand-mark svg { display: block; }
.footer-copy,
footer p,
footer a {
  color: rgba(255,255,255,.62) !important;
  font-size: 12px !important;
  margin: 0 !important;
}
footer a:hover { color: rgba(255,255,255,.92) !important; }

/* Center — App badges */
.footer-app-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-app-badge-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.70) !important;
  text-decoration: none !important;
  transition: var(--transition);
  white-space: nowrap;
}
.footer-app-badge-link:hover {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
  color: #fff !important;
}
.footer-app-badge-link svg { flex-shrink: 0; }
.footer-app-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.footer-app-badge-text span {
  font-size: 9px;
  color: rgba(255,255,255,.50);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.footer-app-badge-text strong {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}

/* Right block */
.footer-website-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.62) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  transition: var(--transition);
}
.footer-website-link svg { opacity: 0.6; flex-shrink: 0; }
.footer-website-link:hover {
  color: rgba(255,255,255,.92) !important;
}
.footer-website-link:hover svg { opacity: 1; }

/* Mobile footer bar */
.footer-bar-mobile {
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.footer-bar-mobile .footer-app-badges { justify-content: center; width: 100%; }
.footer-bar-mobile .footer-copy { text-align: center !important; }

/* ── Responsive footer ── */
@media (max-width: 991px) {
  .sub-footer { padding-top: 56px !important; }
  .footer-brand-col { align-items: center; text-align: center; }
  .footer-desc { max-width: 100%; text-align: center; }
  .footer-social { justify-content: center; }
  .sub-footer-nav h6::after { left: 50%; transform: translateX(-50%); }
  .sub-footer-nav { text-align: center; }
  .sub-footer-nav a { justify-content: center; }
  .footer-newsletter-band { padding: 28px 24px; }
  .newsletter-headline { font-size: 1.2rem; }
}
@media (max-width: 767px) {
  .footer-newsletter-band { margin-top: 40px; border-radius: 14px; }
  .footer-newsletter-band::after { display: none; }
  .sub-footer-nav h6::after { transform: none; left: 0; }
  .sub-footer-nav { text-align: left; }
  .sub-footer-nav a { justify-content: flex-start; }
  .footer-brand-col { align-items: flex-start; text-align: left; }
  .footer-social { justify-content: flex-start; }
  .footer-desc { text-align: left; }
}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 991px) {
  body.front-page #main-search-banner h2 { font-size: 2.2rem; }
  .hero-stats-strip { gap: 28px; }
  .how-it-works-steps::before { display: none; }
  .section-newmobileapp h1 { font-size: 2rem !important; }
  .hiw-step { flex: 0 0 180px; }
}
@media (max-width: 767px) {
  body.front-page #main-search-banner h2 { font-size: 1.75rem; }
  .hero-subtitle { font-size: 0.95rem; }
  .hero-stats-strip { gap: 16px; margin-top: 24px; }
  .hero-stats-strip .stat-num { font-size: 1.4rem; }
  .hero-stats-strip .stat-item:not(:last-child)::after { display: none; }
  .section-how-it-works { padding: 32px 0 32px; }
  .section-heading h2 { font-size: 1.6rem; }
  .section-newmobileapp h1 { font-size: 1.7rem !important; }
  .section-newmobileapp { margin-top: 36px !important; }
}
@media (max-width: 480px) {
  body.front-page #main-search-banner h2 { font-size: 1.45rem; }
  .hero-stats-strip { display: none !important; }
  .hiw-step { flex: 0 0 140px; }
  .hiw-step .hiw-icon-wrap { width: 72px; height: 72px; }
  .hiw-step .hiw-icon-wrap i { font-size: 24px; }
}

/* ════════════════════════════════════════════════
   PREMIUM EMPTY CART STATE — v2
   ════════════════════════════════════════════════ */

/* ── Drawer body ── */
.drawer-preview-cart .el-drawer__body {
  background: #ffffff !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* ── Cart header title ── */
.drawer-preview-cart h5.mt-3.mb-0 {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -.25px;
  margin: 0 !important;
  padding: 20px 24px 17px;
  border-bottom: 1.5px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.drawer-preview-cart h5.mt-3.mb-0::before {
  content: '';
  display: block;
  width: 3.5px;
  height: 18px;
  background: linear-gradient(180deg, #e12114 0%, #ff7b6b 100%);
  border-radius: 99px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   EMPTY CART — The Ticket (Premium Redesign)
   ══════════════════════════════════════════════════════ */

.cart-empty {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px 18px;
  border-top: 1px solid #ede9e3;
}

/* ── Perforated ticket top edge ── */
.ce-perforation {
  width: calc(100% + 2px);
  height: 22px;
  margin: 0 -1px 34px;
  background:
    radial-gradient(circle at 50% 60%, #ddd7cf 3.5px, transparent 3.5px);
  background-size: 20px 22px;
  opacity: .5;
  flex-shrink: 0;
}

/* ── Plate ring — the empty dish ── */
.ce-plate-ring {
  width: 122px;
  height: 122px;
  border-radius: 50%;
  border: 1.5px solid #e0dbd4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle at 36% 36%, #ffffff 0%, #faf8f5 100%);
  margin-bottom: 30px;
  flex-shrink: 0;
  animation: ce-pulse 5s ease-in-out infinite;
}
.ce-plate-ring::before {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  border: 1px solid #ede9e3;
}
.ce-plate-ring .fas.fa-utensils {
  font-size: 30px;
  color: #e12114;
  opacity: .75;
  position: relative;
  z-index: 1;
}

@keyframes ce-pulse {
  0%, 100% { border-color: #e0dbd4; }
  50%       { border-color: rgba(225,33,20,.25); }
}

/* ── Eyebrow: red label + hairlines ── */
.ce-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 13px;
}
.ce-eyebrow span {
  flex: 1;
  height: 1px;
  background: #e8e3db;
}
.ce-eyebrow b {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .32em;
  color: #e12114;
  text-transform: uppercase;
  opacity: .6;
  white-space: nowrap;
}

/* ── Heading ── */
.cart-empty h6 {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin: 0 0 10px !important;
  letter-spacing: -.04em !important;
  line-height: 1.15 !important;
}

/* ── Subtext ── */
.cart-empty p {
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  color: #a8b0c0 !important;
  margin: 0 0 26px !important;
  line-height: 1.75 !important;
  max-width: 172px;
  font-weight: 400 !important;
}

/* ── Browse hint ── */
.ce-browse-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: #e12114;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  border-top: 1px dashed rgba(225,33,20,.2);
  padding-top: 18px;
  width: 100%;
  justify-content: center;
}
.ce-browse-hint .fas {
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════
   CART — STORE CLOSED NOTICE  ccn-*
   ═══════════════════════════════════════════════════════ */

.cart-closed-notice {
  background: #ffffff;
  border: none;
  border-bottom: none;
  margin: 0 -20px !important;
  box-shadow: none;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}
.cart-bottom-fixed:has(.cart-closed-notice) {
  padding-bottom: 0 !important;
}



.ccn-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 12px 18px;
}

.ccn-icon-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccn-icon-wrap i {
  font-size: 18px;
  color: #e12114;
  position: relative;
  z-index: 2;
}

.ccn-icon-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(225, 33, 20, .08);
  animation: ccn-pulse 2.6s ease-in-out infinite;
}

@keyframes ccn-pulse {
  0%, 100% { transform: scale(1);   opacity: .8; }
  50%       { transform: scale(1.2); opacity: 0;  }
}

.ccn-body {
  flex: 1;
  min-width: 0;
}

.ccn-badge {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #e12114;
  margin-bottom: 5px;
}

.ccn-msg {
  font-size: 12px !important;
  color: #52525b !important;
  margin: 0 !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

.ccn-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 13px 16px;
  background: #e12114;
  color: #ffffff !important;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: none;
  border-radius: 0 0 20px 20px;
  transition: background .2s, gap .2s;
  position: relative;
  overflow: hidden;
}
.ccn-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: ccn-shimmer 2.5s ease-in-out infinite;
}
@keyframes ccn-shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

.ccn-btn:hover {
  background: #c41c10;
  color: #ffffff !important;
  text-decoration: none !important;
  gap: 10px;
}
.ccn-btn:hover::after {
  animation: none;
}

.ccn-btn i {
  font-size: 14px;
  color: #ffffff;
}

.ccn-btn-arrow {
  margin-left: auto;
  opacity: .7;
  font-size: 13px !important;
  animation: ccn-nudge 1.8s ease-in-out infinite;
}
@keyframes ccn-nudge {
  0%, 100% { transform: translateX(0); opacity: .7; }
  50%      { transform: translateX(3px); opacity: 1; }
}

/* ── Schedule nudge (triggered when disabled Checkout is clicked) ── */
.ccn-btn--nudge {
  animation: ccn-btn-shake .55s cubic-bezier(.36,.07,.19,.97) both !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 0 0 7px rgba(225,33,20,.45) !important;
}
@keyframes ccn-btn-shake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-7px); }
  30%     { transform: translateX(7px); }
  45%     { transform: translateX(-5px); }
  60%     { transform: translateX(5px); }
  75%     { transform: translateX(-3px); }
  90%     { transform: translateX(3px); }
}

/* ── Checkout tip callout ── */
.checkout-schedule-tip {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 9px 14px;
  background: #111827;
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  line-height: 1.4;
  position: relative;
  animation: sched-tip-in .22s ease both;
}
.checkout-schedule-tip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: #111827;
}
.checkout-schedule-tip i {
  font-size: 15px;
  color: #e12114;
  flex-shrink: 0;
  animation: tip-bounce .7s ease-in-out infinite alternate;
}
@keyframes tip-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(3px); }
}
@keyframes sched-tip-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════
   CUISINE FEED PAGE — cfeed-*  (Premium v6)
   ═══════════════════════════════════════════════════════ */

.cuisine-feed {
  background: #f4f4f4;
  min-height: 80vh;
  padding-bottom: 120px;
}

/* ── Ken Burns keyframe ──────────────────────────────── */
@keyframes cfeed-kenburns {
  0%   { transform: scale(1)    translate(0%,   0%);  }
  100% { transform: scale(1.06) translate(-0.8%, 0.6%);  }
}

/* ══════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════ */
.cfeed-hero {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

/* Background image — Ken Burns layer */
.cfeed-hero::after {
  content: '';
  position: absolute;
  inset: -6%;
  background: url('../images/cuisines.jpg') center / cover no-repeat;
  z-index: 0;
  animation: cfeed-kenburns 28s ease-in-out infinite alternate;
  will-change: transform;
}

/* Gradient overlay — dark bottom for text, dark top-left for back pill, clear centre */
.cfeed-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(4,4,12,.55) 0%,
      rgba(4,4,12,.30) 35%,
      rgba(4,4,12,.10) 65%,
      rgba(4,4,12,0) 100%
    ),
    linear-gradient(
      to right,
      rgba(4,4,12,.40) 0%,
      rgba(4,4,12,.08) 45%,
      transparent 75%
    );
  pointer-events: none;
}

.cfeed-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 48px 80px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Back pill ──────────────────────────────────────── */
.cfeed-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 7px 15px 7px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70) !important;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, gap .2s ease;
}
.cfeed-back:hover {
  background: rgba(255,255,255,.20);
  color: #fff !important;
  gap: 9px;
}
.cfeed-back svg { flex-shrink: 0; transition: transform .2s ease; }
.cfeed-back:hover svg { transform: translateX(-2px); }

/* ── Hero bottom — title block ───────────────────────── */
.cfeed-hero-bottom {
  margin-top: auto;
}

.cfeed-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 12px;
}
.cfeed-hero-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(225,33,20,.6);
}

.cfeed-title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7.5vw, 6rem);
  font-weight: 900;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -.04em;
  line-height: .92;
  text-shadow: 0 4px 40px rgba(0,0,0,.5);
}

.cfeed-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255,255,255,.50);
  font-weight: 500;
  margin: 0;
  letter-spacing: .015em;
}
.cfeed-subtitle svg { color: rgba(255,255,255,.35); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   FILTER BAR — dark shelf, seamless extension of hero
   ══════════════════════════════════════════════════════ */
.cfeed-filterbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(135deg, #b00f0b 0%, #e21914 50%, #ff4d3a 100%);
  margin-top: 0;
  border-radius: 0;
  box-shadow: 0 6px 40px rgba(178,15,11,.35);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.cfeed-filterbar::after {
  content: '';
  position: absolute;
  bottom: -32px;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to bottom, rgba(178,15,11,.18), transparent);
  pointer-events: none;
  z-index: 1;
}
.cfeed-filterbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.cfeed-filterbar-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 20px 0;
  border-right: 1px solid rgba(255,255,255,.20);
  padding-right: 20px;
}
.cfeed-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
}
.cfeed-filters::-webkit-scrollbar { display: none; }

.cfeed-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.18);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  outline: none;
  letter-spacing: .01em;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cfeed-chip:hover {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.28);
  color: #fff;
  transform: translateY(-1px);
}
.cfeed-chip--active {
  background: #fff;
  border-color: #fff;
  color: #b00f0b;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.cfeed-chip--active:hover {
  background: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.95);
  color: #b00f0b;
  transform: translateY(-1px);
}

/* ── Restaurant grid ─────────────────────────────────── */
.cfeed-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 14px;
  max-width: 1320px;
  margin: 24px auto 0;
  padding: 0 24px;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1280px) {
  .cfeed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cfeed-hero-inner { padding: 28px 20px 60px; }
  .cfeed-filterbar-inner { padding: 0 20px; gap: 12px; }
  .cfeed-filterbar-label { display: none; }
  .cfeed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 0 16px; }
  .cfeed-title { font-size: clamp(2.6rem, 10vw, 4rem); letter-spacing: -.045em; }
}
@media (max-width: 520px) {
  .cfeed-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ══════════════════════════════════════════════════════
   RESTAURANT CARD — Premium v7
   Clean, proven: logo as cover image + frosted pills
   ══════════════════════════════════════════════════════ */

.cfeed-card-wrap { display: flex; flex-direction: column; }

.cfeed-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05);
  height: 100%;
  cursor: pointer;
  transition: box-shadow .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
}
.cfeed-card:hover {
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.13), 0 0 0 1px rgba(0,0,0,.05);
  transform: translateY(-4px);
}
.cfeed-card--closed { opacity: .55; filter: saturate(.2); }

/* ── Image shell ───────────────────────────────────────── */
.cfeed-img-shell {
  position: relative;
  overflow: hidden;
  height: 196px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fdf6f0 0%, #fdf0f0 50%, #f5f0fd 100%);
}

/* Restaurant logo — contain so full brand is visible */
.cfeed-img-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.cfeed-card:hover .cfeed-img-el { transform: scale(1.04); }
.cfeed-img-el .el-image__inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cfeed-img-el .el-image__error,
.cfeed-img-el .el-image__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fdf6f0 0%, #fdf0f0 50%, #f5f0fd 100%);
  color: #d1c4c4;
}

/* Subtle bottom-fade so pills read cleanly */
.cfeed-img-bottom-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 72px;
  background: linear-gradient(to top, rgba(0,0,0,.48) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Pills row at bottom of image */
.cfeed-img-pills {
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Delivery time pill */
.cfeed-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--dark);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  letter-spacing: -.01em;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.cfeed-time-pill svg { color: var(--text-muted); flex-shrink: 0; }

/* Rating pill */
.cfeed-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: -.01em;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Overlays */
.cfeed-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.cfeed-overlay--soft  { background: rgba(255,255,255,.5); backdrop-filter: blur(2px); }
.cfeed-overlay--heavy { background: rgba(8,8,18,.42); backdrop-filter: blur(3px); }

/* Closed / status badge */
.cfeed-status-badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(8,8,18,.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  letter-spacing: .015em;
  white-space: nowrap;
  max-width: 90%;
  text-align: center;
  border: 1px solid rgba(255,255,255,.14);
}

/* Promo ribbon */
.cfeed-tag-promo {
  position: absolute;
  top: 12px; left: 0;
  z-index: 5;
  background: linear-gradient(90deg, #15803d, #22c55e);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px 5px 10px;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 3px 12px rgba(22,163,74,.4);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Favourite */
.cfeed-fav-shell {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 5;
}

/* ── Card body ─────────────────────────────────────────── */
.cfeed-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

.cfeed-rname {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -.025em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.cfeed-rtags {
  font-size: 12px;
  color: var(--text-faint);
  margin: 0;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfeed-rtags a { color: var(--text-faint) !important; text-decoration: none !important; }

/* Meta strip */
.cfeed-meta-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid var(--border-light);
}
.cfeed-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.cfeed-meta-item svg { flex-shrink: 0; }

/* Offer pills */
.cfeed-offer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.cfeed-offer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #15803d;
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.18);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cfeed-offer svg { color: #16a34a; flex-shrink: 0; }

/* Skeleton */
.cfeed-skeleton-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
}

/* ── Empty state ─────────────────────────────────────── */
.cfeed-empty {
  text-align: center;
  padding: 120px 24px;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cfeed-empty > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 400px;
}
.cfeed-empty-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-2) 100%);
  border: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.cfeed-empty h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
  letter-spacing: -.03em;
}
.cfeed-empty p {
  font-size: 14.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════
   PREMIUM LANGUAGE PICKER — pls-*
   ═══════════════════════════════════════════════════════ */

.pls-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ── Trigger ── */
.pls-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
  outline: none;
  letter-spacing: .015em;
  line-height: 1.4;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.pls-trigger:hover {
  border: none;
  background: rgba(0,0,0,.05);
  box-shadow: none;
  transform: none;
}
.pls-trigger:active {
  transform: none;
  box-shadow: none;
  background: rgba(0,0,0,.08);
}
.pls-trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.pls-wrap.pls-open .pls-trigger {
  border: none;
  background: rgba(0,0,0,.05);
  box-shadow: none;
  transform: none;
}

/* ── Flag in trigger ── */
.pls-flag-wrap {
  width: 22px;
  height: 16px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 5px rgba(0,0,0,.24), 0 0 0 1px rgba(0,0,0,.06);
  flex-shrink: 0;
  transition: box-shadow .2s ease;
}
.pls-wrap.pls-open .pls-flag-wrap,
.pls-trigger:hover .pls-flag-wrap {
  box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 0 0 1.5px rgba(225,33,20,.28);
}
.pls-flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Label ── */
.pls-label {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Chevron ── */
.pls-chevron {
  flex-shrink: 0;
  color: #bfc5ce;
  transition: transform .26s cubic-bezier(.34,1.56,.64,1), color .2s ease;
  margin-left: 1px;
}
.pls-wrap.pls-open .pls-chevron {
  transform: rotate(180deg);
  color: var(--brand);
}
.pls-trigger:hover .pls-chevron {
  color: var(--brand);
}

/* ── Panel ── */
.pls-panel {
  position: absolute;
  top: calc(100% + 11px);
  right: 0;
  min-width: 210px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.85);
  outline: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.09),
    0 32px 80px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.9);
  z-index: 1060;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px) scale(.95);
  transform-origin: top right;
  transition: opacity .22s cubic-bezier(.4,0,.2,1), transform .26s cubic-bezier(.34,1.2,.64,1);
}
.pls-wrap.pls-open .pls-panel {
  pointer-events: all;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Scrollbar ── */
.pls-panel::-webkit-scrollbar { width: 3px; }
.pls-panel::-webkit-scrollbar-track { background: transparent; }
.pls-panel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 99px;
}
.pls-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(225,33,20,.28);
}

/* ── Panel header ── */
.pls-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 16px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #c0c8d4;
  background: linear-gradient(to bottom, rgba(248,249,250,.9), rgba(248,249,250,0));
  border-bottom: 1px solid rgba(0,0,0,.05);
  position: sticky;
  top: 0;
  z-index: 1;
}
.pls-panel-header svg {
  opacity: .65;
}
.pls-count {
  margin-left: auto;
  background: rgba(0,0,0,.06);
  color: #9aa3ae;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 99px;
  letter-spacing: .04em;
}

/* ── List ── */
.pls-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Item ── */
.pls-item {
  border-radius: 11px;
  overflow: hidden;
}

/* ── Link ── */
.pls-link {
  display: flex !important;
  align-items: center;
  gap: 11px;
  padding: 10px 12px 10px 16px;
  border-radius: 11px;
  text-decoration: none !important;
  color: #1a1a1a !important;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .18s ease, color .15s ease;
  position: relative;
}
.pls-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: #e12114;
  border-radius: 0 3px 3px 0;
  transition: height .2s cubic-bezier(.34,1.56,.64,1);
}
.pls-link:hover {
  background: #fef2f2 !important;
  color: #c0160b !important;
}
.pls-link:hover::before {
  height: 55%;
}

/* ── Active item ── */
.pls-item.is-active .pls-link {
  background: #fee2e2 !important;
  color: #c0160b !important;
  font-weight: 700;
}
.pls-item.is-active .pls-link::before {
  height: 70%;
}
.pls-item.is-active .pls-item-flag-wrap {
  outline: 2px solid #e12114;
  outline-offset: 1px;
}

/* ── Flag in item ── */
.pls-item-flag-wrap {
  width: 26px;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 5px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.06);
  flex-shrink: 0;
  transition: box-shadow .18s ease, outline .18s ease;
}
.pls-item-flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Name ── */
.pls-item-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .01em;
}

/* ── Checkmark ── */
.pls-check {
  flex-shrink: 0;
  color: #e12114;
  margin-left: auto;
  filter: drop-shadow(0 1px 3px rgba(225,33,20,.45));
}

/* ── Drawer variants ── */
.pls-drawer-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pls-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px 10px 16px;
  border-radius: 11px;
  text-decoration: none !important;
  color: #1a1a1a !important;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .17s ease, color .15s ease;
  position: relative;
}
.pls-drawer-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: #e12114;
  border-radius: 0 3px 3px 0;
  transition: height .2s cubic-bezier(.34,1.56,.64,1);
}
.pls-drawer-item:hover {
  background: #fef2f2 !important;
  color: #c0160b !important;
}
.pls-drawer-item:hover::before {
  height: 55%;
}
.pls-drawer-item.is-active {
  background: #fee2e2 !important;
  color: #c0160b !important;
  font-weight: 700;
}
.pls-drawer-item.is-active::before {
  height: 70%;
}

/* ── RTL ── */
html[dir="rtl"] .pls-panel {
  right: auto;
  left: 0;
  transform-origin: top left;
}
html[dir="rtl"] .pls-link {
  padding: 10px 16px 10px 12px;
}
html[dir="rtl"] .pls-link::before {
  left: auto;
  right: 0;
  border-radius: 3px 0 0 3px;
}
html[dir="rtl"] .pls-check {
  margin-left: 0;
  margin-right: auto;
}
html[dir="rtl"] .pls-drawer-item {
  padding: 10px 16px 10px 13px;
}
html[dir="rtl"] .pls-drawer-item::before {
  left: auto;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* ════════════════════════════════════════════════
   MERCHANT HERO — Natural Gradient Overlay
   ════════════════════════════════════════════════ */

.merchant-hero {
  margin-bottom: 0;
  position: relative;
}

/* ── Full-bleed banner — 520px, content stays on photo ── */
.merchant-hero__banner {
  position: relative;
  height: 560px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--dark);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Clean cinematic gradient — no brand colour tint, no radial glow */
.merchant-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.0)  25%,
    rgba(0,0,0,.22) 52%,
    rgba(0,0,0,.70) 72%,
    rgba(0,0,0,.88) 100%
  );
  z-index: 1;
}

/* Film-grain removed */
.merchant-hero__noise { display: none; }

/* Match banner container width to the rest of the page (nav + section-menu) */
.merchant-hero__top-container.container,
.merchant-hero__glass-bar .container {
  max-width: 1520px !important;
  width: 96% !important;
}

/* ── Top bar: breadcrumb + fav ── */
.merchant-hero__top-container {
  position: relative;
  z-index: 4;
}
.merchant-hero__top-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 0 0;
}

.merchant-hero__breadcrumb { padding: 0; }
.merchant-hero__breadcrumb .el-breadcrumb__inner,
.merchant-hero__breadcrumb .el-breadcrumb__inner a,
.merchant-hero__breadcrumb .el-breadcrumb__separator {
  color: rgba(255,255,255,.52) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1px;
}
.merchant-hero__breadcrumb .el-breadcrumb__inner a:hover {
  color: rgba(255,255,255,.88) !important;
}

/* Fav button — clean dark circle, no frosted glass */
.merchant-hero__fav { position: relative; z-index: 4; }
.merchant-hero__fav .el-button,
.merchant-hero__fav button,
.merchant-hero__fav .save-store-btn {
  background: rgba(0,0,0,.40) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 50% !important;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease !important;
  color: #fff !important;
  box-shadow: none !important;
}
.merchant-hero__fav .el-button:hover,
.merchant-hero__fav button:hover,
.merchant-hero__fav .save-store-btn:hover {
  background: var(--brand) !important;
  border-color: var(--brand-dark) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ════════════════════════════════
   INFO BAR — floats on the photo gradient, no frosted glass
   ════════════════════════════════ */
.merchant-hero__glass-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.merchant-hero__glass-inner {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 28px 0 32px;
}

/* ── Logo — clean white card, static ── */
.merchant-hero__logo-wrap {
  flex-shrink: 0;
  align-self: center;
  width: 84px;
  height: 84px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.3);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  transition: none;
}
.merchant-hero__logo-wrap:hover { transform: none; }
.merchant-hero__logo-wrap .merchant-hero__logo,
.merchant-hero__logo-wrap .el-image {
  width: 84px !important;
  height: 84px !important;
  border-radius: 14px;
  display: block !important;
}
.merchant-hero__logo-wrap .el-image img {
  width: 84px !important;
  height: 84px !important;
  object-fit: cover !important;
  border-radius: 14px;
  display: block;
}

/* ── Loading skeleton rows ── */
.mh-skeleton-row {
  background: rgba(255,255,255,.12);
  display: block;
}

/* ── Info center block ── */
.merchant-hero__info {
  flex: 1;
  min-width: 0;
}

/* Row 1: name + status badge — inline, left-anchored */
.merchant-hero__name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.merchant-hero__name-row .merchant-hero__status-badge {
  flex-shrink: 0;
}

/* Legacy badges wrapper — unused */
.merchant-hero__badges { display: none; }

/* ── Cuisine tag — plain uppercase label ── */
.merchant-hero__cuisine-tag {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.45);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Hide open-badge when AJAX confirms store is actually closed */
body.merchant-store-is-closed #mh-badge-open { display: none !important; }

/* Status badge — solid, no blur */
.merchant-hero__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(22,163,74,.25);
  border: 1px solid rgba(52,211,153,.38);
  color: #86efac;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05px;
}
.merchant-hero__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: none;
}
.merchant-hero__status-badge--closed {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.32);
  color: #fca5a5;
}
.merchant-hero__status-dot--closed {
  background: #f87171;
}

.merchant-hero__schedule-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: #dc2626;
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}
.merchant-hero__schedule-btn:hover {
  background: #b91c1c;
  color: #fff !important;
  text-decoration: none;
}
.merchant-hero__schedule-btn i {
  font-size: 14px;
}

/* Restaurant name — white, crisp, no text-shadow */
.merchant-hero__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: #ffffff;
  text-shadow: none;
  letter-spacing: -.3px;
  line-height: 1.15;
  margin: 0;
}

/* Address text */
.merchant-hero__address-text {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.62);
  text-shadow: none;
  line-height: 1.5;
  margin-bottom: 8px;
}
.merchant-hero__address-text i {
  font-size: 14px;
  color: rgba(255,255,255,.38);
  margin-top: 1px;
  flex-shrink: 0;
}

/* ── Meta row: flat single row, all items share same gap ── */
.merchant-hero__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 6px;
}

/* Dot separator between items */
.mh-meta-sep {
  color: rgba(255,255,255,.28);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  user-select: none;
}

/* Star rating label — plain amber text, no pill */
.mh-rating-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fbbf24;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.mh-rating-label i { font-size: 12px; color: #fbbf24; }
.mh-rating-label strong { color: #fef3c7; }
.mh-rating-label:hover { color: #fde68a; text-decoration: none; }

/* Distance label — plain muted text, no pill */
.mh-distance-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.45);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
}
.mh-distance-label i { font-size: 12px; color: rgba(255,255,255,.28); }

/* Ghost outline action button (Add Address) */
.mh-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid rgba(255,255,255,.38);
  color: rgba(255,255,255,.80);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.mh-action-btn i { font-size: 12px; color: rgba(255,255,255,.5); }
.mh-action-btn:hover {
  border-color: rgba(255,255,255,.65);
  color: #fff;
  background: rgba(255,255,255,.08);
  text-decoration: none;
}
.mh-action-btn:hover i { color: rgba(255,255,255,.75); }

/* Solid red primary action button (Schedule Order) */
.mh-action-btn--primary {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.mh-action-btn--primary i { color: rgba(255,255,255,.8); }
.mh-action-btn--primary:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

/* Legacy chip classes — kept for any other page usage */
.merchant-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.merchant-hero__chip i { font-size: 12px; color: rgba(255,255,255,.28); }
.merchant-hero__chip:hover { color: rgba(255,255,255,.72); text-decoration: none; }
a.merchant-hero__chip { cursor: pointer; }
.merchant-hero__chip--star { color: #fbbf24; }
.merchant-hero__chip--star i { color: #fbbf24; }
.merchant-hero__chip--star strong { color: #fef3c7; font-weight: 700; }
.merchant-hero__chip--star span { color: rgba(253,230,138,.65); }
.merchant-hero__chip--add-address { color: rgba(255,255,255,.80); }

/* ── Right column: Promo trigger + Delivery / Pickup toggle ── */
.merchant-hero__right-col {
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* ── Delivery / Pickup segmented control (right column) ── */
.merchant-hero__right-col .btn-group.btn-group-rounded {
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  min-height: 48px;
  padding: 4px;
  gap: 3px;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.merchant-hero__right-col .btn-group-rounded .btn {
  border-radius: 9px !important;
  padding: 6px 20px !important;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.45) !important;
  background: transparent !important;
  border: none !important;
  transition: color .15s, background .15s !important;
  box-shadow: none !important;
  line-height: 1.4;
  white-space: nowrap;
}
.merchant-hero__right-col .btn-group-rounded .btn .bold {
  font-weight: 700;
  color: rgba(255,255,255,.55);
  display: block;
}
.merchant-hero__right-col .btn-group-rounded .btn p {
  font-size: 10px;
  color: rgba(255,255,255,.32);
  margin: 0;
  font-weight: 500;
}
.merchant-hero__right-col .btn-group-rounded .btn:hover {
  color: rgba(255,255,255,.85) !important;
  background: rgba(255,255,255,.08) !important;
}
.merchant-hero__right-col .btn-group-rounded .btn.active {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(220,38,38,.4) !important;
}
.merchant-hero__right-col .btn-group-rounded .btn.active .bold { color: #fff; }
.merchant-hero__right-col .btn-group-rounded .btn.active p { color: rgba(255,255,255,.72); }
.merchant-hero__right-col .btn-group-rounded .btn.active:hover {
  background: var(--brand-dark) !important;
}

/* Single service in right-col: still shows as a compact indicator */
.merchant-hero__right-col .btn-group.btn-group-rounded:has(.btn:only-child) {
  background: rgba(220,38,38,.15) !important;
  border-color: rgba(220,38,38,.35) !important;
  min-height: auto;
  border-radius: 10px !important;
}
.merchant-hero__right-col .btn-group-rounded .btn.active:only-child {
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 18px !important;
}
.merchant-hero__right-col .btn-group-rounded .btn.active:only-child .bold {
  color: rgba(255,255,255,.85);
  font-size: 12px;
}
.merchant-hero__right-col .btn-group-rounded .btn.active:only-child:hover {
  background: transparent !important;
}

/* ════════════════════════════════════════════════
   SCHEDULE ORDER BANNER — On-brand Red
   ════════════════════════════════════════════════ */

.schedule-banner {
  position: relative;
  z-index: 10;
  margin-top: 0;
  padding: 16px 0;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, transparent 100%);
}

.schedule-banner__card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid rgba(225,33,20,.12);
  box-shadow:
    0 2px 8px rgba(225,33,20,.06),
    0 8px 32px rgba(225,33,20,.08);
  position: relative;
  overflow: hidden;
}

.schedule-banner__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--brand-gradient);
  border-radius: 0 4px 4px 0;
}

.schedule-banner__card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -8%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225,33,20,.04) 0%, transparent 70%);
  pointer-events: none;
}

.schedule-banner__icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.schedule-banner__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.schedule-banner__icon i {
  font-size: 22px;
  color: var(--brand);
}

.schedule-banner__pulse {
  position: absolute;
  inset: -3px;
  border-radius: 17px;
  border: 1.5px solid rgba(225,33,20,.15);
  animation: sched-pulse 2.8s ease-in-out infinite;
  z-index: 1;
}
@keyframes sched-pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.2); }
}

.schedule-banner__content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.schedule-banner__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--brand-light);
  color: var(--brand);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: 1.4;
}

.schedule-banner__title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 0 0 4px !important;
}

.schedule-banner__desc {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  line-height: 1.55;
  margin: 0 !important;
  max-width: 480px;
}

.schedule-banner__action {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.schedule-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  color: #fff !important;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.schedule-banner__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 50%);
  pointer-events: none;
}

.schedule-banner__btn i {
  font-size: 16px;
  color: #fff;
}

.schedule-banner__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand-lg);
  color: #fff !important;
}

.schedule-banner__btn:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .schedule-banner__card {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
    gap: 14px;
  }
  .schedule-banner__card::before { display: none; }
  .schedule-banner__desc { max-width: none; }
  .schedule-banner__btn { width: 100%; justify-content: center; }
}


/* ════════════════════════════════════════════════
   ADDRESS NEEDED BAR
   ════════════════════════════════════════════════ */
.address-bar {
  background: transparent;
  padding: 16px 0 20px;
}

.address-bar__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  border-radius: 20px;
  background: #ffffff;
  border: 1.5px solid rgba(225,33,20,.1);
  box-shadow:
    0 2px 8px rgba(0,0,0,.04),
    0 8px 28px rgba(225,33,20,.06);
  position: relative;
  overflow: hidden;
}

/* Subtle warm radial glow behind icon */
.address-bar__inner::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225,33,20,.07) 0%, transparent 70%);
  pointer-events: none;
}

.address-bar__icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(225,33,20,.32), inset 0 1px 0 rgba(255,255,255,.2);
  flex-shrink: 0;
}

.address-bar__icon--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 16px rgba(245,158,11,.32), inset 0 1px 0 rgba(255,255,255,.2);
}
.address-bar--warning .address-bar__inner {
  border-color: rgba(245,158,11,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 8px 28px rgba(245,158,11,.07);
}
.address-bar--warning .address-bar__inner::before {
  background: radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
}

.address-bar__text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.address-bar__text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 3px;
}
.address-bar__text span {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.address-bar__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 30px;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .25px;
  text-decoration: none !important;
  box-shadow: var(--shadow-brand);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.address-bar__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, transparent 55%);
  pointer-events: none;
}
.address-bar__btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: left .5s ease;
  pointer-events: none;
}
.address-bar__btn:hover {
  box-shadow: var(--shadow-brand-lg);
  transform: translateY(-2px);
  color: #fff !important;
}
.address-bar__btn:hover::after {
  left: 160%;
}

/* ════════════════════════════════════════════════
   MOBILE HERO — Premium Redesign
   ════════════════════════════════════════════════ */

/* ── Banner photo ── */
.merchant-hero-mobile__banner {
  position: relative;
  min-height: 270px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--dark);
  overflow: hidden;
}

/* ── Cinematic bottom-fade gradient (mobile only) ── */
.mhm-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.08) 0%,
    rgba(0,0,0,.0)  30%,
    rgba(0,0,0,.30) 65%,
    rgba(0,0,0,.62) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ── Fav button top-right ── */
.mhm-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  padding: 14px 14px 0;
}

.mhm-top-bar .save-store-btn,
.mhm-top-bar button,
.mhm-top-bar .el-button {
  background: rgba(0,0,0,.38) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background .2s ease !important;
}

.mhm-top-bar .save-store-btn:hover,
.mhm-top-bar button:hover {
  background: rgba(225,33,20,.72) !important;
}

/* ════════════════════════════════════════════════
   MOBILE INFO CARD — Premium Redesign v4
   ════════════════════════════════════════════════ */

/* ── White card ── */
.mhm-info-card {
  background: #fff;
  border-radius: 24px 24px 0 0;
  margin-top: -24px;
  position: relative;
  z-index: 5;
  padding: 12px 16px 12px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.08);
  overflow: visible;
}

/* ── Logo: float left so text wraps naturally beside it ── */
.mhm-logo-wrap {
  float: left;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  overflow: hidden;
  background: #f9fafb;
  position: relative;
  z-index: 6;
  margin-top: -50px;
  margin-right: 12px;
  margin-bottom: 6px;
}

.mhm-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Name + badge on one line ── */
.mhm-name-badge {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 3px;
  padding-top: 2px;
}

.mhm-restaurant-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -.3px !important;
  line-height: 1.3 !important;
  flex: 1;
  min-width: 0;
}

.mhm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 3px;
}

.mhm-status-badge--open  { background: #dcfce7; color: #15803d; }
.mhm-status-badge--closed { background: #fee2e2; color: #b91c1c; }

.mhm-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  flex-shrink: 0;
}
.mhm-status-dot--closed { background: #ef4444; }

/* ── Inline stats: ★ · Cuisine · € ── */
.mhm-stats-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  font-size: 12px;
  margin-bottom: 0;
}

.mhm-stat         { font-weight: 500; color: #6b7280; }
.mhm-stat-sep     { color: #9ca3af; }
.mhm-stat--price  { color: #059669; font-weight: 700; }

.mhm-stat--rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #b45309;
}
.mhm-stat--rating .zmdi-star { color: #f59e0b; font-size: 12px; }
.mhm-stat-sub { color: #9ca3af; font-weight: 400; }

/* ── Clearfix after floated logo region ── */
.mhm-float-clear { clear: both; display: block; }

/* ── Bottom row: tap-row + service button side by side ── */
.mhm-bottom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* ── Tap for hours row ── */
.mhm-info-tap-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: #f9fafb !important;
  border-radius: 10px !important;
  border: 1px solid #f0f0f0 !important;
  text-decoration: none !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  flex: 1 !important;
  margin: 0 !important;
  transition: background .15s !important;
}
.mhm-info-tap-row:hover { background: #f3f4f6 !important; }
.mhm-info-tap-row .zmdi-pin    { color: #e12114; font-size: 14px; flex-shrink: 0; }
.mhm-info-tap-row span         { flex: 1; }
.mhm-info-tap-row .zmdi-chevron-right { color: #d1d5db; font-size: 15px; }

/* ── Mobile service toggle ── */
.mhm-service-wrap { padding-bottom: 0; flex-shrink: 0; }

.mhm-service-wrap .btn-group.btn-group-rounded {
  background: #f3f4f6 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 4px !important;
  gap: 0 !important;
  box-shadow: none !important;
  min-height: unset !important;
  width: auto !important;
}

.mhm-service-wrap .btn-group-rounded .btn {
  flex: 1 !important;
  border-radius: 9px !important;
  border: none !important;
  background: transparent !important;
  color: #9ca3af !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 6px !important;
  transition: all .2s !important;
  box-shadow: none !important;
  line-height: 1.3 !important;
  text-align: center !important;
  justify-content: center !important;
}
.mhm-service-wrap .btn-group-rounded .btn .bold { font-weight: 700 !important; color: inherit !important; font-size: 13px !important; display: block; }
.mhm-service-wrap .btn-group-rounded .btn p     { font-size: 11px !important; margin: 1px 0 0 !important; color: inherit !important; opacity: .7; font-weight: 400 !important; }

.mhm-service-wrap .btn-group-rounded .btn.active {
  background: #fff !important;
  color: #111827 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.10) !important;
}
.mhm-service-wrap .btn-group-rounded .btn.active .bold { color: #111827 !important; }
.mhm-service-wrap .btn-group-rounded .btn.active p     { color: #6b7280 !important; opacity: 1 !important; }

/* Single-service: compact pill (inline in bottom row) */
.mhm-service-wrap .btn-group.btn-group-rounded:has(.btn:only-child) {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.mhm-service-wrap .btn-group-rounded:has(.btn:only-child) .btn.active {
  background: #e12114 !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(225,33,20,.25) !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  flex: unset !important;
  width: auto !important;
  white-space: nowrap !important;
}
.mhm-service-wrap .btn-group-rounded:has(.btn:only-child) .btn.active .bold { color: #fff !important; }
.mhm-service-wrap .btn-group-rounded:has(.btn:only-child) .btn.active p     { color: rgba(255,255,255,.8) !important; opacity: 1 !important; }

/* ── Kill old class ── */
.merchant-top-header { display: none !important; }

/* ════════════════════════════════════════════════
   MOBILE CATEGORY CAROUSEL — Premium Redesign
   ════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* ══ Widget sub-nav row — CSS Grid for guaranteed fill ══ */
  #vue-widget-nav-mobile {
    background: #fff !important;
    padding: 8px 12px 10px !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
    margin-top: 0 !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    column-gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* widget-services hidden — out of grid flow */
  #vue-widget-nav-mobile .widget-services {
    display: none !important;
  }

  /* ── LEFT: "Delivery Now" — compact auto-width pill button ── */
  #vue-widget-nav-mobile .flexcol:first-child {
    min-width: 0 !important;
  }

  #vue-widget-nav-mobile .flexcol:first-child .position-relative {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1.5px solid #e2e4e7 !important;
    border-radius: 100px !important;
    padding: 0 12px !important;
    height: 40px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }

  /* "Delivery Now" text */
  #vue-widget-nav-mobile .flexcol:first-child p.m-0 {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  #vue-widget-nav-mobile .flexcol:first-child .dropdown {
    display: flex !important;
    align-items: center !important;
  }

  /* Hide the address span — keep only the ▼ caret */
  #vue-widget-nav-mobile .flexcol:first-child .btn-text {
    font-size: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
  }

  #vue-widget-nav-mobile .flexcol:first-child .btn-text span.text-truncate {
    display: none !important;
  }

  /* ▼ caret */
  #vue-widget-nav-mobile .flexcol:first-child .btn-text.dropdown-toggle::after {
    font-size: 0 !important;
    margin-left: 5px !important;
    vertical-align: 2px !important;
    border-top: 5px solid #374151 !important;
    border-right: 4px solid transparent !important;
    border-left: 4px solid transparent !important;
    border-bottom: 0 !important;
    display: inline-block !important;
    opacity: 1 !important;
  }

  /* ── RIGHT: Search bar — fills the 1fr grid column ── */
  #vue-widget-nav-mobile .widget-search {
    min-width: 0 !important;
    width: 100% !important;
  }

  #vue-widget-nav-mobile .widget-search .btn {
    width: 100% !important;
    height: 40px !important;
    border-radius: 100px !important;
    background: #f4f5f7 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    gap: 8px !important;
    cursor: text !important;
    box-sizing: border-box !important;
  }

  /* Search icon on the left */
  #vue-widget-nav-mobile .widget-search .btn i {
    font-size: 17px !important;
    color: #9ca3af !important;
    flex-shrink: 0 !important;
  }

  /* "Search..." placeholder text via pseudo-element */
  #vue-widget-nav-mobile .widget-search .btn::after {
    content: 'Search...' !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    font-family: var(--font-display) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* ── "Search in menu" plain input inside mobile header ── */
  #vue-widget-nav-mobile .widget-search .menu-search-header {
    width: 100% !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    background: #f4f5f7 !important;
    border-radius: 100px !important;
    box-sizing: border-box !important;
  }
  #vue-widget-nav-mobile .widget-search .menu-search-header .menu-search-header-icon {
    font-size: 17px !important;
    color: #9ca3af !important;
    flex-shrink: 0 !important;
  }
  #vue-widget-nav-mobile .widget-search .menu-search-header .menu-search-header-input {
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-family: var(--font-display) !important;
    color: #111827 !important;
    padding: 0 !important;
  }
  #vue-widget-nav-mobile .widget-search .menu-search-header .menu-search-header-input::placeholder {
    color: #9ca3af !important;
  }
  #vue-widget-nav-mobile .widget-search .menu-search-header .menu-search-header-clear {
    font-size: 13px !important;
    color: var(--brand, #e12114) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  /* ════════════════════════════════════════════════
     CATEGORY NAV — App-style scrollable tab bar
     ════════════════════════════════════════════════ */

  /* ── Sticky wrapper (el-affix) — full-bleed under header ── */
  .category-carousel-sticky {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    z-index: 9 !important;
  }
  /* Kill spacing around the mobile carousel wrapper and the hidden desktop bar */
  .section-menu .col-lg-9 > div.d-block.d-lg-none {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Hide desktop topcategory bar entirely on mobile (incl. el-affix wrapper) */
  #vue-merchant-category > .el-affix,
  .section-menu .category-owlcarousel { display: none !important; }
  /* Trim padding on section-menu / container on mobile */
  .section-menu { padding-top: 0 !important; margin-top: 0 !important; }
  .section-menu > .container { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
  .section-menu > .container > .row { margin-top: 0 !important; }
  .section-menu .col-lg-9.menu-center { margin: 0 !important; padding: 0 !important; }
  #vue-merchant-category { margin-top: 0 !important; padding-top: 0 !important; }
  #vue-merchant-category > div[ref="search_result"],
  #vue-merchant-category > div:first-child { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  /* Remove bottom space below the restaurant info card */
  #vue-merchant-details { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  #vue-merchant-details + * { margin-top: 0 !important; }
  /* Make sure the carousel sits flush */
  .category-carousel-sticky { margin-top: 0 !important; padding-top: 0 !important; }
  .category-carousel-sticky .el-affix--fixed {
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
  }

  /* ── Bar container ── */
  .category-carousel {
    background: #fff !important;
    border-bottom: 1.5px solid #f0f0f0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
    height: 50px !important;
    align-items: stretch !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* ── Hide < > arrow columns — touch swipe navigates ── */
  .category-carousel .col-1:nth-child(2),
  .category-carousel .col-1:nth-child(4) {
    display: none !important;
  }

  /* ── Hamburger column ── */
  .category-carousel .col-1:nth-child(1) {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    background: #fff !important;
    position: relative !important;
    z-index: 5 !important;
    box-shadow: 6px 0 8px -4px rgba(0,0,0,.08) !important;
  }

  .category-carousel a.btn {
    width: 46px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
    color: #374151 !important;
    background: #fff !important;
    border: none !important;
    border-right: 1.5px solid #f0f0f0 !important;
    padding: 0 !important;
    transition: color .15s !important;
    flex-shrink: 0 !important;
  }

  .category-carousel a.btn:hover {
    color: #e12114 !important;
  }

  /* ── Tabs column — fills all remaining width ── */
  .category-carousel .col-9 {
    flex: 1 1 0 !important;
    max-width: 100% !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  /* ── Owl wrapper ── */
  .category-carousel .owl-carousel {
    width: 100% !important;
  }

  .category-carousel .owl-carousel .owl-stage-outer {
    overflow: hidden !important;
    height: 50px !important;
  }

  .category-carousel .owl-carousel .owl-stage {
    display: flex !important;
    align-items: stretch !important;
    height: 50px !important;
    padding-left: 6px !important;
  }

  .category-carousel .owl-carousel .owl-item {
    width: auto !important;
    display: flex !important;
    align-items: stretch !important;
  }

  /* ── Tab link — full bar height, transparent bg ── */
  .category-carousel .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
    color: #adb5bd !important;
    white-space: nowrap !important;
    text-transform: none !important;
    position: relative !important;
    transition: color .2s ease !important;
    text-decoration: none !important;
  }

  .category-carousel .nav-link p {
    margin: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: 1 !important;
    position: relative !important;
    display: inline-block !important;
  }

  /* ── Active tab — dark bold text ── */
  .category-carousel .nav-link.active {
    color: #111827 !important;
    font-weight: 700 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ── Active indicator — red underline matching text width ── */
  .category-carousel .nav-link.active::after { display: none !important; }
  .category-carousel .nav-link.active p::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -10px !important;
    height: 3px !important;
    background: #e12114 !important;
    border-radius: 3px 3px 0 0 !important;
    display: block !important;
  }

  /* ── Hide header search icon on mobile ── */
  .header-search-btn {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════
   CATEGORY DRAWER (bottom sheet) — Redesigned
   ════════════════════════════════════════════════ */

/* Drawer shell */
.el-drawer.drawer-category {
  border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,.14) !important;
}

.el-drawer.drawer-category .el-drawer__body {
  padding: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── Drag handle ── */
.dc-handle-bar {
  width: 36px !important;
  height: 4px !important;
  border-radius: 100px !important;
  background: #e5e7eb !important;
  margin: 12px auto 0 !important;
  flex-shrink: 0 !important;
}

/* ── Header ── */
.dc-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  flex-shrink: 0 !important;
}

.dc-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

/* Red icon circle */
.dc-header-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #e12114 0%, #c8190e 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  box-shadow: 0 4px 12px rgba(225,33,20,.30) !important;
}

.dc-header-text {
  min-width: 0 !important;
}

.dc-header-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 200px !important;
  line-height: 1.2 !important;
}

.dc-header-sub {
  font-size: 12px !important;
  color: #9ca3af !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
  line-height: 1 !important;
}

/* Close button */
.dc-close-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #f3f4f6 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  color: #374151 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background .15s, color .15s !important;
  padding: 0 !important;
}

.dc-close-btn:hover {
  background: #fee2e2 !important;
  color: #e12114 !important;
}

/* ── Category list ── */
.dc-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 8px 0 20px !important;
}

/* Each row */
.dc-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  height: 58px !important;
  text-decoration: none !important;
  color: #111827 !important;
  border-bottom: 1px solid #f9fafb !important;
  transition: background .14s ease !important;
  gap: 12px !important;
}

.dc-row:last-child {
  border-bottom: none !important;
}

.dc-row:hover,
.dc-row:active {
  background: #fef2f2 !important;
}

.dc-row:hover .dc-row-name,
.dc-row:active .dc-row-name {
  color: #e12114 !important;
}

.dc-row:hover .dc-row-dot,
.dc-row:active .dc-row-dot {
  background: #e12114 !important;
  transform: scale(1.3) !important;
}

/* Left side */
.dc-row-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

/* Colored accent dot */
.dc-row-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #e5e7eb !important;
  flex-shrink: 0 !important;
  transition: background .14s, transform .14s !important;
}

/* Category name */
.dc-row-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  letter-spacing: .1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  transition: color .14s !important;
}

/* Item count badge */
.dc-row-badge {
  min-width: 28px !important;
  height: 24px !important;
  border-radius: 100px !important;
  background: #fef2f2 !important;
  color: #e12114 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 9px !important;
  flex-shrink: 0 !important;
  letter-spacing: .2px !important;
}











/* ════════════════════════════════════════════════════════════════
   MENU SEARCH BAR — Premium Redesign
   ════════════════════════════════════════════════════════════════ */

.menu-search-wrap {
  position: relative;
}

.menu-search-wrap .el-input {
  --el-input-height: 56px !important;
  --el-input-border-radius: 14px !important;
  --el-input-border-color: #e8e3db !important;
  --el-input-hover-border-color: #c8c2b9 !important;
  --el-input-focus-border-color: #e12114 !important;
  --el-input-bg-color: #ffffff !important;
  --el-input-placeholder-color: #b0aaa3 !important;
  --el-input-text-color: #1a1a1a !important;
}

.menu-search-wrap .el-input__wrapper {
  border-radius: 14px !important;
  border: 1.5px solid #e8e3db !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 0 18px 0 14px !important;
  transition: border-color .2s ease, background .2s ease !important;
}

.menu-search-wrap .el-input__wrapper:hover {
  border-color: #c8c2b9 !important;
  box-shadow: none !important;
}

.menu-search-wrap .el-input__wrapper.is-focus {
  border-color: #e12114 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

.menu-search-wrap .el-input__inner {
  font-family: var(--font-display) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  letter-spacing: .01em !important;
  height: 56px !important;
  line-height: 56px !important;
}

.menu-search-wrap .el-input__inner::placeholder {
  color: #b0aaa3 !important;
  font-weight: 400 !important;
}

.menu-search-wrap .el-input__prefix {
  display: flex !important;
  align-items: center !important;
  margin-right: 4px !important;
}

.menu-search-wrap .el-input__prefix-inner {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.menu-search-wrap .el-input__prefix-inner .zmdi-search,
.menu-search-wrap .el-input__prefix-inner i {
  font-size: 20px !important;
  color: #e12114 !important;
  opacity: .75 !important;
  transition: opacity .15s ease !important;
}

.menu-search-wrap .el-input__wrapper.is-focus .zmdi-search,
.menu-search-wrap .el-input__wrapper.is-focus i {
  opacity: 1 !important;
}

.menu-search-wrap .el-input__suffix {
  display: flex !important;
  align-items: center !important;
}

.menu-search-wrap .el-input__suffix .el-link {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #9a9490 !important;
}

.menu-search-wrap .el-input__suffix .el-link:hover {
  color: #e12114 !important;
}

/* ════════════════════════════════════════════════════════════════
   MENU PAGE v7 — Editorial Clean Premium
   Light · Airy · Professional · No dark gradients · No gloss
   ════════════════════════════════════════════════════════════════ */

/* ══ Page canvas ══ */
.section-menu {
  background: #f6f5f2;
  padding-top: 0;
  padding-bottom: 80px;
  position: relative;
}
.section-menu::before {
  display: none;
}
.section-menu > .container {
  padding-top: 36px;
  position: relative;
  max-width: 1520px !important;
  width: 96% !important;
}


/* ══════════════════════════════════════════════════
   SIDEBAR — Clean Editorial Card
   ══════════════════════════════════════════════════ */

.section-menu .menu-left {
  border-right: none !important;
  padding-right: 12px !important;
}

#sticky-sidebar {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 26px 14px 22px !important;
  border: 1px solid #e8e6e1 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#sticky-sidebar:has(.inner-wrapper-sticky) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

#sticky-sidebar .inner-wrapper-sticky {
  background: #ffffff;
  border-radius: 20px;
  padding: 26px 14px 22px;
  border: 1px solid #e8e6e1;
  box-shadow: none;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.07) transparent;
}
#sticky-sidebar .inner-wrapper-sticky::-webkit-scrollbar { width: 3px; }
#sticky-sidebar .inner-wrapper-sticky::-webkit-scrollbar-thumb { background: rgba(0,0,0,.07); border-radius: 3px; }

#sticky-sidebar h5 {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  margin: 0 0 18px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#sticky-sidebar h5::before {
  content: '';
  width: 16px;
  height: 2px;
  background: #e12114;
  border-radius: 99px;
  flex-shrink: 0;
}
#vue-cart h5 .basket-icon {
  width: 40px;
  height: 40px;
  opacity: .9;
  flex-shrink: 0;
  margin-left: auto;
  display: inline-block;
  vertical-align: middle;
}
#vue-cart h5 .basket-icon [fill="#1c274c"],
#vue-cart .basket-header-right .basket-icon [fill="#1c274c"] { fill: #e12114 !important; }
#vue-cart h5 .basket-icon [fill="#8e93a6"],
#vue-cart .basket-header-right .basket-icon [fill="#8e93a6"] { fill: rgba(225,33,20,0.35) !important; }

#sticky-sidebar h5 .menu-cat-icon {
  width: 35px;
  height: 35px;
  fill: #e12114;
  opacity: .75;
  flex-shrink: 0;
  margin-left: auto;
  display: inline-block;
  vertical-align: middle;
}

ul#menu-category {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid #f0ede8;
  margin-left: 6px;
}

.menu-category a {
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #7c8494 !important;
  padding: 9px 10px 9px 16px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 0 8px 8px 0 !important;
  transition: all .15s ease !important;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  position: relative;
  border: none !important;
  border-left: 2px solid transparent !important;
  margin-left: -2px;
  letter-spacing: .01em;
}
.menu-category a::before { display: none !important; }

.menu-category a:hover {
  background: rgba(0,0,0,.03) !important;
  color: #1a1a1a !important;
  border-left-color: rgba(225,33,20,.35) !important;
}

.menu-category li.active a,
.menu-category li a.active,
#menu-category .col a.active,
#sticky-sidebar a.nav-link.active,
#sticky-sidebar .menu-category a.active,
#sticky-sidebar .menu-category a.nav-link.active,
ul#menu-category li a.nav-link.active,
ul#menu-category a.active,
#sticky-sidebar .nav-pills .nav-link.active,
#sticky-sidebar .nav-link.active {
  background: rgba(225,33,20,.06) !important;
  color: #e12114 !important;
  font-weight: 600 !important;
  border-left-color: #e12114 !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: none !important;
}

.menu-category li.active a::before,
.menu-category li a.active::before { display: none !important; }
.menu-category li.active a:hover { color: #e12114 !important; }
.menu-category li.active a:after,
.menu-category li a.active:after { display: none !important; }
#sticky-sidebar a.nav-link.active:hover,
ul#menu-category a.active:hover { color: #e12114 !important; }


/* ══════════════════════════════════════════════════
   CATEGORY SECTIONS — Clean Professional Cards
   ══════════════════════════════════════════════════ */

.menu-center section {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e8e6e1;
  box-shadow: none;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 0;
  scroll-margin-top: 120px;
}

.menu-center section > h5 {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 18px 28px 16px 24px !important;
  border-bottom: 1px solid #f0ede8 !important;
  border-left: 4px solid #e12114 !important;
  display: block !important;
  position: relative !important;
  background: #ffffff !important;
}
.menu-center section > h5::before {
  display: none !important;
}
.menu-center section > h5::after {
  display: none !important;
}

.cat-section-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
  border-radius: 18px 18px 0 0;
}

.cat-section-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform .6s ease;
}

.cat-section-image:hover img {
  transform: scale(1.04);
}

.cat-section-image__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 20%,
    rgba(0,0,0,.30) 50%,
    rgba(0,0,0,.88) 100%
  );
  display: flex;
  align-items: flex-end;
  padding: 30px 26px 10px;
}

.cat-section-image__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.cat-section-image__name::before,
.cat-section-image__name::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.55));
  border-radius: 99px;
}
.cat-section-image__name::before {
  background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,.55));
}

.menu-center section > p {
  font-size: 13px !important;
  color: #9ca3af !important;
  margin: 0 !important;
  padding: 10px 28px 4px !important;
  border-bottom: none !important;
  font-style: normal;
}


/* ══════════════════════════════════════════════════
   FOOD ITEM ROWS — Clean Professional List
   ══════════════════════════════════════════════════ */

.list-item-rows .item-right-col {
  flex-shrink: 0 !important;
  width: 124px !important;
  padding: 16px 16px 16px 8px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

.list-item-rows .item-thumb-wrap {
  position: relative !important;
  display: inline-block !important;
  width: 100px !important;
  height: 100px !important;
}

.list-item-rows .item-thumb {
  width: 100px !important;
  height: 100px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: #f5f5f5 !important;
}

.list-item-rows .item-thumb img {
  width: 100px !important;
  height: 100px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.list-item-rows .item-add-btn {
  position: absolute !important;
  bottom: 0px !important;
  right: 7px !important;
  filter: none !important;
  transform: translateY(50%) !important;
}

.list-item-rows .item-add-btn:has(.quantity-wrapper) {
  left: 0 !important;
  right: 0 !important;
  bottom: 8px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.list-item-rows .item-thumb-wrap:not(:has(.item-thumb)) {
  width: auto !important;
  height: auto !important;
}

.list-item-rows .item-thumb-wrap:not(:has(.item-thumb)) .item-add-btn {
  position: static !important;
}

.list-item-rows .col.fixed-height {
  padding: 22px 23px 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  align-items: stretch !important;
}

.list-item-rows .price-btn-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  margin-top: auto !important;
}

.list-item-rows .item-price-col {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.list-item-rows .item-btn-col {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-left: 12px !important;
  /* Desktop: image-btn right = item-right-col pad-right (16px) + item-add-btn right (7px) = 23px
     from row edge. col.fixed-height right pad is already 23px, so no extra offset needed. */
  padding-right: 0 !important;
}

.list-item-rows .item-right-col {
  padding-bottom: 28px !important;
}

.list-item-rows .col.fixed-height .center {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.list-item-rows {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #f0ede8 !important;
  transition: background .15s ease !important;
  cursor: pointer;
  position: relative;
}
.list-item-rows:last-child { border-bottom: none !important; }
.list-item-rows:hover {
  background: #fdf9f8 !important;
  box-shadow: none !important;
}

.list-item-rows .row.m-0.p-0 {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}



.list-item-rows .fixed-height {
  min-height: 0 !important;
}

.list-item-rows h6.m-0 {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em;
  margin: 0 0 5px !important;
  transition: color .15s ease;
}
.list-item-rows:hover h6.m-0 { color: #e12114 !important; }

.list-item-rows p {
  font-size: 13px !important;
  color: #9ca3af !important;
  line-height: 1.6 !important;
  margin: 0 0 8px !important;
}
.list-item-rows p.ellipsis-2-lines {
  font-size: 13px !important;
  color: #9ca3af !important;
  line-height: 1.6 !important;
  margin: 0 0 12px !important;
}

.list-item-rows .btn-group-toggle {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.list-item-rows .btn-group-toggle .btn {
  background: transparent !important;
  color: #1a1a1a !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: default;
  pointer-events: none;
  line-height: 1;
}
.list-item-rows .btn-group-toggle .btn.active,
.list-item-rows .btn-group .btn.active {
  background: transparent !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
}
.list-item-rows p.bold.m-0.prices,
.list-item-rows .prices {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
  line-height: 1;
}
.list-item-rows p.bold.m-0.prices:empty {
  display: none !important;
  margin: 0 !important;
}


/* ADD TO CART — compact circle + button */
.btn-add-plus,
a.btn-add-plus {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  background: #e12114 !important;
  color: #fff !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
  flex-shrink: 0 !important;
}
.btn-add-plus:hover,
a.btn-add-plus:hover {
  background: #c51d12 !important;
  box-shadow: none !important;
  transform: scale(1.12) !important;
  color: #fff !important;
}

/* el-button circle + variant */
.list-item-rows .el-button.btn-add-plus,
.list-item-rows .el-button.btn-add-plus:focus,
.list-item-rows .el-button.btn-add-plus.is-active {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  background: #e12114 !important;
  border-color: transparent !important;
  color: #fff !important;
  padding: 0 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
  --el-button-bg-color: #e12114 !important;
  --el-button-border-color: transparent !important;
  --el-button-hover-bg-color: #c51d12 !important;
  --el-button-hover-border-color: transparent !important;
  --el-button-active-bg-color: #b01910 !important;
  --el-button-text-color: #fff !important;
}
.list-item-rows .el-button.btn-add-plus:hover {
  background: #c51d12 !important;
  box-shadow: none !important;
  transform: scale(1.12) !important;
  color: #fff !important;
}
.list-item-rows .el-button.btn-add-plus.is-disabled,
.list-item-rows .el-button.btn-add-plus[disabled] {
  background: #f3f4f6 !important;
  color: #b0b7c3 !important;
  box-shadow: none !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  transform: none !important;
}


/* Qty stepper */
.quantity-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
}
.quantity-parent {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.quantity-parent .quantity,
.list-item-rows .quantity {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: #f7f6f3 !important;
  border: 1px solid #e8e6e1 !important;
  border-radius: 50px !important;
  padding: 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  transition: box-shadow .2s ease, border-color .2s ease !important;
}
.quantity-parent .quantity:hover,
.list-item-rows .quantity:hover {
  border-color: #d4d0ca !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
}
.quantity-wrapper .qty-btn,
.list-item-rows .quantity .qty-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  background: #fff !important;
  border: none !important;
  color: #374151 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  border-radius: 50% !important;
  transition: all .18s ease !important;
  padding: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.quantity-wrapper .qty-btn:hover,
.list-item-rows .quantity .qty-btn:hover {
  background: #e12114 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(225,33,20,.3) !important;
  transform: scale(1.08) !important;
}
.quantity-wrapper .quantity .qty,
.list-item-rows .quantity .qty {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
  min-width: 28px !important;
  text-align: center !important;
  line-height: 1 !important;
  user-select: none !important;
}

.list-item-rows .item-right-col .text-muted {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  color: #c8cdd6 !important;
  font-style: normal;
}


/* ══════════════════════════════════════════════════
   CART PANEL — Premium Redesign
   ══════════════════════════════════════════════════ */

.sticky-cart {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.sticky-cart::before { display: none !important; }

.sticky-cart .inner-wrapper-sticky {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e8e6e1;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  overflow: hidden;
  min-height: 480px;
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease;
  will-change: transform;
}

#vue-cart h5 {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #e12114 !important;
  background: #ffffff !important;
  margin: 0 !important;
  padding: 14px 22px 0 !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────
   CHECKOUT CART — Full Redesign
   ───────────────────────────────────────────── */

/* ── Basket Header ── */
#vue-cart h5 {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #111827 !important;
  background: #fff !important;
  margin: 0 !important;
  padding: 18px 22px 12px !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: static !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#vue-cart h5 .basket-icon {
  margin-left: auto !important;
}

#vue-cart .basket-header-wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #fff !important;
  border-radius: 0 !important;
  padding: 18px 22px 12px !important;
  border-bottom: none !important;
}

#vue-cart .basket-header-wrap h5 {
  border-radius: 0 !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#vue-cart .basket-header-wrap .cart-subtitle {
  display: none !important;
}

#vue-cart .basket-header-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}

#vue-cart .basket-header-right .basket-icon {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  opacity: .75;
}

#vue-cart .basket-header-right .basket-icon [fill="#1c274c"] { fill: #374151 !important; }
#vue-cart .basket-header-right .basket-icon [fill="#8e93a6"] { fill: #9ca3af !important; }

.basket-header-total {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #e12114, #b91c1c) !important;
  padding: 5px 12px !important;
  border-radius: 50px !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 10px rgba(225,33,20,.3) !important;
}

#vue-cart h5::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #e12114 !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.2) !important;
  display: block !important;
  flex-shrink: 0 !important;
  animation: cart-dot-blink 2.4s ease-in-out infinite !important;
}

@keyframes cart-dot-blink {
  0%, 100% { box-shadow: 0 0 0 2px rgba(225,33,20,.15); }
  50%       { box-shadow: 0 0 0 5px rgba(225,33,20,.0); }
}

#vue-cart .cart-subtitle {
  display: none !important;
}

/* ── Summary row (SUMMARY + Clear) ── */
#vue-cart .d-flex.justify-content-between.align-items-center.mb-1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 22px 10px !important;
  margin-bottom: 0 !important;
  background: #fff !important;
  border-bottom: 1.5px solid #f3f4f6 !important;
}

#vue-cart .d-flex.justify-content-between.align-items-center.mb-1 h6 {
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #9ca3af !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

#vue-cart .d-flex.justify-content-between.align-items-center.mb-1 a p {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #e12114 !important;
  margin: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: opacity .15s ease !important;
}

#vue-cart .d-flex.justify-content-between.align-items-center.mb-1 a:hover p {
  opacity: .65 !important;
}

/* ── Vue-cart flex container ── */
#vue-cart {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ── Section cart (the real scrollable container) ── */
.section-cart {
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.sticky-cart .section-cart {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.section-cart .cart-items-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #f0ede8 transparent;
  scroll-behavior: smooth;
  padding: 0 20px;
}

.section-cart .cart-items-scroll::-webkit-scrollbar {
  width: 4px;
}
.section-cart .cart-items-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.section-cart .cart-items-scroll::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 4px;
}

.section-cart .cart-bottom-fixed {
  flex-shrink: 0;
  background: #fff;
  padding: 10px 20px 16px;
  position: relative;
  border-top: 1.5px solid #f3f4f6;
}

/* ── Scroll hint ── */
.cart-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}
.cart-scroll-hint .cart-scroll-arrow {
  font-size: 14px;
  color: #d1d5db;
  animation: cart-hint-bounce 1.6s ease-in-out infinite;
}
@keyframes cart-hint-bounce {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50%       { transform: translateY(3px); opacity: .9; }
}

/* ── Item rows ── */
.section-cart .items {
  border-bottom: 1px solid #f3f4f6 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.section-cart .line-items.row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  padding: 14px 0 !important;
  border-bottom: none !important;
  margin: 0 !important;
  gap: 0 !important;
}
.section-cart .items + .cart-summary { border-top: none !important; }
.section-cart .items:last-child { border-bottom: none !important; }

/* Hide the image column */
.section-cart .line-items > .col-3:first-child {
  display: none !important;
}

/* Item name + price + qty column */
.section-cart .line-items > .col-6 {
  flex: 1 1 0% !important;
  max-width: none !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

/* Right column: remove btn + price */
.section-cart .line-items > .col-3.quantity,
.section-cart .line-items > .col-3.quantity.d-flex.justify-content-start.flex-column {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 0 0 10px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}

/* Item name */
.section-cart .line-items .col-6 p:first-child {
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  line-height: 1.35 !important;
  margin: 0 0 2px !important;
  word-break: break-word !important;
}
.section-cart .line-items .col-6 p.mb-1 {
  margin-bottom: 2px !important;
}

/* Unit price (font11) - show it as small text */
.section-cart .line-items .font11,
.section-cart .line-items .col-6 p.font11,
.section-cart .line-items .col-6 p.m-0.font11 {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #9ca3af !important;
  margin: 0 0 4px !important;
  display: block !important;
}

/* ── Quantity pill ── */
.section-cart .col-6 .quantity,
.section-cart .col-6 .quantity.d-flex.justify-content-between {
  width: fit-content !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  margin-top: 6px !important;
  background: #f3f4f6 !important;
  border: 1.5px solid #e9eaec !important;
  border-radius: 50px !important;
  padding: 2px !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
  flex-shrink: 0 !important;
}

.section-cart .col-6 .quantity:focus-within {
  border-color: rgba(225,33,20,.3) !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.06) !important;
}

.section-cart .col-6 .quantity > div {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Qty +/- buttons */
.section-cart .qty-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  background: #fff !important;
  border: none !important;
  color: #374151 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  transition: all .18s ease !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.section-cart .qty-btn:hover {
  background: #e12114 !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(225,33,20,.35) !important;
  transform: scale(1.1) !important;
}

.section-cart .col-6 .quantity .qty {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  min-width: 24px !important;
  text-align: center !important;
  line-height: 1 !important;
  user-select: none !important;
}

/* ── Remove button ── */
.section-cart .item-remove {
  width: 22px !important;
  height: 22px !important;
  background: #f3f4f6 !important;
  border: none !important;
  color: #9ca3af !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  transition: all .18s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

.section-cart .item-remove:hover {
  background: #fee2e2 !important;
  color: #e12114 !important;
  transform: scale(1.1) !important;
}

/* ── Item total price ── */
.section-cart .line-items > .col-3.quantity > p,
.section-cart .line-items > .col-3.quantity p.mb-0 {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

/* ── Add-on items ── */
.section-cart .addon-items {
  padding: 4px 0 0 0 !important;
  margin: 0 !important;
}
.section-cart .addon-items .col-3:first-child { display: none !important; }
.section-cart .addon-items .col-9 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
.section-cart .addon-items p {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  color: #9ca3af !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.section-cart .addon-items p.bold {
  font-weight: 600 !important;
  color: #6b7280 !important;
  font-size: 11px !important;
}
.section-cart .addon-items .d-flex.justify-content-between.mb-1 {
  padding: 1px 0 !important;
  margin: 0 !important;
}

/* Special instructions */
.section-cart .line-items .col-6 p.mb-0[v-if] {
  font-size: 11px !important;
  color: #9ca3af !important;
  margin-top: 3px !important;
  font-style: italic !important;
}
.section-cart .line-items .col-6 .el-tag {
  font-size: 10px !important;
  margin: 4px 0 0 !important;
}

/* ── Cart Summary ── */
.section-cart .cart-summary {
  border-top: none !important;
  padding: 0 0 8px !important;
  margin: 0 !important;
  background: #fff !important;
}

.section-cart .cart-summary .d-flex {
  padding: 4px 0 !important;
}

.section-cart .cart-summary .d-flex > div {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  color: #6b7280 !important;
}

.section-cart .cart-summary .d-flex h6 {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #111827 !important;
  margin: 0 !important;
  letter-spacing: -.025em !important;
}

/* ── Place Order button ── */
.section-cart .btn-green,
#vue-cart .btn-green {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 10px 0 0 !important;
  padding: 16px 20px !important;
  background: #e12114 !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: background .15s ease !important;
  text-decoration: none !important;
  letter-spacing: .005em !important;
}

.section-cart .btn-green::before,
#vue-cart .btn-green::before { display: none !important; }

.section-cart .btn-green::after,
#vue-cart .btn-green::after { display: none !important; }

.section-cart .btn-green:hover,
#vue-cart .btn-green:hover {
  background: #c91e12 !important;
  box-shadow: none !important;
  color: #fff !important;
}

.section-cart .btn-green[disabled="disabled"],
.section-cart .btn-green[disabled=""]:not([disabled="false"]),
.section-cart .btn-green.disabled,
#vue-cart .btn-green[disabled="disabled"],
#vue-cart .btn-green[disabled=""]:not([disabled="false"]),
#vue-cart .btn-green.disabled {
  background: #d1d5db !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

.section-cart .btn-green[disabled="false"],
#vue-cart .btn-green[disabled="false"] {
  background: #e12114 !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* ── Sticky sidebar layout for always-visible button ── */
.ck-sidebar .sticky-cart {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

.ck-cart-card {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ck-cart-merchant { flex-shrink: 0 !important; }
.ck-cart-divider  { flex-shrink: 0 !important; }

.ck-cart-items-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ck-cart-items-wrap > .sticky-cart {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: transparent !important;
}

.ck-cart-items-wrap > .sticky-cart > #vue-cart {
  flex: 1 !important;
  min-height: 0 !important;
}


/* ═══════════════════════════════════════════════════════════
   CART PREVIEW DRAWER — Premium Redesign (cp-* namespace)
   ═══════════════════════════════════════════════════════════ */

.cp-merchant-block {
  padding: 16px 22px 14px;
  background: #fafafa;
  border-bottom: 1px solid #f0ede8;
  flex-shrink: 0;
}

.cp-your-cart-lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #b0b8c4;
  margin: 0 0 5px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cp-merchant-name-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #111827;
  margin-bottom: 4px;
}

.cp-merchant-name-link:hover .cp-merchant-name-text {
  color: #e12114;
}

.cp-merchant-name-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  transition: color .15s ease;
}

.cp-chevron {
  color: #b0b8c4;
  flex-shrink: 0;
  transition: color .15s ease;
}

.cp-merchant-name-link:hover .cp-chevron {
  color: #e12114;
}

.cp-merchant-addr {
  font-size: 11.5px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.55;
}

.cp-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px 11px;
  border-bottom: 1px solid #f3f3f3;
  flex-shrink: 0;
}

.cp-summary-lbl {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.cp-clear-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: #b0b8c4;
  text-decoration: none;
  transition: color .15s ease;
  cursor: pointer;
}

.cp-clear-link:hover {
  color: #e12114;
}

.cp-items-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 22px;
  scrollbar-width: none;
  min-height: 0;
}

.cp-items-wrap::-webkit-scrollbar {
  display: none;
}

.cp-item-card {
  padding: 15px 0;
  border-bottom: 1px solid #f3f2ef;
}

.cp-item-card:last-child {
  border-bottom: none;
}

.cp-item-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cp-item-info {
  flex: 1 1 auto;
  min-width: 0;
}

.cp-iname {
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 3px;
  line-height: 1.4;
}

.cp-isize {
  font-weight: 400;
  color: #9ca3af;
  font-size: 12px;
}

.cp-iprice {
  font-size: 11.5px;
  color: #9ca3af;
  margin: 0 0 7px;
}

.cp-special,
.cp-attrs {
  font-size: 11px;
  color: #b0b8c9;
  margin: 2px 0 5px;
  font-style: italic;
  line-height: 1.5;
}

.cp-free-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 2px 8px;
  border-radius: 99px;
  margin: 2px 0 7px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cp-qty-wrap {
  display: inline-flex;
  align-items: center;
  background: #f5f4f2;
  border: 1px solid #eae8e4;
  border-radius: 50px;
  padding: 3px;
  margin-top: 9px;
  transition: border-color .2s ease;
}

.cp-qty-wrap:hover {
  border-color: #d4d0ca;
}

.cp-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #374151;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  flex-shrink: 0;
  cursor: pointer;
  line-height: 1;
}

.cp-qty-btn:hover {
  background: #e12114;
  color: #fff;
  box-shadow: 0 2px 6px rgba(225,33,20,.3);
}

.cp-qty-val {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  min-width: 28px;
  text-align: center;
  line-height: 1;
  user-select: none;
}

.cp-item-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 1px;
}

.cp-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #9ca3af;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.cp-remove-btn:hover {
  background: #fee2e2;
  color: #e12114;
}

.cp-itotal {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  white-space: nowrap;
  letter-spacing: -.02em;
}

.cp-addons-wrap {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fafaf9;
  border-radius: 8px;
  border: 1px solid #f0ede8;
}

.cp-addon-group {
  margin-bottom: 6px;
}

.cp-addon-group:last-child {
  margin-bottom: 0;
}

.cp-addon-cat {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cp-addon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 0;
}

.cp-addon-name {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.5;
}

.cp-addon-price {
  font-size: 11.5px;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
  margin-left: 8px;
}

.cp-footer {
  padding: 14px 22px 22px;
  background: #fff;
  border-top: 1px solid #f3f2ef;
  flex-shrink: 0;
}

.cp-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 22px;
  background: #e12114;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(225,33,20,.30);
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
  cursor: pointer;
  letter-spacing: .01em;
}

.cp-checkout-btn:hover {
  background: #c51d12;
  box-shadow: 0 6px 24px rgba(225,33,20,.40);
  color: #fff !important;
  transform: translateY(-1px);
}

.cp-checkout-btn:active {
  transform: translateY(0) scale(0.99);
}

.cp-checkout-total {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em;
}

.cp-checkout-btn[disabled="disabled"],
.cp-checkout-btn[disabled="true"] {
  background: #d1d5db !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
}

.cp-error-banner {
  margin: 0 22px 16px;
  padding: 11px 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  font-size: 12.5px;
  color: #92400e;
  line-height: 1.6;
}

/* ══ Floating cart pill — premium redesign ══ */
.floating-cart {
  padding: 0 12px 14px;
}

.fc-pill {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #c0392b 0%, #e12114 60%, #e8341f 100%);
  border: none;
  border-radius: 20px;
  box-shadow: 0 -2px 0 rgba(0,0,0,.08), 0 8px 28px rgba(193,33,20,.45), 0 2px 8px rgba(0,0,0,.18);
  cursor: pointer;
  gap: 12px;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.fc-pill:active {
  transform: scale(0.98);
  box-shadow: 0 4px 16px rgba(193,33,20,.4);
}

.fc-left {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.18);
  border-radius: 14px;
  backdrop-filter: blur(4px);
}

.fc-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #fff;
  color: #e12114;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.fc-icon {
  width: 22px;
  height: 22px;
  color: #fff;
  flex-shrink: 0;
}

.fc-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fc-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
}

.fc-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.fc-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fc-total {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.fc-arrow {
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.75);
  flex-shrink: 0;
}

/* ══ Menu layout — balanced wider columns ══ */
@media (min-width: 992px) {
  .section-menu .menu-left {
    flex: 0 0 18% !important;
    max-width: 18% !important;
  }
  .section-menu .menu-center {
    flex: 0 0 55% !important;
    max-width: 55% !important;
  }
  .section-menu .menu-right {
    flex: 0 0 27% !important;
    max-width: 27% !important;
  }
}


/* ══════════════════════════════════════════════════
   MENU SEARCH BAR — Premium Pill
   ══════════════════════════════════════════════════ */

.menu-center .mb-4 {
  position: relative;
  margin-bottom: 28px !important;
}

.menu-center .el-input.el-input--large .el-input__wrapper {
  border-radius: 50px !important;
  padding: 0 20px 0 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #eaecf0 !important;
  box-shadow: none !important;
  transition: border-color .25s ease !important;
  height: 56px !important;
}
.menu-center .el-input.el-input--large .el-input__wrapper.is-focus,
.menu-center .el-input.el-input--large .el-input__wrapper:focus-within {
  border-color: #e12114 !important;
  box-shadow: none !important;
}

.menu-center .el-input.el-input--large .el-input__inner {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  caret-color: var(--brand) !important;
  height: 56px !important;
  line-height: 56px !important;
}
.menu-center .el-input.el-input--large .el-input__inner::placeholder {
  color: #b8bfc9 !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.menu-center .el-input.el-input--large .el-input__prefix {
  margin-right: 8px !important;
  display: flex !important;
  align-items: center !important;
}
.menu-center .el-input.el-input--large .el-input__prefix-inner {
  display: flex !important;
  align-items: center !important;
}
.menu-center .el-input.el-input--large .el-input__prefix .zmdi-search {
  width: 36px !important;
  height: 36px !important;
  background: #e12114 !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  box-shadow: none !important;
  flex-shrink: 0;
}

.menu-center .el-input.el-input--large .el-input__suffix .el-link {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--brand) !important;
}


/* ══════════════════════════════════════════════════
   ENSURE STICKY WORKS
   ══════════════════════════════════════════════════ */

.section-menu,
.section-menu .container,
.section-menu .row,
.menu-left,
.menu-right {
  overflow: visible !important;
}


/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE REFINEMENTS
   ══════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .section-menu { padding-bottom: 48px; }
  .menu-center section { border-radius: 14px; margin-bottom: 14px; scroll-margin-top: 86px; }
  .menu-center section > h5 { padding: 16px 20px 14px 20px !important; font-size: 16px !important; border-left-width: 3px !important; }
  .menu-center section > h5::after { display: none !important; }
  .list-item-rows .col.fixed-height { padding: 14px 6px 14px 16px !important; }
  /* Align no-image "+" button horizontally with the image "+" button on mobile.
     Empirical tweak: the visual position of the image button ends up ≈3px from
     the row edge once the thumb's border-radius / transform is factored in, so
     the no-image button needs only a small right-padding nudge. */
  .list-item-rows .item-btn-col { padding-right: 6px !important; }
  .list-item-rows .item-right-col { padding: 12px 12px 12px 6px !important; width: 96px !important; }
  .list-item-rows .item-thumb-wrap { width: 72px !important; height: 72px !important; }
  .list-item-rows .item-thumb { width: 72px !important; height: 72px !important; border-radius: 10px !important; }
  .list-item-rows h6.m-0 { font-size: 14px !important; }
  .section-cart { padding: 0 16px !important; }
  .section-cart .cart-bottom-fixed { margin: 0 -16px !important; padding-left: 16px !important; padding-right: 16px !important; }
  #vue-cart h5 { padding: 18px 18px 18px !important; }
}
@media (max-width: 767px) {
  .menu-center section { scroll-margin-top: 76px; }
}


/* ════════════════════════════════════════════════
   CHANGE ADDRESS MODAL — Premium Redesign
   ════════════════════════════════════════════════ */

.ca-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2050;
  padding: 16px;
}

.ca-modal-box {
  background: #fff;
  border-radius: 24px;
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: visible;
  box-shadow: 0 24px 80px rgba(0,0,0,.20);
  animation: schedModal-enter .32s cubic-bezier(.16,1,.3,1) both;
  position: relative;
}

.ca-fade-enter-active { transition: opacity .25s ease; }
.ca-fade-leave-active { transition: opacity .18s ease; }
.ca-fade-enter-from,
.ca-fade-leave-to { opacity: 0; }
.ca-fade-enter-to,
.ca-fade-leave-from { opacity: 1; }

.ca-inner {
  position: relative;
}

.ca-close-btn {
  position: absolute !important;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.05);
  color: #6b7280;
  border: none;
  border-radius: 50%;
  text-decoration: none !important;
  transition: background .15s, color .15s;
  z-index: 2;
  cursor: pointer;
  outline: none;
  padding: 0;
}
.ca-close-btn i { font-size: 15px; color: inherit; line-height: 1; }
.ca-close-btn:hover { background: rgba(0,0,0,.1); color: #111827; text-decoration: none !important; }

.ca-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 24px 0;
}

.ca-icon-wrap {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff1f0 0%, #ffe4e1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(225,33,20,.10);
}
.ca-icon-wrap i { font-size: 22px; color: #e12114; line-height: 1; }

.ca-header-text {
  flex: 1;
  min-width: 0;
}

.ca-title {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 2px !important;
  line-height: 1.25 !important;
}

.ca-subtitle {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 400;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

.ca-alert {
  margin: 16px 24px 0;
  background: #fef9f0;
  border: 1px solid #f3d48c;
  border-radius: 12px;
  color: #7c5515;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 16px;
}

.ca-search {
  padding: 20px 24px 0;
  position: relative;
}

.ca-autocomplete-popper {
  z-index: 2060 !important;
}

.ca-search .el-autocomplete {
  position: relative;
}

.ca-search .el-popper {
  z-index: 2060 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  left: 0 !important;
}

.ca-search .el-autocomplete-suggestion {
  max-height: 240px;
  overflow-y: auto;
}

.ca-search .el-autocomplete-suggestion li {
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}

.ca-search .el-autocomplete-suggestion li:hover {
  background: #f9fafb;
}

.ca-autocomplete .el-input__wrapper {
  background: #f9fafb !important;
  border: 1.5px solid #ebebeb !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 4px 14px !important;
  min-height: 50px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.ca-autocomplete .el-input__wrapper:hover {
  border-color: #ddd !important;
}
.ca-autocomplete .el-input__wrapper.is-focus,
.ca-autocomplete .el-input__wrapper:focus-within {
  border-color: rgba(225,33,20,.4) !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.08) !important;
  background: #fff !important;
}
.ca-autocomplete .el-input__inner {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111827 !important;
}
.ca-autocomplete .el-input__inner::placeholder {
  color: #b0b0b0 !important;
  font-weight: 400 !important;
}

.ca-search-icon {
  font-size: 17px;
  color: #c0c0c0;
}

.ca-locate-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  transition: background .15s;
}
.ca-locate-btn i {
  font-size: 19px;
  color: #e12114;
  line-height: 1;
}
.ca-locate-btn:hover {
  background: rgba(225,33,20,.06) !important;
}

.ca-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 18px 24px 0;
}

.ca-saved-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b0b0b0;
  padding: 16px 24px 8px;
}

.ca-saved-list {
  padding: 0 16px 20px;
}

.ca-address-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .15s;
  cursor: pointer;
}
.ca-address-item:hover {
  background: #f5f5f5;
}

.ca-addr-pin {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff1f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ca-addr-pin i { font-size: 16px; color: #e12114; line-height: 1; }

.ca-addr-text {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.ca-addr-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ca-addr-actions {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
}

.ca-addr-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: all .15s;
}
.ca-addr-btn i { font-size: 13px; line-height: 1; }

.ca-addr-edit {
  background: #f3f4f6;
  color: #6b7280;
}
.ca-addr-edit:hover {
  background: #e5e7eb;
  color: #111827;
  text-decoration: none !important;
}

.ca-addr-delete {
  background: #fef2f2;
  color: #ef4444;
}
.ca-addr-delete:hover {
  background: #fee2e2;
  color: #dc2626;
  text-decoration: none !important;
}

.ca-bottom-pad {
  height: 24px;
}

/* ════════════════════════════════════════════════
   SELECT ADDRESS / EXACT LOCATION MODAL — Premium
   ════════════════════════════════════════════════ */

.sa-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2050;
  padding: 16px;
}

.sa-fade-enter-active { transition: opacity .25s ease; }
.sa-fade-leave-active { transition: opacity .18s ease; }
.sa-fade-enter-from,
.sa-fade-leave-to { opacity: 0; }

.sa-modal-box {
  background: #fff;
  border-radius: 24px;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  animation: schedModal-enter .32s cubic-bezier(.16,1,.3,1) both;
  display: flex;
  flex-direction: column;
}

.sa-modal-box.sa-mobile {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
}

.sa-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.sa-close-btn {
  position: absolute !important;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  color: #6b7280;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  padding: 0;
  z-index: 5;
  transition: background .15s, color .15s;
}
.sa-close-btn i { font-size: 16px; color: inherit; line-height: 1; }
.sa-close-btn:hover { background: rgba(0,0,0,.08); color: #111827; }

.sa-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 24px 0;
  flex-shrink: 0;
}

.sa-icon-wrap {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff1f0 0%, #ffe4e1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(225,33,20,.10);
}
.sa-icon-wrap i { font-size: 22px; color: #e12114; line-height: 1; }

.sa-title {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 2px !important;
  line-height: 1.25 !important;
}

.sa-subtitle {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 400;
  color: #9ca3af;
  margin: 0;
  line-height: 1.4;
}

.sa-search {
  padding: 18px 24px 0;
  flex-shrink: 0;
}

.sa-search .search-geocomplete {
  width: 100% !important;
}

.sa-search .el-autocomplete {
  width: 100% !important;
}

.sa-search .el-input__wrapper {
  background: #f9fafb !important;
  border: 1.5px solid #ebebeb !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 4px 14px !important;
  min-height: 48px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.sa-search .el-input__wrapper:hover {
  border-color: #ddd !important;
}
.sa-search .el-input__wrapper.is-focus,
.sa-search .el-input__wrapper:focus-within {
  border-color: rgba(225,33,20,.4) !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.08) !important;
  background: #fff !important;
}

.sa-search .el-popper,
.sa-search .el-autocomplete-suggestion__wrap {
  z-index: 2060 !important;
}

body > .el-popper.el-autocomplete__popper {
  z-index: 2060 !important;
}

.sa-search .el-autocomplete .el-input__inner {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111827 !important;
}
.sa-search .el-autocomplete .el-input__inner::placeholder {
  color: #b0b0b0 !important;
  font-weight: 400 !important;
}

.sa-map-zone {
  padding: 16px 24px 0;
  flex-shrink: 0;
  position: relative;
}

.sa-map-zone .map-lg-large {
  height: 300px !important;
  width: 100% !important;
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: block !important;
}

.sa-map-zone .map-buttons-wrap {
  right: 14px !important;
  bottom: 14px !important;
  top: auto !important;
  z-index: 3;
}

.sa-map-zone .map-buttons-wrap .btn-group-vertical {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
  overflow: hidden;
  padding: 0;
}

.sa-map-zone .map-buttons-wrap .mb-2 {
  margin-bottom: 0 !important;
}

.sa-map-zone .map-buttons-wrap .btn {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #374151 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background .15s, color .15s !important;
  position: relative;
}
.sa-map-zone .map-buttons-wrap .btn:hover {
  background: #f3f4f6 !important;
  color: #e12114 !important;
}
.sa-map-zone .map-buttons-wrap .btn:active {
  background: #e5e7eb !important;
}

.sa-map-zone .map-buttons-wrap .btn i {
  font-size: 18px !important;
  line-height: 1 !important;
  color: inherit !important;
}

.sa-map-zone .map-buttons-wrap .btn.rounded-circle {
  border-radius: 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.sa-map-zone .map-buttons-wrap .divider {
  height: 1px !important;
  padding: 0 !important;
  margin: 0 8px !important;
  background: #e5e7eb !important;
}

.sa-footer {
  padding: 18px 24px 24px;
  flex-shrink: 0;
}

.sa-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #e12114 0%, #c91a0f 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  outline: none;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(225,33,20,.25);
}
.sa-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(225,33,20,.30);
}
.sa-submit-btn:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .sa-modal-box { width: 100%; border-radius: 20px; }
  .sa-map-zone .map-lg-large { height: 240px !important; }
  .sa-header { padding: 20px 20px 0; }
  .sa-search { padding: 14px 20px 0; }
  .sa-map-zone { padding: 12px 20px 0; }
  .sa-footer { padding: 14px 20px 20px; }
}

/* ════════════════════════════════════════════════════════════════════
   DELIVERY DETAILS MODAL (9 Sep 2026)

   This is a two-line settings sheet — where, and when — but it was built
   as a poster: a 70px medallion with an orbiting dashed ring, a centred
   header, then two gradient-filled cards with gradient icon chips and
   coloured shadows, side by side. It stood ~520px tall, the header was
   centred while the card text was left-aligned, and the two cards never
   matched height because one holds a street address and the other a time.

   Now it reads as what it is: two tappable rows, each showing its current
   value, in a quiet 460px sheet. No gradients, no glow, no gloss — the
   only colour is the brand rail that slides in under the row you're
   pointing at, and the red on an address that still needs choosing.
   ════════════════════════════════════════════════════════════════════ */

.modal-delivery-details .modal-dialog {
  max-width: 460px !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  /* 100vh + 20px of padding is taller than the modal, so the sheet always
     had its own scrollbar and centred inside 100vh-minus-scrollbar — landing
     half a scrollbar left of centre on any platform that draws classic ones.
     100% is border-box, so the padding sits inside the viewport. */
  min-height: 100% !important;
  padding: 20px !important;
}
/* Bootstrap 4 centres .modal-dialog-centered with a ::before spacer of
   calc(100vh - 1rem); on top of min-height it just overshoots the modal and
   brings the scrollbar back. The flex centring above does the job alone. */
.modal-delivery-details .modal-dialog-centered::before { display: none !important; }
/* ...and the site-wide mobile rule adds 12px of vertical margin, which
   overshoots min-height:100% by exactly as much. The padding above already
   provides the inset. */
body > .modal.modal-delivery-details > .modal-dialog { margin: auto !important; }
/* Bootstrap writes an inline padding-right onto .modal equal to the scrollbar
   width, to make up for the body scrollbar it hides. The site-wide
   `body.modal-open { padding-right: 0 !important }` cancels the body half of
   that trade, so the modal's half is left over and pushes the sheet half a
   scrollbar off centre wherever scrollbars are drawn in the layout. */
.modal-delivery-details {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.modal-delivery-details .modal-content {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 28px 70px -20px rgba(16,24,40,.34), 0 2px 8px rgba(16,24,40,.05) !important;
  animation: schedModal-enter .32s cubic-bezier(.16,1,.3,1) both;
  position: relative !important;
}

/* brand signature, flat — a 4px gradient bar read as a progress meter */
.modal-delivery-details .modal-content::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand);
  z-index: 3;
}

/* ── Header ─────────────────────────────────────────────────────── */
/* The old 70px medallion carried the only brand personality in the sheet, so
   it survives at a size the sheet can afford, matched to the row markers. */
.dd-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 24px 60px 20px 26px;
}
.dd-head-glyph {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--brand-light);
  border: 1px solid rgba(225,33,20,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-size: 17px;
}
.dd-head-text { min-width: 0; }

.dd-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.dd-subtitle {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  color: #8b90a0;
  margin: 5px 0 0 !important;
  line-height: 1.5;
}

.dd-close-btn {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #a8aeba !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
  z-index: 4 !important;
  text-decoration: none !important;
}
.dd-close-btn i {
  font-size: 17px !important;
  color: inherit !important;
  line-height: 1 !important;
}
.dd-close-btn:hover {
  background: #f4f5f7 !important;
  border-color: #e6e9ee !important;
  color: #111827 !important;
  text-decoration: none !important;
}

/* ── Rows ───────────────────────────────────────────────────────── */
.dd-rows {
  border-top: 1px solid #edeff3;
}

.dd-row {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 16px;
  padding: 17px 26px;
  border-bottom: 1px solid #edeff3;
  text-decoration: none !important;
  position: relative;
  transition: background .18s ease;
}
.dd-row:last-child { border-bottom: 0; }
.dd-row:hover { background: #fafbfc; text-decoration: none !important; }

/* the rail is the whole hover affordance — it wipes up from the bottom */
.dd-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .24s cubic-bezier(.16,1,.3,1);
}
.dd-row:hover::before,
.dd-row:focus-visible::before { transform: scaleY(1); }
.dd-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.dd-row-marker {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid #e6e9ee;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa1ad;
  flex-shrink: 0;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.dd-row-marker svg { stroke: currentColor; }
.dd-row:hover .dd-row-marker {
  color: var(--brand);
  border-color: rgba(225,33,20,.26);
  background: var(--brand-light);
}

.dd-row-text { min-width: 0; }

.dd-row-label {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a8aeba;
  line-height: 1.3;
  margin-bottom: 5px;
}

.dd-row-value {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* an address that still has to be chosen is the one thing worth colouring —
   marker included, so the unfinished step is visible before you read a word */
.dd-row-value--empty { color: var(--brand); }
.dd-row--todo .dd-row-marker {
  color: var(--brand);
  border-color: rgba(225,33,20,.26);
  background: var(--brand-light);
}

.dd-row-detail {
  display: block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 400;
  color: #8b90a0;
  line-height: 1.45;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.dd-row-go {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #c6cad3;
  font-size: 18px;
  transition: color .2s ease, transform .2s ease;
}
.dd-row:hover .dd-row-go {
  color: var(--brand);
  transform: translateX(3px);
}

/* ── Footer ─────────────────────────────────────────────────────── */
/* The sheet had no confirm at all: the only way out was a 34px × in the
   corner, which is a poor target on a phone. */
.dd-foot {
  padding: 18px 26px 24px;
  border-top: 1px solid #edeff3;
}

.dd-done-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--brand);
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.dd-done-btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.dd-done-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.modal-delivery-details .modal-header,
.modal-delivery-details .modal-footer {
  display: none !important;
}

@media (max-width: 480px) {
  .modal-delivery-details .modal-dialog { max-width: 100% !important; padding: 12px !important; }
  .dd-head { padding: 20px 54px 16px 20px; gap: 11px; }
  .dd-head-glyph { width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
  .dd-title { font-size: 18.5px !important; }
  .dd-row { padding: 16px 20px; gap: 14px; grid-template-columns: 42px minmax(0, 1fr) 20px; }
  .dd-row-marker { width: 42px; height: 42px; }
  .dd-foot { padding: 16px 20px 20px; }
}

/* ════════════════════════════════════════════════
   SCHEDULE TIME PICKER MODAL — Premium Redesign
   ════════════════════════════════════════════════ */

/* ── Reset & dialog ── */
.modal { z-index: 1060 !important; }
.modal-backdrop { z-index: 1055 !important; }
.modal-trn-options {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  z-index: 1080 !important;
}

.modal-trn-options .modal-dialog {
  margin: 0 auto !important;
  max-width: 460px !important;
  width: 100% !important;
  min-height: calc(100% - 32px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  pointer-events: none;
}

/* Cancel the legacy bottom-sheet pin (.modal-content.modal-mobile in style.css)
   for this modal — we want it centered and responsive, not fixed to bottom. */
.modal-trn-options .modal-content,
.modal-trn-options .modal-content.modal-mobile {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  pointer-events: auto;
  border: 1px solid #e9ebee !important;
  outline: 0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06) !important;
  overflow: visible !important;
}

.modal-trn-options .modal-body {
  overflow: visible !important;
}

/* ══════════════════════
   HEADER
══════════════════════ */
.sched-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 0;
  position: relative;
}

.sched-modal-header-text { flex: 1; }

.sched-modal-title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.sched-modal-close {
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4f6f8 !important;
  color: #6b7280 !important;
  border: 1px solid #e2e5e9 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background .15s, color .15s !important;
  flex-shrink: 0;
}
.sched-modal-close i {
  font-size: 14px !important;
  color: inherit !important;
  line-height: 1 !important;
}
.sched-modal-close:hover {
  background: #e9ebee !important;
  color: #111827 !important;
}

/* ══════════════════════
   BODY
══════════════════════ */
.modal-trn-options .modal-body {
  padding: 16px 22px !important;
  border-bottom: none !important;
  overflow: visible !important;
}

/* ── Error alert ── */
.modal-trn-options .alert-warning {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: 8px !important;
  color: #92400e !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  margin-bottom: 0 !important;
}

/* ══════════════════════
   ORDER TYPE LIST
══════════════════════ */
.sched-type-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sched-type-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid #e9ebee;
  background: #fafbfc;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  margin: 0;
  user-select: none;
}

.sched-type-item input[type="radio"] { display: none; }

.sched-type-item:hover {
  border-color: #e12114;
  background: #fff;
}

.sched-type-item.active {
  border-color: #e12114;
  background: #fff9f9;
}

.sched-type-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f4f6f8;
  border: 1px solid #e9ebee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease;
}

.sched-type-item.active .sched-type-icon {
  background: #fff0ef;
  border-color: #fdd;
}

.sched-type-icon i {
  font-size: 17px;
  color: #6b7280;
  transition: color .15s ease;
}

.sched-type-item.active .sched-type-icon i { color: #e12114; }

.sched-type-label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.sched-type-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #e2e5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease;
}

.sched-type-check i {
  font-size: 12px;
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease;
}

.sched-type-item.active .sched-type-check {
  background: #e12114;
  border-color: #e12114;
}

.sched-type-item.active .sched-type-check i { opacity: 1; }

/* ══════════════════════
   DIVIDER
══════════════════════ */
.sched-divider {
  height: 1px;
  background: #e9ebee;
  margin: 0 22px;
}

/* ══════════════════════
   SECTION LABEL
══════════════════════ */
.sched-section-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 12px;
}

/* ══════════════════════
   MODE CHIPS (Now / Schedule)
══════════════════════ */
.sched-mode-row {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.sched-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  background: #f4f6f8;
  border: 1px solid #e2e5e9;
  color: #6b7280;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  user-select: none;
}
.sched-mode-chip input[type="radio"] { display: none; }

.sched-mode-chip.active {
  background: #e12114;
  border-color: #e12114;
  color: #fff;
}

.sched-mode-chip:hover:not(.active) {
  border-color: #9ca3af;
  color: #374151;
}

/* ══════════════════════
   SCHEDULE FIELDS
══════════════════════ */
.sched-fields-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sched-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sched-field-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .07em;
  display: block;
  margin-bottom: 5px;
}

.sched-select-wrap {
  position: relative;
}

.sched-select-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: #e12114;
  pointer-events: none;
  z-index: 1;
  line-height: 1;
}

.modal-trn-options .sched-select-wrap select.form-control,
.modal-trn-options .sched-select-wrap select.custom-select {
  width: 100% !important;
  height: 50px !important;
  padding: 0 36px 0 44px !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  background-color: #f8f9fb !important;
  border: 1px solid #e2e5e9 !important;
  border-radius: 10px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5.5 6L10 1' stroke='%23e12114' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 11px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background-color .15s ease !important;
  cursor: pointer;
  margin-bottom: 0 !important;
}
.modal-trn-options .sched-select-wrap select:hover {
  border-color: #c4c8ce !important;
  background-color: #fff !important;
}
.modal-trn-options .sched-select-wrap select:focus {
  border-color: #e12114 !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.08) !important;
  outline: none !important;
}

/* ══════════════════════
   FOOTER & SAVE BUTTON
══════════════════════ */
.modal-trn-options .modal-footer {
  padding: 8px 22px 22px !important;
  border-top: none !important;
  background: transparent !important;
  display: block !important;
}

.sched-save-btn {
  width: 100% !important;
  height: 46px !important;
  border: none !important;
  border-radius: 8px !important;
  background: #e12114 !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .15s ease !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sched-save-btn::before { display: none !important; }
.sched-save-btn:hover { background: #c91e12 !important; }
.sched-save-btn:disabled {
  background: #d1d5db !important;
  color: #9ca3af !important;
  cursor: not-allowed;
}

/* ── Backdrop ── */
.modal-backdrop {
  background: rgba(17,24,39,.5) !important;
}

/* ══════════════════════
   HEADER ICON + SUBTITLE
══════════════════════ */
.sched-modal-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff0ef 0%, #ffe1de 100%);
  border: 1px solid #fdd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 14px;
  box-shadow: 0 2px 6px rgba(225,33,20,.08);
}

.sched-modal-icon-wrap i {
  font-size: 22px;
  color: #e12114;
  line-height: 1;
}

.sched-modal-subtitle {
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  margin: 3px 0 0 !important;
  line-height: 1.35 !important;
}

/* ══════════════════════
   CUSTOM SELECT (DATE / TIME SLOT)
══════════════════════ */
.sched-custom-select {
  position: relative;
  width: 100%;
  user-select: none;
}

.sched-custom-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: #f8f9fb;
  border: 1px solid #e2e5e9;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.sched-custom-trigger > i:first-child {
  font-size: 18px;
  color: #e12114;
  line-height: 1;
  flex-shrink: 0;
}

.sched-custom-trigger > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.sched-custom-arrow {
  font-size: 18px !important;
  color: #6b7280;
  transition: transform .2s ease, color .15s ease;
  flex-shrink: 0;
}

.sched-custom-select:hover .sched-custom-trigger {
  border-color: #c4c8ce;
  background: #fff;
}

.sched-custom-select--open .sched-custom-trigger {
  border-color: #e12114;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(225,33,20,.08);
}

.sched-custom-select--open .sched-custom-arrow {
  transform: rotate(180deg);
  color: #e12114;
}

.sched-custom-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e9ebee;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(17,24,39,.12), 0 4px 10px rgba(17,24,39,.06);
  z-index: 20;
  overflow: hidden;
}

.sched-custom-dropdown-inner {
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
}

.sched-custom-dropdown-inner::-webkit-scrollbar { width: 6px; }
.sched-custom-dropdown-inner::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 6px;
}

.sched-custom-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.sched-custom-option:hover {
  background: #f4f6f8;
  color: #111827;
}

.sched-opt-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #e2e5e9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px !important;
  color: transparent;
  background: #fff;
  flex-shrink: 0;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.sched-custom-option--selected {
  background: #fff9f9;
  color: #111827;
  font-weight: 600;
}

.sched-custom-option--selected .sched-opt-check {
  background: #e12114;
  border-color: #e12114;
  color: #fff;
}

/* dropdown enter/leave transition */
.sched-drop-enter-active, .sched-drop-leave-active {
  transition: opacity .15s ease, transform .15s ease;
}
.sched-drop-enter-from, .sched-drop-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}

/* ── Mobile ── */
@media (max-width: 520px) {
  .modal-trn-options .modal-dialog {
    max-width: 100% !important;
    padding: 12px !important;
  }
  .modal-trn-options .modal-content {
    border-radius: 14px !important;
  }
  .sched-modal-header { padding: 18px 18px 0; }
  .modal-trn-options .modal-body { padding: 14px 18px !important; }
  .modal-trn-options .modal-footer { padding: 8px 18px 18px !important; }
  .sched-divider { margin: 0 18px; }
  .sched-modal-icon-wrap { width: 40px; height: 40px; margin-right: 10px; }
  .sched-modal-icon-wrap i { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════
   DELIVERY ADDRESS DIALOG  addr-*
   ═══════════════════════════════════════════════════════ */

.addr-dialog {
  --el-dialog-border-radius: 32px;
  border-radius: 32px !important;
  overflow: hidden !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,.22),
    0 10px 28px rgba(0,0,0,.12) !important;
  border: none !important;
  width: 460px !important;
  max-width: 92vw !important;
  margin: 0 auto !important;
}

.el-dialog.addr-dialog,
.el-overlay .addr-dialog {
  border-radius: 32px !important;
  overflow: hidden !important;
}

.addr-dialog .el-dialog__header { display: none !important; }
.addr-dialog .el-dialog__body  { padding: 0 !important; border-radius: 32px !important; overflow: hidden !important; }
.addr-dialog { background: transparent !important; }

.el-overlay-dialog:has(.addr-dialog) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Card */
.addr-card {
  background: #ffffff;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}

/* ── Floating close ── */
.addr-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  transition: background .18s, transform .14s;
}
.addr-close-btn:hover { background: rgba(0,0,0,.12); transform: scale(1.1); }
.addr-close-btn i { font-size: 15px; color: #52525b; }

/* ── Hero (centered) ── */
.addr-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 32px 28px;
  background: linear-gradient(180deg, #fff9f9 0%, #ffffff 100%);
}

.addr-hero-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #e12114;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow:
    0 0 0 10px rgba(225,33,20,.07),
    0 0 0 20px rgba(225,33,20,.035),
    0 12px 32px rgba(225,33,20,.38);
  animation: addr-icon-breathe 3s ease-in-out infinite;
}

@keyframes addr-icon-breathe {
  0%, 100% { box-shadow: 0 0 0 10px rgba(225,33,20,.07), 0 0 0 20px rgba(225,33,20,.035), 0 12px 32px rgba(225,33,20,.38); }
  50%       { box-shadow: 0 0 0 12px rgba(225,33,20,.10), 0 0 0 24px rgba(225,33,20,.05),  0 16px 40px rgba(225,33,20,.45); }
}

.addr-hero-icon i {
  font-size: 28px;
  color: #ffffff;
}

.addr-hero-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 0 0 10px !important;
  letter-spacing: -.025em !important;
  line-height: 1.2 !important;
}

.addr-hero-sub {
  font-size: 13.5px !important;
  color: #6b7280 !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  max-width: 320px;
}

/* ── Body ── */
.addr-body {
  padding: 20px 24px 26px;
  border-top: 1px solid #f5f5f5;
}

/* Error */
.addr-error-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: rgba(225,33,20,.06);
  border: 1px solid rgba(225,33,20,.18);
  border-radius: 12px;
  font-size: 13px;
  color: #c41c10;
}
.addr-error-bar i { font-size: 16px; flex-shrink: 0; }

/* ── Search ── */
.addr-search-zone { display: flex; flex-direction: column; gap: 8px; }

.addr-autocomplete .el-input__wrapper {
  height: 52px !important;
  border-radius: 14px !important;
  border: 1.5px solid #e9eaec !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04) !important;
  padding: 0 52px 0 18px !important;
  font-size: 14.5px !important;
  background: #fafafa !important;
  position: relative !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}
.addr-autocomplete .el-input__wrapper:hover {
  border-color: rgba(225,33,20,.3) !important;
  background: #fff !important;
}
.addr-autocomplete .el-input__wrapper.is-focus {
  border-color: #e12114 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.10), 0 4px 14px rgba(225,33,20,.08) !important;
}
.addr-autocomplete .el-input__inner {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #111827 !important;
}
.addr-autocomplete .el-input__inner::placeholder {
  color: #b0b7c3 !important;
  font-weight: 400 !important;
}

.addr-autocomplete .el-input__suffix {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
}

.addr-suffix-gps {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(225,33,20,.09);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .18s, transform .12s;
}
.addr-suffix-gps:hover { background: rgba(225,33,20,.17); transform: scale(1.07); }
.addr-suffix-gps i { font-size: 16px; color: #e12114; }

/* Location row */
.addr-locate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: rgba(225,33,20,.03);
  border: 1.5px solid rgba(225,33,20,.15);
  border-radius: 13px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  text-align: left;
}
.addr-locate-row:hover {
  background: rgba(225,33,20,.06);
  border-color: rgba(225,33,20,.35);
}
.addr-locate-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(225,33,20,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.addr-locate-row-icon i { font-size: 15px; color: #e12114; }
.addr-locate-row-text { flex: 1; font-size: 13.5px; font-weight: 600; color: #e12114; }
.addr-locate-row-arrow { font-size: 15px; color: rgba(225,33,20,.4); flex-shrink: 0; }

/* ── Divider ── */
.addr-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 10px;
}
.addr-divider::before,
.addr-divider::after { content: ''; flex: 1; height: 1px; background: #f0f0f0; }
.addr-divider-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #adb5c0; white-space: nowrap; }

/* ── Saved list ── */
.addr-saved-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(225,33,20,.18) transparent;
}
.addr-saved-list::-webkit-scrollbar { width: 4px; }
.addr-saved-list::-webkit-scrollbar-thumb { background: rgba(225,33,20,.18); border-radius: 4px; }

.addr-saved-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1.5px solid transparent;
  background: #fafafa;
  cursor: pointer;
  transition: background .14s, border-color .14s, box-shadow .14s, transform .12s;
}
.addr-saved-item:hover {
  background: #fff;
  border-color: rgba(225,33,20,.18);
  box-shadow: 0 3px 14px rgba(225,33,20,.08);
  transform: translateY(-1px);
}
.addr-saved-pin {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(225,33,20,.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.addr-saved-pin i { font-size: 16px; color: #e12114; }
.addr-saved-text {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: #374151;
  line-height: 1.4; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.addr-saved-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.addr-action-btn {
  width: 28px; height: 28px; border-radius: 7px; background: #f3f4f6;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s, transform .12s; text-decoration: none !important;
}
.addr-action-btn:hover { background: #e5e7eb; transform: scale(1.1); }
.addr-action-btn i { font-size: 13px; color: #6b7280; }
.addr-action-del:hover { background: rgba(225,33,20,.1) !important; }
.addr-action-del:hover i { color: #e12114; }

/* ═══════════════════════════════════════════════════════
   ADDRESS SUGGESTIONS DROPDOWN  addr-suggestions-*
   ═══════════════════════════════════════════════════════ */

.addr-suggestions-popper {
  border-radius: 18px !important;
  border: 1.5px solid rgba(225,33,20,.13) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,.14),
    0 3px 10px rgba(0,0,0,.07),
    0 0 0 1px rgba(225,33,20,.04) !important;
  overflow: hidden !important;
  padding: 6px !important;
  margin-top: 8px !important;
  background: #ffffff !important;
  width: 460px !important;
  max-width: 92vw !important;
}

.addr-suggestions-popper .el-autocomplete-suggestion__wrap {
  padding: 0 !important;
  max-height: 272px !important;
}

.addr-suggestions-popper .el-scrollbar__view {
  padding: 0 !important;
}

.addr-suggestions-popper .el-autocomplete-suggestion__list {
  padding: 0 !important;
  margin: 0 !important;
}

.addr-suggestions-popper li {
  padding: 0 !important;
  border-radius: 12px !important;
  margin-bottom: 3px !important;
  line-height: 1 !important;
  transition: background .15s, box-shadow .15s !important;
  border: 1.5px solid transparent !important;
}

.addr-suggestions-popper li:last-child {
  margin-bottom: 0 !important;
}

.addr-suggestions-popper li.highlighted,
.addr-suggestions-popper li:hover {
  background: rgba(225,33,20,.055) !important;
  border-color: rgba(225,33,20,.16) !important;
  box-shadow: 0 2px 10px rgba(225,33,20,.07) !important;
}

.addr-suggestion-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
}

.addr-suggestion-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(225,33,20,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}

.addr-suggestions-popper li.highlighted .addr-suggestion-icon,
.addr-suggestions-popper li:hover .addr-suggestion-icon {
  background: rgba(225,33,20,.16);
}

.addr-suggestion-icon i {
  font-size: 15px;
  color: #e12114;
}

.addr-suggestion-text {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: #374151;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

.addr-suggestions-popper .el-scrollbar__bar.is-vertical {
  opacity: 1 !important;
  width: 4px !important;
  right: 3px !important;
}

.addr-suggestions-popper .el-scrollbar__thumb {
  background: rgba(225,33,20,.22) !important;
  border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════════════
   SELECT ADDRESS / MAP DIALOG  cmap-*
   ═══════════════════════════════════════════════════════ */

.cmap-dialog,
.el-dialog.cmap-dialog,
.el-overlay .cmap-dialog,
.el-overlay-dialog .cmap-dialog,
.el-dialog:has(.cmap-card) {
  --el-dialog-border-radius: 32px;
  border-radius: 32px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.10) !important;
  width: 560px !important;
  max-width: 94vw !important;
}
.cmap-dialog .el-dialog__header,
.el-dialog:has(.cmap-card) .el-dialog__header { display: none !important; }
.cmap-dialog .el-dialog__body,
.el-dialog:has(.cmap-card) .el-dialog__body {
  padding: 0 !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  background: transparent !important;
}
.el-overlay-dialog:has(.cmap-dialog),
.el-overlay-dialog:has(.cmap-card) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Card */
.cmap-card {
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
}

/* Header */
.cmap-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 18px;
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
  border-bottom: 1px solid #f3f4f6;
}
.cmap-header-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #e12114;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(225,33,20,.32);
}
.cmap-header-icon i { font-size: 20px; color: #fff; }
.cmap-header-text { flex: 1; min-width: 0; }
.cmap-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 0 0 3px !important;
  letter-spacing: -.02em !important;
}
.cmap-subtitle {
  font-size: 12.5px !important;
  color: #6b7280 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.cmap-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .16s, transform .12s;
}
.cmap-close-btn:hover { background: rgba(0,0,0,.12); transform: scale(1.08); }
.cmap-close-btn i { font-size: 15px; color: #52525b; }

/* Search zone */
.cmap-search-zone {
  padding: 14px 16px 12px;
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
}
.cmap-search-zone .search-geocomplete { width: 100% !important; }
.cmap-search-zone .el-input__wrapper {
  border-radius: 12px !important;
  border: 1.5px solid #e9eaec !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  height: 48px !important;
  background: #fafafa !important;
}
.cmap-search-zone .el-input__wrapper:hover { border-color: rgba(225,33,20,.3) !important; }
.cmap-search-zone .el-input__wrapper.is-focus {
  border-color: #e12114 !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.10) !important;
  background: #fff !important;
}
.cmap-search-zone .flex-enabled-locate { display: none !important; }

/* Map zone */
.cmap-map-zone { position: relative; }
.cmap-map-zone .map-lg-large { height: 340px !important; border: none !important; border-radius: 0 !important; }
.cmap-map-zone .map-buttons-wrap {
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10;
}
.cmap-map-zone .btn-white {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.14) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background .15s, transform .12s !important;
}
.cmap-map-zone .btn-white:hover { background: #f5f5f5 !important; transform: scale(1.06) !important; }
.cmap-map-zone .btn-white i { font-size: 18px; color: #374151; }
.cmap-map-zone .rounded-circle { border-radius: 50% !important; }
.cmap-map-zone .divider { height: 1px !important; background: #e5e7eb !important; margin: 3px 0 !important; padding: 0 !important; }

/* Submit overlay */
.cmap-submit-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 100%);
  display: flex;
  justify-content: center;
}
.cmap-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 32px;
  height: 50px;
  border-radius: 14px;
  background: #e12114;
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(225,33,20,.45);
  transition: background .18s, transform .14s, box-shadow .18s;
  min-width: 180px;
  justify-content: center;
}
.cmap-submit-btn:hover {
  background: #c41c10;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(225,33,20,.5);
}
.cmap-submit-btn i { font-size: 18px; }
.cmap-submit-btn .circle-loader { display: none; }
.cmap-submit-btn.loading .label { opacity: 0; }
.cmap-submit-btn.loading .circle-loader { display: block; }

@media (max-width: 600px) {
  .cmap-dialog { width: 100% !important; max-width: 100vw !important; border-radius: 20px 20px 0 0 !important; }
  .cmap-map-zone .map-lg-large { height: 280px !important; }
}

/* Map dialog autocomplete suggestions */
.cmap-addr-popper {
  border-radius: 14px !important;
  border: 1.5px solid rgba(225,33,20,.13) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,.14),
    0 3px 10px rgba(0,0,0,.07) !important;
  overflow: hidden !important;
  padding: 6px !important;
  margin-top: 6px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.cmap-addr-popper .el-autocomplete-suggestion__wrap {
  padding: 0 !important;
  max-height: 240px !important;
}

.cmap-addr-popper .el-scrollbar__view,
.cmap-addr-popper .el-autocomplete-suggestion__list {
  padding: 0 !important;
  margin: 0 !important;
}

.cmap-addr-popper li {
  padding: 0 !important;
  border-radius: 10px !important;
  margin-bottom: 3px !important;
  line-height: 1 !important;
  transition: background .15s !important;
  border: 1.5px solid transparent !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.cmap-addr-popper li:last-child { margin-bottom: 0 !important; }

.cmap-addr-popper li.highlighted,
.cmap-addr-popper li:hover {
  background: rgba(225,33,20,.055) !important;
  border-color: rgba(225,33,20,.16) !important;
}

.cmap-addr-popper .el-autocomplete-suggestion__list > li > * {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* ═══════════════════════════════════════════════════════
   DELIVERY DETAILS DIALOG  ddetails-*
   ═══════════════════════════════════════════════════════ */

@keyframes ddetails-enter {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.ddetails-dialog {
  --el-dialog-border-radius: 32px;
  border-radius: 32px !important;
  overflow: visible !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 8px 24px rgba(0,0,0,.08),
    0 24px 64px rgba(0,0,0,.12) !important;
  border: none !important;
  width: 440px !important;
  max-width: 92vw !important;
  margin: 0 auto !important;
  animation: ddetails-enter .32s cubic-bezier(.16,1,.3,1) both;
}

.el-dialog.ddetails-dialog,
.el-overlay .ddetails-dialog {
  border-radius: 32px !important;
  overflow: visible !important;
}

.ddetails-dialog .el-dialog__header { display: none !important; }
.ddetails-dialog .el-dialog__body  { padding: 0 !important; border-radius: 32px !important; overflow: hidden !important; }
.ddetails-dialog { background: transparent !important; }
.el-overlay .el-dialog.ddetails-dialog,
.el-overlay-dialog .el-dialog.ddetails-dialog,
.el-dialog__wrapper .ddetails-dialog,
div[class*="el-overlay"] .ddetails-dialog {
  border-radius: 32px !important;
  overflow: hidden !important;
}

.el-overlay-dialog:has(.ddetails-dialog) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ddetails-card {
  background: #ffffff;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}

.ddetails-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f3f4f6;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  transition: background .15s, color .15s;
  color: #6b7280;
}
.ddetails-close-btn:hover { background: #e5e7eb; color: #111827; }
.ddetails-close-btn i { font-size: 14px; color: inherit; line-height: 1; }

.ddetails-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 32px 28px;
  background: linear-gradient(180deg, #fff9f9 0%, #ffffff 100%);
}

.ddetails-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #e12114;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow:
    0 0 0 10px rgba(225,33,20,.07),
    0 0 0 20px rgba(225,33,20,.035),
    0 12px 32px rgba(225,33,20,.38);
  animation: addr-icon-breathe 3s ease-in-out infinite;
}
.ddetails-hero-icon i {
  font-size: 30px;
  color: #ffffff;
}

.ddetails-hero-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 0 0 10px !important;
  letter-spacing: -.03em !important;
  line-height: 1.15 !important;
}

.ddetails-hero-sub {
  font-size: 13.5px !important;
  color: #6b7280 !important;
  margin: 0 !important;
  line-height: 1.55 !important;
  max-width: 300px;
}

.ddetails-body {
  padding: 20px 24px 24px;
  border-top: 1px solid #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ddetails-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1.5px solid #eaecf0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
  transition: border-color .2s, box-shadow .2s, transform .15s;
  text-decoration: none !important;
}
.ddetails-row:hover {
  border-color: rgba(225,33,20,.3);
  box-shadow: 0 2px 8px rgba(225,33,20,.08), 0 4px 16px rgba(0,0,0,.05);
  transform: translateY(-1px);
}
.ddetails-row:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.ddetails-row-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff1f0;
  border: 1px solid rgba(225,33,20,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.ddetails-row-icon i { font-size: 19px; color: #e12114; }
.ddetails-row:hover .ddetails-row-icon {
  background: rgba(225,33,20,.10);
  border-color: rgba(225,33,20,.22);
}

.ddetails-row-icon--time {
  background: #eff6ff;
  border-color: rgba(37,99,235,.12);
}
.ddetails-row-icon--time i { color: #2563eb; }
.ddetails-row:hover .ddetails-row-icon--time {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.22);
}

.ddetails-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ddetails-row-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e12114;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.ddetails-row-eyebrow::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e12114;
  opacity: .7;
}

.ddetails-row-label {
  font-size: 14.5px;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ddetails-row-meta {
  font-size: 12px;
  font-weight: 400;
  color: #9ca3af;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ddetails-row-arrow {
  font-size: 16px;
  color: #e12114;
  flex-shrink: 0;
  opacity: .45;
  transition: opacity .15s, transform .15s;
}
.ddetails-row:hover .ddetails-row-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.ddetails-footer {
  padding: 0 24px 28px;
}

.ddetails-done-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 14px;
  background: #e12114;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.ddetails-done-btn:hover {
  background: #c81d12;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(225,33,20,.35);
}
.ddetails-done-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════
   ITEM DETAILS MODAL — v5 (Premium Redesign)
   ══════════════════════════════════════════════════ */

@keyframes itemModal_entrance {
  from { opacity: 0; transform: translateY(40px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#itemModal.show .modal-dialog {
  animation: itemModal_entrance .4s cubic-bezier(.16,1,.3,1) forwards !important;
}

#itemModal .modal-dialog {
  max-width: 480px !important;
  margin: 2rem auto !important;
}

#itemModal .modal-content {
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 90vh !important;
}

/* ── Close ── */
#itemModal .modal-header {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 30 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  width: auto !important;
}

#itemModal .modal-header .close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #333 !important;
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
  transition: background .2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  text-shadow: none !important;
}

#itemModal .modal-header .close:hover {
  background: rgba(255,255,255,1) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.15) !important;
  transform: none !important;
}

/* ── Body scroll ── */
#itemModal .modal-body {
  padding: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#itemModal .modal-body::-webkit-scrollbar {
  display: none !important;
}

/* ── Hero image ── */
#itemModal .item_s {
  position: relative !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #f5f5f5, #ebebeb) !important;
  aspect-ratio: 4 / 3 !important;
  flex-shrink: 0 !important;
}

#itemModal .item_s .el-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

#itemModal .item_s .el-image img,
#itemModal .item_s .el-image__inner {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

#itemModal .item_s::after {
  content: none !important;
}

/* ── Title ── */
#itemModal h4 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin: 20px 24px 6px !important;
  line-height: 1.3 !important;
  letter-spacing: -.3px !important;
}

/* ── Description ── */
#itemModal .text-descriptions {
  font-size: 13px !important;
  color: #888 !important;
  line-height: 1.5 !important;
  margin: 0 24px 20px !important;
  padding: 0 !important;
}

#itemModal > * > p.text-muted {
  margin: 0 24px !important;
}

/* ── Size options – card style ── */
#itemModal .choose-sizex {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 24px 20px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

#itemModal .choose-sizex label.btn {
  border-radius: 12px !important;
  border: 1.5px solid #f0f0f0 !important;
  background: #fafafa !important;
  color: #333 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
  transition: all .2s ease !important;
  box-shadow: none !important;
  outline: none !important;
  flex: 0 0 auto !important;
  line-height: 1.4 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  width: 100% !important;
  justify-content: flex-start !important;
}

#itemModal .choose-sizex label.btn .size-label {
  flex: 1 !important;
  font-weight: 500 !important;
  color: #333 !important;
}

#itemModal .choose-sizex label.btn .size-price {
  margin-left: auto !important;
  font-weight: 600 !important;
  color: #555 !important;
  white-space: nowrap !important;
}

#itemModal .choose-sizex label.btn.active .size-price {
  color: #e12114 !important;
}

#itemModal .choose-sizex label.btn::before {
  content: '' !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid #ccc !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  transition: all .2s ease !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

#itemModal .choose-sizex label.btn:hover {
  border-color: #e0e0e0 !important;
  background: #fff !important;
  color: #333 !important;
}

#itemModal .choose-sizex label.btn.active {
  background: #fff5f2 !important;
  border-color: #e12114 !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
}

#itemModal .choose-sizex label.btn.active::before {
  border-color: #e12114 !important;
  background: #e12114 !important;
  box-shadow: inset 0 0 0 3px #fff !important;
}

#itemModal .choose-sizex label.btn input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Addon section wrapper ── */
#itemModal .addon-rows:first-of-type {
  margin-top: 0 !important;
  border-top: none !important;
}

#itemModal .addon-rows {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  background: transparent !important;
}

/* ── Addon header ── */
#itemModal .addon-rows .heads {
  background: transparent !important;
  border-top: 1px solid #f0f0f0 !important;
  border-bottom: none !important;
  padding: 32px 24px 10px !important;
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  text-align: left !important;
}

#itemModal .addon-rows:first-of-type .heads {
  border-top: none !important;
  padding-top: 0 !important;
}

#itemModal .addon-rows .heads .flexcol:first-child {
  flex: 1 !important;
}

#itemModal .addon-rows .heads .flexcol:last-child {
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

#itemModal .addon-rows .heads h5 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 0 1px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-top: none !important;
  padding: 0 !important;
  text-align: left !important;
}

#itemModal .addon-rows .heads p.text-grey {
  font-size: 12px !important;
  color: #999 !important;
  margin: -2px 0 0 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Required / Optional badge ── */
#itemModal .addon-required {
  background: #fff0ed !important;
  color: #e12114 !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  letter-spacing: .3px !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
#itemModal .addon-optional {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  letter-spacing: .3px !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

/* ── Addon option rows ── */
#itemModal .list-addon.list-selection {
  margin: 0 !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

#itemModal .list-addon.list-selection li {
  padding: 12px 14px !important;
  border: 1.5px solid #f0f0f0 !important;
  border-radius: 12px !important;
  background: #fafafa !important;
  transition: all .2s ease !important;
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}

#itemModal .list-addon.list-selection li:last-child {
  border-bottom: 1.5px solid #f0f0f0 !important;
}

#itemModal .list-addon.list-selection li:hover {
  border-color: #e0e0e0 !important;
  background: #fff !important;
}

#itemModal .list-addon.list-selection li:has(.custom-control-input:checked),
#itemModal .list-addon.list-selection li:has(.quantity-parent) {
  background: #fff5f2 !important;
  border-color: #e12114 !important;
}

/* ── Custom radio/checkbox ── */
#itemModal .custom-control {
  padding-left: 0 !important;
  min-height: auto !important;
}

#itemModal .custom-control-input {
  position: absolute !important;
  z-index: -1 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#itemModal .custom-control-label {
  padding-left: 34px !important;
  position: relative !important;
  cursor: pointer !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  min-height: 22px !important;
}

#itemModal .custom-control-label::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid #ccc !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: all .2s ease !important;
}

#itemModal .custom-control-label::after {
  content: '' !important;
  background-image: none !important;
  background-color: transparent !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) scale(0) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  transition: transform .2s cubic-bezier(.4,0,.2,1) !important;
}

#itemModal .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #e12114 !important;
  background-image: none !important;
  border-color: #e12114 !important;
  box-shadow: none !important;
}

#itemModal .custom-control-input:checked ~ .custom-control-label::after {
  background-image: none !important;
  background-color: #fff !important;
  transform: translateY(-50%) scale(1) !important;
}

#itemModal .custom-control-input[type="checkbox"] ~ .custom-control-label::before {
  border-radius: 6px !important;
}

#itemModal .custom-control-input[type="checkbox"]:checked ~ .custom-control-label::after {
  background-color: transparent !important;
  background-image: none !important;
  left: 4px !important;
  width: 12px !important;
  height: 6px !important;
  border-radius: 0 !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: translateY(-65%) rotate(-45deg) scale(1) !important;
}

#itemModal .custom-control-label h6 {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

#itemModal .list-addon li > p.m-0 {
  font-size: 13px !important;
  color: #666 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  margin-left: 12px !important;
}

/* ── Section labels (Special Instructions, If sold out) ── */
#itemModal h5.m-0 {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin: 0 !important;
  padding: 20px 24px 8px !important;
  border-top: 1px solid #f0f0f0 !important;
}

#itemModal .form-label-group {
  padding: 0 24px 4px !important;
  margin: 0 !important;
}

#itemModal .form-control.form-control-text {
  border: 1.5px solid #f0f0f0 !important;
  border-radius: 12px !important;
  background: #fafafa !important;
  font-size: 14px !important;
  color: #374151 !important;
  padding: 12px 16px !important;
  resize: none !important;
  box-shadow: none !important;
  min-height: 72px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

#itemModal .form-control.form-control-text:focus {
  background: #fff !important;
  outline: none !important;
  border-color: #e12114 !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.08) !important;
}

#itemModal .form-label-group select.form-control.custom-select {
  border: 1.5px solid #f0f0f0 !important;
  border-radius: 12px !important;
  background: #fafafa !important;
  font-size: 14px !important;
  color: #374151 !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  margin-bottom: 16px !important;
}

#itemModal .form-label-group select.form-control.custom-select:focus {
  background: #fff !important;
  outline: none !important;
  border-color: #e12114 !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.08) !important;
}

/* ── Footer ── */
#itemModal .item-modal-footer {
  background: #fff !important;
  border-top: 1px solid #f0f0f0 !important;
  padding: 16px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 0 0 20px 20px !important;
  flex-shrink: 0 !important;
}

#itemModal .item-modal-footer .w-25 {
  width: auto !important;
  flex-shrink: 0 !important;
}

#itemModal .item-modal-footer .w-75 {
  width: 100% !important;
  flex: 1 !important;
}

/* ── Qty stepper (matches list pill style) ── */
#itemModal .item-modal-footer .quantity {
  background: #f7f6f3 !important;
  border: 1px solid #e8e6e1 !important;
  border-radius: 50px !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: auto !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  transition: box-shadow .2s ease, border-color .2s ease !important;
}

#itemModal .item-modal-footer .quantity:hover {
  border-color: #d4d0ca !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
}

#itemModal .item-modal-footer .qty-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  color: #374151 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  transition: all .18s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

#itemModal .item-modal-footer .qty-btn:hover {
  background: #e12114 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(225,33,20,.3) !important;
  transform: scale(1.08) !important;
}

#itemModal .item-modal-footer .qty {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  min-width: 28px !important;
  text-align: center !important;
  line-height: 1 !important;
  user-select: none !important;
}

/* ── Add to cart CTA ── */
#itemModal .btn.btn-green.add_to_cart {
  background: #e12114 !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  padding: 14px 20px !important;
  width: 100% !important;
  height: 48px !important;
  box-shadow: 0 4px 16px rgba(225,33,20,.3) !important;
  transition: all .2s ease !important;
  letter-spacing: .2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

#itemModal .btn.btn-green.add_to_cart::before {
  content: none !important;
}

#itemModal .btn.btn-green.add_to_cart:hover:not(:disabled) {
  background: #c51d12 !important;
  box-shadow: 0 6px 20px rgba(225,33,20,.4) !important;
  transform: translateY(-1px) !important;
}

#itemModal .btn.btn-green.add_to_cart:active:not(:disabled) {
  background: #b01910 !important;
  transform: scale(.98) !important;
  box-shadow: 0 2px 8px rgba(225,33,20,.25) !important;
}

#itemModal .btn.btn-green.add_to_cart:disabled {
  background: #ccc !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

#itemModal .btn.btn-green.add_to_cart .label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 8px !important;
}

#itemModal .btn.btn-green.add_to_cart .item-summary {
  font-weight: 800 !important;
  opacity: .95 !important;
}

/* ── Misc ── */
#itemModal .el-tag {
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

#itemModal .owl-carousel {
  margin: 4px 24px 8px !important;
}

/* ── Quantity wrapper for multi-addons ── */
#itemModal .list-addon .quantity-wrapper {
  width: auto !important;
  flex-shrink: 0 !important;
}
#itemModal .list-addon .quantity-wrapper .quantity-parent {
  display: flex !important;
  align-items: center !important;
}
#itemModal .list-addon .quantity-wrapper .quantity {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#itemModal .list-addon .quantity-wrapper .qty-btn {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 12px !important;
  background: #f0f0f0 !important;
  border: none !important;
  color: #555 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: all .15s ease !important;
}
#itemModal .list-addon .quantity-wrapper .qty-btn:hover {
  background: #e12114 !important;
  color: #fff !important;
}
#itemModal .list-addon .quantity-wrapper .btn-plus-addon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 12px !important;
  background: #f0f0f0 !important;
  border: none !important;
  color: #555 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: all .15s ease !important;
}
#itemModal .list-addon .quantity-wrapper .btn-plus-addon:hover {
  background: #e12114 !important;
  color: #fff !important;
}
#itemModal .list-addon .quantity-wrapper .qty {
  font-size: 13px !important;
  font-weight: 600 !important;
  min-width: 20px !important;
  text-align: center !important;
  color: #1a1a1a !important;
  line-height: 1 !important;
}
#itemModal .list-addon li > .flexcol {
  flex: 1 !important;
  min-width: 0 !important;
}
#itemModal .list-addon li .addon-multi-price {
  font-size: 13px !important;
  color: #666 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
#itemModal .list-addon .quantity-add-cart {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  color: #bbb !important;
  font-size: 22px !important;
  line-height: 1 !important;
  transition: color .2s ease, transform .15s ease !important;
}
#itemModal .list-addon .quantity-add-cart:hover {
  color: #e12114 !important;
  transform: scale(1.1) !important;
}

/* ── Mobile full-screen ── */
@media (max-width: 575.98px) {
  #itemModal .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 100% !important;
  }
  #itemModal .modal-content {
    border-radius: 20px 20px 0 0 !important;
    min-height: auto !important;
    max-height: 95vh !important;
  }
  #itemModal .item_s {
    aspect-ratio: 4 / 3 !important;
  }
  #itemModal h4 {
    font-size: 19px !important;
    margin: 16px 18px 4px !important;
  }
  #itemModal .text-descriptions {
    margin: 0 18px 16px !important;
  }
  #itemModal .choose-sizex {
    padding: 0 18px 16px !important;
  }
  #itemModal .addon-rows .heads {
    padding: 18px 18px 10px !important;
  }
  #itemModal .addon-rows:first-of-type .heads {
    padding-top: 0 !important;
  }
  #itemModal .list-addon.list-selection {
    padding: 0 18px !important;
  }
  #itemModal h5.m-0 {
    padding: 16px 18px 8px !important;
  }
  #itemModal .form-label-group {
    padding: 0 18px 4px !important;
  }
  #itemModal .item-modal-footer {
    border-radius: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    padding: 14px 18px !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
  #itemModal .btn.btn-green.add_to_cart {
    height: 44px !important;
    font-size: 14px !important;
  }
}


/* ════════════════════════════════════════════════
   RESTAURANT DETAIL INFO — PREMIUM v3
   Full-width · On-theme red/white palette
   ════════════════════════════════════════════════ */

.rdi-wrap {
  margin-top: var(--space-4);
}

.rdi-anchor {
  display: block;
  position: relative;
  top: -110px;
  visibility: hidden;
}

.rdi-section {
  padding: 56px 0 64px;
  background: #f8f9fb;
  border-top: 1px solid rgba(17,24,39,.04);
  border-bottom: 1px solid rgba(17,24,39,.04);
}

.rdi-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}

.rdi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 36px;
}

.rdi-header-left {
  flex: 1;
  min-width: 0;
}

.rdi-header-right {
  flex-shrink: 0;
}

.rdi-title {
  margin: 16px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text);
}

.description.rdi-desc {
  max-width: 640px;
  max-height: 4.5em;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  transition: max-height .3s ease;
}

.description.rdi-desc.expanded {
  max-height: none;
}

.rdi-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  transition: var(--transition);
}

.rdi-read-more .zmdi {
  font-size: 16px;
  transition: transform var(--transition);
}

.rdi-read-more:hover {
  color: var(--brand-dark);
  text-decoration: none;
}

.rdi-read-more:hover .zmdi {
  transform: translateX(4px);
}

.rdi-quick-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rdi-quick-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid rgba(17,24,39,.06);
  min-width: 220px;
}

.rdi-quick-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(225,33,20,.07);
  color: var(--brand);
  font-size: 16px;
  flex-shrink: 0;
}

.rdi-quick-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.rdi-quick-value {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.rdi-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.rdi-map-wrapper {
  position: sticky;
  top: 88px;
}

.rdi-map-container {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #eef0f4;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
}

.rdi-map-image {
  width: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.rdi-map-overlay {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
}

.rdi-map-overlay-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.rdi-map-tag {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.rdi-map-addr {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

.rdi-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--transition);
}

.rdi-map-btn:hover {
  background: var(--brand);
  color: #fff;
  text-decoration: none;
}

.rdi-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rdi-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.06);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.04);
  overflow: hidden;
}

.rdi-card--hours {
  background: #fff;
}

.rdi-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 0;
}

.rdi-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(225,33,20,.07);
  color: var(--brand);
  font-size: 19px;
  flex-shrink: 0;
}

.rdi-card-icon--hours {
  background: rgba(37,99,235,.07);
  color: #2563eb;
}

.rdi-card-title {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--text);
}

.rdi-card-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-faint);
}

.rdi-card-body {
  padding: 18px 24px 24px;
}

.rdi-card-footer {
  padding: 0 24px 22px;
}

.rdi-address-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f8f9fb;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 16px;
}

.rdi-address-pin {
  color: var(--brand);
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.rdi-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rdi-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(17,24,39,.05);
}

.rdi-info-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rdi-info-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: var(--text-muted);
  font-size: 15px;
  flex-shrink: 0;
}

.rdi-info-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1px;
}

.rdi-info-value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.rdi-link {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}

.rdi-link:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

.rdi-btn-direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--transition);
}

.rdi-btn-direction:hover {
  background: var(--brand-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(225,33,20,.3);
}

.rdi-today-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37,99,235,.06) 0%, rgba(37,99,235,.02) 100%);
  border: 1px solid rgba(37,99,235,.1);
  margin-bottom: 18px;
}

.rdi-today-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: rdi-pulse 2s ease-in-out infinite;
}

@keyframes rdi-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.rdi-today-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rdi-today-value {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.rdi-hours-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rdi-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  transition: background .2s ease;
}

.rdi-hours-row:hover {
  background: rgba(17,24,39,.02);
}

.rdi-hours-row--active {
  background: rgba(37,99,235,.05);
  border-radius: 8px;
}

.rdi-hours-row--active .rdi-hours-day,
.rdi-hours-row--active .rdi-hours-time {
  color: #2563eb;
}

.rdi-hours-day {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.rdi-hours-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.rdi-hours-sep {
  color: var(--text-faint);
  margin: 0 2px;
}

.rdi-gallery {
  padding: 10px 0 48px;
  background: #f8f9fb;
}

.rdi-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.rdi-gitem {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(17,24,39,.06);
}

.rdi-gitem figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  border-radius: 12px;
  position: relative;
}

.rdi-gitem figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}

.rdi-gitem figure:hover img {
  transform: scale(1.06);
}

.rdi-gitem figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(to top, rgba(15,17,24,.32) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.rdi-gitem figure:hover::after {
  opacity: 1;
}

@media (max-width: 1199px) {
  .rdi-content {
    grid-template-columns: 1fr 1fr;
  }

  .rdi-map-image {
    min-height: 460px;
  }
}

@media (max-width: 991px) {
  .rdi-content {
    grid-template-columns: 1fr;
  }

  .rdi-map-wrapper {
    position: static;
  }

  .rdi-map-image {
    min-height: 360px;
  }

  .rdi-header {
    flex-direction: column;
    gap: 20px;
  }

  .rdi-quick-info {
    flex-direction: row;
  }

  .rdi-quick-item {
    flex: 1;
  }

  .rdi-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .rdi-section {
    padding: 32px 0 40px;
  }

  .rdi-header {
    gap: 16px;
  }

  .rdi-quick-info {
    flex-direction: column;
  }

  .rdi-quick-item {
    min-width: 0;
  }

  .rdi-card-header {
    padding: 18px 18px 0;
  }

  .rdi-card-body {
    padding: 14px 18px 18px;
  }

  .rdi-card-footer {
    padding: 0 18px 18px;
  }

  .rdi-map-image {
    min-height: 260px;
  }

  .rdi-gallery {
    padding: 8px 0 32px;
  }

  .rdi-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ================================================================
   CHECKOUT — Clean Professional Redesign
   ================================================================ */

/* ── Page Layout ── */
.ck-page {
  background: #f4f6f8;
  min-height: 100vh;
  padding: 36px 0 80px;
}

.ck-row { align-items: flex-start; }
.ck-main { padding: 0 14px; }
.ck-sidebar { padding: 0 14px; align-self: stretch; }

/* ── Checkout Progress Stepper ── */
.ck-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
  padding: 18px 28px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e9ebee;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.ck-stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 1;
  position: relative;
}

.ck-stepper-step::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 1px;
  background: #e2e5e9;
}

.ck-stepper-step:last-child::after { display: none; }

.ck-stepper-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e12114;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.ck-stepper-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
  letter-spacing: .01em;
  line-height: 1.3;
}

/* ── Cards ── */
.ck-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e9ebee;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  margin-bottom: 16px;
  overflow: visible;
  position: relative;
}

/* ── Card Head ── */
.ck-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 28px 0;
}

.ck-card-head-text {
  flex: 1;
  min-width: 0;
}

.ck-card-title {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.ck-card-subtitle {
  font-family: var(--font-display);
  font-size: 12.5px;
  color: #9ca3af;
  margin: 2px 0 0;
  font-weight: 400;
  line-height: 1.4;
}

.ck-card-body {
  padding: 18px 28px 24px;
}

/* ── Step Badge (numbered) ── */
.ck-step-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e12114;
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Step Icon (icon/non-numbered) ── */
.ck-step-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e9ebee;
}

.ck-step-icon i {
  font-size: 18px;
  color: #6b7280;
}

/* ── Option Rows ── */
.ck-option-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #e9ebee;
  background: #fafbfc;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
  text-decoration: none !important;
  color: inherit !important;
}

a.ck-option-row::after { display: none !important; }

.ck-option-row:hover {
  border-color: #e12114;
  background: #fff;
}

.ck-option-row--static { cursor: default; }
.ck-option-row--static:hover {
  border-color: #e9ebee;
  background: #fafbfc;
}
.ck-option-row--toggle { justify-content: space-between; }

/* ── Option Icons ── */
.ck-option-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff0ef;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fdd;
}

.ck-option-icon i {
  font-size: 17px;
  color: #e12114;
}

.ck-option-icon--promo { background: #fef9ec !important; border-color: #fde68a !important; }
.ck-option-icon--promo i { color: #d97706 !important; }

.ck-option-icon--gift { background: #f3f0fe !important; border-color: #ddd6fe !important; }
.ck-option-icon--gift i { color: #7c3aed !important; }

/* ── Option Body ── */
.ck-option-body { flex: 1; min-width: 0; }

.ck-option-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  display: block;
  line-height: 1.4;
}

.ck-option-meta {
  font-family: var(--font-display);
  font-size: 12px;
  color: #9ca3af;
  margin: 2px 0 0;
  line-height: 1.4;
}

.ck-option-success {
  font-family: var(--font-display);
  font-size: 12px;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  margin: 4px 0 0;
  font-weight: 600;
}

.ck-option-error { margin: 4px 0 0; }

.ck-option-error p {
  font-family: var(--font-display);
  font-size: 12px;
  color: #dc2626;
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
}

.ck-option-arrow {
  font-size: 18px;
  color: #d1d5db;
  flex-shrink: 0;
  transition: color .18s ease;
}

.ck-option-row:hover .ck-option-arrow {
  color: #e12114;
}

/* ── Skeleton ── */
.ck-skeleton-row {
  border: 1px solid #e9ebee;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: #fafbfc;
}

/* ── Booking Block ── */
.ck-booking-block {
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #e9ebee;
  background: #fafbfc;
  margin-top: 8px;
}

.ck-booking-label {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 10px;
}

/* ── Points Actions ── */
.ck-points-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* ── Tips Block ── */
.ck-tips-block {
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #e9ebee;
  background: #fafbfc;
  margin-top: 8px;
}

.ck-tips-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ck-tips-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ck-tip-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 18px;
  border-radius: 8px;
  border: 1px solid #e2e5e9;
  background: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.ck-tip-chip input { display: none; }

.ck-tip-chip:hover {
  border-color: #e12114;
  color: #e12114;
  background: #fff0ef;
}

.ck-tip-chip.active {
  background: #e12114;
  border-color: #e12114;
  color: #fff;
}

.ck-tips-custom {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ck-tip-input {
  width: 100px !important;
  height: 40px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e5e9 !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  background: #fff !important;
  transition: border-color .15s ease !important;
}

.ck-tip-input:focus {
  border-color: #e12114 !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.08) !important;
  background: #fff !important;
}

.ck-tip-btn {
  height: 40px !important;
  border-radius: 8px !important;
  padding: 0 22px !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}

/* ── Payment Section ── */
.ck-pay-section-title {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 10px;
}

.ck-pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e9ebee;
  background: #fafbfc;
  margin-bottom: 6px;
  transition: border-color .15s ease, background .15s ease;
  cursor: default;
  text-decoration: none !important;
  color: inherit !important;
}

a.ck-pay-row::after { display: none !important; }

.ck-pay-row--add { cursor: pointer; }

.ck-pay-row--add:hover {
  border-color: #e12114;
  background: #fff;
}

.ck-pay-row--active {
  border-color: #e12114;
  background: #fff9f9;
}

.ck-pay-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.ck-pay-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e9ebee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ck-pay-logo i { font-size: 18px; color: #374151; }
.ck-pay-logo img { width: 24px; height: 24px; object-fit: contain; }

.ck-pay-info { flex: 1; min-width: 0; }

.ck-pay-name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  display: block;
}

.ck-pay-fee {
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
}

.ck-pay-detail {
  font-family: var(--font-display);
  font-size: 12px;
  color: #9ca3af;
  margin: 1px 0 0;
}

.ck-pay-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ck-pay-default-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.ck-pay-default-badge i { font-size: 11px; }

.ck-pay-more-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af !important;
  transition: background .15s ease;
}

.ck-pay-more-btn:hover { background: #f3f4f6; }
.ck-pay-more-btn i { font-size: 17px; }

/* ── Input ── */
.ck-input {
  height: 46px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e5e9 !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  background: #fff !important;
}

.ck-input:focus {
  border-color: #e12114 !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.08) !important;
}

/* ── Wallet Alert ── */
.ck-wallet-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  margin: 8px 0;
}

.ck-wallet-alert i { font-size: 15px; }

.ck-topup-btn {
  border-radius: 8px !important;
  border: 1px solid #e12114 !important;
  background: transparent !important;
  color: #e12114 !important;
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 9px 24px !important;
  transition: background .15s ease, color .15s ease !important;
}

.ck-topup-btn:hover {
  background: #e12114 !important;
  color: #fff !important;
}

/* ── Cart Sidebar Card ── */
.ck-cart-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e9ebee;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  overflow: hidden;
  border-top: 3px solid #e12114;
}

.ck-cart-merchant {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 12px;
}

.ck-cart-merchant-logo {
  flex-shrink: 0;
  border: 1px solid #e9ebee !important;
}

.ck-cart-merchant-info { flex: 1; min-width: 0; }

.ck-cart-merchant-name {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-decoration: none !important;
  display: block;
  line-height: 1.3;
}

.ck-cart-merchant-name:hover { color: #e12114 !important; }

.ck-cart-cuisine {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ck-cart-address {
  font-family: var(--font-display);
  font-size: 12px;
  color: #9ca3af;
  margin: 4px 0 0;
  line-height: 1.45;
}

.ck-cart-divider {
  height: 1px;
  background: #e9ebee;
  margin: 0 20px;
}

.ck-cart-items-wrap { padding: 0; }

.ck-cart-items-wrap .sticky-cart {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.ck-cart-items-wrap .sticky-cart::before { display: none !important; }

.ck-cart-items-wrap .card {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.ck-cart-items-wrap .card-body { padding: 14px 20px !important; }
.ck-cart-items-wrap .divider { display: none !important; }

/* ── Sticky Sidebar card overrides ── */
.ck-sidebar .sticky-cart .card {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ── Back Arrow ── */
.ck-page ~ .page-content,
.page-content:has(.ck-page) {
  padding: 0 !important;
  background: transparent !important;
}

.back-arrow {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  margin-left: 12px;
  white-space: nowrap;
}

.back-arrow i {
  font-size: 14px;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f3f4f6;
  color: #374151;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.back-arrow:hover {
  background: #fff5f4 !important;
  color: #e12114 !important;
  border-color: #fecaca !important;
  box-shadow: 0 4px 12px rgba(225,33,20,.10) !important;
  text-decoration: none !important;
}

.back-arrow:hover i {
  background: #e12114;
  color: #fff;
  transform: translateX(-2px);
}

.back-arrow::before { display: none !important; }
.back-arrow::after  { display: none !important; }

.place-order-btn {
  gap: 10px;
}
.place-order-btn .label {
  flex: 1 1 auto;
  text-align: left;
}
.place-order-btn .place-order-total {
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}
.place-order-btn.loading .label,
.place-order-btn.loading .place-order-total {
  visibility: hidden;
}

/* ── Neutralize StickySidebar wrapper on checkout page ── */
.ck-page .sticky-cart,
.ck-page .sticky-cart .inner-wrapper-sticky {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.ck-page .ck-sidebar > .sticky-cart {
  position: sticky !important;
  top: 20px !important;
  align-self: flex-start;
  max-height: calc(100vh - 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ck-page .ck-sidebar > .sticky-cart > #vue-cart,
.ck-page .ck-sidebar .sticky-cart .ck-cart-items-wrap,
.ck-page .ck-sidebar .ck-cart-items-wrap > .sticky-cart > #vue-cart {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.ck-page .ck-sidebar .section-cart {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ck-page .ck-sidebar .section-cart .cart-items-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ck-page .ck-sidebar .section-cart .cart-items-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.ck-page .ck-sidebar .section-cart .cart-items-scroll::-webkit-scrollbar-thumb,
.ck-page .ck-sidebar .section-cart .cart-items-scroll::-webkit-scrollbar-track {
  background: transparent !important;
}

.ck-page .ck-sidebar .section-cart .cart-bottom-fixed {
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  background: #fff !important;
  z-index: 2 !important;
}

/* Hide inline scroll-hint on checkout (the items list itself is now scrollable) */
.ck-page .ck-sidebar .cart-scroll-hint { display: none !important; }

/* ── Address autocomplete suggestions on top of modal ── */
.pac-container,
body > .el-popper.is-light,
body > .el-popper[role="tooltip"],
.el-autocomplete__popper,
.el-autocomplete-suggestion,
.el-popper.el-autocomplete__popper {
  z-index: 999999 !important;
}

.el-autocomplete__popper .el-autocomplete-suggestion__list li,
.el-autocomplete-suggestion__list li {
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
}

/* ── Prevent ancestor stacking-context traps for Bootstrap modals ── */
body.modal-open .ck-card,
.ck-card:has(.modal.show),
.ck-card:has(.modal.in) {
  transform: none !important;
  filter: none !important;
}

.modal.show,
.modal.in {
  z-index: 1080 !important;
}
.modal-backdrop.show,
.modal-backdrop.in {
  z-index: 1070 !important;
}

/* ── Override existing checkout layout items to fit cards ── */
.ck-card .card-body {
  padding: 18px 28px 24px !important;
  border: none !important;
}

.ck-card .card-body .badge.badge-dark {
  background: #e12114 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
}

.ck-card .section-title {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -.01em !important;
}

.ck-card .chevron-section {
  border-radius: 10px !important;
  border: 1px solid #e9ebee !important;
  background: #fafbfc !important;
  transition: border-color .15s ease !important;
}

.ck-card a.chevron-section:hover {
  border-color: #e12114 !important;
  background: #fff !important;
}

.ck-card .border-green {
  border-radius: 10px !important;
  border: 1px solid rgba(225,33,20,.2) !important;
  background: #fff9f9 !important;
}

.ck-card .form-control,
.ck-card .form-control-text,
.ck-card .custom-select {
  border-radius: 8px !important;
  border: 1px solid #e2e5e9 !important;
  font-family: var(--font-display) !important;
  background: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

.ck-card .form-control:focus,
.ck-card .custom-select:focus {
  border-color: #e12114 !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.08) !important;
}

.ck-card .btn-group-toggle .btn {
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  border: 1px solid #e2e5e9 !important;
  transition: all .15s ease !important;
}

.ck-card .btn-group-toggle .btn.active {
  background: #e12114 !important;
  border-color: #e12114 !important;
  color: #fff !important;
}

.ck-card .btn-green {
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  height: 46px !important;
  font-size: 14px !important;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .ck-card-body { padding: 16px 22px 20px; }
  .ck-card-head { padding: 20px 22px 0; }
}

@media (max-width: 991px) {
  .ck-page { padding: 20px 0 60px; }
  .ck-card { border-radius: 12px; }
  .ck-cart-card { border-radius: 12px; }
  .ck-card .card-body { padding: 14px 20px 18px !important; }
  .ck-card-body { padding: 14px 20px 18px; }
  .ck-card-head { padding: 18px 20px 0; }
}

@media (max-width: 767px) {
  .ck-stepper { display: none; }
  .ck-card { border-radius: 10px; }
  .ck-cart-card { border-radius: 10px; }
}

@media (max-width: 575px) {
  .ck-page { padding: 12px 0 48px; }
  .ck-main { padding: 0 10px; }
  .ck-sidebar { padding: 0 10px; }
  .ck-card .card-body { padding: 12px 16px 16px !important; }
  .ck-card-body { padding: 12px 16px 16px; }
  .ck-card-head { padding: 16px 16px 0; }
  .ck-step-badge { width: 34px; height: 34px; font-size: 14px; }
  .ck-step-icon { width: 34px; height: 34px; }
}

/* ── Checkout Layout Header ── */
.ck-layout-header {
  position: relative;
  background: #fff;
  border-bottom: 1px solid #e9ebee;
  z-index: 100;
}

.ck-layout-header #top-navigation {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  min-height: 72px !important;
  padding: 0 40px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 !important;
}

.ck-nav-row { align-items: center; }

/* Reorder: Logo (left) | Back to Menu (next to logo) | spacer | Secure Checkout (right) */
.ck-layout-header #top-navigation > div { max-width: none !important; }

.ck-layout-header #top-navigation > .col-auto.d-flex.justify-content-center {
  order: 1 !important;
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

.ck-layout-header #vue-checkout-back {
  order: 2 !important;
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

.ck-layout-header #top-navigation > .col.d-flex.justify-content-end,
.ck-layout-header #top-navigation > div:last-child {
  order: 3 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 0 !important;
  visibility: visible !important;
  margin-left: auto !important;
  min-width: 180px !important;
}

.ck-layout-header #top-navigation .ck-nav-secure {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Guaranteed Secure Checkout badge fallback (renders even if DOM span is missing) */
.ck-layout-header { position: relative !important; }

.ck-layout-header::after {
  content: "Secure Checkout";
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  font-family: var(--font-display, 'Open Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 38px;
  border-radius: 999px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 1l9 4v6c0 5.5-3.8 10.7-9 12-5.2-1.3-9-6.5-9-12V5l9-4zm-1 7v3h2V8h-2zm-1 5v4h4v-4h-4z'/></svg>") no-repeat 10px center / 16px 16px,
    radial-gradient(circle 11px at 18px 50%, #16a34a 99%, transparent 100%),
    #ecfdf5;
  border: 1px solid #bbf7d0;
  box-shadow: 0 1px 2px rgba(16,185,129,.06);
  pointer-events: none;
  z-index: 5;
}

/* Hide native span if it exists so we don't double-render */
.ck-layout-header .ck-nav-secure { display: none !important; }

.ck-nav-secure {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  box-shadow: 0 1px 2px rgba(16,185,129,.06);
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.ck-nav-secure:hover {
  background: #d1fae5;
  border-color: #86efac;
  box-shadow: 0 4px 12px rgba(16,185,129,.12);
}

.ck-nav-secure i {
  font-size: 13px;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
}

.ck-header-accent {
  height: 2px;
  background: #e12114;
}

.ck-layout-header ~ .page-content {
  padding-top: 0 !important;
  background: transparent !important;
}

/* ─────────────────────────────────────────────────────
   CHECKOUT CART — Error & Notice States
   ───────────────────────────────────────────────────── */

/* ── Currently Closed Notice ── */
.ck-cart-card .cart-closed-notice {
  background: #fffbeb !important;
  border-top: 1px solid #fde68a !important;
  border-bottom: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.ck-cart-card .ccn-inner {
  padding: 14px 16px 12px !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

.ck-cart-card .ccn-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(245,158,11,.1) !important;
  flex-shrink: 0 !important;
}

.ck-cart-card .ccn-icon-wrap i {
  font-size: 17px !important;
  color: #d97706 !important;
  z-index: 2 !important;
  position: relative !important;
}

.ck-cart-card .ccn-icon-pulse {
  display: none !important;
}

.ck-cart-card .ccn-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.ck-cart-card .ccn-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #92400e !important;
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  margin-bottom: 5px !important;
}

.ck-cart-card .ccn-badge::before {
  content: '';
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #d97706 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.ck-cart-card .ccn-msg {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  color: #78350f !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

.ck-cart-card .ccn-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 13px 16px !important;
  background: #f59e0b !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 0 0 14px 14px !important;
  transition: background .15s ease !important;
}

.ck-cart-card .ccn-btn i {
  font-size: 15px !important;
  color: #fff !important;
}

.ck-cart-card .ccn-btn-arrow {
  margin-left: auto !important;
  font-size: 15px !important;
  opacity: .9 !important;
}

.ck-cart-card .ccn-btn:hover {
  background: #e08e0a !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Payment / Place Order Error Alerts ── */
.ck-cart-card .cart-bottom-fixed .alert-warning,
.ck-cart-card .section-cart .alert-warning {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.ck-cart-card .cart-bottom-fixed .alert-warning::before,
.ck-cart-card .section-cart .alert-warning::before {
  content: '\f1f4' !important;
  font-family: 'Material-Design-Iconic-Font' !important;
  font-size: 16px !important;
  color: #d97706 !important;
  flex-shrink: 0 !important;
  line-height: 1.4 !important;
  margin-top: 0 !important;
}

.ck-cart-card .cart-bottom-fixed .alert-warning p,
.ck-cart-card .section-cart .alert-warning p {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #92400e !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ── Place Order error_placeorder (red variant) ── */
.ck-cart-card .cart-bottom-fixed .alert-warning:has(p[v-for]) {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

.ck-cart-card .cart-bottom-fixed .alert-warning:has(p[v-for])::before {
  content: '\f1f1' !important;
  color: #e12114 !important;
}

.ck-cart-card .cart-bottom-fixed .alert-warning:has(p[v-for]) p {
  color: #b91c1c !important;
}

/* ── "Please select valid payment method" — v-if="hasPayment" ── */
.ck-cart-card .cart-bottom-fixed [v-if="hasPayment"].alert-warning {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}

/* ── Mobile: fixed Place Order button at bottom ──
   On responsive (≤991px) the cart sidebar stacks below the main checkout
   content, so the Place Order CTA can be far below the fold (or clipped
   by the basket card). Pin it as a floating bar at the bottom of the
   viewport so it is always reachable.
   We target `.place-order-btn` directly (added in cart-data.php) instead
   of the generic `.btn-green`, to avoid styling unrelated buttons inside
   the cart (e.g. Schedule Order). */
@media (max-width: 991px) {
  .ck-page .place-order-btn,
  .ck-sidebar .place-order-btn,
  body .place-order-btn {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    z-index: 1050 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(225,33,20,.32), 0 2px 6px rgba(0,0,0,.08) !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Prevent the basket / page bottom from being hidden under the floating CTA */
  .ck-page,
  body.controller-account.action-checkout {
    padding-bottom: 96px !important;
  }
  /* The sticky-cart wrapper clips its children with max-height + overflow:hidden
     on desktop. On mobile we want the basket to flow naturally so nothing
     accidentally hides the area around the Place Order button. */
  .ck-page .ck-sidebar > .sticky-cart {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .ck-page .ck-sidebar .section-cart,
  .ck-page .ck-sidebar .section-cart .cart-items-scroll,
  .ck-page .ck-sidebar .section-cart .cart-bottom-fixed,
  .ck-page .ck-cart-card {
    overflow: visible !important;
    max-height: none !important;
  }
  .ck-page .ck-sidebar .section-cart .cart-bottom-fixed {
    position: relative !important;
    bottom: auto !important;
  }
}

@media (max-width: 575px) {
  .ck-page .place-order-btn,
  .ck-sidebar .place-order-btn,
  body .place-order-btn {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    max-width: calc(100vw - 20px) !important;
    padding: 13px 16px !important;
  }
}

@media (max-width: 767px) {
  .ck-layout-header #top-navigation {
    padding: 0 16px !important;
    min-height: 60px !important;
  }
  .ck-nav-secure { display: none !important; }
  .ck-layout-header::after { display: none !important; }
}

@media (max-width: 575px) {
  .ck-layout-header #top-navigation {
    padding: 0 12px !important;
    min-height: 56px !important;
  }
}


/* ════════════════════════════════════════════════
   Hero search — red CTA button height fix (mobile)
   Not scoped to body.front-page (the class is
   conditionally added). Targets the actual rendered
   markup: #vm_home_search .flex-enabled-locate .btn
   ════════════════════════════════════════════════ */
#vm_home_search .home-search-wrap .flex-enabled-locate,
#vm_home_search .home-search-wrap .flex-enabled-locate .btn,
#vm_home_search .home-search-wrap .flex-enabled-locate button.btn-green {
  box-sizing: border-box !important;
}

@media (max-width: 575.98px) {
  #vm_home_search .home-search-wrap .flex-enabled-locate {
    width: 100% !important;
    margin-top: 10px !important;
  }
  #vm_home_search .home-search-wrap .flex-enabled-locate .btn,
  #vm_home_search .home-search-wrap .flex-enabled-locate button,
  #vm_home_search .home-search-wrap .flex-enabled-locate button.btn-green {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    line-height: 1 !important;
    padding: 0 !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #vm_home_search .home-search-wrap .flex-enabled-locate .btn i,
  #vm_home_search .home-search-wrap .flex-enabled-locate button i {
    font-size: 20px !important;
    line-height: 1 !important;
  }
}

/* Mobile hero banner height override — matches/beats body.front-page specificity */
@media (max-width: 575.98px) {
  #main-search-banner,
  body.front-page #main-search-banner {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
  }
}
@media (max-width: 767px) {
  body.front-page #main-search-banner {
    height: 500px !important;
    min-height: 500px !important;
  }
}

/* Push hero content (title, input, button) down on mobile */
@media (max-width: 575.98px) {
  #main-search-banner,
  body.front-page #main-search-banner {
    align-items: flex-end !important;
  }
  #main-search-banner .banner-center,
  body.front-page #main-search-banner .banner-center {
    align-self: flex-end !important;
    padding-top: 0 !important;
    padding-bottom: 40px !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  body.front-page #main-search-banner {
    align-items: flex-end !important;
  }
  body.front-page #main-search-banner .banner-center {
    align-self: flex-end !important;
    padding-top: 0 !important;
    padding-bottom: 40px !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
}

/* Mobile logo height */
@media (max-width: 767px) {
  .top-logo img,
  .top-logo img.img-200,
  .footer-logo img {
    height: 75px !important;
    max-height: 75px !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Accommodate taller logo in header on mobile */
  #top-navigation { min-height: 95px !important; }
  ul.top-menu     { height: 95px !important; }
  .page-content   { padding-top: 100px !important; }
  body.front-page .page-content { padding-top: 0 !important; }
  /* Auth/form pages (login, rider + restaurant signup): the page now starts below
     the fixed header via --nav-h (see .page-content:has(.plp-wrap) in those views),
     so the panel only needs its own breathing room */
  .page-content .plp-wrap .plp-form-panel,
  .plp-wrap .plp-form-panel {
    padding-top: 28px !important;
  }
}
@media (max-width: 480px) {
  .plp-wrap .plp-form-panel {
    padding: 28px 20px 32px !important;
  }
}

/* Hide Sign in button in header on mobile */
@media (max-width: 767px) {
  ul.top-menu li.line-left,
  ul.top-menu li.line-left > a[href*="login"],
  ul.top-menu a[href*="login"] {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════
   EDIT PHONE NUMBER MODAL  —  #changephoneModal
   ════════════════════════════════════════════════ */

/* ── Dialog shell ── */
#changephoneModal .modal-dialog {
  max-width: 420px !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  min-height: 100vh !important;
  padding: 20px !important;
}

#changephoneModal .modal-content {
  border: 1px solid #e9ebee !important;
  border-radius: 16px !important;
  overflow: visible !important;
  background: #ffffff !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06) !important;
}

/* ── Header ── */
#changephoneModal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 22px 12px !important;
  border-bottom: none !important;
  border-radius: 16px 16px 0 0 !important;
  background: #fff !important;
}

#changephoneModal .modal-title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* ── Close button ── */
#changephoneModal .close {
  margin: 0 !important;
  padding: 0 !important;
}

#changephoneModal .close a.btn-black,
#changephoneModal .close a.btn-circle {
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4f6f8 !important;
  color: #6b7280 !important;
  border: 1px solid #e2e5e9 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background .15s, color .15s !important;
}

#changephoneModal .close a.btn-black i,
#changephoneModal .close a.btn-circle i {
  font-size: 14px !important;
  color: inherit !important;
  line-height: 1 !important;
}

#changephoneModal .close a.btn-black:hover,
#changephoneModal .close a.btn-circle:hover {
  background: #e9ebee !important;
  color: #111827 !important;
}

/* ── Body ── */
#changephoneModal .modal-body {
  padding: 8px 22px 16px !important;
  overflow: visible !important;
}

#changephoneModal .modal-body .forms {
  margin: 0 !important;
}

/* ── Error alert ── */
#changephoneModal .alert-warning {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: 8px !important;
  color: #92400e !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
}

/* ── Footer ── */
#changephoneModal .modal-footer {
  padding: 8px 22px 22px !important;
  border-top: none !important;
  background: #fff !important;
  border-radius: 0 0 16px 16px !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: stretch !important;
}

#changephoneModal .modal-footer .border {
  border: none !important;
  flex: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* ── Cancel button ── */
#changephoneModal .modal-footer .btn-black {
  width: 100% !important;
  height: 46px !important;
  border-radius: 10px !important;
  background: #f4f6f8 !important;
  border: 1px solid #e2e5e9 !important;
  color: #374151 !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#changephoneModal .modal-footer .btn-black:hover {
  background: #e9ebee !important;
  color: #111827 !important;
}

/* ── Continue button ── */
#changephoneModal .modal-footer .btn-green {
  width: 100% !important;
  height: 46px !important;
  border-radius: 10px !important;
  background: #e12114 !important;
  border: none !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#changephoneModal .modal-footer .btn-green::before { display: none !important; }

#changephoneModal .modal-footer .btn-green:hover:not(:disabled) {
  background: #c91e12 !important;
}

#changephoneModal .modal-footer .btn-green:disabled {
  background: #d1d5db !important;
  color: #fff !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* ── Country flag dropdown ── */
#changephoneModal .dropdown {
  position: relative !important;
}

#changephoneModal .dropdown-menu {
  position: absolute !important;
  transform: none !important;
  z-index: 1200 !important;
  top: calc(100% + 3px) !important;
  left: -1.5px !important;
  right: -1.5px !important;
  width: auto !important;
  min-width: 0 !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  border: 1.5px solid #e2e5e9 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06) !important;
  padding: 4px !important;
  background: #fff !important;
  margin-top: 0 !important;
}

#changephoneModal .dropdown-menu::-webkit-scrollbar {
  width: 4px !important;
}
#changephoneModal .dropdown-menu::-webkit-scrollbar-thumb {
  background: #e2e5e9 !important;
  border-radius: 4px !important;
}

#changephoneModal .dropdown-item {
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: background .12s ease, color .12s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#changephoneModal .dropdown-item:hover,
#changephoneModal .dropdown-item:focus {
  background: #f4f6f8 !important;
  color: #111827 !important;
}

#changephoneModal .dropdown-item img {
  width: 20px !important;
  height: 14px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* ── Unified phone input field ── */
#changephoneModal .inputs-with-dropdown {
  display: flex !important;
  align-items: center !important;
  border: 1.5px solid #e2e5e9 !important;
  border-radius: 10px !important;
  overflow: visible !important;
  height: 52px !important;
  background: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  margin-bottom: 0 !important;
  gap: 0 !important;
  position: relative !important;
}

#changephoneModal .inputs-with-dropdown:focus-within {
  border-color: #e12114 !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.08) !important;
}

#changephoneModal .inputs-with-dropdown .dropdown {
  flex-shrink: 0 !important;
  position: static !important;
}

#changephoneModal .inputs-with-dropdown .dropdown-toggle {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 52px !important;
  padding: 0 10px !important;
  cursor: pointer !important;
  background: #f8f9fb !important;
  border-right: 1.5px solid #e2e5e9 !important;
  border-radius: 8.5px 0 0 8.5px !important;
  transition: background .15s ease !important;
}

#changephoneModal .inputs-with-dropdown .dropdown-toggle:hover {
  background: #f0f2f4 !important;
}

#changephoneModal .inputs-with-dropdown .dropdown-toggle img {
  width: 22px !important;
  height: 16px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  display: block !important;
}

#changephoneModal .inputs-with-dropdown .dropdown-toggle::after {
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  border-top: 4px solid #9ca3af !important;
  border-right: 4px solid transparent !important;
  border-bottom: 0 !important;
  border-left: 4px solid transparent !important;
  content: '' !important;
  flex-shrink: 0 !important;
}

#changephoneModal .inputs-with-dropdown .mr-0.ml-1 {
  flex-shrink: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  padding: 0 4px 0 10px !important;
  white-space: nowrap !important;
  user-select: none !important;
}

#changephoneModal .inputs-with-dropdown input[type="text"] {
  flex: 1 !important;
  height: 52px !important;
  border: none !important;
  border-radius: 0 8.5px 8.5px 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 14px !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  background: transparent !important;
  min-width: 0 !important;
}

#changephoneModal .inputs-with-dropdown input[type="text"]:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

@media (max-width: 520px) {
  #changephoneModal .modal-dialog {
    max-width: 100% !important;
    padding: 12px !important;
  }
  #changephoneModal .modal-content { border-radius: 14px !important; }
  #changephoneModal .modal-header { padding: 18px 18px 10px !important; }
  #changephoneModal .modal-body { padding: 4px 18px 14px !important; }
  #changephoneModal .modal-footer { padding: 6px 18px 18px !important; }
}

/* ════════════════════════════════════════════════
   PROMO CODE MODAL  —  #promocodeModal
   ════════════════════════════════════════════════ */

#promocodeModal .modal-dialog {
  max-width: 420px !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  min-height: 100vh !important;
  padding: 20px !important;
}

#promocodeModal .modal-content {
  border: 1px solid #e9ebee !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06) !important;
}

/* ── Header ── */
#promocodeModal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 22px 14px !important;
  border-bottom: none !important;
}

#promocodeModal .modal-title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

#promocodeModal .close {
  margin: 0 !important;
  padding: 0 !important;
}

#promocodeModal .close a {
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4f6f8 !important;
  color: #6b7280 !important;
  border: 1px solid #e2e5e9 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background .15s, color .15s !important;
}

#promocodeModal .close a i {
  font-size: 14px !important;
  color: inherit !important;
  line-height: 1 !important;
}

#promocodeModal .close a:hover {
  background: #e9ebee !important;
  color: #111827 !important;
}

/* ── Body ── */
#promocodeModal .modal-body {
  padding: 4px 22px 16px !important;
  overflow: visible !important;
}

#promocodeModal .modal-body .forms {
  margin: 0 !important;
}

/* ── Promo input (floating label group) ── */
#promocodeModal .form-label-group {
  position: relative !important;
  margin: 0 !important;
}

#promocodeModal .form-label-group input.form-control {
  height: 60px !important;
  border-radius: 10px !important;
  border: 1.5px solid #e2e5e9 !important;
  background: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  padding: 24px 16px 8px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

#promocodeModal .form-label-group input.form-control:focus {
  border-color: #e12114 !important;
  box-shadow: 0 0 0 3px rgba(225,33,20,.08) !important;
  outline: none !important;
  background: #fff !important;
}

#promocodeModal .form-label-group label {
  position: absolute !important;
  top: 50% !important;
  left: 16px !important;
  right: auto !important;
  width: auto !important;
  max-width: calc(100% - 32px) !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  transform: translateY(-50%) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #9ca3af !important;
  pointer-events: none !important;
  transition: top .15s ease, font-size .15s ease, color .15s ease, transform .15s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-indent: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

#promocodeModal .form-label-group input:not(:placeholder-shown) ~ label,
#promocodeModal .form-label-group input:focus ~ label {
  top: 10px !important;
  left: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  transform: translateY(0) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #e12114 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

/* ── Error alert ── */
#promocodeModal .alert-warning {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: 8px !important;
  color: #92400e !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* ── Footer ── */
#promocodeModal .modal-footer {
  padding: 8px 22px 22px !important;
  border-top: none !important;
  background: #fff !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: stretch !important;
}

/* ── Cancel button ── */
#promocodeModal .modal-footer .btn-black {
  flex: 1 !important;
  height: 46px !important;
  border-radius: 10px !important;
  background: #f4f6f8 !important;
  border: 1px solid #e2e5e9 !important;
  color: #374151 !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: background .15s ease, color .15s ease !important;
}

#promocodeModal .modal-footer .btn-black:hover {
  background: #e9ebee !important;
  color: #111827 !important;
}

/* ── Apply button ── */
#promocodeModal .modal-footer .btn-green {
  flex: 1 !important;
  height: 46px !important;
  border-radius: 10px !important;
  background: #e12114 !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: background .15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#promocodeModal .modal-footer .btn-green::before { display: none !important; }

#promocodeModal .modal-footer .btn-green:hover:not(:disabled) {
  background: #c91e12 !important;
}

#promocodeModal .modal-footer .btn-green:disabled {
  background: #d1d5db !important;
  color: #fff !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

@media (max-width: 520px) {
  #promocodeModal .modal-dialog {
    max-width: 100% !important;
    padding: 12px !important;
  }
  #promocodeModal .modal-content { border-radius: 14px !important; }
  #promocodeModal .modal-header { padding: 18px 18px 12px !important; }
  #promocodeModal .modal-body { padding: 4px 18px 14px !important; }
  #promocodeModal .modal-footer { padding: 6px 18px 18px !important; }
}

/* ════════════════════════════════════════════════
   ADDRESS LABEL CHIPS  —  Home / Work / School / Other
   ════════════════════════════════════════════════ */

.ck-page .btn-group-toggle.input-group-small,
.btn-group-toggle.input-group-small {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.ck-page .btn-group-toggle.input-group-small .btn,
.btn-group-toggle.input-group-small .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 18px !important;
  border-radius: 8px !important;
  border: 1.5px solid #e2e5e9 !important;
  background: #fff !important;
  color: #374151 !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background .15s ease, color .15s ease !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}

.ck-page .btn-group-toggle.input-group-small .btn + .btn,
.btn-group-toggle.input-group-small .btn + .btn {
  margin-left: 0 !important;
  border-left: 1.5px solid #e2e5e9 !important;
  border-radius: 8px !important;
}

.ck-page .btn-group-toggle.input-group-small .btn:first-child,
.ck-page .btn-group-toggle.input-group-small .btn:last-child,
.btn-group-toggle.input-group-small .btn:first-child,
.btn-group-toggle.input-group-small .btn:last-child {
  border-radius: 8px !important;
}

.ck-page .btn-group-toggle.input-group-small .btn:hover,
.btn-group-toggle.input-group-small .btn:hover {
  border-color: #e12114 !important;
  color: #e12114 !important;
  background: #fff9f9 !important;
}

.ck-page .btn-group-toggle.input-group-small .btn.active,
.btn-group-toggle.input-group-small .btn.active {
  background: #e12114 !important;
  border-color: #e12114 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.ck-page .btn-group-toggle.input-group-small .btn input[type="radio"],
.btn-group-toggle.input-group-small .btn input[type="radio"] {
  display: none !important;
}

/* ════════════════════════════════════════════════
   PAYMENT METHOD — MORE OPTIONS DROPDOWN
   ════════════════════════════════════════════════ */

.ck-pay-row-right .dropdown {
  position: relative;
}

.ck-pay-row-right .dropdown-menu {
  min-width: 150px !important;
  padding: 6px !important;
  border: 1px solid #e9ebee !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06) !important;
  background: #fff !important;
  margin-top: 4px !important;
  z-index: 1050 !important;
}

.ck-pay-row-right .dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  transition: background .12s ease, color .12s ease !important;
  cursor: pointer !important;
}

.ck-pay-row-right .dropdown-menu .dropdown-item:hover {
  background: #f4f6f8 !important;
  color: #111827 !important;
}

.ck-pay-row-right .dropdown-menu .dropdown-item:last-child {
  color: #dc2626 !important;
}

.ck-pay-row-right .dropdown-menu .dropdown-item:last-child:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.ck-pay-row-right .dropdown-menu .dropdown-item:last-child::before {
  content: '\f154';
  font-family: 'Material-Design-Iconic-Font', sans-serif !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: inherit !important;
  flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════
   ADD CASH ON DELIVERY MODAL  —  #cashForm
   ════════════════════════════════════════════════ */

#cashForm .modal-dialog {
  max-width: 420px !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  min-height: 100vh !important;
  padding: 20px !important;
}

#cashForm .modal-content {
  border: 1px solid #e9ebee !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06) !important;
}

/* ── Body ── */
#cashForm .modal-body {
  padding: 0 !important;
  position: relative !important;
}

/* ── Icon strip at top ── */
#cashForm .modal-body::before {
  content: '';
  display: block;
  height: 4px;
  background: #e12114;
  border-radius: 16px 16px 0 0;
}

/* ── Close button (btn-black btn-circle inside modal-body) ── */
#cashForm .modal-body > a.btn-black,
#cashForm .modal-body > a.btn-circle {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4f6f8 !important;
  color: #6b7280 !important;
  border: 1px solid #e2e5e9 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background .15s, color .15s !important;
  z-index: 10 !important;
}

#cashForm .modal-body > a.btn-black i,
#cashForm .modal-body > a.btn-circle i {
  font-size: 14px !important;
  color: inherit !important;
  line-height: 1 !important;
}

#cashForm .modal-body > a.btn-black:hover,
#cashForm .modal-body > a.btn-circle:hover {
  background: #e9ebee !important;
  color: #111827 !important;
}

/* ── Title (h4 inside modal-body) ── */
#cashForm .modal-body > h4 {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -.01em !important;
  margin: 20px 22px 0 !important;
  padding-right: 40px !important;
  line-height: 1.3 !important;
}

/* ── Notes paragraph ── */
#cashForm .modal-body > p {
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
  margin: 10px 22px 20px !important;
  padding: 0 !important;
}

/* ── Error alert ── */
#cashForm .alert-warning {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: 8px !important;
  color: #92400e !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  margin: 0 22px 16px !important;
}

/* ── Footer ── */
#cashForm .modal-footer {
  padding: 0 22px 22px !important;
  border-top: none !important;
  background: #fff !important;
  display: block !important;
}

/* ── Add Cash button ── */
#cashForm .modal-footer .btn-green {
  width: 100% !important;
  height: 46px !important;
  border-radius: 10px !important;
  background: #e12114 !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: background .15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#cashForm .modal-footer .btn-green::before { display: none !important; }

#cashForm .modal-footer .btn-green:hover:not(:disabled) {
  background: #c91e12 !important;
}

#cashForm .modal-footer .btn-green:disabled {
  background: #d1d5db !important;
  color: #fff !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

@media (max-width: 520px) {
  #cashForm .modal-dialog {
    max-width: 100% !important;
    padding: 12px !important;
  }
  #cashForm .modal-content { border-radius: 14px !important; }
  #cashForm .modal-body > h4 { margin: 18px 18px 0 !important; }
  #cashForm .modal-body > p { margin: 10px 18px 16px !important; }
  #cashForm .modal-footer { padding: 0 18px 18px !important; }
}

/* ════════════════════════════════════════════════
   STRIPE CARD PAYMENT MODAL  —  [aria-labelledby="StripeForm"]
   Premium light-card design
   ════════════════════════════════════════════════ */

.modal[aria-labelledby="StripeForm"] .modal-dialog {
  max-width: 460px !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  min-height: 100vh !important;
  padding: 20px !important;
}

.modal[aria-labelledby="StripeForm"] .modal-content {
  border: none !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow:
    0 32px 80px rgba(99,102,241,.18),
    0 8px 24px rgba(0,0,0,.10) !important;
}

/* ════════════
   CARD ZONE — bright airy gradient card header
   ════════════ */
.modal[aria-labelledby="StripeForm"] .modal-body {
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(140deg, #e0f2fe 0%, #c7d2fe 45%, #ddd6fe 100%) !important;
}

/* Bright radial glow — top right */
.modal[aria-labelledby="StripeForm"] .modal-body::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: -60px !important;
  right: -60px !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,255,255,.0) 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Soft circle — bottom left */
.modal[aria-labelledby="StripeForm"] .modal-body::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: -20px !important;
  left: -40px !important;
  width: 160px !important;
  height: 160px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.28) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Close button — frosted glass on light card ── */
.modal[aria-labelledby="StripeForm"] .modal-body > a.btn-black,
.modal[aria-labelledby="StripeForm"] .modal-body > a.btn-circle {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.65) !important;
  color: #4338ca !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(99,102,241,.15) !important;
  transition: background .15s, color .15s !important;
  z-index: 10 !important;
}

.modal[aria-labelledby="StripeForm"] .modal-body > a.btn-black i,
.modal[aria-labelledby="StripeForm"] .modal-body > a.btn-circle i {
  font-size: 14px !important;
  color: inherit !important;
  line-height: 1 !important;
}

.modal[aria-labelledby="StripeForm"] .modal-body > a.btn-black:hover,
.modal[aria-labelledby="StripeForm"] .modal-body > a.btn-circle:hover {
  background: rgba(255,255,255,.9) !important;
  color: #e12114 !important;
}

/* ── h4 — dark indigo title + golden chip ── */
.modal[aria-labelledby="StripeForm"] .modal-body > h4 {
  font-family: var(--font-display) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #1e1b4b !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
  padding: 24px 22px 0 !important;
  line-height: 1.25 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Golden EMV chip */
.modal[aria-labelledby="StripeForm"] .modal-body > h4::before {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 30px !important;
  border-radius: 6px !important;
  background: linear-gradient(145deg, #fde68a 0%, #f59e0b 45%, #d97706 100%) !important;
  margin-bottom: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.2),
    inset 9px 0 0 rgba(0,0,0,.09),
    inset 18px 0 0 rgba(255,255,255,.14),
    inset 27px 0 0 rgba(0,0,0,.09),
    0 2px 8px rgba(217,119,6,.35) !important;
}

/* Overlapping circles — card brand (top-right) */
.modal[aria-labelledby="StripeForm"] .modal-body > h4::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 24px !important;
  right: 56px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(225,33,20,.55) !important;
  box-shadow: 20px 0 0 rgba(251,146,60,.5) !important;
}

/* ── Subtitle — dark navy, muted ── */
.modal[aria-labelledby="StripeForm"] .modal-body > p:first-of-type {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(30,27,75,.55) !important;
  margin: 0 !important;
  padding: 5px 22px 0 !important;
  position: relative !important;
  z-index: 1 !important;
  line-height: 1.5 !important;
}

/* Card number dots row */
.modal[aria-labelledby="StripeForm"] .modal-body > p:first-of-type::after {
  content: '•••• •••• •••• ••••' !important;
  display: block !important;
  font-family: 'Courier New', monospace !important;
  font-size: 15px !important;
  letter-spacing: .24em !important;
  color: rgba(30,27,75,.22) !important;
  margin-top: 14px !important;
  margin-bottom: 28px !important;
}

/* ════════════
   FORM ZONE — crisp white pill rises from light card
   ════════════ */
.modal[aria-labelledby="StripeForm"] .position-relative {
  background: #fff !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 26px 22px 6px !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow: 0 -10px 30px rgba(99,102,241,.12) !important;
}

/* Field label */
.modal[aria-labelledby="StripeForm"] .form-label-group {
  position: relative !important;
  margin-bottom: 14px !important;
}

.modal[aria-labelledby="StripeForm"] .form-label-group label,
.modal[aria-labelledby="StripeForm"] .form-label-group > label,
.modal[aria-labelledby="StripeForm"] label[for="cardholder_name"] {
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  pointer-events: none !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 16px !important;
  right: auto !important;
  width: auto !important;
  max-width: calc(100% - 32px) !important;
  min-height: 0 !important;
  height: auto !important;
  transform: translateY(-50%) !important;
  transition: top .15s ease, font-size .15s ease, color .15s ease, transform .15s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-indent: 0 !important;
  z-index: 1 !important;
}

.modal[aria-labelledby="StripeForm"] .form-label-group input:not(:placeholder-shown) ~ label,
.modal[aria-labelledby="StripeForm"] .form-label-group input:focus ~ label,
.modal[aria-labelledby="StripeForm"] .form-label-group > label {
  left: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
}

/* Cardholder name input */
.modal[aria-labelledby="StripeForm"] .form-label-group input.form-control,
.modal[aria-labelledby="StripeForm"] .form-label-group input.form-control-text,
.modal[aria-labelledby="StripeForm"] input {
  height: 58px !important;
  border-radius: 12px !important;
  border: 1.5px solid #e5e7eb !important;
  background: #fafbfc !important;
  font-family: var(--font-display) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  padding: 24px 16px 8px !important;
  text-align: left !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}

.modal[aria-labelledby="StripeForm"] .form-label-group input:focus {
  border-color: #6366f1 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.10) !important;
  outline: none !important;
}

.modal[aria-labelledby="StripeForm"] .form-label-group input:not(:placeholder-shown) ~ label,
.modal[aria-labelledby="StripeForm"] .form-label-group input:focus ~ label {
  top: 12px !important;
  transform: translateY(0) !important;
  font-size: 9.5px !important;
  color: #6366f1 !important;
}

/* Stripe card element */
.modal[aria-labelledby="StripeForm"] #card-element {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #fafbfc !important;
  padding: 17px 14px !important;
  margin-bottom: 14px !important;
  min-height: 54px !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}

.modal[aria-labelledby="StripeForm"] #card-element.StripeElement--focus {
  border-color: #6366f1 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.10) !important;
}

.modal[aria-labelledby="StripeForm"] #card-element.StripeElement--invalid {
  border-color: #dc2626 !important;
  background: #fff9f9 !important;
}

/* Agreement text */
.modal[aria-labelledby="StripeForm"] .position-relative > p {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  color: #9ca3af !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  background: #f8f9fb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
}

/* Error alert */
.modal[aria-labelledby="StripeForm"] .alert-warning {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: 8px !important;
  color: #92400e !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  margin: 10px 22px 0 !important;
}

/* Loading overlay */
.modal[aria-labelledby="StripeForm"] .loading.mt-5 {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.88) !important;
  z-index: 5 !important;
  border-radius: 20px !important;
}

/* Footer */
.modal[aria-labelledby="StripeForm"] .modal-footer {
  padding: 16px 22px 22px !important;
  border-top: 1px solid #f3f4f6 !important;
  background: transparent !important;
  display: block !important;
}

/* Security trust badge */
.modal[aria-labelledby="StripeForm"] .modal-footer::before {
  content: '\f20a\00a0\00a0Secured by Stripe \00b7 SSL encrypted';
  font-family: 'Material-Design-Iconic-Font', var(--font-display), sans-serif;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  letter-spacing: .02em;
  margin-bottom: 10px;
  opacity: .75;
}

/* Submit button — rich indigo gradient with red CTA */
.modal[aria-labelledby="StripeForm"] .modal-footer .btn-green {
  width: 100% !important;
  height: 50px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #e12114 0%, #c91e12 100%) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 4px 18px rgba(225,33,20,.30) !important;
  padding: 0 !important;
  transition: box-shadow .15s ease, opacity .15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.modal[aria-labelledby="StripeForm"] .modal-footer .btn-green::before { display: none !important; }

.modal[aria-labelledby="StripeForm"] .modal-footer .btn-green:hover:not(:disabled) {
  box-shadow: 0 8px 24px rgba(225,33,20,.38) !important;
  opacity: .94 !important;
}

.modal[aria-labelledby="StripeForm"] .modal-footer .btn-green:disabled {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

@media (max-width: 520px) {
  .modal[aria-labelledby="StripeForm"] .modal-dialog {
    max-width: 100% !important;
    padding: 12px !important;
  }
  .modal[aria-labelledby="StripeForm"] .modal-content { border-radius: 20px !important; }
  .modal[aria-labelledby="StripeForm"] .position-relative { padding: 22px 18px 6px !important; }
  .modal[aria-labelledby="StripeForm"] .alert-warning { margin: 10px 18px 0 !important; }
  .modal[aria-labelledby="StripeForm"] .modal-footer { padding: 14px 18px 18px !important; }
}

/* ============================================================
   Address Autocomplete Suggestions — Professional Dropdown
   Targets: Vue .search-geocomplete-results, Google .pac-container,
            Element Plus .el-autocomplete-suggestion
   ============================================================ */

/* Vue custom suggestions list */
#vue-home-search .search-geocomplete-results,
.auto-complete .search-geocomplete-results,
.search-geocomplete-results {
  background: #ffffff !important;
  border: 1px solid #eef0f4 !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .04) !important;
  padding: 8px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  max-height: 360px !important;
  overflow-y: auto !important;
}

.search-geocomplete-results a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 14px 12px 44px !important;
  border-radius: 10px !important;
  font-family: var(--font-display, 'Open Sans', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  line-height: 1.45 !important;
  background-color: transparent !important;
  background-image: none !important;
  position: relative !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease, transform .12s ease !important;
  border: none !important;
  margin: 2px 0 !important;
}

.search-geocomplete-results a::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  background: rgba(225, 33, 20, .10) !important;
  display: block !important;
}

.search-geocomplete-results a::after {
  content: "" !important;
  position: absolute !important;
  left: 17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  background-color: #e12114 !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") no-repeat center/contain !important;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") no-repeat center/contain !important;
}

.search-geocomplete-results a:hover,
.search-geocomplete-results a:focus,
.search-geocomplete-results a.active {
  background-color: #fff3f1 !important;
  color: #111827 !important;
  transform: none !important;
}

/* Custom scrollbar */
.search-geocomplete-results::-webkit-scrollbar { width: 6px !important; }
.search-geocomplete-results::-webkit-scrollbar-thumb {
  background: #e5e7eb !important;
  border-radius: 999px !important;
}
.search-geocomplete-results::-webkit-scrollbar-track { background: transparent !important; }

/* ── Google Places Autocomplete (.pac-container) ── */
.pac-container {
  background: #ffffff !important;
  border: 1px solid #eef0f4 !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .04) !important;
  padding: 8px !important;
  margin-top: 8px !important;
  font-family: var(--font-display, 'Open Sans', sans-serif) !important;
  overflow: hidden !important;
}

.pac-container:after { display: none !important; }

.pac-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  color: #1f2937 !important;
  cursor: pointer !important;
  margin: 2px 0 !important;
  transition: background-color .15s ease !important;
  line-height: 1.45 !important;
}

.pac-item:hover,
.pac-item-selected,
.pac-item.pac-item-selected {
  background-color: #fff3f1 !important;
}

.pac-icon,
.pac-icon-marker {
  background-image: none !important;
  background: rgba(225, 33, 20, .10) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  margin-top: 0 !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.pac-icon::after,
.pac-icon-marker::after {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  background-color: #e12114 !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") no-repeat center/contain !important;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") no-repeat center/contain !important;
}

.pac-item-query {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  padding-right: 4px !important;
}

.pac-matched {
  font-weight: 700 !important;
  color: #e12114 !important;
}

.pac-item span:not(.pac-item-query):not(.pac-icon) {
  font-size: 12.5px !important;
  color: #6b7280 !important;
}

.pac-logo:after {
  margin: 6px 12px 4px !important;
  opacity: .55 !important;
}

/* ── Element Plus autocomplete suggestion list ── */
.el-autocomplete__popper.el-popper,
.el-autocomplete-suggestion.el-popper {
  background: #ffffff !important;
  border: 1px solid #eef0f4 !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .04) !important;
  padding: 6px !important;
  margin-top: 6px !important;
}

.el-autocomplete-suggestion__wrap {
  padding: 0 !important;
  border: none !important;
  max-height: 360px !important;
}

.el-autocomplete-suggestion__list {
  padding: 0 !important;
  margin: 0 !important;
}

.el-autocomplete-suggestion__list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px 10px 40px !important;
  margin: 2px 0 !important;
  border-radius: 10px !important;
  font-family: var(--font-display, 'Open Sans', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  word-break: break-word !important;
  position: relative !important;
  cursor: pointer !important;
  transition: background-color .15s ease !important;
  border: none !important;
}

.el-autocomplete-suggestion__list li::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  background: rgba(225, 33, 20, .10) !important;
}

.el-autocomplete-suggestion__list li::after {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  background-color: #e12114 !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") no-repeat center/contain !important;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") no-repeat center/contain !important;
}

.el-autocomplete-suggestion__list li:hover,
.el-autocomplete-suggestion__list li.highlighted,
.el-autocomplete-suggestion__list li.hover {
  background-color: #fff3f1 !important;
  color: #111827 !important;
}

/* ── Move bottom-right notifications away from the sticky Place Order button on checkout ── */
body.ck-page .el-notification.right { bottom: auto !important; top: 88px !important; }


/* ═══════════════════════════════════════════════════════════
   ACCOUNT / COLUMN-2 REDESIGN
   ═══════════════════════════════════════════════════════════ */

/* ── Sidebar shell ── */
#sidebar {
  background: #fff !important;
  border: none !important;
  border-right: 1px solid #f0f2f5 !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.06) !important;
  width: 260px !important;
  padding: 24px 16px 32px !important;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

/* ── Logo ── */
.sb-logo-wrap {
  margin-bottom: 28px;
  padding: 0 4px;
}

/* ── User card ── */
.sb-user-card {
  background: linear-gradient(135deg, #f0f2f8, #e8edf8);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 20px 16px 16px;
  text-align: center;
  margin-bottom: 20px;
}
.sb-avatar-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #3ecf8e, #0f3460);
  margin: 0 auto 12px;
  position: relative;
  box-shadow: 0 6px 20px rgba(62,207,142,0.25);
}
.sb-avatar-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid #fff;
  object-fit: cover;
  display: block;
}
.sb-online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border-radius: 50%;
  border: 2.5px solid #fff;
}
.sb-user-name {
  font-size: 14px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0 0 6px;
  letter-spacing: -0.2px;
}
.sb-user-contact {
  font-size: 11px;
  color: #868e96;
  margin: 0;
  line-height: 1.8;
  word-break: break-all;
}

/* ── Nav wrapper ── */
.sb-nav-wrap { flex: 1; }

/* ── Sidebar nav items ── */
ul.siderbar-menu {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}
ul.siderbar-menu li {
  list-style: none !important;
}
ul.siderbar-menu li a {
  display: flex !important;
  align-items: center;
  gap: 11px;
  padding: 11px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  border-radius: 12px;
  text-indent: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
ul.siderbar-menu li a::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.45;
  transition: opacity 0.2s;
}
ul.siderbar-menu .account   a::before { background-image: url('../images/account.png'); }
ul.siderbar-menu .orders    a::before { background-image: url('../images/orders-icon.png'); }
ul.siderbar-menu .addresses a::before { background-image: url('../images/location.png'); }
ul.siderbar-menu .bookings  a::before { background-image: url('../images/reserved-table.png'); }
ul.siderbar-menu .payments  a::before { background-image: url('../images/payments-icon.png'); }
ul.siderbar-menu .favourites a::before { background-image: url('../images/favorites-icon.png'); }
ul.siderbar-menu .gift      a::before { background-image: url('../images/gift.png'); }
ul.siderbar-menu .wallet    a::before { background-image: url('../images/wallet-2.png'); }
ul.siderbar-menu .livechat  a::before { background-image: url('../images/live-chat2.png'); }
ul.siderbar-menu .logout    a::before { background-image: url('../images/log-out.png'); }

ul.siderbar-menu li a:hover {
  background-color: #f4f6f9 !important;
  color: #1a1a2e !important;
}
ul.siderbar-menu li a:hover::before { opacity: 0.7; }

ul.siderbar-menu li.active > a {
  background-color: var(--brand-light) !important;
  color: var(--brand) !important;
}
ul.siderbar-menu li.active > a::before { opacity: 1; }

/* logout item accent */
ul.siderbar-menu .logout a {
  color: #ef4444 !important;
}
ul.siderbar-menu .logout a:hover {
  background-color: rgba(239,68,68,0.08) !important;
  color: #dc2626 !important;
}

/* ── Main container adjustment ── */
.ac-page-container {
  padding: 32px 36px !important;
  max-width: 1100px;
}

/* ── Page header ── */
.ac-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f2f5;
}
.ac-page-header-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.ac-page-title {
  font-size: 18px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0 0 2px;
  letter-spacing: -0.3px;
}
.ac-page-subtitle {
  font-size: 12px;
  color: #868e96;
  margin: 0;
}

/* ── Content card ── */
.ac-content-card {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

/* ── Two-col layout inside card ── */
.ac-two-col {
  display: flex;
  min-height: 480px;
}
.ac-left-col {
  width: 220px;
  min-width: 220px;
  border-right: 1px solid #f0f2f5;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #fafbfc;
}
.ac-right-col {
  flex: 1;
  padding: 28px 32px;
  min-width: 0;
}

/* ── Left col: avatar ── */
.ac-avatar-section {
  display: flex;
  justify-content: center;
}
.ac-profile-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* override the profile photo widget styles */
#vue-profile-photo {
  display: flex;
  justify-content: center;
}
#vue-profile-photo .el-image {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}
.layer-black.rounded-circle.img-120 {
  width: 90px !important;
  height: 90px !important;
}
.update-photo .d-flex.rounded-circle.img-120 {
  width: 90px !important;
  height: 90px !important;
}

/* ── Left col: sub-menu ── */
.ac-submenu-wrap { width: 100%; }

ul.sub-menu {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}
ul.sub-menu li {
  list-style: none !important;
}
ul.sub-menu li a {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 10px 13px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  border-radius: 10px !important;
  background: transparent !important;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
ul.sub-menu li a:hover {
  background: #f0f2f5 !important;
  color: #1a1a2e !important;
}
ul.sub-menu li.active > a {
  background: #3ecf8e !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(62,207,142,0.30);
}
ul.sub-menu li.active > a:hover {
  background: #28a570 !important;
  color: #fff !important;
}
ul.sub-menu li i {
  font-size: 15px;
  margin: 0;
  flex-shrink: 0;
}

/* ── Form card (right col) ── */
.ac-form-card {
  max-width: 580px;
}
.ac-form-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f5;
}
.ac-form-title {
  font-size: 16px;
  font-weight: 800;
  color: #1a1a2e;
  margin: 0 0 4px;
}
.ac-form-subtitle {
  font-size: 12px;
  color: #868e96;
  margin: 0;
}

/* ── Form controls ── */
.ac-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.ac-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.ac-form-row .ac-form-group {
  margin-bottom: 0;
}
.ac-label {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  letter-spacing: 0.2px;
}
.ac-label.required::after {
  content: ' *';
  color: var(--brand);
}
.ac-input {
  width: 100%;
  height: 46px;
  border: 1.5px solid #e8eaed;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a2e;
  background: #fafbfc;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
}
.ac-input:focus {
  border-color: #3ecf8e;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(62,207,142,0.12);
}
.ac-input::placeholder {
  color: #adb5bd;
}
.ac-field-error {
  font-size: 11px;
  color: #ef4444;
  margin-top: 4px;
  display: block;
}

/* ── Alerts ── */
.ac-alert {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 12px;
  margin-bottom: 16px;
}
.ac-alert-warning {
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #b45309;
}
.ac-alert-success {
  background: #f0fdf8;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

/* ── Submit button ── */
.ac-submit-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #c0392b 0%, #e12114 60%, #e8341f 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  margin-top: 8px;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 16px rgba(193,33,20,0.25);
}
.ac-submit-btn:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(193,33,20,0.35);
}
.ac-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Manage Account sections ── */
.ac-manage-section {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
}
.ac-manage-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.ac-manage-body { flex: 1; }
.ac-manage-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 6px;
}
.ac-manage-text {
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 12px;
  line-height: 1.6;
}
.ac-manage-divider {
  height: 1px;
  background: #f0f2f5;
  margin: 4px 0;
}
.ac-action-link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #3ecf8e;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s;
}
.ac-action-link:hover {
  border-color: #3ecf8e;
  text-decoration: none;
  color: #28a570;
}
.ac-action-link.ac-action-danger {
  color: #ef4444;
}
.ac-action-link.ac-action-danger:hover {
  border-color: #ef4444;
  color: #dc2626;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .ac-page-container {
    padding: 16px !important;
  }
  .ac-content-card {
    border-radius: 14px;
  }
  .ac-two-col {
    flex-direction: column;
  }
  .ac-right-col {
    padding: 20px 16px;
  }
  .ac-form-row {
    grid-template-columns: 1fr;
  }
}

/* ── component-phone inside account form — match .ac-input ── */
.ac-form-card .ac-form-group > div:has(> .inputs-with-dropdown) {
  height: 46px !important;
  min-height: 46px !important;
  display: block !important;
}
.ac-form-card .ac-form-group > div > .inputs-with-dropdown,
.ac-form-card .inputs-with-dropdown {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  border: 1.5px solid #e8eaed !important;
  border-radius: 12px !important;
  background: #fafbfc !important;
  overflow: hidden !important;
  padding-left: 0 !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
  box-shadow: none !important;
}
.ac-form-card .inputs-with-dropdown:focus-within {
  border-color: #3ecf8e !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(62,207,142,0.12) !important;
}
.ac-form-card .inputs-with-dropdown .dropdown {
  flex-shrink: 0 !important;
  position: static !important;
}
.ac-form-card .inputs-with-dropdown .dropdown-toggle {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 10px !important;
  cursor: pointer !important;
  border-right: 1px solid #e8eaed !important;
}
.ac-form-card .inputs-with-dropdown .dropdown-toggle img {
  width: 20px !important;
  height: 14px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  display: block !important;
}
.ac-form-card .inputs-with-dropdown .dropdown-toggle::after {
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  border-top: 4px solid #9ca3af !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  border-bottom: 0 !important;
  content: '' !important;
}
.ac-form-card .inputs-with-dropdown .mr-0.ml-1 {
  flex-shrink: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  padding: 0 4px 0 8px !important;
  white-space: nowrap !important;
}
.ac-form-card .inputs-with-dropdown input,
.ac-form-card .inputs-with-dropdown input[type="text"] {
  flex: 1 !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a1a2e !important;
  background: transparent !important;
}
.ac-form-card .inputs-with-dropdown input:focus,
.ac-form-card .inputs-with-dropdown input[type="text"]:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.ac-form-card .inputs-with-dropdown button {
  min-height: 46px !important;
  max-height: 46px !important;
  height: 46px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RESTAURANT CARD — Premium Light prc-* system  (v3)
   White card · vibrant image top · bright body · brand-red hover glow
   Used by: feed_cuisine.php · template_restaurant_list · template_swiper_list
   ═══════════════════════════════════════════════════════════════════ */

/* ── Card container ─────────────────────────────────────────────── */
.prc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit !important;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(0,0,0,.06),
    0 6px 24px rgba(0,0,0,.07),
    0 0 0 1px rgba(0,0,0,.04);
  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.prc-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 6px rgba(0,0,0,.05),
    0 20px 52px rgba(225,33,20,.13),
    0 8px 20px rgba(0,0,0,.08),
    0 0 0 1.5px rgba(225,33,20,.12);
  text-decoration: none !important;
  color: inherit !important;
}
.prc-card--closed { opacity: .52; filter: saturate(.18); }

/* ── Image wrapper ──────────────────────────────────────────────── */
.prc-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #fdf2f0 0%, #fdf0ef 60%, #f2f0fd 100%);
}

/* ── Image ──────────────────────────────────────────────────────── */
.prc-img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.prc-card:hover .prc-img { transform: scale(1.07); }
.prc-img .el-image__inner {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}
.prc-img .el-image__error,
.prc-img .el-image__placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fdf2f0 0%, #fdf0ef 60%, #f2f0fd 100%);
  color: #e0c8c4; font-size: 36px;
}

.prc-img-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.prc-card:hover .prc-img-native { transform: scale(1.07); }

/* Subtle gradient scrim for pill readability */
.prc-img-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.42) 0%, transparent 52%);
}

/* ── Promo ribbon — edge-attached top-left ──────────────────────── */
.prc-promo-ribbon {
  position: absolute;
  top: 12px; left: 10px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  line-height: 1; text-transform: none;
  box-shadow: 0 4px 12px rgba(22,163,74,.35);
  white-space: nowrap;
  max-width: calc(100% - 52px);
  overflow: hidden; text-overflow: ellipsis;
}
.prc-promo-ribbon svg { flex-shrink: 0; }
.prc-promo-ribbon--amber {
  background: linear-gradient(90deg, #b45309, #f59e0b);
  box-shadow: 0 4px 14px rgba(245,158,11,.38);
}

/* Favourite button */
.prc-fav-btn {
  position: absolute; top: 10px; right: 10px; z-index: 5;
}

/* ── Closed overlays ────────────────────────────────────────────── */
.prc-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.prc-overlay--soft { background: rgba(255,255,255,.52); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.prc-overlay--dark { background: rgba(8,8,22,.46); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.prc-closed-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 6; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius-pill);
  background: rgba(8,8,22,.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.14); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap; max-width: 88%; letter-spacing: .01em;
}

/* ── Bottom pills on image ──────────────────────────────────────── */
.prc-pills {
  position: absolute; bottom: 10px; left: 10px; right: 10px;
  z-index: 4; display: flex; align-items: center; justify-content: space-between;
  gap: 6px; pointer-events: none;
}
.prc-time-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.55); box-shadow: 0 2px 8px rgba(0,0,0,.16);
  font-size: 11.5px; font-weight: 700; color: var(--dark); white-space: nowrap; line-height: 1;
}
.prc-time-pill svg { color: var(--brand); flex-shrink: 0; }

.prc-rate-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.55); box-shadow: 0 2px 8px rgba(0,0,0,.16);
  font-size: 12px; font-weight: 700; color: #92400e; line-height: 1;
}

/* ── Card body (white section below image) ──────────────────────── */
.prc-body {
  padding: 12px 14px 16px;
  display: flex; flex-direction: column; flex: 1; gap: 6px;
  background: #fff;
}

.prc-name {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 800; color: var(--dark);
  margin: 0; line-height: 1.25; letter-spacing: -.03em;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}

.prc-cuisine {
  font-size: 12px; color: var(--text-muted); margin: 0;
  font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prc-cuisine a { color: var(--text-muted) !important; text-decoration: none !important; }

/* Footer meta strip */
.prc-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-light);
}
.prc-distance {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 500; color: var(--text-muted);
}
.prc-distance svg { flex-shrink: 0; color: var(--brand); }
.prc-review-words {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; color: #92400e;
}

/* Delivery / min order meta row */
.prc-meta-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-light);
}
.prc-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; color: var(--text-muted);
}
.prc-meta-item svg { flex-shrink: 0; color: var(--brand); }
.prc-meta-item b { font-weight: 700; color: var(--text-default, #111); }

/* Offer chips */
.prc-offer-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.prc-offer-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: #15803d;
  background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.18);
  padding: 3px 9px; border-radius: var(--radius-pill);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.prc-offer-chip svg { color: #16a34a; flex-shrink: 0; }

/* ── Swiper slide reset ─────────────────────────────────────────── */
.prc-swiper-slide {
  min-height: unset !important; border: none !important;
  border-radius: 0 !important; background: transparent !important; cursor: pointer;
}
.swiperResto .prc-swiper-slide img,
.swiperResto .prc-swiper-slide .prc-img-native {
  min-height: unset !important; max-height: unset !important; border: none !important;
  border-radius: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
}

/* ── Skeleton ───────────────────────────────────────────────────── */
.prc-skeleton {
  height: 300px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%; animation: prc-shimmer 1.6s infinite;
}
@keyframes prc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Logo-only image state ──────────────────────────────────────── */
.prc-img-wrap--logo-bg {
  background: linear-gradient(135deg, #f6f4f2 0%, #ede9f4 50%, #eef3f6 100%);
}
.prc-img--contained .el-image__inner {
  object-fit: contain !important;
  padding: 18px;
  background: transparent;
}

/* ── Logo badge in card body ────────────────────────────────────── */
.prc-head-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.prc-logo-shell {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,.07);
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.prc-logo-thumb {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.prc-logo-thumb .el-image__inner {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #fff;
  padding: 5px;
  display: block;
}
.prc-logo-thumb .el-image__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f5f5, #ebebeb);
}
.prc-logo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f5f5, #ebebeb);
  color: #bbb;
}
.prc-title-col {
  flex: 1;
  min-width: 0;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) { .prc-img-wrap { aspect-ratio: 16 / 9; } }
@media (max-width: 480px) { .prc-img-wrap { aspect-ratio: 16 / 9; } }

/* ═══════════════════════════════════════════════════════════════
   CUISINE FEED CARD — xc-* system  (Premium v1)
   Logo medallion straddles the cover/body boundary
   ═══════════════════════════════════════════════════════════════ */

/* ── Card shell ─────────────────────────────────────────────── */
.xc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit !important;
  background: #fdfcfc;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 3px 12px rgba(0,0,0,.06),
    0 0 0 1px rgba(0,0,0,.035);
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .32s cubic-bezier(.22,1,.36,1);
}
.xc-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 2px 6px rgba(0,0,0,.05),
    0 20px 52px rgba(220,30,20,.16),
    0 8px 24px rgba(0,0,0,.10),
    0 0 0 1.5px rgba(220,30,20,.15);
  text-decoration: none !important;
  color: inherit !important;
}
.xc-card--closed .xc-cover {
  filter: brightness(.96) saturate(.18);
}
.xc-card--closed .xc-name,
.xc-card--closed .xc-tags-row,
.xc-card--closed .xc-infobar,
.xc-card--closed .xc-offers {
  opacity: .60;
}

/* ── Cover image shell ──────────────────────────────────────── */
.xc-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fef6f2 0%, #fdeee8 50%, #f5f0fc 100%);
}
.xc-cover-img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.xc-card:hover .xc-cover-img { transform: scale(1.08); }
.xc-cover-img .el-image__inner {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

/* Custom placeholder / error state — replaces the default gray circle */
.xc-cover-state {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background-color: #fdeee6;
  background-image: url("../images/cover-placeholder.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: saturate(0.12) brightness(1.15) opacity(0.75);
}
.xc-cover-state-icon { display: none; }
.xc-cover-state-icon svg { display: none; }

/* Bottom gradient scrim for pill readability */
.xc-cover-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.58) 0%,
    rgba(0,0,0,.18) 38%,
    transparent 68%
  );
}

/* ── Overlays ───────────────────────────────────────────────── */
.xc-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.xc-overlay--soft {
  background: rgba(255, 255, 255, 0.28);
}
.xc-overlay--dark {
  background: rgba(255, 255, 255, 0.22);
}

/* ── Status / closed badge ──────────────────────────────────── */
.xc-status-pill { display: none !important; }
.xc-status-pill-disabled {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 20px; border-radius: 999px;
  background: rgba(10,8,20,.82);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: 12px; font-weight: 700;
  white-space: nowrap; letter-spacing: .015em;
}

/* ── Promo tag ──────────────────────────────────────────────── */
.xc-promo-tag {
  position: absolute; top: 14px; left: 0; z-index: 5;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px 6px 11px; border-radius: 0 10px 10px 0;
  background: linear-gradient(135deg, #c0392b 0%, #e21914 100%);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(226,25,20,.40);
  white-space: nowrap;
}
.xc-promo-tag svg { flex-shrink: 0; }

/* ── Favourite button ───────────────────────────────────────── */
.xc-fav { position: absolute; top: 50px; right: 10px; z-index: 5; }

/* ── Name row + Open / Closed badge ─────────────────────────── */
.xc-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
  width: 100%;
}
.xc-meta-grid > .xc-name {
  grid-column: 1; grid-row: 1;
  margin: 0 !important;
  display: block !important;
  min-width: 0 !important; width: 100% !important;
  max-width: 100% !important;
  -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.xc-meta-grid > .xc-open-badge { grid-column: 2; grid-row: 1; justify-self: end; margin: 0 !important; }
.xc-meta-grid > .xc-tags { grid-column: 1; grid-row: 2; margin: 0 !important; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-meta-grid > .xc-rating-chip { grid-column: 2; grid-row: 2; justify-self: end; margin: 0 !important; padding: 0 !important; }
.xc-open-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.xc-open-badge--cover {
  position: absolute;
  top: 14px; right: 12px;
  z-index: 6;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.xc-open-badge .xc-open-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}
.xc-open-badge--open {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.xc-open-badge--open .xc-open-dot {
  background: #10b981;
  animation: xc-open-pulse 1.8s ease-in-out infinite;
}
.xc-open-badge--closed {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}
.xc-open-badge--closed .xc-open-dot { background: #ef4444; }

@keyframes xc-open-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  50%     { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

/* ── Cover bottom pills (time + rating) — RIGHT side only ────── */
/* Left side is reserved exclusively for the logo medallion       */
.xc-cover-pills {
  position: absolute; bottom: 12px; right: 12px;
  z-index: 5; display: flex; align-items: center; gap: 5px;
  pointer-events: none;
}
.xc-time-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 10px rgba(0,0,0,.20);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; color: #111;
  letter-spacing: .01em;
  white-space: nowrap; line-height: 1;
}
.xc-time-pill svg { color: #e21914; flex-shrink: 0; }
.xc-cover--gradient .xc-time-pill {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; box-shadow: none;
}
.xc-cover--gradient .xc-time-pill svg { color: #fca5a5; }
.xc-star-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 10px rgba(0,0,0,.20);
  font-size: 12px; font-weight: 700; color: #92400e; line-height: 1;
}
.xc-cover--gradient .xc-star-pill {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.28);
  color: #fde68a; box-shadow: none;
}

/* ── Card body ──────────────────────────────────────────────── */
.xc-body {
  position: relative;
  padding: 42px 13px 12px;
  display: flex; flex-direction: column; flex: 1; gap: 3px;
  background: linear-gradient(180deg, #fdfcfc 0%, #ffffff 40%);
  min-width: 0;
}

/* ── Logo medallion — straddles cover / body boundary ───────── */
.xc-logo {
  position: absolute;
  top: -32px;
  left: 13px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 3px solid #fff;
  box-shadow:
    0 6px 20px rgba(0,0,0,.24),
    0 2px 6px rgba(0,0,0,.14),
    0 0 0 1px rgba(0,0,0,.06);
  z-index: 10;
}
.xc-logo-img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border-radius: 50% !important;
  overflow: hidden !important;
}
.xc-logo-img .el-image__wrapper {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: block;
}
.xc-logo-img .el-image__inner {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #fff;
  padding: 0;
  display: block;
  border-radius: 50% !important;
}
.xc-logo-img .el-image__placeholder {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f5f5, #ebebeb);
}
.xc-logo-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f0f0f0, #e2e2e2);
  color: #999;
}
.xc-logo-fallback svg { width: 30px; height: 30px; }

/* ── Restaurant name ────────────────────────────────────────── */
.xc-name {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 800; color: #0f172a;
  margin: 0; line-height: 1.2; letter-spacing: -.025em;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}

/* ── Cuisine tags ────────────────────────────────────────────── */
.xc-tags {
  font-family: var(--font-sans);
  font-size: 11.5px; color: #94a3b8; margin: 0;
  font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .005em;
}
.xc-tags a { color: #94a3b8 !important; text-decoration: none !important; }

/* ── Rating row ──────────────────────────────────────────────── */
.xc-rating-row { display: flex; align-items: center; margin-top: 2px; }
.xc-tags-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
.xc-tags-row .xc-tags { margin: 0; min-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-tags-row .xc-rating-chip { justify-self: end; }
.xc-rating-chip {
  font-family: var(--font-sans);
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: #92400e;
  letter-spacing: .01em;
}
.xc-rating-chip svg { flex-shrink: 0; }
.xc-rating-chip b { font-weight: 700; color: #1e293b; }
.xc-rating-count { color: #64748b; font-weight: 500; }
.xc-rating-chip--new { color: #64748b; }

/* ── Unified info bar (distance · delivery fee · min order) ───── */
.xc-infobar {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: nowrap;
}
.xc-info-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  letter-spacing: .005em;
}
.xc-info-sep {
  flex-shrink: 0;
  color: #bbb;
  font-size: 15px;
  line-height: 1;
  user-select: none;
}
.xc-info-chip--dist { justify-content: center; }
.xc-info-chip--min  { justify-content: center; }
.xc-info-chip svg { flex-shrink: 0; width: 18px !important; height: 18px !important; stroke-width: 2.2 !important; }
.xc-info-chip--dist svg { color: #475569; }
.xc-info-chip--fee svg { color: #475569; }
.xc-info-chip--min svg { color: #475569; }
.xc-info-chip b { font-weight: 700; color: #1e293b; }

/* ── Offer strip — full-bleed bottom banner ──────────────────── */
.xc-offers {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
  margin-left: -13px;
  margin-right: -13px;
  margin-bottom: -12px;
  padding: 7px 13px;
  border-top: 1px solid rgba(22,163,74,.18);
  background: rgba(22,163,74,.06);
}
.xc-offer-chip {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; color: #15803d;
  letter-spacing: .02em;
  background: none; border: none; padding: 0; border-radius: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.xc-offer-chip svg { color: #16a34a; flex-shrink: 0; }

/* ── Skeleton ────────────────────────────────────────────────── */
.xc-skeleton-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
}
.xc-skeleton-cover {
  width: 100%; aspect-ratio: 16 / 7;
  background: linear-gradient(90deg, #efefef 25%, #e2e2e2 50%, #efefef 75%);
  background-size: 200% 100%;
  animation: xc-shimmer 1.5s infinite;
}
.xc-skeleton-body {
  padding: 42px 13px 12px;
  position: relative;
}
.xc-skeleton-logo {
  position: absolute; top: -30px; left: 13px;
  width: 63px; height: 63px; border-radius: 50%;
  background: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: xc-shimmer 1.5s infinite;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
@keyframes xc-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) { .xc-cover { aspect-ratio: 16 / 7; } .xc-logo { width: 56px; height: 56px; top: -28px; } .xc-body { padding: 36px 11px 10px; } .xc-skeleton-logo { width: 54px; height: 54px; top: -27px; } .xc-skeleton-body { padding: 36px 11px 10px; } }
@media (max-width: 480px) { .xc-cover { aspect-ratio: 16 / 7; } }

/* ═══════════════════════════════════════════════════════════════
   RESTAURANT CARD — Previous rc-* system (kept for compatibility)
   ═══════════════════════════════════════════════════════════════ */

/* ── Base card ─────────────────────────────────────────────── */
.rc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  box-shadow:
    0 1px 3px rgba(0,0,0,.06),
    0 4px 18px rgba(0,0,0,.07),
    0 0 0 1px rgba(0,0,0,.04);
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .32s cubic-bezier(.22,1,.36,1);
  text-decoration: none !important;
  color: inherit !important;
}
.rc-card:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow:
    0 4px 14px rgba(0,0,0,.09),
    0 20px 56px rgba(0,0,0,.15),
    0 0 0 1px rgba(0,0,0,.04);
  color: inherit !important;
  text-decoration: none !important;
}
.rc-card--closed {
  opacity: .58;
  filter: saturate(.22);
}

/* ── Swiper card variant ──────────────────────────────────── */
.rc-swiper-slide {
  min-height: unset !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.rc-card--swiper {
  min-height: unset;
}

/* ── Image shell ──────────────────────────────────────────── */
.rc-img-shell {
  position: relative;
  overflow: hidden;
  height: 200px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fef2f0 0%, #fdf0ef 60%, #f0f0fd 100%);
}

.rc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.rc-card:hover .rc-img { transform: scale(1.07); }
.rc-img .el-image__inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rc-img .el-image__error,
.rc-img .el-image__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fef2f0 0%, #fdf0ef 60%, #f0f0fd 100%);
  color: #e0c8c4;
  font-size: 30px;
}

.rc-img-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.rc-card:hover .rc-img-native { transform: scale(1.07); }

/* Bottom gradient fade */
.rc-img-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.60) 0%,
    rgba(0,0,0,.20) 42%,
    transparent 68%
  );
  z-index: 2;
  pointer-events: none;
}

/* ── Status overlays ──────────────────────────────────────── */
.rc-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.rc-overlay--soft  { background: rgba(255,255,255,.52); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.rc-overlay--dark  { background: rgba(8,8,22,.46); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Closed / status badge — centred inside image */
.rc-status {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: rgba(10,10,26,.84);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 88%;
  letter-spacing: .01em;
  text-align: center;
}

/* ── Promo ribbon — top-left ──────────────────────────────── */
.rc-ribbon {
  position: absolute;
  top: 12px; left: 0;
  z-index: 5;
  background: linear-gradient(90deg, #15803d, #22c55e);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 12px 5px 10px;
  border-radius: 0 7px 7px 0;
  box-shadow: 0 3px 10px rgba(22,163,74,.38);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-ribbon--offer {
  background: linear-gradient(90deg, #d97706, #f59e0b);
  box-shadow: 0 3px 10px rgba(245,158,11,.36);
}

/* ── Bottom pills row ─────────────────────────────────────── */
.rc-pills {
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}

.rc-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -.01em;
  white-space: nowrap;
  line-height: 1;
}
.rc-time-pill svg { color: var(--text-muted); flex-shrink: 0; }

.rc-rate-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  letter-spacing: -.01em;
  line-height: 1;
}

/* ── Card body ────────────────────────────────────────────── */
.rc-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

.rc-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -.025em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.rc-cuisine {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta strip */
.rc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.rc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.rc-meta-item svg { flex-shrink: 0; }
.rc-meta-sep {
  font-size: 11px;
  color: var(--border);
  line-height: 1;
}

/* Offer pills */
.rc-offers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.rc-offer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #15803d;
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.18);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.rc-offer svg { color: #16a34a; flex-shrink: 0; }
.rc-offer--promo {
  color: #92400e;
  background: rgba(245,158,11,.09);
  border-color: rgba(245,158,11,.22);
}
.rc-offer--promo svg { color: #d97706; }

/* ── Skeleton ─────────────────────────────────────────────── */
.rc-skeleton {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
}

/* Favourite button shell (cuisine feed page) */
.rc-fav-shell {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 5;
}

/* ── Override legacy style.css rules for swiper slides ────── */
.swiperResto .rc-swiper-slide,
.swiperResto .rc-swiper-slide img,
.swiperResto .rc-swiper-slide .rc-img-native {
  min-height: unset !important;
  max-height: unset !important;
  border: none !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 576px) {
  .rc-img-shell { height: 180px; }
  .rc-name { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════
   FILTER SIDEBAR — Premium v2
   ══════════════════════════════════════════════════════════ */

/* ── Panel shell ─────────────────────────────────────────── */
.sf-panel {
  background: #fff;
  border-radius: 20px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 8px 32px rgba(0,0,0,.10),
    0 0 0 1px rgba(0,0,0,.05);
  overflow: hidden;
  position: sticky;
  top: 20px;
}

/* Red accent bar at the very top */
.sf-panel::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #e12114 0%, #ff6b6b 60%, #ff9a4d 100%);
}

/* ── Panel header ────────────────────────────────────────── */
.sf-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 13px;
  border-bottom: 1px solid #f0f4f8;
  background: #fff;
}
.sf-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.025em;
  flex: 1;
}
.sf-panel-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e12114 0%, #c01b10 100%);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(225,33,20,.35);
}
.sf-store-count {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid #e2e8f0;
}
.sf-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #e12114;
  background: #fff5f5;
  border: 1.5px solid #fecaca;
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
  letter-spacing: .01em;
}
.sf-clear-btn:hover {
  background: #e12114;
  color: #fff;
  border-color: #e12114;
  box-shadow: 0 2px 8px rgba(225,33,20,.3);
}

/* ── Sections container ──────────────────────────────────── */
.sf-sections { padding: 6px 0 10px; }

/* ── Single section ──────────────────────────────────────── */
.sf-section { border-bottom: 1px solid #f0f4f8; }
.sf-section--last { border-bottom: none; }

/* ── Section header / collapse toggle ───────────────────── */
.sf-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  text-decoration: none !important;
  color: #1e293b !important;
  cursor: pointer;
  transition: background .15s ease;
  position: relative;
}
.sf-section-head:hover { background: #fafbfc; }
.sf-section-head:not(.collapsed) {
  background: linear-gradient(90deg, rgba(225,33,20,.04) 0%, transparent 100%);
}
.sf-section-head:not(.collapsed)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #e12114;
}
.sf-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #f1f5f9;
  flex-shrink: 0;
  color: #94a3b8;
  transition: all .2s ease;
}
.sf-section-head:not(.collapsed) .sf-section-icon {
  background: linear-gradient(135deg, #e12114 0%, #c01b10 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(225,33,20,.3);
}
.sf-section-label {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #334155;
}
.sf-section-head:not(.collapsed) .sf-section-label { color: #0f172a; }
.sf-chevron {
  color: #cbd5e1;
  flex-shrink: 0;
  transition: transform .28s cubic-bezier(.22,1,.36,1), color .15s ease;
}
.sf-section-head:not(.collapsed) .sf-chevron { transform: rotate(180deg); color: #e12114; }

/* ── Section body ────────────────────────────────────────── */
.sf-section-body { padding: 4px 16px 14px; }

/* ── Sort — pill-row radio items ─────────────────────────── */
.sf-sort-list { display: flex; flex-direction: column; gap: 3px; }
.sf-radio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .18s ease;
}
.sf-radio-item:hover { background: #f8fafc; border-color: #e2e8f0; }
.sf-radio-input { display: none !important; }
.sf-radio-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  flex-shrink: 0;
  position: relative;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e12114, #ff4d4d);
  opacity: 0;
  transform: scale(0);
  transition: opacity .15s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.sf-radio-input:checked ~ .sf-radio-dot { border-color: #e12114; box-shadow: 0 0 0 3px rgba(225,33,20,.12); }
.sf-radio-input:checked ~ .sf-radio-dot::after { opacity: 1; transform: scale(1); }
.sf-radio-label { font-size: 12.5px; color: #475569; font-weight: 500; }
.sf-radio-item:has(.sf-radio-input:checked) {
  background: linear-gradient(90deg, #fff5f5, #fff);
  border-color: #fecaca;
}
.sf-radio-input:checked ~ .sf-radio-dot ~ .sf-radio-label { color: #e12114; font-weight: 700; }

/* ── Price range — segmented pill group ─────────────────── */
.sf-price-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 2px 0;
  background: #f8fafc;
  border-radius: 12px;
  padding: 5px;
  border: 1px solid #e2e8f0;
}
.sf-price-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 4px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all .18s ease;
  letter-spacing: .01em;
}
.sf-price-btn input { display: none !important; }
.sf-price-btn:hover { background: #fff; color: #334155; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.sf-price-btn--active {
  background: linear-gradient(135deg, #e12114, #c01b10) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(225,33,20,.35) !important;
  border-radius: 8px !important;
}

/* ── Cuisines — 2-col chip checkboxes ───────────────────── */
.sf-check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sf-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 10px;
  cursor: pointer;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  transition: all .18s ease;
}
.sf-check-item:hover { background: #fff5f5; border-color: #fecaca; }
.sf-check-input { display: none !important; }
.sf-check-box {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 2px solid #cbd5e1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all .18s ease;
  color: transparent;
}
.sf-check-box svg { opacity: 0; transform: scale(.5); transition: all .2s cubic-bezier(.34,1.56,.64,1); }
.sf-check-input:checked ~ .sf-check-box {
  background: linear-gradient(135deg, #e12114, #c01b10);
  border-color: #e12114;
  color: #fff;
  box-shadow: 0 2px 6px rgba(225,33,20,.3);
}
.sf-check-input:checked ~ .sf-check-box svg { opacity: 1; transform: scale(1); }
.sf-check-label {
  font-size: 11.5px;
  color: #475569;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-check-item:has(.sf-check-input:checked) {
  background: #fff5f5;
  border-color: #fca5a5;
}
.sf-check-input:checked ~ .sf-check-box ~ .sf-check-label { color: #e12114; font-weight: 700; }

/* ── Show more link ──────────────────────────────────────── */
.sf-show-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #e12114;
  text-decoration: none !important;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff5f5;
  border: 1px solid #fecaca;
  transition: all .18s ease;
}
.sf-show-more:hover { background: #e12114; color: #fff; border-color: #e12114; }
.sf-show-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.sf-show-more svg { transition: transform .25s ease; flex-shrink: 0; }

/* ── Range slider ────────────────────────────────────────── */
.sf-range-wrap { padding-top: 4px; }
.sf-range-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.sf-range-labels > span:first-child { font-size: 12px; color: #94a3b8; font-weight: 600; }
.sf-range-value {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #e12114, #c01b10);
  padding: 3px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(225,33,20,.3);
}
.sf-range-track {
  position: relative;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  margin-bottom: 6px;
}
.sf-range-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  outline: none;
  cursor: pointer;
  accent-color: #e12114;
}
.sf-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #e12114;
  box-shadow: 0 3px 10px rgba(225,33,20,.35), 0 1px 3px rgba(0,0,0,.1);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sf-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 16px rgba(225,33,20,.5);
}
.sf-range-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #e12114;
  box-shadow: 0 3px 10px rgba(225,33,20,.35);
  cursor: pointer;
}
.sf-range-minmax {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #cbd5e1;
  margin-top: 4px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ── Ratings ─────────────────────────────────────────────── */
.sf-ratings-wrap { padding-top: 4px; }
.sf-ratings-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.sf-ratings-label > span:first-child { font-size: 12px; color: #94a3b8; font-weight: 600; }
.sf-ratings-value {
  font-size: 12.5px;
  font-weight: 800;
  color: #92400e;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid #fcd34d;
}

/* ══════════════════════════════════════════════════════════
   DELIVERY ZONE STRIP — clean light redesign
   ══════════════════════════════════════════════════════════ */
.fdz-section {
  position: relative;
  margin-top: 64px;
  padding: 56px 40px 52px;
  text-align: center;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  /* break out of parent container padding to go full viewport width */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Decorative vertical red stripes */
.fdz-stripe {
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, #e12114 30%, #e12114 70%, transparent);
  opacity: .18;
}
.fdz-stripe--l { left: 48px; }
.fdz-stripe--r { right: 48px; }

/* Pulsing location pin */
.fdz-pin-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.fdz-pin-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(225,33,20,.25);
  animation: fdz-pulse 2.4s ease-out infinite;
}
.fdz-pin-ring          { width: 56px; height: 56px; }
.fdz-pin-ring--2       { width: 80px; height: 80px; animation-delay: .8s; }
@keyframes fdz-pulse {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.1); opacity: 0; }
}
.fdz-pin-dot {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e12114, #c01b10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow:
    0 4px 16px rgba(225,33,20,.35),
    0 1px 4px rgba(0,0,0,.12);
}

/* Label above address */
.fdz-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e12114;
  margin: 0 0 10px;
}

/* Address */
.fdz-address {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.04em;
  line-height: 1.2;
  margin: 0 auto 28px;
  max-width: 600px;
}

/* Chip row */
.fdz-chips {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.fdz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: all .18s ease;
}
.fdz-chip:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}
.fdz-chip--red {
  color: #e12114;
  background: #fff5f5;
  border-color: #fecaca;
}
.fdz-chip--red:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

@media (max-width: 768px) {
  .fdz-section { padding: 40px 20px 36px; }
  .fdz-stripe { display: none; }
}

/* ──────────────────────────────────────────────────────────
   Restaurants page — hide Delivery + Address pills in nav
   Targets the .widget-nav-pills wrapper added around the
   two visible pill components in widget-nav.php
   ────────────────────────────────────────────────────────── */
#vue-widget-nav.page-restaurants .widget-nav-pills {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────
   Favourite button — body-area variant (restaurants feed)
   Fully inside .xc-body (white area), right-aligned at the
   same height as the logo medallion top edge
   ────────────────────────────────────────────────────────── */
.xc-fav--body {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 10 !important;
}
.xc-fav--body .save-store-btn,
.xc-fav--body button,
.xc-fav--body .el-button {
  background: #f1f5f9 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
.xc-fav--body .save-store-btn:hover,
.xc-fav--body button:hover,
.xc-fav--body .el-button:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #e12114 !important;
}
.xc-fav--body .save-store-btn.active,
.xc-fav--body button.active,
.xc-fav--body .el-button.active,
.xc-fav--body [class*="active"] {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #e12114 !important;
}

/* ──────────────────────────────────────────────────────────
   Restaurants feed (with sidebar) — inline grid variant
   Reuses the cuisine `xc-card` design but lets the grid
   live inside the bootstrap col-lg-9 column without the
   page-level max-width / centered horizontal padding.
   ────────────────────────────────────────────────────────── */
.cfeed-grid.cfeed-grid--inline {
  max-width: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 20px;
}
@media (max-width: 1280px) {
  .cfeed-grid.cfeed-grid--inline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
}
@media (max-width: 992px) {
  .cfeed-grid.cfeed-grid--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
}
@media (max-width: 520px) {
  .cfeed-grid.cfeed-grid--inline { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Load-more card ─────────────────────────────────────────── */
.cfeed-loadmore-wrap,
.cfeed-endof-wrap { display: flex; flex-direction: column; }

.xc-loadmore-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 180px;
  border-radius: 20px;
  border: 2px dashed #e2e2e2;
  background: #fafafa;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.35s cubic-bezier(.22,1,.36,1);
}
.xc-loadmore-card:hover {
  border-color: #e53935;
  background: #fff8f8;
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(220,30,20,.12), 0 4px 16px rgba(0,0,0,.06);
}
.xc-loadmore-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px;
  text-align: center;
}
.xc-loadmore-icon {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e53935, #b71c1c);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(220,30,20,.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
.xc-loadmore-card:hover .xc-loadmore-icon {
  transform: scale(1.1);
  box-shadow: 0 14px 36px rgba(220,30,20,.40);
}
.xc-loadmore-arrow { transition: opacity 0.2s; }
.xc-loadmore-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  animation: none;
}
.xc-loadmore-card--loading .xc-loadmore-arrow { opacity: 0; }
.xc-loadmore-card--loading .xc-loadmore-spinner {
  opacity: 1;
  animation: xc-lm-spin 0.8s linear infinite;
}
@keyframes xc-lm-spin { to { transform: rotate(360deg); } }
.xc-loadmore-label {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.xc-loadmore-hint {
  font-size: 11.5px;
  color: #aaa;
  font-weight: 500;
}

/* ── End-of-results card ───────────────────────────────────── */
.xc-endof-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 180px;
  border-radius: 20px;
  border: 2px dashed #e2e2e2;
  background: #fafafa;
}
.xc-endof-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px;
  text-align: center;
}
.xc-endof-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 18px rgba(34,197,94,.25);
  flex-shrink: 0;
}
.xc-endof-label {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}
.xc-endof-hint {
  font-size: 11.5px;
  color: #aaa;
  font-weight: 500;
}

/* ════════════════════════════════════════════════
   CUISINE PAGE — V3 (cpg-*)
   Split header · sticky filter bar · square full-color cards
   ════════════════════════════════════════════════ */

/* ── Page Header (white, split layout) ── */
.cpg-header {
  background: #fff;
  padding: 72px 0 60px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #f0f0f0;
}
.cpg-header::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225,33,20,.06), transparent 70%);
  pointer-events: none;
}
.cpg-header__row {
  display: flex;
  align-items: center;
  gap: 48px;
}
.cpg-header__content { flex: 1; min-width: 0; }

/* Badge */
.cpg-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 20px;
}
.cpg-badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(225,33,20,.2);
  animation: cpg-pulse 2.2s infinite;
  flex-shrink: 0;
}
@keyframes cpg-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(225,33,20,.2); }
  50%      { box-shadow: 0 0 0 9px rgba(225,33,20,.04); }
}

/* Title */
.cpg-header__h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 5.2rem);
  font-weight: 900;
  line-height: 1.0;
  color: var(--dark);
  letter-spacing: -3px;
  margin: 0 0 20px;
}
.cpg-header__h1 span {
  color: var(--brand);
  display: block;
}

/* Subtitle */
.cpg-header__p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 440px;
  margin: 0 0 28px;
}

/* Stats */
.cpg-header__meta {
  display: flex;
  align-items: center;
  gap: 28px;
}
.cpg-meta-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--dark);
  line-height: 1;
  letter-spacing: -1px;
}
.cpg-meta-item span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
}
.cpg-meta-sep {
  width: 1px; height: 44px;
  background: #e5e7eb;
}

/* ── Right-side stacked card visual ── */
.cpg-header__visual {
  flex-shrink: 0;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cpg-stack {
  position: relative;
  width: 220px;
  height: 280px;
}
.cpg-stack__card {
  position: absolute;
  width: 170px;
  height: 190px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.cpg-stack__card svg {
  width: 70px; height: 70px;
  color: rgba(255,255,255,.92);
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cpg-stack__card--a {
  top: 80px; left: 90px;
  transform: rotate(10deg);
  z-index: 1; opacity: .6;
}
.cpg-stack__card--b {
  top: 42px; left: 46px;
  transform: rotate(-3deg);
  z-index: 2; opacity: .82;
}
.cpg-stack__card--c {
  top: 0; left: 0;
  transform: rotate(-13deg);
  z-index: 3;
}

/* ── Sticky Filter + Search Bar ── */
.cpg-filter-bar {
  background: #fff;
  border-bottom: 1px solid #efefef;
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 14px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.cpg-filter-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cpg-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cpg-pills::-webkit-scrollbar { display: none; }
.cpg-pill {
  flex-shrink: 0;
  height: 38px;
  padding: 0 18px;
  border-radius: 99px;
  border: 1.5px solid #e5e7eb;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.cpg-pill:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-light);
}
.cpg-pill--active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(225,33,20,.28);
}
.cpg-pill--active:hover { background: var(--brand-dark); border-color: var(--brand-dark); color:#fff; }

/* Search in filter bar */
.cpg-search {
  position: relative;
  flex-shrink: 0;
  width: 220px;
}
.cpg-search__icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}
.cpg-search__input {
  width: 100%;
  height: 38px;
  border: 1.5px solid #e5e7eb;
  border-radius: 99px;
  padding: 0 38px 0 38px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--dark);
  background: var(--surface-2);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cpg-search__input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
  background: #fff;
}
.cpg-search__input::placeholder { color: #b0b8c4; }
.cpg-search__clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #e5e7eb;
  border: none;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .18s ease;
}
.cpg-search__clear:hover { background: var(--brand); color: #fff; }

/* ── Body ── */
.cpg-body {
  background: var(--surface-2);
  padding: 44px 0 84px;
}

/* ── GRID ── */
.cpg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

/* ── CARD — full-color square ── */
.cpg-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition:
    transform .32s cubic-bezier(.34,1.56,.64,1),
    box-shadow .28s ease;
}
.cpg-card:hover {
  transform: scale(1.06) translateY(-5px);
  box-shadow: 0 28px 60px rgba(0,0,0,.22);
}

/* Dot pattern overlay */
.cpg-card__pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.cpg-card:hover .cpg-card__pattern { opacity: 1; }

/* Shine sweep */
.cpg-card::before {
  content: '';
  position: absolute;
  top: -60%; left: -80%;
  width: 55%;
  height: 220%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: skewX(-15deg);
  transition: left .55s ease;
  pointer-events: none;
  z-index: 4;
}
.cpg-card:hover::before { left: 140%; }

/* Dark gradient overlay at bottom */
.cpg-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,.40) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Icon */
.cpg-card__icon {
  width: 58px; height: 58px;
  color: rgba(255,255,255,.95);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
}
.cpg-card:hover .cpg-card__icon { transform: scale(1.18) translateY(-6px); }

/* Name */
.cpg-card__name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  position: relative;
  z-index: 2;
  padding: 0 10px;
  line-height: 1.3;
  letter-spacing: .1px;
}

/* Explore CTA — slides up on hover */
.cpg-card__cta {
  position: absolute;
  bottom: -52px;
  left: 0; right: 0;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,.95);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-align: center;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: bottom .28s cubic-bezier(.4,0,.2,1);
  z-index: 3;
  text-transform: uppercase;
}
.cpg-card:hover .cpg-card__cta { bottom: 0; }

/* ── No results / Empty ── */
.cpg-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 14px;
}
.cpg-no-results__icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}
.cpg-no-results__title {
  font-size: 18px; font-weight: 700; color: var(--dark); margin: 0;
}
.cpg-no-results__hint {
  font-size: 14px; color: var(--text-muted); margin: 0;
}
.cpg-empty {
  text-align: center; padding: 80px 20px;
}
.cpg-empty__icon { font-size: 56px; margin-bottom: 20px; }
.cpg-empty__title { font-size: 18px; font-weight: 700; color: var(--dark); margin: 0; }

/* ── Responsive ── */
@media (max-width: 1199px) {
  .cpg-grid { grid-template-columns: repeat(4, 1fr); }
  .cpg-header__visual { display: none; }
  .cpg-header__h1 { letter-spacing: -2px; }
}
@media (max-width: 991px) {
  .cpg-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .cpg-header { padding: 52px 0 44px; }
}
@media (max-width: 767px) {
  .cpg-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .cpg-filter-inner { gap: 10px; }
  .cpg-search { width: 150px; }
  .cpg-header__h1 { letter-spacing: -1.5px; }
}
@media (max-width: 479px) {
  .cpg-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cpg-body { padding: 28px 0 60px; }
  .cpg-filter-inner { flex-wrap: wrap; }
  .cpg-search { width: 100%; order: -1; }
  .cpg-pills { order: 0; }
  .cpg-card__name { font-size: 12px; }
}

/* ════════════════════════════════════════════════
   PROMOTIONS MODAL (checkout) — Redesign
   ════════════════════════════════════════════════ */

.modal-promo .modal-dialog {
  max-width: 480px !important;
  margin: auto !important;
}

.modal-promo .modal-content {
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.15) !important;
  overflow: hidden !important;
}

.modal-promo .modal-header {
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 18px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-promo .pm-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-promo .pm-icon-wrap {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #e53935, #ff6b6b);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(229,57,53,0.28);
}

.modal-promo .pm-icon-wrap i { color: #fff !important; font-size: 18px; }

.modal-promo .pm-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.3px;
  margin: 0 !important;
}

.modal-promo .pm-subtitle {
  font-size: 12px;
  color: #9e9e9e;
  margin: 2px 0 0 !important;
}

.modal-promo .pm-close-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  border-radius: 50% !important;
  border: none !important;
  background: #f0f0f0 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
  box-shadow: none !important;
  outline: none !important;
}

.modal-promo .pm-close-btn:hover { background: #e0e0e0 !important; transform: rotate(90deg); }
.modal-promo .pm-close-btn i { font-size: 15px; color: #555 !important; line-height: 1; }

.modal-promo .modal-body {
  padding: 18px 22px !important;
  max-height: 360px;
  overflow-y: auto;
}

.modal-promo .modal-body::-webkit-scrollbar { width: 4px; }
.modal-promo .modal-body::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 4px; }

.modal-promo .pm-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-promo .pm-card {
  cursor: pointer;
  border-radius: 14px;
  border: 2px solid #efefef;
  background: #fafafa;
  padding: 14px 16px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.modal-promo .pm-card:hover { border-color: #ffcdd2; box-shadow: 0 2px 12px rgba(229,57,53,0.08); }

.modal-promo .pm-card.pm-card--selected {
  border-color: #e53935 !important;
  background: #fff5f5 !important;
  box-shadow: 0 4px 16px rgba(229,57,53,0.12) !important;
}

.modal-promo .pm-card-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.modal-promo .pm-card-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.modal-promo .pm-radio {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.modal-promo .pm-card.pm-card--selected .pm-radio {
  border-color: #e53935 !important;
  background: #e53935 !important;
}

.modal-promo .pm-radio-dot { width: 7px; height: 7px; background: #fff; border-radius: 50%; }

.modal-promo .pm-card-text { flex: 1; min-width: 0; }

.modal-promo .pm-promo-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  line-height: 1.4;
}

.modal-promo .pm-promo-meta { font-size: 12px !important; color: #9e9e9e !important; margin: 3px 0 0 !important; }

.modal-promo .pm-promo-valid {
  font-size: 11px !important;
  color: #bdbdbd !important;
  margin: 5px 0 0 !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

.modal-promo .pm-remove-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 14px;
  border-radius: 20px;
  background: #ffebee !important;
  color: #e53935 !important;
  border: 1px solid #ffcdd2;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s;
}

.modal-promo .pm-remove-btn:hover { background: #ffcdd2 !important; color: #c62828 !important; }

.modal-promo .pm-badge-wrap { flex-shrink: 0; padding-top: 2px; }

.modal-promo .pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(135deg, #e53935, #ff6b6b);
  color: #fff !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(229,57,53,0.25);
}

.modal-promo .pm-badge i { font-size: 11px; }

.modal-promo .pm-empty { text-align: center; padding: 32px 16px; color: #bdbdbd; }
.modal-promo .pm-empty i { font-size: 40px; margin-bottom: 10px; display: block; }
.modal-promo .pm-empty p { font-size: 14px; margin: 0; }

.modal-promo .modal-footer {
  border-top: 1px solid #f0f0f0 !important;
  padding: 14px 22px !important;
  background: #fafafa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px;
}

.modal-promo .pm-btn-add {
  padding: 9px 20px !important;
  border-radius: 25px !important;
  border: 2px solid #e0e0e0 !important;
  background: transparent !important;
  color: #555 !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  box-shadow: none !important;
}

.modal-promo .pm-btn-add:hover { border-color: #bdbdbd !important; background: #f5f5f5 !important; color: #333 !important; }

.modal-promo .pm-btn-save {
  padding: 9px 26px !important;
  border-radius: 25px !important;
  border: none !important;
  background: linear-gradient(135deg, #e53935, #ff6b6b) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(229,57,53,0.32) !important;
  transition: box-shadow 0.2s, transform 0.15s, opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
}

.modal-promo .pm-btn-save:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(229,57,53,0.44) !important; transform: translateY(-1px); }

.modal-promo .pm-btn-save:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none !important; transform: none !important; }

@media (max-width: 520px) {
  .modal-promo .modal-dialog { padding: 12px !important; }
  .modal-promo .pm-btn-add,
  .modal-promo .pm-btn-save { font-size: 13px; padding: 8px 16px !important; }
}

/* ════════════════════════════════════════════════
   PROMO INFO DIALOG (merchant page) — Redesign
   Element Plus el-dialog, teleported to body
   ════════════════════════════════════════════════ */

.el-dialog.promo-info-dialog {
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.14) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.el-dialog.promo-info-dialog .el-dialog__header {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

.el-dialog.promo-info-dialog .el-dialog__headerbtn {
  display: none !important;
}

.el-dialog.promo-info-dialog .pid-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px !important;
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.el-dialog.promo-info-dialog .pid-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
}

.el-dialog.promo-info-dialog .pid-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg, #e53935, #ff6b6b) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(229,57,53,0.28) !important;
}

.el-dialog.promo-info-dialog .pid-icon-wrap i { color: #fff !important; font-size: 18px !important; }

.el-dialog.promo-info-dialog .pid-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.3px;
  margin: 0 !important;
}

.el-dialog.promo-info-dialog .pid-subtitle { font-size: 12px !important; color: #9e9e9e !important; margin: 2px 0 0 !important; }

.el-dialog.promo-info-dialog .pid-close-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #f0f0f0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
  outline: none !important;
  box-shadow: none !important;
}

.el-dialog.promo-info-dialog .pid-close-btn:hover { background: #e0e0e0 !important; transform: rotate(90deg); }
.el-dialog.promo-info-dialog .pid-close-btn i { font-size: 15px !important; color: #555 !important; line-height: 1; }

.el-dialog.promo-info-dialog .el-dialog__body { padding: 0 !important; }

.el-dialog.promo-info-dialog .pid-body {
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
}

.el-dialog.promo-info-dialog .pid-body::-webkit-scrollbar { width: 4px; }
.el-dialog.promo-info-dialog .pid-body::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 4px; }

.el-dialog.promo-info-dialog .pid-promo-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 2px solid #efefef !important;
  background: #fafafa !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.el-dialog.promo-info-dialog .pid-promo-card:hover {
  border-color: #ffcdd2 !important;
  background: #fff5f5 !important;
  box-shadow: 0 2px 12px rgba(229,57,53,0.08) !important;
}

.el-dialog.promo-info-dialog .pid-promo-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.el-dialog.promo-info-dialog .pid-promo-icon-bg {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #fff3e0, #ffe0b2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.el-dialog.promo-info-dialog .with-promo-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
}

.el-dialog.promo-info-dialog .pid-promo-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  line-height: 1.4;
}

.el-dialog.promo-info-dialog .pid-promo-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  padding: 5px 11px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #e53935, #ff6b6b) !important;
  color: #fff !important;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(229,57,53,0.22) !important;
}

.el-dialog.promo-info-dialog .pid-promo-badge i { font-size: 11px !important; }

@media (max-width: 520px) {
  .el-dialog.promo-info-dialog { width: calc(100% - 24px) !important; margin: 12px auto !important; }
}

@keyframes promo-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

/* ════════════════════════════════════════════════
   PROMO HERO TRIGGER — Coupon strip style
   ════════════════════════════════════════════════ */

.promo-hero-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(135deg, #ff6f00, #ffa000, #ff8f00);
  border-radius: 10px;
  padding: 0;
  text-decoration: none !important;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(255,111,0,0.45);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
  border: none;
  vertical-align: middle;
}

.promo-hero-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(255,111,0,0.58);
  text-decoration: none !important;
}

.promo-hero-trigger__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 100%;
  align-self: stretch;
  background: rgba(0,0,0,0.15);
  padding: 9px 0;
  position: relative;
}

.promo-hero-trigger__icon::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255,255,255,0.25);
}

.promo-hero-trigger__icon i {
  color: #fff;
  font-size: 16px;
}

.promo-hero-trigger__body {
  display: flex;
  flex-direction: column;
  padding: 7px 14px 7px 12px;
  line-height: 1.25;
  gap: 1px;
}

.promo-hero-trigger__deal {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.promo-hero-trigger__cta {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.promo-hero-trigger__shimmer {
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  animation: promo-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes promo-shimmer {
  0% { left: -75%; }
  60%, 100% { left: 130%; }
}

@keyframes promo-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

/* ════════════════════════════════════════════════════════════════════
   CHECKOUT PAGE — KILL LEGACY .modal-mobile bottom-pinned positioning
   The CSS rule `.modal-content.modal-mobile{ position:fixed; bottom:0 }`
   in style.css line 3094 makes every modal opened on a mobile checkout
   render pinned to the bottom-left of the viewport. We disable it
   globally on the account/checkout flow and for our custom modals.
   ════════════════════════════════════════════════════════════════════ */
.controller-account .modal-content.modal-mobile,
body > .modal .modal-content.modal-mobile,
.modal-trn-options .modal-content,
.modal-trn-options .modal-content.modal-mobile,
.modal-promo .modal-content,
.modal-promo .modal-content.modal-mobile,
#changephoneModal .modal-content,
#changephoneModal .modal-content.modal-mobile {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  border: none !important;
}

/* Force every Bootstrap modal on the checkout to be a true overlay,
   regardless of any earlier rules. Use viewport units (vw/vh) instead
   of % so the modal and the modal-backdrop pick the same containing
   block on devices with high DPR / responsive emulation (where the
   layout-viewport and visual-viewport disagree). */
/* NOTE: width/height for these elements are set per-frame in pixel units
   via JS in checkout.php (_ckApplyOverlay), because vw/vh resolve to the
   visual viewport on some browsers (Firefox responsive design mode at
   DPR=3) and don't match window.innerWidth. We keep only the positioning
   defaults here and let JS supply the dimensions. */
.controller-account .modal,
.controller-checkout .modal,
body > .modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1080 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.controller-account .modal-dialog,
.controller-checkout .modal-dialog,
body > .modal > .modal-dialog {
  margin: 1.75rem auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none;
}

.controller-account .modal-dialog > .modal-content,
.controller-checkout .modal-dialog > .modal-content,
body > .modal > .modal-dialog > .modal-content {
  pointer-events: auto;
}

/* Backdrop — must use the SAME sizing units as .modal so they line up
   pixel-for-pixel under all DPR / responsive-emulation conditions. */
body > .modal-backdrop,
.controller-account .modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1070 !important;
  background: rgba(17, 24, 39, 0.55) !important;
  opacity: 1 !important;
}

/* Lock body scroll while modal is open */
body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

/* Mobile: full-width dialog with small inset */
@media (max-width: 600px) {
  .controller-account .modal-dialog,
  .controller-checkout .modal-dialog,
  body > .modal > .modal-dialog {
    margin: 12px auto !important;
  }
  .controller-account .modal-dialog > .modal-content,
  .controller-checkout .modal-dialog > .modal-content,
  body > .modal > .modal-dialog > .modal-content {
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   HEADER REFINEMENT (9 Sep 2026)
   The nav shell was rendering 103px tall against a 92px (desktop) /
   78px (tablet) content offset, so page content slid under it. This
   block sets one consistent set of header metrics, retunes everything
   that keys off them, and tightens the visual design.
   ══════════════════════════════════════════════════════════════════ */

/* ── Metrics ─────────────────────────────────────────────────────── */
.premium-nav-shell,
body.front-page > .container-fluid:first-child {
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 rgba(16,24,40,.07) !important;
  transition: background .25s ease, box-shadow .25s ease;
}
/* thinner brand accent than the old 2px gradient bar */
.premium-nav-shell::after,
body.front-page > .container-fluid:first-child::after {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(225,33,20,.28) 18%, rgba(225,33,20,.62) 50%,
    rgba(225,33,20,.28) 82%, transparent 100%);
}
/* solidify once the page moves under it */
.premium-nav-shell.is-scrolled,
body.front-page > .container-fluid.is-scrolled:first-child {
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 1px 0 rgba(16,24,40,.06), 0 10px 30px -18px rgba(16,24,40,.5) !important;
}

body.front-page #top-navigation,
#top-navigation {
  padding: 0 30px;
  min-height: 87px !important;
  /* the nav row is a .row: its 50% columns round past 100% once the shell has
     horizontal padding, which used to drop the right cluster onto a second line */
  flex-wrap: nowrap !important;
}
#top-navigation > [class*="col"] { min-width: 0; }
body:not(.front-page) #top-navigation {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
ul.top-menu { height: 87px !important; gap: 10px; }

.top-logo { padding: 0; }
.top-logo img.img-200,
.top-logo img {
  max-height: 64px !important;
  height: auto !important;
  width: auto !important;
  max-width: 190px !important;
}
.top-logo img.img-200:hover { transform: scale(1.03); }

.page-content { padding-top: 88px; }
/* desktop only - below 992px the hero search sits flush under the nav */
@media (min-width: 992px) {
  body.front-page #vm_home_search { padding-top: 88px; }
}

/* ── Quick links ─────────────────────────────────────────────────── */
.premium-nav-links { gap: 2px; margin-left: 26px; }
.pnl-item {
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 11px;
  color: #374151 !important;
}
.pnl-item i { font-size: 13px; color: #9ca3af; transition: color .2s ease; }
.pnl-item:hover {
  color: #111827 !important;
  background: #f3f4f6 !important;
}
.pnl-item:hover i { color: var(--brand); }
.pnl-item.pnl-active {
  color: var(--brand) !important;
  background: var(--brand-light) !important;
}
.pnl-item.pnl-active i { color: var(--brand); }
/* one affordance only: the underline now marks the current page, not hover */
.pnl-item::after { bottom: 4px; height: 2px; }
.pnl-item:hover::after { transform: scaleX(0); }
.pnl-item.pnl-active::after { transform: scaleX(1); }

/* ── Language / currency pills ───────────────────────────────────── */
.premium-nav-links .pls-wrap { margin-left: 8px; }
.pls-trigger {
  height: 38px;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: #fff !important;
  font-size: 13px;
}
.pls-trigger:hover {
  background: #f9fafb !important;
  border-color: #d8dce3 !important;
}

/* ── Right-hand controls, all on one 44px rhythm ─────────────────── */
a.cart-handle,
.premium-menu-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
a.cart-handle:hover,
.premium-menu-btn:hover {
  background: var(--brand-light) !important;
  border-color: rgba(225,33,20,.3) !important;
  box-shadow: 0 6px 18px -8px rgba(225,33,20,.55);
  transform: translateY(-1px) !important;
}
.premium-menu-btn { align-items: center; padding: 0; gap: 4.5px; }
.pmb-line { width: 17px !important; }
.premium-menu-btn:hover .pmb-line--top,
.premium-menu-btn:hover .pmb-line--mid,
.premium-menu-btn:hover .pmb-line--bot { width: 17px; }

/* Sign in — solid brand pill, it is the primary action up here */
#top-navigation ul.top-menu li.line-left > a[href*="login"],
ul.top-menu li.line-left > a[href*="login"] {
  height: 44px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 22px !important;
  background: var(--brand) !important;
  color: #fff !important;
  border: 1px solid var(--brand) !important;
  box-shadow: 0 6px 18px -8px rgba(225,33,20,.65) !important;
  letter-spacing: .2px;
}
#top-navigation ul.top-menu li.line-left > a[href*="login"]:hover,
ul.top-menu li.line-left > a[href*="login"]:hover {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(225,33,20,.75) !important;
}

/* Account pill */
.userprofile-trigger {
  height: 44px;
  padding: 0 14px 0 5px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(16,24,40,.05) !important;
}
.upt-avatar { width: 32px !important; height: 32px !important; }

/* ── Keyboard focus ──────────────────────────────────────────────── */
#top-navigation a:focus-visible,
#top-navigation button:focus-visible,
#top-navigation .premium-menu-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Nav-height dependents ───────────────────────────────────────── */
.rdi-map-wrapper { top: 100px; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 991px) {
  body.front-page #top-navigation,
  #top-navigation { padding: 0 18px; min-height: 79px !important; }
  ul.top-menu { height: 79px !important; gap: 8px; }
  .top-logo img.img-200,
  .top-logo img { max-height: 56px !important; max-width: 180px !important; }
  .page-content { padding-top: 80px; }
  body.front-page #main-search-banner { background-position: center 80px !important; }
  .menu-center section { scroll-margin-top: 92px; }
}

@media (max-width: 767px) {
  body.front-page #top-navigation,
  #top-navigation { padding: 0 14px !important; min-height: 71px !important; }
  ul.top-menu { height: 71px !important; gap: 7px; }
  .top-logo img,
  .top-logo img.img-200,
  .footer-logo img {
    height: auto !important;
    max-height: 46px !important;
    max-width: 150px !important;
    width: auto !important;
  }
  .footer-logo img { max-height: 54px !important; }
  .page-content { padding-top: 72px !important; }
  body.front-page .page-content { padding-top: 0 !important; }
  body.front-page #main-search-banner { background-position: left 72px !important; }
  a.cart-handle,
  .premium-menu-btn { width: 40px !important; height: 40px !important; }
  .userprofile-trigger { height: 40px; }
  .menu-center section { scroll-margin-top: 84px; }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER REFINEMENT (9 Sep 2026)
   The brand column was logo + one line of text against three short
   link columns, which left most of the footer empty. Adds a contact
   block, partner CTAs, and tightens the vertical rhythm.
   ══════════════════════════════════════════════════════════════════ */

.sub-footer {
  padding-top: 64px !important;
  padding-bottom: 40px !important;
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(225,33,20,.10), transparent 62%),
    radial-gradient(700px 340px at 92% 108%, rgba(225,33,20,.07), transparent 62%),
    #1a1e30 !important;
}
/* the two blurred blobs are now part of the background above */
.sub-footer::before,
.sub-footer::after { content: none; }

.footer-cols { row-gap: 40px; }
.footer-brand-col { gap: 18px; }
.sub-footer .footer-logo img { max-height: 54px !important; }
.footer-desc {
  color: rgba(255,255,255,.52) !important;
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 320px;
}

/* ── Contact list ── */
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 320px;
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.58);
}
.footer-contact a {
  color: rgba(255,255,255,.58) !important;
  text-decoration: none !important;
  transition: color .18s ease;
  overflow-wrap: anywhere;
}
.footer-contact a:hover { color: #fff !important; }
.footer-contact-ico {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

/* ── Link columns ── */
.sub-footer-nav h6 {
  font-size: 0.72rem !important;
  letter-spacing: 2px;
  margin-bottom: 18px !important;
}
.sub-footer-nav a { font-size: 13.5px !important; padding: 6px 0 !important; }

/* ── Partner CTA cards ── */
.footer-cta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-cta-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none !important;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.footer-cta-card:hover {
  background: rgba(225,33,20,.10);
  border-color: rgba(225,33,20,.42);
  transform: translateY(-2px);
  text-decoration: none !important;
}
.footer-cta-ico {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(140deg, #ef4444, #b91c1c);
  box-shadow: 0 10px 22px -12px rgba(225,33,20,.9);
}
.footer-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.footer-cta-text strong {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.footer-cta-text span {
  color: rgba(255,255,255,.5);
  font-size: 12.5px;
  line-height: 1.4;
}
.footer-cta-arrow {
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
  color: rgba(255,255,255,.35);
  transition: transform .22s ease, color .22s ease;
}
.footer-cta-card:hover .footer-cta-arrow { color: #fff; transform: translateX(3px); }

/* ── Newsletter band ── */
.footer-newsletter-band { margin-top: 40px; }

/* ── Responsive ── */
@media (max-width: 991px) {
  .sub-footer { padding-top: 52px !important; }
  .footer-desc, .footer-contact { max-width: none; }
  .footer-cta-row { margin-top: 36px; padding-top: 28px; }
}
@media (max-width: 767px) {
  .sub-footer { padding-top: 44px !important; padding-bottom: 32px !important; }
  .sub-footer .footer-logo img { max-height: 46px !important; }
  .footer-cta-row { grid-template-columns: 1fr; gap: 10px; }
  .footer-cta-card { padding: 14px 16px; }
  .footer-cta-ico { width: 40px; height: 40px; border-radius: 12px; }
  .footer-newsletter-band { margin-top: 32px; }
}

/* Footer links: the hover chevron used to sit in the flex flow, so every link's
   text started ~11px right of its column heading. Park it in the column gutter
   and keep the label anchored to the same left edge as the heading. */
.sub-footer-nav a {
  position: relative;
  gap: 0 !important;
}
.sub-footer-nav a::before {
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translate(-4px, -50%);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.sub-footer-nav a:hover {
  padding-left: 0 !important;
}
.sub-footer-nav a:hover::before {
  opacity: 1;
  transform: translate(0, -50%);
}

/* ══════════════════════════════════════════════════════════════════
   RESTAURANT FEED REFINEMENT (9 Sep 2026)
   ══════════════════════════════════════════════════════════════════ */

/* ── Cover fallback: a wash of the restaurant's own logo ──────────
   Most stores have no header photo, so every card fell back to the
   same doodle SVG and the grid read as one repeating texture. */
.xc-cover-state {
  background-color: #eef1f6 !important;
  background-image: none !important;
  filter: none !important;
  overflow: hidden;
}
.xc-cover-state::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(140deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 42%, rgba(16,24,40,.16) 100%);
}
.xc-cover-blur {
  position: absolute;
  inset: -18%;
  width: 136%;
  height: 136%;
  object-fit: cover;
  filter: blur(22px) saturate(1.8) brightness(1.02);
  transform: scale(1.05);
  opacity: .88;
}

/* ── Page header (moved above the results) ──────────────────────── */
.fdz-section {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  padding: 26px 40px 24px !important;
  border-top: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
}
.fdz-section .fdz-pin-wrap { transform: scale(.78); margin-bottom: 2px; }
.fdz-section .fdz-label { margin-bottom: 2px !important; }
.fdz-address {
  font-size: clamp(1.05rem, 2.2vw, 1.45rem) !important;
  margin-bottom: 14px !important;
}
.fdz-chips { margin-top: 0 !important; }

/* ── Sticky filter panel clears the fixed header ─────────────────── */
.sf-panel { top: 104px; }

/* ── Grid rhythm ─────────────────────────────────────────────────── */
.cfeed-grid {
  max-width: 1440px;
  gap: 20px 18px;
  margin-top: 4px;
}

/* ── Card polish ─────────────────────────────────────────────────── */
.xc-card {
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1), border-color .28s ease;
}
.xc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 22px 44px -22px rgba(16,24,40,.42);
}
.xc-card:hover .xc-cover-img,
.xc-card:hover .xc-cover-blur { transform: scale(1.07); }
.xc-name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Load more: one clear action across the grid ─────────────────── */
.cfeed-loadmore-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.xc-loadmore-card {
  width: min(320px, 100%);
  height: auto !important;
  min-height: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: #fff !important;
  box-shadow: 0 10px 26px -18px rgba(16,24,40,.6);
  transition: all .22s ease;
}
.xc-loadmore-card:hover {
  border-color: rgba(225,33,20,.4) !important;
  box-shadow: 0 14px 30px -16px rgba(225,33,20,.55);
  transform: translateY(-2px);
}
.xc-loadmore-inner {
  flex-direction: row !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  justify-content: center;
}
.xc-loadmore-icon { width: 30px !important; height: 30px !important; }
.xc-loadmore-icon svg { width: 16px; height: 16px; }
.xc-loadmore-hint { display: none; }
.xc-loadmore-label { font-size: 14px !important; }

@media (max-width: 900px) {
  .fdz-section { padding: 20px 20px 18px !important; margin-bottom: 16px !important; }
  .sf-panel { top: 88px; }
}
@media (max-width: 767px) {
  .fdz-section { padding: 18px 16px 16px !important; }
  .fdz-section .fdz-pin-wrap { transform: scale(.66); }
}

/* ── Feed empty state ─────────────────────────────────────────── */
.xc-empty {
  max-width: 420px;
  margin: 40px auto;
  padding: 34px 28px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 16px 40px -30px rgba(16,24,40,.5);
}
.xc-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(225,33,20,.08);
  color: var(--brand);
  margin-bottom: 16px;
}
.xc-empty-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
}
.xc-empty-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}
.xc-empty-btn {
  margin-top: 18px;
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 8px 20px -10px rgba(225,33,20,.8);
}
.xc-empty-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════════
   FILTER PANEL — RECEIPT (9 Sep 2026)
   The panel is a printed order slip: warm paper, torn edges, mono
   type, dashed rules, ink-stamped selections. No gloss, no gradients,
   no shadows — the colour on this page belongs to the restaurants.
   ══════════════════════════════════════════════════════════════════ */

.sf-receipt {
  --paper:      #fffbef;
  --ink:        #1b1a17;
  --ink-soft:   #6d6a61;
  --ink-faint:  #a19d92;
  --rule:       #e0d8c4;
  --stamp:      #e12114;
  --page:       #f5f7fb;

  position: sticky;
  top: 104px;
  padding: 0;
}
/* the theme sets Poppins deeper in the tree, so the slip claims the
   monospace stack outright - the whole panel is meant to read as print */
.sf-receipt,
.sf-receipt * {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
}
/* torn top / bottom edges: the paper itself is cut, so whatever is
   behind the panel shows through the perforations */

.sf-panel {
  background: var(--paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image:
    radial-gradient(circle at 6px 0, transparent 6px, #000 6.5px),
    radial-gradient(circle at 6px 10px, transparent 6px, #000 6.5px),
    linear-gradient(#000, #000);
  -webkit-mask-size: 12px 10px, 12px 10px, 100% calc(100% - 20px);
  -webkit-mask-position: top left, bottom left, center;
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
  mask-image:
    radial-gradient(circle at 6px 0, transparent 6px, #000 6.5px),
    radial-gradient(circle at 6px 10px, transparent 6px, #000 6.5px),
    linear-gradient(#000, #000);
  mask-size: 12px 10px, 12px 10px, 100% calc(100% - 20px);
  mask-position: top left, bottom left, center;
  mask-repeat: repeat-x, repeat-x, no-repeat;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: static;
}
.sf-panel::-webkit-scrollbar { width: 0; display: none; }
.sf-panel::before { display: none; }

/* ── Header: the slip's letterhead ─────────────────────────────── */
.sf-panel-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--paper);
  padding: 18px 18px 12px;
  border-bottom: 2px solid var(--ink);
  gap: 8px;
  flex-wrap: wrap;
}
.sf-panel-title {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink);
  gap: 0;
}
.sf-panel-title-icon { display: none; }
.sf-store-count {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  padding: 0;
}
.sf-clear-btn {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stamp);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--stamp);
  border-radius: 0;
  padding: 1px 0;
}
.sf-clear-btn:hover { background: transparent; color: var(--stamp); box-shadow: none; opacity: .7; }
.sf-clear-btn svg { display: none; }

/* ── Sections: dashed tear-off rules ───────────────────────────── */
.sf-sections { padding: 0; }
.sf-section { border-bottom: 1px dashed var(--rule); }
.sf-section--last { border-bottom: 0; }
.sf-section-head {
  padding: 14px 18px;
  gap: 0;
  background: transparent !important;
}
.sf-section-head::before { display: none !important; }
.sf-section-head:hover .sf-section-label { color: var(--stamp); }
.sf-section-icon { display: none; }
.sf-section-label {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
}
.sf-chevron { display: none; }
.sf-section-head::after {
  content: '[+]';
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: -.02em;
}
.sf-section-head:not(.collapsed)::after { content: '[–]'; color: var(--ink); }
.sf-section-body { padding: 0 18px 18px; }

/* ── Sort: checkbox lines off a till roll ──────────────────────── */
.sf-sort-list { gap: 0; }
.sf-radio-item {
  gap: 10px;
  padding: 7px 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
}
.sf-radio-dot {
  width: 14px;
  height: 14px;
  border-radius: 0;
  border: 1.5px solid var(--ink-faint);
  background: var(--paper);
  box-shadow: none !important;
}
.sf-radio-dot::after {
  inset: 2px;
  border-radius: 0;
  background: var(--stamp);
}
.sf-radio-input:checked ~ .sf-radio-dot { border-color: var(--ink); }
.sf-radio-label {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.sf-radio-item:hover .sf-radio-label { color: var(--ink); }
.sf-radio-item:has(.sf-radio-input:checked) .sf-radio-label { color: var(--ink); font-weight: 700; }

/* ── Price: stamped segments ───────────────────────────────────── */
.sf-price-group {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.sf-price-btn {
  height: 40px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink-soft) !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease;
}
.sf-price-btn + .sf-price-btn { border-left: 1px dashed var(--rule) !important; }
.sf-price-btn:hover { background: rgba(27,26,23,.05) !important; color: var(--ink) !important; }
.sf-price-btn--active,
.sf-price-btn--active:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

/* ── Cuisines: line items with ink-stamped selection ───────────── */
.sf-check-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  grid-template-columns: none !important;
}
.sf-check-item {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  width: auto !important;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.sf-check-item:hover { border-color: var(--ink); }
.sf-check-box {
  width: 0 !important;
  height: 11px;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
  opacity: 0;
  color: var(--paper);
  transition: width .15s ease, opacity .15s ease, margin .15s ease;
}
.sf-check-input:checked ~ .sf-check-box {
  width: 11px !important;
  opacity: 1;
  margin-right: 5px;
}
.sf-check-label {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.sf-check-item:has(.sf-check-input:checked) {
  background: var(--ink);
  border-color: var(--ink);
}
.sf-check-item:has(.sf-check-input:checked) .sf-check-label { color: var(--paper); }

.sf-show-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  padding: 0 0 2px !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--ink-faint) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink) !important;
  border-bottom: 1px dashed var(--ink-faint);
  padding-bottom: 1px;
  text-decoration: none !important;
}
.sf-show-more:hover {
  color: var(--stamp) !important;
  background: none !important;
  border-bottom-color: var(--stamp) !important;
}
.sf-show-more svg { width: 10px; height: 10px; }

/* ── Fee + ratings: totals lines ───────────────────────────────── */
.sf-range-labels, .sf-ratings-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
/* dotted leader between the label and its value, like a printed total */
.sf-range-labels > span:first-child,
.sf-ratings-label > span:first-child { flex-shrink: 0; }
.sf-range-labels::before,
.sf-ratings-label::before {
  content: '';
  flex: 1;
  order: 1;
  align-self: flex-end;
  height: 0;
  margin-bottom: 3px;
  border-bottom: 1px dotted var(--rule);
}
.sf-range-value, .sf-ratings-value {
  order: 2;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.sf-range-input {
  width: 100%;
  height: 2px;
  background: var(--rule);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.sf-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 18px;
  border-radius: 0;
  background: var(--ink);
  border: 0;
  cursor: grab;
}
.sf-range-input::-moz-range-thumb {
  width: 12px;
  height: 18px;
  border-radius: 0;
  background: var(--ink);
  border: 0;
  cursor: grab;
}
.sf-range-minmax {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-faint);
}
.sf-ratings-wrap .vue-star-rating { filter: grayscale(.15); }

/* ── Barcode footer ────────────────────────────────────────────── */
.sf-sections::after {
  content: '';
  display: block;
  height: 34px;
  margin: 18px 18px 8px;
  background-image: repeating-linear-gradient(90deg,
    var(--ink) 0 1px, transparent 1px 3px,
    var(--ink) 3px 5px, transparent 5px 6px,
    var(--ink) 6px 7px, transparent 7px 10px,
    var(--ink) 10px 13px, transparent 13px 14px);
  opacity: .8;
}

/* ── Focus ─────────────────────────────────────────────────────── */
.sf-panel a:focus-visible,
.sf-panel button:focus-visible,
.sf-panel label:focus-within {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
}

@media (max-width: 1199px) {
  .sf-receipt { top: 88px; }
}

/* ══════════════════════════════════════════════════════════════════
   MENU PAGE — HEADER + HERO (9 Sep 2026)

   Two separate faults, both visible on /gorkha-palace:

   1. HEADER. On the menu page the delivery-address widget renders
      inside .premium-nav-col *below* the quick links (.widget-nav-below,
      a fixed 550px block). That stacked the shell to 98px — and to
      ~130px once the address string wrapped, because the button's
      .text-truncate span is `d-inline`, and ellipsis needs a block box.
      Content offsets assume 88px, so the hero slid under the nav.
      Fix: one flex row, address pill inline and truncating on one line.

   2. HERO. .merchant-hero__banner is 560px of flat --dark whenever the
      merchant never uploaded a cover photo (most of them). Shorter
      banner, and the logo — blown up and blurred — becomes the backdrop.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Header: links and address on one row ─────────────────────── */
/* The column carries Bootstrap's .d-none.d-xl-block, i.e. display:block
   !important from 1200px up — so the flex switch has to match that weight
   and live in the same range. Below 1200px .d-none keeps it hidden and the
   mobile sub-nav carries the address instead. */
@media (min-width: 1200px) {
  .premium-nav-col {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding-top: 0;
    padding-bottom: 0;
    min-width: 0;
  }
}
.premium-nav-links {
  flex: 0 0 auto;
  margin-left: 22px;
}
/* the address widget is now a sibling pill, not a second row */
.widget-nav-below {
  flex: 0 1 340px;
  width: auto;
  min-width: 0;
  margin-left: 0;
  padding: 0;
}
/* Every box between the column and the button has to be allowed to shrink:
   the component root is a flex item whose default min-width:auto pins it to
   its content width, so a long address pushed the pill to ~760px. */
.widget-nav-below > div,
.widget-nav-below .position-relative {
  min-width: 0;
  flex: 1 1 auto;
}
.widget-nav-below > div { width: 100%; }
.widget-nav-below .widget-dropdown,
.widget-nav-below .widget-dropdown button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* The pill itself — same 44px rhythm as the cart / sign-in controls */
.widget-nav-below .widget-dropdown button {
  position: relative;
  height: 44px;
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 16px 0 38px !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
  font-size: 13px;
  font-weight: 600;
  color: #374151 !important;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.widget-nav-below .widget-dropdown button:hover {
  background: var(--brand-light) !important;
  border-color: rgba(225,33,20,.28) !important;
  box-shadow: 0 6px 18px -10px rgba(225,33,20,.55);
}
/* pin glyph in the left inset */
.widget-nav-below .widget-dropdown button::before {
  content: '\f1ab';
  font: normal normal normal 16px/1 'Material-Design-Iconic-Font';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand);
}
/* One line, and the address is the half that survives a squeeze: both spans
   shrink, but the delivery-time suffix shrinks six times as fast, so a long
   street address keeps the room and the time trims away instead. */
.widget-nav-below .widget-dropdown button > span:first-child {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-nav-below .widget-dropdown button > span:last-child {
  display: block;
  flex: 0 6 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dark-3);
  font-weight: 500;
  font-size: 12px;
}
/* the theme's absolutely-positioned caret would sit on top of the text */
.widget-nav-below .widget-dropdown button::after { display: none; }

/* the service (Delivery/Pickup) pill, when it renders next to the address */
.widget-nav-below .widget-nav-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.widget-nav-below .widget-nav-pills > *:first-child { flex: 0 0 auto; }
.widget-nav-below .widget-nav-pills > *:last-child  { flex: 1 1 auto; min-width: 0; }

/* Reclaim room for the pill on the narrower desktop range */
@media (min-width: 1200px) and (max-width: 1499px) {
  .premium-nav-links { margin-left: 12px; }
  .premium-nav-col { gap: 10px; }
  .widget-nav-below { flex: 0 1 268px; }
  .pnl-item { padding: 9px 11px; }
}
@media (min-width: 1700px) {
  .widget-nav-below { flex: 0 1 420px; }
}
/* The restaurants feed hides the address + service pills (the page has its own
   controls), so the widget must not still reserve a slot in the flex row. */
#vue-widget-nav.page-restaurants.widget-nav-below { flex: 0 0 0px; }

/* ── 2. Hero: shorter banner, real backdrop when there is no photo ── */
.merchant-hero__banner {
  height: 384px;
}
/* No cover photo — so don't reserve photo-sized space for one. The band is
   shorter, and the merchant's own logo supplies the backdrop twice over:
   blown up and blurred for the colour field, and again as a crest on the
   right, which fills what would otherwise be dead space. */
.merchant-hero__banner--nocover {
  height: 274px;
  background-color: #12141c;
}
.merchant-hero__nocover-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.merchant-hero__wash {
  position: absolute;
  inset: -18%;
  width: 136%;
  height: 136%;
  object-fit: cover;
  filter: blur(72px) saturate(1.7);
  opacity: .78;
}
.merchant-hero__crest {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-52%) rotate(-7deg);
  width: 260px;
  height: 260px;
  object-fit: contain;
  opacity: .11;
  filter: grayscale(1) contrast(1.15) brightness(2.4);
  mix-blend-mode: soft-light;
}
/* a soft warm light source so the field reads as lit, not as flat paint */
.merchant-hero__nocover-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 340px at 22% 12%, rgba(255,255,255,.13), transparent 68%),
    radial-gradient(620px 420px at 88% 92%, rgba(225,33,20,.20), transparent 70%);
}
/* Scrim: light at the top so the breadcrumb reads, heavy at the bottom so
   the name / address / meta block reads over any photo. */
.merchant-hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(10,12,18,.52) 0%,
    rgba(10,12,18,.16) 26%,
    rgba(10,12,18,.34) 54%,
    rgba(10,12,18,.80) 78%,
    rgba(10,12,18,.94) 100%
  );
}
.merchant-hero__banner--nocover .merchant-hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(10,12,18,.30) 0%,
    rgba(10,12,18,.12) 32%,
    rgba(10,12,18,.30) 60%,
    rgba(10,12,18,.60) 84%,
    rgba(10,12,18,.74) 100%
  );
}
/* hairline where the hero meets the menu, so the two sections separate */
.merchant-hero__banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(225,33,20,.55) 30%, rgba(225,33,20,.55) 70%, transparent 100%);
  z-index: 6;
}

/* Breadcrumb row — clear of the fixed nav, quieter than the title */
.merchant-hero__top-bar { padding-top: 20px; }
.merchant-hero__breadcrumb .el-breadcrumb__inner,
.merchant-hero__breadcrumb .el-breadcrumb__inner a,
.merchant-hero__breadcrumb .el-breadcrumb__separator {
  font-size: 12.5px;
  color: rgba(255,255,255,.60) !important;
}

/* Info bar */
.merchant-hero__glass-inner {
  align-items: flex-end;
  gap: 24px;
  padding: 24px 0 30px;
}
.merchant-hero__logo-wrap {
  align-self: flex-end;
  width: 92px;
  height: 92px;
  border-radius: 18px;
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.85);
}
.merchant-hero__logo-wrap .merchant-hero__logo,
.merchant-hero__logo-wrap .el-image,
.merchant-hero__logo-wrap .el-image img {
  width: 86px !important;
  height: 86px !important;
  border-radius: 15px;
}
.merchant-hero__info { padding-bottom: 2px; }
.merchant-hero__name {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -.8px;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.merchant-hero__name-row { margin-bottom: 7px; }
.merchant-hero__address-text { margin-bottom: 9px; }
.merchant-hero__right-col { align-self: flex-end; padding-bottom: 2px; }

@media (min-width: 992px) and (max-width: 1399px) {
  .merchant-hero__banner { height: 340px; }
  .merchant-hero__banner--nocover { height: 256px; }
  .merchant-hero__crest { width: 200px; height: 200px; }
  .merchant-hero__name { font-size: 34px; }
  .merchant-hero__logo-wrap { width: 80px; height: 80px; }
  .merchant-hero__logo-wrap .merchant-hero__logo,
  .merchant-hero__logo-wrap .el-image,
  .merchant-hero__logo-wrap .el-image img { width: 74px !important; height: 74px !important; }
}

/* ── 3. Hero, mobile ─────────────────────────────────────────────── */
.merchant-hero-mobile__banner {
  min-height: 190px;
}
.merchant-hero-mobile__banner--nocover { background-color: #171a24; }
.mhm-overlay {
  background: linear-gradient(
    180deg,
    rgba(10,12,18,.30) 0%,
    rgba(10,12,18,.12) 34%,
    rgba(10,12,18,.34) 68%,
    rgba(10,12,18,.72) 100%
  );
}
.merchant-hero-mobile__banner--nocover .mhm-overlay {
  background: linear-gradient(
    180deg,
    rgba(10,12,18,.44) 0%,
    rgba(10,12,18,.30) 34%,
    rgba(10,12,18,.48) 68%,
    rgba(10,12,18,.78) 100%
  );
}
@media (max-width: 767px) {
  .merchant-hero-mobile__banner { min-height: 172px; }
  .merchant-hero__wash { filter: blur(42px) saturate(1.7); }
}

/* The mobile menu zeroes its container padding to run full-bleed, but the .row
   inside keeps Bootstrap's -15px gutters, so it sat 30px wider than its
   container and the page scrolled ~9px sideways. Clipping is not an option
   here — .section-menu is pinned to overflow:visible !important so the desktop
   sticky sidebar works — so drop the gutters that have nothing to offset. */
@media (max-width: 991.98px) {
  .section-menu > .container {
    width: 100% !important;
    max-width: 100% !important;
  }
  .section-menu > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* The sticky category bar reached full bleed with 100vw + negative vw
     margins. 100vw counts the scrollbar, so on a narrow desktop window it
     overhung the page by the scrollbar width and caused the sideways scroll.
     With the container full-width already, plain 100% is full bleed. */
  .category-carousel-sticky {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .category-carousel-sticky .el-affix--fixed { width: 100% !important; }
}

/* ── 4. Hero trimmings ───────────────────────────────────────────── */
/* The service indicator was a translucent red on a dark ground, which read
   as an unlabelled smudge. Frosted white pill instead. */
.merchant-hero__right-col .btn-group.btn-group-rounded:has(.btn:only-child) {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.28) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.merchant-hero__right-col .btn-group-rounded .btn.active:only-child,
.merchant-hero__right-col .btn-group-rounded .btn.active:only-child .bold {
  color: #fff !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 11.5px;
}
/* Two-service toggle: same frosted track, so the two states match */
.merchant-hero__right-col .btn-group.btn-group-rounded {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.24) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.merchant-hero__right-col .btn-group-rounded .btn { color: rgba(255,255,255,.72) !important; }
.merchant-hero__right-col .btn-group-rounded .btn .bold { color: rgba(255,255,255,.85); }
.merchant-hero__right-col .btn-group-rounded .btn p { color: rgba(255,255,255,.55); }

/* Address line and cuisine tags — a touch more contrast over the photo */
.merchant-hero__address-text { color: rgba(255,255,255,.80) !important; }
.merchant-hero__address-text i { color: var(--brand) !important; }
.merchant-hero__cuisine-tag { color: rgba(255,255,255,.62) !important; }

/* ── 5. Content offset follows the real header height ────────────── */
/* top-nav.php measures .premium-nav-shell and publishes --nav-h. The static
   values stay as the no-JS fallback and as the first paint before the sub-nav
   rows mount. */
.page-content { padding-top: var(--nav-h, 88px); }
@media (min-width: 992px) {
  body.front-page #vm_home_search { padding-top: var(--nav-h, 88px); }
}
@media (max-width: 991px) {
  .page-content { padding-top: var(--nav-h, 80px); }
  .menu-center section { scroll-margin-top: calc(var(--nav-h, 80px) + 12px); }
}
@media (max-width: 767px) {
  .page-content { padding-top: var(--nav-h, 72px) !important; }
  body.front-page .page-content { padding-top: 0 !important; }
  .menu-center section { scroll-margin-top: calc(var(--nav-h, 72px) + 12px); }
}
.sf-receipt { top: calc(var(--nav-h, 88px) + 16px); }
.rdi-map-wrapper { top: calc(var(--nav-h, 88px) + 12px); }

/* ══════════════════════════════════════════════════════════════════
   MENU SIDEBAR — INDEX (9 Sep 2026)

   It was a list of grey labels hanging off a continuous rail, with a
   clip-art food cart in the corner doing the decorating. It now reads as
   the index it is: numbered rows, generous targets, and the only ornament
   is the numbering itself — which CSS counters give us for free, so no
   markup or API field is needed.
   ══════════════════════════════════════════════════════════════════ */

#sticky-sidebar .inner-wrapper-sticky,
#sticky-sidebar:not(:has(.inner-wrapper-sticky)) {
  padding: 20px 12px 14px !important;
  border-radius: 20px !important;
}

/* ── Header: label, rule, no clip art ── */
#sticky-sidebar h5 {
  font-size: 10.5px !important;
  letter-spacing: .22em !important;
  color: #9aa1ad !important;
  margin: 0 6px 6px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #efedE8 !important;
}
#sticky-sidebar h5::before {
  width: 14px;
  height: 2px;
}
/* The illustration stays, but as a mark rather than a picture: smaller,
   inked in brand at low opacity so it sits behind the label in the reading
   order, and it warms up when the panel is hovered. */
#sticky-sidebar h5 .menu-cat-icon {
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  margin-left: auto !important;
  fill: var(--brand) !important;
  opacity: .34 !important;
  flex-shrink: 0 !important;
  transition: opacity .25s ease, transform .25s ease !important;
}
#sticky-sidebar:hover h5 .menu-cat-icon,
#sticky-sidebar .inner-wrapper-sticky:hover h5 .menu-cat-icon {
  opacity: .62 !important;
  transform: translateY(-1px) !important;
}
/* the label and the mark share one baseline band above the rule */
#sticky-sidebar h5 { align-items: center !important; min-height: 28px; }

/* ── The list ── */
ul#menu-category {
  border-left: 0 !important;
  margin-left: 0 !important;
  padding-top: 6px;
  counter-reset: fx-cat;
}

.menu-category a {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  text-transform: none !important;
  padding: 10px 12px !important;
  margin: 0 0 2px !important;
  border: 0 !important;
  border-radius: 10px !important;
  position: relative;
  overflow: hidden;
  transition: background .16s ease, color .16s ease !important;
}

/* the index number — counters, so nothing has to supply it */
.menu-category a::before {
  display: block !important;
  counter-increment: fx-cat;
  content: counter(fx-cat, decimal-leading-zero);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #c7ccd4;
  line-height: 1.55;
  transition: color .16s ease;
}

.menu-category a:hover {
  background: #f5f6f8 !important;
  color: #111827 !important;
  border: 0 !important;
}
.menu-category a:hover::before { color: #9aa1ad; }

/* ── Active ── */
.menu-category li.active a,
.menu-category li a.active,
#menu-category .col a.active,
#sticky-sidebar a.nav-link.active,
#sticky-sidebar .menu-category a.active,
#sticky-sidebar .menu-category a.nav-link.active,
ul#menu-category li a.nav-link.active,
ul#menu-category a.active,
#sticky-sidebar .nav-pills .nav-link.active,
#sticky-sidebar .nav-link.active {
  background: #fff4f3 !important;
  color: #b81a10 !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-radius: 10px !important;
}
/* a rail inside the pill, not a border on the box — it keeps the radius.
   The older block killed both pseudo-elements on the active row with
   display:none, which also stopped the counter incrementing and collapsed
   the grid's text column, so both have to be switched back on explicitly. */
#sticky-sidebar .menu-category a.active::after,
ul#menu-category a.active::after,
.menu-category li.active a::after,
.menu-category li a.active::after {
  display: block !important;
  content: '' !important;
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
}
#sticky-sidebar .menu-category a.active::before,
ul#menu-category a.active::before,
.menu-category li.active a::before,
.menu-category li a.active::before {
  display: block !important;
  content: counter(fx-cat, decimal-leading-zero) !important;
  color: var(--brand) !important;
}

@media (max-width: 1399px) {
  .menu-category a { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 9px 10px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   BASKET PANEL (9 Sep 2026)

   Same markup, same handlers — this is a pass over the surface only, so
   the checkout page (which renders the identical partial with Place Order
   instead of Checkout) inherits it unchanged.

   What was off: the three parts of the panel — title, items, totals — all
   sat on the same flat white with nothing separating them; the SUMMARY /
   Clear row read as body copy rather than a section rule; item rows had no
   hit state despite being full of controls; and the totals ran straight
   into the checkout bar with no visual close.
   ══════════════════════════════════════════════════════════════════ */

/* ── Panel ── */
.sticky-cart .inner-wrapper-sticky {
  border-radius: 20px;
  border-color: #e8e6e1;
  box-shadow: 0 1px 3px rgba(16,24,40,.04), 0 12px 32px -24px rgba(16,24,40,.5);
}

/* ── Title bar ── */
#vue-cart .basket-header-wrap {
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid #f1efea !important;
  background: linear-gradient(180deg, #fffdfc 0%, #ffffff 100%) !important;
}
#vue-cart .basket-header-wrap h5,
#vue-cart h5 {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  color: #111827 !important;
}
#vue-cart .basket-header-right { gap: 12px !important; }
#vue-cart .basket-header-right .basket-icon,
#vue-cart h5 .basket-icon {
  width: 30px !important;
  height: 30px !important;
  opacity: .5 !important;
  transition: opacity .2s ease;
}
#vue-cart .inner-wrapper-sticky:hover .basket-icon { opacity: .75 !important; }

#vue-cart .basket-header-total {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px;
  padding: 0 12px !important;
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  box-shadow: none !important;
  white-space: nowrap;
}

/* ── SUMMARY / Clear — a section rule, not a paragraph ── */
/* The earlier cart block styles this row through the full Bootstrap class
   chain (1,4,2), so the adjacent-sibling selector alone loses to it. */
#vue-cart .basket-header-wrap + .d-flex.justify-content-between.align-items-center.mb-1 {
  padding: 14px 20px 8px !important;
  margin: 0 !important;
  align-items: center !important;
}
#vue-cart .basket-header-wrap + .d-flex.justify-content-between.align-items-center.mb-1 h6 {
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #a8aeba !important;
}
#vue-cart .basket-header-wrap + .d-flex.justify-content-between.align-items-center.mb-1 a { text-decoration: none !important; }
#vue-cart .basket-header-wrap + .d-flex.justify-content-between.align-items-center.mb-1 a p {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #a8aeba !important;
  text-decoration: none !important;
  padding: 4px 9px;
  border-radius: 7px;
  transition: color .16s ease, background .16s ease;
}
#vue-cart .basket-header-wrap + .d-flex.justify-content-between.align-items-center.mb-1 a p u { text-decoration: none !important; }
#vue-cart .basket-header-wrap + .d-flex.justify-content-between.align-items-center.mb-1 a:hover p {
  color: var(--brand) !important;
  background: var(--brand-light) !important;
}

/* ── Items: give each row a hit state that bleeds to the panel edge ── */
.section-cart .cart-items-scroll { padding: 0 12px !important; }
.section-cart .items {
  border-bottom: 1px solid #f4f2ee !important;
  border-radius: 12px;
  transition: background .16s ease;
}
.section-cart .items:hover { background: #fafbfc !important; }
.section-cart .line-items.row { padding: 13px 8px !important; }
.section-cart .addon-items { padding: 0 8px 10px !important; }

.section-cart .line-items .col-6 p:first-child { line-height: 1.4 !important; }

/* the stepper only needs to be as wide as it is */
.section-cart .col-6 .quantity,
.section-cart .col-6 .quantity.d-flex.justify-content-between {
  background: #f6f7f9 !important;
  border-color: #ebedf0 !important;
  margin-top: 8px !important;
}
.section-cart .qty-btn:hover { transform: none !important; }
.section-cart .item-remove:hover { transform: none !important; }
.section-cart .item-remove {
  background: transparent !important;
  color: #c6cad3 !important;
}
.section-cart .items:hover .item-remove { background: #f1f2f4 !important; }

/* soft fade at the foot of the scroller, so a cut-off row reads as scrollable */
.section-cart .cart-items-scroll { position: relative; }
.cart-scroll-hint {
  position: relative;
  margin-top: -22px;
  padding: 0 0 4px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 62%);
  pointer-events: none;
}

/* ── Totals + CTA ── */
.section-cart .cart-bottom-fixed {
  padding: 14px 20px 18px !important;
  border-top: 1px solid #f1efea !important;
  background: linear-gradient(180deg, #ffffff 0%, #fdfcfb 100%) !important;
}
.section-cart .cart-summary .d-flex { padding: 3px 0 !important; }
.section-cart .cart-summary .d-flex > div { font-size: 12.5px !important; color: #7b8190 !important; }
/* the total line closes the list, so it gets the rule and the weight */
.section-cart .cart-summary .d-flex:has(h6) {
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid #f1efea !important;
}
.section-cart .cart-summary .d-flex h6 { font-size: 18px !important; }

.section-cart .btn-green,
#vue-cart .btn-green {
  padding: 15px 18px !important;
  border-radius: 14px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  margin-top: 12px !important;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease !important;
}
.section-cart .btn-green:hover,
#vue-cart .btn-green:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px -12px rgba(225,33,20,.85) !important;
}
.section-cart .btn-green:active,
#vue-cart .btn-green:active { transform: translateY(0) !important; }
/* The total rides in its own chip so it reads as a figure, not a second
   label. Checkout renders it as the second .flex-col (carrying an inline
   font-size, hence the !important); Place Order as .place-order-total. */
.section-cart .btn-green > .flex-col:nth-child(2),
#vue-cart .btn-green > .flex-col:nth-child(2),
.section-cart .btn-green .place-order-total,
#vue-cart .btn-green .place-order-total {
  background: rgba(255,255,255,.16);
  border-radius: 9px;
  padding: 3px 10px;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  line-height: 1.35;
}

/* ── Basket line: the total belongs on the item's first line ───────────
   The right column stacked the remove button above the line total, so the
   total floated to wherever the name's second line happened to fall — a few
   pixels under the unit price on a short name, well above it on a long one.
   Reversing the column puts the total level with the first line of the name,
   the way every other row on the page reads, and drops the remove button
   underneath it. */
.section-cart .line-items > .col-3.quantity,
.section-cart .line-items > .col-3.quantity.d-flex.justify-content-start.flex-column {
  flex-direction: column-reverse !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding-left: 14px !important;
}
.section-cart .line-items > .col-3.quantity > .item-remove { margin-bottom: 0 !important; }
/* first line of the name and the total share a line box */
.section-cart .line-items > .col-3.quantity > p,
.section-cart .line-items > .col-3.quantity p.mb-0 {
  line-height: 1.4 !important;
  padding-top: 0 !important;
}
.section-cart .line-items .col-6 p:first-child { margin-top: 0 !important; }
/* the unit price is a footnote to the name, not a second figure competing
   with the total */
.section-cart .line-items .font11,
.section-cart .line-items .col-6 p.font11,
.section-cart .line-items .col-6 p.m-0.font11 {
  font-size: 10.5px !important;
  color: #b3b8c2 !important;
}

/* ── Basket list: an arrow instead of a scrollbar ─────────────────────
   The items list keeps scrolling, but the bar is gone; the button at the
   foot is the way down and, once you reach the end, the way back up. Same
   control the order-tracking panel uses. */
.section-cart .cart-items-scroll {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.section-cart .cart-items-scroll::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

.cart-scroll-zone {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* the fade tells you there is more below; it goes when you reach the end */
.cart-scroll-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 82%);
  opacity: 0;
  transition: opacity .22s ease;
  z-index: 2;
}
.cart-scroll-fade.is-on { opacity: 1; }

.cart-scroll-btn {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e6e4df;
  border-radius: 50%;
  background: #fff;
  color: #6b7280;
  box-shadow: 0 3px 10px -4px rgba(16,24,40,.35);
  cursor: pointer;
  z-index: 3;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cart-scroll-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(225,33,20,.7);
}
.cart-scroll-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cart-scroll-btn i {
  font-size: 19px;
  line-height: 1;
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.cart-scroll-btn.is-up i { transform: rotate(180deg); }

/* the list needs room under the last row so the button never covers it */
.section-cart .cart-items-scroll { padding-bottom: 34px !important; }

/* the old decorative hint is replaced by the button */
.cart-scroll-hint { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   ABOUT THIS PLACE (9 Sep 2026)

   The section was built before the menu above it was, and it shows: a cool
   blue-grey ground under the menu's warm cream, cards at a different radius
   with a different border and a double shadow, and a blue accent on the
   opening-hours card that appears nowhere else on the site. The map ran
   520px tall against cards half that, and the two header facts sat stacked
   in the far corner like an afterthought.

   Same content, same structure — retuned so it belongs to the same page.
   ══════════════════════════════════════════════════════════════════ */

/* ── Ground: continue the menu's cream, not a second grey ── */
.rdi-section,
.rdi-gallery {
  background: #f6f5f2 !important;
}
.rdi-section {
  padding: 52px 0 60px;
  border-top: 1px solid #edeae3;
  border-bottom: 0;
}
/* the anchor has to clear whatever the header currently measures */
.rdi-anchor { top: calc((var(--nav-h, 88px) + 24px) * -1); }

/* ── Header ── */
.rdi-badge {
  padding: 7px 15px;
  font-size: 10.5px;
  letter-spacing: .14em;
}
.rdi-title { margin: 18px 0 10px; letter-spacing: -.035em; }
.description.rdi-desc { max-width: 620px; }

/* the two facts read as one block, side by side, not stacked in the corner */
.rdi-quick-info {
  flex-direction: row;
  gap: 12px;
}
.rdi-quick-item {
  min-width: 210px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid #e8e6e1;
  box-shadow: 0 1px 3px rgba(16,24,40,.03);
}
.rdi-quick-icon { border-radius: 11px; background: var(--brand-light); }
.rdi-quick-label { letter-spacing: .12em; font-size: 10px; }

/* ── Cards + map share one frame ── */
.rdi-card,
.rdi-map-container {
  border-radius: 20px !important;
  border: 1px solid #e8e6e1 !important;
  box-shadow: 0 1px 3px rgba(16,24,40,.04) !important;
}
.rdi-content { gap: 26px; }
.rdi-cards { gap: 22px; }
.rdi-map-image { min-height: 440px; }

/* map overlay: a card foot, not a floating panel */
.rdi-map-overlay { left: 14px; right: 14px; bottom: 14px; }
.rdi-map-overlay-inner {
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 6px 22px -10px rgba(16,24,40,.45);
}
.rdi-map-tag { letter-spacing: .13em; }
.rdi-map-btn {
  padding: 9px 14px;
  border-radius: 10px;
  background: #16181f;
}

/* ── Card headers ── */
.rdi-card-header { padding: 22px 24px 0; gap: 13px; }
.rdi-card-icon { border-radius: 13px; background: var(--brand-light); }
/* the hours card was the only blue thing on the page */
.rdi-card-icon--hours {
  background: #f2f3f6;
  color: #4b5160;
}
.rdi-card-title { font-size: 16.5px; }

/* ── Address ── */
.rdi-address-block {
  background: #faf9f6;
  border: 1px solid #f0ede6;
  border-radius: 12px;
  padding: 13px 15px;
}
.rdi-btn-direction {
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 13px;
  letter-spacing: .06em;
}
.rdi-btn-direction:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(225,33,20,.85);
}

/* ── Opening hours ── */
.rdi-today-banner {
  background: var(--brand-light);
  border: 1px solid rgba(225,33,20,.14);
  border-radius: 12px;
  padding: 13px 15px;
}
.rdi-today-label { letter-spacing: .12em; color: #8b90a0; }
.rdi-hours-list { margin-top: 2px; }
.rdi-hours-row {
  padding: 11px 14px;
  border-radius: 10px;
  border-bottom: 1px solid #f4f2ee;
}
.rdi-hours-row:last-child { border-bottom: 0; }
.rdi-hours-row:hover { background: #faf9f6; }
.rdi-hours-row--active {
  background: var(--brand-light);
  border-bottom-color: transparent;
}
.rdi-hours-row--active .rdi-hours-day,
.rdi-hours-row--active .rdi-hours-time { color: var(--brand); }

/* ── Gallery ── */
.rdi-gitem,
.rdi-gitem figure { border-radius: 16px; }
.rdi-gitem { box-shadow: 0 1px 3px rgba(16,24,40,.05); }

/* ── Responsive ── */
@media (max-width: 1199px) {
  .rdi-content { grid-template-columns: 1fr; }
  .rdi-map-wrapper { position: static; }
  .rdi-map-image { min-height: 320px; }
}
@media (max-width: 991px) {
  .rdi-header { flex-direction: column; gap: 24px; }
  .rdi-header-right { width: 100%; }
  .rdi-quick-info { width: 100%; }
  .rdi-quick-item { flex: 1 1 0; min-width: 0; }
  .rdi-section { padding: 40px 0 44px; }
}
@media (max-width: 575px) {
  .rdi-quick-info { flex-direction: column; }
  .rdi-map-overlay-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rdi-map-btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
   ABOUT THIS PLACE — v2 (9 Sep 2026)

   The first pass only harmonised colours and radii; the section was still
   five boxes floating on a flat ground, and a seven-row list of
   "3:00 PM - 10:15 PM" that you have to read line by line to learn
   anything. Rebuilt around two ideas:

   1. One panel. The map is a face of it, not a card beside it, and the
      contact facts are hairline-separated rows inside the same frame —
      structure from rules and spacing, not from more boxes.
   2. The week is drawn, not listed. Every day's opening window is a bar on
      one shared scale, so which days run long, which open late, and where
      "now" falls all read in a single glance. The scale is the week's own
      span, so a kitchen that opens at three doesn't spend half the width
      on an empty morning.
   ══════════════════════════════════════════════════════════════════ */

/* ── Header ── */
.ab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}
.ab-head-main { flex: 1; min-width: 0; }

/* one live fact beats two static ones: is it open, and until when */
.ab-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px 13px 17px;
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(16,24,40,.04);
  margin-top: 6px;
}
.ab-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #9aa1ad;
}
.ab-status.is-open .ab-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.16);
  animation: ab-pulse 2.4s ease-in-out infinite;
}
.ab-status.is-shut .ab-status-dot { background: #c6cad3; }
@keyframes ab-pulse { 0%,100%{ box-shadow:0 0 0 4px rgba(34,197,94,.16);} 50%{ box-shadow:0 0 0 7px rgba(34,197,94,.05);} }
.ab-status-text { display: flex; flex-direction: column; line-height: 1.35; }
.ab-status-text strong {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -.01em;
}
.ab-status-text span { font-size: 12px; color: #8b90a0; }

.ab-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a8aeba;
  margin-bottom: 4px;
}

/* ── The panel ── */
.ab-panel {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 22px;
  box-shadow: 0 1px 3px rgba(16,24,40,.04);
  overflow: hidden;
}

.ab-map { position: relative; min-height: 380px; background: #eceef2; }
.ab-map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ab-map-foot {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px -12px rgba(16,24,40,.5);
}
.ab-map-foot-text { min-width: 0; }
.ab-map-foot-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #374151;
  font-weight: 600;
}
.ab-map-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #16181f;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .18s ease;
}
.ab-map-btn:hover { background: var(--brand); }

/* facts: rules, not boxes */
.ab-facts {
  display: flex;
  flex-direction: column;
  padding: 6px 26px 22px;
  border-left: 1px solid #f1efea;
}
.ab-fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid #f4f2ee;
}
.ab-fact:last-of-type { border-bottom: 0; }
.ab-fact-ico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  border: 1px solid #eceae5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-size: 17px;
}
.ab-fact-body { min-width: 0; }
.ab-fact-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ab-fact-body a { color: #111827 !important; text-decoration: none !important; }
.ab-fact-body a:hover { color: var(--brand) !important; }

.ab-direction {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 20px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff !important;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ab-direction:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(225,33,20,.85);
}

/* ── The week ── */
.ab-week {
  margin-top: 26px;
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 22px;
  box-shadow: 0 1px 3px rgba(16,24,40,.04);
  padding: 24px 26px 20px;
}
.ab-week-head {
  display: grid;
  grid-template-columns: 128px 1fr 132px;
  align-items: end;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1efea;
  margin-bottom: 6px;
}
.ab-week-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #111827;
  white-space: nowrap;
}
/* the scale is the only ruler; every bar below is measured against it */
.ab-week-scale {
  position: relative;
  display: block;
  height: 14px;
}
.ab-week-scale i {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #b3b8c2;
  white-space: nowrap;
}

.ab-week-list { list-style: none; margin: 0; padding: 0; }
.ab-day {
  display: grid;
  grid-template-columns: 128px 1fr 132px;
  align-items: center;
  gap: 18px;
  padding: 9px 10px 9px 0;
  border-radius: 10px;
  transition: background .16s ease;
}
.ab-day:hover { background: #faf9f6; }
.ab-day-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  padding-left: 10px;
}
.ab-day-track {
  position: relative;
  display: block;
  height: 12px;
  border-radius: 999px;
  background: #f2f1ed;
}
.ab-day-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0533f 0%, var(--brand) 100%);
  opacity: .55;
  transition: opacity .16s ease;
}
.ab-day:hover .ab-day-bar { opacity: .8; }
/* the bars carry the comparison now, so the strings support rather than
   shout — six identical times in hard black was just noise */
.ab-day-time {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: #7b8190;
  text-align: right;
  white-space: nowrap;
}
.ab-day-time em { font-style: normal; color: #c6cad3; }

.ab-day.is-closed .ab-day-time { color: #b3b8c2; font-weight: 500; }
.ab-day.is-closed .ab-day-track { background: repeating-linear-gradient(135deg, #f7f6f3 0 5px, #f2f1ed 5px 10px); }

.ab-day.is-today { background: var(--brand-light); }
.ab-day.is-today .ab-day-name { color: var(--brand); font-weight: 800; }
.ab-day.is-today .ab-day-time { color: var(--brand); font-weight: 800; }
.ab-day.is-today .ab-day-bar { opacity: 1; }
.ab-day.is-today .ab-day-track { background: rgba(225,33,20,.10); }

/* where we are in today's window */
.ab-day-now {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  border-radius: 2px;
  background: #16181f;
  transform: translateX(-1px);
  z-index: 2;
}
.ab-day-now::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16181f;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .ab-panel { grid-template-columns: 1fr; }
  .ab-map { min-height: 300px; }
  .ab-facts { border-left: 0; border-top: 1px solid #f1efea; padding: 6px 22px 20px; }
}
@media (max-width: 991px) {
  .ab-head { flex-direction: column; gap: 20px; }
  .ab-week-head,
  .ab-day { grid-template-columns: 84px 1fr; }
  .ab-week-head h3 { grid-column: 1 / -1; }
  .ab-week-scale { grid-column: 1 / -1; }
  .ab-day-time {
    grid-column: 2;
    text-align: left;
    font-size: 11.5px;
    margin-top: 2px;
  }
  .ab-day { padding: 8px 8px 8px 0; row-gap: 4px; }
}
@media (max-width: 575px) {
  .ab-map-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .ab-map-btn { justify-content: center; }
  .ab-week { padding: 20px 16px 16px; }
  .ab-week-head, .ab-day { grid-template-columns: 70px 1fr; gap: 12px; }
  .ab-day-name { padding-left: 4px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   ABOUT — v3: compact (9 Sep 2026)

   v2 fixed the concept and left the air: a 440px map beside two facts,
   with the direction button pushed to the foot of an empty column, and the
   week floating in a second frame below. Now everything lives in one
   panel — map, contact grid and the whole week — the map is only as tall
   as the facts beside it, and the space under the title carries the
   cuisine, rating, distance, photo count and whether they take bookings
   instead of nothing at all.
   ══════════════════════════════════════════════════════════════════ */

.rdi-section { padding: 44px 0 52px; }
.ab-head { margin-bottom: 22px; gap: 28px; }
.rdi-title { margin: 14px 0 0; }

/* ── Chips under the title ── */
.ab-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.ab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #e8e6e1;
  background: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: #5b6270;
  text-decoration: none !important;
  white-space: nowrap;
  transition: border-color .16s ease, color .16s ease;
}
.ab-chip i { font-size: 13px; color: #a8aeba; }
a.ab-chip:hover { border-color: rgba(225,33,20,.3); color: var(--brand); }
a.ab-chip:hover i { color: var(--brand); }
.ab-chip--star { border-color: #f2e2c4; background: #fffaf0; color: #8a6410; }
.ab-chip--star i { color: #e8a317; }
.ab-chip--star strong { color: #6b4c08; }
.ab-chip--star span { color: #b08a3c; font-weight: 500; }

.ab-status { margin-top: 4px; }

/* ── One panel, three parts ── */
/* v2 made .ab-panel the two-column grid; now that the week lives inside it
   too, the split moves down to .ab-panel-top or the week becomes a third
   column. */
.ab-panel {
  display: block;
  border-radius: 22px;
}
.ab-panel-top {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
}
.ab-map { min-height: 0; }
.ab-map-foot {
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 12px 14px;
  gap: 12px;
  border-radius: 12px;
}
.ab-map-foot-text p { font-size: 12.5px; }
.ab-map-btn { padding: 8px 12px; font-size: 11.5px; }

/* facts as a two-up grid — the column fills instead of stretching */
.ab-facts {
  padding: 22px 24px;
  gap: 0;
  justify-content: flex-start;
}
.ab-fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
}
.ab-fact {
  padding: 13px 0;
  gap: 12px;
  border-bottom: 1px solid #f4f2ee;
}
.ab-fact--wide { grid-column: 1 / -1; }
/* the last row of the grid carries no rule, whatever its length */
.ab-fact:nth-last-child(-n+2):nth-child(odd),
.ab-fact:nth-last-child(-n+2):nth-child(odd) ~ .ab-fact,
.ab-fact:last-child { border-bottom: 0; }
.ab-fact-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 15px;
}
.ab-fact-body strong { font-size: 13.5px; line-height: 1.45; }
.ab-eyebrow { font-size: 9.5px; margin-bottom: 3px; }

.ab-direction {
  margin-top: 16px;
  padding: 13px 20px;
  font-size: 13px;
}

/* ── The week, inside the same panel ── */
.ab-week {
  margin-top: 0;
  border: 0;
  border-top: 1px solid #eceae5;
  border-radius: 0;
  box-shadow: none;
  padding: 18px 24px 14px;
  background: #fdfcfb;
}
.ab-week-head { padding-bottom: 10px; margin-bottom: 2px; }
.ab-day { padding: 6px 10px 6px 0; }
.ab-day-track { height: 10px; }
.ab-day-name { font-size: 12.5px; }
.ab-day-time { font-size: 12px; }

@media (max-width: 1199px) {
  .ab-panel-top { grid-template-columns: 1fr; }
  .ab-map { min-height: 280px; }
  .ab-facts { border-left: 0; border-top: 1px solid #f1efea; padding: 18px 22px; }
}
@media (max-width: 767px) {
  .ab-fact-grid { grid-template-columns: 1fr; }
  .ab-fact--wide { grid-column: auto; }
  .ab-week { padding: 16px 16px 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   BASKET — sticky without the plugin (9 Sep 2026)

   The basket used StickySidebar. That plugin measures the panel once and,
   as soon as the panel is taller than the viewport, switches to
   bottom-anchored stickiness — `position:fixed; top:auto; bottom:0` —
   which pushes the top of the panel off the screen. Reproduced at a 460px
   viewport: the panel sat at top:-20px and, with a fuller basket or a
   shorter window, walks entirely out of view, then comes back on the way
   up. That is the reported disappearance.

   The panel already caps its height and scrolls its own list, so none of
   that behaviour was wanted. CSS sticky has nothing to measure and nothing
   to go stale. The plugin is no longer initialised on .sticky-cart, so the
   card styling moves off the wrapper it used to inject.
   ══════════════════════════════════════════════════════════════════ */

.menu-right .sticky-cart {
  position: sticky;
  top: calc(var(--nav-h, 88px) + 12px);
  display: flex;
  flex-direction: column;
  background: #ffffff !important;
  border: 1px solid #e8e6e1 !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgba(16,24,40,.04), 0 12px 32px -24px rgba(16,24,40,.5) !important;
  overflow: hidden !important;
  /* min-height beats max-height in CSS, so a flat 480px was what pushed the
     panel past the viewport on a short window in the first place */
  min-height: min(480px, calc(100vh - var(--nav-h, 88px) - 32px));
  max-height: calc(100vh - var(--nav-h, 88px) - 24px);
}

/* the plugin's wrapper no longer exists; if anything still renders one,
   let it be a plain pass-through rather than a second card */
.menu-right .sticky-cart .inner-wrapper-sticky {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  min-height: 0;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT HEADER — phones
   The three-column header row could not shrink, so the "Secure Checkout"
   badge sat 220px past the right edge and the whole checkout page scrolled
   sideways (scrollWidth 611 at a 390 viewport). Below 768px the badge and
   its ::after fallback twin go away and the columns are allowed to shrink.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px){
  .ck-layout-header #top-navigation .ck-nav-secure { display: none !important; }
  .ck-layout-header::after { display: none !important; content: none !important; }
  .ck-layout-header .ck-nav-row { flex-wrap: nowrap; }
  .ck-layout-header .ck-nav-row > [class*="col"] { min-width: 0; }
}

/* ═══ CHECKOUT HEADER — the sideways scroll on every width ═══
   The header columns are Bootstrap .col, whose base rule sets width:100%.
   The redesign re-flexed them to flex-basis:auto, so each column then asked
   for the full row: the row measured 1492px at a 1280px viewport (back-link
   column alone 1155px) and the whole checkout scrolled horizontally. Let the
   columns size to their content again. */
.ck-layout-header #top-navigation > [class*="col"] { width: auto !important; }
.ck-layout-header #top-navigation > .col.d-flex.justify-content-end,
.ck-layout-header #top-navigation > div:last-child { min-width: 0 !important; }

/* The header always renders the real .ck-nav-secure span (checkout_layout.php),
   so the ::after "fallback" badge only ever drew a second copy underneath it -
   visible as a doubled outline once the columns stopped overflowing. */
.ck-layout-header::after { display: none !important; content: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT v3 — "cx-" design (10 Sep 2026)
   The page is a header with live progress, four numbered section cards and a
   sticky order summary. Everything is scoped to .cx-page so the earlier
   .ck-* layers no longer apply; the shared cart partial is restyled under
   .cx-summary with the specificity it needs to beat the menu basket rules.
   ═══════════════════════════════════════════════════════════════════════ */
.cx-page{
  --cx-bg:#f5f6f8; --cx-card:#fff;
  --cx-line:#e8ebf0; --cx-line-2:#f0f2f5;
  --cx-ink:#111827; --cx-ink-2:#374151; --cx-muted:#6b7280; --cx-faint:#9ca3af;
  --cx-brand:#e12114; --cx-brand-2:#c81b10; --cx-tint:#fff1f0; --cx-tint-2:#ffe1de; --cx-tint-line:#f5c5c1;
  --cx-ok:#15803d; --cx-ok-bg:#ecfdf5; --cx-ok-line:#bbf7d0;
  --cx-warn:#b45309; --cx-warn-bg:#fffbeb; --cx-warn-line:#fde68a;
  --cx-radius:18px;
  --cx-shadow:0 1px 2px rgba(16,24,40,.04), 0 14px 34px -22px rgba(16,24,40,.24);
  background:var(--cx-bg);
  min-height:100vh;
  padding:34px 0 84px;
  color:var(--cx-ink);
}
.cx-page [v-cloak]{ display:none !important; }
.cx-page *, .cx-page *::before, .cx-page *::after{ box-sizing:border-box; }
.cx-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cx-dot{ margin:0 6px; color:var(--cx-faint); }

/* ── Page header ── */
.cx-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 26px; padding:0 14px; }
.cx-head__text{ min-width:0; }
.cx-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font:600 11px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase;
  color:var(--cx-ok); background:var(--cx-ok-bg); border:1px solid var(--cx-ok-line);
  border-radius:999px; padding:7px 11px 7px 9px;
}
.cx-eyebrow i{ font-size:13px; }
.cx-title{ font:800 30px/1.15 var(--font-display); letter-spacing:-.02em; margin:12px 0 6px !important; color:var(--cx-ink); }
.cx-lead{ margin:0; font-size:14.5px; color:var(--cx-muted); }
.cx-lead strong{ color:var(--cx-ink); font-weight:700; }

.cx-steps{
  list-style:none; margin:0; padding:6px 8px;
  display:flex; align-items:center;
  background:#fff; border:1px solid var(--cx-line); border-radius:999px; box-shadow:var(--cx-shadow);
}
.cx-steps__item{
  display:flex; align-items:center; gap:9px; padding:6px 14px 6px 8px;
  color:var(--cx-faint); font:600 13px/1 var(--font-display); white-space:nowrap;
}
.cx-steps__item + .cx-steps__item::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--cx-line); margin-right:14px; }
.cx-steps__num{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f3f4f6; color:var(--cx-muted); font:700 12px/1 var(--font-display);
  transition:background .2s, color .2s, box-shadow .2s;
}
.cx-steps__num i{ display:none; font-size:15px; }
.cx-steps__item.is-current{ color:var(--cx-ink); }
.cx-steps__item.is-current .cx-steps__num{ background:var(--cx-brand); color:#fff; box-shadow:0 0 0 4px var(--cx-tint); }
.cx-steps__item.is-done{ color:var(--cx-ink-2); }
.cx-steps__item.is-done .cx-steps__num{ background:var(--cx-ok); color:#fff; }
.cx-steps__item.is-done .cx-steps__num span{ display:none; }
.cx-steps__item.is-done .cx-steps__num i{ display:block; }
.cx-steps__item.is-done + .cx-steps__item::before{ background:var(--cx-ok); }

/* ── Grid ── */
.cx-row{ align-items:flex-start; }
.cx-main, .cx-side{ padding:0 14px; }

/* ── Section cards ── */
.cx-section{
  background:var(--cx-card); border:1px solid var(--cx-line); border-radius:var(--cx-radius);
  box-shadow:var(--cx-shadow); margin-bottom:18px;
}
.cx-section__head{ display:flex; align-items:center; gap:16px; padding:22px 26px 0; }
.cx-step{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cx-tint); color:var(--cx-brand); font:800 15px/1 var(--font-display);
  transition:background .2s, color .2s;
}
.cx-step i{ display:none; font-size:19px; }
.cx-step.is-done{ background:var(--cx-ok-bg); color:var(--cx-ok); }
.cx-step.is-done span{ display:none; }
.cx-step.is-done i{ display:block; }
.cx-step--icon{ background:#f3f4f6; color:var(--cx-ink-2); font-size:18px; }
.cx-section__titles{ flex:1 1 auto; min-width:0; }
.cx-section__title{ font:700 18px/1.25 var(--font-display) !important; letter-spacing:-.01em; margin:0 !important; color:var(--cx-ink) !important; }
.cx-section__sub{ margin:3px 0 0; font-size:13px; color:var(--cx-muted); line-height:1.4; }
.cx-section__actions{ flex:0 0 auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.cx-section__body{ padding:18px 26px 24px; position:relative; }
.cx-stack > * + *{ margin-top:10px; }
.cx-stack > :empty{ display:none; }
.cx-skel-row{ padding:8px 0; }
.cx-secure-pill{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:7px 11px;
  border-radius:999px; background:var(--cx-ok-bg); color:var(--cx-ok); border:1px solid var(--cx-ok-line);
  font:600 12px/1 var(--font-display);
}

/* ── Option rows ── */
.cx-option{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-radius:14px; background:#f8f9fb; border:1px solid var(--cx-line-2);
  color:var(--cx-ink) !important; text-decoration:none !important;
  transition:border-color .18s, background .18s, box-shadow .18s, transform .18s;
  margin:0;
}
a.cx-option:hover{ background:#fff; border-color:var(--cx-tint-line); box-shadow:0 10px 26px -18px rgba(225,33,20,.45); transform:translateY(-1px); }
.cx-option__icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  background:#fff; border:1px solid var(--cx-line);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--cx-brand); font-size:17px; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.cx-option__icon--gift{ color:#b45309; }
.cx-option--promo .cx-option__icon{ color:#b45309; background:#fff7ed; border-color:#fed7aa; }
.cx-option__text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cx-option__kicker{ font:600 11px/1.2 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--cx-faint); }
.cx-option__label{ font:600 15px/1.3 var(--font-display); color:var(--cx-ink); overflow:hidden; text-overflow:ellipsis; }
.cx-option__meta{ font-size:13px; color:var(--cx-muted); line-height:1.35; }
.cx-option__ok{ display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--cx-ok); font-weight:600; }
.cx-option__ok i{ font-size:15px; }
.cx-option__error{ display:flex; flex-direction:column; gap:2px; margin-top:3px; font-size:12.5px; font-weight:600; color:var(--cx-brand); }
.cx-option__action{ flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; font:600 13px/1 var(--font-display); color:var(--cx-brand); }
.cx-option__action i{ font-size:19px; line-height:1; }
.cx-option--static{ cursor:default; }
.cx-option__btns{ flex:0 0 auto; display:flex; gap:4px; align-items:center; }
.cx-option__btns .el-button{ font-family:var(--font-display); font-weight:600; }
.cx-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px;
  border-radius:999px; background:var(--cx-brand); color:#fff; font:700 12px/1 var(--font-display); margin-right:4px; vertical-align:middle;
}
.cx-option--toggle{ cursor:pointer; }
.cx-switch{ flex:0 0 auto; margin:0; padding-left:2.6rem; min-height:24px; position:relative; }
.cx-switch .custom-control-label{ cursor:pointer; }
.cx-switch .custom-control-input:checked ~ .custom-control-label::before{ background:var(--cx-brand); border-color:var(--cx-brand); }

/* ── Tips ── */
.cx-tips{ padding:16px; border-radius:14px; background:#f8f9fb; border:1px solid var(--cx-line-2); }
.cx-tips__head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.cx-tips__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cx-chip{
  position:relative; margin:0; cursor:pointer; padding:10px 15px; border-radius:999px;
  border:1px solid var(--cx-line); background:#fff; font:600 13px/1 var(--font-display); color:var(--cx-ink-2);
  transition:background .15s, border-color .15s, color .15s;
}
.cx-chip input{ position:absolute; opacity:0; pointer-events:none; }
.cx-chip:hover{ border-color:#d1d5db; }
.cx-chip.is-active{ background:var(--cx-brand); border-color:var(--cx-brand); color:#fff; }
.cx-tips__custom{ display:flex; gap:10px; margin-top:12px; }
.cx-tips__custom .cx-input{ max-width:160px; }

/* ── Buttons & fields ── */
.cx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 20px; border-radius:12px; border:1px solid transparent;
  font:700 14px/1 var(--font-display); transition:background .15s, transform .15s, box-shadow .15s; position:relative;
}
.cx-btn--brand{ background:var(--cx-brand); color:#fff !important; box-shadow:0 8px 20px -12px rgba(225,33,20,.6); }
.cx-btn--brand:hover{ background:var(--cx-brand-2); color:#fff !important; }
.cx-btn--dark{ background:var(--cx-ink); color:#fff !important; }
.cx-btn--dark:hover{ background:#000; }
.cx-btn--block{ width:100%; height:52px; margin-top:18px; }
.cx-link-btn{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:10px;
  border:1px solid var(--cx-line); background:#fff; color:var(--cx-ink-2);
  font:600 13px/1 var(--font-display); cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
}
.cx-link-btn i{ font-size:16px; }
.cx-link-btn:hover{ background:#f9fafb; border-color:#d1d5db; color:var(--cx-ink); }
.cx-link-btn--brand{ color:var(--cx-brand); border-color:var(--cx-tint-line); background:var(--cx-tint); }
.cx-link-btn--brand:hover{ background:var(--cx-tint-2); border-color:var(--cx-tint-line); color:var(--cx-brand-2); }
.cx-icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--cx-line); background:#fff; color:var(--cx-ink-2);
  display:inline-flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer; padding:0;
  transition:background .15s, border-color .15s, color .15s;
}
.cx-icon-btn:hover{ background:#f9fafb; border-color:#d1d5db; }
.cx-icon-btn--danger:hover{ color:var(--cx-brand); border-color:var(--cx-tint-line); background:var(--cx-tint); }
.cx-field-label{
  display:block; font:600 12px/1.2 var(--font-display); letter-spacing:.06em; text-transform:uppercase;
  color:var(--cx-muted); margin:16px 0 8px;
}
.cx-field-label--row{ display:flex; align-items:center; gap:4px; }
.cx-field-label--row .el-button{ padding:0; height:auto; color:var(--cx-faint); }
.cx-select, .cx-textarea, .cx-input{
  border-radius:12px !important; border:1px solid var(--cx-line) !important; box-shadow:none !important;
  font-size:14px !important; color:var(--cx-ink) !important; background:#fff !important;
}
.cx-select{ height:48px !important; padding:0 14px !important; }
.cx-textarea{ min-height:96px !important; padding:12px 14px !important; }
.cx-input{ height:46px !important; padding:0 14px !important; }
.cx-select:focus, .cx-textarea:focus, .cx-input:focus{ border-color:var(--cx-brand) !important; box-shadow:0 0 0 3px var(--cx-tint) !important; }
.cx-field-error{ margin:6px 0 0; font-size:12.5px; font-weight:600; color:var(--cx-brand); }
.cx-toggle{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px; }
.cx-toggle .btn{
  flex:0 0 auto; border-radius:999px !important; border:1px solid var(--cx-line) !important; background:#fff !important;
  color:var(--cx-ink-2) !important; font:600 13px/1 var(--font-display) !important; padding:11px 16px !important; box-shadow:none !important;
}
.cx-toggle .btn.active{ background:var(--cx-brand) !important; border-color:var(--cx-brand) !important; color:#fff !important; }
.cx-toggle .btn input{ position:absolute; opacity:0; pointer-events:none; }
.cx-booking{ padding:16px; border-radius:14px; background:#f8f9fb; border:1px solid var(--cx-line-2); }
.cx-booking__label{ font:700 14px/1.3 var(--font-display); margin-bottom:8px; }
.cx-booking .cx-field-label{ margin-top:6px; }
.cx-notice{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; font-size:13.5px; margin-top:12px; }
.cx-notice i{ font-size:17px; margin-top:1px; }
.cx-notice--info{ background:#eff6ff; color:#1e3a8a; border:1px solid #bfdbfe; }

/* ── Address ── */
.cx-address{
  position:relative; display:flex; gap:14px; align-items:flex-start;
  padding:18px 18px 18px 16px; border-radius:16px; border:1px solid var(--cx-line); background:#fff;
  transition:border-color .18s, box-shadow .18s;
}
.cx-address.is-selected{ border-color:var(--cx-brand); box-shadow:0 0 0 3px var(--cx-tint); }
.cx-address__radio{ flex:0 0 auto; padding-top:3px; }
.cx-address__radio .el-radio{ margin:0 !important; height:auto !important; }
.cx-address__radio .el-radio__label{ padding:0 !important; }
.cx-address__radio .el-radio__inner{ width:20px !important; height:20px !important; }
.cx-address__radio .el-radio__inner::after{ width:8px !important; height:8px !important; }
.cx-address__radio .el-radio__input.is-checked .el-radio__inner{ background:var(--cx-brand) !important; border-color:var(--cx-brand) !important; }
.cx-address__body{ flex:1 1 auto; min-width:0; }
.cx-address__tag{
  display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px;
  background:var(--cx-tint); color:var(--cx-brand); font:700 11px/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:9px;
}
.cx-address__tag i{ font-size:13px; }
.cx-address__line1{ margin:0 !important; font:600 15px/1.35 var(--font-display); color:var(--cx-ink); }
.cx-address__line2{ margin:3px 0 0 !important; font-size:13.5px; color:var(--cx-muted); line-height:1.45; }
.cx-address__note{
  margin:10px 0 0 !important; display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--cx-ink-2);
  background:#f8f9fb; border:1px dashed var(--cx-line); border-radius:10px; padding:8px 10px;
}
.cx-address__note i{ color:var(--cx-faint); font-size:15px; margin-top:1px; }
.cx-address__actions{ flex:0 0 auto; display:flex; gap:6px; }

.cx-form{ display:flex; flex-direction:column; }
.cx-map{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--cx-line); margin-bottom:14px; background:#f3f4f6; }
.cx-address-pick{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  background:#f8f9fb; border:1px solid var(--cx-line-2); margin-bottom:16px;
}
.cx-address-pick__icon{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:#fff; border:1px solid var(--cx-line);
  display:inline-flex; align-items:center; justify-content:center; color:var(--cx-brand); font-size:18px;
}
.cx-address-pick__text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cx-address-pick__value{ font:600 14px/1.35 var(--font-display); color:var(--cx-ink); }
.cx-address-pick__value--empty{ color:var(--cx-muted); font-weight:500; }
.cx-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.cx-form .form-label-group{ margin-bottom:12px; }
.cx-form .form-label-group > input{ border-radius:12px !important; border:1px solid var(--cx-line) !important; box-shadow:none !important; font-size:14px; }
.cx-form .form-label-group > input:focus{ border-color:var(--cx-brand) !important; box-shadow:0 0 0 3px var(--cx-tint) !important; }
.cx-form .form-label-group > label{ color:var(--cx-faint); font-size:13px; }

/* ── Payment ── */
.cx-subhead{ font:700 12px/1.2 var(--font-display) !important; letter-spacing:.1em; text-transform:uppercase; color:var(--cx-muted) !important; margin:0 0 12px !important; }
.cx-subhead--gap{ margin-top:24px !important; }
.cx-pay-list{ display:flex; flex-direction:column; gap:10px; }
.cx-pay{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px;
  border:1px solid var(--cx-line); background:#fff; transition:border-color .18s, box-shadow .18s, background .18s;
}
.cx-pay--active{ border-color:var(--cx-brand); background:#fffafa; box-shadow:0 0 0 3px var(--cx-tint); }
.cx-pay__logo, .cx-pay-tile__logo{
  flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:#f3f4f6; border:1px solid var(--cx-line);
  display:inline-flex; align-items:center; justify-content:center; font-size:21px; color:var(--cx-ink-2); overflow:hidden;
}
.cx-pay__logo img, .cx-pay-tile__logo img{ width:30px; height:30px; object-fit:contain; }
.cx-pay__info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cx-pay__name{ font:600 14.5px/1.3 var(--font-display); color:var(--cx-ink); }
.cx-pay__fee, .cx-pay-tile__fee{ font-size:12px; color:var(--cx-muted); font-weight:500; }
.cx-pay__detail{ font-size:13px; color:var(--cx-muted); }
.cx-pay__right{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.cx-pay__default{
  display:inline-flex; align-items:center; gap:4px; padding:6px 9px; border-radius:999px;
  background:var(--cx-ok-bg); color:var(--cx-ok); font:700 11px/1 var(--font-display); letter-spacing:.04em; text-transform:uppercase;
}
.cx-pay__more{
  width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--cx-muted) !important; font-size:19px; border:1px solid transparent; text-decoration:none !important;
}
.cx-pay__more:hover{ background:#f3f4f6; color:var(--cx-ink) !important; }
.cx-menu{ border-radius:12px; border:1px solid var(--cx-line); box-shadow:0 14px 34px -14px rgba(16,24,40,.35); padding:6px; min-width:160px; }
.cx-menu .dropdown-item{ border-radius:8px; font-size:13.5px; padding:8px 12px; color:var(--cx-ink-2); }
.cx-menu .dropdown-item:hover{ background:#f3f4f6; color:var(--cx-ink); }
.cx-menu__danger{ color:var(--cx-brand) !important; }
.cx-menu__danger:hover{ background:var(--cx-tint) !important; }
.cx-pay-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.cx-pay-tile{
  display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:72px; border-radius:14px;
  border:1px solid var(--cx-line); background:#fff; color:var(--cx-ink) !important; text-decoration:none !important;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.cx-pay-tile:hover{ border-color:var(--cx-tint-line); box-shadow:0 12px 26px -18px rgba(225,33,20,.45); transform:translateY(-1px); }
.cx-pay-tile__text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cx-pay-tile__name{ font:600 14px/1.3 var(--font-display); }
.cx-pay-tile__add{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--cx-line);
  display:inline-flex; align-items:center; justify-content:center; color:var(--cx-muted); font-size:16px;
  transition:background .15s, color .15s, border-color .15s;
}
.cx-pay-tile:hover .cx-pay-tile__add{ background:var(--cx-brand); border-color:var(--cx-brand); color:#fff; }
/* brand tints and letter marks for methods whose logo is the site placeholder */
.cx-pay__mark{ font:800 13px/1 var(--font-display); letter-spacing:-.02em; }
.cx-pay__mark::before{ content:"PAY"; font-size:10px; letter-spacing:.04em; }
[data-code="paypal"]{ background:#eef4ff !important; color:#003087 !important; border-color:#dbe7ff !important; }
[data-code="paypal"] .cx-pay__mark::before{ content:"PP"; font-size:13px; letter-spacing:-.02em; }
[data-code="stripe"]{ background:#efedff !important; color:#635bff !important; border-color:#dedbff !important; }
[data-code="stripe"] .cx-pay__mark::before{ content:"S"; font-size:17px; }
[data-code="mercadopago"]{ background:#e6f6fd !important; color:#009ee3 !important; border-color:#c9ecfb !important; }
[data-code="mercadopago"] .cx-pay__mark::before{ content:"MP"; font-size:13px; letter-spacing:-.02em; }
[data-code="razorpay"]{ background:#e9f2ff !important; color:#0c2451 !important; border-color:#d4e4ff !important; }
[data-code="razorpay"] .cx-pay__mark::before{ content:"R"; font-size:17px; }
[data-code="cod"]{ background:var(--cx-ok-bg) !important; color:var(--cx-ok) !important; border-color:var(--cx-ok-line) !important; }
[data-code="paydelivery"]{ background:#fff7ed !important; color:#c2410c !important; border-color:#fed7aa !important; }
[data-code="ocr"]{ background:#eef2ff !important; color:#3730a3 !important; border-color:#c7d2fe !important; }
[data-code="bank"]{ background:#f1f5f9 !important; color:#334155 !important; border-color:#e2e8f0 !important; }
.cx-cod{ margin-top:14px; padding:14px 16px; border-radius:14px; background:#f8f9fb; border:1px solid var(--cx-line-2); }
.cx-cod .cx-field-label{ margin-top:0; }

/* ── Order summary ── */
.cx-summary{
  position:sticky; top:92px;
  display:flex; flex-direction:column; max-height:calc(100vh - 108px);
  background:#fff; border:1px solid var(--cx-line); border-radius:var(--cx-radius);
  box-shadow:var(--cx-shadow); overflow:hidden;
}
.cx-summary__merchant{
  flex:0 0 auto; display:flex; gap:12px; align-items:center; padding:18px 20px;
  border-bottom:1px solid var(--cx-line-2); background:linear-gradient(180deg,#fff,#fafbfc);
}
.cx-summary__logo{ width:46px !important; height:46px !important; border-radius:50% !important; flex:0 0 auto; border:1px solid var(--cx-line); background:#fff; overflow:hidden; }
.cx-summary__logo img{ width:100%; height:100%; object-fit:cover; }
.cx-summary__merchant-text{ min-width:0; }
.cx-summary__name{
  display:block; font:700 15px/1.3 var(--font-display); color:var(--cx-ink) !important; text-decoration:none !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cx-summary__meta{
  margin:2px 0 0 !important; font-size:12.5px; color:var(--cx-muted); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cx-summary__body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.cx-summary__body > .el-skeleton{ padding:16px 20px; }
.cx-summary__trust{
  flex:0 0 auto; display:flex; gap:8px; align-items:flex-start; padding:12px 20px 16px;
  font-size:12px; color:var(--cx-muted); line-height:1.45; border-top:1px solid var(--cx-line-2); background:#fafbfc;
}
.cx-summary__trust i{ color:var(--cx-ok); font-size:15px; margin-top:1px; }

/* the shared cart partial inside the summary */
.cx-summary .basket-header-wrap{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding:16px 20px 4px !important; margin:0 !important; border:0 !important; background:transparent !important;
}
.cx-summary .basket-header-left h5{
  font:700 15px/1.2 var(--font-display) !important; margin:0 !important; color:var(--cx-ink) !important;
  letter-spacing:0 !important; text-transform:none !important;
}
.cx-summary .cart-subtitle{ display:none !important; }
.cx-summary .basket-header-right{ display:flex !important; align-items:center !important; gap:8px !important; }
.cx-summary .basket-icon{ display:none !important; }
.cx-summary .basket-header-total{
  font:700 13px/1 var(--font-display) !important; color:var(--cx-ink) !important;
  background:#f3f4f6 !important; border:0 !important; border-radius:999px !important; padding:7px 11px !important;
}
.cx-summary .basket-header-wrap + .d-flex{
  padding:0 20px 6px !important; margin:0 !important; border:0 !important; align-items:center !important; background:transparent !important;
}
.cx-summary .basket-header-wrap + .d-flex h6{
  font:600 11px/1.2 var(--font-display) !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  color:var(--cx-faint) !important; margin:0 !important;
}
.cx-summary .basket-header-wrap + .d-flex a{ text-decoration:none !important; }
.cx-summary .basket-header-wrap + .d-flex a p{
  margin:0 !important; font:600 12px/1 var(--font-display) !important; color:var(--cx-muted) !important;
  padding:6px 9px !important; border-radius:8px !important; background:transparent !important; transition:background .15s, color .15s;
}
.cx-summary .basket-header-wrap + .d-flex a p u{ text-decoration:none !important; }
.cx-summary .basket-header-wrap + .d-flex a:hover p{ background:var(--cx-tint) !important; color:var(--cx-brand) !important; }

.cx-summary .section-cart{
  display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important;
  overflow:hidden !important; background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important;
  border-radius:0 !important; box-shadow:none !important;
}
.cx-summary .cart-scroll-zone{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; position:relative; }
.cx-summary .cart-items-scroll{
  flex:1 1 auto !important; min-height:132px !important; max-height:none !important; overflow-y:auto !important;
  padding:2px 20px 14px !important; margin:0 !important;
}
.cx-summary .section-cart .items{
  padding:0 !important; margin:0 !important; border:0 !important; border-bottom:1px solid var(--cx-line-2) !important;
  background:transparent !important; border-radius:0 !important;
}
.cx-summary .section-cart .items:last-child{ border-bottom:0 !important; }
.cx-summary .section-cart .items:hover{ background:transparent !important; }
.cx-summary .section-cart .line-items.row{
  display:grid !important; grid-template-columns:46px minmax(0,1fr) auto !important; gap:0 12px !important;
  align-items:start !important; padding:13px 0 !important; margin:0 !important;
}
.cx-summary .section-cart .line-items > .col-3:first-child,
.cx-summary .section-cart .line-items > .col-6,
.cx-summary .section-cart .line-items > .col-3.quantity{
  padding:0 !important; max-width:none !important; flex:none !important; width:auto !important; min-width:0;
}
.cx-summary .cart-image-preview{ width:46px; height:46px; }
.cx-summary .cart-image-preview .el-image{ width:46px !important; height:46px !important; border-radius:12px !important; overflow:hidden !important; border:1px solid var(--cx-line) !important; background:#f3f4f6; }
.cx-summary .section-cart .line-items > .col-6{ display:flex !important; flex-direction:column !important; gap:3px !important; }
.cx-summary .section-cart .line-items .col-6 p{ margin:0 !important; }
.cx-summary .section-cart .line-items .col-6 p:first-child{ font:600 14px/1.35 var(--font-display) !important; color:var(--cx-ink) !important; }
.cx-summary .section-cart .line-items .col-6 p.font11{ font-size:12.5px !important; color:var(--cx-muted) !important; font-weight:500 !important; }
.cx-summary .section-cart .col-6 .quantity{
  display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; gap:0 !important;
  width:max-content !important; height:32px !important; margin-top:6px !important; padding:2px !important;
  border:1px solid var(--cx-line) !important; border-radius:999px !important; background:#fff !important; box-shadow:none !important;
}
.cx-summary .section-cart .qty-btn{
  width:26px !important; height:26px !important; border-radius:50% !important; border:0 !important; box-shadow:none !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:#f3f4f6 !important; color:var(--cx-ink) !important; font-size:12px !important; margin:0 !important; transform:none !important;
}
.cx-summary .section-cart .qty-btn:hover{ background:var(--cx-brand) !important; color:#fff !important; }
.cx-summary .section-cart .col-6 .quantity .qty{
  min-width:30px !important; padding:0 !important; text-align:center !important;
  font:700 13px/1 var(--font-display) !important; color:var(--cx-ink) !important;
}
.cx-summary .section-cart .line-items > .col-3.quantity{
  display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:6px !important; text-align:right !important;
}
.cx-summary .section-cart .item-remove{
  width:24px !important; height:24px !important; border-radius:50% !important; border:0 !important; margin:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:transparent !important; color:var(--cx-faint) !important; font-size:15px !important; transform:none !important;
}
.cx-summary .section-cart .item-remove:hover{ background:var(--cx-tint) !important; color:var(--cx-brand) !important; }
.cx-summary .section-cart .line-items > .col-3.quantity p{ margin:0 !important; font:700 14px/1.2 var(--font-display) !important; color:var(--cx-ink) !important; }
.cx-summary .section-cart .addon-items{ padding:0 0 12px 58px !important; margin:0 !important; }
.cx-summary .section-cart .addon-items > .col-3{ display:none !important; }
.cx-summary .section-cart .addon-items > .col-9{ padding:0 !important; max-width:none !important; flex:none !important; width:auto !important; }
.cx-summary .section-cart .addon-items p{ margin:0 !important; font-size:12.5px !important; color:var(--cx-muted) !important; }
.cx-summary .section-cart .addon-items p.bold{ color:var(--cx-ink-2) !important; font-weight:600 !important; margin-bottom:2px !important; }
.cx-summary .cart-scroll-fade{ bottom:0; }

.cx-summary .cart-bottom-fixed{
  flex:0 0 auto !important; position:static !important; padding:12px 20px 18px !important; margin:0 !important;
  border-top:1px solid var(--cx-line-2) !important; background:#fff !important; box-shadow:none !important;
}
.cx-summary .cart-summary{ margin:0 0 14px !important; padding:0 !important; display:flex; flex-direction:column; gap:7px; }
.cx-summary .cart-summary .d-flex{ padding:0 !important; margin:0 !important; font-size:13.5px !important; color:var(--cx-muted) !important; }
.cx-summary .cart-summary .d-flex > div{ font-size:13.5px !important; color:var(--cx-muted) !important; }
.cx-summary .cart-summary .d-flex > div:last-child{ color:var(--cx-ink) !important; font-weight:600 !important; }
.cx-summary .cart-summary .d-flex:has(h6){ margin-top:6px !important; padding-top:12px !important; border-top:1px dashed var(--cx-line) !important; align-items:baseline !important; }
.cx-summary .cart-summary .d-flex h6{
  font:800 17px/1 var(--font-display) !important; margin:0 !important; color:var(--cx-ink) !important;
  letter-spacing:0 !important; text-transform:none !important;
}
.cx-summary .cart-summary .d-flex:has(h6) > div:first-child h6{ font-size:13px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--cx-muted) !important; }
.cx-summary .place-order-btn,
.cx-summary .btn-green.place-order-btn{
  width:100% !important; height:54px !important; margin:0 !important; padding:0 8px 0 20px !important;
  border:0 !important; border-radius:14px !important;
  background:linear-gradient(135deg,#ea2f22,#d51b0f) !important; color:#fff !important;
  font:700 15px/1 var(--font-display) !important; letter-spacing:0 !important; text-transform:none !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  box-shadow:0 12px 26px -12px rgba(225,33,20,.65) !important; transition:transform .18s, filter .18s, box-shadow .18s !important;
}
.cx-summary .place-order-btn:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.cx-summary .place-order-btn:disabled,
.cx-summary .place-order-btn.disabled{
  background:#e5e7eb !important; color:#9ca3af !important; box-shadow:none !important; cursor:not-allowed !important; transform:none !important; filter:none !important;
}
.cx-summary .place-order-btn .place-order-total,
body > .place-order-btn .place-order-total{
  background:rgba(255,255,255,.18) !important; border-radius:10px !important; padding:10px 12px !important;
  font:800 15px/1 var(--font-display) !important; color:#fff !important; margin:0 !important;
}
.cx-summary .place-order-btn:disabled .place-order-total,
.cx-summary .place-order-btn.disabled .place-order-total{ background:rgba(0,0,0,.05) !important; color:#9ca3af !important; }
/* the phone script pins this button to <body>: keep the same look there */
body > .place-order-btn{
  background:linear-gradient(135deg,#ea2f22,#d51b0f) !important; color:#fff !important; border:0 !important;
  font:700 15px/1 var(--font-display) !important; align-items:center !important; justify-content:space-between !important;
}
body > .place-order-btn:disabled, body > .place-order-btn.disabled{ background:#e5e7eb !important; color:#9ca3af !important; }
body > .place-order-btn:disabled .place-order-total, body > .place-order-btn.disabled .place-order-total{ background:rgba(0,0,0,.05) !important; color:#9ca3af !important; }
.cx-summary .alert-warning{
  margin:12px 0 0 !important; padding:10px 12px !important; border-radius:12px !important;
  border:1px solid var(--cx-warn-line) !important; background:var(--cx-warn-bg) !important; color:var(--cx-warn) !important;
  font-size:13px !important; line-height:1.45; display:flex; gap:9px; align-items:flex-start;
}
.cx-summary .alert-warning::before{
  content:"!"; flex:0 0 auto; width:18px; height:18px; border-radius:50%; background:var(--cx-warn); color:#fff;
  font:800 11px/18px var(--font-display); text-align:center; margin-top:1px;
}
.cx-summary .alert-warning p{ margin:0 !important; }
.cx-summary .cart-closed-notice{ margin-top:12px; }
.cx-summary .cart-empty{ padding:10px 20px 20px; }
.cx-summary .el-progress{ margin:6px 0 10px; }
.cx-summary .a-12{ font-size:12.5px; color:var(--cx-muted); }

/* ── Responsive ── */
@media (max-width: 1199.98px){
  .cx-summary{ top:88px; }
}
@media (max-width: 991.98px){
  .cx-page{ padding:22px 0 60px; }
  .cx-head{ flex-direction:column; align-items:stretch; gap:16px; margin-bottom:18px; }
  .cx-title{ font-size:26px; }
  .cx-steps{ justify-content:space-between; border-radius:14px; padding:6px; box-shadow:none; }
  .cx-steps__item{ flex:1 1 0; justify-content:center; padding:6px 4px; gap:7px; }
  .cx-steps__item + .cx-steps__item::before{ display:none; }
  .cx-side{ margin-top:6px; }
  .cx-summary{ position:static; max-height:none; }
  .cx-summary .cart-items-scroll{ max-height:none !important; overflow:visible !important; min-height:0 !important; }
  .cx-summary .cart-scroll-fade, .cx-summary .cart-scroll-btn{ display:none !important; }
}
@media (max-width: 767.98px){
  .cx-main, .cx-side{ padding:0 10px; }
  .cx-head{ padding:0 10px; }
  .cx-section__head{ padding:18px 18px 0; gap:12px; flex-wrap:wrap; }
  .cx-section__body{ padding:14px 18px 20px; }
  .cx-section__title{ font-size:17px !important; }
  .cx-step{ width:34px; height:34px; border-radius:10px; font-size:14px; }
  .cx-option{ padding:12px 12px; gap:12px; }
  .cx-option__icon{ width:38px; height:38px; border-radius:10px; font-size:16px; }
  .cx-option__label{ font-size:14.5px; }
  .cx-pay-grid{ gap:8px; }
  .cx-address{ padding:14px 14px 14px 12px; gap:10px; flex-wrap:wrap; }
  .cx-address__actions{ width:100%; justify-content:flex-end; padding-top:6px; border-top:1px solid var(--cx-line-2); margin-top:4px; }
}
@media (max-width: 575.98px){
  .cx-page{ padding:14px 0 100px; }
  .cx-main, .cx-side, .cx-head{ padding:0 4px; }
  .cx-title{ font-size:24px; margin-top:10px !important; }
  .cx-steps__label{ font-size:11.5px; }
  .cx-section{ border-radius:16px; margin-bottom:12px; }
  .cx-section__actions{ flex-basis:100%; justify-content:flex-start; padding-left:46px; }
  .cx-pay-grid{ grid-template-columns:1fr; }
  .cx-grid-2{ grid-template-columns:1fr; }
  .cx-option__action{ font-size:0; }
  .cx-option__action i{ font-size:20px; }
  .cx-summary__merchant{ padding:14px 16px; }
  .cx-summary .basket-header-wrap, .cx-summary .basket-header-wrap + .d-flex, .cx-summary .cart-items-scroll, .cx-summary .cart-bottom-fixed{ padding-left:16px !important; padding-right:16px !important; }
}
@media (prefers-reduced-motion: reduce){
  .cx-option, .cx-pay-tile, .cx-btn, .cx-summary .place-order-btn{ transition:none !important; transform:none !important; }
}

/* cx fixes after the first render: the icon badge hid its own icon; the menu
   basket's header rules are ID-anchored with !important, so the summary's
   overrides must be too; an older rule hides the thumbnail column, so the
   item grid has two columns, not three. */
.cx-step--icon i{ display:block !important; }
#vue-cart.cx-summary .basket-header-wrap{
  padding:16px 20px 4px !important; margin:0 !important; border:0 !important; background:transparent !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
}
#vue-cart.cx-summary .basket-header-wrap h5, #vue-cart.cx-summary h5{
  font:700 15px/1.2 var(--font-display) !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--cx-ink) !important; margin:0 !important; padding:0 !important; display:block !important;
}
#vue-cart.cx-summary h5::before, #vue-cart.cx-summary h5::after,
#vue-cart.cx-summary .basket-header-left::before, #vue-cart.cx-summary .basket-header-wrap::before{ display:none !important; content:none !important; }
#vue-cart.cx-summary .cart-subtitle, #vue-cart.cx-summary .basket-icon{ display:none !important; }
#vue-cart.cx-summary .basket-header-right{ gap:8px !important; }
#vue-cart.cx-summary .basket-header-total{
  height:auto !important; padding:7px 11px !important; background:#f3f4f6 !important; color:var(--cx-ink) !important;
  font:700 13px/1 var(--font-display) !important; letter-spacing:0 !important; border-radius:999px !important; box-shadow:none !important;
}
#vue-cart.cx-summary .basket-header-wrap + .d-flex.justify-content-between.align-items-center.mb-1{
  padding:0 20px 6px !important; margin:0 !important; border:0 !important; background:transparent !important;
}
#vue-cart.cx-summary .basket-header-wrap + .d-flex.justify-content-between.align-items-center.mb-1 h6{
  font:600 11px/1.2 var(--font-display) !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--cx-faint) !important; margin:0 !important;
}
#vue-cart.cx-summary .basket-header-wrap + .d-flex.justify-content-between.align-items-center.mb-1 a p{
  font:600 12px/1 var(--font-display) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--cx-muted) !important;
  padding:6px 9px !important; border-radius:8px !important; margin:0 !important;
}
#vue-cart.cx-summary .basket-header-wrap + .d-flex.justify-content-between.align-items-center.mb-1 a:hover p{ background:var(--cx-tint) !important; color:var(--cx-brand) !important; }
#vue-cart.cx-summary .section-cart .line-items.row{ grid-template-columns:minmax(0,1fr) auto !important; }
#vue-cart.cx-summary .section-cart .line-items > .col-3:first-child{ display:none !important; }
#vue-cart.cx-summary .section-cart .addon-items{ padding-left:0 !important; }
#vue-cart.cx-summary .cart-closed-notice{ margin:12px 0 0 !important; }
#vue-cart.cx-summary .cart-summary .d-flex,
#vue-cart.cx-summary .cart-summary .d-flex.justify-content-between.align-items-center.mb-1{ padding:0 !important; margin:0 !important; }
#vue-cart.cx-summary .cart-summary .d-flex:has(h6){ margin-top:6px !important; padding-top:12px !important; }
/* the menu basket paints #vue-cart itself; on checkout the card is white */
#vue-cart.cx-summary{ background:#fff !important; border-radius:var(--cx-radius) !important; }
#vue-cart.cx-summary .cart-summary .d-flex h6{
  font:800 17px/1 var(--font-display) !important; margin:0 !important; color:var(--cx-ink) !important; letter-spacing:0 !important; text-transform:none !important;
}
#vue-cart.cx-summary .cart-summary .d-flex:has(h6) > div:first-child h6{
  font-size:12px !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--cx-muted) !important;
}
#vue-cart.cx-summary .cart-summary .d-flex > div{ font-size:13.5px !important; color:var(--cx-muted) !important; }
#vue-cart.cx-summary .cart-summary .d-flex > div:last-child{ color:var(--cx-ink) !important; font-weight:600 !important; }
#vue-cart.cx-summary .cart-summary .d-flex.justify-content-between.align-items-center.mb-1 > div:last-child h6,
#vue-cart.cx-summary .cart-summary .d-flex > div:last-child h6{
  font:800 17px/1 var(--font-display) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--cx-ink) !important;
}
#vue-cart.cx-summary .cart-summary .d-flex.justify-content-between.align-items-center.mb-1 > div:first-child h6{
  font:700 12px/1 var(--font-display) !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--cx-muted) !important;
}

/* cx summary: one separator around the total, not three. The rows carried a
   solid bottom border from an older cart layer under the dashed top border of
   the total row, so Sub total / Total showed three stacked lines. */
#vue-cart.cx-summary .cart-summary .d-flex,
#vue-cart.cx-summary .cart-summary .d-flex.justify-content-between.align-items-center.mb-1{ border:0 !important; }
#vue-cart.cx-summary .cart-summary .d-flex:has(h6),
#vue-cart.cx-summary .cart-summary .d-flex.justify-content-between.align-items-center.mb-1:has(h6){
  border-top:1px dashed var(--cx-line) !important; border-bottom:0 !important; padding-top:12px !important; margin-top:6px !important;
}
/* add-on lines: the column must fill the row so "1 x €0.00 Muy picante" and its
   total sit at opposite ends instead of running together */
#vue-cart.cx-summary .section-cart .addon-items{ display:block !important; padding:0 0 12px !important; margin:0 !important; }
#vue-cart.cx-summary .section-cart .addon-items > .col-9{ width:100% !important; max-width:100% !important; flex:none !important; padding:0 !important; display:block !important; }
#vue-cart.cx-summary .section-cart .addon-items .d-flex{ display:flex !important; justify-content:space-between !important; gap:12px; }
#vue-cart.cx-summary .section-cart .addon-items .flexrow:last-child p{ white-space:nowrap; color:var(--cx-ink-2) !important; font-weight:600 !important; }
/* when the list scrolls, the arrow floats over its foot: keep the last line clear of it */
#vue-cart.cx-summary .cart-scroll-zone:has(.cart-scroll-btn) .cart-items-scroll{ padding-bottom:58px !important; }

/* cx summary — compact item rows (user request 10 Sep 2026)
   name on line one with the line total; quantity pill + unit price on line two
   with the remove control; ~70px per item instead of 116 */
#vue-cart.cx-summary .basket-header-wrap{ padding:13px 20px 2px !important; }
#vue-cart.cx-summary .basket-header-wrap + .d-flex.justify-content-between.align-items-center.mb-1{ padding-bottom:2px !important; }
#vue-cart.cx-summary .section-cart .line-items.row{ padding:10px 0 !important; align-items:stretch !important; }
#vue-cart.cx-summary .section-cart .line-items > .col-6{
  display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; gap:5px 10px !important;
}
#vue-cart.cx-summary .section-cart .line-items .col-6 > p:first-child{ flex:0 0 100% !important; font-size:13.5px !important; line-height:1.3 !important; }
#vue-cart.cx-summary .section-cart .line-items .col-6 > .quantity{ order:2 !important; margin-top:0 !important; height:28px !important; padding:2px !important; }
#vue-cart.cx-summary .section-cart .qty-btn{ width:22px !important; height:22px !important; font-size:11px !important; }
#vue-cart.cx-summary .section-cart .col-6 .quantity .qty{ min-width:24px !important; font-size:12.5px !important; }
#vue-cart.cx-summary .section-cart .line-items .col-6 > p.font11{ order:3 !important; font-size:12px !important; }
#vue-cart.cx-summary .section-cart .line-items .col-6 > p:not(:first-child):not(.font11),
#vue-cart.cx-summary .section-cart .line-items .col-6 > .mb-1{ order:4 !important; flex:0 0 100% !important; font-size:12px !important; color:var(--cx-muted) !important; }
#vue-cart.cx-summary .section-cart .line-items > .col-3.quantity{ justify-content:space-between !important; align-self:stretch !important; gap:4px !important; }
#vue-cart.cx-summary .section-cart .line-items > .col-3.quantity p{ font-size:13.5px !important; }
#vue-cart.cx-summary .section-cart .item-remove{ width:22px !important; height:22px !important; font-size:14px !important; }
#vue-cart.cx-summary .section-cart .addon-items{ padding:0 0 9px !important; margin-top:-3px !important; }
#vue-cart.cx-summary .section-cart .addon-items p{ font-size:12px !important; line-height:1.35 !important; }
#vue-cart.cx-summary .section-cart .addon-items p.bold{ margin-bottom:1px !important; }
#vue-cart.cx-summary .section-cart .addon-items .d-flex{ margin-bottom:2px !important; }
#vue-cart.cx-summary .cart-items-scroll{ padding-top:0 !important; }
#vue-cart.cx-summary .cart-bottom-fixed{ padding-top:10px !important; }
#vue-cart.cx-summary .cart-summary{ gap:5px !important; margin-bottom:12px !important; }
/* the item name is <p class="mb-1">; keep it first (the .mb-1 rule above is for the "Free" tag wrapper) */
#vue-cart.cx-summary .section-cart .line-items .col-6 > p.mb-1:first-child{ order:0 !important; flex:0 0 100% !important; font-size:13.5px !important; color:var(--cx-ink) !important; font-weight:600 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SIDE CART v2 (header cart drawer, 10 Sep 2026)
   Same language as the checkout basket: compact rows (name + line total,
   then quantity pill + unit price + remove), a subtotal row with a fees note
   above the checkout button, count in the title, full width on phones.
   ═══════════════════════════════════════════════════════════════════════ */
.el-drawer.drawer-preview-cart{
  width:min(400px, 100vw) !important;
  box-shadow:-24px 0 60px -30px rgba(16,24,40,.45) !important;
}
.el-drawer.drawer-preview-cart .el-drawer__body{ display:flex; flex-direction:column; padding:0 !important; background:#fff; }
.el-drawer.drawer-preview-cart .pmd-header{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px !important; border-bottom:1px solid #f0f2f5 !important; background:#fff !important;
}
.el-drawer.drawer-preview-cart .cp-title{ font:800 18px/1.2 var(--font-display) !important; color:#111827 !important; display:flex; align-items:center; gap:8px; }
.el-drawer.drawer-preview-cart .cp-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px;
  border-radius:999px; background:#e12114; color:#fff; font:700 12px/1 var(--font-display);
}
.el-drawer.drawer-preview-cart .pmd-close-btn{
  width:36px !important; height:36px !important; border-radius:50% !important; border:1px solid #e8ebf0 !important;
  background:#fff !important; color:#374151 !important; display:inline-flex !important; align-items:center; justify-content:center;
}
.el-drawer.drawer-preview-cart .pmd-close-btn:hover{ background:#f3f4f6 !important; }

.el-drawer.drawer-preview-cart .cp-merchant-block{
  flex:0 0 auto; padding:14px 22px 12px !important; background:linear-gradient(180deg,#fff,#fafbfc) !important; border-bottom:1px solid #f0f2f5 !important;
}
.el-drawer.drawer-preview-cart .cp-your-cart-lbl{ font:600 10.5px/1.2 var(--font-display) !important; letter-spacing:.1em; text-transform:uppercase; color:#9ca3af !important; margin:0 0 4px !important; }
.el-drawer.drawer-preview-cart .cp-merchant-name-text{ font:700 15px/1.3 var(--font-display) !important; color:#111827 !important; }
.el-drawer.drawer-preview-cart .cp-merchant-addr{
  font-size:12px !important; color:#6b7280 !important; margin:2px 0 0 !important; line-height:1.4 !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.el-drawer.drawer-preview-cart .cp-summary-row{ flex:0 0 auto; padding:10px 22px 4px !important; border:0 !important; }
.el-drawer.drawer-preview-cart .cp-summary-lbl{ font:600 11px/1.2 var(--font-display) !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#9ca3af !important; }
.el-drawer.drawer-preview-cart .cp-clear-link{
  font:600 12px/1 var(--font-display) !important; color:#6b7280 !important; padding:6px 9px !important; border-radius:8px !important; text-decoration:none !important;
}
.el-drawer.drawer-preview-cart .cp-clear-link:hover{ background:#fff1f0 !important; color:#e12114 !important; }

.el-drawer.drawer-preview-cart .cp-items-wrap{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 22px !important; }
.el-drawer.drawer-preview-cart .cp-item-card{ padding:11px 0 !important; border-bottom:1px solid #f0f2f5 !important; }
.el-drawer.drawer-preview-cart .cp-item-card:last-child{ border-bottom:0 !important; }
.el-drawer.drawer-preview-cart .cp-item-row{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:0 12px !important; align-items:stretch !important; }
.el-drawer.drawer-preview-cart .cp-item-info{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:5px 10px !important; min-width:0; }
.el-drawer.drawer-preview-cart .cp-iname{ flex:0 0 100% !important; font:600 13.5px/1.3 var(--font-display) !important; color:#111827 !important; margin:0 !important; }
.el-drawer.drawer-preview-cart .cp-isize{ font-weight:500; color:#6b7280; }
.el-drawer.drawer-preview-cart .cp-qty-wrap{
  order:2 !important; margin:0 !important; height:28px !important; padding:2px !important; align-items:center !important;
  background:#fff !important; border:1px solid #e8ebf0 !important; border-radius:999px !important;
}
.el-drawer.drawer-preview-cart .cp-qty-btn{ width:22px !important; height:22px !important; background:#f3f4f6 !important; color:#111827 !important; font-size:11px !important; box-shadow:none !important; }
.el-drawer.drawer-preview-cart .cp-qty-btn:hover{ background:#e12114 !important; color:#fff !important; }
.el-drawer.drawer-preview-cart .cp-qty-val{ min-width:24px !important; font:700 12.5px/1 var(--font-display) !important; color:#111827 !important; text-align:center; }
.el-drawer.drawer-preview-cart .cp-iprice{ order:3 !important; margin:0 !important; font-size:12px !important; color:#6b7280 !important; }
.el-drawer.drawer-preview-cart .cp-free-badge{ order:3 !important; margin:0 !important; }
.el-drawer.drawer-preview-cart .cp-special, .el-drawer.drawer-preview-cart .cp-attrs{ order:4 !important; flex:0 0 100% !important; margin:0 !important; font-size:12px !important; color:#6b7280 !important; }
.el-drawer.drawer-preview-cart .cp-item-aside{ display:flex !important; flex-direction:column !important; justify-content:space-between !important; align-items:flex-end !important; gap:4px !important; padding:0 !important; }
.el-drawer.drawer-preview-cart .cp-itotal{ order:0; font:700 13.5px/1.2 var(--font-display) !important; color:#111827 !important; margin:0 !important; }
.el-drawer.drawer-preview-cart .cp-remove-btn{ order:1; width:22px !important; height:22px !important; background:transparent !important; color:#9ca3af !important; }
.el-drawer.drawer-preview-cart .cp-remove-btn svg{ width:12px !important; height:12px !important; flex:none; }
.el-drawer.drawer-preview-cart .cp-remove-btn:hover{ background:#fff1f0 !important; color:#e12114 !important; }
.el-drawer.drawer-preview-cart .cp-addons-wrap{ margin:8px 0 0 !important; padding:8px 10px !important; background:#f8f9fb !important; border:1px solid #f0f2f5 !important; border-radius:10px !important; }
.el-drawer.drawer-preview-cart .cp-addon-cat{ font:600 10px/1.2 var(--font-display) !important; letter-spacing:.08em; text-transform:uppercase; color:#9ca3af !important; margin-bottom:3px !important; }
.el-drawer.drawer-preview-cart .cp-addon-name, .el-drawer.drawer-preview-cart .cp-addon-price{ font-size:12px !important; color:#4b5563 !important; }
.el-drawer.drawer-preview-cart .cp-addon-price{ font-weight:600 !important; color:#374151 !important; }

.el-drawer.drawer-preview-cart .cp-footer{ flex:0 0 auto; padding:12px 22px 20px !important; border-top:1px solid #f0f2f5 !important; background:#fff !important; }
.el-drawer.drawer-preview-cart .cp-foot-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; color:#6b7280; margin:0 0 2px; }
.el-drawer.drawer-preview-cart .cp-foot-row b{ font:800 17px/1 var(--font-display); color:#111827; }
.el-drawer.drawer-preview-cart .cp-foot-note{ margin:0 0 12px !important; font-size:11.5px; color:#9ca3af; line-height:1.4; }
.el-drawer.drawer-preview-cart .cp-checkout-btn{
  height:52px !important; padding:0 8px 0 20px !important; border-radius:14px !important;
  background:linear-gradient(135deg,#ea2f22,#d51b0f) !important; color:#fff !important;
  font:700 15px/1 var(--font-display) !important; display:flex !important; align-items:center !important; justify-content:space-between !important;
  box-shadow:0 12px 26px -12px rgba(225,33,20,.65) !important; text-decoration:none !important;
}
.el-drawer.drawer-preview-cart .cp-checkout-btn:hover{ filter:brightness(1.04); }
.el-drawer.drawer-preview-cart .cp-checkout-total{ background:rgba(255,255,255,.18) !important; border-radius:10px !important; padding:9px 12px !important; font:800 15px/1 var(--font-display) !important; color:#fff !important; }
.el-drawer.drawer-preview-cart .cp-error-banner{ margin:0 22px 14px !important; padding:10px 12px !important; border-radius:12px !important; background:#fffbeb !important; border:1px solid #fde68a !important; color:#b45309 !important; font-size:13px !important; }
.el-drawer.drawer-preview-cart .cart-empty{ padding:24px 22px; }
@media (max-width: 575.98px){
  .el-drawer.drawer-preview-cart{ width:100vw !important; }
  .el-drawer.drawer-preview-cart .pmd-header{ padding:14px 16px !important; }
  .el-drawer.drawer-preview-cart .cp-merchant-block, .el-drawer.drawer-preview-cart .cp-summary-row,
  .el-drawer.drawer-preview-cart .cp-items-wrap, .el-drawer.drawer-preview-cart .cp-footer{ padding-left:16px !important; padding-right:16px !important; }
}
.el-drawer.drawer-preview-cart .cp-merchant-name-link{ margin:0 0 2px !important; padding:0 !important; }
/* a generic menu-link rule pads every <a> in the drawer by 8px 20px, which turned
   the 22px quantity circles into 40px ovals; the drawer's controls size themselves */
.el-drawer.drawer-preview-cart .cp-qty-btn,
.el-drawer.drawer-preview-cart .cp-remove-btn{
  padding:0 !important; box-sizing:border-box !important; min-width:0 !important; line-height:1 !important;
  width:22px !important; height:22px !important; border-radius:50% !important;
}
.el-drawer.drawer-preview-cart .cp-qty-wrap{ width:max-content !important; gap:0 !important; }
.el-drawer.drawer-preview-cart .cp-qty-val{ padding:0 !important; }
.el-drawer.drawer-preview-cart .cp-clear-link{ line-height:1 !important; }

/* ══ BASKET ITEMS v4 (fci-, "Gallery") ════════════════════════════════
   One block per dish in three templates: the menu basket and checkout
   summary (store/cart-data.php) and the header side cart
   (ComponentCartPreview in front.bundle.js). A photo with a soft shadow
   (and a xN badge past one), then name and line total (dish plus options,
   the API's subtotal_pretty), size and unit price, the options as a quiet
   dotted list, and a floating stepper whose minus becomes a trash at 1.
   Free options carry no price; the add-on "N×" prefix only shows for
   "multiple" add-ons, since the rest just repeat the dish qty. */
:is(#vue-cart, .drawer-preview-cart) .fci {
  --fci-ink: #16181d;
  --fci-ink-2: #454b57;
  --fci-muted: #8a8f99;
  display: flex;
  gap: 16px;
  padding: 20px 8px;
  border-bottom: 1px solid #f0ede8;
  font-variant-numeric: tabular-nums;
}
:is(#vue-cart, .drawer-preview-cart) .fci:last-child { border-bottom: 0; }

:is(#vue-cart, .drawer-preview-cart) .fci-media { position: relative; flex: 0 0 68px; width: 68px; height: 68px; }
:is(#vue-cart, .drawer-preview-cart) .fci-img {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  object-fit: cover;
  background: #f4f3f0;
  box-shadow: 0 10px 20px -12px rgba(22,24,29,.45);
}
:is(#vue-cart, .drawer-preview-cart) .fci-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--fci-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

:is(#vue-cart, .drawer-preview-cart) .fci-body { flex: 1 1 auto; min-width: 0; }
:is(#vue-cart, .drawer-preview-cart) .fci-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
:is(#vue-cart, .drawer-preview-cart) .fci-name {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
  color: var(--fci-ink) !important;
  text-transform: none !important;
  word-break: break-word;
}
:is(#vue-cart, .drawer-preview-cart) .fci-total {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--fci-ink);
  white-space: nowrap;
}
:is(#vue-cart, .drawer-preview-cart) .fci-free {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #e8f6ee;
  color: #1d7a45;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
}

:is(#vue-cart, .drawer-preview-cart) .fci-meta { margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--fci-muted); }
:is(#vue-cart, .drawer-preview-cart) .fci-size + .fci-unit::before { content: " · "; }
:is(#vue-cart, .drawer-preview-cart) .fci-unit del { color: #b7bcc5; margin-right: 2px; }

:is(#vue-cart, .drawer-preview-cart) .fci-opts { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
:is(#vue-cart, .drawer-preview-cart) .fci-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fci-ink-2);
}
:is(#vue-cart, .drawer-preview-cart) .fci-opt::before {
  content: "";
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cfc9bf;
}
:is(#vue-cart, .drawer-preview-cart) .fci-opt-name { flex: 1 1 auto; min-width: 0; }
:is(#vue-cart, .drawer-preview-cart) .fci-opt-name b { font-weight: 600; color: var(--fci-ink); margin-right: 4px; }
:is(#vue-cart, .drawer-preview-cart) .fci-opt-price { flex: 0 0 auto; font-size: 12.5px; color: var(--fci-muted); white-space: nowrap; }

:is(#vue-cart, .drawer-preview-cart) .fci-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
:is(#vue-cart, .drawer-preview-cart) .fci-note {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  font-style: italic;
  line-height: 1.45 !important;
  color: var(--fci-muted) !important;
  word-break: break-word;
}
:is(#vue-cart, .drawer-preview-cart) .fci-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px -8px rgba(22,24,29,.28), 0 0 0 1px rgba(22,24,29,.05);
}
:is(#vue-cart, .drawer-preview-cart) .fci-step-btn {
  width: 30px;
  height: 30px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #4a505c;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
:is(#vue-cart, .drawer-preview-cart) .fci-step-btn:hover { background: #f4f3f0; color: var(--brand); }
:is(#vue-cart, .drawer-preview-cart) .fci-step-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
:is(#vue-cart, .drawer-preview-cart) .fci-step-btn svg { display: block; }
:is(#vue-cart, .drawer-preview-cart) .fci-step-qty {
  min-width: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--fci-ink);
  user-select: none;
}

/* checkout already pads the list by 20px; line the dishes up with its header */
#vue-cart.cx-summary .fci { padding-left: 0; padding-right: 0; }

/* ══ BASKET HEADER v4 (fcb-, design 3 "restaurant-led", red) ═════════
   Menu page: a red band with the restaurant logo, "Your basket from" /
   name / item count, the total large, a hairline and an icon-only clear
   button. Checkout shows the restaurant just above the basket, so there
   the same markup becomes a slim white row (count, total, clear). */
#vue-cart .fcb-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 18px 22px; /* +2px left: the logo's white ring sits outside it */
  background: var(--brand);
  color: #fff;
}
/* the red runs to the card's top edge (no grey hairline over it); the
   side borders taper out at the rounded corners */
#vue-cart.sticky-cart:has(.fcb-head) { border-top-width: 0 !important; }
#vue-cart .fcb-logo {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
}
#vue-cart .fcb-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#vue-cart .fcb-from,
#vue-cart .fcb-count {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255,255,255,.94);
}
#vue-cart .fcb-count { font-size: 12px; }
#vue-cart .fcb-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#vue-cart .fcb-total {
  flex-shrink: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#vue-cart .fcb-sep {
  flex: 0 0 1px;
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,.28);
}
#vue-cart .fcb-clear {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
#vue-cart .fcb-clear:hover { background: #fff; border-color: #fff; color: var(--brand); }
#vue-cart .fcb-clear:focus { outline: none; }
#vue-cart .fcb-clear:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#vue-cart .fcb-clear svg { display: block; }

/* checkout: slim white row, no repeated logo / name */
#vue-cart.cx-summary .fcb-head { padding: 12px 20px 10px; background: transparent; color: #16181d; }
#vue-cart.cx-summary .fcb-logo,
#vue-cart.cx-summary .fcb-from,
#vue-cart.cx-summary .fcb-name { display: none; }
#vue-cart.cx-summary .fcb-count { font-size: 13px; color: #6f7581; }
#vue-cart.cx-summary .fcb-total { font-size: 18px; color: #16181d; }
#vue-cart.cx-summary .fcb-sep { height: 26px; background: #ece9e3; }
#vue-cart.cx-summary .fcb-clear { flex-basis: 34px; width: 34px; height: 34px; border-color: #e6e3dd; background: #f6f5f2; color: #454b57; }
#vue-cart.cx-summary .fcb-clear:hover { background: var(--brand-light); border-color: var(--brand-light); color: var(--brand); }

/* ══ STORE-CLOSED FOOTER ends the panel ═══════════════════════════════
   The totals block keeps an 18px bottom padding (!important, above), so a
   white lip showed under the red "Schedule order" bar. With the notice the
   bar is the panel's last edge. */
.section-cart .cart-bottom-fixed:has(.cart-closed-notice) { padding-bottom: 0 !important; }
/* square corners: the basket card (#vue-cart, overflow hidden, 20px radius)
   rounds them, so no white wedges show beside the bar's own curve */
#vue-cart.sticky-cart .cart-closed-notice,
#vue-cart.sticky-cart .ccn-btn { border-radius: 0; }
/* no bottom border when closed: a 1px red border drew a second curve 1px
   outside the clipped bar, leaving a light seam at both bottom corners.
   Without it the bar's own clipped curve is the card's bottom edge and the
   grey side borders taper out into it. */
#vue-cart.sticky-cart:has(.cart-closed-notice) { border-bottom-width: 0 !important; }

/* ══ HERO CREST, keyed (see window.fxKeyCrest) ════════════════════════ */
.merchant-hero__crest.merchant-hero__crest--keyed {
  filter: none;
  mix-blend-mode: normal;
  opacity: .32;
  width: 300px;
  height: 300px;
}

/* ══ STOREFRONT DIALOG (fx-dialog) ════════════════════════════════════
   window.fxDialog: "Clear your basket?" and "Create new order?". A centred
   card on desktop, a bottom sheet on phones, over a blurred page. */
.el-overlay.fx-dialog-overlay {
  background: rgba(24,18,16,.46);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.el-overlay.fx-dialog-overlay .el-overlay-message-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.el-overlay.fx-dialog-overlay .el-overlay-message-box::after { display: none; }
.el-message-box.fx-dialog {
  width: min(384px, 100%);
  max-width: none;
  padding: 30px 24px 22px;
  border: 0;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 32px 80px -28px rgba(16,24,40,.55), 0 0 0 1px rgba(16,24,40,.04);
  text-align: center;
  font-family: Poppins, var(--font-display), sans-serif;
  animation: fxd-pop .3s cubic-bezier(.16,1,.3,1);
}
@keyframes fxd-pop {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.el-message-box.fx-dialog .el-message-box__header { display: none; }
.el-message-box.fx-dialog .el-message-box__content { padding: 0; }
.el-message-box.fx-dialog .el-message-box__container { display: block; }
.el-message-box.fx-dialog .el-message-box__message { padding: 0; }

.fxd-media { display: flex; justify-content: center; margin-bottom: 18px; }
.fxd-icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fdeceb;
  color: var(--brand, #e12114);
  box-shadow: 0 0 0 8px #fff6f5;
}
.fxd-icon svg { display: block; }
.fxd-pair { display: inline-flex; align-items: center; gap: 14px; }
.fxd-logo {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 26px -14px rgba(16,24,40,.5), 0 0 0 1px rgba(16,24,40,.06);
}
.fxd-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fxd-logo--initial { background: #f4f3f0; color: #16181d; font-size: 24px; font-weight: 700; }
.fxd-logo--new { background: #fbfaf8; color: #9aa0aa; font-size: 26px; font-weight: 300; box-shadow: inset 0 0 0 1.5px #e3dfd8; }
.fxd-logo--from { transform: rotate(-4deg); opacity: .72; filter: saturate(.7); }
.fxd-logo--to { transform: rotate(3deg); }
.fxd-logo--sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(16,24,40,.08);
}
.fxd-logo--sm.fxd-logo--initial { font-size: 13px; }
.fxd-swap {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand, #e12114);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(225,33,20,.75);
}
.fxd-swap svg { display: block; }
.fxd-title {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: #16181d;
}
.el-message-box.fx-dialog .fxd-text {
  max-width: 300px;
  margin: 0 auto;
  font-size: 13.5px;
  line-height: 1.55;
  color: #5c626e;
  text-align: center;
}
.el-message-box.fx-dialog .fxd-title { text-align: center; }
.fxd-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-top: 16px;
  padding: 7px 14px 7px 7px;
  border: 1px solid #efece6;
  border-radius: 999px;
  background: #faf9f7;
}
.fxd-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #16181d;
}
.fxd-chip-total {
  font-size: 13px;
  font-weight: 700;
  color: #16181d;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fxd-chip-total { padding-left: 10px; border-left: 1px solid #e3dfd8; }

.el-message-box.fx-dialog .el-message-box__btns {
  display: flex;
  gap: 10px;
  padding: 24px 0 0;
}
.el-message-box.fx-dialog .el-message-box__btns .el-button {
  flex: 1 1 0;
  height: 48px;
  margin: 0;
  border-radius: 15px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.el-message-box.fx-dialog .fx-dialog-cancel { border: 0; background: #f3f2ef; color: #16181d; }
.el-message-box.fx-dialog .fx-dialog-cancel:hover,
.el-message-box.fx-dialog .fx-dialog-cancel:focus-visible { background: #eae8e3; color: #16181d; }
.el-message-box.fx-dialog .fx-dialog-ok {
  border: 0;
  background: var(--brand, #e12114);
  color: #fff;
  box-shadow: 0 12px 24px -12px rgba(225,33,20,.9);
}
.el-message-box.fx-dialog .fx-dialog-ok:hover,
.el-message-box.fx-dialog .fx-dialog-ok:focus-visible { background: #c91c10; color: #fff; transform: translateY(-1px); }

@media (max-width: 520px) {
  .el-overlay.fx-dialog-overlay .el-overlay-message-box { align-items: flex-end; padding: 0; }
  .el-message-box.fx-dialog {
    width: 100%;
    border-radius: 26px 26px 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    animation: fxd-sheet .34s cubic-bezier(.16,1,.3,1);
  }
  .el-message-box.fx-dialog::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: -14px auto 18px;
    border-radius: 4px;
    background: #e6e3dd;
  }
}
@keyframes fxd-sheet {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* ══ CHECKOUT BUTTON, disabled (store closed / out of range) ══════════
   Was white text on #d1d5db (about 1.5:1). Now a quiet but readable
   button: dark-grey text on a warm light grey, total in its own chip. */
.section-cart .btn-green[disabled="disabled"],
.section-cart .btn-green[disabled=""]:not([disabled="false"]),
.section-cart .btn-green.disabled,
#vue-cart .btn-green[disabled="disabled"],
#vue-cart .btn-green[disabled=""]:not([disabled="false"]),
#vue-cart .btn-green.disabled {
  background: #f1f0ec !important;
  color: #5f6571 !important;
  box-shadow: inset 0 0 0 1px #e4e1da !important;
}
#vue-cart .btn-green.disabled > .flex-col:nth-child(2),
#vue-cart .btn-green.disabled .place-order-total {
  background: #e4e1da !important;
  color: #2f333b !important;
}

/* ══ MENU CATEGORY HEADER (fcat-) ═════════════════════════════════════
   With a photo (.fcat--photo, design 6 "editorial fade"): the photo runs
   full width at the top of the section and fades into the white card; the
   number + dish count (red, monospace) and the name (dark) sit on the fade.
   Without a photo (.fcat--plain, design 7 "big number"): a large pale
   number, a short red rule, then the name and the count. The layout forces
   Poppins with !important, so the monospace lines need !important too. */
.fcat-hero {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: #f4f2ee;
  isolation: isolate;
}
.fcat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: -2;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.fcat-hero:hover .fcat-img { transform: scale(1.03); }
.fcat-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.72) 48%, rgba(255,255,255,.97) 66%, #ffffff 80%);
}
.fcat-hero .fcat-text {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 14px;
}
.menu-center section .fcat-meta {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c01a0f; /* a deeper brand red: ~5:1 on the faded photo */
}
.menu-center section .fcat-name {
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: var(--font-display);
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
  color: #16181d !important;
  overflow-wrap: anywhere;
}

.fcat-plain {
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding: 26px 28px 20px;
  border-bottom: 1px solid #f0ede8;
}
.menu-center section .fcat-num {
  flex-shrink: 0;
  font-size: 54px;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
  color: #ebcfca;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.fcat-rule { flex: 0 0 2px; width: 2px; border-radius: 2px; background: var(--brand); }
.fcat-plain .fcat-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.menu-center section .fcat-plain .fcat-name { margin: 0 !important; font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -.02em !important; }
.fcat-count { margin-top: 3px; font-size: 13px; color: #6f7581; }

@media (max-width: 767px) {
  .fcat-hero { height: 168px; }
  .fcat-hero .fcat-text { left: 18px; right: 18px; bottom: 12px; }
  .menu-center section .fcat-name { font-size: 24px !important; }
  .fcat-plain { gap: 16px; padding: 20px 18px 16px; }
  .menu-center section .fcat-num { font-size: 50px; }
  .menu-center section .fcat-plain .fcat-name { font-size: 22px !important; }
}

/* ══ DISH LIST, design G (fdish-) ═════════════════════════════════════
   First dish of each category: a cream card with a round photo breaking
   out on the right (the restaurant logo on white when the dish has no
   photo). The rest: a row with an 84px photo thumbnail, or a plain text
   row. Price/size and add/quantity blocks keep their original markup;
   the old .item-right-col / .price-btn-row rules no longer apply here. */
.list-item-rows.fdish { cursor: default; }
.list-item-rows.fdish:hover { background: #fdfaf8 !important; }
.fdish .fdish-body { flex: 1 1 auto; min-width: 0; }
.fdish h6.m-0 {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em;
  margin: 0 !important;
  color: #16181d !important;
}
.list-item-rows.fdish:hover h6.m-0 { color: #16181d !important; }
.fdish .d-flex.align-items-center.mb-1 { margin-bottom: 2px !important; }
.list-item-rows.fdish p.fdish-desc {
  margin: 2px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #7d838f !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fdish .fdish-price { margin-top: 8px; }
.fdish .fdish-add { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; }

/* rows */
.fdish-row { display: flex; align-items: center; gap: 18px; padding: 18px 28px; }
.fdish-thumb {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 16px;
  overflow: hidden;
  background: #f4f3f0;
}
.fdish-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdish .btn-add-plus, .fdish a.btn-add-plus,
.list-item-rows.fdish .el-button.btn-add-plus { width: 36px !important; height: 36px !important; min-width: 36px !important; }

/* featured first dish */
.list-item-rows.fdish--feat { border-bottom: 0 !important; padding: 22px 24px 30px !important; }
.list-item-rows.fdish--feat:hover { background: transparent !important; }
.fdish-feat {
  position: relative;
  min-height: 170px;
  box-sizing: border-box;
  padding: 26px 238px 24px 26px;
  border-radius: 24px;
  background: #faf6f1;
  border: 1px solid #f0e9e0;
}
.fdish-feat h6.m-0 { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.2 !important; }
.list-item-rows.fdish .fdish-feat p.fdish-desc { font-size: 14px !important; -webkit-line-clamp: 3; margin-top: 6px !important; }
.fdish-feat .fdish-foot { margin-top: 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fdish-feat .fdish-price { margin-top: 0; }
.fdish-feat .btn-add-plus, .fdish-feat a.btn-add-plus,
.list-item-rows.fdish .fdish-feat .el-button.btn-add-plus { width: 42px !important; height: 42px !important; min-width: 42px !important; font-size: 24px !important; }
.fdish-plate {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 190px;
  height: 190px;
  border-radius: 50%;
  overflow: hidden;
  background: #f4f3f0;
  box-shadow: 0 0 0 6px #fff, 0 22px 40px -22px rgba(16,24,40,.6);
}
.fdish-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdish--logo .fdish-plate {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* a hairline outside the white ring, so the white plate keeps an edge on white */
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(16,24,40,.08), 0 22px 40px -22px rgba(16,24,40,.45);
}
.fdish-plate img.fdish-plate-logo { width: 82%; height: 82%; object-fit: contain; }

/* price: "from" inline and small, no gap from an empty size name */
.fdish .size-inline { margin-top: 0; }
.fdish .size-inline__name:empty { display: none; }
.fdish .prices .size-inline__name.d-block { display: inline !important; margin-right: 5px; font-size: 12.5px; }
.fdish .size-inline__price { font-size: 16px; font-weight: 700; color: #16181d; }
.fdish-feat .size-inline__price { font-size: 19px; }
/* an empty category description no longer pads the gap above the first dish */
.menu-center section > p:empty { display: none !important; }

@media (max-width: 767px) {
  .fdish-row { gap: 14px; padding: 16px 18px; }
  .fdish-thumb { flex-basis: 72px; width: 72px; height: 72px; border-radius: 14px; }
  .list-item-rows.fdish--feat { padding: 20px 14px 8px !important; }
  .fdish-feat { padding: 20px 18px 20px; min-height: 0; }
  .fdish-plate { position: relative; right: auto; top: auto; transform: none; width: 132px; height: 132px; margin: 6px 0 16px 6px; }
  .fdish-feat { display: flex; flex-direction: column-reverse; }
  .fdish-feat h6.m-0 { font-size: 19px !important; }
}
/* the photo header already ends in its own white fade: start the featured card closer */
.menu-center section > .fcat--photo ~ .list-item-rows.fdish--feat { padding-top: 4px !important; }

/* ══ MENU, responsive pass ════════════════════════════════════════════
   Checked at 320–1440px. Category rail: never split a word, and cap very
   long names (dish notes in brackets) at three lines; at 992–1199px the rail
   and the featured circle get room from a narrower middle column. Phones:
   less inset around the featured card, a smaller thumbnail, and the
   back-to-top button moved off the column of "+" buttons. */
ul#menu-category a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: normal !important;
  overflow-wrap: break-word;
  /* the vertical spacing lives in transparent borders, not padding: the
     clamp's overflow is clipped at the padding edge, so padding would show
     the top of a hidden 4th line */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .section-menu .menu-left { flex: 0 0 21% !important; max-width: 21% !important; }
  .section-menu .menu-center { flex: 0 0 52% !important; max-width: 52% !important; }
  ul#menu-category a { font-size: 12px !important; padding: 0 6px 0 12px !important; border-top-width: 8px !important; border-bottom-width: 8px !important; }
  .fdish-feat { padding-right: 186px; }
  .fdish-plate { width: 148px; height: 148px; right: 20px; }
  .fdish-feat h6.m-0 { font-size: 19px !important; }
}
@media (max-width: 767px) {
  .list-item-rows.fdish--feat { padding: 18px 8px 8px !important; }
  .fdish-feat { padding: 18px 16px; }
}
@media (max-width: 400px) {
  .fdish-row { gap: 12px; padding: 16px 14px; }
  .fdish-thumb { flex-basis: 64px; width: 64px; height: 64px; border-radius: 12px; }
}
/* back-to-top: on the right it sat on the "+" column, and at laptop widths
   on the basket's bottom bar. From 1500px it sits bottom-left in the empty
   page margin. Narrower, that margin is too thin (it would cover the
   category rail), and the sticky category tabs already give the jump, so it
   is hidden on the menu page. */
body:has(.section-menu) .el-backtop { right: auto !important; left: 16px !important; }
@media (max-width: 1499px) {
  body:has(.section-menu) .el-backtop { display: none !important; }
}

/* basket at 992–1399px (the side basket is 253–340px wide): the red header
   goes to two tiers, restaurant on top and "N items · total" below a
   hairline, so the name and the total both keep their full size */
@media (min-width: 992px) and (max-width: 1399px) {
  #vue-cart:not(.cx-summary) .fcb-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "logo from clear" "logo name clear" "sep sep sep" "foot foot foot";
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
    padding: 16px 16px 14px 18px;
  }
  #vue-cart:not(.cx-summary) .fcb-title { display: contents; }
  #vue-cart:not(.cx-summary) .fcb-logo { grid-area: logo; width: 40px; height: 40px; }
  #vue-cart:not(.cx-summary) .fcb-from { grid-area: from; align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #vue-cart:not(.cx-summary) .fcb-name { grid-area: name; align-self: start; }
  #vue-cart:not(.cx-summary) .fcb-clear { grid-area: clear; justify-self: end; width: 36px; height: 36px; }
  #vue-cart:not(.cx-summary) .fcb-sep { grid-area: sep; width: auto; height: 1px; margin: 12px 0 10px; }
  /* count and total share the bottom row, so the total's width doesn't
     widen the trash column and squeeze the name */
  #vue-cart:not(.cx-summary) .fcb-count { grid-area: foot; justify-self: start; font-size: 12.5px; }
  #vue-cart:not(.cx-summary) .fcb-total { grid-area: foot; justify-self: end; font-size: 24px; }
}
/* basket dish names never split mid-word; in the narrowest basket the
   line total moves under the name */
:is(#vue-cart, .drawer-preview-cart) .fci-name { word-break: normal; overflow-wrap: break-word; }
@media (min-width: 992px) and (max-width: 1199px) {
  #vue-cart .fci-title-row { flex-direction: column; gap: 1px; }
}