/* ==========================================================================
   MORDEVO — "Luxe" theme: deep forest green, warm gold, soft cream.
   Header + footer (all pages) and the new home page sections (.lx-*).
   ========================================================================== */
:root{
  --lx-green: #0F2A1D;
  --lx-green-2: #143524;
  --lx-green-3: #1B4430;
  --lx-gold: #D8B064;
  --lx-gold-2: #C79A45;
  --lx-cream: #F6F1E6;
  --lx-cream-2: #EFE7D6;
  --lx-ink: #13241A;
  --lx-muted: #5F6B61;
}

/* ---------- Header (dark green, every page) ---------- */
.site-header{ background: var(--lx-green); border-bottom: 1px solid rgba(216,176,100,0.18); backdrop-filter: none; height: 78px; }
.site-header .brand-logo{ height: 46px; filter: brightness(0) saturate(100%) invert(76%) sepia(38%) saturate(560%) hue-rotate(354deg) brightness(92%) contrast(88%); }
.brand-words{ display: flex; flex-direction: column; line-height: 1; }
.site-header .brand-mark .brand-text{ color: #F5EEDD; font-size: 1.55rem; letter-spacing: .04em; }
.site-header .brand-mark .brand-text span{ display: none; }
.brand-tagline{ margin-top: 5px; font-size: 8.5px; font-weight: 600; letter-spacing: .22em; color: var(--lx-gold); white-space: nowrap; }
.site-header .hdr-menu-btn{ color: #F5EEDD; }
.site-header .hdr-menu-btn:hover{ background: rgba(255,255,255,0.08); }
.site-header .main-nav a{ color: rgba(245,238,221,0.86); border-color: transparent; font-weight: 500; }
.site-header .main-nav a:hover, .site-header .main-nav a.is-current{ color: #fff; border-color: var(--lx-gold); }
.site-header .main-nav .caret{ color: var(--lx-gold); }
.site-header .nav-stacked-buttons .btn-outline{ color: #F5EEDD; border-color: rgba(245,238,221,0.4); background: transparent; }
.site-header .hdr-round{ background: rgba(255,255,255,0.07); color: #F5EEDD; }
.site-header .hdr-round:hover{ background: rgba(255,255,255,0.14); }
.site-header .hdr-signin{ color: #F5EEDD; }
.site-header .hdr-signin:hover{ background: rgba(255,255,255,0.08); }
.site-header .hdr-signup{ background: transparent; border: 1px solid rgba(216,176,100,0.7); color: var(--lx-gold); box-shadow: none; }
.site-header .hdr-signup:hover{ background: rgba(216,176,100,0.12); color: var(--lx-gold); }
.site-header .cart-btn .cart-count{ background: var(--lx-gold); color: var(--lx-green); box-shadow: 0 0 0 2px var(--lx-green); }
.site-header .hdr-avatar{ background: var(--lx-gold); color: var(--lx-green); }
#langToggle{ color: #F5EEDD; }
.hdr-city{ display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; color: #F5EEDD; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.hdr-city svg{ color: var(--lx-gold); }
.hdr-order{
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px;
  background: var(--lx-gold); color: var(--lx-green); font-weight: 700; font-size: 14px; white-space: nowrap;
  transition: background .15s, transform .15s;
}
.hdr-order:hover{ background: #E6C27C; color: var(--lx-green); transform: translateY(-1px); }
@media (max-width: 1320px){ .hdr-city{ display: none; } }
@media (max-width: 1120px){ .hdr-order{ display: none; } }
@media (max-width: 560px){
  .site-header{ height: 66px; }
  .brand-tagline, .hdr-search{ display: none; }
  .site-header .brand-logo{ height: 34px; }
  .site-header .brand-mark .brand-text{ font-size: 1.15rem; }
}

/* ---------- Shared bits ---------- */
.lx-gold{ color: var(--lx-gold); }
.lx-kicker{ margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--lx-ink); }
.lx-kicker--gold{ color: var(--lx-gold); }
.lx-h2{ margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; color: var(--lx-ink); letter-spacing: -.01em; }
.lx-h2--light{ color: #fff; }
.lx-p{ color: var(--lx-muted); font-size: 1.05rem; line-height: 1.7; margin: 14px 0 24px; max-width: 520px; }
.lx-light-p{ color: rgba(255,255,255,0.82); font-size: 1.05rem; line-height: 1.7; margin: 16px 0 26px; max-width: 520px; }
.lx-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
.lx-btn{
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 700; font-size: 15px; transition: background .15s, transform .15s, color .15s;
}
.lx-btn:hover{ transform: translateY(-1px); }
.lx-btn--gold{ background: var(--lx-gold); color: var(--lx-green); }
.lx-btn--gold:hover{ background: #E6C27C; color: var(--lx-green); }
.lx-btn--line{ border: 1.5px solid rgba(245,238,221,0.75); color: #F5EEDD; }
.lx-btn--line:hover{ background: rgba(255,255,255,0.08); color: #fff; }
.lx-section{ background: var(--lx-cream); padding: 64px 0; }
.lx-section--tight{ padding-top: 8px; border-top: 1px solid var(--lx-cream-2); }
.lx-section--tight .lx-head{ padding-top: 48px; }
.lx-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.lx-head-tools{ display: flex; align-items: center; gap: 10px; }
.lx-link{ display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--lx-ink); margin-inline-end: 8px; }
.lx-link:hover{ color: var(--lx-gold-2); }
.lx-arrow{
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: #EADFC8; color: var(--lx-ink); display: inline-flex; align-items: center; justify-content: center;
}
.lx-arrow:hover{ background: var(--lx-gold); }
.lx-rail{ display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.lx-rail::-webkit-scrollbar{ display: none; }

/* ---------- Hero ---------- */
.lx-hero{ position: relative; overflow: hidden; background: radial-gradient(ellipse at 20% 30%, #184330 0%, var(--lx-green) 60%); color: #fff; min-height: 560px; display: flex; align-items: center; }
.lx-hero-photo{ position: absolute; inset: 0 0 0 42%; }
.lx-hero-photo img{ width: 100%; height: 100%; object-fit: cover; }
.lx-hero-photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lx-green) 0%, rgba(15,42,29,0.55) 22%, rgba(15,42,29,0) 50%); }
.lx-hero-inner{ position: relative; z-index: 1; width: 100%; }
.lx-hero-text{ max-width: 560px; padding: 64px 0; }
.lx-eyebrow{ margin: 0 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,0.88); }
.lx-hero-title{ margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.015em; color: #fff; }
.lx-hero-sub{ margin: 22px 0 30px; font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 440px; }
.lx-script{ position: absolute; right: 36px; bottom: 26px; z-index: 1; margin: 0; max-width: 200px; text-align: center; transform: rotate(-9deg);
  font-family: "Caveat", "Segoe Script", cursive; font-size: 1.9rem; line-height: 1; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.45); }
.lx-script::after{ content: ""; display: block; height: 3px; margin: 8px auto 0; width: 70%; background: var(--lx-gold); border-radius: 3px; transform: rotate(-3deg); }
@media (max-width: 900px){
  .lx-hero{ flex-direction: column; min-height: 0; }
  .lx-hero-photo{ position: relative; inset: auto; width: 100%; height: 300px; order: 2; }
  .lx-hero-photo::after{ background: linear-gradient(180deg, var(--lx-green) 0%, rgba(15,42,29,0) 35%); }
  .lx-hero-inner{ order: 1; }
  .lx-hero-text{ padding: 44px 0 20px; }
  .lx-script{ font-size: 1.5rem; right: 18px; bottom: 18px; }
}

/* ---------- Feature strip ---------- */
.lx-features{ background: var(--lx-cream-2); padding: 26px 0; }
.lx-features-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lx-feature{ display: flex; align-items: center; gap: 14px; }
.lx-feature-ico, .lx-trust-ico{ width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #E6D9BD; color: var(--lx-ink); }
.lx-feature strong, .lx-trust-item strong, .lx-perk strong{ display: block; font-size: 15px; color: var(--lx-ink); }
.lx-feature small, .lx-trust-item small, .lx-perk small{ display: block; font-size: 12.5px; color: var(--lx-muted); margin-top: 3px; line-height: 1.45; }
@media (max-width: 900px){ .lx-features-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } }

/* ---------- "What are you in the mood for" cards ---------- */
.lx-mood{
  flex: 0 0 176px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--lx-green-2); color: #fff; transition: transform .2s, box-shadow .2s;
}
.lx-mood:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15,42,29,0.25); color: #fff; }
.lx-mood-photo{ display: block; height: 138px; background: var(--lx-green-3); overflow: hidden; border-radius: 0 0 50% 50% / 0 0 18% 18%; }
.lx-mood-photo img{ width: 100%; height: 100%; object-fit: cover; }
.lx-mood-photo--all{ display: flex; align-items: center; justify-content: center; color: var(--lx-gold); }
.lx-mood-photo--all svg{ width: 42px; height: 42px; }
.lx-mood-body{ display: flex; flex-direction: column; gap: 14px; padding: 16px 14px 14px; min-height: 86px; }
.lx-mood-body strong{ font-size: 15px; line-height: 1.25; }
.lx-mood-go{ margin-top: auto; align-self: flex-end; color: var(--lx-gold); }

/* ---------- Popular dishes ---------- */
.lx-dish{
  flex: 0 0 214px; scroll-snap-align: start; background: #fff; border-radius: 16px; padding: 10px 10px 14px;
  box-shadow: 0 1px 2px rgba(19,36,26,0.05), 0 8px 22px rgba(19,36,26,0.06); display: flex; flex-direction: column;
}
.lx-dish-photo{ display: block; height: 150px; border-radius: 12px; overflow: hidden; background: #F4EFE3; }
.lx-dish-photo img{ width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }
.lx-dish:hover .lx-dish-photo img{ transform: scale(1.05); }
.lx-dish-name{ margin: 12px 4px 6px; font-weight: 600; font-size: 14.5px; color: var(--lx-ink); line-height: 1.3; min-height: 38px; }
.lx-dish-foot{ margin: auto 4px 0; display: flex; justify-content: space-between; align-items: center; }
.lx-dish-price{ font-weight: 700; font-size: 16px; color: var(--lx-ink); }
.lx-add{
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; background: var(--lx-gold); color: var(--lx-green); font-weight: 700;
}
.lx-add:hover{ background: var(--lx-gold-2); color: #fff; }

/* ---------- Catering band ---------- */
.lx-catering{ position: relative; overflow: hidden; background: var(--lx-green); color: #fff; padding: 64px 0 40px; }
.lx-catering-photo{ position: absolute; inset: 0 0 0 44%; }
.lx-catering-photo img{ width: 100%; height: 100%; object-fit: cover; }
.lx-catering-photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lx-green) 0%, rgba(15,42,29,0.4) 30%, rgba(15,42,29,0.15) 60%); }
.lx-catering .container{ position: relative; z-index: 1; }
.lx-catering-text{ max-width: 540px; }
.lx-perks{ margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lx-perk{ display: flex; align-items: center; gap: 12px; }
.lx-perk-ico{ width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(216,176,100,0.55); color: var(--lx-gold); display: inline-flex; align-items: center; justify-content: center; }
.lx-perk-ico svg{ width: 22px; height: 22px; }
.lx-perk strong{ color: #fff; font-size: 14px; }
.lx-perk small{ color: rgba(255,255,255,0.72); }
@media (max-width: 900px){
  .lx-catering{ padding-top: 0; }
  .lx-catering-photo{ position: relative; inset: auto; height: 240px; }
  .lx-catering-photo::after{ background: linear-gradient(0deg, var(--lx-green) 0%, rgba(15,42,29,0) 45%); }
  .lx-catering .container{ padding-top: 8px; }
  .lx-perks{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
}

/* ---------- Trust ---------- */
.lx-trust{ position: relative; }
.lx-trust-grid{ margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lx-trust-item{ display: flex; gap: 14px; align-items: flex-start; padding: 4px 24px; border-inline-start: 1px solid #E2D7C1; }
.lx-trust-item:first-child{ border-inline-start: 0; padding-inline-start: 0; }
@media (max-width: 900px){
  .lx-trust-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .lx-trust-item{ border: 0; padding: 0 8px 0 0; }
}

/* ---------- Our story ---------- */
.lx-story{ background: #EFE6D2; padding: 56px 0; }
.lx-story-grid{ display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.lx-story-photo{ border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 18px 40px rgba(19,36,26,0.18); }
.lx-story-photo img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px){ .lx-story-grid{ grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Footer ---------- */
.site-footer{ background: var(--lx-green); }
.site-footer .brand-logo--footer{ filter: brightness(0) saturate(100%) invert(76%) sepia(38%) saturate(560%) hue-rotate(354deg) brightness(92%) contrast(88%); }
.site-footer h4{ color: var(--lx-gold); letter-spacing: .14em; }
.site-footer a:hover{ color: var(--lx-gold); }
.footer-social{ display: flex; gap: 10px; margin-top: 18px; }
.footer-social a{ width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(245,238,221,0.25); display: inline-flex; align-items: center; justify-content: center; color: #F5EEDD; }
.footer-social a:hover{ border-color: var(--lx-gold); color: var(--lx-gold); }

/* Home page on phones: the old swipe rules don't apply to the new rails */
@media (max-width: 640px){
  .lx-section{ padding: 44px 0; }
  .lx-mood{ flex-basis: 150px; }
  .lx-dish{ flex-basis: 190px; }
  .lx-head-tools .lx-arrow{ display: none; }
}
html[dir=rtl] .lx-hero-photo{ inset: 0 42% 0 0; }
html[dir=rtl] .lx-hero-photo::after{ background: linear-gradient(270deg, var(--lx-green) 0%, rgba(15,42,29,0.55) 22%, rgba(15,42,29,0) 50%); }
html[dir=rtl] .lx-catering-photo{ inset: 0 44% 0 0; }
html[dir=rtl] .lx-script{ right: auto; left: 36px; }
html[dir=rtl] .lx-btn svg, html[dir=rtl] .lx-link svg, html[dir=rtl] .lx-mood-go svg, html[dir=rtl] .hdr-order svg{ transform: scaleX(-1); }

/* Keep every header link on one line */
.site-header .main-nav a{ white-space: nowrap; }
.site-header .main-nav ul{ gap: 22px; }
@media (max-width: 1500px){ .hdr-city{ display: none; } .site-header .main-nav ul{ gap: 18px; } .site-header .main-nav a{ font-size: 14px; } }
@media (max-width: 1280px){ .brand-tagline{ display: none; } }

/* ---------- Closer to the approved design ---------- */
/* Headings in a bold high-contrast serif */
:root{ --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif; }
.lx-hero-title, .lx-h2{ font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
.site-header .brand-mark .brand-text, .site-footer .brand-mark .brand-text{ font-family: "Playfair Display", Georgia, serif; font-weight: 600; }

/* Logged out: one round account icon, like the other header icons */
.hdr-user{ color: #F5EEDD; }

/* Icon above each section name on the "mood" cards */
.lx-mood-ico{ color: #F5EEDD; display: inline-flex; }
.lx-mood-body{ gap: 8px; }

/* Leaf drawing in the trust section */
.lx-trust{ overflow: hidden; }
.lx-leaf{ position: absolute; right: -10px; top: -14px; width: 190px; height: 190px; color: #D9CBAE; opacity: .7; pointer-events: none; }
html[dir=rtl] .lx-leaf{ right: auto; left: -10px; transform: scaleX(-1); }

/* App download band */
.lx-app{ background: var(--lx-green); color: #fff; padding: 44px 0; border-top: 1px solid rgba(216,176,100,0.18); }
.lx-app-inner{ display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.lx-app-badges{ display: flex; gap: 12px; flex-wrap: wrap; }
.lx-store{ display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 12px; background: #000; color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.lx-store span{ display: flex; flex-direction: column; font-weight: 700; font-size: 16px; line-height: 1.1; }
.lx-store small{ font-weight: 500; font-size: 10px; letter-spacing: .02em; }
.lx-store:hover{ color: #fff; border-color: var(--lx-gold); }

/* Footer: brand · Explore · Support · email box */
.lx-footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1.4fr; }
.site-footer .brand-mark{ align-items: center; }
.site-footer .brand-tagline{ display: block; }
.footer-news{ padding-inline-start: 32px; border-inline-start: 1px solid rgba(245,238,221,0.14); }
.footer-news-title{ margin: 0 0 16px; color: #F5EEDD; font-size: 15px; line-height: 1.5; }
.footer-news-form{ display: flex; align-items: center; height: 50px; border: 1px solid rgba(245,238,221,0.3); border-radius: 999px; padding: 4px 4px 4px 18px; }
.footer-news-form input{ flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font-size: 14px; }
.footer-news-form input::placeholder{ color: rgba(245,238,221,0.55); }
.footer-news-form button{ width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--lx-gold); color: var(--lx-green); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-news-form:focus-within{ border-color: var(--lx-gold); }
.footer-news-msg{ margin: 10px 0 0; font-size: 13px; color: var(--lx-gold); min-height: 1em; }
@media (max-width: 900px){
  .lx-footer-grid{ grid-template-columns: 1fr 1fr; }
  .lx-footer-grid .footer-brand, .footer-news{ grid-column: 1 / -1; }
  .footer-news{ padding-inline-start: 0; border: 0; }
}
.site-footer .brand-mark .brand-text span{ display: none; }
.lx-hero-title{ max-width: 11ch; }

/* ---------- Exact-design pass ---------- */
/* 7 menu cards share the full width on desktop, like the design */
.lx-rail--mood .lx-mood{ flex: 1 0 150px; }
.lx-mood-photo{ height: 128px; border-radius: 0 0 22px 22px; }
.lx-mood-body{ padding: 12px 12px 12px; min-height: 96px; }
.lx-mood-body strong{ font-size: 14px; }

/* App band: phone on the left, bowl on the right */
.lx-app{ position: relative; overflow: hidden; padding: 40px 0; }
.lx-app-inner{ justify-content: center; gap: 36px; padding: 0 200px; }
.lx-app-phone{ position: absolute; left: 0; bottom: 0; height: 100%; max-height: 190px; width: auto; }
.lx-app-bowl{ position: absolute; right: 0; bottom: 0; height: 100%; max-height: 190px; width: auto; }
button.lx-store{ cursor: pointer; font: inherit; }
@media (max-width: 1100px){ .lx-app-inner{ padding: 0 20px; } .lx-app-phone, .lx-app-bowl{ display: none; } }

/* Social buttons without a link yet look the same */
.footer-social button{ width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(245,238,221,0.25); background: transparent; display: inline-flex; align-items: center; justify-content: center; color: #F5EEDD; cursor: pointer; }
.footer-social button:hover{ border-color: var(--lx-gold); color: var(--lx-gold); }

/* "Cairo" shows on most desktop sizes, like the design */
@media (min-width: 1200px) and (max-width: 1500px){ .hdr-city{ display: inline-flex; } }
.lx-hero-photo img{ object-position: right center; }
.lx-rail--mood .lx-mood{ flex: 1 1 0; min-width: 132px; }
@media (min-width: 1101px){ .lx-app-inner{ flex-wrap: nowrap; } .lx-app-text{ max-width: 460px; } }
.lx-app-badges{ flex-wrap: nowrap; }
.lx-app{ padding: 44px 0; min-height: 190px; display: flex; align-items: center; }
.lx-app .container{ width: 100%; }
.lx-store{ white-space: nowrap; flex-shrink: 0; }
.lx-app-badges{ flex-shrink: 0; }
@media (min-width: 1101px){ .lx-app-inner{ padding: 0 150px; } }
/* An uploaded logo keeps its own colours */
.site-header .brand-logo.brand-logo--custom, .site-footer .brand-logo.brand-logo--custom, .nav-drawer .brand-logo.brand-logo--custom{ filter: none; }

/* ---------- Match the design screenshot more closely ---------- */
/* Logo: lighter, spaced wordmark with the tagline always under it on desktop */
.site-header .brand-mark .brand-text{ font-weight: 500; letter-spacing: .06em; font-size: 1.6rem; }
@media (min-width: 900px){ .site-header .brand-tagline{ display: block !important; } }

/* Hero: tighter, so it fits one screen like the design */
.lx-hero{ min-height: 0; }
.lx-hero-text{ padding: 44px 0 52px; max-width: 600px; }
.lx-eyebrow{ margin-bottom: 12px; }
.lx-hero-title{ font-size: clamp(2.5rem, 4.8vw, 5.4rem); line-height: .95; }
.lx-hero-sub{ margin: 18px 0 24px; font-size: clamp(1rem, 1.1vw, 1.2rem); max-width: 470px; }
.lx-hero .lx-btn{ height: clamp(46px, 3.4vw, 58px); }
@media (min-width: 901px){ .lx-hero{ height: min(40vw, 760px); } }

/* No hard edge where the photo starts: fade the photo itself into the green */
.lx-hero-photo{ inset: 0 0 0 36%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); }
.lx-hero-photo::after{ display: none; }
html[dir=rtl] .lx-hero-photo{ inset: 0 36% 0 0; -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 26%); mask-image: linear-gradient(270deg, transparent 0%, #000 26%); }
@media (max-width: 900px){
  .lx-hero{ height: auto; }
  .lx-hero-photo, html[dir=rtl] .lx-hero-photo{ inset: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%); }
}
/* Same soft edge on the catering photo */
.lx-catering-photo{ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
.lx-catering-photo::after{ display: none; }
@media (max-width: 900px){ .lx-catering-photo{ -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 35%); mask-image: linear-gradient(0deg, transparent 0%, #000 35%); } }
/* Wider layout on big screens, lined up with the header like the design */
.lx-hero .container, .lx-features .container, .lx-section .container, .lx-catering .container,
.lx-story .container, .lx-app .container, .site-footer .container{ max-width: 1440px; }
/* Photo starts around the middle on any screen width, so it never sits behind the headline */
.lx-hero-photo{ left: max(34%, calc(50% - 140px)); }
.lx-hero-photo img{ object-position: 100% 80%; }
html[dir=rtl] .lx-hero-photo{ left: 0; right: max(34%, calc(50% - 140px)); }
@media (max-width: 900px){ .lx-hero-photo, html[dir=rtl] .lx-hero-photo{ left: auto; right: auto; } }
@media (max-width: 560px){ .site-header .brand-mark .brand-text{ font-size: 1.2rem; } }

/* ---------- Round 3 (from the side-by-side comparison) ---------- */
/* 2) One continuous background: the hero photo, softly blurred and darkened, behind everything */
.lx-hero{ background: #0C2418; }
.lx-hero-bg{ position: absolute; inset: -40px; background-size: cover; background-position: right center; filter: blur(34px) brightness(.42) saturate(1.25); transform: scale(1.08); z-index: 0; }
/* 1) The whole dish is visible — nothing cropped — on the right, fading softly into the background */
.lx-hero-photo{ inset: 0; left: 0; -webkit-mask-image: none; mask-image: none; z-index: 0; }
.lx-hero-photo img{ position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: 64%; object-fit: contain; object-position: right bottom;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%); }
html[dir=rtl] .lx-hero-photo{ right: 0; left: 0; }
html[dir=rtl] .lx-hero-photo img{ right: auto; left: 0; -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 18%); mask-image: linear-gradient(270deg, transparent 0%, #000 18%); }
.lx-hero-inner{ z-index: 1; }
@media (max-width: 900px){
  .lx-hero-photo{ position: relative; height: auto; }
  .lx-hero-photo img{ position: relative; width: 100%; height: auto; max-width: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%); }
}
/* 4) Bright text on the left, like the design */
:root{ --lx-gold-bright: #EBB95A; }
.lx-hero .lx-gold{ color: var(--lx-gold-bright); }
.lx-eyebrow{ color: #FFFFFF; }
.lx-hero-sub{ color: #FFFFFF; }
.lx-hero-title{ color: #FFFFFF; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
/* 5) Logo mark in the same colour as the word MORDEVO */
.site-header .brand-logo:not(.brand-logo--custom),
.site-footer .brand-logo:not(.brand-logo--custom){ filter: brightness(0) invert(95%) sepia(9%) saturate(420%) hue-rotate(356deg) brightness(101%); }
.site-header .brand-mark .brand-text, .site-footer .brand-mark .brand-text{ color: #F5EEDD; }
/* background: the same photo mirrored, softened and darkened so the text sits on a leafy green, never on the dish */
.lx-hero-bg{ inset: -30px; background-position: right top; background-size: cover; transform: scaleX(-1) scale(1.06); filter: blur(10px) brightness(.36) saturate(1.35); }
.lx-hero::before{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,34,22,.72) 0%, rgba(10,34,22,.45) 45%, rgba(10,34,22,0) 70%); }
.lx-hero::before{ background: linear-gradient(90deg, rgba(10,34,22,.8) 0%, rgba(10,34,22,.55) 42%, rgba(10,34,22,0) 68%); }

/* ---------- Photos built from your own high-quality salad pictures ---------- */
/* Hero & catering photos now carry their own dark-green background: show them edge to edge */
.lx-hero-bg{ display: none; }
.lx-hero-photo, html[dir=rtl] .lx-hero-photo{ inset: 0; left: 0; right: 0; }
.lx-hero-photo img, html[dir=rtl] .lx-hero-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right center; -webkit-mask-image: none; mask-image: none; }
.lx-hero::before{ background: linear-gradient(90deg, rgba(8,26,17,.55) 0%, rgba(8,26,17,.25) 40%, rgba(8,26,17,0) 60%); }
.lx-catering-photo, html[dir=rtl] .lx-catering-photo{ inset: 0; -webkit-mask-image: none; mask-image: none; }
.lx-catering-photo img{ object-position: right center; }
html[dir=rtl] .lx-hero-photo img, html[dir=rtl] .lx-catering-photo img{ transform: scaleX(-1); }
@media (max-width: 900px){
  .lx-hero-photo, html[dir=rtl] .lx-hero-photo{ position: relative; height: 260px; }
  .lx-hero-photo img{ object-position: 88% center; }
  .lx-catering-photo{ position: relative; height: 230px; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 30%); mask-image: linear-gradient(0deg, transparent 0%, #000 30%); }
  .lx-catering-photo img{ object-position: 85% center; }
}
/* App band bowl has a transparent background now */
.lx-app-bowl{ max-height: 210px; bottom: -20px; right: 10px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.lx-script{ right: 4%; bottom: 7%; font-size: clamp(1.6rem, 2.2vw, 2.4rem); max-width: 230px; }
@media (max-width: 900px){ .lx-script{ font-size: 1.35rem; bottom: 16px; right: 16px; } }
/* Catering: photo fades out at the bottom so the four perks stay readable */
@media (min-width: 901px){
  .lx-catering-photo{ -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 88%); mask-image: linear-gradient(180deg, #000 55%, transparent 88%); }
  .lx-catering-photo img{ object-position: right top; }
}
/* App band: "Soon..." above the store buttons, and the bowl never covers them */
.lx-app-stores{ display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.lx-soon{ font-family: "Caveat", "Segoe Script", cursive; font-size: 1.9rem; line-height: 1; color: var(--lx-gold-bright, #EBB95A); transform: rotate(-4deg); }
@media (min-width: 1101px){ .lx-app-inner{ padding: 0 clamp(260px, 24vw, 380px) 0 clamp(190px, 16vw, 260px); justify-content: space-between; } }
.lx-app-bowl{ max-height: 190px; right: 0; bottom: -18px; }
@media (max-width: 1250px){ .lx-app-bowl{ display: none; } .lx-app-inner{ padding-right: 24px; } }
@media (min-width: 1101px){ .lx-app-inner{ padding-left: clamp(290px, 23vw, 360px); } }
@media (max-width: 1250px){ .lx-app-phone{ display: none; } .lx-app-inner{ padding-left: 24px; } }

/* App band: bigger bowl, tucked partly off the edge; the new hand-and-phone photo on the left */
.lx-app{ overflow: hidden; }
.lx-app-bowl{ max-height: 300px; right: -70px; bottom: -80px; }
.lx-app-phone{ max-height: 250px; left: -10px; bottom: -6px; filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
@media (min-width: 1101px){ .lx-app{ min-height: 220px; } }
/* Phone photo: a bit bigger and sitting exactly on the bottom edge of the band */
@media (min-width: 1101px){ .lx-app{ min-height: 300px; } }
.lx-app-phone{ max-height: 300px; left: 0; bottom: 0; }
@media (min-width: 1101px){ .lx-app-inner{ padding-left: clamp(360px, 27vw, 440px); } }
@media (min-width: 1101px){ .lx-app .lx-h2{ white-space: nowrap; font-size: clamp(1.8rem, 2.6vw, 2.4rem); } .lx-app-text{ max-width: 440px; } }

/* ---------- Side menu (drawer) in the same dark green & gold as the site ---------- */
.nav-drawer{ background: var(--lx-green); color: #F5EEDD; border-inline-end: 1px solid rgba(216,176,100,0.18); }
.nav-drawer .drawer-head{ border-bottom: 1px solid rgba(245,238,221,0.1); padding-bottom: 14px; }
.nav-drawer .brand-logo:not(.brand-logo--custom){ filter: brightness(0) invert(95%) sepia(9%) saturate(420%) hue-rotate(356deg) brightness(101%); }
.nav-drawer .brand-mark .brand-text{ color: #F5EEDD; font-family: "Playfair Display", Georgia, serif; font-weight: 500; letter-spacing: .06em; }
.nav-drawer .brand-mark .brand-text span{ display: none; }
.drawer-close{ background: rgba(255,255,255,0.08); color: #F5EEDD; }
.drawer-close:hover{ background: rgba(255,255,255,0.15); }

/* Sign in / Sign up — same as the header */
.nav-drawer .drawer-auth-in{ background: transparent; border: 1px solid rgba(245,238,221,0.45); color: #F5EEDD; }
.nav-drawer .drawer-auth-up{ background: var(--lx-gold); color: var(--lx-green); box-shadow: none; }
.nav-drawer .drawer-user{ background: rgba(255,255,255,0.05); border-color: rgba(245,238,221,0.14); color: #F5EEDD; }
.nav-drawer .drawer-user-text small{ color: rgba(245,238,221,0.6); }
.nav-drawer .drawer-avatar{ background: var(--lx-gold); color: var(--lx-green); }

/* Menu items */
.nav-drawer .drawer-link, .nav-drawer .drawer-group-toggle{ color: #F5EEDD; }
.nav-drawer .drawer-link:hover, .nav-drawer .drawer-group-toggle:hover,
.nav-drawer .drawer-group.is-open .drawer-group-toggle{ background: rgba(255,255,255,0.06); }
.nav-drawer .drawer-link.is-current{ background: rgba(216,176,100,0.14); color: #fff; }
.nav-drawer .drawer-ico{ background: rgba(255,255,255,0.05); border-color: rgba(216,176,100,0.3); color: var(--lx-gold); }
.nav-drawer .drawer-chev, .nav-drawer .drawer-group-toggle .plus{ color: rgba(245,238,221,0.55); }
.nav-drawer a.drawer-sub{ color: rgba(245,238,221,0.82); }
.nav-drawer a.drawer-sub:hover{ background: rgba(255,255,255,0.05); color: #fff; }
.nav-drawer a.drawer-sub::before{ background: var(--lx-gold); }

/* "Talk to MORDEVO" card in gold */
.nav-drawer .drawer-contact{ background: var(--lx-gold); color: var(--lx-green); }
.nav-drawer .drawer-contact .drawer-ico{ background: rgba(15,42,29,0.12); color: var(--lx-green); border-color: transparent; }
.nav-drawer .drawer-contact small{ opacity: .8; }
.nav-drawer .drawer-contact .drawer-chev{ color: var(--lx-green); }

/* ---------- Plans & packages ---------- */
/* Plan cards: same height, buttons lined up at the bottom */
.plan-card{ display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.plan-card > .btn, .plan-card > form, .plan-card > .subscribe-form{ margin-top: auto !important; }
.plan-card > ul{ margin-bottom: var(--space-6); }
.grid-3 > .card{ height: 100%; box-sizing: border-box; }
/* Catering packages: button at the bottom with space above it */
.pkg-choose{ margin-top: auto; }
.card > ul + .pkg-choose, .card > p + .pkg-choose{ margin-top: auto; }
.card:has(> .pkg-choose) > ul{ margin-bottom: var(--space-5); }

/* Gold/brown buttons across the site now use the site's dark green (like the menu), gold on hover */
.btn-gold{ background: var(--lx-green); color: #F5EEDD; border: 1px solid var(--lx-green); }
.btn-gold:hover{ background: var(--lx-green-3); color: #fff; border-color: var(--lx-gold); }
/* On dark green sections the same buttons turn gold (like "Sign up" in the menu), so they stay visible */
.page-hero .btn-gold, .section--forest .btn-gold, .hero .btn-gold{ background: var(--lx-gold); color: var(--lx-green); border-color: var(--lx-gold); }
.page-hero .btn-gold:hover, .section--forest .btn-gold:hover, .hero .btn-gold:hover{ background: #E6C27C; color: var(--lx-green); }

/* Logo: a touch bolder and 5% bigger (header, side menu, footer) */
.site-header .brand-logo{ height: 48px; }
.site-header .brand-mark .brand-text{ font-weight: 600; font-size: 1.68rem; }
.site-header .brand-tagline{ font-size: 8.9px; }
.nav-drawer .brand-mark .brand-text, .site-footer .brand-mark .brand-text{ font-weight: 600; }
.nav-drawer .brand-logo{ height: 38px; }
.nav-drawer .brand-mark .brand-text{ font-size: 1.31rem; }
.site-footer .brand-logo--footer{ height: 42px; }
@media (max-width: 560px){
  .site-header .brand-logo{ height: 36px; }
  .site-header .brand-mark .brand-text{ font-size: 1.26rem; }
}
/* New hero photo: keep the bottom (dish + handwriting) fully visible */
.lx-hero-photo img, html[dir=rtl] .lx-hero-photo img{ object-position: right bottom; }

/* ==========================================================================
   INNER PAGES — design set 2 (buttons, menu, cart)
   ========================================================================== */
/* Buttons: gold, like the design (overrides the earlier green) */
.btn-gold, .btn-primary{ background: var(--lx-gold); color: var(--lx-green); border: 1px solid var(--lx-gold); font-weight: 700; border-radius: 999px; }
.btn-gold:hover, .btn-primary:hover{ background: #E6C27C; color: var(--lx-green); border-color: #E6C27C; }
.btn-outline{ border-radius: 999px; }
.btn svg{ vertical-align: -3px; margin-inline-start: 6px; }

/* ---------- Menu page ---------- */
.mn-hero{ position: relative; overflow: hidden; background: #F4EEE2; }
.mn-hero-photo{ position: absolute; inset: 0 0 0 38%; }
.mn-hero-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: right center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.mn-hero-inner{ position: relative; z-index: 1; padding-top: 44px; padding-bottom: 40px; }
.mn-title{ margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.05; color: var(--lx-ink); max-width: 11ch; }
.mn-sub{ margin: 14px 0 22px; max-width: 440px; color: var(--lx-muted); line-height: 1.6; }
.mn-search{ display: flex; align-items: center; gap: 10px; max-width: 560px; height: 50px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1px solid #E6DCC7; color: var(--lx-muted); box-shadow: 0 6px 18px rgba(19,36,26,0.06); }
.mn-search input{ flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 15px; color: var(--lx-ink); }
.mn-search:focus-within{ border-color: var(--lx-gold); }
.mn-body{ background: var(--lx-cream); padding: 26px 0 64px; }
.mn-pills{ display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-bottom: 22px; }
.mn-pills::-webkit-scrollbar{ display: none; }
.mn-pill{ flex-shrink: 0; height: 40px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; background: #fff; border: 1px solid #E6DCC7; color: var(--lx-ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.mn-pill:hover{ border-color: var(--lx-gold); color: var(--lx-ink); }
.mn-pill.is-active{ background: var(--lx-green); border-color: var(--lx-green); color: #fff; }
.mn-layout{ display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: start; }
.mn-side{ display: flex; flex-direction: column; gap: 6px; position: sticky; top: calc(var(--header-h, 78px) + 16px); }
.mn-cat{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--lx-ink); text-align: start; }
.mn-cat:hover{ background: rgba(216,176,100,0.14); }
.mn-cat.is-active{ background: #EADFC4; }
.mn-cat-ico{ width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #EFE4CC; color: var(--lx-ink); }
.mn-cat.is-active .mn-cat-ico{ background: var(--lx-gold); color: var(--lx-green); }
.mn-tools{ display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.mn-toggle{ display: inline-flex; background: #fff; border: 1px solid #E6DCC7; border-radius: 999px; padding: 3px; }
.mn-toggle button{ border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--lx-ink); }
.mn-toggle button.is-active{ background: var(--lx-green); color: #fff; }
.mn-sort{ height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid #E6DCC7; background: #fff; font: inherit; font-size: 13px; color: var(--lx-ink); }
.mn-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* compact dish cards (image, name, price, +) */
.mn-grid .product-card, .ct-page .product-card{ background: #fff; border: 1px solid #EDE4D2; border-radius: 16px; padding: 10px; box-shadow: 0 1px 2px rgba(19,36,26,0.04), 0 8px 22px rgba(19,36,26,0.05); overflow: visible; }
.mn-grid .pc-media{ display: block; border-radius: 12px; overflow: hidden; background: #F4EFE3; aspect-ratio: 4 / 3; }
.mn-grid .pc-media img{ width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }
.mn-grid .product-card:hover .pc-media img{ transform: scale(1.05); }
.mn-grid .pc-body{ padding: 12px 4px 4px; }
.mn-grid .pc-cat, .mn-grid .pc-desc, .mn-grid .rating-badge{ display: none; }
.mn-grid .pc-name{ font-family: inherit; font-size: 15px; font-weight: 600; color: var(--lx-ink); margin: 0 0 10px; }
.mn-grid .pc-price{ font-weight: 700; font-size: 16px; color: var(--lx-ink); }
.mn-grid .pc-add{ width: 36px; height: 36px; border-radius: 50%; background: var(--lx-gold); color: var(--lx-green); border: 0; font-size: 20px; font-weight: 700; }
.mn-grid .pc-add:hover{ background: var(--lx-gold-2); color: #fff; }
.mn-grid .pc-foot .btn-outline{ border-color: var(--lx-gold); color: var(--lx-ink); }
.mn-grid .pc-fav{ top: 16px; right: 16px; }
@media (max-width: 1100px){ .mn-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px){
  .mn-hero-photo{ position: relative; inset: auto; height: 180px; order: 2; }
  .mn-hero{ display: flex; flex-direction: column; }
  .mn-hero-photo img{ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
  .mn-hero-inner{ padding-bottom: 10px; }
  .mn-layout{ grid-template-columns: 1fr; gap: 12px; }
  .mn-side{ position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .mn-side::-webkit-scrollbar{ display: none; }
  .mn-cat{ width: auto; flex-shrink: 0; white-space: nowrap; background: #fff; border: 1px solid #E6DCC7; border-radius: 999px; padding: 6px 12px 6px 6px; }
  .mn-cat-ico{ width: 26px; height: 26px; }
  .mn-grid{ gap: 12px; }
  .mn-grid .pc-name{ font-size: 14px; }
}

/* ---------- Cart page ---------- */
.ct-page{ background: var(--lx-cream); }
.ct-layout{ display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.ct-card{ background: #fff; border: 1px solid #EDE4D2; border-radius: 18px; padding: 22px; box-shadow: 0 1px 2px rgba(19,36,26,0.04), 0 8px 22px rgba(19,36,26,0.05); }
.ct-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ct-title{ margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.9rem; color: var(--lx-ink); }
.ct-sub{ margin: 0 0 14px; font-family: "Playfair Display", Georgia, serif; font-size: 1.35rem; color: var(--lx-ink); }
.ct-line{ display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid #F0E8D8; }
.ct-thumb{ width: 76px; height: 64px; border-radius: 12px; overflow: hidden; background: #F4EFE3; display: block; }
.ct-thumb img{ width: 100%; height: 100%; object-fit: contain; }
.ct-name{ font-weight: 700; color: var(--lx-ink); }
.ct-meta{ font-size: 13px; color: var(--lx-muted); margin-top: 3px; }
.ct-right{ display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ct-price{ font-weight: 700; color: var(--lx-ink); }
.ct-actions{ display: flex; align-items: center; gap: 8px; }
.ct-stepper{ background: #F6F1E6; border-radius: 999px; }
.ct-stepper .pc-qty-btn{ background: #fff; color: var(--lx-ink); }
.ct-trash{ width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(179,38,30,0.08); color: #B3261E; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ct-trash:hover{ background: #B3261E; color: #fff; }
.ct-note{ margin-top: 14px; }
.ct-note summary{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--lx-gold-2); font-weight: 600; text-decoration: underline; list-style: none; }
.ct-note summary::-webkit-details-marker{ display: none; }
.ct-note textarea{ margin-top: 10px; }
.ct-suggest{ margin-top: 26px; }
.ct-summary{ position: sticky; top: calc(var(--header-h, 78px) + 20px); }
.ct-summary .summary-row.total span{ font-size: 1.15rem; }
.ct-go{ height: 50px; display: flex; align-items: center; justify-content: center; }
.ct-promo{ margin-top: 20px; }
.ct-promo label{ display: block; font-weight: 700; font-size: 14px; color: var(--lx-ink); margin-bottom: 8px; }
.ct-promo-row{ display: flex; gap: 8px; }
.ct-promo-row .input{ flex: 1; min-width: 0; }
@media (max-width: 900px){
  .ct-layout{ grid-template-columns: 1fr; }
  .ct-summary{ position: static; }
  .ct-line{ grid-template-columns: 64px 1fr; }
  .ct-thumb{ width: 64px; height: 56px; }
  .ct-right{ grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}
.ct-main, .mn-main{ min-width: 0; }
.mn-grid .rating, .mn-grid .pc-rating, .mn-grid [class*="rating"]{ display: none !important; }
.ct-stepper .pc-qty-value{ color: var(--lx-ink); font-weight: 700; min-width: 22px; text-align: center; }
.mn-grid .pc-name{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; line-height: 1.3; }
@media (max-width: 800px){ .mn-sort{ max-width: 120px; } .mn-tools{ gap: 8px; } }

/* ==========================================================================
   INNER PAGES — set 2 (product, checkout, catering, plans, story, FAQ,
   sign in/up, tracking, My Day)
   ========================================================================== */
.pg-crumbs{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--lx-muted); margin-bottom: 14px; }
.pg-crumbs a{ color: var(--lx-muted); }
.pg-crumbs a:hover{ color: var(--lx-gold-2); }
.pg-crumbs span:last-child{ color: var(--lx-ink); font-weight: 600; }
.lx-hero .pg-crumbs, .cg-hero .pg-crumbs{ color: rgba(255,255,255,.7); }

/* ---------- Dish page ---------- */
.pd-page{ background: var(--lx-cream); }
.pd-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pd-main{ background: #fff; border: 1px solid #EDE4D2; border-radius: 20px; aspect-ratio: 4 / 3; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pd-main img{ width: 100%; height: 100%; object-fit: contain; }
.pd-thumbs{ display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.pd-thumb{ flex: 0 0 84px; height: 70px; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: #fff; padding: 0; cursor: pointer; }
.pd-thumb img{ width: 100%; height: 100%; object-fit: contain; }
.pd-thumb.is-active{ border-color: var(--lx-gold); }
.pd-fresh{ display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: #EFE7D6; }
.pd-fresh-ico, .pd-badge-ico{ width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #E3D3AD; color: var(--lx-ink); }
.pd-fresh strong, .pd-badges strong{ display: block; color: var(--lx-ink); }
.pd-fresh small, .pd-badges small{ display: block; color: var(--lx-muted); font-size: 12.5px; }
.pd-title{ margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.6rem); color: var(--lx-ink); }
.pd-desc{ color: var(--lx-muted); line-height: 1.7; margin: 12px 0 16px; max-width: 520px; }
.pd-price{ font-size: 1.8rem; font-weight: 800; color: var(--lx-ink); margin: 0; }
.pd-sizes{ display: flex; gap: 10px; max-width: 420px; }
.pd-size{ flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #E6DCC7; cursor: pointer; }
.pd-size:has(input:checked){ border-color: var(--lx-gold); box-shadow: 0 0 0 3px rgba(216,176,100,.25); }
.pd-size input{ width: auto; accent-color: var(--lx-green); }
.pd-size span{ display: flex; flex-direction: column; }
.pd-size em{ font-style: normal; color: var(--lx-muted); font-size: 14px; }
.pd-buy{ display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.pd-qty{ display: inline-flex; align-items: center; height: 50px; border-radius: 999px; background: #fff; border: 1px solid #E6DCC7; }
.pd-qty button{ width: 46px; height: 48px; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: var(--lx-ink); }
.pd-qty span{ min-width: 26px; text-align: center; font-weight: 700; }
.pd-add{ height: 50px; padding: 0 30px; display: inline-flex; align-items: center; gap: 8px; }
.pd-fav{ width: 50px; height: 50px; border-radius: 50%; border: 1px solid #E6DCC7; background: #fff; color: var(--lx-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pd-fav.is-fav{ color: #B3261E; border-color: #EBC2BE; }
.pd-fav.is-fav svg{ fill: currentColor; }
.pd-badges{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; padding-top: 24px; border-top: 1px solid #E6DCC7; }
.pd-badges > div{ display: flex; align-items: center; gap: 12px; }
.pd-related{ background: var(--lx-cream); padding-top: 0; }
.mn-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pd-related .product-card, .md-grid .product-card{ background: #fff; border: 1px solid #EDE4D2; border-radius: 16px; padding: 10px; }
.pd-related .pc-media, .md-grid .pc-media{ display: block; border-radius: 12px; overflow: hidden; background: #F4EFE3; aspect-ratio: 4 / 3; }
.pd-related .pc-media img, .md-grid .pc-media img{ width: 100%; height: 100%; object-fit: contain; }
.pd-related .pc-cat, .pd-related .pc-desc, .pd-related .rating-badge, .md-grid .pc-cat, .md-grid .pc-desc, .md-grid .rating-badge{ display: none; }
.pd-related .pc-name, .md-grid .pc-name{ font-family: inherit; font-size: 15px; font-weight: 600; margin: 10px 0 8px; color: var(--lx-ink); }
.pd-related .pc-add, .md-grid .pc-add{ width: 36px; height: 36px; border-radius: 50%; background: var(--lx-gold); color: var(--lx-green); border: 0; font-size: 20px; font-weight: 700; }
@media (max-width: 900px){
  .pd-grid{ grid-template-columns: 1fr; gap: 20px; }
  .pd-badges{ grid-template-columns: 1fr; }
  .mn-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Checkout ---------- */
.ck-page{ background: var(--lx-cream); }
.ck-steps{ display: flex; align-items: center; gap: 14px; list-style: none; padding: 0; margin: 0 0 22px; color: var(--lx-muted); font-weight: 600; font-size: 14px; }
.ck-steps li{ display: flex; align-items: center; gap: 8px; }
.ck-steps li + li::before{ content: ""; width: 60px; height: 1px; background: #D9CDB3; margin-inline-end: 6px; }
.ck-steps span{ width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #D9CDB3; font-size: 13px; }
.ck-steps li.is-active{ color: var(--lx-ink); }
.ck-steps li.is-active span{ background: var(--lx-green); border-color: var(--lx-green); color: #fff; }
.ck-page .card{ border-radius: 18px; border: 1px solid #EDE4D2; }
.ck-page .h-3{ font-family: "Playfair Display", Georgia, serif; }
.ck-page .tag.is-active{ background: var(--lx-green); border-color: var(--lx-green); color: #fff; }
.ck-saved{ margin-bottom: 14px; }
.ck-addr{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #F7F2E8; border: 1px solid #EDE4D2; margin-bottom: 8px; }
.ck-addr label{ flex: 1; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ck-addr input{ width: auto; accent-color: var(--lx-green); }
.ck-addr span{ display: flex; flex-direction: column; }
.ck-addr small{ color: var(--lx-muted); }
.ck-addr:has(input:checked){ border-color: var(--lx-gold); }
.ck-addr-del{ border: 0; background: none; color: #B3261E; cursor: pointer; font-size: 13px; }
.ck-item > span:first-child{ display: inline-flex; align-items: center; gap: 10px; }
.ck-thumb{ width: 42px; height: 34px; border-radius: 8px; overflow: hidden; background: #F4EFE3; flex-shrink: 0; display: inline-block; }
.ck-thumb img{ width: 100%; height: 100%; object-fit: contain; }
#placeOrderBtn{ height: 52px; }
@media (max-width: 600px){ .ck-steps li + li::before{ width: 18px; } .ck-steps{ font-size: 12.5px; gap: 8px; } }

/* ---------- Catering ---------- */
.cg-hero{ position: relative; overflow: hidden; background: var(--lx-green); color: #fff; min-height: 360px; display: flex; align-items: center; }
.cg-hero-photo{ position: absolute; inset: 0 0 0 40%; }
.cg-hero-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: right center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
.cg-hero-inner{ position: relative; z-index: 1; padding-top: 48px; padding-bottom: 48px; }
.cg-title{ font-size: clamp(2rem, 3.6vw, 3.2rem); max-width: 13ch; }
.cg-pkg{ background: #fff; border: 1px solid #EDE4D2; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 8px 22px rgba(19,36,26,.05); }
.cg-pkg h3{ margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; color: var(--lx-ink); }
.cg-pkg-photo{ border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #F4EFE3; margin: 6px 0; }
.cg-pkg-photo img{ width: 100%; height: 100%; object-fit: cover; }
.cg-pkg-price{ margin: 0; font-weight: 800; font-size: 1.2rem; color: var(--lx-ink); }
.cg-pkg-price small{ display: block; font-weight: 400; font-size: 12px; color: var(--lx-muted); }
.cg-pkg-list{ list-style: none; padding: 0; margin: 4px 0 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cg-pkg-list li{ display: flex; gap: 8px; align-items: flex-start; }
.cg-pkg-list svg{ color: var(--lx-gold-2); flex-shrink: 0; width: 18px; height: 18px; }
.cg-pkg .pkg-choose{ margin-top: auto; height: 46px; display: flex; align-items: center; justify-content: center; }
.cg-step{ font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.2rem; }
@media (max-width: 800px){
  .cg-hero{ flex-direction: column; min-height: 0; }
  .cg-hero-photo{ position: relative; inset: auto; height: 200px; width: 100%; order: 2; }
  .cg-hero-photo img{ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
}

/* ---------- Plans ---------- */
.pl-page{ background: var(--lx-cream); }
.plan-card{ background: #fff; border: 1px solid #EDE4D2; border-radius: 18px; padding: 20px; }
.pl-head{ display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.pl-name{ margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.45rem; color: var(--lx-ink); }
.pl-desc{ margin: 4px 0 0; color: var(--lx-muted); font-size: 14px; }
.pl-badge, .pl-save{ flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pl-badge{ background: var(--lx-gold); color: var(--lx-green); }
.pl-save{ background: #EFE4CC; color: #8A6A33; }
.pl-photo{ margin: 14px 0 6px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #F4EFE3; }
.pl-photo img{ width: 100%; height: 100%; object-fit: cover; }
.pl-tick{ width: 20px; height: 20px; border-radius: 50%; background: var(--lx-gold); color: var(--lx-green); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pl-tick svg{ width: 13px; height: 13px; stroke-width: 2.6; }
.plan-card ul li span:last-child{ color: var(--lx-ink); font-size: 14px; }
.pl-from{ margin: 14px 0 0; font-size: 1.5rem; font-weight: 800; color: var(--lx-ink); }
.pl-from small{ display: block; font-size: 12px; font-weight: 600; color: var(--lx-muted); }
.pl-from span{ font-size: .95rem; font-weight: 600; color: var(--lx-muted); }

/* ---------- Our Story + Get in touch ---------- */
.st-page{ padding-top: 40px; }
.st-page .lx-story-grid{ grid-template-columns: 1fr 1.05fr; }
.st-contact{ padding-top: 50px; }
.st-contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.st-lines{ list-style: none; padding: 0; margin: 18px 0; display: flex; flex-direction: column; gap: 14px; }
.st-lines li{ display: flex; align-items: center; gap: 12px; color: var(--lx-ink); }
.st-lines li > span:last-child{ display: flex; flex-direction: column; }
.st-lines small{ color: var(--lx-muted); font-size: 12.5px; }
.st-ico{ width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--lx-gold); color: var(--lx-green); }
.st-ico svg{ width: 18px; height: 18px; }
.st-social .footer-social a, .st-social .footer-social button{ border-color: #D9CDB3; color: var(--lx-ink); }
.st-form .field{ margin-bottom: 12px; }
@media (max-width: 900px){ .st-page .lx-story-grid, .st-contact-grid{ grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.fq-layout{ display: grid; grid-template-columns: 200px 1fr 290px; gap: 22px; margin-top: 24px; align-items: start; }
.fq-tabs{ display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #EDE4D2; border-radius: 16px; padding: 8px; }
.fq-tab{ text-align: start; padding: 11px 12px; border-radius: 10px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--lx-ink); cursor: pointer; }
.fq-tab:hover{ background: #F6F1E6; }
.fq-tab.is-active{ background: var(--lx-green); color: #fff; }
.fq-list .accordion-item{ background: #fff; border: 1px solid #EDE4D2; border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.fq-list .accordion-trigger{ padding: 16px 18px; font-weight: 700; color: var(--lx-ink); font-family: inherit; font-size: 15px; }
.fq-list .accordion-item.is-open .plus{ transform: rotate(180deg); }
.fq-list .plus{ transition: transform .2s; color: var(--lx-muted); }
.fq-list .accordion-panel-inner{ padding: 0 18px 16px; color: var(--lx-muted); line-height: 1.7; }
.fq-help{ position: sticky; top: calc(var(--header-h, 78px) + 20px); }
@media (max-width: 1000px){
  .fq-layout{ grid-template-columns: 1fr; }
  .fq-tabs{ flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .fq-tab{ white-space: nowrap; }
  .fq-help{ position: static; }
}

/* ---------- Sign in / Sign up ---------- */
.au-page{ background: var(--lx-cream); padding: 30px 0 60px; }
.au-wrap{ max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(19,36,26,.12); }
.au-panel{ position: relative; min-height: 600px; padding: 48px 40px; background-size: cover; background-position: center; color: #fff; display: flex; flex-direction: column; }
.au-title{ margin: 6px 0 14px; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.08; max-width: 12ch; color: #fff; }
.au-text{ color: rgba(255,255,255,.88); line-height: 1.6; max-width: 360px; }
.au-swoosh{ display: block; width: 140px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #E8C26E, #C79A45); transform: rotate(-6deg); margin-top: 18px; }
.au-form{ padding: 44px 40px; }
.au-h{ margin: 0 0 4px; font-family: "Playfair Display", Georgia, serif; font-size: 2rem; color: var(--lx-ink); }
.au-form .field{ margin-top: 14px; }
.au-form label{ font-weight: 700; font-size: 13.5px; color: var(--lx-ink); }
.au-input{ position: relative; display: flex; align-items: center; }
.au-input > svg{ position: absolute; left: 14px; width: 18px; height: 18px; color: var(--lx-muted); pointer-events: none; }
.au-input .input{ padding-left: 42px; border-radius: 12px; }
.au-phone .input{ padding-left: 92px; }
.au-flag{ position: absolute; left: 12px; font-size: 14px; color: var(--lx-ink); font-weight: 600; pointer-events: none; }
.au-eye{ position: absolute; right: 8px; width: 36px; height: 36px; border: 0; background: none; color: var(--lx-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.au-forgot{ text-align: right; margin: 8px 0 0; font-size: 13px; }
.au-forgot a, .au-switch a, .au-terms a{ color: var(--lx-gold-2); font-weight: 700; text-decoration: underline; }
.au-submit{ height: 50px; margin-top: 16px; display: flex; align-items: center; justify-content: center; }
.au-or{ display: flex; align-items: center; gap: 10px; color: var(--lx-muted); font-size: 13px; margin: 20px 0 12px; }
.au-or::before, .au-or::after{ content: ""; flex: 1; height: 1px; background: #E6DCC7; }
.au-social{ display: flex; flex-direction: column; gap: 10px; }
.au-soc{ height: 46px; border-radius: 12px; border: 1px solid #E6DCC7; background: #fff; font: inherit; font-weight: 600; font-size: 14px; color: var(--lx-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.au-soc em{ font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #EFE4CC; color: #8A6A33; }
.au-switch{ text-align: center; margin-top: 18px; color: var(--lx-muted); }
.au-terms{ display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-weight: 500 !important; color: var(--lx-muted) !important; }
.au-terms input{ width: auto; margin-top: 3px; accent-color: var(--lx-green); }
.au-ref{ margin-top: 12px; font-size: 13px; }
.au-ref summary{ cursor: pointer; color: var(--lx-gold-2); font-weight: 600; }
.au-ref .input{ margin-top: 8px; }
@media (max-width: 860px){
  .au-wrap{ grid-template-columns: 1fr; margin: 0 14px; }
  .au-panel{ min-height: 230px; padding: 28px 22px; }
  .au-form{ padding: 26px 22px; }
}

/* ---------- Order tracking ---------- */
.tr-card{ margin-top: 18px; }
.tr-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tr-no{ margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; color: var(--lx-ink); }
.tr-pill{ padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #EFE4CC; color: #8A6A33; white-space: nowrap; }
.tr-pill--on_the_way, .tr-pill--delivered{ background: #DDEFE2; color: #23613A; }
.tr-pill--cancelled{ background: #F8DEDB; color: #B3261E; }
.tr-steps{ position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; }
.tr-steps::before, .tr-steps::after{ content: ""; position: absolute; top: 23px; left: 12.5%; height: 3px; border-radius: 3px; }
.tr-steps::before{ right: 12.5%; background: #E6DCC7; }
.tr-steps::after{ width: calc(75% * var(--tr-pct) / 100); background: var(--lx-gold); }
.tr-step{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; opacity: .55; }
.tr-step.is-done, .tr-step.is-current{ opacity: 1; }
.tr-dot{ width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; background: #fff; border: 2px solid #E6DCC7; margin-bottom: 6px; }
.tr-step.is-done .tr-dot{ background: #F4E5C3; border-color: var(--lx-gold); }
.tr-step.is-current .tr-dot{ background: var(--lx-green); border-color: var(--lx-green); box-shadow: 0 0 0 5px rgba(15,42,29,.12); }
.tr-step strong{ font-size: 14px; color: var(--lx-ink); }
.tr-step small{ color: var(--lx-muted); font-size: 12.5px; }
.tr-grid{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-top: 20px; align-items: start; }
.tr-item{ display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #F0E8D8; font-size: 14px; }
.tr-thumb{ width: 52px; height: 42px; border-radius: 10px; overflow: hidden; background: #F4EFE3; display: inline-block; }
.tr-thumb img{ width: 100%; height: 100%; object-fit: contain; }
.tr-name{ font-weight: 600; color: var(--lx-ink); }
@media (max-width: 800px){
  .tr-grid{ grid-template-columns: 1fr; }
  .tr-dot{ width: 40px; height: 40px; font-size: 17px; }
  .tr-steps::before, .tr-steps::after{ top: 19px; }
  .tr-step strong{ font-size: 12px; }
}

/* ---------- My Day (Today's menu) ---------- */
.md-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.md-date{ display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--lx-ink); }
.md-date .lx-arrow:disabled{ opacity: .35; cursor: default; }
.md-tabs{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 20px; }
.md-tab{ display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px; border-radius: 14px; border: 1px solid #E6DCC7; background: #F7F2E8; font: inherit; cursor: pointer; color: var(--lx-ink); }
.md-tab small{ color: var(--lx-muted); font-size: 12px; }
.md-tab.is-active{ background: var(--lx-green); border-color: var(--lx-green); color: #fff; }
.md-tab.is-active small{ color: rgba(255,255,255,.75); }
.md-cards{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 26px; }
.md-card{ border-radius: 18px; padding: 22px; display: flex; align-items: center; gap: 18px; }
.md-card h3{ margin: 0 0 4px; font-family: "Playfair Display", Georgia, serif; font-size: 1.35rem; }
.md-card p{ margin: 0 0 12px; }
.md-card--plan{ background: #EFE4CC; color: var(--lx-ink); }
.md-card--plan p{ color: var(--lx-muted); }
.md-ico{ width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--lx-gold); color: var(--lx-green); }
.md-card--deliver{ background: var(--lx-green); color: #fff; justify-content: space-between; }
.md-card--deliver p{ color: rgba(255,255,255,.8); margin: 0; }
.md-van{ width: 74px; height: 74px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--lx-gold); color: var(--lx-green); flex-shrink: 0; }
.md-van svg{ width: 40px; height: 40px; }
@media (max-width: 800px){ .md-cards{ grid-template-columns: 1fr; } .md-tabs{ gap: 8px; } .md-tab{ padding: 10px 6px; } }
.cg-hero-inner > *{ max-width: 520px; }
@media (min-width: 801px){ .cg-hero-photo{ inset: 0 0 0 46%; } }
.cg-hero-inner{ width: 100%; max-width: 1440px; }

/* ---------- Dish options & add-ons ---------- */
.pd-options{ margin-top: 18px; padding-top: 16px; border-top: 1px solid #E6DCC7; }
.pd-opt-title{ margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--lx-ink); font-family: inherit; }
.pd-opt-group{ margin-bottom: 14px; }
.pd-opt-name{ margin: 0 0 8px; font-weight: 700; font-size: 14px; color: var(--lx-ink); }
.pd-req{ font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #EFE4CC; color: #8A6A33; margin-inline-start: 6px; }
.pd-opt-row{ display: flex; flex-wrap: wrap; gap: 10px; }
.pd-opt-list{ display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.pd-opt{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #E6DCC7; cursor: pointer; font-size: 14px; color: var(--lx-ink); }
.pd-opt input{ width: auto; accent-color: var(--lx-green); }
.pd-opt em{ margin-inline-start: auto; font-style: normal; color: var(--lx-muted); font-weight: 600; font-size: 13px; }
.pd-opt:has(input:checked){ border-color: var(--lx-gold); box-shadow: 0 0 0 3px rgba(216,176,100,.22); }
.pd-total{ font-weight: 800; font-size: 1.1rem; color: var(--lx-ink); }
/* sign in / sign up photo: food on the right, text on the empty left */
.au-panel{ background-position: right center; }
.au-panel .au-text{ max-width: 300px; }
/* keep the text on the empty part of the sign in / sign up photo */
.au-panel{ background-position: 22% center; }
.au-panel .au-title{ max-width: 9ch; }
.au-panel .au-text{ max-width: 250px; }
@media (max-width: 860px){ .au-panel{ background-position: 30% 40%; } .au-panel .au-text{ max-width: 220px; } }

/* All dish photos sit on plain white, so photos with a white background and
   photos with a transparent background look the same everywhere */
.lx-dish-photo, .mn-grid .pc-media, .pd-related .pc-media, .md-grid .pc-media,
.ct-thumb, .ck-thumb, .tr-thumb, .pd-main, .pd-thumb{ background: #fff !important; }
.mn-grid .pc-media, .pd-related .pc-media, .md-grid .pc-media, .lx-dish-photo{ border: 1px solid #F1EBDF; }

/* Company co-branding next to the MORDEVO logo (employees of a company see their company here).
   On the dark header: a light divider, the name in cream, and the logo on a small white card
   so any logo colour stays visible. */
.site-header .partner-slot{ border-left-color: rgba(245,238,221,0.25); margin-left: 14px; padding-left: 14px; }
.site-header .partner-company-name{ color: #F5EEDD; font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; }
.site-header .partner-company-logo{ height: 38px; max-width: 120px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px 8px; box-sizing: border-box; }
@media (max-width: 560px){
  .site-header .partner-slot{ margin-left: 8px; padding-left: 8px; }
  .site-header .partner-company-logo{ height: 30px; max-width: 80px; padding: 3px 6px; }
  .site-header .partner-company-name{ font-size: .9rem; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
}

/* Menu cards on the home page: close-up photos filling the top of the card */
.lx-mood-photo{ background: var(--lx-green-3); height: 140px; padding: 0; border-radius: 0 0 22px 22px; }
.lx-mood-photo img{ object-fit: cover; }

/* ---------- 10-second "edit your order" countdown ---------- */
.oc-scrim{ position: fixed; inset: 0; z-index: 2000; background: rgba(8,22,15,.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.oc-box{ width: 100%; max-width: 380px; background: #fff; border-radius: 22px; padding: 28px 24px 22px; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.oc-ring{ position: relative; width: 120px; height: 120px; margin: 0 auto 14px; }
.oc-ring svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.oc-track{ fill: none; stroke: #EFE7D6; stroke-width: 8; }
.oc-progress{ fill: none; stroke: var(--lx-gold); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 0; animation: oc-run var(--oc-total) linear forwards; }
@keyframes oc-run{ to{ stroke-dashoffset: 326.7; } }
.oc-num{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Playfair Display", Georgia, serif; font-size: 2.6rem; font-weight: 700; color: var(--lx-green); }
.oc-title{ margin: 0 0 6px; font-family: "Playfair Display", Georgia, serif; font-size: 1.4rem; color: var(--lx-ink); }
.oc-text{ margin: 0 0 18px; color: var(--lx-muted); line-height: 1.5; }
.oc-edit{ height: 50px; font-size: 15px; }
.oc-scrim.is-done .oc-progress{ animation: none; stroke: var(--lx-green); stroke-dashoffset: 0; }
.oc-scrim.is-done .oc-num{ color: var(--lx-green); }
.oc-edit:disabled{ background: var(--lx-green); border-color: var(--lx-green); color: #fff; opacity: 1; cursor: default; }
@media (prefers-reduced-motion: reduce){ .oc-progress{ animation: none; } }

/* Header: "Order Together" clearly active (gold), "Join Order" outlined */
.site-header .nav-stacked-buttons .btn-vivid-green, .site-header .nav-stacked-buttons .btn-primary{ background: var(--lx-gold) !important; border-color: var(--lx-gold) !important; color: var(--lx-green) !important; font-weight: 700; }
.site-header .nav-stacked-buttons .btn-vivid-green:hover, .site-header .nav-stacked-buttons .btn-primary:hover{ background: #E6C27C !important; }
.site-header .nav-stacked-buttons .btn-outline:not(:disabled){ color: #F5EEDD; border-color: rgba(245,238,221,0.6); }
.site-header .nav-stacked-buttons .btn-outline:not(:disabled):hover{ border-color: var(--lx-gold); color: var(--lx-gold); }
.site-header .nav-stacked-buttons .btn-outline:disabled{ opacity: .45; cursor: not-allowed; }

/* Group order: invite someone who isn't registered yet */
.go-invite{ margin-top: 10px; padding: 14px; border-radius: 14px; background: #FBF5E6; border: 1px solid #EBDDBA; }
.go-invite-title{ margin: 0 0 4px; font-weight: 700; color: var(--lx-ink); }
.go-invite-text{ margin: 0 0 10px; font-size: 13.5px; color: var(--lx-muted); }
.go-invite-actions{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.go-invite-link{ font-size: 12.5px; color: var(--lx-muted); background: #fff; }

/* Checkout: delivery time choice */
.ck-time{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ck-time-opt{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #F7F2E8; border: 1px solid #EDE4D2; cursor: pointer; }
.ck-time-opt input{ width: auto; accent-color: var(--lx-green); }
.ck-time-opt span{ display: flex; flex-direction: column; }
.ck-time-opt small{ color: var(--lx-muted); font-size: 12px; }
.ck-time-opt:has(input:checked){ border-color: var(--lx-gold); background: #FBF5E6; }

/* Menu page: the category list scrolls on its own; scrolling it never moves the dishes, and the page scroll never moves it */
@media (min-width: 801px){
  .mn-side{ max-height: calc(100vh - var(--header-h, 78px) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-inline-end: 4px; }
}
/* lists still scroll, but without a visible scrollbar */
.mn-side, .nav-drawer, .fq-tabs, .mn-pills, .lx-rail{ scrollbar-width: none; -ms-overflow-style: none; }
.mn-side::-webkit-scrollbar, .nav-drawer::-webkit-scrollbar, .fq-tabs::-webkit-scrollbar, .mn-pills::-webkit-scrollbar, .lx-rail::-webkit-scrollbar{ display: none; width: 0; height: 0; }

/* Customer's own note on a dish ("no onions…") */
.pd-note{ margin-top: 16px; max-width: 520px; }
.pd-note label{ display: block; font-weight: 700; font-size: 14px; color: var(--lx-ink); margin-bottom: 6px; }
.pd-note textarea{ border-radius: 12px; resize: vertical; }
.ct-note-line{ margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #8A5A1F; }
.ck-sub{ display: block; font-size: 11.5px; color: var(--lx-muted); font-weight: 500; margin-top: 2px; }

/* Back button at the top of every page (except home) */
.pg-backbar{ background: var(--lx-cream); padding: 14px 0 0; }
.pg-back{ display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid #E6DCC7; background: #fff; color: var(--lx-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(19,36,26,.05); }
.pg-back:hover{ border-color: var(--lx-gold); color: var(--lx-gold-2); }
.pg-back svg{ width: 16px; height: 16px; }
html[dir=rtl] .pg-back svg{ transform: scaleX(-1); }
/* dark pages: the bar matches the page */
body[data-route="catering"] .pg-backbar, body[data-route="login"] .pg-backbar, body[data-route="register"] .pg-backbar{ background: var(--lx-cream); }
.pg-backbar + .section, .pg-backbar + .lx-section, .pg-backbar + section.section{ padding-top: 18px !important; }
.pg-backbar + .au-page{ padding-top: 14px; }
.pg-backbar + .cg-hero, .pg-backbar + .mn-hero{ margin-top: 14px; }

/* ==========================================================================
   App band + footer (design: one photo behind, text & buttons on top)
   ========================================================================== */
.lx-app{ display: none !important; } /* the old band */
.ab-band{ position: relative; overflow: hidden; background: #0E2E1F var(--ab-img) center / cover no-repeat; min-height: clamp(360px, 36vw, 470px); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(216,176,100,.35); }
.ab-line{ position: absolute; left: 0; right: 0; bottom: 6%; width: 100%; height: 55%; pointer-events: none; opacity: .9; }
.ab-content{ position: relative; z-index: 1; text-align: center; padding: 40px 20px; max-width: 640px; }
.ab-kicker{ margin: 0 0 10px; color: var(--lx-gold); font-size: 13px; font-weight: 700; letter-spacing: .28em; }
.ab-title{ margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; color: #FBF6EA; font-size: clamp(2.2rem, 4.4vw, 3.9rem); line-height: 1.05; text-shadow: 0 4px 24px rgba(0,0,0,.35); }
.ab-text{ margin: 14px 0 0; color: #F2ECDD; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55; }
.ab-soon{ display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0 14px; color: var(--lx-gold); font-size: 13px; font-weight: 700; letter-spacing: .28em; }
.ab-soon::before, .ab-soon::after{ content: ""; width: 110px; height: 1px; background: linear-gradient(90deg, transparent, var(--lx-gold)); }
.ab-soon::after{ background: linear-gradient(90deg, var(--lx-gold), transparent); }
.ab-stores{ display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.ab-soon + .ab-stores{ margin-top: 0; }
.ab-content > .ab-stores:first-of-type{ margin-top: 22px; }
.ab-store{ display: inline-flex; align-items: center; gap: 12px; height: 60px; min-width: 200px; padding: 0 22px; border-radius: 14px; background: #050806; color: #fff; border: 1.5px solid var(--lx-gold); font: inherit; cursor: pointer; text-align: start; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .15s; }
.ab-store:hover{ transform: translateY(-2px); color: #fff; }
.ab-store span{ display: flex; flex-direction: column; font-size: 20px; font-weight: 700; line-height: 1.1; }
.ab-store small{ font-size: 12px; font-weight: 500; }
.ab-mobile-img{ display: none; }
@media (max-width: 900px){
  .ab-band{ display: block; min-height: 0; background-image: none; text-align: center; }
  .ab-line{ display: none; }
  .ab-content{ padding: 34px 18px 18px; margin: 0 auto; }
  .ab-text br{ display: none; }
  .ab-soon::before, .ab-soon::after{ width: 60px; }
  .ab-store{ min-width: 0; height: 54px; padding: 0 16px; }
  .ab-store span{ font-size: 17px; }
  .ab-mobile-img{ display: block; width: 100%; height: auto; }
}

/* Footer, like the design: thin dividers, gold-ringed social icons, serif newsletter title */
.site-footer .lx-footer-grid > div + div{ border-inline-start: 1px solid rgba(216,176,100,.22); padding-inline-start: 32px; }
.site-footer .footer-news{ border-inline-start-color: rgba(216,176,100,.22); }
.site-footer .footer-social a, .site-footer .footer-social button{ width: 44px; height: 44px; border: 1.5px solid var(--lx-gold); color: #F5EEDD; }
.site-footer .footer-social a:hover, .site-footer .footer-social button:hover{ background: var(--lx-gold); color: var(--lx-green); }
.site-footer .footer-news-title{ font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.25; color: #FBF6EA; }
.site-footer .footer-col h4{ letter-spacing: .2em; }
@media (max-width: 900px){
  .site-footer .lx-footer-grid > div + div{ border-inline-start: 0; padding-inline-start: 0; }
}
.ab-band{ background-color: #0E2E1F; background-position: center; background-size: cover; background-repeat: no-repeat; }
@media (max-width: 900px){ .ab-band{ background-image: none !important; } }
.ab-title{ font-size: clamp(2.1rem, 3.7vw, 3.5rem); }
.ab-content{ max-width: 560px; }

/* App band v2: the photo keeps its exact proportions at any window size or zoom,
   and the text/buttons scale with it so they always stay in the empty middle. */
.ab-band{ display: block; min-height: 0; background: #0D2C1E; }
.ab-band .ab-stage{ position: relative; max-width: 2072px; margin: 0 auto; aspect-ratio: 2072 / 759; background-size: 100% 100%; background-repeat: no-repeat; container-type: inline-size; display: flex; align-items: center; justify-content: center; }
.ab-band .ab-line{ bottom: 6%; height: 55%; }
.ab-band .ab-content{ max-width: 34cqw; padding: 0; }
.ab-band .ab-kicker{ font-size: max(10px, .82cqw); margin-bottom: .7cqw; }
.ab-band .ab-title{ font-size: 3.5cqw; }
.ab-band .ab-text{ font-size: max(12px, 1.12cqw); margin-top: .9cqw; }
.ab-band .ab-soon{ font-size: max(10px, .82cqw); margin: 1.5cqw 0 1cqw; gap: 1cqw; }
.ab-band .ab-soon::before, .ab-band .ab-soon::after{ width: 6.5cqw; }
.ab-band .ab-stores{ gap: 1.1cqw; flex-wrap: nowrap; }
.ab-band .ab-store{ height: 3.9cqw; min-width: 12.8cqw; padding: 0 1.4cqw; gap: .8cqw; border-radius: .9cqw; }
.ab-band .ab-store svg{ width: 1.7cqw; height: 1.7cqw; }
.ab-band .ab-store span{ font-size: 1.3cqw; }
.ab-band .ab-store small{ font-size: .78cqw; }
@media (max-width: 760px){
  .ab-band .ab-stage{ aspect-ratio: auto; background-image: none !important; display: block; container-type: normal; }
  .ab-band .ab-line{ display: none; }
  .ab-band .ab-content{ max-width: none; padding: 34px 18px 18px; }
  .ab-band .ab-kicker{ font-size: 11px; margin-bottom: 8px; }
  .ab-band .ab-title{ font-size: 2.1rem; }
  .ab-band .ab-text{ font-size: 15px; margin-top: 10px; }
  .ab-band .ab-soon{ font-size: 11px; margin: 18px 0 12px; gap: 12px; }
  .ab-band .ab-soon::before, .ab-band .ab-soon::after{ width: 50px; }
  .ab-band .ab-stores{ gap: 10px; flex-wrap: wrap; }
  .ab-band .ab-store{ height: 52px; min-width: 0; padding: 0 14px; gap: 10px; border-radius: 12px; }
  .ab-band .ab-store svg{ width: 22px; height: 22px; }
  .ab-band .ab-store span{ font-size: 16px; }
  .ab-band .ab-store small{ font-size: 11px; }
  .ab-mobile-img{ display: block; }
}
@media (min-width: 761px){ .ab-mobile-img{ display: none !important; } }
.ab-band .ab-title{ font-size: 3.15cqw; }
@media (max-width: 760px){ .ab-band .ab-title{ font-size: 2.1rem; } }

/* My Day menu: Family & Kilo after All Menu, below a line */
.mega-sep{ border: 0; border-top: 1px solid #E6DCC7; margin: 10px 4px 12px; }
.mega-item--special .mega-num{ background: var(--lx-gold); color: var(--lx-green); }
.drawer-sep{ height: 1px; margin: 8px 12px; background: rgba(245,238,221,.18); list-style: none; }
.drawer-sub--special{ color: var(--lx-gold) !important; font-weight: 700; }
/* "From EGP …" for dishes priced by weight or size */
.price-from{ font-size: .72em; font-weight: 600; color: var(--lx-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Group order: add several people at once */
.go-multi{ min-height: 64px; resize: vertical; border-radius: 12px; }
.go-multi-actions{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.go-found{ margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #F2F7F3; border: 1px solid #CFE3D5; }
.go-found-title{ margin: 0 0 6px; font-weight: 700; color: var(--lx-ink); }
.go-found-row{ display: flex; align-items: center; gap: 8px; padding: 5px 0; font-weight: 500; cursor: pointer; }
.go-found-row input{ width: auto; accent-color: var(--lx-green); }
.go-miss-row{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #EBDDBA; }

/* Reviews */
.rv-card .rv-dish{ padding: 14px 0; border-bottom: 1px solid #F0E8D8; }
.rv-stars{ font-size: 28px; letter-spacing: 4px; color: #C99A3C; cursor: pointer; user-select: none; margin-top: 4px; }
.rv-mine{ margin-top: 6px; }
.rv-mine p{ margin: 4px 0; }
.rv-st{ color: #C99A3C; font-size: 18px; }
.rv-reply{ margin: 8px 0 0 14px; padding: 8px 12px; border-inline-start: 3px solid #E6DCC7; background: #FBF8F1; border-radius: 8px; font-size: 14px; }
.rv-reply.is-admin{ border-inline-start-color: var(--lx-gold); background: #FBF5E6; }
.rv-reply strong{ margin-inline-end: 6px; }
.rv-reply-form{ display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.rv-reply-form textarea{ flex: 1; min-height: 40px; }

/* ==========================================================================
   Arabic (right-to-left): photos move to the other side so text never sits on them
   ========================================================================== */
.au-panel{ position: relative; overflow: hidden; }
.au-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% center; z-index: 0; }
.au-panel > *:not(.au-bg){ position: relative; z-index: 1; }

/* Home hero: its photo has the handwriting in it, so it isn't mirrored — the text moves to the empty left side instead */
html[dir=rtl] .lx-hero-photo img{ transform: none !important; }
html[dir=rtl] .lx-hero-text{ margin-left: 0; margin-right: auto; }
html[dir=rtl] .lx-script{ left: auto; right: 4%; }

/* Photos without writing are mirrored, and the text sits on the free side */
html[dir=rtl] .lx-catering-photo img,
html[dir=rtl] .mn-hero-photo img,
html[dir=rtl] .cg-hero-photo img,
html[dir=rtl] .au-bg{ transform: scaleX(-1); }
html[dir=rtl] .au-bg{ object-position: 78% center; }
@media (min-width: 801px){
  html[dir=rtl] .mn-hero-photo{ inset: 0 38% 0 0; }
  html[dir=rtl] .mn-hero-photo img{ -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 22%); mask-image: linear-gradient(270deg, transparent 0%, #000 22%); }
  html[dir=rtl] .cg-hero-photo{ inset: 0 46% 0 0; }
  html[dir=rtl] .cg-hero-photo img{ -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 30%); mask-image: linear-gradient(270deg, transparent 0%, #000 30%); }
}

/* Language button: in the header on wider screens, inside the side menu on phones */
.drawer-lang{ margin-inline-start: auto; margin-inline-end: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(245,238,221,.35); background: transparent; color: #F5EEDD; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.drawer-lang:hover{ border-color: var(--lx-gold); color: var(--lx-gold); }
@media (max-width: 640px){ .site-header #langToggle{ display: none !important; } }
/* the language button shows inside the side menu on every screen size (like on mobile) */
/* Arabic: nothing may stick out sideways (the hidden "skip to content" link was making the whole page scroll sideways) */
html, body{ overflow-x: clip; }
html[dir=rtl] .skip-link{ left: auto; right: -9999px; }
html[dir=rtl] .skip-link:focus{ right: 12px; }
/* Arabic home hero: keep the text block on the empty left side, written right-to-left inside it */
html[dir=rtl] .lx-hero-inner{ direction: ltr; }
html[dir=rtl] .lx-hero-inner > *{ direction: rtl; }
@media (max-width: 900px){ html[dir=rtl] .lx-hero-inner{ direction: rtl; } }
@media (min-width: 901px){ html[dir=rtl] .lx-hero-text{ max-width: 470px; } }
/* Back bar on the sign-in pages: no white card around it */
body[data-route="login"] .pg-backbar .container, body[data-route="register"] .pg-backbar .container, body[data-route="forgot-password"] .pg-backbar .container{
  background: transparent !important; box-shadow: none !important; border: 0 !important; max-width: 1100px !important; padding: 0 14px !important; margin: 0 auto !important; }
.rv-sug{ margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #F6F9F6; border: 1px dashed #C9DCCD; }
.rv-sug summary{ cursor: pointer; font-weight: 600; color: var(--lx-green); }
.rv-sug p{ margin: 4px 0; }

/* Group order: one box per person + "+ Add" */
.go-rows{ display: flex; flex-direction: column; gap: 8px; }
.go-row{ display: flex; gap: 8px; align-items: center; }
.go-row-input{ flex: 1; min-width: 0; border-radius: 12px; }
.go-row-del{ width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid #E6DCC7; background: #fff; color: #B3261E; cursor: pointer; font-size: 13px; }
.go-row:only-child .go-row-del{ visibility: hidden; }
.go-add-row{ font-weight: 700; }

/* Contacts file import + privacy note */
.go-file-btn{ cursor: pointer; }
.go-privacy{ margin: 8px 0 0; font-size: 12.5px; color: var(--lx-green); }
.go-privacy--full{ margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #F2F7F3; border: 1px solid #CFE3D5; color: var(--lx-ink); font-size: 13px; line-height: 1.6; }
.go-privacy--full p{ margin: 4px 0 0; color: var(--lx-muted); }
.go-help{ margin-top: 8px; font-size: 13px; }
.go-help summary{ cursor: pointer; color: var(--lx-gold-2); font-weight: 600; }
.go-help ol{ margin: 8px 0 0; padding-inline-start: 20px; line-height: 1.7; color: var(--lx-ink); }
.gc-box{ max-width: 460px; text-align: start; display: flex; flex-direction: column; max-height: 86vh; }
.gc-search{ margin: 6px 0 8px; border-radius: 12px; }
.gc-all{ display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 14px; margin-bottom: 6px; cursor: pointer; }
.gc-all input, .gc-item input{ width: auto; accent-color: var(--lx-green); }
.gc-list{ overflow-y: auto; flex: 1; min-height: 120px; border: 1px solid #EDE4D2; border-radius: 12px; padding: 4px 10px; }
.gc-item{ display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #F3EDE0; cursor: pointer; }
.gc-item span{ display: flex; flex-direction: column; }
.gc-item small{ color: var(--lx-muted); }
.gc-actions{ display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
/* weights / sizes show their full price */
.pd-opt-full{ color: var(--lx-ink) !important; font-weight: 800 !important; font-size: 14px !important; }

/* Checkout: contact details known from the account */
.ck-contact-sum{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #F7F2E8; border: 1px solid #EDE4D2; }
.ck-contact-sum span{ display: flex; flex-direction: column; }
.ck-contact-sum small{ color: var(--lx-muted); }

/* Send points / buy points */
.sp-amounts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.sp-amt{ display: flex; flex-direction: column; align-items: center; padding: 12px 8px; border-radius: 14px; border: 1px solid #E6DCC7; background: #fff; cursor: pointer; }
.sp-amt input{ position: absolute; opacity: 0; pointer-events: none; }
.sp-amt span{ font-size: 1.4rem; font-weight: 800; color: var(--lx-ink); }
.sp-amt small{ color: var(--lx-muted); }
.sp-amt:has(input:checked){ border-color: var(--lx-gold); background: #FBF5E6; box-shadow: 0 0 0 3px rgba(216,176,100,.22); }
.sp-amt.is-off{ opacity: .4; cursor: not-allowed; }
.sp-who{ margin: 6px 0 0; font-weight: 700; color: var(--lx-green); }
.bp-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.bp-pack{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px; border-radius: 16px; border: 1px solid #E6DCC7; background: #fff; cursor: pointer; font: inherit; }
.bp-pack strong{ font-size: 1.6rem; color: var(--lx-ink); }
.bp-pack span{ margin-top: 6px; font-weight: 700; color: var(--lx-green); }
.bp-pack em{ position: absolute; top: -9px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--lx-gold); color: var(--lx-green); }
.bp-pack:hover{ border-color: var(--lx-gold); }
.ck-addr-new{ background: transparent; border-style: dashed; }
.ck-addr-full{ color: #8a6d2f; }
#ckAddrEditNote{ color: var(--lx-green); margin-top: 4px; }
.modal-box .ck-saved, .modal-box .ck-addr label span{ text-align: start; }
.ma-list{ display: flex; flex-direction: column; gap: 12px; }
.ma-item{ display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.ma-ico{ font-size: 1.6rem; flex: none; }
.ma-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ma-actions{ display: flex; gap: 8px; flex: none; }
.ma-del{ color: var(--color-error, #b3261e); }
@media (max-width: 560px){ .ma-item{ flex-wrap: wrap; } .ma-actions{ width: 100%; } .ma-actions .btn{ flex: 1; } }

/* ---- After adding a dish: "Added ✓" + goes well with it ---- */
.as-scrim{ position: fixed; inset: 0; z-index: 1900; background: rgba(8,22,15,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: asFade .18s ease; }
.as-box{ position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 22px; padding: 22px 20px 18px; box-shadow: 0 30px 70px rgba(0,0,0,.28); animation: asUp .24s cubic-bezier(.2,.8,.2,1); }
.as-x{ position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #F3EEE3; color: #2c3a33; cursor: pointer; font-size: 14px; }
.as-added{ display: flex; align-items: center; gap: 14px; padding-inline-end: 34px; }
.as-thumb{ position: relative; flex: none; width: 64px; height: 64px; border-radius: 16px; overflow: visible; }
.as-thumb img{ width: 64px; height: 64px; border-radius: 16px; object-fit: cover; display: block; }
.as-check{ position: absolute; bottom: -6px; inset-inline-end: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--lx-green, #1f4d36); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; }
.as-kicker{ margin: 0; color: var(--lx-green, #1f4d36); font-weight: 700; font-size: .85rem; }
.as-name{ margin: 2px 0 0; font-weight: 700; font-size: 1.02rem; color: #16261e; line-height: 1.3; }
.as-sub{ margin: 18px 0 8px; font-weight: 700; font-size: .9rem; color: #6b5a33; letter-spacing: .02em; }
.as-recs{ display: flex; flex-direction: column; gap: 8px; }
.as-rec{ display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: #F7F2E8; }
.as-rec-img img{ width: 52px; height: 52px; border-radius: 12px; object-fit: cover; display: block; }
.as-rec-info{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.as-rec-kind{ font-size: .7rem; font-weight: 700; color: #a8873f; text-transform: uppercase; letter-spacing: .06em; }
.as-rec-name{ font-weight: 600; color: #16261e; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-rec-price{ font-size: .85rem; color: #4b5a52; }
.as-rec-add{ flex: none; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--lx-gold, #d4a94f); color: #16261e; font-weight: 800; font-size: 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.as-rec-choose{ font-size: .85rem; }
.as-rec-add.is-added{ background: var(--lx-green, #1f4d36); color: #fff; }
.as-actions{ display: flex; gap: 10px; margin-top: 18px; }
.as-actions .btn{ flex: 1; justify-content: center; }
.as-count{ display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px; margin-inline-start: 6px; border-radius: 999px; background: rgba(22,38,30,.15); align-items: center; justify-content: center; font-size: .8rem; }
@media (max-width: 560px){
  .as-scrim{ align-items: flex-end; padding: 0; }
  .as-box{ max-width: none; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
@keyframes asFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes asUp{ from{ transform: translateY(24px); opacity: 0; } to{ transform: none; opacity: 1; } }

/* ---- Order confirmed: we're waiting for your rating ---- */
.ri-scrim{ position: fixed; inset: 0; z-index: 2100; background: rgba(8,22,15,.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: asFade .2s ease; }
.ri-box{ width: 100%; max-width: 400px; background: #fff; border-radius: 24px; padding: 0; overflow: hidden; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.35); animation: riPop .35s cubic-bezier(.2,.9,.25,1.2); }
.ri-burst{ width: 92px; height: 92px; margin: 0 auto 8px; border-radius: 50%; background: radial-gradient(circle, #f3d78f 0%, #d4a94f 70%); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(212,169,79,.22), 0 0 0 18px rgba(212,169,79,.10); }
.ri-burst span{ font-size: 44px; animation: riSpin 1.2s ease; }
.ri-head{ background: radial-gradient(120% 90% at 50% 0%, #1f4d36 0%, #13261d 70%); padding: 28px 24px 18px; }
.ri-body{ padding: 18px 24px 22px; }
.ri-kicker{ margin: 12px 0 0; font-size: .82rem; font-weight: 700; color: #e8c977; letter-spacing: .05em; }
.ri-title{ margin: 0 0 8px; font-family: Georgia, serif; font-size: 1.5rem; color: #16261e; }
.ri-text{ margin: 0 0 10px; color: #4b5a52; line-height: 1.6; }
.ri-stars{ color: #d4a94f; font-size: 1.6rem; letter-spacing: 6px; margin: 4px 0 12px; }
.ri-points{ display: flex; align-items: center; gap: 12px; text-align: start; background: #F7F2E8; border: 1px dashed #d4a94f; border-radius: 16px; padding: 12px 14px; margin-bottom: 16px; }
.ri-points-num{ flex: none; font-size: 1.6rem; font-weight: 800; color: #1f4d36; }
.ri-points-txt{ font-size: .9rem; color: #2c3a33; line-height: 1.45; }
.ri-actions{ display: flex; flex-direction: column; gap: 8px; }
@keyframes riPop{ from{ transform: scale(.88); opacity: 0; } to{ transform: none; opacity: 1; } }
@keyframes riSpin{ from{ transform: rotate(-30deg) scale(.6); } to{ transform: none; } }
/* group order — step 2: invite friends */
.go-step-card{ background: #FBF7EE; border: 1px solid #EADFC6; border-radius: 18px; padding: 18px 18px 14px; margin: 0 0 22px; }
.go-step-done{ display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; background: var(--lx-green, #1f4d36); color: #fff; font-weight: 700; font-size: .85rem; }
.go-share{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px dashed #E2D6BB; }
.go-share-label{ font-weight: 600; font-size: .9rem; color: #4b5a52; margin-inline-end: 4px; }
.go-step-card{ scroll-margin-top: 110px; }