/* =============================================================================
   LANDING POLISH — index.php, all three builds
   -----------------------------------------------------------------------------
   Loaded after every other sheet on the landing page. It changes how the page
   LOOKS, never what it does: no markup is assumed beyond the classes index.php
   already prints, and every behaviour (the sign-in gate, the marquee drift,
   the drawer, the banner carousel) is left to its own code.

   What it answers, from rendering the page at 390px and 1440px in both themes:
     · the hero was white text with a heavy black drop-shadow on a near-white
       canvas whenever no banner was showing — unreadable in light mode;
     · the bar over it had white links on that same light canvas;
     · every shelf was cut off by a hard vertical edge at the content margin;
     · one input and a heading sat inside 200px+ of empty space;
     · a short services row hugged the left with the right half of the page
       empty on a desktop;
     · the footer's WhatsApp link was cyan on white (≈1.8:1).

   `body.hero-media-on` is set by index.php once a banner has actually LOADED
   (not merely been inserted), so text never turns white over a picture that is
   still arriving.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────────── */
html.light{
  --lp-ink:#0b1220;
  --lp-ink-2:#1f2937;
  --lp-muted:#556070;
  --lp-line:rgba(15,23,42,.08);
  --lp-line-strong:rgba(15,23,42,.14);
  --lp-card:#ffffff;
  --lp-card-media:#eef1f7;
  --lp-shadow-sm:0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
  --lp-shadow-lg:0 22px 44px -22px rgba(15,23,42,.28);
  --lp-link:#4c1d95;
  --lp-link:color-mix(in oklab, var(--theme-primary) 72%, #0b1220);
  --lp-tint:rgba(76,29,149,.08);
  --lp-tint:color-mix(in oklab, var(--theme-primary) 10%, transparent);
  --lp-tint-line:rgba(76,29,149,.18);
  --lp-tint-line:color-mix(in oklab, var(--theme-primary) 22%, transparent);
  --hero-canvas:
    radial-gradient(900px 520px at 12% -8%, rgba(124,58,237,.14), transparent 62%),
    radial-gradient(760px 480px at 92% 8%, rgba(34,211,238,.12), transparent 60%),
    linear-gradient(180deg, #f3f5fb 0%, rgba(243,245,251,0) 100%);
  --hero-canvas:
    radial-gradient(900px 520px at 12% -8%, color-mix(in oklab, var(--theme-primary) 18%, transparent), transparent 62%),
    radial-gradient(760px 480px at 92% 8%, color-mix(in oklab, var(--theme-secondary) 16%, transparent), transparent 60%),
    linear-gradient(180deg, #f3f5fb 0%, rgba(243,245,251,0) 100%);
}
html.dark{
  --lp-ink:#f5f7fb;
  --lp-ink-2:#dbe2ec;
  --lp-muted:#9aa6b8;
  --lp-line:rgba(255,255,255,.08);
  --lp-line-strong:rgba(255,255,255,.14);
  --lp-card:rgba(18,21,34,.78);
  --lp-card-media:rgba(255,255,255,.04);
  --lp-shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --lp-shadow-lg:0 24px 50px -24px rgba(0,0,0,.7);
  --lp-link:#67e8f9;
  --lp-link:color-mix(in oklab, var(--theme-secondary) 78%, #ffffff);
  --lp-tint:rgba(34,211,238,.09);
  --lp-tint:color-mix(in oklab, var(--theme-secondary) 12%, transparent);
  --lp-tint-line:rgba(34,211,238,.22);
  --lp-tint-line:color-mix(in oklab, var(--theme-secondary) 26%, transparent);
  --hero-canvas:
    radial-gradient(900px 520px at 12% -8%, rgba(124,58,237,.22), transparent 62%),
    radial-gradient(760px 480px at 92% 8%, rgba(34,211,238,.14), transparent 60%),
    linear-gradient(180deg, #0c0d16 0%, rgba(12,13,22,0) 100%);
  --hero-canvas:
    radial-gradient(900px 520px at 12% -8%, color-mix(in oklab, var(--theme-primary) 26%, transparent), transparent 62%),
    radial-gradient(760px 480px at 92% 8%, color-mix(in oklab, var(--theme-secondary) 16%, transparent), transparent 60%),
    linear-gradient(180deg, #0c0d16 0%, rgba(12,13,22,0) 100%);
}

body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{min-height:clamp(420px, 62vh, 680px);}
@media (max-width:560px){ .hero{min-height:360px;padding-bottom:40px;} }
/* a faint dot lattice on the empty canvas, faded out toward the edges */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(currentColor 1px, transparent 1.4px);
  background-size:22px 22px;opacity:.07;color:var(--lp-ink);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 75%);
  transition:opacity .6s ease;}
body.hero-media-on .hero::before{opacity:0;}

.hero h1{font-size:clamp(40px, 7.4vw, 84px);line-height:1.02;letter-spacing:-.035em;font-weight:700;}
.hero .hero-inner p{font-size:clamp(15px, 1.6vw, 18px);line-height:1.6;max-width:560px;}
.hero-ctas{gap:12px;margin-top:22px;}
.hero-ctas .btn{min-height:46px;padding:12px 24px;font-size:14.5px;font-weight:650;letter-spacing:.1px;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;}
.hero-ctas .btn-primary{box-shadow:0 12px 28px -12px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.18);}
.hero-ctas .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.22);}
.hero-ctas .btn:focus-visible{outline:3px solid var(--lp-tint-line);outline-offset:3px;}

/* No banner on screen: the words are the hero, set in ink on the canvas. */
body:not(.hero-media-on) .hero .hero-inner h1{
  filter:none;color:var(--lp-ink);
  background:var(--lp-ink);   /* the fallback: a browser without color-mix() still gets solid ink, never clear text */
  background:linear-gradient(180deg, var(--lp-ink) 0%, var(--lp-ink) 45%, color-mix(in oklab, var(--lp-ink) 70%, var(--theme-primary)) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body:not(.hero-media-on) .hero .hero-inner p,
body:not(.hero-media-on) .hero .hero-inner .eyebrow{text-shadow:none;color:var(--lp-muted);}
body:not(.hero-media-on) .hero-ctas .btn-outline{
  background:transparent;color:var(--lp-ink);border:1.5px solid var(--lp-line-strong);
  backdrop-filter:none;-webkit-backdrop-filter:none;}
body:not(.hero-media-on) .hero-ctas .btn-outline:hover{border-color:var(--lp-ink);color:var(--lp-ink);background:var(--lp-tint);}
html.dark body:not(.hero-media-on) .hero .hero-inner h1{
  background:#ffffff;
  background:linear-gradient(180deg, #ffffff 0%, #ffffff 40%, color-mix(in oklab, #ffffff 72%, var(--theme-secondary)) 100%);
  -webkit-background-clip:text;background-clip:text;}

/* A banner on screen: white type, held up by a soft pool of shade behind it
   and a light band under the bar — not a wash across the artwork. */
body.hero-media-on .hero-overlay{
  background:
    radial-gradient(ellipse 62% 52% at 50% 52%, rgba(5,7,14,.34) 0%, rgba(5,7,14,.12) 55%, transparent 78%),
    linear-gradient(180deg, rgba(5,7,14,.34) 0%, rgba(5,7,14,0) 22%, rgba(5,7,14,0) 84%, var(--hero-overlay-end) 100%);
  /* a long, eased landing into the page: a short one turned the foot of a
     bright banner into a muddy band in dark mode */
  background:
    radial-gradient(ellipse 62% 52% at 50% 52%, rgba(5,7,14,.34) 0%, rgba(5,7,14,.12) 55%, transparent 78%),
    linear-gradient(180deg, rgba(5,7,14,.34) 0%, rgba(5,7,14,0) 22%),
    linear-gradient(180deg,
      transparent 46%,
      color-mix(in srgb, var(--hero-overlay-end) 14%, transparent) 62%,
      color-mix(in srgb, var(--hero-overlay-end) 42%, transparent) 78%,
      color-mix(in srgb, var(--hero-overlay-end) 78%, transparent) 91%,
      var(--hero-overlay-end) 100%);}
/* no banner: the canvas already melts into the page, nothing to land */
body:not(.hero-media-on) .hero-overlay{background:none;}
body.hero-media-on .hero-inner h1{filter:drop-shadow(0 2px 18px rgba(0,0,0,.35));}
body.hero-media-on .hero-inner p{text-shadow:0 1px 12px rgba(0,0,0,.45);}
body.hero-media-on .hero-ctas .btn-outline{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.55);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
body.hero-media-on .hero-ctas .btn-outline:hover{background:rgba(255,255,255,.22);border-color:#fff;}

/* ── the bar ────────────────────────────────────────────────────────────── */
.nav{padding-top:14px;padding-bottom:14px;}
.nav.is-stuck{box-shadow:0 1px 0 var(--lp-line), 0 10px 30px -22px rgba(15,23,42,.35);}
/* Phones get no backdrop blur (it is switched off for speed), so a see-through
   bar laid the cards scrolling under it straight across the shop's name. */
@media (max-width:900px){
  html.light .nav.is-stuck{background:rgba(255,255,255,.98);}
  html.dark .nav.is-stuck{background:rgba(9,10,18,.98);}
}
.nav-brand{font-size:16.5px;letter-spacing:-.01em;}
.nav-brand img{width:36px;height:36px;border-radius:10px;}
.theme-toggle-btn:hover{background:var(--lp-tint) !important;}

/* Over the empty light canvas the bar's white treatment is invisible. */
html.light body:not(.hero-media-on) .nav:not(.is-stuck){background:transparent;}
html.light body:not(.hero-media-on) .nav:not(.is-stuck) .nav-brand{color:var(--lp-ink) !important;text-shadow:none;}
html.light body:not(.hero-media-on) .nav:not(.is-stuck) .nav-toggle span{background:var(--lp-ink);box-shadow:none;}
html.light body:not(.hero-media-on) .nav:not(.is-stuck) .theme-toggle-btn{color:var(--lp-ink) !important;border-color:var(--lp-line-strong) !important;}

@media (min-width:901px){
  .nav-links{gap:clamp(8px, 1.4vw, 26px);}
  .nav-links > a:not(.nav-cta):not(.nav-outline){font-weight:550;}
  .nav-cta, .nav-links a.nav-cta{padding:9px 18px;letter-spacing:.1px;transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;}
  .nav.is-stuck .nav-cta:not(.nav-cta--ghost), .nav.is-stuck .nav-links a.nav-cta:not(.nav-cta--ghost){box-shadow:0 8px 20px -12px rgba(37,99,235,.6);}
  .nav.is-stuck .nav-cta--ghost:hover, .nav.is-stuck .nav-links a.nav-cta--ghost:hover{border-color:var(--lp-ink) !important;background:var(--lp-tint) !important;}

  html.light body:not(.hero-media-on) .nav:not(.is-stuck) .nav-links > a{color:var(--lp-ink-2) !important;}
  html.light body:not(.hero-media-on) .nav:not(.is-stuck) .nav-links > a:hover{color:var(--lp-link) !important;}
  html.light body:not(.hero-media-on) .nav:not(.is-stuck) .nav-links a.nav-cta:not(.nav-cta--ghost){background:var(--grad);border-color:transparent;color:#fff !important;}
  html.light body:not(.hero-media-on) .nav:not(.is-stuck) .nav-links a.nav-cta--ghost{background:rgba(255,255,255,.6);border-color:var(--lp-line-strong);color:var(--lp-ink) !important;}
  /* the same two shapes in the dark, so the bar reads alike in both themes */
  html.dark body:not(.hero-media-on) .nav:not(.is-stuck) .nav-links a.nav-cta:not(.nav-cta--ghost){background:var(--grad);border-color:transparent;color:#fff !important;}
  html.dark body:not(.hero-media-on) .nav:not(.is-stuck) .nav-links a.nav-cta--ghost{background:rgba(255,255,255,.04);border-color:var(--lp-line-strong);color:var(--lp-ink) !important;}
  html.dark body:not(.hero-media-on) .nav:not(.is-stuck){background:transparent;}
}
/* Six or seven entries between 900 and 1200px wide: tighten, never wrap. */
@media (min-width:901px) and (max-width:1240px){
  .nav{padding-left:3%;padding-right:3%;}
  .nav-cta, .nav-links a.nav-cta{padding:8px 13px;font-size:12.5px;}
  .nav-links > a{font-size:13px;}
  .nav-links{gap:8px;}
  .nav-brand span{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* ── sections ───────────────────────────────────────────────────────────── */
.section{padding-top:clamp(48px, 5.5vw, 76px);padding-bottom:clamp(48px, 5.5vw, 76px);}
.section.search-section{padding-top:clamp(24px, 4vw, 44px);padding-bottom:0;}
.section-head{margin-bottom:clamp(26px, 4vw, 44px);}
.section-title{letter-spacing:-.025em;color:var(--lp-ink);}
.section-sub{color:var(--lp-muted);font-size:clamp(14px, 1.3vw, 16px);line-height:1.6;}
.section-head .eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;
  padding:6px 12px;border-radius:999px;font-size:10.5px;letter-spacing:.18em;font-weight:700;
  color:var(--lp-link);background:var(--lp-tint);border:1px solid var(--lp-tint-line);}
/* the search sits right under the hero, so the next heading does not need a
   full section's worth of air above it as well */
.search-section + .section{padding-top:clamp(44px, 6vw, 84px);}

/* ── shelves run to the edge of the screen, starting on the content line ── */
.section-inner > .marquee{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:8px max(5vw, calc((100vw - 1180px) / 2)) 16px;
  margin-bottom:clamp(10px, 2vw, 22px);}
.section-inner > .marquee:last-of-type{margin-bottom:0;}
.section-inner > .marquee + .menu-cta{margin-top:clamp(18px, 2.5vw, 28px);}
.marquee-track{gap:clamp(12px, 1.4vw, 18px);}
/* a row shorter than the screen centres instead of hugging the left */
.service-marquee .marquee-track{margin-left:auto;margin-right:auto;}
@media (max-width:560px){
  .section{padding-top:44px;padding-bottom:44px;}
  .section.search-section{padding-top:22px;padding-bottom:0;}
  .search-section + .section{padding-top:40px;}
  .section-inner > .marquee{padding-left:6vw;padding-right:6vw;}
}

/* ── cards ──────────────────────────────────────────────────────────────── */
.menu-card.glass, .service-card.glass{background:var(--lp-card);border-color:var(--lp-line);box-shadow:var(--lp-shadow-sm);}
.menu-card{border-radius:16px;}
.menu-card:hover, .service-card:hover{box-shadow:var(--lp-shadow-lg);border-color:var(--lp-tint-line);}
.menu-card-img{background-color:var(--lp-card-media);}
/* An item with no photo falls back to the shop's icon. Covering the whole
   frame with it blew a 64px icon up into a smear; it sits as a small mark on
   the tinted frame instead, the way a store shows "image coming". */
.menu-card-img[style*="favicon.png"], .service-card-media[style*="favicon.png"]{
  background-size:38% auto !important;background-repeat:no-repeat !important;background-position:center !important;}
.menu-card-img[style*="favicon.png"]::after, .service-card-media[style*="favicon.png"]::after{
  content:"";position:absolute;inset:0;background:var(--lp-card-media);mix-blend-mode:color;opacity:.55;pointer-events:none;}
.service-card-media{position:relative;}
.menu-card-cat{color:var(--lp-link);}
.menu-card h4{color:var(--lp-ink);}
.menu-card-brand, .menu-card-note{color:var(--lp-muted);}
.menu-card-price{color:var(--lp-ink);font-variant-numeric:tabular-nums;}
.card-add{width:28px;height:28px;font-size:17px;box-shadow:0 6px 16px -6px rgba(37,99,235,.6);}
.card-flag--out{background:rgba(15,23,42,.72);}

.service-card{border-radius:20px;width:clamp(260px, 26vw, 310px);}
.service-card-media{height:clamp(150px, 15vw, 180px);background-color:var(--lp-card-media);}
.service-card-body{padding:18px 20px 20px;}
.service-card-body h3{font-size:clamp(18px, 1.7vw, 21px);letter-spacing:-.015em;color:var(--lp-ink);}
.service-card-body p{color:var(--lp-muted);font-size:13.5px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

.rooms-grid{gap:clamp(16px, 2vw, 24px);}
.room-card.glass{background:var(--lp-card);border-color:var(--lp-line);box-shadow:var(--lp-shadow-sm);border-radius:20px;}
.room-card:hover{box-shadow:var(--lp-shadow-lg);}
.room-body h3{letter-spacing:-.015em;color:var(--lp-ink);}

.menu-cta .btn{min-height:48px;padding:13px 28px;}
.empty-note.glass{background:var(--lp-card);border-color:var(--lp-line);}

/* ── search ─────────────────────────────────────────────────────────────── */
.gs-form{background:var(--lp-card);border-color:var(--lp-line-strong);
  box-shadow:0 16px 36px -22px rgba(15,23,42,.35), var(--lp-shadow-sm);}
html.dark .gs-form{box-shadow:0 18px 40px -24px rgba(0,0,0,.8);}
.gs-form:focus-within{border-color:var(--lp-link);box-shadow:0 0 0 4px var(--lp-tint), 0 16px 36px -22px rgba(15,23,42,.35);}
#gsInput{color:var(--lp-ink);}
#gsInput::placeholder{color:var(--lp-muted);}

/* ── the sheets that open over the page ─────────────────────────────────
   Frosted glass without its blur — phones have it switched off — is just a
   see-through card: the headline and the search box showed through the phone
   and PIN fields of "Start your order". Solid surfaces, same shape. */
html.light .pay-modal-box.glass{background:#ffffff;border-color:var(--lp-line);
  box-shadow:0 30px 70px -30px rgba(15,23,42,.45);}
html.dark .pay-modal-box.glass{background:#10131f;border-color:var(--lp-line-strong);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85);}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{border-top-color:var(--lp-line);
  background:linear-gradient(180deg, transparent 0%, var(--lp-tint) 100%);}
.footer-brand strong{color:var(--lp-ink);letter-spacing:-.01em;}
.footer-contact{color:var(--lp-muted);line-height:1.55;}
.footer-contact a{color:var(--lp-link) !important;font-weight:600;text-underline-offset:3px;}
.footer-contact a:hover, .footer-contact a:focus-visible{text-decoration:underline;outline:none;}
.footer-bottom{border-top-color:var(--lp-line);color:var(--lp-muted);}
.footer-powered, .footer-powered a{color:var(--lp-muted);}
.footer-powered a{color:var(--lp-link);}
@media (max-width:600px){
  footer{padding-top:44px;}
  .footer-inner{gap:22px;}
}

@media (prefers-reduced-motion:reduce){
  .hero-ctas .btn, .nav-cta{transition:none;}
  .hero-ctas .btn-primary:hover{transform:none;}
}