:root {
    --black: #0a0805;
    --deep: #110e09;
    --char: #1c1710;
    --gold: #E8A020;
    --amber: #C97B1A;
    --ember: #E84320;
    --cream: #F5EDD6;
    --mist: #8a7f6e;
    --white: #fdfaf4;
  }

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
  }

  /* ── LOADER ── */
  #loader {
    position: fixed; inset: 0; background: var(--bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 9999; transition: opacity .6s ease, visibility .6s ease;
    padding: 0 5vw; text-align: center;
  }
  #loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
  .loader-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 8vw, 5rem);
    color: var(--gold-ink);
    letter-spacing: .12em;
    animation: pulse-logo 1.4s ease-in-out infinite;
  }
  .loader-bar {
    width: min(180px, 60vw); height: 2px; background: var(--char);
    margin-top: 1.4rem; border-radius: 99px; overflow: hidden;
  }
  .loader-fill {
    height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--ember));
    animation: fill-bar 1.8s ease forwards;
  }
  @keyframes pulse-logo { 0%,100%{opacity:.5}50%{opacity:1} }
  @keyframes fill-bar { to { width: 100% } }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 0 5vw;
    display: flex; align-items: center; justify-content: space-between;
    height: 72px;
    transition: background .4s, backdrop-filter .4s, box-shadow .4s;
  }
  nav.scrolled {
    background: rgb(var(--bg-rgb) / .92);
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgb(var(--line-rgb) / calc(.06 * var(--line-k)));
  }
  .nav-links.mode-hidden { display: none !important; }
  .nav-logo {
    display: flex; align-items: center; gap: .8rem; text-decoration: none;
  }
  .brand-logo-img {
    height: 40px; width: auto; display: block; flex-shrink: 0;
  }
  .loader-logo-img {
    height: 190px; width: auto; display: block; margin: 0 auto;
  }
  .logo-mark {
    width: 42px; height: 42px;
    background: var(--gold);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem; color: var(--on-gold); letter-spacing: .05em;
    flex-shrink: 0;
    position: relative; overflow: hidden;
  }
  .logo-mark::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.25) 0%, transparent 55%);
  }
  .logo-mark-img {
    width: 54px; height: 54px; border-radius: 9px;
    display: block; flex-shrink: 0; object-fit: contain;
  }
  /* Photo-based hotel mark (Piccadilly Suites logo) — used in place of
     .logo-mark-img/.loader-logo-img on the hotel-side pages and, on the
     "both" home page, whenever Hotels mode is active (see
     applyPicadillyMode() in index.html). Unlike the hand-drawn SVG mark
     it doesn't recolor with the theme, so a soft drop-shadow is added
     instead — it keeps the mark's edges readable whether it's sitting on
     the near-black dark-theme navbar or the cream light-theme one,
     without needing a separate asset per theme. */
  .logo-mark-photo {
    width: 54px; height: 54px; display: block; flex-shrink: 0; object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
  }
  /* Single unified logo (nav + footer) — the full "PICCADILLY SUITES"
     lockup, used everywhere now that there's no separate hotel/restaurant
     mark. It already carries the brand name as part of the artwork, so
     it replaces the old icon-plus-text-label pairing (.logo-mark-img +
     .logo-textgroup) rather than sitting next to it. Sized by height,
     same drop-shadow treatment as the mark above for readability across
     themes. */
  .nav-logo-lockup {
    height: 54px; width: auto; display: block; flex-shrink: 0; object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
  }
  .loader-logo-photo {
    height: 190px; width: auto; display: block; margin: 0 auto;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
  }
  .logo-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.7rem; letter-spacing: .1em;
    color: var(--white); line-height: 1;
  }
  .logo-text span { color: var(--gold-ink); }
  .logo-textgroup { display: flex; flex-direction: column; line-height: 1; }
  .logo-sub {
    font-family: 'Inter', sans-serif;
    font-size: .68rem; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: var(--gold-ink);
    margin-top: .25rem;
  }
  .nav-links {
    display: flex; gap: 2.2rem; list-style: none; align-items: center;
  }
  .nav-links a {
    font-size: .78rem; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; text-decoration: none;
    color: rgb(var(--white-rgb) / calc(.65 * var(--text-k)));
    transition: color .2s;
    position: relative;
  }
  .nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1px; background: var(--gold);
    transition: width .25s;
  }
  .nav-links a:hover { color: var(--white); }
  .nav-links a:hover::after { width: 100%; }
  .nav-cta {
    background: var(--gold); color: var(--on-gold) !important;
    padding: .55rem 1.3rem; border-radius: 6px;
    font-weight: 600 !important; transition: background .2s, transform .2s !important;
  }
  .nav-cta:hover { background: var(--amber); transform: translateY(-1px); }
  .nav-cta::after { display: none !important; }
  .nav-burger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
  .nav-burger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: .3s; }

  /* ── HERO ── */
  #hero, #hero-hotel {
    min-height: 100svh;
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
    position: relative; overflow: hidden;
  }
  .hero-left {
    display: flex; flex-direction: column; justify-content: center;
    padding: 140px 5vw 80px 7vw;
    position: relative; z-index: 2;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold-ink); font-weight: 500; margin-bottom: 1.8rem;
    opacity: 0; transform: translateY(20px);
    animation: fadeUp .7s .5s forwards;
  }
  .hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); }
  .hero-h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.8rem, 7.5vw, 7.2rem);
    line-height: .92;
    letter-spacing: .02em;
    opacity: 0;
    animation: fadeUp .8s .7s forwards;
  }
  .hero-h1 em {
    font-style: normal;
    color: var(--gold-ink);
    display: block;
    -webkit-text-stroke: 1px var(--gold);
    color: transparent;
  }
  .hero-sub {
    margin-top: 1.8rem;
    font-size: 1rem; font-weight: 300; line-height: 1.65;
    color: rgb(var(--cream-rgb) / calc(.7 * var(--text-k))); max-width: 380px;
    opacity: 0; animation: fadeUp .8s .9s forwards;
  }
  .hero-actions {
    margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap;
    opacity: 0; animation: fadeUp .8s 1.05s forwards;
  }
  .btn-primary {
    background: var(--gold); color: var(--on-gold);
    padding: .85rem 2rem; border-radius: 6px;
    font-weight: 600; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase;
    border: none; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: .5rem;
    transition: background .2s, transform .2s, box-shadow .2s;
  }
  .btn-primary:hover { background: var(--amber); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(232,160,32,.3); }
  .btn-outline {
    background: transparent; color: var(--white);
    padding: .85rem 2rem; border-radius: 6px;
    font-weight: 500; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase;
    border: 1px solid rgb(var(--line-rgb) / calc(.25 * var(--line-k))); cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: .5rem;
    transition: border-color .2s, background .2s, transform .2s;
  }
  .btn-outline:hover { border-color: var(--gold); background: rgba(232,160,32,.08); transform: translateY(-2px); }
  .hero-stats {
    margin-top: 3.5rem; display: flex; gap: 3rem;
    opacity: 0; animation: fadeUp .8s 1.2s forwards;
  }
  .stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem; color: var(--gold-ink); line-height: 1;
  }
  .stat-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); margin-top: .3rem; }

  .hero-right {
    position: relative; overflow: hidden;
  }
  .hero-image-grid {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 3px;
  }
  .hero-img-cell {
    overflow: hidden; position: relative;
  }
  .hero-img-cell img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 8s ease;
    transform: scale(1.08);
  }
  .hero-img-cell:hover img { transform: scale(1.0); }
  .hero-img-cell::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(10,8,5,.45), transparent);
  }
  .hero-img-cell .img-tag {
    position: absolute; bottom: 10px; left: 12px; z-index: 2;
    font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-ink); font-weight: 500;
    opacity: 0; transform: translateY(6px);
    transition: opacity .3s, transform .3s;
  }
  .hero-img-cell:hover .img-tag { opacity: 1; transform: translateY(0); }
  /* ── HERO VIDEO SLOT (admin-uploaded clip, optional) ──
     Filled in by loadHeroVideoSlot() in js/index-firestore.js when
     siteSettings/heroHighlight has a videoUrl; otherwise this cell
     stays a plain photo like the other three. */
  .hero-video-tile video {
    width: 100%; height: 100%; object-fit: cover;
  }
  .hero-video-tile .hero-video-tag {
    opacity: 1; transform: none;
    background: rgba(10,8,5,.55); backdrop-filter: blur(3px);
    padding: .3rem .7rem; border-radius: 99px;
  }
  .hero-overlay-strip {
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(to bottom, var(--gold), var(--ember));
    z-index: 5;
  }
  .floating-badge {
    position: absolute; bottom: 6%; left: -28px; z-index: 10;
    background: var(--gold); color: var(--on-gold);
    border-radius: 10px; padding: 1rem 1.2rem;
    font-family: 'Bebas Neue', sans-serif;
    text-align: center; box-shadow: 0 8px 32px rgb(var(--shadow-rgb) / calc(.5 * var(--shadow-k)));
    animation: float 3.5s ease-in-out infinite;
  }
  .floating-badge .badge-num { font-size: 2rem; line-height: 1; }
  .floating-badge .badge-label { font-size: .65rem; letter-spacing: .1em; }
  @keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }

  /* ── TICKER ── */
  .ticker {
    background: var(--gold);
    overflow: hidden; padding: .75rem 0; position: relative;
  }
  .ticker-inner {
    display: flex; white-space: nowrap;
    animation: ticker-scroll 30s linear infinite;
  }
  .ticker-item {
    display: inline-flex; align-items: center; gap: 1.2rem;
    padding-right: 3rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem; letter-spacing: .1em; color: var(--on-gold);
  }
  .ticker-dot { width: 5px; height: 5px; background: var(--bg); border-radius: 50%; }
  @keyframes ticker-scroll { from{transform:translateX(0)}to{transform:translateX(-50%)} }

  /* ── SECTION UTILS ── */
  section { padding: 100px 7vw; }
  .section-label {
    font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--gold-ink); font-weight: 500; margin-bottom: 1rem;
    display: flex; align-items: center; gap: .7rem;
  }
  .section-label::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); }
  .section-heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    letter-spacing: .03em; line-height: 1.0;
  }
  .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .7s; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

  /* ── LOADING SKELETONS ──
     Shown the instant a page loads, in place of both real content
     and the old hardcoded "sample data" — so visitors never see
     placeholder menu items / rooms / specials flash before the
     actual Firestore data swaps in. Swapped out via .innerHTML
     replacement by each *-firestore.js, or unhidden if Firestore
     comes back empty (see skeleton helpers in firebase-public-config.js). */
  @keyframes skeleton-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
  }
  .sk-block {
    background: linear-gradient(90deg, rgb(var(--line-rgb) / calc(.05 * var(--line-k))) 25%, rgb(var(--line-rgb) / calc(.11 * var(--line-k))) 37%, rgb(var(--line-rgb) / calc(.05 * var(--line-k))) 63%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: 8px;
  }
  .sk-card {
    background: var(--char, #1a1512); border: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k)));
    border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  }
  .sk-card .sk-img { aspect-ratio: 4/3; }
  .sk-card .sk-body { padding: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
  .sk-card .sk-line { height: .8rem; }
  .sk-card .sk-line.sk-title { height: 1rem; width: 70%; }
  .sk-card .sk-line.sk-short { width: 45%; }
  .sk-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; }
  .sk-row .sk-thumb { width: 76px; height: 76px; border-radius: 9px; flex-shrink: 0; }
  .sk-row .sk-lines { flex: 1; display: flex; flex-direction: column; gap: .55rem; }
  .sk-row .sk-line { height: .78rem; }
  .sk-row .sk-line.sk-title { width: 55%; }
  .sk-row .sk-line.sk-short { width: 30%; }
  .sk-wrap[hidden] { display: none; }
  .sk-resolved { animation: fadeUp .5s both; }

  /* ── EXPERIENCE SECTION ── */
  #experience { background: var(--deep); }
  .exp-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: center; margin-top: 4rem;
  }
  .exp-image {
    position: relative; border-radius: 12px; overflow: hidden;
    aspect-ratio: 4/5;
  }
  .exp-image img { width: 100%; height: 100%; object-fit: cover; }
  .exp-image::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(10,8,5,.8) 0%, transparent 50%);
  }
  .exp-image-caption {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: 2rem 1.8rem;
  }
  .exp-image-caption h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem; line-height: 1.2;
  }
  .exp-image-caption p { font-size: .82rem; color: rgb(var(--cream-rgb) / calc(.65 * var(--text-k))); margin-top: .4rem; }
  .exp-content { display: flex; flex-direction: column; gap: 2rem; }
  .exp-item {
    display: flex; gap: 1.4rem; align-items: flex-start;
    padding: 1.4rem; border-radius: 10px; border: 1px solid transparent;
    cursor: pointer; transition: border-color .25s, background .25s;
  }
  .exp-item:hover { border-color: rgba(232,160,32,.3); background: rgba(232,160,32,.04); }
  .exp-icon {
    width: 48px; height: 48px; border-radius: 10px;
    background: rgba(232,160,32,.12); color: var(--gold-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
  }
  .exp-item h4 { font-size: 1rem; font-weight: 600; margin-bottom: .35rem; }
  .exp-item p { font-size: .84rem; line-height: 1.6; color: rgb(var(--cream-rgb) / calc(.6 * var(--text-k))); }

  /* ── MENU SECTION ── */
  #menu { background: var(--bg); }
  .menu-tabs {
    display: flex; gap: .4rem; margin-top: 2.5rem; margin-bottom: 3rem;
    background: var(--char); border-radius: 10px; padding: .35rem;
    width: fit-content;
  }
  .tab-btn {
    padding: .65rem 1.5rem; border-radius: 7px;
    font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    border: none; background: transparent; color: rgb(var(--cream-rgb) / calc(.5 * var(--text-k)));
    cursor: pointer; transition: background .25s, color .25s;
  }
  .tab-btn.active { background: var(--gold); color: var(--on-gold); }
  .menu-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
  }
  .menu-card {
    background: var(--char); border-radius: 12px; overflow: hidden;
    cursor: pointer; transition: transform .3s, box-shadow .3s;
    position: relative;
  }
  .menu-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgb(var(--shadow-rgb) / calc(.5 * var(--shadow-k))); }
  .menu-card-img {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
  }
  .menu-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
  }
  .menu-card:hover .menu-card-img img { transform: scale(1.07); }
  .menu-badge {
    position: absolute; top: 10px; left: 10px;
    background: var(--gold); color: var(--on-gold);
    font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: .28rem .6rem; border-radius: 4px;
  }
  .menu-badge.nigerian { background: #2ECC71; }
  .menu-badge.chinese { background: #E74C3C; }
  .menu-badge.global { background: #9B59B6; }
  .menu-badge.pastry { background: #E67E22; }
  .menu-badge.special { background: var(--ember); color: #fff; }
  .menu-card-body { padding: 1.1rem; }
  .menu-card-body h4 { font-size: .95rem; font-weight: 600; margin-bottom: .3rem; }
  .menu-card-body p { font-size: .78rem; color: rgb(var(--cream-rgb) / calc(.5 * var(--text-k))); line-height: 1.5; margin-bottom: .8rem; }
  .menu-card-footer {
    display: flex; align-items: center; justify-content: space-between;
  }
  .price { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--gold-ink); letter-spacing: .05em; }
  .add-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--gold); color: var(--on-gold); border: none;
    font-size: 1.2rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s;
  }
  .add-btn:hover { background: var(--amber); transform: scale(1.12); }

  /* ── ORDER PANEL ── */
  #order-panel {
    position: fixed; right: -420px; top: 0; bottom: 0; width: 400px;
    background: var(--deep); z-index: 200; overflow-y: auto;
    border-left: 1px solid rgb(var(--line-rgb) / calc(.07 * var(--line-k)));
    transition: right .4s cubic-bezier(.16,1,.3,1);
    padding: 2rem 1.8rem;
    display: flex; flex-direction: column;
  }
  #order-panel.open { right: 0; }
  #overlay-bg {
    position: fixed; inset: 0; background: rgba(0,0,0,.65);
    z-index: 199; opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  #overlay-bg.show { opacity: 1; pointer-events: auto; }
  .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem; }
  .panel-header h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: .08em; }
  .close-panel { background: none; border: none; color: var(--white); font-size: 1.5rem; cursor: pointer; }
  .meal-time-tabs { display: flex; gap: .4rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
  .mt-tab {
    padding: .4rem 1rem; border-radius: 6px; border: 1px solid rgb(var(--line-rgb) / calc(.12 * var(--line-k)));
    background: transparent; color: rgb(var(--cream-rgb) / calc(.6 * var(--text-k)));
    font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer; transition: .2s;
  }
  .mt-tab.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
  .panel-items { flex: 1; }
  .panel-item {
    display: flex; gap: 1rem; align-items: center;
    padding: 1rem 0; border-bottom: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k)));
  }
  .panel-item img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
  .pi-info { flex: 1; }
  .pi-info h5 { font-size: .88rem; font-weight: 600; }
  .pi-info p { font-size: .75rem; color: var(--mist); }
  .pi-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--gold-ink); }
  .pi-qty {
    display: flex; align-items: center; gap: .5rem; margin-top: .3rem;
  }
  .qty-btn {
    width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgb(var(--line-rgb) / calc(.15 * var(--line-k)));
    background: transparent; color: var(--white); font-size: .9rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .qty-num { font-size: .85rem; min-width: 18px; text-align: center; }
  .panel-summary { margin-top: 1.5rem; }
  .summary-row { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .85rem; }
  .summary-row.total { font-weight: 700; font-size: 1rem; border-top: 1px solid rgb(var(--line-rgb) / calc(.12 * var(--line-k))); padding-top: 1rem; margin-top: .5rem; }
  .checkout-btn { width: 100%; margin-top: 1.2rem; }
  .empty-cart {
    text-align: center; padding: 3rem 0; color: var(--mist);
  }
  .empty-cart .icon { font-size: 3rem; margin-bottom: 1rem; }

  /* ── CART-PANEL UPSELL — "Want a little more?" ──
     Offers Extra Portion / Extra Soup right inside the order panel,
     for whichever of the two currently have an eligible dish in the
     cart (see PMenu.extrasUpsellHTML() in js/picadilly-menu.js — this
     file only supplies the look). Sits between the item list and the
     order summary. */
  .cart-upsell {
    margin-top: 1.2rem; padding: 1rem 1.1rem 1.1rem;
    background: rgba(232,160,32,.07);
    border: 1px dashed rgba(232,160,32,.35);
    border-radius: 14px;
  }
  .cu-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
  .cu-close {
    margin-left: auto; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 50%; border: none;
    background: rgb(var(--line-rgb) / calc(.08 * var(--line-k))); color: var(--mist);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; line-height: 1; cursor: pointer;
    transition: background .2s, color .2s;
  }
  .cu-close:hover { background: rgba(232,67,32,.16); color: var(--ember-ink); }
  .cu-close:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; }
  .cu-head-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: rgba(232,160,32,.16); color: var(--gold-ink);
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  }
  .cu-head-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
  .cu-head-text strong { font-size: .86rem; font-weight: 600; }
  .cu-head-text span { font-size: .72rem; color: var(--mist); }
  .cu-cards { display: flex; flex-direction: column; gap: .7rem; }
  .cu-card {
    display: flex; align-items: center; gap: .7rem;
    background: var(--char); border: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k)));
    border-radius: 10px; padding: .6rem .7rem;
  }
  .cu-card img { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
  .cu-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
  .cu-card-body strong { font-size: .78rem; font-weight: 600; }
  .cu-price { font-family: 'Bebas Neue', sans-serif; font-size: .9rem; color: var(--gold-ink); letter-spacing: .03em; }
  .cu-select {
    width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--deep); border: 1px solid rgb(var(--line-rgb) / calc(.14 * var(--line-k)));
    border-radius: 7px; padding: .4rem 1.6rem .4rem .6rem; font-size: .72rem; color: var(--cream);
    font-family: 'Inter', sans-serif; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold-ink) 50%), linear-gradient(135deg, var(--gold-ink) 50%, transparent 50%);
    background-position: right 12px center, right 6px center; background-size: 6px 6px; background-repeat: no-repeat;
  }
  .cu-select:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; }
  .cu-add-btn { flex-shrink: 0; }

  /* ── CART-PANEL CROSS-SELL — "You may also like" ──
     Recommends other dishes from whichever categories are already in
     the cart (see PMenu.recsUpsellHTML() in js/picadilly-menu.js — this
     file only supplies the look). Kept visually distinct from the
     "Want a little more?" upsell above it (solid card, gold accent
     instead of a dashed border) so the two don't read as one block. */
  .cart-recs {
    margin-top: 1.2rem; padding: 1rem 1.1rem 1.1rem;
    background: var(--char);
    border: 1px solid rgb(var(--line-rgb) / calc(.08 * var(--line-k)));
    border-radius: 14px;
  }
  .cr-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
  .cr-close {
    margin-left: auto; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 50%; border: none;
    background: rgb(var(--line-rgb) / calc(.08 * var(--line-k))); color: var(--mist);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; line-height: 1; cursor: pointer;
    transition: background .2s, color .2s;
  }
  .cr-close:hover { background: rgba(232,67,32,.16); color: var(--ember-ink); }
  .cr-close:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; }
  .cr-head-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: rgba(232,160,32,.16); color: var(--gold-ink);
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  }
  .cr-head-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
  .cr-head-text strong { font-size: .86rem; font-weight: 600; }
  .cr-head-text span { font-size: .72rem; color: var(--mist); }
  .cr-cards { display: flex; flex-direction: column; gap: .7rem; }
  .cr-card {
    display: flex; align-items: center; gap: .7rem;
    background: var(--deep); border: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k)));
    border-radius: 10px; padding: .6rem .7rem;
  }
  .cr-card img { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
  .cr-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
  .cr-card-body strong { font-size: .78rem; font-weight: 600; }
  .cr-price { font-family: 'Bebas Neue', sans-serif; font-size: .9rem; color: var(--gold-ink); letter-spacing: .03em; }
  .cr-add-btn { flex-shrink: 0; }

  /* ── PANEL STEP BACK ── */
  .panel-back {
    display: inline-flex; align-items: center; gap: .5rem;
    background: none; border: none; color: var(--mist);
    font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer; margin-bottom: 1.4rem; transition: color .2s;
  }
  .panel-back:hover { color: var(--gold-ink); }

  /* ── CUSTOMER INFO INPUTS ── */
  .cust-info-row {
    display: flex; gap: .6rem; margin-bottom: 1.4rem; flex-wrap: wrap;
  }
  .cust-input {
    flex: 1; min-width: 140px;
    background: var(--char); border: 1px solid rgb(var(--line-rgb) / calc(.1 * var(--line-k)));
    border-radius: 8px; padding: .8rem 1rem;
    color: var(--white); font-size: .85rem; font-family: 'Inter', sans-serif;
  }
  .cust-input:focus { outline: none; border-color: var(--gold); }
  .cust-input::placeholder { color: var(--mist); }

  /* ── FULFILMENT TOGGLE ── */
  .fulfil-toggle {
    display: flex; gap: .5rem; background: var(--char); border-radius: 10px; padding: .35rem; margin-bottom: 1.4rem;
  }
  .fulfil-toggle .ft-btn {
    flex: 1; padding: .6rem; border-radius: 7px; border: none; background: transparent;
    color: rgb(var(--cream-rgb) / calc(.5 * var(--text-k))); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer; transition: .2s;
  }
  .fulfil-toggle .ft-btn.active { background: var(--gold); color: var(--on-gold); }
  .fulfil-info {
    background: var(--char); border: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k)));
    border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.4rem; font-size: .78rem;
    color: rgb(var(--cream-rgb) / calc(.65 * var(--text-k))); line-height: 1.6;
  }
  .fulfil-info strong { color: var(--gold-ink); display: block; margin-bottom: .3rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

  /* ── PAYMENT METHODS ── */
  .pm-list { display: flex; flex-direction: column; gap: .8rem; margin: 1.2rem 0; }
  .pm-option {
    border: 1px solid rgb(var(--line-rgb) / calc(.1 * var(--line-k))); border-radius: 10px;
    padding: 1rem 1.1rem; cursor: pointer; transition: border-color .2s, background .2s;
  }
  .pm-option.active { border-color: var(--gold); background: rgba(232,160,32,.06); }
  .pm-option-head { display: flex; align-items: center; gap: .8rem; }
  .pm-option-head .pm-icon {
    width: 38px; height: 38px; border-radius: 8px;
    background: rgba(232,160,32,.12); color: var(--gold-ink);
    display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
  }
  .pm-option-head .pm-text { flex: 1; }
  .pm-option-head h5 { font-size: .85rem; font-weight: 600; }
  .pm-option-head p { font-size: .72rem; color: var(--mist); margin-top: .1rem; }
  .pm-radio {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(var(--line-rgb) / calc(.2 * var(--line-k)));
    flex-shrink: 0; position: relative;
  }
  .pm-option.active .pm-radio { border-color: var(--gold); }
  .pm-option.active .pm-radio::after {
    content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold);
  }
  .pm-details {
    display: none; margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid rgb(var(--line-rgb) / calc(.08 * var(--line-k)));
  }
  .pm-option.active .pm-details { display: block; }
  .pm-acct-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .55rem 0; font-size: .8rem;
  }
  .pm-acct-row .lbl { color: var(--mist); }
  .pm-acct-row .val { font-weight: 600; color: var(--white); display: flex; align-items: center; gap: .5rem; }
  .pm-copy {
    background: rgba(232,160,32,.12); color: var(--gold-ink); border: none;
    border-radius: 5px; padding: .25rem .55rem; font-size: .68rem;
    cursor: pointer; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    transition: background .2s;
  }
  .pm-copy:hover { background: rgba(232,160,32,.22); }
  .pm-note {
    font-size: .72rem; color: rgb(var(--cream-rgb) / calc(.5 * var(--text-k))); line-height: 1.6; margin-top: .8rem;
  }

  /* ── PROCESSING / CONFIRMATION ── */
  .order-status-wrap {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; flex: 1; padding: 2rem 0;
  }
  .order-status-icon {
    width: 84px; height: 84px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; margin-bottom: 1.5rem;
  }
  .order-status-icon.pending {
    background: rgba(232,160,32,.12); color: var(--gold-ink);
    animation: pulse-logo 1.4s ease-in-out infinite;
  }
  .order-status-icon.confirmed { background: rgba(46,204,113,.14); color: var(--ok-ink); }
  .order-status-wrap h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: .05em; margin-bottom: .6rem; }
  .order-status-wrap p { font-size: .85rem; color: rgb(var(--cream-rgb) / calc(.6 * var(--text-k))); max-width: 280px; line-height: 1.6; }
  .order-id-chip {
    margin-top: 1.4rem; background: var(--char); border: 1px solid rgb(var(--line-rgb) / calc(.08 * var(--line-k)));
    border-radius: 8px; padding: .6rem 1.2rem;
    color: var(--gold-ink); font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: .08em;
  }

  /* ── LIVE ORDER TRACKER ── */
  .tracker-eta {
    background: var(--char); border: 1px solid rgba(232,160,32,.18);
    border-radius: 10px; padding: 1rem 1.2rem; display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 1.6rem;
  }
  .tracker-eta .lbl { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
  .tracker-eta .val { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: var(--gold-ink); margin-top: .2rem; }
  .tracker-eta .icon { font-size: 1.6rem; }
  .tracker-steps { display: flex; flex-direction: column; gap: 0; }
  .tracker-step {
    display: flex; gap: 1rem; position: relative; padding-bottom: 2rem;
  }
  .tracker-step:last-child { padding-bottom: 0; }
  .tracker-step::before {
    content: ''; position: absolute; left: 17px; top: 36px; bottom: 0;
    width: 2px; background: rgb(var(--line-rgb) / calc(.08 * var(--line-k)));
  }
  .tracker-step:last-child::before { display: none; }
  .tracker-step.done::before { background: var(--gold); }
  .tracker-dot {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--char); border: 2px solid rgb(var(--line-rgb) / calc(.1 * var(--line-k)));
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; color: var(--mist); z-index: 1;
    transition: background .3s, border-color .3s, color .3s;
  }
  .tracker-step.done .tracker-dot { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
  .tracker-step.active .tracker-dot {
    border-color: var(--gold); color: var(--gold-ink);
    animation: pulse-logo 1.4s ease-in-out infinite;
  }
  .tracker-text h5 { font-size: .88rem; font-weight: 600; margin-top: .3rem; }
  .tracker-text p { font-size: .74rem; color: var(--mist); margin-top: .2rem; line-height: 1.5; }
  .tracker-step.done .tracker-text h5,
  .tracker-step.active .tracker-text h5 { color: var(--white); }
  .tracker-step:not(.done):not(.active) .tracker-text h5 { color: var(--mist); }

  /* ── ORDER CANCELLED (admin marks an order "cancelled") ── */
  .tracker-cancelled-banner[hidden] { display: none; }
  .tracker-cancelled-banner {
    background: rgba(232,90,90,.08); border: 1px solid rgba(232,90,90,.3);
    border-radius: 12px; padding: 1.5rem 1.6rem; text-align: center;
  }
  .tracker-cancelled-banner .badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(232,90,90,.15); border: 1px solid rgba(232,90,90,.35);
    color: var(--bad-ink); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    border-radius: 99px; padding: .45rem 1.1rem; margin-bottom: .9rem;
  }
  .tracker-cancelled-banner p { font-size: .82rem; color: rgb(var(--cream-rgb) / calc(.7 * var(--text-k))); line-height: 1.65; }
  .tracker-cancelled-banner a { color: var(--gold-ink); font-weight: 600; text-decoration: none; }
  .tracker-cancelled-banner a:hover { text-decoration: underline; }

  /* ── RECEIPT ── */
  .receipt-card {
    background: var(--char); border: 1px solid rgba(232,160,32,.18);
    border-radius: 14px; padding: 1.6rem; font-family: 'Inter', sans-serif;
  }
  .receipt-head {
    text-align: center; padding-bottom: 1.2rem; border-bottom: 1px dashed rgb(var(--line-rgb) / calc(.15 * var(--line-k)));
    margin-bottom: 1.2rem;
  }
  .receipt-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: .12em; color: var(--gold-ink); }
  .receipt-logo span { color: var(--white); }
  .receipt-head .status-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(46,204,113,.14); color: var(--ok-ink);
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: .35rem .9rem; border-radius: 99px; margin-top: .8rem;
  }
  .receipt-meta { font-size: .72rem; color: var(--mist); margin-top: .6rem; line-height: 1.6; }
  .receipt-items { margin-bottom: 1.2rem; }
  .receipt-row {
    display: flex; justify-content: space-between; gap: .8rem;
    font-size: .8rem; padding: .45rem 0; color: rgb(var(--cream-rgb) / calc(.8 * var(--text-k)));
  }
  .receipt-row .ri-name { flex: 1; }
  .receipt-row .ri-qty { color: var(--mist); min-width: 28px; text-align: center; }
  .receipt-totals { border-top: 1px dashed rgb(var(--line-rgb) / calc(.15 * var(--line-k))); padding-top: .8rem; }
  .receipt-totals .summary-row.total { border-top: 1px solid rgb(var(--line-rgb) / calc(.12 * var(--line-k))); }
  .receipt-foot {
    text-align: center; margin-top: 1.4rem; padding-top: 1.2rem;
    border-top: 1px dashed rgb(var(--line-rgb) / calc(.15 * var(--line-k)));
  }
  .receipt-foot p { font-size: .7rem; color: var(--mist); line-height: 1.7; }
  .receipt-foot .thanks { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; color: var(--gold-ink); letter-spacing: .08em; margin-bottom: .4rem; }
  .receipt-actions { display: flex; gap: .7rem; margin-top: 1.2rem; }
  .receipt-actions .btn-primary, .receipt-actions .btn-outline { flex: 1; justify-content: center; font-size: .78rem; padding: .75rem 1rem; }

  /* ── TRACK ORDER LINK ── */
  .track-order-link {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; margin-top: .8rem; padding: .85rem;
    background: transparent; border: 1px solid rgba(232,160,32,.3); border-radius: 6px;
    color: var(--gold-ink); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer; transition: background .2s, border-color .2s;
  }
  .track-order-link:hover { background: rgba(232,160,32,.08); border-color: var(--gold); }
  .cart-count {
    position: absolute; top: -6px; right: -6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--ember); color: #fff;
    font-size: .68rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0);
    transition: opacity .2s, transform .2s;
  }
  .cart-count.visible { opacity: 1; transform: scale(1); }

  /* ── CATEGORIES SECTION ── */
  #categories { background: var(--char); }
  .cat-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 320px 260px;
    gap: 1rem; margin-top: 3rem;
  }
  .cat-card {
    border-radius: 14px; overflow: hidden; position: relative; cursor: pointer;
  }
  .cat-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease;
  }
  .cat-card:hover img { transform: scale(1.07); }
  .cat-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,8,5,.85) 0%, rgba(10,8,5,.1) 60%);
  }
  .cat-card.big { grid-row: span 2; }
  .cat-info {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: 1.6rem 1.8rem;
  }
  .cat-info h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem; letter-spacing: .06em; line-height: 1;
  }
  .cat-card.big .cat-info h3 { font-size: 2.8rem; }
  .cat-info p { font-size: .8rem; color: rgb(var(--cream-rgb) / calc(.65 * var(--text-k))); margin-top: .4rem; }
  .cat-info a {
    display: inline-block; margin-top: .8rem;
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold-ink); text-decoration: none; font-weight: 500;
    transition: gap .2s;
  }
  .cat-info a::after { content: ' →'; }

  /* ── SPECIALS ── */
  #specials { background: var(--bg); }
  .specials-row {
    display: flex; gap: 1.5rem; overflow-x: auto;
    padding-bottom: 1rem; margin-top: 3rem; scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .specials-row::-webkit-scrollbar { display: none; }
  .special-card {
    min-width: 280px; border-radius: 16px; overflow: hidden;
    background: var(--char); position: relative; scroll-snap-align: start;
    flex-shrink: 0; transition: transform .3s;
  }
  .special-card:hover { transform: scale(1.02); }
  .special-card img { width: 100%; height: 220px; object-fit: cover; }
  .special-badge-overlay {
    position: absolute; top: 14px; right: 14px;
    background: var(--ember); color: #fff;
    font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: .3rem .7rem; border-radius: 20px;
  }
  .special-card-body { padding: 1.2rem; }
  .special-card-body h4 { font-size: 1rem; font-weight: 600; }
  .special-card-body .desc { font-size: .78rem; color: rgb(var(--cream-rgb) / calc(.5 * var(--text-k))); margin: .4rem 0 .9rem; line-height: 1.5; }
  .special-footer { display: flex; justify-content: space-between; align-items: center; }
  .was-price { font-size: .78rem; color: var(--mist); text-decoration: line-through; }

  /* ── STORY SECTION ── */
  #story { background: var(--deep); overflow: hidden; }
  .story-inner {
    display: grid; grid-template-columns: 5fr 6fr; gap: 6rem; align-items: center;
  }
  .story-content h2 { margin-bottom: 1.5rem; }
  .story-content p {
    font-size: .92rem; line-height: 1.75; color: rgb(var(--cream-rgb) / calc(.65 * var(--text-k)));
    margin-bottom: 1rem;
  }
  .story-images {
    position: relative; height: 560px;
  }
  .story-img-main {
    position: absolute; right: 0; top: 0; width: 75%; height: 75%;
    border-radius: 14px; overflow: hidden;
  }
  .story-img-main img { width: 100%; height: 100%; object-fit: cover; }
  .story-img-accent {
    position: absolute; left: 0; bottom: 0; width: 55%; height: 55%;
    border-radius: 14px; overflow: hidden;
    border: 5px solid var(--deep);
  }
  .story-img-accent img { width: 100%; height: 100%; object-fit: cover; }
  .story-chip {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--gold); color: var(--on-gold);
    border-radius: 50%; width: 90px; height: 90px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; text-align: center; z-index: 5;
    box-shadow: 0 6px 24px rgb(var(--shadow-rgb) / calc(.4 * var(--shadow-k)));
    animation: float 4s ease-in-out infinite;
  }
  .story-chip .num { font-size: 1.8rem; line-height: 1; }
  .story-chip .lbl { font-size: .52rem; letter-spacing: .1em; }

  /* ── TESTIMONIALS ── */
  #testimonials { background: var(--bg); text-align: center; }
  .testi-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem;
  }
  .testi-card {
    background: var(--char); border-radius: 14px; padding: 2rem 1.8rem;
    border: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k))); text-align: left;
    transition: border-color .25s, transform .25s;
  }
  .testi-card:hover { border-color: rgba(232,160,32,.25); transform: translateY(-4px); }
  .stars { color: var(--gold-ink); letter-spacing: .1em; margin-bottom: 1rem; font-size: 1rem; }
  .testi-text {
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: .95rem; line-height: 1.7; color: rgb(var(--cream-rgb) / calc(.8 * var(--text-k)));
    margin-bottom: 1.4rem;
  }
  .testi-author { display: flex; align-items: center; gap: .8rem; }
  .testi-avatar {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: var(--amber);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--on-gold);
  }
  .testi-name { font-size: .85rem; font-weight: 600; }
  .testi-location { font-size: .75rem; color: var(--mist); }

  /* ── LEAVE-A-REVIEW FORM ── shared by the hotel side (about.html,
     under Guest Stories) and the restaurant side (menu.html, under
     the Reviews Snapshot) — one definition so both stay in sync. */
  .review-cta {
    margin: 3rem auto 0; max-width: 640px;
    background: var(--char); border: 1px solid rgba(232,160,32,.15);
    border-radius: 20px; padding: 2.4rem;
  }
  .review-cta-head h3 {
    font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: .03em;
  }
  .review-cta-head p {
    font-size: .85rem; color: rgb(var(--cream-rgb) / calc(.6 * var(--text-k))); margin-top: .5rem; line-height: 1.6;
  }
  .review-form { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; }
  .review-field { display: flex; flex-direction: column; gap: .5rem; }
  .review-field label {
    font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold-ink); font-weight: 600;
  }
  .review-field input, .review-field textarea {
    background: var(--deep); border: 1px solid rgb(var(--line-rgb) / calc(.1 * var(--line-k)));
    border-radius: 8px; padding: .8rem 1rem; color: var(--white); font-size: .86rem;
    font-family: 'Inter', sans-serif;
  }
  .review-field textarea { resize: vertical; min-height: 100px; }
  .review-field input:focus, .review-field textarea:focus { outline: none; border-color: var(--gold); }
  .review-field input::placeholder, .review-field textarea::placeholder { color: var(--mist); }
  .star-rating { display: flex; gap: .3rem; }
  .star-btn {
    background: none; border: none; cursor: pointer; padding: 0 .1rem;
    font-size: 1.9rem; line-height: 1; color: rgb(var(--cream-rgb) / calc(.22 * var(--text-k)));
    transition: color .15s, transform .15s;
  }
  .star-btn:hover, .star-btn:focus-visible { transform: scale(1.14); }
  .star-btn.active { color: var(--gold-ink); }
  .star-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
  .review-error { font-size: .8rem; color: var(--bad-ink); margin: 0; display: none; }
  .review-error.is-visible { display: block; }
  .review-success {
    font-size: .82rem; color: var(--ok-ink); background: rgba(46,204,113,.1);
    border: 1px solid rgba(46,204,113,.25); border-radius: 8px; padding: .8rem 1rem; margin: 0; line-height: 1.55;
  }
  @media (max-width: 640px) {
    .review-cta { padding: 1.6rem; border-radius: 16px; }
  }

  /* ── REVIEWS SNAPSHOT ── shared rating-summary + review-card grid,
     used by the restaurant side (menu.html, #reviews-snap) and the
     hotel side (rooms.html, #rooms-reviews, right under the booking
     section — that's where it gets the most attention). */
  .reviews-summary {
    display: grid; grid-template-columns: 300px 1fr; gap: 5rem;
    align-items: center; margin-top: 3rem;
  }
  .rating-big {
    text-align: center;
    background: var(--char); border-radius: 20px; padding: 3rem 2rem;
    border: 1px solid rgba(232,160,32,.15);
  }
  .rating-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 6rem; color: var(--gold-ink); line-height: 1;
  }
  .rating-stars { font-size: 1.4rem; color: var(--gold-ink); letter-spacing: .1em; margin: .5rem 0; }
  .rating-count { font-size: .78rem; color: var(--mist); letter-spacing: .1em; }
  .rating-bars { margin-top: 2rem; display: flex; flex-direction: column; gap: .7rem; }
  .rbar-row { display: flex; align-items: center; gap: .8rem; }
  .rbar-label { font-size: .75rem; color: var(--mist); min-width: 14px; text-align: right; }
  .rbar-track { flex: 1; height: 6px; background: var(--deep); border-radius: 99px; overflow: hidden; }
  .rbar-fill { height: 100%; background: var(--gold); border-radius: 99px; }
  .rbar-count { font-size: .72rem; color: var(--mist); min-width: 28px; }
  .reviews-cards {
    display: flex;
  }
  .reviews-empty { font-size: .85rem; color: var(--mist); margin-top: 2.5rem; }

  /* ── REVIEW SLIDER ── turns the .reviews-cards track above into a
     sliding carousel: round prev/next arrows, dot indicators, native
     swipe (scroll-snap) and auto-advance (see js/review-slider.js).
     Used standalone (About page's Guest Stories) and nested inside
     .reviews-summary (Hotel Reviews on rooms.html, Reviews Snapshot
     on menu.html) — .standalone caps and centers it when it isn't
     already constrained by a parent grid column. */
  .review-slider { position: relative; }
  .review-slider.standalone { max-width: 760px; margin: 3rem auto 0; }
  .review-slider-wrap {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .review-slider-wrap::-webkit-scrollbar { display: none; }
  .reviews-cards .testi-card { flex: 0 0 100%; scroll-snap-align: start; }
  .review-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgb(var(--line-rgb) / calc(.14 * var(--line-k))); background: var(--char);
    color: var(--cream); font-size: 1.2rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, background .2s, color .2s;
    z-index: 3;
  }
  .review-slider-arrow:hover { border-color: var(--gold); color: var(--gold-ink); background: rgba(232,160,32,.1); }
  .review-slider-arrow.prev { left: -8px; }
  .review-slider-arrow.next { right: -8px; }
  .review-slider-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
  .rs-dot {
    width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: rgb(var(--line-rgb) / calc(.2 * var(--line-k)));
    transition: background .25s, width .25s;
  }
  .rs-dot.active { background: var(--gold); width: 22px; border-radius: 99px; }
  @media (max-width: 640px) {
    .review-slider-arrow { width: 36px; height: 36px; font-size: 1rem; }
    .review-slider-arrow.prev { left: -2px; }
    .review-slider-arrow.next { right: -2px; }
  }

  /* ── CTA BAND ── */
  #cta-band {
    background: linear-gradient(135deg, var(--ember) 0%, var(--amber) 60%, var(--gold) 100%);
    padding: 90px 7vw;
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
  }
  .cta-band-text h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--on-gold); letter-spacing: .04em;
  }
  .cta-band-text p { color: rgba(10,8,5,.65); font-size: .9rem; margin-top: .4rem; }
  .btn-dark {
    background: var(--black); color: var(--gold);
    padding: 1rem 2.2rem; border-radius: 8px;
    font-weight: 700; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase;
    border: none; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: .5rem;
    transition: background .2s, transform .2s; flex-shrink: 0;
  }
  .btn-dark:hover { background: var(--deep); transform: translateY(-2px); }

  /* ── FOOTER ── */
  footer {
    background: var(--deep); border-top: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k)));
    padding: 70px 7vw 40px;
  }
  .footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem; margin-bottom: 4rem;
  }
  .footer-brand p {
    font-size: .85rem; line-height: 1.7; color: rgb(var(--cream-rgb) / calc(.5 * var(--text-k)));
    margin-top: 1.2rem; max-width: 260px;
  }
  .footer-socials { display: flex; gap: .8rem; margin-top: 1.4rem; }
  .social-btn {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgb(var(--line-rgb) / calc(.12 * var(--line-k)));
    background: transparent; color: rgb(var(--cream-rgb) / calc(.6 * var(--text-k)));
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; cursor: pointer; text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
  }
  .social-btn:hover { border-color: var(--gold); color: var(--gold-ink); background: rgba(232,160,32,.08); }
  .footer-col h5 {
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold-ink); font-weight: 600; margin-bottom: 1.2rem;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
  .footer-col a {
    font-size: .84rem; color: rgb(var(--cream-rgb) / calc(.5 * var(--text-k))); text-decoration: none;
    transition: color .2s;
  }
  .footer-col a:hover { color: var(--white); }
  .footer-hours { display: flex; flex-direction: column; gap: .6rem; }
  .hour-row { display: flex; justify-content: space-between; font-size: .82rem; gap: 1rem; }
  .hour-row .day { color: rgb(var(--cream-rgb) / calc(.5 * var(--text-k))); }
  .hour-row .time { color: var(--gold-ink); }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 1.8rem; border-top: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k)));
    font-size: .75rem; color: rgb(var(--cream-rgb) / calc(.35 * var(--text-k))); flex-wrap: wrap; gap: 1rem;
  }

  /* ── FLOATING ORDER BTN ── */
  #float-order {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 98;
    background: var(--gold); color: var(--on-gold);
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; cursor: pointer; border: none;
    box-shadow: 0 6px 24px rgba(232,160,32,.4);
    transition: transform .2s, box-shadow .2s;
    position: relative;
  }
  #float-order:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(232,160,32,.5); }

  /* ── REACH US STICKY WIDGET ── */
  .reach-us {
    position: fixed; bottom: 6.6rem; right: 2rem; z-index: 97;
    display: flex; flex-direction: column; align-items: center; gap: .8rem;
  }
  .reach-us-menu { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
  .reach-btn {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; text-decoration: none; color: var(--white);
    box-shadow: 0 6px 18px rgb(var(--shadow-rgb) / calc(.35 * var(--shadow-k)));
    opacity: 0; transform: translateY(14px) scale(.6);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, box-shadow .2s;
  }
  .reach-us.open .reach-btn { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .reach-us.open .reach-btn:nth-child(1) { transition-delay: .04s; }
  .reach-us.open .reach-btn:nth-child(2) { transition-delay: .09s; }
  .reach-us.open .reach-btn:nth-child(3) { transition-delay: .14s; }
  .reach-us.open .reach-btn:nth-child(4) { transition-delay: .19s; }
  .reach-btn:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 10px 24px rgb(var(--shadow-rgb) / calc(.45 * var(--shadow-k))); }
  .reach-call { background: var(--gold); color: var(--on-gold); }
  .reach-whatsapp { background: #25D366; }
  .reach-insta {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }
  .reach-fb { background: #1877F2; font-weight: 700; font-family: 'Inter', sans-serif; }
  .reach-toggle {
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--gold); color: var(--on-gold); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; position: relative;
    box-shadow: 0 6px 24px rgba(232,160,32,.45);
    transition: transform .25s, box-shadow .25s, background .25s;
  }
  .reach-toggle:hover { transform: scale(1.06); box-shadow: 0 10px 30px rgba(232,160,32,.55); }
  .reach-us.open .reach-toggle { background: var(--ember); box-shadow: 0 6px 24px rgba(232,67,32,.45); }
  .reach-icon-open, .reach-icon-close {
    position: absolute; display: flex; transition: opacity .2s, transform .3s;
  }
  .reach-icon-close { opacity: 0; transform: rotate(-90deg) scale(.5); }
  .reach-us.open .reach-icon-open { opacity: 0; transform: rotate(90deg) scale(.5); }
  .reach-us.open .reach-icon-close { opacity: 1; transform: rotate(0) scale(1); }
  .reach-pulse {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--gold); animation: reach-pulse 2.2s ease-out infinite; pointer-events: none;
  }
  .reach-us.open .reach-pulse { display: none; }
  @keyframes reach-pulse {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(1.7); opacity: 0; }
  }

  /* ── NOTIFY TOAST ── */
  #toast {
    position: fixed; bottom: 5.5rem; right: 2rem; z-index: 300;
    background: var(--char); color: var(--white);
    padding: .8rem 1.4rem; border-radius: 8px;
    font-size: .85rem; font-weight: 500;
    border-left: 3px solid var(--gold);
    box-shadow: 0 8px 32px rgb(var(--shadow-rgb) / calc(.4 * var(--shadow-k)));
    transform: translateX(150%); transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  #toast.show { transform: translateX(0); }

  /* ── RESPONSIVE ── */
  /* Nav collapses to the burger menu well before the full row (logo +
     mode toggle + links + account + Order Now) starts clashing/overflowing
     on real laptop widths (~1280–1440px). */
  @media (max-width: 1300px) {
    .nav-links {
      display: none; position: fixed; top: 72px; left: 0; right: 0;
      flex-direction: column; align-items: flex-start; gap: 0;
      background: rgb(var(--bg-rgb) / .97); backdrop-filter: blur(18px);
      padding: 1rem 6vw 1.5rem; z-index: 99;
      border-bottom: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k)));
    }
    .nav-links.show { display: flex; }
    .nav-links li { width: 100%; padding: .7rem 0; border-bottom: 1px solid rgb(var(--line-rgb) / calc(.05 * var(--line-k))); }
    .nav-links a { font-size: .9rem; }
    .nav-links li:last-child { border-bottom: none; padding-top: 1rem; }
    .nav-cta { display: inline-flex; }
    .nav-burger { display: flex; }
    .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-burger.open span:nth-child(2) { opacity: 0; }
    .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav-account-item { width: 100%; }
    .nav-account-btn { width: 100%; justify-content: center; padding: .75rem 0; }
    .nav-account-btn span.aa-label { display: inline; }
    .account-dropdown {
      position: static; width: 100%; margin-top: .6rem;
      opacity: 1; visibility: visible; transform: none;
      display: none; box-shadow: none;
    }
    .nav-account-item.open .account-dropdown { display: block; }
  }
  @media (max-width: 1024px) {
    #hero, #hero-hotel { grid-template-columns: 1fr; min-height: auto; }
    .hero-right { height: 60vw; position: relative; }
    .hero-left { padding: 110px 7vw 60px; }
    .floating-badge { left: 7vw; bottom: -22px; }
    .exp-grid { grid-template-columns: 1fr; gap: 3rem; }
    .exp-image { max-height: 400px; }
    .menu-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 260px 220px; }
    .cat-card.big { grid-row: span 1; grid-column: span 2; }
    .story-inner { grid-template-columns: 1fr; gap: 3rem; }
    .story-images { height: 420px; order: -1; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .reviews-summary { grid-template-columns: 1fr; gap: 2.5rem; }
    .rating-big { max-width: 400px; margin: 0 auto; width: 100%; }
  }
  @media (max-width: 768px) {
    nav { padding: 0 5vw; height: 64px; }
    .nav-links { top: 64px; }
    .logo-text { font-size: 1.4rem; }
    .nav-logo-lockup { height: 56px; }

    section { padding: 70px 5vw; }
    .hero-left { padding: 100px 5vw 50px; text-align: left; }
    .hero-h1 { font-size: clamp(3rem, 13vw, 4.5rem); }
    .hero-sub { max-width: 100%; }
    .hero-stats { gap: 1.6rem 2rem; flex-wrap: wrap; margin-top: 2.6rem; }
    .hero-actions { width: 100%; }
    .hero-actions a { flex: 1; justify-content: center; text-align: center; }
    .hero-right { height: 80vw; }
    .floating-badge { bottom: -20px; left: 5vw; padding: .8rem 1rem; }
    .floating-badge .badge-num { font-size: 1.6rem; }

    .ticker-item { font-size: .85rem; }
    .ticker-inner { animation-duration: 20s; }

    .section-heading { font-size: clamp(2rem, 9vw, 2.8rem); }
    .exp-image { max-height: 320px; }
    .exp-item { padding: 1.1rem; gap: 1rem; }
    .menu-tabs { width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
    .menu-tabs::-webkit-scrollbar { display: none; }
    .tab-btn { flex-shrink: 0; }
    .menu-grid { grid-template-columns: repeat(2, 1fr); }

    .cat-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: .9rem; }
    .cat-card, .cat-card.big { grid-column: span 1; grid-row: span 1; height: 280px; }
    .cat-card.big .cat-info h3 { font-size: 2.1rem; }

    .specials-row { gap: 1rem; }
    .special-card { min-width: 240px; }

    .story-images { height: 320px; }
    .story-chip { width: 70px; height: 70px; }
    .story-chip .num { font-size: 1.4rem; }

    .testi-grid { grid-template-columns: 1fr; }
    .rating-num { font-size: 4.5rem; }

    #cta-band { flex-direction: column; text-align: center; padding: 60px 5vw; }
    .cta-band-text h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    #cta-band > div:last-child { width: 100%; }
    #cta-band .btn-dark { flex: 1; justify-content: center; }

    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }

    #order-panel { width: 90vw; right: -90vw; padding: 1.6rem 1.2rem; }
    .receipt-actions { flex-direction: column; }

    #float-order {
      width: 52px; height: 52px; font-size: 1.2rem;
      bottom: 1.2rem; right: 1.2rem;
    }
    .reach-us { bottom: 5.8rem; right: 1.2rem; gap: .6rem; }
    .reach-btn { width: 42px; height: 42px; font-size: 1rem; }
    .reach-toggle { width: 50px; height: 50px; font-size: 1.15rem; }
  }
  @media (max-width: 520px) {
    .menu-grid { grid-template-columns: 1fr; }
    .logo-text { font-size: 1.2rem; }
    .logo-sub { font-size: .56rem; letter-spacing: .14em; }
    .logo-mark { width: 36px; height: 36px; font-size: .9rem; }
    .logo-mark-img { width: 46px; height: 46px; }
    .logo-mark-photo { width: 46px; height: 46px; }
    .nav-logo-lockup { height: 50px; }
    .loader-logo-img { height: 110px; }
    .loader-logo-photo { height: 110px; }
    .hero-stats { gap: 1.4rem 1.8rem; }
    .stat-num { font-size: 2rem; }
    .hero-actions { flex-direction: column; }
    .hero-h1 { font-size: clamp(2.6rem, 14vw, 3.6rem); }
    .specials-row { flex-direction: column; overflow-x: visible; }
    .special-card { min-width: 100%; }
  }

  /* scroll-snap for menu section on mobile */
  @media (max-width: 768px) {
    .menu-grid {
      display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
      padding-bottom: 1rem; gap: 1rem;
    }
    .menu-card { min-width: 260px; scroll-snap-align: start; flex-shrink: 0; }
  }

/* ── ACCOUNT: NAV BUTTON + DROPDOWN ── */
.nav-account-item { position: relative; }
.nav-account-btn {
  display: flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid rgb(var(--line-rgb) / calc(.14 * var(--line-k)));
  color: var(--white); cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: .74rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: .5rem .9rem; border-radius: 99px;
  transition: border-color .2s, background .2s, color .2s;
}
.nav-account-btn:hover { border-color: var(--gold); color: var(--gold-ink); background: rgba(232,160,32,.08); }
.nav-account-btn .aa-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: var(--on-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: .78rem; letter-spacing: 0;
  flex-shrink: 0;
}
.nav-account-btn .aa-icon { font-size: .95rem; line-height: 1; }
.nav-account-btn .aa-chevron { font-size: .6rem; opacity: .6; transition: transform .2s; }
.nav-account-item.open .nav-account-btn .aa-chevron { transform: rotate(180deg); }

.account-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0;
  width: 240px;
  background: var(--char); border: 1px solid rgb(var(--line-rgb) / calc(.08 * var(--line-k)));
  border-radius: 14px; padding: .6rem;
  box-shadow: 0 24px 60px rgb(var(--shadow-rgb) / calc(.5 * var(--shadow-k)));
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 200;
}
.nav-account-item.open .account-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.account-dropdown-header {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .5rem .8rem; border-bottom: 1px solid rgb(var(--line-rgb) / calc(.07 * var(--line-k))); margin-bottom: .4rem;
}
.account-dropdown-header .aa-avatar-lg {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold); color: var(--on-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 1rem; flex-shrink: 0;
}
.account-dropdown-header .aa-name { font-size: .84rem; font-weight: 600; color: var(--white); line-height: 1.3; }
.account-dropdown-header .aa-email { font-size: .68rem; color: var(--mist); line-height: 1.3; margin-top: .1rem; word-break: break-all; }
.account-dropdown-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  color: rgb(var(--white-rgb) / calc(.75 * var(--text-k))); font-family: 'Inter', sans-serif;
  font-size: .78rem; font-weight: 500; padding: .65rem .5rem; border-radius: 8px;
  transition: background .2s, color .2s;
}
.account-dropdown-item:hover { background: rgba(232,160,32,.1); color: var(--gold-ink); }
.account-dropdown-item.signout { color: var(--ember-ink); }
.account-dropdown-item.signout:hover { background: rgba(232,67,32,.1); color: var(--ember-ink); }

/* ── AUTH MODAL ── */
#auth-modal-bg {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10,8,5,.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
#auth-modal-bg.show { opacity: 1; visibility: visible; }
.auth-modal {
  width: 100%; max-width: 400px;
  background: var(--deep); border: 1px solid rgba(232,160,32,.15);
  border-radius: 20px; padding: 2.2rem 2rem;
  position: relative;
  transform: translateY(20px) scale(.98); transition: transform .3s;
  max-height: 90vh; overflow-y: auto;
}
#auth-modal-bg.show .auth-modal { transform: translateY(0) scale(1); }
.auth-modal-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--char); border: none; color: var(--mist);
  font-size: .95rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s;
}
.auth-modal-close:hover { color: var(--gold-ink); background: rgba(232,160,32,.1); }
.auth-modal-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(232,160,32,.12); color: var(--gold-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1.1rem;
}
.auth-modal h3 {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; letter-spacing: .03em; line-height: 1;
}
.auth-modal-sub { font-size: .8rem; color: var(--mist); margin-top: .5rem; line-height: 1.5; }
.auth-tabs {
  display: flex; gap: .3rem; margin: 1.4rem 0 1.5rem;
  background: var(--char); border-radius: 10px; padding: .3rem;
}
.auth-tab {
  flex: 1; padding: .55rem 0; border-radius: 7px; text-align: center;
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border: none; background: transparent; color: rgb(var(--cream-rgb) / calc(.5 * var(--text-k)));
  cursor: pointer; transition: .25s;
}
.auth-tab.active { background: var(--gold); color: var(--on-gold); }
.auth-form { display: none; flex-direction: column; gap: .85rem; }
.auth-form.active { display: flex; }
.auth-field { display: flex; flex-direction: column; gap: .4rem; }
.auth-field label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); font-weight: 600; }
.auth-field input {
  background: var(--char); border: 1px solid rgb(var(--line-rgb) / calc(.1 * var(--line-k)));
  border-radius: 8px; padding: .8rem 1rem;
  color: var(--white); font-size: .85rem; font-family: 'Inter', sans-serif;
  width: 100%;
}
.auth-field input:focus { outline: none; border-color: var(--gold); }
.auth-field input::placeholder { color: rgba(138,127,110,.7); }
.auth-forgot {
  align-self: flex-end; background: none; border: none; cursor: pointer;
  font-size: .72rem; color: var(--gold-ink); font-weight: 500; margin-top: -.4rem;
}
.auth-forgot:hover { text-decoration: underline; }
.auth-submit {
  background: var(--gold); color: var(--on-gold); border: none;
  border-radius: 8px; padding: .9rem 1rem; margin-top: .3rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, transform .2s;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.auth-submit:hover { background: var(--amber); transform: translateY(-1px); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.auth-divider {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.3rem 0; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mist);
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgb(var(--line-rgb) / calc(.08 * var(--line-k))); }
.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  width: 100%; background: var(--paper); color: #1f1f1f; border: none;
  border-radius: 8px; padding: .8rem 1rem;
  font-size: .82rem; font-weight: 600; font-family: 'Inter', sans-serif;
  cursor: pointer; transition: transform .2s, box-shadow .2s;
}
.auth-google-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgb(var(--shadow-rgb) / calc(.25 * var(--shadow-k))); }
.auth-google-icon { width: 18px; height: 18px; flex-shrink: 0; }
.auth-error {
  display: none; background: rgba(232,67,32,.1); border: 1px solid rgba(232,67,32,.3);
  color: var(--err-ink); font-size: .74rem; line-height: 1.5;
  padding: .7rem .9rem; border-radius: 8px; margin-top: -.2rem;
}
.auth-error.show { display: block; }
.auth-success-view { display: none; flex-direction: column; align-items: center; text-align: center; padding: 1rem 0 .5rem; }
.auth-success-view.active { display: flex; }
.auth-phone-step { flex-direction: column; align-items: center; text-align: center; padding: .2rem 0 .5rem; }
.auth-phone-step form { width: 100%; display: flex; flex-direction: column; gap: .85rem; margin-top: 1.2rem; }
.auth-success-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(232,160,32,.14); color: var(--gold-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin-bottom: 1.1rem;
}
.auth-switch-line { text-align: center; font-size: .76rem; color: var(--mist); margin-top: 1.3rem; }
.auth-switch-line button { background: none; border: none; color: var(--gold-ink); font-weight: 600; cursor: pointer; font-size: .76rem; }
.auth-switch-line button:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .auth-modal { padding: 1.8rem 1.4rem; }
}

/* ── LIVE CHAT WIDGET (chat.html on the admin side) ── */
.reach-chat { background: #4A90D9; position: relative; }
.reach-chat-dot {
  position: absolute; top: -2px; right: -2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ember); border: 2px solid var(--bg);
  display: none;
}
.reach-chat-dot.show { display: block; }

.chat-widget-panel {
  position: fixed; bottom: 6.6rem; right: 2rem; z-index: 150;
  width: min(460px, calc(100vw - 2.4rem));
  /* FIXED height (not just a max-height cap). Previously only
     max-height was set, and with no definite height on this flex
     column the panel sized itself to the message thread's content —
     growing taller with every new message — and only stopped once it
     finally hit the max-height ceiling. Giving it a real height means
     the panel is always the same size the moment it opens; .cw-body
     (flex:1 + overflow-y:auto below) absorbs any extra messages via
     its own internal scroll instead of the outer box resizing.
     Generous buffer so the panel's top edge stays well below the
     fixed 72px navbar even on short/resized browser windows. */
  height: min(640px, calc(100vh - 9rem));
  max-height: min(640px, calc(100vh - 9rem));
  background: var(--char);
  border: 1px solid rgba(232,160,32,.18);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgb(var(--shadow-rgb) / calc(.55 * var(--shadow-k)));
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.97);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
}
.chat-widget-panel.open {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.3rem; background: var(--deep); flex-shrink: 0;
  border-bottom: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k)));
}
.cw-head-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; letter-spacing: .04em; color: var(--cream); }
.cw-head-sub { font-size: .68rem; color: var(--mist); margin-top: .15rem; }
.cw-close {
  background: none; border: none; color: var(--mist); font-size: 1.05rem;
  cursor: pointer; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.cw-close:hover { background: rgb(var(--line-rgb) / calc(.06 * var(--line-k))); color: var(--gold-ink); }

.cw-head-actions { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.cw-end {
  background: none; border: 1px solid rgb(var(--line-rgb) / calc(.12 * var(--line-k))); color: var(--mist);
  font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; padding: .4rem .7rem; border-radius: 99px; white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.cw-end:hover { border-color: rgba(232,90,90,.4); color: var(--bad-ink); background: rgba(232,90,90,.08); }
.cw-end[hidden] { display: none; }

.cw-body {
  flex: 1; min-height: 0; /* min-height:0 is what actually lets a flex child shrink below its content size and scroll internally instead of stretching its flex parent — without it, overflow-y:auto is set but never engages, and the panel just grows instead. The old fixed min-height (320px) is dropped for the same reason: it fought against the panel's own fixed height above once messages piled up. */
  overflow-y: auto; overflow-x: hidden; padding: 1.2rem 1.3rem;
  display: flex; flex-direction: column; gap: .85rem;
  scroll-behavior: smooth;
  overscroll-behavior: contain; /* stops a fast scroll-to-top from bubbling up and dragging the page behind the widget */
  scrollbar-width: thin;
  scrollbar-color: rgba(232,160,32,.4) transparent;
}
.cw-body::-webkit-scrollbar { width: 6px; }
.cw-body::-webkit-scrollbar-track { background: transparent; }
.cw-body::-webkit-scrollbar-thumb {
  background: rgba(232,160,32,.35); border-radius: 99px;
}
.cw-body::-webkit-scrollbar-thumb:hover { background: rgba(232,160,32,.6); }
.cw-msg {
  max-width: 86%; padding: .75rem 1rem; border-radius: 14px;
  font-size: .92rem; line-height: 1.55; word-wrap: break-word;
}
.cw-msg.from-customer { align-self: flex-end; background: var(--gold); color: var(--on-gold); border-bottom-right-radius: 4px; }
.cw-msg.from-admin { align-self: flex-start; background: rgb(var(--line-rgb) / calc(.09 * var(--line-k))); color: var(--cream); border-bottom-left-radius: 4px; }
.cw-msg-time { display: block; font-size: .64rem; opacity: .65; margin-top: .35rem; }

.cw-empty { text-align: center; color: var(--mist); font-size: .78rem; margin: auto; padding: 1rem; }

.cw-start { padding: 1.3rem; display: flex; flex-direction: column; gap: .8rem; overflow-y: auto; }
.cw-start[hidden] { display: none; }
.cw-body[hidden], .cw-input-row[hidden] { display: none; }
.cw-start p { font-size: .78rem; color: var(--mist); line-height: 1.55; }
.cw-start input, .cw-start textarea {
  width: 100%; background: var(--deep); border: 1px solid rgb(var(--line-rgb) / calc(.1 * var(--line-k)));
  border-radius: 8px; padding: .7rem .9rem; color: var(--white);
  font-size: .82rem; font-family: 'Inter', sans-serif; resize: none;
}
.cw-start input::placeholder, .cw-start textarea::placeholder { color: var(--mist); }
.cw-start input:focus, .cw-start textarea:focus { outline: none; border-color: var(--gold); }
.cw-start textarea { min-height: 72px; }
.cw-start-error { font-size: .74rem; color: var(--err-ink); min-height: 1em; }
.cw-start-submit {
  background: var(--gold); color: var(--on-gold); border: none; border-radius: 8px;
  padding: .75rem; font-weight: 600; font-size: .82rem; cursor: pointer;
  transition: background .2s;
}
.cw-start-submit:hover { background: var(--amber); }
.cw-start-submit:disabled { opacity: .6; cursor: default; }

.cw-input-row {
  display: flex; gap: .6rem; padding: .9rem 1rem; flex-shrink: 0;
  border-top: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k))); background: var(--deep);
}
.cw-input-row input {
  flex: 1; background: var(--char); border: 1px solid rgb(var(--line-rgb) / calc(.1 * var(--line-k)));
  border-radius: 99px; padding: .7rem 1.1rem; color: var(--white);
  font-size: .86rem; font-family: 'Inter', sans-serif;
}
.cw-input-row input::placeholder { color: var(--mist); }
.cw-input-row input:focus { outline: none; border-color: var(--gold); }
.cw-input-row button {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold); color: var(--on-gold); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  transition: background .2s;
}
.cw-input-row button:hover { background: var(--amber); }
.cw-input-row button:disabled { opacity: .5; cursor: default; }

/* ── Admin-reply pop-up toast (sits above the Reach Us cluster,
   shown when staff replies while the chat panel is closed) ── */
.cw-notify-toast {
  position: fixed; bottom: 6.6rem; right: 2rem; z-index: 160;
  width: min(320px, calc(100vw - 2.4rem));
  background: var(--char); border: 1px solid rgba(232,160,32,.3);
  border-radius: 14px; padding: .9rem 1rem;
  box-shadow: 0 16px 40px rgb(var(--shadow-rgb) / calc(.45 * var(--shadow-k)));
  display: flex; flex-direction: column; gap: .3rem;
  cursor: pointer;
  opacity: 0; transform: translateY(12px) scale(.97);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.cw-notify-toast.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.cw-notify-toast-title {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 700;
}
.cw-notify-toast-text {
  font-size: .84rem; color: var(--cream); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 520px) {
  .cw-notify-toast { right: 1.2rem; left: 1.2rem; width: auto; bottom: 5.8rem; }
}

@media (max-width: 520px) {
  .chat-widget-panel {
    right: 1.2rem; left: 1.2rem; width: auto; bottom: 5.8rem;
    height: min(560px, calc(100vh - 13rem));
    max-height: min(560px, calc(100vh - 13rem));
  }
}

/* ── REACH US: "Online 24/7" status badge, sits just above the toggle ── */
.reach-online-badge {
  display: flex; align-items: center; gap: .45rem;
  background: var(--char); border: 1px solid rgb(var(--line-rgb) / calc(.08 * var(--line-k)));
  padding: .4rem .75rem; border-radius: 99px;
  font-size: .65rem; font-weight: 600; letter-spacing: .02em; color: var(--cream);
  white-space: nowrap; box-shadow: 0 6px 18px rgb(var(--shadow-rgb) / calc(.35 * var(--shadow-k)));
  transition: opacity .2s ease, transform .2s ease;
}
.reach-us.open .reach-online-badge { opacity: 0; transform: translateY(6px); pointer-events: none; }
.reach-online-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2ECC71; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(46,204,113,.6);
  animation: reach-online-pulse 2s ease-out infinite;
}
@keyframes reach-online-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,204,113,.55); }
  70% { box-shadow: 0 0 0 6px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}
@media (max-width: 768px) {
  .reach-online-badge { font-size: .6rem; padding: .35rem .6rem; }
}
/* ── MODE TOGGLE (Restaurant / Hotels) ── */
.mode-toggle {
  display: flex; align-items: center; background: var(--bg);
  border: 1px solid rgba(232,160,32,.28); border-radius: 99px;
  padding: 3px; position: relative; cursor: pointer;
  height: 36px; flex-shrink: 0; margin-right: .4rem;
  -webkit-tap-highlight-color: transparent;
}
.mode-toggle .mt-pill {
  position: absolute; top: 3px; left: 3px; height: 30px;
  background: var(--gold); border-radius: 99px;
  transition: transform .35s cubic-bezier(.25,.8,.25,1);
  z-index: 0;
}
.mode-toggle button {
  position: relative; z-index: 1; border: none; background: none;
  height: 30px; padding: 0 .95rem; display: flex; align-items: center; gap: .35rem;
  font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  color: rgb(var(--cream-rgb) / calc(.6 * var(--text-k))); transition: color .3s;
  white-space: nowrap;
}
.mode-toggle button.active { color: var(--on-gold); }
.mode-toggle button svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 900px) {
  .mode-toggle button span.mt-label { display: none; }
  .mode-toggle button { padding: 0 .7rem; }
}
@media (max-width: 520px) {
  .mode-toggle { order: -1; margin-right: 0; }
}

/* ── MODE TOGGLE — mobile menu (full) version ──
   A second toggle instance rendered inside the nav-links dropdown
   itself, so it's easy to find without hunting for the small
   icon-only pill up in the header. Unlike the header pill, this one
   never collapses to icons-only — it always shows the full "Hotels" /
   "Restaurant" labels, sized to fill the menu width. Hidden entirely
   outside the mobile nav breakpoint, since the header pill already
   covers desktop. */
.nav-mobile-mode-toggle { display: none; }
.mode-toggle.mode-toggle-mobile-menu {
  width: 100%; height: 44px; margin-right: 0;
}
.mode-toggle.mode-toggle-mobile-menu .mt-pill {
  height: 38px; width: calc(50% - 3px); transform: translateX(0);
}
.mode-toggle.mode-toggle-mobile-menu.is-restaurant .mt-pill { transform: translateX(100%); }
.mode-toggle.mode-toggle-mobile-menu button {
  height: 38px; flex: 1; justify-content: center;
  font-size: .74rem;
}
.mode-toggle.mode-toggle-mobile-menu button span.mt-label { display: inline !important; }
.mode-toggle.mode-toggle-mobile-menu button svg { width: 15px; height: 15px; }

@media (max-width: 1300px) {
  .nav-mobile-mode-toggle {
    display: block; width: 100%; padding-bottom: 1rem;
    margin-bottom: .2rem; border-bottom: 1px solid rgb(var(--line-rgb) / calc(.05 * var(--line-k)));
  }
}
/* ── LANGUAGE SWITCHER (Phase 7) ── */
.lang-switcher {
  position: relative; flex-shrink: 0; margin-right: .5rem;
  -webkit-tap-highlight-color: transparent;
}
.lang-switcher-btn {
  display: flex; align-items: center; gap: .35rem;
  background: var(--bg); border: 1px solid rgba(232,160,32,.28);
  border-radius: 99px; height: 36px; padding: 0 .8rem;
  font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; color: rgb(var(--cream-rgb) / calc(.75 * var(--text-k))); cursor: pointer;
  white-space: nowrap; transition: border-color .2s, color .2s;
}
.lang-switcher-btn:hover { border-color: var(--gold); color: var(--gold-ink); }
.lang-switcher-btn .ls-flag { font-size: .9rem; line-height: 1; }
.lang-switcher-btn .ls-chevron { font-size: .55rem; opacity: .6; transition: transform .2s; }
.lang-switcher.open .lang-switcher-btn .ls-chevron { transform: rotate(180deg); }

.lang-switcher-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 200;
  background: var(--char); border: 1px solid rgb(var(--line-rgb) / calc(.08 * var(--line-k)));
  border-radius: 12px; padding: .4rem; min-width: 190px;
  box-shadow: 0 20px 50px rgb(var(--shadow-rgb) / calc(.5 * var(--shadow-k)));
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.lang-switcher.open .lang-switcher-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-switcher-menu button[data-lang] {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  background: none; border: none; border-radius: 8px;
  padding: .6rem .7rem; font-family: 'Inter', sans-serif; font-size: .8rem;
  color: var(--cream); cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.lang-switcher-menu button[data-lang]:hover { background: rgba(232,160,32,.1); color: var(--gold-ink); }
.lang-switcher-menu button[data-lang].active { color: var(--gold-ink); font-weight: 600; }
.lang-switcher-menu .ls-flag { font-size: 1rem; }
.lang-switcher-menu .ls-native { flex: 1; }
.lang-switcher-menu .ls-check { font-size: .68rem; color: var(--gold-ink); opacity: .85; }
.lang-switcher-menu .ls-draft-note {
  font-size: .6rem; line-height: 1.5; color: var(--mist);
  padding: .55rem .7rem .3rem; margin-top: .3rem;
  border-top: 1px solid rgb(var(--line-rgb) / calc(.06 * var(--line-k)));
}

@media (max-width: 900px) {
  .lang-switcher-btn .ls-label { display: none; }
  .lang-switcher-btn { padding: 0 .6rem; }
}
@media (max-width: 520px) {
  #navbar .lang-switcher { order: -1; margin-right: .3rem; }
  .lang-switcher-menu { right: -40px; }
}

/* Footer placement (Phase 7 follow-up): the switcher now lives in
   .footer-bottom at the base of the page, so its dropdown opens
   upward instead of down off the bottom of the viewport. */
.footer-bottom .lang-switcher {
  margin-right: 0;
}
.footer-bottom .lang-switcher-menu {
  top: auto; bottom: calc(100% + 10px);
  transform: translateY(6px);
}
.footer-bottom .lang-switcher.open .lang-switcher-menu { transform: translateY(0); }
/* ═══════════════════════════════════════════════════════
   SWIPE HINT — for every horizontally-scrollable row/tab
   strip/table on the site (Menu grid, Today's Specials, the
   menu filter tabs, the category nav, day tabs, gallery
   tabs, the Signature Dishes carousel, the room comparison
   table). Visitors have no visual cue these scroll sideways
   otherwise — this adds a right-edge fade, a live scroll-
   progress dot row (where one makes sense), and a "swipe to
   explore" badge that keeps gently nudging the row on a loop
   so it stays visibly alive rather than a one-shot animation
   that's easy to miss. It shows fresh every page load and
   keeps nudging that row specifically until the visitor
   actually swipes it for themselves — nothing here is
   remembered between visits, and swiping one row never
   dismisses any other. Purely additive: on desktop, or once
   a row no longer actually overflows (e.g. specials stacks
   into a single column under 520px), everything here stays
   hidden automatically — driven by JS detecting real
   overflow, not a hardcoded breakpoint.
   ═══════════════════════════════════════════════════════ */

.swipe-scroller { position: relative; }

/* Right-edge fade — hints "there's more" without needing text.
   Only shown while the row can actually still scroll further right. */
.swipe-edge-fade {
  display: none;
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 64px; pointer-events: none; z-index: 3;
  background: linear-gradient(to right, transparent, var(--bg) 82%);
  opacity: 1; transition: opacity .35s ease;
}
#specials .swipe-edge-fade { background: linear-gradient(to right, transparent, var(--bg) 82%); }
/* Signature Dishes carousel (collection.html) sits on var(--black) too
   — matches the default above. Room comparison table (rooms.html)
   sits on var(--char), so its fade needs to match that instead or the
   edge would show a visible seam against the page background. */
#room-compare .swipe-edge-fade { background: linear-gradient(to right, transparent, var(--char) 82%); }
/* Tab/pill-strip contexts added alongside the card/table carousels
   above — each needs the fade to match its own section background or
   the gradient shows a visible seam instead of blending in. */
#cat-nav .swipe-edge-fade,
#day-selector .swipe-edge-fade,
.gallery-tabs-wrap .swipe-edge-fade {
  background: linear-gradient(to right, transparent, var(--deep) 82%);
}
.swipe-scroller.is-scrollable .swipe-edge-fade { display: block; }
.swipe-scroller.at-end .swipe-edge-fade { opacity: 0; }

/* "Swipe to explore" badge with an animated arrow. Sits centered
   over the bottom edge of the row, loops until the row is actually
   swiped (JS adds/removes .show and .dismissed). */
.swipe-hint-badge {
  display: none;
  position: absolute; left: 50%; bottom: 10px;
  transform: translateX(-50%);
  z-index: 4;
  align-items: center; gap: .5rem;
  background: rgba(10,8,5,.88);
  border: 1px solid rgba(232,160,32,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--cream);
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  padding: .6rem 1.1rem;
  border-radius: 99px;
  box-shadow: 0 12px 32px rgb(var(--shadow-rgb) / calc(.45 * var(--shadow-k)));
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.swipe-scroller.is-scrollable .swipe-hint-badge.show { display: flex; opacity: 1; transform: translateX(-50%); }
.swipe-hint-badge.dismissed { opacity: 0 !important; transform: translate(-50%, 8px) !important; }
.swipe-hint-badge svg {
  width: 16px; height: 16px; flex-shrink: 0;
  animation: swipeHintNudge 1.3s ease-in-out .4s infinite;
}
@keyframes swipeHintNudge {
  0%, 100% { transform: translateX(0); opacity: .7; }
  50% { transform: translateX(6px); opacity: 1; }
}

/* Compact variant for scrollable tab/pill bars (category nav, day
   tabs, gallery tabs, menu filter tabs) — these strips are too short
   for the bottom-centered text pill above to sit in without covering
   the tabs themselves. Same edge-fade + badge system, just collapsed
   to a small arrow chip pinned to the vertical center of the right
   edge, and no progress dots (the active tab already shows where you
   are). Still driven by the same real-overflow detection, so it's
   just as invisible on desktop / non-overflowing rows. */
.swipe-scroller.slim .swipe-edge-fade { width: 40px; }
.swipe-scroller.slim .swipe-hint-badge {
  left: auto; right: 6px; bottom: auto; top: 50%;
  padding: .45rem; border-radius: 50%;
  transform: translateY(-50%);
}
.swipe-scroller.slim .swipe-hint-badge span { display: none; }
.swipe-scroller.slim .swipe-hint-badge svg { width: 14px; height: 14px; margin: 0; }
.swipe-scroller.slim.is-scrollable .swipe-hint-badge.show { transform: translateY(-50%); }
.swipe-scroller.slim .swipe-hint-badge.dismissed { transform: translateY(-50%) !important; }

/* Scroll-progress dots — live feedback, not just decoration.
   Sits in normal flow right under the scroller. */
.swipe-dots {
  display: none;
  justify-content: center; align-items: center;
  gap: .4rem;
  margin-top: 1.1rem;
}
.swipe-scroller.is-scrollable + .swipe-dots { display: flex; }
.swipe-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--cream-rgb) / calc(.25 * var(--text-k)));
  transition: background .25s ease, width .25s ease;
}
.swipe-dot.active { width: 20px; border-radius: 4px; background: var(--gold); }

@media (min-width: 769px) {
  /* Desktop rows aren't touch-scrolled the same way — keep this
     mobile-only regardless of what the JS overflow check finds. */
  .swipe-edge-fade, .swipe-hint-badge, .swipe-dots { display: none !important; }
}