/* ========================================================================== 
   Layer 01: foundation and original component styles
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100000;
  transform: translateY(-150%);
  padding: 10px 16px;
  border-radius: 999px;
  background: #2c2620;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid #176b3a;
  outline-offset: 3px;
}



    :root {

      --amber:        #E0A24E;

      --amber-rgb:    224, 162, 78;

      --amber-dark:   #C77E2E;

      --peach:        #F0C2A2;

      --cream:        #FBF4E8;

      --cream-2:      #F6EAD3;

      --cream-deep:   #EFE0C6;

      --sage:         #A7AE57;

      --moss:         #7C8A3B;

      --rose:         #E394A8;

      --terracotta:   #C16A3C;

      --bark:         #2C2620;

      --bark-soft:    #6b6052;

      --card:         #FFFDF8;

      --border:       rgba(44, 38, 32, .10);

      --shadow:       0 18px 50px -18px rgba(120, 80, 30, .28);

      --shadow-sm:    0 8px 24px -12px rgba(120, 80, 30, .25);

      --ff-display: 'Bricolage Grotesque', system-ui, sans-serif;

      --ff-body: 'Outfit', system-ui, sans-serif;

      --ff-script:    'Caveat', cursive;

    }



    html { scroll-behavior: smooth; overflow-x: hidden; }



    body {

      font-family: var(--ff-body);

      background: var(--cream);

      color: var(--bark);

      line-height: 1.65;

      overflow-x: hidden;

    }



    a { text-decoration: none; color: inherit; }

    img { max-width: 100%; height: auto; display: block; }



    .container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }



    /* ── shared bits ── */

    .script {

      font-family: var(--ff-script);

      font-size: 26px;

      font-weight: 600;

      color: var(--terracotta);

      line-height: 1;

    }



    .section-title {

      font-family: var(--ff-display);

      font-size: clamp(32px, 4.4vw, 54px);

      font-weight: 600;

      line-height: 1.1;

      letter-spacing: -.5px;

      color: var(--bark);

    }



    .section-sub {

      color: var(--bark-soft);

      font-size: 17px;

      max-width: 540px;

      margin-top: 16px;

    }



    .title-line {

      width: 76px; height: 4px;

      background: linear-gradient(90deg, var(--amber), var(--terracotta));

      border-radius: 4px;

      margin-top: 20px;

    }



    /* buttons */

    .btn {

      display: inline-flex;

      align-items: center;

      gap: 9px;

      font-family: var(--ff-body);

      font-size: 15px;

      font-weight: 700;

      padding: 15px 32px;

      border-radius: 100px;

      border: none;

      cursor: pointer;

      transition: transform .25s, box-shadow .25s, background .25s, color .25s;

      white-space: nowrap;

    }



    .btn-primary {

      background: var(--amber);

      color: #fff;

      box-shadow: 0 10px 26px -10px rgba(var(--amber-rgb), .9);

    }

    .btn-primary:hover {

      background: var(--amber-dark);

      transform: translateY(-3px);

      box-shadow: 0 16px 32px -10px rgba(var(--amber-rgb), .95);

    }



    .btn-ghost {

      background: transparent;

      color: var(--bark);

      border: 1.5px solid var(--border);

    }

    .btn-ghost:hover {

      border-color: var(--amber);

      color: var(--amber-dark);

      transform: translateY(-3px);

    }



    .btn-wa { background: #25D366; color: #fff; box-shadow: 0 10px 26px -10px rgba(37, 211, 102, .8); }

    .btn-wa:hover { background: #1da851; transform: translateY(-3px); }



    /* split-text reveal */

    .split .word { display: inline-block; overflow: hidden; vertical-align: top; }

    .split .word > span {

      display: inline-block;

      transform: translateY(110%);

      transition: transform .7s cubic-bezier(.22,1,.36,1);

    }

    .split.in-view .word > span { transform: translateY(0); }



    /* entrance anims */

    .anim { opacity: 0; transition: opacity .8s ease, transform .8s ease; transition-delay: var(--d, 0s); }

    .anim.up   { transform: translateY(42px); }

    .anim.left { transform: translateX(-46px); }

    .anim.right{ transform: translateX(46px); }

    .anim.zoom { transform: scale(.9); }

    .anim.in-view { opacity: 1; transform: none; }



    @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

    .floaty { animation: floaty 5s ease-in-out infinite; }

    .floaty-2 { animation: floaty 7s ease-in-out infinite; }



    /* ════════ HEADER ════════ */

    .header {

      position: fixed;

      inset: 0 0 auto 0;

      z-index: 1000;

      padding: 20px 0;

      transition: background .3s, padding .3s, box-shadow .3s;

      will-change: transform;

    }

    .header.scrolled {

      background: rgba(251, 244, 232, .9);

      backdrop-filter: blur(16px);

      -webkit-backdrop-filter: blur(16px);

      padding: 12px 0;

      box-shadow: 0 6px 30px -12px rgba(120, 80, 30, .35);

    }

    .header-inner { display: flex; align-items: center; gap: 40px; }



    .logo { display: flex; align-items: center; gap: 11px; }

    .logo-mark {

      width: 46px; height: 46px;

      border-radius: 50%;

      background: var(--amber);

      color: #fff;

      display: flex; align-items: center; justify-content: center;

      font-size: 20px;

      box-shadow: 0 8px 20px -8px rgba(var(--amber-rgb), .9);

    }

    .logo-img { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; }

    .logo-text { font-family: var(--ff-display); font-weight: 600; font-size: 23px; letter-spacing: -.3px; }

    .logo-text b { color: var(--terracotta); font-weight: 600; }



    .nav { display: flex; gap: 34px; list-style: none; flex: 1; justify-content: center; }

    .nav a { font-size: 15px; font-weight: 500; color: var(--bark); transition: color .25s; position: relative; }

    .nav a::after {

      content: ''; position: absolute; left: 0; bottom: -6px;

      width: 0; height: 2px; background: var(--amber); transition: width .25s;

    }

    .nav a:hover { color: var(--amber-dark); }

    .nav a:hover::after { width: 100%; }



    .header-right { display: flex; align-items: center; gap: 22px; }

    .header-call { display: flex; align-items: center; gap: 11px; }

    .call-ico {

      width: 42px; height: 42px; border-radius: 50%;

      background: rgba(var(--amber-rgb), .14);

      color: var(--amber-dark);

      display: flex; align-items: center; justify-content: center; font-size: 15px;

    }

    .call-lbl { font-size: 11px; color: var(--bark-soft); line-height: 1.3; }

    .call-num { font-size: 15px; font-weight: 700; line-height: 1.3; }

    .header-btn {
      padding: 12px 26px;
      font-size: 14px;
      box-shadow:
        0 0 0 0 rgba(var(--amber-rgb), .34),
        0 12px 28px -9px rgba(var(--amber-rgb), .95);
      animation: headerOrderGlow 2.8s ease-in-out infinite;
    }

    .header-btn:hover,
    .header-btn:focus-visible {
      background: #25D366;
      color: #fff;
      transform: translateY(-3px);
      box-shadow:
        0 0 0 6px rgba(37, 211, 102, .16),
        0 16px 34px -9px rgba(37, 211, 102, .95);
    }

    .header-btn:active {
      background: #1DA851;
      transform: translateY(-1px) scale(.98);
      box-shadow:
        0 0 0 5px rgba(37, 211, 102, .18),
        0 10px 24px -10px rgba(37, 211, 102, .9);
    }

    @keyframes headerOrderGlow {
      0%, 100% {
        box-shadow:
          0 0 0 0 rgba(var(--amber-rgb), .30),
          0 12px 28px -9px rgba(var(--amber-rgb), .95);
      }
      50% {
        box-shadow:
          0 0 0 6px rgba(var(--amber-rgb), .12),
          0 16px 34px -8px rgba(var(--amber-rgb), 1);
      }
    }



    .nav-toggle { display: none; background: none; border: none; font-size: 24px; color: var(--bark); cursor: pointer; }



    /* photo vibe cards */

    .feat-photo { position: relative; min-height: 340px; padding: 0; border: none; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }

    .feat-bg { position: absolute; inset: 0; z-index: 0; background: #1a120c; }

    .feat-bg img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }

    .feat-bg-2 img { object-position: left center; }

    .feat-photo:hover .feat-bg img { transform: scale(1.08); }

    .feat-bg-night { background: radial-gradient(130% 110% at 72% 18%, #3c2a18, #120d08 72%); }

    .feat-bg-night .rider-img { width: auto; max-width: 90%; height: 82%; object-fit: contain; object-position: right bottom; margin-left: auto; transition: transform .8s ease; }

    .feat-photo:hover .feat-bg-night .rider-img { transform: scale(1.06); }

    .feat-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(22,14,9,.9) 0%, rgba(22,14,9,.22) 52%, rgba(22,14,9,.04) 100%); }

    .feat-photo .ico, .feat-photo h4, .feat-photo p { position: relative; z-index: 2; }

    .feat-photo .ico { position: absolute; top: 20px; left: 20px; margin: 0; }

    .glow-ico { animation: icoGlow 4s ease-in-out infinite, floaty 5s ease-in-out infinite; }

    .glow-ico-green { animation: icoGlowG 4s ease-in-out infinite, floaty 5s ease-in-out infinite; }

    @keyframes icoGlow { 0%,100% { box-shadow: 0 0 15px rgba(255,154,90,.7); } 50% { box-shadow: 0 0 30px rgba(255,154,90,1); } }

    @keyframes icoGlowG { 0%,100% { box-shadow: 0 0 15px rgba(120,200,80,.7); } 50% { box-shadow: 0 0 30px rgba(120,200,80,1); } }

    .feat-photo h4 { margin: 0 24px; font-size: 26px; color: #fff; background: linear-gradient(90deg, #ffe7a8, #ff9a3c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 12px rgba(255,154,90,.45)); }

    .feat-night h4 { background: linear-gradient(90deg, #cdf3a3, #62c23e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 12px rgba(120,200,80,.45)); }

    .feat-photo p { margin: 12px 22px 22px; color: #fff; background: rgba(18,11,7,.42); padding: 11px 15px; border-radius: 14px; font-weight: 500; font-size: 14px; }



    /* canva vibe cards */
    .bento-mini { grid-template-columns: 1fr 1fr; }
    @media (max-width: 640px) { }

    /* sun options menu */

    .sun-nav { position: relative; margin-right: auto; }

    .sun-btn { display: flex; align-items: center; gap: 10px; background: transparent; border: none; cursor: pointer; font-family: var(--ff-body); font-weight: 700; font-size: 15px; color: var(--bark); padding: 6px 12px 6px 6px; border-radius: 100px; transition: background .2s; }

    .sun-btn:hover { background: rgba(var(--amber-rgb), .1); }

    .logo-sun { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe08a, #ff9a3c 62%, #e8632e 100%); animation: sunGlow 5s ease-in-out infinite; flex-shrink: 0; }

    @keyframes sunGlow { 0%,100% { opacity:.7; } 50% { opacity:1; } }


    /* ===== coffee-shop upgrade sections ===== */
    .story { padding: 70px 0 90px; position: relative; overflow: hidden; }
    .story-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
    .story-photo { position: relative; }
    .story-photo img { width: 100%; border-radius: 26px; box-shadow: var(--shadow); display: block; }
    .story-photo::after { content: ""; position: absolute; inset: 0; border-radius: 26px; box-shadow: inset 0 0 0 8px rgba(255,255,255,.5); pointer-events: none; }
    .story-badge { position: absolute; left: 18px; bottom: 18px; background: rgba(255,253,248,.92); color: var(--terracotta); font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 100px; box-shadow: var(--shadow-sm); }
    .story-text p { color: var(--bark-soft); font-size: 16.5px; line-height: 1.8; margin: 16px 0; max-width: 520px; }
    .story-text .btn { margin-top: 14px; }
    .story-deco { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,224,138,.5), rgba(255,154,90,.18) 70%); filter: blur(2px); pointer-events: none; z-index: 0; }
    .story-deco.d1 { width: 120px; height: 120px; right: 8%; top: 12%; animation: floaty 6s ease-in-out infinite; }
    .story-deco.d2 { width: 70px; height: 70px; left: 44%; bottom: 8%; animation: floaty 8s ease-in-out infinite; }

    @media (max-width: 640px) {
      .story { padding-top: 34px; }
      .story-photo { margin-top: -8px; }
    }

    .stats { padding: 56px 0; background: linear-gradient(120deg, var(--terracotta), var(--amber-dark)); }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; color: #fff; }
    .stat .num { font-family: var(--ff-display); font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1; }
    .stat span { display: block; margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.85); font-weight: 500; }
    .stat + .stat { border-left: 1px solid rgba(255,255,255,.22); }

    /* COMBOS */
    .combos { padding: 100px 0 0; }
    .combos-head { text-align: center; max-width: 600px; margin: 0 auto 56px; }
    .combos-head .title-line { margin: 20px auto 0; }
    .combos-head .section-sub { margin: 16px auto 0; }
    .combos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 22px; }
    .combo {
      position: relative; display: flex; flex-direction: column;
      background: var(--card); border: 1px solid var(--border);
      border-radius: 24px; padding: 30px 24px 24px; overflow: hidden;
      box-shadow: var(--shadow-sm); transition: transform .35s, box-shadow .35s;
    }
    .combo::before { content:''; position:absolute; top:0; left:0; right:0; height:5px;
      background: linear-gradient(90deg, var(--amber), var(--terracotta)); }
    .combo:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
    .combo-save {
      position:absolute; top:14px; right:14px; z-index:3;
      display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
      min-width:58px; padding:8px 10px; border-radius:16px; color:#fff;
      background: linear-gradient(135deg,#F2683E,#C8531F);
      box-shadow: 0 8px 18px -6px rgba(200,83,31,.55);
    }
    .combo-save .amt { font-size:17px; font-weight:800; }
    .combo-save .lbl { font-size:8.5px; font-weight:700; letter-spacing:.8px; margin-top:3px; opacity:.95; white-space:nowrap; }
    .combo:hover .combo-save { animation: saveGlow 1s ease-in-out infinite; }
    @keyframes saveGlow { 0%,100%{ transform: scale(1) rotate(0); } 50%{ transform: scale(1.08) rotate(-2deg); } }
    .combo-icon {
      width:62px; height:62px; border-radius:18px; margin-bottom:16px;
      background: radial-gradient(circle at 50% 38%, #fff3df, #f6e3c6 72%);
      display:flex; align-items:center; justify-content:center;
      font-size:26px; color: var(--amber-dark); transition: transform .4s;
    }
    .combo:hover .combo-icon { transform: scale(1.08) rotate(-4deg); }
    .combo-tag { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color: var(--moss); margin-bottom:4px; }
    .combo-tag.nv { color: var(--terracotta); }
    .combo-time { display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
      font-size:11.5px; font-weight:600; color: var(--bark-soft);
      background: rgba(193,106,60,.10); padding:4px 11px; border-radius:100px; margin-bottom:16px; }
    .combo-time i { font-size:11px; color: var(--terracotta); }
    .combo h4 { font-family: var(--ff-display); font-size:21px; line-height:1.15; margin:0 0 10px; color: var(--bark); }
    .combo-items { font-size:14px; color: var(--bark-soft); line-height:1.55; flex:1; margin-bottom:20px; }
    .combo-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .combo-price { display:flex; align-items:baseline; gap:8px; }
    .combo-price .now { font-size:23px; font-weight:800; color: var(--amber-dark); }
    .combo-price .was { font-size:14px; color: var(--bark-soft); text-decoration:line-through; opacity:.65; }
    .combo-add {
      background: var(--amber-dark); color:#fff; border:none; cursor:pointer; white-space:nowrap;
      font-size:13px; font-weight:700; padding:10px 18px; border-radius:100px; transition: all .25s;
    }
    .combo-add:hover { background: var(--terracotta); transform: scale(1.05); }
    .combo-add i { margin-right:5px; }
    .combo-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 auto 44px; max-width:780px; }
    .combo-tab {
      background: var(--card); border:1px solid var(--border); color: var(--bark-soft);
      font-family: var(--ff-body); font-size:14px; font-weight:600; cursor:pointer;
      padding:9px 18px; border-radius:100px; transition: all .25s; white-space:nowrap;
    }
    .combo-tab i { margin-right:6px; opacity:.85; }
    .combo-tab:hover { border-color: var(--amber); color: var(--amber-dark); transform: translateY(-1px); }
    .combo-tab.active { background: var(--amber-dark); border-color: var(--amber-dark); color:#fff; box-shadow: var(--shadow-sm); }
    .combo-pop { animation: comboPop .42s cubic-bezier(.2,.7,.3,1) both; }
    @keyframes comboPop { from { opacity:0; transform: translateY(14px) scale(.97); } to { opacity:1; transform:none; } }

    .picks { padding: 100px 0; }
    .picks-head { text-align: center; max-width: 600px; margin: 0 auto 56px; }
    .picks-head .title-line { margin: 20px auto 0; }
    .picks-head .section-sub { margin: 16px auto 0; }
    .picks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
    .pick { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 26px 22px 22px; box-shadow: var(--shadow-sm); transition: transform .35s, box-shadow .35s; text-align: center; }
    .pick:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
    .pick-img { width: 130px; height: 130px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff3df, #f6e3c6 72%); display: flex; align-items: center; justify-content: center; transition: transform .4s; }
    .pick:hover .pick-img { transform: scale(1.06) rotate(-3deg); }
    .pick-img img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(120,80,30,.28)); }
    .pick-tag { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--moss); }
    .pick-tag.nv { color: var(--terracotta); }
    .pick h4 { font-family: var(--ff-display); font-size: 19px; font-weight: 600; margin: 3px 0 12px; }
    .pick-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
    .pick-price { font-size: 19px; font-weight: 700; color: var(--amber-dark); }
    .pick-add { background: rgba(var(--amber-rgb), .14); color: var(--amber-dark); border: none; cursor: pointer; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 100px; transition: all .25s; }
    .pick-add:hover { background: var(--amber); color: #fff; }


    /* M9.2 Signature Picks mini-title animation */
    .picks-head .script {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 4px 14px;
      border-radius: 999px;
      background: rgba(255,253,248,.55);
      animation: m92Float 3.8s ease-in-out infinite;
      text-shadow: 0 4px 16px rgba(193,106,60,.22);
      isolation: isolate;
    }

    .picks-head .script::before,
    .picks-head .script::after {
      content: "✦";
      font-family: var(--ff-body);
      font-size: 13px;
      line-height: 1;
      color: var(--amber);
      filter: drop-shadow(0 0 8px rgba(var(--amber-rgb), .7));
      animation: m92Sparkle 1.7s ease-in-out infinite;
    }

    .picks-head .script::after {
      content: "♥";
      color: var(--rose);
      animation-delay: .45s;
      filter: drop-shadow(0 0 8px rgba(227,148,168,.7));
    }

    .picks-head .script span {
      background: linear-gradient(90deg, var(--terracotta), var(--amber-dark), var(--rose), var(--terracotta));
      background-size: 220% auto;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: m92TextShine 3s linear infinite;
    }

    @keyframes m92Float {
      0%, 100% { transform: translateY(0) rotate(-1deg); }
      50% { transform: translateY(-6px) rotate(1deg); }
    }

    @keyframes m92Sparkle {
      0%, 100% { transform: scale(.9) rotate(0deg); opacity: .55; }
      50% { transform: scale(1.25) rotate(14deg); opacity: 1; }
    }

    @keyframes m92TextShine {
      0% { background-position: 0% center; }
      100% { background-position: 220% center; }
    }

    @media (prefers-reduced-motion: reduce) {
      .picks-head .script,
      .picks-head .script::before,
      .picks-head .script::after,
      .picks-head .script span {
        animation: none;
      }
    }



    /* M9P01 Wings image size adjustment */
    .m9p01-card .m9p01-img img {
      width: 110%;
      height: 110%;
      max-width: none;
      object-fit: contain;
      transform: scale(1.08);
    }

    .m9p01-card:hover .m9p01-img img {
      transform: scale(1.13) rotate(-3deg);
    }

    @media (max-width: 640px) {
      .m9p01-card .m9p01-img img {
        width: 114%;
        height: 114%;
        transform: scale(1.11);
      }

      .m9p01-card:hover .m9p01-img img {
        transform: scale(1.15) rotate(-3deg);
      }
    }

    /* M9P02 Classic Shawarma image size adjustment */
    .m9p02-card .m9p02-img img {
      width: 108%;
      height: 108%;
      max-width: none;
      object-fit: contain;
      transform: scale(1.08);
    }

    .m9p02-card:hover .m9p02-img img {
      transform: scale(1.13) rotate(-3deg);
    }

    @media (max-width: 640px) {
      .m9p02-card .m9p02-img img {
        width: 112%;
        height: 112%;
        transform: scale(1.10);
      }

      .m9p02-card:hover .m9p02-img img {
        transform: scale(1.14) rotate(-3deg);
      }
    }


    /* M11 preview buttons inside frame */
    .menu-preview-overlay-dual {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-align: center;
    }

    .menu-open-btn,
    .menu-preview-order-btn {
      border: 0;
      cursor: pointer;
      font-family: var(--ff-display);
      font-weight: 800;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    }

    .menu-preview-order-btn {
      padding: 12px 20px;
      background: rgba(255,255,255,.92);
      color: var(--bark);
      box-shadow: 0 14px 30px rgba(40,25,10,.18);
    }

    .menu-preview-order-btn:hover,
    .menu-preview-order-btn:focus {
      background: #25D366;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(37,211,102,.34);
    }

    @media (max-width: 640px) {
      .menu-preview-overlay-dual {
        gap: 10px;
      }

      .menu-preview-order-btn {
        padding: 10px 17px;
        font-size: 14px;
      }
    }


    /* M11.5 single collage preview */
    .menu-preview-single {
      position: relative;
    }

    .menu-preview-single::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, rgba(255,255,255,0) 34%, rgba(44,38,32,.10) 100%);
      pointer-events: none;
    }


    /* M11.5 mobile vertical preview frame */
    @media (max-width: 640px) {
      .menu-preview {
        aspect-ratio: 5 / 8;
      }

      .menu-preview-strip,
      .menu-preview-single {
        height: 100%;
      }

      .menu-preview-strip img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        transform: scale(1.12);
      }

      .menu-preview:hover .menu-preview-strip img {
        transform: scale(1.16);
      }
    }

    @media (max-width: 880px) {
      .story-grid { grid-template-columns: 1fr; gap: 32px; }
      .stats-grid { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
      .stat:nth-child(3) { border-left: none; }
    }

    .sun-caret { font-size: 11px; color: var(--bark-soft); transition: transform .25s; }

    .sun-btn.open .sun-caret { transform: rotate(180deg); }

    .sun-menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 236px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 1200; }

    .sun-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }

    .sun-menu a, .sun-menu button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; font-family: var(--ff-body); font-size: 15px; font-weight: 500; color: var(--bark); background: transparent; border: none; cursor: pointer; text-align: left; width: 100%; transition: background .2s, color .2s; }

    .sun-menu a:hover, .sun-menu button:hover { background: rgba(var(--amber-rgb), .12); color: var(--amber-dark); }

    .sun-menu a i, .sun-menu button i { width: 18px; text-align: center; color: var(--amber-dark); }

    .sun-menu-wa { margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; padding-top: 14px; }

    .sun-menu-wa, .sun-menu-wa i { color: #1da851; }



    /* ════════ HERO ════════ */

    .hero {

      position: relative;

      min-height: 100vh;

      display: flex;

      align-items: center;

      padding: 160px 0 90px;

      overflow: hidden;

      background:

        linear-gradient(to bottom, rgba(251,244,232,.55) 0%, rgba(251,244,232,.25) 38%, rgba(251,244,232,.92) 95%),

        linear-gradient(115deg, rgba(240,194,162,.55), rgba(224,162,78,.30) 60%, rgba(167,174,87,.25)),

        var(--peach);

    }



    /* animated sunset sky */

    .hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .hero.is-paused .hero-sun,
    .hero.is-paused .hero-moon,
    .hero.is-paused .cloud,
    .hero.is-paused .kona-cloud-field,
    .hero.is-paused .kona-random-cloud { animation-play-state: paused !important; }

    .hero-sun {

      position: absolute; left: 74%; top: 30%;

      width: clamp(150px, 22vw, 290px); height: clamp(150px, 22vw, 290px);

      transform: translate(-50%, -50%); border-radius: 50%;

      background: radial-gradient(circle at 50% 42%, #fff6e0 0%, #ffd98f 40%, var(--amber) 74%, var(--terracotta) 100%);

      box-shadow: 0 0 54px 18px rgba(224,162,78,.38), 0 0 112px 52px rgba(240,194,162,.28);

      animation: sunBreathe 7s ease-in-out infinite, celestialDrift 30s ease-in-out infinite; opacity: .9;

      overflow: hidden;

    }

@keyframes sunBreathe {

      0%,100% { box-shadow: 0 0 54px 18px rgba(224,162,78,.38), 0 0 112px 52px rgba(240,194,162,.28); }

      50%     { box-shadow: 0 0 68px 24px rgba(224,162,78,.5), 0 0 138px 68px rgba(240,194,162,.36); }

    }

    .cloud { position: absolute; height: 26px; border-radius: 999px; background: rgba(255,255,255,.72); filter: blur(1.2px); }

    .cloud::before { content: ""; position: absolute; top: -12px; left: 22%; width: 45%; height: 24px; border-radius: 999px; background: inherit; }

    .cloud-1 { width: 180px; top: 19%; animation: drift 52s linear infinite; }

    .cloud-2 { width: 130px; top: 31%; opacity: .82; animation: drift 70s linear infinite; animation-delay: -28s; }

    .cloud-3 { width: 220px; top: 12%; opacity: .6; animation: drift 90s linear infinite; animation-delay: -48s; }

    @keyframes drift { from { left: -280px; } to { left: 110%; } }

    @media (prefers-reduced-motion: reduce) { .hero-sun, .hero-moon, .cloud { animation: none; } }



    .hero-inner { position: relative; z-index: 2; max-width: 680px; }



    .hero-badge {

      display: inline-flex; align-items: center; gap: 9px;

      background: rgba(255, 253, 248, .8);

      border: 1px solid var(--border);

      padding: 8px 16px 8px 10px;

      border-radius: 100px;

      font-size: 13px; font-weight: 500;

      margin-bottom: 24px;

      box-shadow: var(--shadow-sm);

    }

    .hero-badge .stars { color: var(--amber); letter-spacing: 1px; }

    .hero-badge b { font-weight: 700; }



    .hero h1 {

      font-family: var(--ff-display);

      font-size: clamp(52px, 8vw, 100px);

      font-weight: 600;

      line-height: .98;

      letter-spacing: -2px;

      color: var(--bark);

      margin-bottom: 8px;

    }

    .hero h1 .accent { color: var(--terracotta); font-style: italic; }



    .hero-tag {

      font-family: var(--ff-script);

      font-size: clamp(26px, 3.4vw, 38px);

      color: var(--amber-dark);

      margin-bottom: 18px;

    }



    .hero p.lead {

      font-size: 18px;

      color: var(--bark);

      max-width: 520px;

      margin-bottom: 34px;

    }



    .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }



    .hero-meta { display: flex; gap: 30px; flex-wrap: wrap; }

    .hero-meta .item {

      display: flex; align-items: center; gap: 11px;

      position: relative;

      padding: 6px 8px 6px 6px;

      border-radius: 16px;

      cursor: pointer;

      transition: background .28s ease, transform .28s ease, box-shadow .28s ease;

      -webkit-tap-highlight-color: transparent;

    }

    .hero-meta .item:focus-visible { outline: 2px solid rgba(var(--chip-rgb, 224,162,78), .55); outline-offset: 3px; }

    .hero-meta .ico {

      width: 40px; height: 40px; border-radius: 12px;

      background: rgba(255,253,248,.75);

      border: 1px solid var(--border);

      display: flex; align-items: center; justify-content: center;

      color: var(--chip, var(--terracotta)); font-size: 16px;

      transition: background .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease, border-color .28s ease;

    }

    .hero-meta .item:hover,
    .hero-meta .item:focus,
    .hero-meta .item:active {

      background: rgba(var(--chip-rgb, 224,162,78), .13);

      transform: translateY(-2px);

      box-shadow: 0 10px 24px -16px rgba(var(--chip-rgb, 224,162,78), .85);

    }

    .hero-meta .item:hover .ico,
    .hero-meta .item:focus .ico,
    .hero-meta .item:active .ico {

      background: rgba(var(--chip-rgb, 224,162,78), .18);

      border-color: rgba(var(--chip-rgb, 224,162,78), .38);

      color: var(--chip);

      transform: scale(1.08);

      box-shadow: 0 0 0 6px rgba(var(--chip-rgb, 224,162,78), .10), 0 0 22px rgba(var(--chip-rgb, 224,162,78), .65);

    }

    .hero-meta .meta-time { --chip: #E0A24E; --chip-rgb: 224, 162, 78; }

    .hero-meta .meta-electric { --chip: #25D366; --chip-rgb: 37, 211, 102; }

    .hero-meta .meta-seat { --chip: #4A90E2; --chip-rgb: 74, 144, 226; }

    .hero-meta .k { font-size: 14px; font-weight: 700; line-height: 1.2; }

    .hero-meta .s { font-size: 12px; color: var(--bark-soft); }



    /* ════════ GALLERY MARQUEE ════════ */

    .gallery { padding: 0 0 10px; margin-top: -40px; position: relative; z-index: 3; contain: layout paint; }

    .marquee-row { display: flex; gap: 18px; width: max-content; animation: slideX 50s linear infinite; transform: translateZ(0); will-change: transform; }

    .gallery:hover .marquee-row,
    .gallery.is-paused .marquee-row { animation-play-state: paused; }

    @keyframes slideX { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    .gphoto {

      width: 240px; border-radius: 22px; overflow: hidden;

      flex-shrink: 0; box-shadow: var(--shadow-sm); border: 1px solid var(--border);

      background: var(--card); display: flex; flex-direction: column; position: relative; isolation: isolate;

    }

    .gphoto::before {
      content: '';
      position: absolute;
      inset: 14px 14px 44px;
      border-radius: 18px;
      background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.85) 38%, rgba(255,255,255,.42) 68%, rgba(255,255,255,0) 82%);
      pointer-events: none;
      z-index: 0;
    }

    .gphoto img { width: 100%; height: 170px; object-fit: contain; padding: 16px 16px 6px; transition: transform .5s; position: relative; z-index: 1; filter: drop-shadow(0 8px 14px rgba(120,80,30,.18)); }

    .gphoto.clean-cutout img { mix-blend-mode: multiply; }

    .gphoto:hover img { transform: scale(1.07) rotate(-2deg); }

    .glabel { text-align: center; font-family: var(--ff-display); font-weight: 600; font-size: 16px; padding: 0 10px 16px; color: var(--bark); position: relative; z-index: 1; }

    .gphoto:nth-child(3n+1) { background: #FFF4E0; }

    .gphoto:nth-child(3n+2) { background: #F4F1DE; }

    .gphoto:nth-child(3n)   { background: #FBEDE6; }



    

    /* Updated M4 gallery using user-provided transparent cutout sprites */
    .gallery .gphoto.sprite-card {
      width: 232px;
      min-height: 214px;
      justify-content: center;
    }

    .gallery .gphoto.sprite-card::before {
      inset: 14px;
      border-radius: 18px;
      background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.82) 46%, rgba(255,255,255,.26) 74%, rgba(255,255,255,0) 84%);
    }

    .gallery .gphoto.sprite-card img {
      height: 182px;
      padding: 14px;
      object-fit: contain;
    }

    @media (max-width: 640px) {
      .gallery .gphoto.sprite-card {
        width: 198px;
        min-height: 188px;
      }

      .gallery .gphoto.sprite-card img {
        height: 156px;
        padding: 12px;
      }
    }


    /* ════════ WHY (bento) ════════ */

    .why { padding: 100px 0 80px; }

    .why-head { max-width: 640px; margin-bottom: 56px; }

    .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

    /* Animated full-page vibe image */
    .vibes-full {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 8px 40px rgba(0,0,0,.35);
      transition: box-shadow .6s ease;
    }
    .vibes-full:hover {
      box-shadow: 0 16px 60px rgba(255,140,0,.25), 0 8px 40px rgba(0,0,0,.4);
    }
    .vibes-full-img {
      width: 100%;
      display: block;
      border-radius: 24px;
      transition: transform 1.2s cubic-bezier(.25,.46,.45,.94), filter .8s ease;
    }
    .vibes-full:hover .vibes-full-img {
      transform: scale(1.025);
      filter: brightness(1.06) saturate(1.1);
    }
    .vibes-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 90%, rgba(255,140,0,.18) 0%, transparent 65%);
      pointer-events: none;
      opacity: 0;
      transition: opacity .8s ease;
      border-radius: 24px;
    }
    .vibes-full:hover .vibes-glow { opacity: 1; }
    .vibes-shimmer {
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
      background-size: 200% 100%;
      pointer-events: none;
      opacity: 0;
      transition: opacity .4s;
    }
    .vibes-full:hover .vibes-shimmer {
      opacity: 1;
      animation: shimmer-sweep 1.6s ease forwards;
    }
    @keyframes shimmer-sweep {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }



    .feat {

      background: var(--card);

      border: 1px solid var(--border);

      border-radius: 24px;

      padding: 32px 28px;

      box-shadow: var(--shadow-sm);

      transition: transform .35s, box-shadow .35s;

      position: relative;

      overflow: hidden;

    }

    .feat:hover { transform: translateY(-8px); box-shadow: var(--shadow); }

    .feat .ico {

      width: 58px; height: 58px; border-radius: 16px;

      display: flex; align-items: center; justify-content: center;

      font-size: 24px; color: #fff; margin-bottom: 20px;

    }

    .feat h4 { font-family: var(--ff-display); font-size: 23px; font-weight: 600; margin-bottom: 9px; }

    .feat p { color: var(--bark-soft); font-size: 15px; }

    .feat .feat-img { margin: 20px -28px -32px; height: 150px; overflow: hidden; }

    .feat .feat-img img { width: 100%; height: 100%; object-fit: cover; }

    .feat .feat-img-pad { display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, #FFF4E0, #F4F1DE); }

    .feat .feat-img-pad img { width: auto; height: 130px; object-fit: contain; }



    .bg-amber { background: var(--amber); }

    .bg-sage  { background: var(--sage); }

    .bg-rose  { background: var(--rose); }

    .bg-terra { background: var(--terracotta); }

    .bg-moss  { background: var(--moss); }

    .bg-peach { background: var(--amber-dark); }



    /* ════════ MENU ════════ */

    .menu { padding: 90px 0; background: var(--cream-2); border-radius: 48px; }

    .menu-head {

      display: flex; align-items: flex-end; justify-content: space-between;

      gap: 30px; flex-wrap: wrap; margin-bottom: 44px;

    }

    .menu-filters { display: flex; gap: 8px; flex-wrap: wrap; }

    .menu-filters button {

      font-family: var(--ff-body); font-size: 14px; font-weight: 500;

      color: var(--bark-soft); background: transparent;

      padding: 10px 22px; border-radius: 100px;

      border: 1.5px solid var(--border); cursor: pointer; transition: all .25s;

    }

    .menu-filters button:hover { color: var(--bark); border-color: var(--amber); }

    .menu-filters button.active { background: var(--amber); border-color: var(--amber); color: #fff; }



    .menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

    .dish { transition: opacity .4s, transform .4s; }

    .dish.hide { display: none; }

    .dish.pop { animation: pop .45s ease both; }

    @keyframes pop { from { opacity: 0; transform: scale(.93) translateY(12px); } to { opacity: 1; transform: none; } }



    .dish-card {

      background: var(--card); border: 1px solid var(--border);

      border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm);

      transition: transform .35s, box-shadow .35s; height: 100%;

      display: flex; flex-direction: column;

    }

    .dish-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

    .dish-thumb { height: 168px; overflow: hidden; position: relative; }

    .dish-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }

    .dish-card:hover .dish-thumb img { transform: scale(1.08); }

    .dish-tag {

      position: absolute; top: 12px; left: 12px;

      background: rgba(255,253,248,.92); color: var(--terracotta);

      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;

      padding: 5px 12px; border-radius: 100px;

    }

    .dish-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }

    .dish-body h5 { font-family: var(--ff-display); font-size: 20px; font-weight: 600; }

    .dish-body .desc { font-size: 13px; color: var(--bark-soft); margin: 4px 0 16px; flex: 1; }

    .dish-foot { display: flex; align-items: center; justify-content: space-between; }

    .dish-price { font-size: 20px; font-weight: 700; color: var(--amber-dark); }

    .dish-add {

      background: rgba(var(--amber-rgb), .14); color: var(--amber-dark);

      border: none; cursor: pointer; font-size: 13px; font-weight: 700;

      padding: 9px 16px; border-radius: 100px; transition: all .25s;

      display: inline-flex; align-items: center; gap: 6px;

    }

    .dish-add:hover { background: var(--amber); color: #fff; }



    /* menu preview → PDF */

    .menu-preview { display: block; position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); }

    .menu-preview-strip { display: block; background: linear-gradient(180deg, rgba(255,247,235,.92), rgba(246,234,217,.96)); }

    .menu-preview-strip img { width: 100%; height: 360px; display: block; object-fit: cover; object-position: center center; transition: transform .7s ease; transform: scale(1.08); filter: saturate(1.03) contrast(1.02) brightness(1.02); }

    .menu-preview:hover .menu-preview-strip img { transform: scale(1.12); }

    .menu-preview-overlay {

      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;

      background: linear-gradient(to bottom, rgba(44,38,32,.06), rgba(44,38,32,.5));

      transition: background .3s;

    }

    .menu-preview:hover .menu-preview-overlay { background: linear-gradient(to bottom, rgba(44,38,32,.18), rgba(44,38,32,.58)); }

    .menu-open-btn {

      display: inline-flex; align-items: center; gap: 11px;

      background: var(--amber); color: #fff; font-weight: 700; font-size: 18px;

      padding: 17px 38px; border-radius: 100px; box-shadow: 0 14px 32px -10px rgba(0,0,0,.45);

      transition: transform .3s, background .3s;

    }

    .menu-preview:hover .menu-open-btn { transform: translateY(-3px); background: var(--amber-dark); }

    @media (max-width: 640px) {

      .menu-preview-strip img { width: 100%; height: 220px; }

      /* single-image M11.5 preview: no extra menu pages */

    }



    /* ════════ VISIT ════════ */

    .visit { padding: 100px 0 60px; text-align: center; overflow: hidden; }

    .visit-head { max-width: 620px; margin: 0 auto 14px; }

    .visit-head .title-line { margin: 20px auto 0; }

    .visit-head .section-sub { margin-left: auto; margin-right: auto; }



    .ribbon { overflow: hidden; padding: 26px 0 6px; user-select: none; }

    .ribbon-row { display: flex; gap: 46px; width: max-content; animation: slideX 26s linear infinite; }

    .ribbon-row span {

      font-family: var(--ff-display);

      font-size: clamp(46px, 7vw, 96px); font-weight: 600; line-height: 1;

      letter-spacing: -1px; white-space: nowrap;

      color: transparent; -webkit-text-stroke: 1.4px rgba(193, 106, 60, .35);

    }

    .ribbon-row span.fill { color: var(--amber); -webkit-text-stroke: 0; }



    .visit-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 980px; margin: 40px auto 0; text-align: left; }

    .vcard {

      background: var(--card); border: 1px solid var(--border); border-radius: 22px;

      padding: 30px 28px; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s;

    }

    .vcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

    .vcard .ico {

      width: 52px; height: 52px; border-radius: 14px; background: rgba(var(--amber-rgb), .14);

      color: var(--amber-dark); display: flex; align-items: center; justify-content: center;

      font-size: 20px; margin-bottom: 18px;

    }

    .vcard h4 { font-family: var(--ff-display); font-size: 21px; font-weight: 600; margin-bottom: 8px; }

    .vcard p { color: var(--bark-soft); font-size: 15px; }

    .vcard p b { color: var(--bark); font-weight: 700; }



    /* ════════ ORDER CTA ════════ */

    .order { padding: 80px 0; }

    .order-box {

      position: relative;

      background: linear-gradient(120deg, var(--terracotta), var(--amber-dark));

      border-radius: 32px; padding: 70px 60px; overflow: hidden;

      display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center;

      box-shadow: var(--shadow);

    }

    .order-box::before {

      content: ''; position: absolute; right: -120px; top: -120px;

      width: 360px; height: 360px; border-radius: 50%;

      background: rgba(255,255,255,.12);

    }

    .order-box::after {

      content: ''; position: absolute; left: -80px; bottom: -140px;

      width: 300px; height: 300px; border-radius: 50%;

      background: rgba(255,255,255,.08);

    }

    .order-copy { position: relative; z-index: 2; color: #fff; }

    .order-copy .script { color: rgba(255,255,255,.85); }

    .order-copy h2 { font-family: var(--ff-display); font-size: clamp(30px, 4vw, 46px); font-weight: 600; line-height: 1.1; margin: 6px 0 14px; }

    .order-copy p { color: rgba(255,255,255,.9); font-size: 17px; margin-bottom: 28px; max-width: 440px; }

    .order-num { position: relative; z-index: 2; text-align: center; color: #fff; }

    .order-num .ico { font-size: 50px; margin-bottom: 14px; }

    .order-num .big { font-size: 30px; font-weight: 700; letter-spacing: .5px; }

    .order-num .s { font-size: 14px; opacity: .85; }



    /* ════════ REVIEWS ════════ */

    .reviews { padding: 80px 0 100px; }

    .reviews-head { text-align: center; max-width: 560px; margin: 0 auto 50px; }

    .reviews-head .title-line { margin: 20px auto 0; }

    .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

    .review {

      background: var(--card); border: 1px solid var(--border); border-radius: 22px;

      padding: 30px 28px; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s;

    }

    .review:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

    .review .stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }

    .review p { font-size: 15px; color: var(--bark); margin-bottom: 22px; }

    .review .who { display: flex; align-items: center; gap: 12px; }

    .review .av {

      width: 46px; height: 46px; border-radius: 50%;

      display: flex; align-items: center; justify-content: center;

      font-family: var(--ff-display); font-weight: 600; color: #fff; font-size: 17px;

    }

    .review .nm { font-weight: 700; font-size: 15px; }

    .review .rl { font-size: 13px; color: var(--bark-soft); }



    /* ════════ FINAL CTA ════════ */

    .final {

      position: relative; text-align: center; padding: 120px 24px 130px; overflow: hidden;

      background:

        linear-gradient(to bottom, rgba(251,244,232,.65), rgba(251,244,232,.9)),

        linear-gradient(120deg, rgba(240,194,162,.6), rgba(224,162,78,.4)),

        var(--peach);

      border-radius: 48px; margin: 0 16px;

    }

    .final-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }

    .final h2 { font-family: var(--ff-display); font-size: clamp(34px, 5vw, 60px); font-weight: 600; line-height: 1.08; letter-spacing: -1px; margin: 8px 0 16px; }

    .final p { font-size: 18px; color: var(--bark); margin-bottom: 32px; }



    /* ════════ FOOTER ════════ */

    .footer { padding: 70px 0 36px; }

    .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 50px; }

    .footer .logo { margin-bottom: 18px; }

    .footer-about { color: var(--bark-soft); font-size: 15px; max-width: 280px; }

    .footer-socials { display: flex; gap: 12px; margin-top: 20px; }

    .footer-socials a {

      width: 42px; height: 42px; border-radius: 50%;

      background: var(--card); border: 1px solid var(--border);

      display: flex; align-items: center; justify-content: center;

      color: var(--bark); font-size: 16px; transition: all .25s;

    }

    .footer-socials a:hover { background: var(--amber); color: #fff; transform: translateY(-3px); border-color: var(--amber); }

    .footer-col h5 { font-family: var(--ff-display); font-size: 18px; font-weight: 600; margin-bottom: 18px; }

    .footer-col ul { list-style: none; }

    .footer-col li { margin-bottom: 11px; }

    .footer-col a, .footer-col span { color: var(--bark-soft); font-size: 15px; transition: color .25s; }

    .footer-col a:hover { color: var(--amber-dark); }

    .footer-bottom {

      border-top: 1px solid var(--border); padding-top: 26px;

      display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;

      color: var(--bark-soft); font-size: 14px;

    }

    .footer-bottom .heart { color: var(--terracotta); }




    .vibes-mobile-stack { display: none; }
    .vibe-mobile-card {
      position: relative;
      overflow: hidden;
      border-radius: 26px;
      background: var(--card);
      border: 1px solid rgba(125, 85, 50, .10);
      box-shadow: var(--shadow-sm);
    }
    .vibe-mobile-card img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* ════════ RESPONSIVE ════════ */

    @media (max-width: 1024px) {

      .nav, .header-call { display: none; }

      .nav-toggle { display: block; }

      .bento { grid-template-columns: repeat(2, 1fr); }

      .menu-grid { grid-template-columns: repeat(3, 1fr); }

      .visit-cards, .reviews-grid { grid-template-columns: 1fr; }

      .order-box { grid-template-columns: 1fr; text-align: center; }

      .order-copy p { margin-left: auto; margin-right: auto; }

      .footer-grid { grid-template-columns: 1fr 1fr; }

    }

    @media (max-width: 640px) {

      .bento { grid-template-columns: 1fr; }
      .menu-grid { grid-template-columns: 1fr 1fr; }
      .vibes-full { display: none; }
      .vibes-mobile-stack { display: grid; gap: 16px; margin-top: 22px; }

      .menu-grid { gap: 14px; }

      .footer-grid { grid-template-columns: 1fr; }

      .gphoto { width: 220px; height: 165px; }

      .menu { border-radius: 28px; }

      .hero { padding-top: 130px; }

      .order-box { padding: 46px 28px; }

    }

    @media (max-width: 440px) {

      .menu-grid { grid-template-columns: 1fr; }

    }

  
    /* M11.5 mobile full-image fit fix */
    @media (max-width: 640px) {
      .menu-preview {
        aspect-ratio: 2 / 3;
      }

      .menu-preview-single,
      .menu-preview-single picture {
        width: 100%;
        height: 100%;
        display: block;
      }

      .menu-preview-strip img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        transform: none;
        background: linear-gradient(180deg, rgba(255,247,235,.96), rgba(246,234,217,.98));
      }

      .menu-preview:hover .menu-preview-strip img {
        transform: none;
      }
    }


    /* M10.5 mobile-only replacement visual */
    .vibes-mobile-single {
      display: none;
    }

    .vibes-mobile-single img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 26px;
      border: 1px solid rgba(125, 85, 50, .10);
      box-shadow: var(--shadow-sm);
      background: var(--card);
    }

    @media (max-width: 640px) {
      .vibes-full {
        display: none !important;
      }

      .vibes-mobile-single {
        display: block !important;
        margin-top: 22px;
      }
    }

    @media (min-width: 641px) {
      .vibes-mobile-single {
        display: none !important;
      }
    }



    /* M11.11 Quick Order Chats */
    .quick-order {
      padding: 34px 0 8px;
    }

    .quick-order-head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 26px;
    }

    .chat-card-stack {
      display: grid;
      gap: 18px;
    }

    .chat-order-card {
      position: relative;
      border-radius: 30px;
      background: linear-gradient(180deg, rgba(255,250,245,.98), rgba(248,239,228,.98));
      border: 1px solid rgba(125, 85, 50, .10);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      padding: 18px;
    }

    .chat-order-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top right, rgba(var(--amber-rgb), .14), transparent 40%);
      pointer-events: none;
    }

    .chat-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }

    .chat-card-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      color: var(--bark);
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .chat-card-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(37, 211, 102, .13);
      color: #127c42;
      font-weight: 800;
      font-size: 12px;
    }

    .chat-window {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.54));
      border: 1px solid rgba(125, 85, 50, .08);
    }

    .chat-bubble {
      max-width: 84%;
      padding: 11px 14px;
      border-radius: 18px;
      font-size: 15px;
      line-height: 1.45;
      box-shadow: 0 10px 24px rgba(40,25,10,.06);
    }

    .chat-bubble.user {
      align-self: flex-end;
      background: linear-gradient(180deg, #dcf8c6, #c8f2ab);
      color: #173b1d;
      border-bottom-right-radius: 6px;
    }

    .chat-bubble.cafe {
      align-self: flex-start;
      background: rgba(255,255,255,.95);
      color: var(--bark);
      border-bottom-left-radius: 6px;
    }

    .chat-bubble.status {
      background: linear-gradient(180deg, rgba(var(--amber-rgb), .18), rgba(255,255,255,.96));
      border: 1px solid rgba(var(--amber-rgb), .22);
    }

    .chat-order-note {
      position: relative;
      z-index: 1;
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .chat-order-note p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
      flex: 1 1 320px;
    }

    .chat-order-btn {
      border: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 18px;
      border-radius: 999px;
      background: #25D366;
      color: #fff;
      font-weight: 800;
      box-shadow: 0 14px 32px rgba(37, 211, 102, .26);
      transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
      margin-left: auto;
      white-space: nowrap;
    }

    .chat-order-btn:hover,
    .chat-order-btn:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 18px 38px rgba(37, 211, 102, .34);
      filter: saturate(1.04);
    }

    .chat-order-btn i {
      font-size: 18px;
    }


    /* M4 gallery closer to hero info chips */
    .gallery {
      margin-top: -34px;
      padding-top: 0;
    }

    @media (max-width: 640px) {
      .gallery {
        margin-top: -42px;
        padding-top: 0;
      }
    }


    

    /* M10.8 moving honest-food cards below M4 */
    .honest-food {
      padding: 28px 0 28px;
      background: transparent;
    }

    .honest-head {
      margin: 0 auto 20px;
    }

    .honest-marquee {
      overflow: hidden;
      position: relative;
      padding: 8px 0 18px;
      contain: layout paint;
    }

    .honest-marquee-row {
      display: flex;
      gap: 18px;
      width: max-content;
      animation: slideX 80s linear infinite;
      will-change: transform;
      transform: translateZ(0);
    }

    .honest-food:hover .honest-marquee-row {
      animation-play-state: paused;
    }

    .honest-marquee-row .honest-card {
      flex: 0 0 320px;
      width: 320px;
      min-height: 360px;
      scroll-snap-align: unset;
    }

    @media (max-width: 640px) {
      .honest-food {
        padding: 24px 0 24px;
      }

      .honest-head {
        margin: 0 auto 16px;
      }

      .honest-marquee {
        padding: 6px 0 14px;
      }

      .honest-marquee-row {
        gap: 14px;
        animation-duration: 70s;
      }

      .honest-marquee-row .honest-card {
        flex: 0 0 284px;
        width: 284px;
        min-height: 342px;
      }
    }

    /* M10.8 Honest Food Interactive Cards */
    .honest-food {
      padding: 78px 0 64px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 8%, rgba(var(--amber-rgb), .12), transparent 34%),
        radial-gradient(circle at 90% 10%, rgba(37,211,102,.09), transparent 32%);
    }
    .honest-head {
      text-align: center;
      max-width: 790px;
      margin: 0 auto 36px;
    }
    .honest-head .section-sub {
      margin-left: auto;
      margin-right: auto;
    }
    .honest-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(260px, 1fr));
      gap: 18px;
      overflow-x: auto;
      padding: 8px 4px 18px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .honest-grid::-webkit-scrollbar {
      height: 8px;
    }
    .honest-grid::-webkit-scrollbar-thumb {
      background: rgba(125, 85, 50, .22);
      border-radius: 999px;
    }
    .honest-card {
      min-height: 360px;
      border-radius: 30px;
      padding: 22px;
      background: linear-gradient(180deg, rgba(255,250,244,.98), rgba(248,237,224,.96));
      border: 1px solid rgba(125,85,50,.12);
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
      scroll-snap-align: center;
      cursor: pointer;
      transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
      isolation: isolate;
    }
    .honest-card::before {
      content: "";
      position: absolute;
      inset: -90px -80px auto auto;
      width: 180px;
      height: 180px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(var(--amber-rgb), .22), transparent 65%);
      transition: transform .45s ease, opacity .45s ease;
      opacity: .8;
      z-index: -1;
    }
    .honest-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 48%, transparent 62%);
      transform: translateX(-130%);
      transition: transform .75s ease;
      pointer-events: none;
    }
    .honest-card:hover,
    .honest-card:focus-within,
    .honest-card.is-open {
      transform: translateY(-8px);
      box-shadow: var(--shadow-md);
      border-color: rgba(var(--amber-rgb), .34);
    }
    .honest-card:hover::before,
    .honest-card:focus-within::before,
    .honest-card.is-open::before {
      transform: scale(1.25) translate(-12px, 12px);
      opacity: 1;
    }
    .honest-card:hover::after,
    .honest-card:focus-within::after,
    .honest-card.is-open::after {
      transform: translateX(130%);
    }
    .honest-icon {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      background: rgba(255,255,255,.74);
      color: var(--amber);
      font-size: 24px;
      box-shadow: 0 12px 28px rgba(70,45,20,.08);
      margin-bottom: 16px;
      transition: transform .35s ease, color .35s ease;
    }
    .honest-card:hover .honest-icon,
    .honest-card:focus-within .honest-icon,
    .honest-card.is-open .honest-icon {
      transform: rotate(-6deg) scale(1.08);
      color: #25D366;
    }
    .honest-kicker {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.7);
      color: var(--bark-soft);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .honest-title {
      font-family: var(--ff-display);
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1;
      margin: 0 0 14px;
      color: var(--bark);
      position: relative;
      display: inline-block;
      animation: honestTitleFloat 4.2s ease-in-out infinite;
    }
    .honest-title span {
      background: linear-gradient(90deg, var(--bark), var(--amber), var(--bark));
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: honestTitleShine 3.8s ease-in-out infinite;
    }
    .honest-title::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -7px;
      width: 56%;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--amber), rgba(37,211,102,.7));
      transform-origin: left;
      transform: scaleX(.45);
      transition: transform .35s ease;
    }
    .honest-card:hover .honest-title::after,
    .honest-card:focus-within .honest-title::after,
    .honest-card.is-open .honest-title::after {
      transform: scaleX(1);
    }
    @keyframes honestTitleShine {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    @keyframes honestTitleFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    .honest-short {
      color: var(--bark);
      font-weight: 700;
      line-height: 1.45;
      margin: 18px 0 12px;
    }
    .honest-more {
      color: var(--muted);
      line-height: 1.55;
      font-size: 14px;
      max-height: 0;
      opacity: 0;
      transform: translateY(8px);
      overflow: hidden;
      transition: max-height .45s ease, opacity .35s ease, transform .35s ease;
    }
    .honest-card:hover .honest-more,
    .honest-card:focus-within .honest-more,
    .honest-card.is-open .honest-more {
      max-height: 280px;
      opacity: 1;
      transform: translateY(0);
    }
    .honest-tap {
      margin-top: 18px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--amber);
      font-weight: 900;
      font-size: 13px;
    }
    .honest-tap i {
      transition: transform .3s ease;
    }
    .honest-card:hover .honest-tap i,
    .honest-card:focus-within .honest-tap i,
    .honest-card.is-open .honest-tap i {
      transform: translateX(4px);
    }
    @media (min-width: 900px) {
      .honest-grid {
        grid-template-columns: repeat(4, 1fr);
        overflow-x: visible;
      }
      .honest-card:nth-child(1),
      .honest-card:nth-child(7) {
        grid-column: span 2;
      }
    }
    @media (max-width: 640px) {
      .honest-food {
        padding: 58px 0 48px;
      }
      .honest-grid {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
        gap: 16px;
        padding: 0;
      }
      .honest-card {
        min-height: auto;
        padding: 20px;
      }
      .honest-title {
        font-size: 29px;
      }
      .honest-card.is-open .honest-more {
        max-height: 340px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .honest-title,
      .honest-title span {
        animation: none;
      }
    }


    /* Force moving honest cards to be clearly visible below M4 */
    #honest-food {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      position: relative !important;
      z-index: 5 !important;
      margin-top: 8px !important;
      padding-top: 34px !important;
      padding-bottom: 42px !important;
      background:
        radial-gradient(circle at 12% 8%, rgba(var(--amber-rgb), .10), transparent 34%),
        linear-gradient(180deg, rgba(255,248,238,.78), rgba(255,255,255,.35)) !important;
    }

    #honest-food .honest-head,
    #honest-food .honest-marquee,
    #honest-food .honest-marquee-row,
    #honest-food .honest-card {
      visibility: visible !important;
      opacity: 1 !important;
    }

    #honest-food .honest-card {
      transform: none;
      display: block !important;
    }

    #honest-food .honest-card:hover,
    #honest-food .honest-card:focus-within,
    #honest-food .honest-card.is-open {
      transform: translateY(-8px);
    }

    #honest-food .honest-marquee {
      width: 100%;
      overflow: hidden;
    }

    #honest-food .honest-marquee-row {
      display: flex !important;
      flex-wrap: nowrap !important;
      animation: slideX 80s linear infinite !important;
    }

    #honest-food .honest-title,
    #honest-food .honest-title span {
      visibility: visible !important;
      opacity: 1 !important;
    }

    @media (max-width: 640px) {
      #honest-food {
        margin-top: 4px !important;
        padding-top: 26px !important;
        padding-bottom: 34px !important;
      }
    }


    /* M8 Combos compact layout */
    .combos-grid {
      gap: 14px;
    }

    .combo {
      padding: 16px !important;
      border-radius: 22px !important;
      min-height: auto !important;
    }

    .combo-icon {
      width: 42px !important;
      height: 42px !important;
      font-size: 18px !important;
      margin-bottom: 10px !important;
      border-radius: 15px !important;
    }

    .combo h4 {
      font-size: 19px !important;
      line-height: 1.05 !important;
      margin-bottom: 7px !important;
    }

    .combo-items {
      font-size: 13px !important;
      line-height: 1.35 !important;
      margin-bottom: 12px !important;
    }

    .combo-save {
      transform: scale(.78);
      transform-origin: top right;
    }

    .combo-foot {
      gap: 8px !important;
      align-items: center !important;
    }

    .combo-price .now {
      font-size: 18px !important;
    }

    .combo-price .was {
      font-size: 12px !important;
    }

    .combo-add {
      padding: 8px 10px !important;
      font-size: 12px !important;
      border-radius: 999px !important;
      gap: 5px !important;
    }

    @media (max-width: 640px) {
      .combos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }

      .combo {
        padding: 11px !important;
        border-radius: 18px !important;
      }

      .combo-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
        margin-bottom: 7px !important;
        border-radius: 12px !important;
      }

      .combo-tag {
        font-size: 9px !important;
        padding: 4px 7px !important;
      }

      .combo h4 {
        font-size: 15px !important;
        line-height: 1.05 !important;
        margin-bottom: 5px !important;
      }

      .combo-items {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .combo-save {
        transform: scale(.62);
        right: 6px !important;
        top: 6px !important;
      }

      .combo-foot {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 7px !important;
      }

      .combo-price .now {
        font-size: 15px !important;
      }

      .combo-price .was {
        font-size: 10px !important;
      }

      .combo-add {
        width: 100%;
        padding: 7px 8px !important;
        font-size: 10.5px !important;
        justify-content: center;
      }
    }



    /* Signature Picks compact refresh */
    .picks-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }
    .pick {
      position: relative;
      padding: 18px 14px 16px;
      border-radius: 20px;
      text-align: center;
      overflow: hidden;
    }
    .pick:hover {
      transform: translateY(-6px);
    }
    .pick-img {
      width: 112px;
      height: 112px;
      margin: 6px auto 10px;
      border-radius: 24px;
      background: radial-gradient(circle at 50% 38%, #fff6ea, #f6e3c6 72%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pick-img img {
      width: 94%;
      height: 94%;
      object-fit: contain;
      filter: drop-shadow(0 8px 14px rgba(120,80,30,.22));
    }
    .pick h4 {
      font-size: 16px;
      line-height: 1.12;
      margin: 4px 0 10px;
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pick-row {
      gap: 8px;
      flex-wrap: wrap;
    }
    .pick-price {
      font-size: 16px;
    }
    .pick-add {
      padding: 8px 14px;
      font-size: 12px;
    }
    .pick-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 15px;
      background: rgba(255,255,255,.92);
      box-shadow: 0 8px 16px rgba(0,0,0,.10);
      animation: pickBadgeFloat 2.8s ease-in-out infinite, pickBadgePulse 2.2s ease-in-out infinite;
      z-index: 2;
    }
    .pick-badge.wings { color: #cd4a24; }
    .pick-badge.wrap { color: #8f5f2c; }
    .pick-badge.fire { color: #e06b18; }
    .pick-badge.maggi { color: #cf9a16; }
    .pick-badge.grill { color: #b44a28; }
    .pick-badge.noodle { color: #92702b; }
    .pick-badge.melon { color: #df6a76; }

    @keyframes pickBadgeFloat {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-4px) rotate(6deg); }
    }
    @keyframes pickBadgePulse {
      0%, 100% { box-shadow: 0 8px 16px rgba(0,0,0,.10); }
      50% { box-shadow: 0 10px 20px rgba(0,0,0,.18); }
    }

    @media (max-width: 1100px) {
      .picks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 640px) {
      .picks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
      }
      .pick {
        padding: 14px 10px 14px;
        border-radius: 18px;
      }
      .pick-img {
        width: 92px;
        height: 92px;
        border-radius: 18px;
        margin: 4px auto 8px;
      }
      .pick-badge {
        width: 28px;
        height: 28px;
        top: 8px;
        left: 8px;
        font-size: 13px;
      }
      .pick-tag { font-size: 9px; }
      .pick h4 {
        font-size: 13px;
        min-height: 32px;
        margin: 2px 0 8px;
      }
      .pick-price { font-size: 14px; }
      .pick-row {
        flex-direction: column;
        gap: 6px;
      }
      .pick-add {
        width: 100%;
        font-size: 11px;
        padding: 7px 8px;
      }
    }


    /* Real Google reviews refresh */
    .reviews-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }
    .review {
      min-height: 100%;
    }
    .review p {
      font-size: 14px;
      line-height: 1.55;
    }
    .review .rl {
      line-height: 1.35;
    }
    @media (max-width: 1100px) {
      .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 640px) {
      .reviews-grid { grid-template-columns: 1fr; }
      .review p { font-size: 14px; }
    }

    /* Honest Food moving cards click-pause fix */
    #honest-food.is-paused .honest-marquee-row {
      animation-play-state: paused !important;
    }

    .gallery.is-paused .marquee-row {
      animation-play-state: paused !important;
    }

    #honest-food .honest-card {
      user-select: none;
    }


    /* M3.5 Order in 30 Seconds conversion section */
    .quick-start {
      padding: 18px 0 30px;
      position: relative;
      z-index: 4;
      margin-top: -22px;
    }

    .quick-start-card {
      border-radius: 32px;
      padding: 24px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,246,233,.96)),
        radial-gradient(circle at 10% 10%, rgba(var(--amber-rgb), .22), transparent 34%);
      border: 1px solid rgba(125,85,50,.13);
      box-shadow: 0 22px 52px rgba(78,52,24,.12);
      display: grid;
      grid-template-columns: .9fr 1.4fr;
      gap: 22px;
      align-items: center;
      overflow: hidden;
      position: relative;
    }

    .quick-start-card::before {
      content: "";
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(37,211,102,.15), transparent 66%);
      right: -90px;
      top: -100px;
      animation: orderGlow 4s ease-in-out infinite;
    }

    .quick-start-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.48) 46%, transparent 60%);
      transform: translateX(-120%);
      animation: orderShine 5.8s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes orderGlow {
      0%, 100% { transform: scale(1); opacity: .75; }
      50% { transform: scale(1.18); opacity: 1; }
    }

    @keyframes orderShine {
      0%, 55% { transform: translateX(-120%); }
      75%, 100% { transform: translateX(120%); }
    }

    .quick-start-head {
      position: relative;
      z-index: 1;
    }

    .quick-start-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(37,211,102,.12);
      color: #128C4A;
      font-weight: 900;
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 12px;
      animation: pillPulse 2.4s ease-in-out infinite;
    }

    @keyframes pillPulse {
      0%, 100% { transform: translateY(0); box-shadow: 0 0 0 rgba(37,211,102,0); }
      50% { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,211,102,.18); }
    }

    .quick-start-title {
      font-family: var(--ff-display);
      font-size: clamp(32px, 4.4vw, 56px);
      line-height: .92;
      color: var(--bark);
      margin: 0 0 12px;
    }

    .quick-start-title span {
      background: linear-gradient(90deg, var(--bark), var(--amber), #25D366, var(--bark));
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: orderTitleFlow 4s ease-in-out infinite;
    }

    @keyframes orderTitleFlow {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .quick-start-text {
      color: var(--muted);
      line-height: 1.55;
      margin: 0;
      max-width: 390px;
    }

    .quick-steps {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .quick-step {
      border: 1px solid rgba(125,85,50,.12);
      background: rgba(255,255,255,.72);
      border-radius: 24px;
      padding: 16px 14px 14px;
      min-height: 176px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
      position: relative;
      overflow: hidden;
    }

    .quick-step::before {
      content: "";
      position: absolute;
      inset: auto -30px -55px auto;
      width: 110px;
      height: 110px;
      border-radius: 999px;
      background: rgba(var(--amber-rgb), .13);
      transition: transform .32s ease;
    }

    .quick-step:hover {
      transform: translateY(-7px);
      box-shadow: 0 18px 34px rgba(78,52,24,.13);
      border-color: rgba(var(--amber-rgb), .28);
    }

    .quick-step:hover::before {
      transform: scale(1.35);
    }

    .quick-step-icon {
      width: 42px;
      height: 42px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-size: 20px;
      background: linear-gradient(135deg, rgba(var(--amber-rgb), .18), rgba(37,211,102,.13));
      color: var(--amber-dark);
      margin-bottom: 10px;
      animation: quickIconFloat 3.1s ease-in-out infinite;
    }

    .quick-step:nth-child(2) .quick-step-icon { animation-delay: .25s; }
    .quick-step:nth-child(3) .quick-step-icon { animation-delay: .5s; }

    @keyframes quickIconFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-4px) rotate(-5deg); }
    }

    .quick-step h3 {
      font-size: 16px;
      line-height: 1.15;
      color: var(--bark);
      margin: 0 0 7px;
      font-weight: 900;
    }

    .quick-step p {
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.4;
      margin: 0 0 12px;
    }

    .quick-step button {
      width: 100%;
      border: none;
      border-radius: 999px;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      background: var(--bark);
      color: #fff;
      transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
      position: relative;
      z-index: 1;
    }

    .quick-step button:hover {
      background: #25D366;
      color: #fff;
      transform: scale(1.03);
      box-shadow: 0 10px 20px rgba(37,211,102,.22);
    }

    .quick-mini {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px;
    }

    .quick-mini button {
      border: 1px solid rgba(125,85,50,.13);
      background: rgba(255,255,255,.72);
      color: var(--bark);
      border-radius: 999px;
      padding: 9px 12px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      transition: all .25s ease;
    }

    .quick-mini button:hover {
      background: var(--amber);
      color: #fff;
      transform: translateY(-2px);
    }

    @media (max-width: 820px) {
      .quick-start {
        margin-top: -16px;
        padding: 12px 0 24px;
      }

      .quick-start-card {
        grid-template-columns: 1fr;
        padding: 20px;
        border-radius: 28px;
        gap: 18px;
      }

      .quick-start-text {
        max-width: none;
      }

      .quick-steps {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
      }

      .quick-step {
        scroll-snap-align: center;
      }
    }

    @media (max-width: 640px) {
      .quick-start {
        margin-top: -24px;
        padding: 8px 0 22px;
      }

      .quick-start-card {
        padding: 18px;
      }

      .quick-start-title {
        font-size: 34px;
      }

      .quick-steps {
        grid-template-columns: 1fr;
        overflow: visible;
      }

      .quick-step {
        min-height: auto;
        padding: 14px;
      }

      .quick-step-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
        margin-bottom: 8px;
      }

      .quick-mini button {
        flex: 1 1 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .quick-start-card::before,
      .quick-start-card::after,
      .quick-start-pill,
      .quick-start-title span,
      .quick-step-icon {
        animation: none;
      }
    }


    /* CLEAR HERO ORDER VISUAL CARDS - fixed visible version */
    .hero-order-wall {
      padding: 18px 0 26px !important;
      margin-top: -18px !important;
      position: relative !important;
      z-index: 20 !important;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    .hero-order-wall * {
      opacity: 1 !important;
      visibility: visible !important;
    }

    .hero-order-box {
      border-radius: 30px;
      padding: 22px;
      background:
        radial-gradient(circle at 12% 8%, rgba(255,178,74,.26), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(37,211,102,.16), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,246,233,.98));
      border: 1px solid rgba(125,85,50,.14);
      box-shadow: 0 24px 54px rgba(78,52,24,.15);
      overflow: hidden;
      position: relative;
    }

    .hero-order-box::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.48) 48%, transparent 62%);
      transform: translateX(-120%);
      animation: heroOrderShine 5.5s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes heroOrderShine {
      0%, 55% { transform: translateX(-120%); }
      78%, 100% { transform: translateX(120%); }
    }

    .hero-order-top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
      position: relative;
      z-index: 2;
    }

    .hero-order-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 13px;
      border-radius: 999px;
      background: rgba(37,211,102,.12);
      color: #128C4A;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 9px;
      animation: heroPillBounce 2.4s ease-in-out infinite;
    }

    @keyframes heroPillBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }

    .hero-order-title {
      margin: 0;
      font-family: var(--ff-display);
      font-size: clamp(31px, 5vw, 58px);
      line-height: .92;
      color: var(--bark);
    }

    .hero-order-title span {
      background: linear-gradient(90deg, var(--bark), var(--amber), #25D366, var(--bark));
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: heroOrderTitleFlow 4s ease-in-out infinite;
    }

    @keyframes heroOrderTitleFlow {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .hero-order-sub {
      margin: 0;
      max-width: 440px;
      color: var(--muted);
      line-height: 1.5;
      font-size: 14px;
    }

    .hero-order-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      position: relative;
      z-index: 2;
    }

    .hero-order-card {
      min-height: 205px;
      border-radius: 25px;
      padding: 18px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(125,85,50,.13);
      box-shadow: 0 12px 28px rgba(78,52,24,.08);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
    }

    .hero-order-card::after {
      content: "";
      position: absolute;
      width: 130px;
      height: 130px;
      border-radius: 999px;
      right: -45px;
      bottom: -55px;
      background: rgba(255,178,74,.14);
      transition: transform .32s ease;
    }

    .hero-order-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 38px rgba(78,52,24,.14);
      border-color: rgba(37,211,102,.26);
    }

    .hero-order-card:hover::after {
      transform: scale(1.4);
    }

    .hero-order-icon {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-size: 25px;
      background: linear-gradient(135deg, rgba(255,178,74,.22), rgba(37,211,102,.14));
      color: var(--amber-dark);
      margin-bottom: 13px;
      animation: heroOrderIconFloat 3.1s ease-in-out infinite;
      position: relative;
      z-index: 1;
    }

    .hero-order-card:nth-child(2) .hero-order-icon { animation-delay: .25s; }
    .hero-order-card:nth-child(3) .hero-order-icon { animation-delay: .5s; }

    @keyframes heroOrderIconFloat {
      0%, 100% { transform: translateY(0) rotate(0); }
      50% { transform: translateY(-5px) rotate(-5deg); }
    }

    .hero-order-card h3 {
      margin: 0 0 8px;
      color: var(--bark);
      font-size: 18px;
      line-height: 1.12;
      font-weight: 900;
      position: relative;
      z-index: 1;
    }

    .hero-order-card p {
      margin: 0 0 15px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
      position: relative;
      z-index: 1;
    }

    .hero-order-card button {
      width: 100%;
      border: none;
      cursor: pointer;
      border-radius: 999px;
      padding: 11px 13px;
      background: var(--bark);
      color: white;
      font-size: 12.5px;
      font-weight: 900;
      transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
      position: relative;
      z-index: 1;
    }

    .hero-order-card button:hover {
      background: #25D366;
      transform: scale(1.03);
      box-shadow: 0 12px 24px rgba(37,211,102,.24);
    }

    .hero-order-mini {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 15px;
      position: relative;
      z-index: 2;
    }

    .hero-order-mini button {
      border: 1px solid rgba(125,85,50,.13);
      background: rgba(255,255,255,.74);
      color: var(--bark);
      cursor: pointer;
      border-radius: 999px;
      padding: 9px 13px;
      font-size: 12px;
      font-weight: 900;
      transition: all .25s ease;
    }

    .hero-order-mini button:hover {
      background: var(--amber);
      color: #fff;
      transform: translateY(-2px);
    }

    @media (max-width: 760px) {
      .hero-order-wall {
        margin-top: -24px !important;
        padding: 8px 0 22px !important;
      }

      .hero-order-box {
        padding: 18px;
        border-radius: 26px;
      }

      .hero-order-top {
        display: block;
        margin-bottom: 15px;
      }

      .hero-order-sub {
        margin-top: 10px;
      }

      .hero-order-cards {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .hero-order-card {
        min-height: auto;
        padding: 15px;
      }

      .hero-order-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
        margin-bottom: 10px;
      }

      .hero-order-card h3 {
        font-size: 16px;
      }

      .hero-order-mini button {
        flex: 1 1 100%;
      }
    }


    /* Strong WhatsApp green hover/click glow for order cards */
    .hero-order-card button,
    .quick-step button {
      position: relative !important;
      overflow: hidden !important;
      transition: transform .25s ease, background .25s ease, box-shadow .25s ease, color .25s ease !important;
    }

    .hero-order-card button::before,
    .quick-step button::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      background: radial-gradient(circle at center, rgba(255,255,255,.35), transparent 55%) !important;
      opacity: 0 !important;
      transition: opacity .25s ease !important;
      pointer-events: none !important;
    }

    .hero-order-card button:hover,
    .hero-order-card button:focus,
    .hero-order-card button:active,
    .quick-step button:hover,
    .quick-step button:focus,
    .quick-step button:active {
      background: #25D366 !important;
      color: #ffffff !important;
      transform: translateY(-2px) scale(1.04) !important;
      box-shadow:
        0 0 0 4px rgba(37,211,102,.16),
        0 0 22px rgba(37,211,102,.55),
        0 14px 26px rgba(37,211,102,.28) !important;
    }

    .hero-order-card button:hover::before,
    .hero-order-card button:focus::before,
    .hero-order-card button:active::before,
    .quick-step button:hover::before,
    .quick-step button:focus::before,
    .quick-step button:active::before {
      opacity: 1 !important;
    }

    .hero-order-card:hover,
    .quick-step:hover {
      border-color: rgba(37,211,102,.42) !important;
      box-shadow:
        0 0 0 2px rgba(37,211,102,.08),
        0 22px 44px rgba(37,211,102,.16),
        0 18px 38px rgba(78,52,24,.12) !important;
    }



/* Interactive ordering system - no WhatsApp until checkout */
.hero-order-wall{margin-top:0!important;padding:34px 0 38px!important;position:relative!important;z-index:5!important;display:block!important;clear:both!important;}
.gallery{margin-top:0!important;padding-top:20px!important;clear:both!important;}
.hero-order-card button,.kona-add-btn,.kona-checkout-btn{transition:transform .25s ease,background .25s ease,box-shadow .25s ease,color .25s ease!important;}
.hero-order-card button:hover,.hero-order-card button:focus,.hero-order-card button:active,.kona-add-btn:hover,.kona-add-btn:focus,.kona-add-btn:active,.kona-checkout-btn:hover,.kona-checkout-btn:focus,.kona-checkout-btn:active{background:#25D366!important;color:#fff!important;transform:translateY(-2px) scale(1.035)!important;box-shadow:0 0 0 4px rgba(37,211,102,.16),0 0 24px rgba(37,211,102,.58),0 14px 28px rgba(37,211,102,.28)!important;}
.kona-menu-head{text-align:center;max-width:760px;margin:0 auto 30px;}
.kona-interactive-menu{padding:86px 0;background:linear-gradient(180deg,rgba(255,246,233,.28),rgba(255,255,255,0));}
.kona-menu-toolbar{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;align-items:center;margin-bottom:22px;}
.kona-menu-tabs{display:flex;gap:9px;flex-wrap:wrap;}
.kona-menu-tab{border:1px solid rgba(125,85,50,.14);background:rgba(255,255,255,.78);color:var(--bark);padding:10px 14px;border-radius:999px;font-weight:900;font-size:13px;cursor:pointer;transition:all .22s ease;}
.kona-menu-tab:hover,.kona-menu-tab.active{background:var(--amber);border-color:var(--amber);color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(var(--amber-rgb),.22);}
.kona-menu-search-wrap{position:relative;}
.kona-menu-search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--bark-soft);}
#konaMenuSearch{width:100%;border:1px solid rgba(125,85,50,.14);border-radius:999px;padding:12px 14px 12px 40px;background:rgba(255,255,255,.86);font-weight:800;color:var(--bark);outline:none;}
#konaMenuSearch:focus{border-color:#25D366;box-shadow:0 0 0 4px rgba(37,211,102,.12);}
.kona-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.kona-menu-item{background:rgba(255,255,255,.84);border:1px solid rgba(125,85,50,.13);border-radius:22px;padding:16px;box-shadow:0 12px 26px rgba(78,52,24,.07);position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:178px;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;}
.kona-menu-item::after{content:"";position:absolute;width:120px;height:120px;border-radius:999px;right:-50px;bottom:-58px;background:rgba(255,178,74,.12);transition:transform .28s ease;}
.kona-menu-item:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(78,52,24,.12);border-color:rgba(37,211,102,.25);}
.kona-menu-item:hover::after{transform:scale(1.35);}
.kona-menu-item.hide{display:none!important;}
.kona-menu-item-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;position:relative;z-index:1;}
.kona-menu-emoji{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:rgba(var(--amber-rgb),.13);font-size:20px;}
.kona-menu-badge{font-size:11px;font-weight:900;color:#128C4A;background:rgba(37,211,102,.10);border-radius:999px;padding:6px 9px;white-space:nowrap;}
.kona-menu-item h3{font-size:17px;line-height:1.15;margin:0 0 7px;color:var(--bark);font-weight:950;position:relative;z-index:1;}
.kona-menu-item p{font-size:12.5px;line-height:1.35;color:var(--muted);margin:0 0 16px;position:relative;z-index:1;}
.kona-menu-order-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1;}
.kona-menu-order-row strong{font-size:19px;color:var(--bark);}
.kona-add-btn{border:none;border-radius:999px;background:var(--bark);color:#fff;padding:10px 13px;font-size:12px;font-weight:950;cursor:pointer;white-space:nowrap;}
.kona-cart-fab{position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.5);color:#fff;display:grid;place-items:center;font-size:22px;z-index:9997;box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -2px 6px rgba(255,255,255,.16),0 14px 34px rgba(31,20,40,.32);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;animation:kfFloat 4s ease-in-out infinite;will-change:transform;}
.kona-cart-fab::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,rgba(255,120,180,.30) 0%,rgba(120,200,255,0) 40%,rgba(120,255,210,.28) 100%);mix-blend-mode:screen;pointer-events:none;}
.kona-cart-fab::after{content:"";position:absolute;left:14%;right:14%;top:4px;height:40%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));pointer-events:none;}
.kona-cart-fab i{position:relative;z-index:2;text-shadow:0 1px 3px rgba(20,8,30,.5);}
.kona-cart-fab:hover{transform:translateY(-6px) scale(1.06);background:rgba(255,255,255,.22);box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 0 0 6px rgba(255,255,255,.12),0 20px 46px rgba(31,20,40,.42);}
@keyframes kfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.kona-cart-fab span{position:absolute;right:-3px;top:-3px;z-index:3;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--bark);display:grid;place-items:center;font-size:12px;font-weight:950;opacity:0;transform:scale(.5);pointer-events:none;transition:opacity .2s ease,transform .2s ease;}
.kona-cart-fab span.has-items{opacity:1;transform:scale(1);}
.kona-cart-backdrop{position:fixed;inset:0;background:rgba(31,21,13,.58);z-index:9998;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.kona-cart-drawer{position:fixed;top:0;right:0;width:min(420px,94vw);height:100dvh;background:#fff7ea;z-index:9999;transform:translateX(105%);transition:transform .3s ease;box-shadow:-24px 0 60px rgba(31,21,13,.22);display:flex;flex-direction:column;border-left:1px solid rgba(125,85,50,.13);overflow:hidden;}
body.cart-open .kona-cart-backdrop{opacity:1;pointer-events:auto;}
body.cart-open .kona-cart-drawer{transform:translateX(0);}
.kona-cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid rgba(125,85,50,.12);}
.kona-cart-head h3{margin:0;font-family:var(--ff-display);font-size:30px;color:var(--bark);}
.kona-cart-head button{width:40px;height:40px;border:none;border-radius:999px;background:#fff;color:var(--bark);box-shadow:0 8px 18px rgba(78,52,24,.09);cursor:pointer;}
.kona-cart-items{padding:14px 18px;overflow:auto;flex:1;}
.kona-cart-empty{text-align:center;color:var(--muted);padding:50px 20px;line-height:1.45;}
.kona-cart-line{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid rgba(125,85,50,.11);border-radius:17px;padding:12px;margin-bottom:10px;}
.kona-cart-line h4{font-size:14px;margin:0 0 4px;color:var(--bark);}
.kona-cart-line p{font-size:12px;margin:0;color:var(--muted);}
.kona-qty{display:flex;align-items:center;gap:6px;justify-content:flex-end;}
.kona-qty button{width:28px;height:28px;border:none;border-radius:999px;background:#f3e6d7;color:var(--bark);font-weight:950;cursor:pointer;}
.kona-qty span{min-width:18px;text-align:center;font-weight:950;color:var(--bark);}
.kona-cart-foot{border-top:1px solid rgba(125,85,50,.12);padding:16px 18px 18px;background:#fff7ea;}
.kona-cart-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:var(--bark);}
.kona-cart-total strong{font-size:24px;}
#konaCartNote{width:100%;min-height:72px;resize:vertical;border:1px solid rgba(125,85,50,.13);border-radius:16px;padding:12px;background:#fff;font-family:inherit;font-size:13px;outline:none;margin-bottom:12px;}
#konaCartNote:focus{border-color:#25D366;box-shadow:0 0 0 4px rgba(37,211,102,.12);}
.kona-checkout-btn{width:100%;border:none;border-radius:999px;background:var(--bark);color:#fff;padding:14px;font-weight:950;cursor:pointer;font-size:15px;}
.kona-cart-foot p{font-size:12px;text-align:center;color:var(--muted);margin:10px 0 0;}
@media(max-width:860px){.kona-menu-toolbar{grid-template-columns:1fr}.kona-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.hero-order-wall{padding-top:24px!important}.gallery{padding-top:18px!important}}
@media(max-width:560px){.kona-menu-grid{grid-template-columns:1fr}.kona-interactive-menu{padding:62px 0}.kona-menu-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.kona-menu-tab{white-space:nowrap}.kona-menu-item{min-height:auto}.kona-cart-fab{right:14px;bottom:14px;width:54px;height:54px}.hero-order-wall{padding:20px 0 34px!important}.gallery{margin-top:0!important;padding-top:14px!important}}


/* Menu item food images - first batch */
.kona-menu-visual{width:100%;height:255px;margin:-2px 0 14px;border-radius:22px;background:linear-gradient(180deg,rgba(255,251,246,.9),rgba(255,244,228,.62));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;z-index:1;border:1px solid rgba(125,85,50,.08);isolation:isolate}
.kona-menu-visual::before{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:74%;height:22px;border-radius:50%;background:radial-gradient(circle,rgba(78,52,24,.22),rgba(78,52,24,0) 68%);filter:blur(8px);animation:konaShadowPulse 2.6s ease-in-out infinite;z-index:0}
.kona-menu-visual::after{content:"";position:absolute;top:-35%;left:-15%;width:38%;height:190%;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.06) 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-170%) rotate(14deg);animation:konaShineSweep 3.2s ease-in-out infinite;opacity:.72;pointer-events:none;z-index:1}
.kona-menu-visual img{max-width:148%;max-height:155%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 18px 22px rgba(78,52,24,.18));transform-origin:center bottom;animation:konaFoodFloat 2.9s ease-in-out infinite,konaFoodTilt 1.9s ease-in-out infinite alternate;transition:transform .18s ease,filter .18s ease;will-change:transform}
.kona-menu-item:hover .kona-menu-visual::after,.kona-menu-item:focus-within .kona-menu-visual::after{animation-duration:1.6s;opacity:.95}
.kona-menu-item:hover .kona-menu-visual img,.kona-menu-item:focus-within .kona-menu-visual img{animation-play-state:paused;transform:translateY(-10px) scale(1.1) rotate(-1deg);filter:drop-shadow(0 24px 28px rgba(78,52,24,.23))}
.kona-menu-item.has-food-img{min-height:420px;padding-top:12px}
@keyframes konaFoodFloat{0%,100%{transform:translateY(2px) scale(1.02)}50%{transform:translateY(-8px) scale(1.06)}}
@keyframes konaFoodTilt{0%{rotate:-1.1deg}100%{rotate:1.1deg}}
@keyframes konaShadowPulse{0%,100%{opacity:.35;transform:translateX(-50%) scaleX(1)}50%{opacity:.18;transform:translateX(-50%) scaleX(.84)}}
@keyframes konaShineSweep{0%,18%{transform:translateX(-170%) rotate(14deg)}46%,100%{transform:translateX(310%) rotate(14deg)}}
@media(max-width:720px){.kona-menu-visual{height:215px}.kona-menu-item.has-food-img{min-height:385px}}
@media(max-width:560px){.kona-menu-visual{height:230px}.kona-menu-item.has-food-img{min-height:auto}}



/* Clean homepage menu handoff */
.menu-handoff {
  padding: 34px 0 42px;
  position: relative;
  z-index: 5;
}
.menu-handoff-card {
  border-radius: 30px;
  padding: 24px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,178,74,.22), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(37,211,102,.13), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,244,229,.96));
  border: 1px solid rgba(125,85,50,.14);
  box-shadow: 0 22px 50px rgba(78,52,24,.12);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.menu-handoff-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.42) 48%, transparent 62%);
  transform: translateX(-130%);
  animation: menuHandoffShine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes menuHandoffShine {
  0%, 55% { transform: translateX(-130%); }
  78%, 100% { transform: translateX(130%); }
}
.menu-handoff-kicker {
  display:inline-flex;
  gap:8px;
  align-items:center;
  border-radius:999px;
  padding:8px 12px;
  background:rgba(37,211,102,.12);
  color:#128C4A;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.menu-handoff-title {
  margin:0;
  font-family:var(--ff-display);
  font-size:clamp(32px,4.8vw,58px);
  line-height:.92;
  color:var(--bark);
}
.menu-handoff-text {
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.5;
}
.menu-handoff-action {
  display:flex;
  justify-content:flex-end;
  position:relative;
  z-index:2;
}
.menu-handoff-btn {
  border:none;
  border-radius:999px;
  padding:14px 20px;
  background:var(--bark);
  color:#fff;
  font-size:15px;
  font-weight:950;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:0 14px 28px rgba(78,52,24,.18);
  transition:transform .24s ease, background .24s ease, box-shadow .24s ease;
}
.menu-handoff-btn:hover,
.menu-handoff-btn:focus {
  background:#25D366;
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 0 0 4px rgba(37,211,102,.14), 0 18px 34px rgba(37,211,102,.25);
}
@media(max-width:720px){
  .menu-handoff-card{grid-template-columns:1fr;padding:20px;border-radius:26px}
  .menu-handoff-action{justify-content:flex-start}
  .menu-handoff-btn{width:100%;justify-content:center}
}


/* Single HTML internal menu page */
#single-menu-view {
  display: none;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 5%, rgba(245,159,49,.22), transparent 30%),
    radial-gradient(circle at 90% 6%, rgba(37,211,102,.11), transparent 28%),
    linear-gradient(180deg,#fff8ec,#fff1dc);
  color: var(--bark);
}

body.kona-menu-active > *:not(#single-menu-view):not(script):not(#konaCartDrawer):not(#konaCartBackdrop):not(#konaCartFab) {
  display: none !important;
}

body.kona-menu-active #single-menu-view {
  display: block !important;
}

.kona-menu-view-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(255,248,236,.84);
  border-bottom: 1px solid rgba(59,36,21,.09);
}

.kona-menu-view-nav {
  width: min(1120px, 92vw);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}

.kona-menu-view-logo {
  font-family: var(--ff-display);
  font-size: 28px;
  line-height: .9;
  font-weight: 950;
  color: var(--bark);
}

.kona-back-home-btn {
  border: none;
  text-decoration: none;
  border-radius: 999px;
  padding: 11px 16px;
  background: var(--bark);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .24s ease, background .24s ease, box-shadow .24s ease;
}

.kona-back-home-btn:hover,
.kona-back-home-btn:focus {
  background: #25D366;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 4px rgba(37,211,102,.15),
    0 16px 28px rgba(37,211,102,.25);
}

.kona-menu-view-wrap {
  width: min(980px, 94vw);
  margin: 28px auto 64px;
}

.kona-menu-view-title {
  text-align: center;
  margin: 0 0 18px;
}

.kona-menu-view-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37,211,102,.12);
  color: #128C4A;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.kona-menu-view-title h1 {
  font-family: var(--ff-display);
  font-size: clamp(38px, 6vw, 70px);
  line-height: .9;
  margin: 0;
  color: var(--bark);
}

.kona-menu-view-title p {
  margin: 10px auto 0;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.5;
}

.kona-menu-image-card {
  border-radius: 34px;
  padding: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(59,36,21,.12);
  box-shadow: 0 26px 60px rgba(59,36,21,.16);
  overflow: hidden;
  position: relative;
}

.kona-menu-image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.38) 48%, transparent 62%);
  transform: translateX(-130%);
  animation: konaMenuViewShine 4.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes konaMenuViewShine {
  0%,55% { transform: translateX(-130%); }
  78%,100% { transform: translateX(130%); }
}

.kona-full-menu-image {
  width: 100%;
  display: block;
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(59,36,21,.16);
}

.kona-menu-view-note {
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* -- Menu category tabs -- */
.kona-menu-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px;
  background: rgba(255,248,235,0.97); justify-content: center;
  border-bottom: 2px solid rgba(200,140,70,.2);
}
.kona-tab {
  padding: 7px 15px; border: 1px solid rgba(180,120,50,.22); border-radius: 999px;
  background: rgba(255,255,255,0.95); color: #3d1a00;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s; font-family: var(--ff-body);
  box-shadow: 0 2px 6px rgba(180,100,30,.08);
}
.kona-tab.active { background: var(--c-accent,#e87722); color: #fff; border-color: var(--c-accent,#e87722); box-shadow: 0 4px 14px rgba(232,119,34,.35); }
.kona-tab:hover:not(.active) { background: rgba(255,240,220,.9); color: #5c2500; }
@media(max-width:640px) {
  .kona-menu-tabs { gap: 6px; padding: 8px 12px; overflow-x: auto; flex-wrap: nowrap; padding-bottom:6px; }
  .kona-tab { font-size: 12px; padding: 6px 12px; white-space: nowrap; }
  .kona-tab:nth-child(5), .kona-tab:nth-child(6) { display: none; }
}


@media(max-width:640px) {
  .kona-menu-view-logo {
    font-size: 23px;
  }
  .kona-back-home-btn {
    font-size: 12px;
    padding: 9px 12px;
  }
  .kona-menu-view-wrap {
    margin-top: 20px;
  }
  .kona-menu-image-card {
    padding: 8px;
    border-radius: 24px;
  }
  .kona-full-menu-image {
    border-radius: 18px;
  }
}

    /* ── Menu image Add button (sun circle) ── */
    .menu-add-btn {
      width: 28px; height: 28px; border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #ffe08a, #ff9a3c 62%, #e8632e 100%);
      box-shadow: 0 0 10px rgba(255,154,90,.8), 0 3px 8px rgba(180,70,10,.3);
      border: none;
      color: #fff; font-size: 20px; font-weight: 300; line-height: 1;
      cursor: pointer; pointer-events: auto;
      display: grid; place-items: center;
      transition: transform .18s, box-shadow .18s;
      padding: 0;
    }
    .menu-add-btn:hover { transform: scale(1.15); box-shadow: 0 0 16px rgba(255,154,90,.95), 0 5px 12px rgba(180,70,10,.38); }
    .menu-add-btn:active { transform: scale(0.88); }
    /* ── Qty stepper pill ── */
    .menu-qty-pill {
      display: flex; align-items: center;
      background: rgba(20,8,0,.95);
      border-radius: 999px; overflow: hidden;
      pointer-events: auto;
      box-shadow: 0 2px 10px rgba(180,70,10,.35);
    }
    .menu-qty-pill button {
      width: 26px; height: 26px; border: none; background: transparent;
      color: #ff9a3c; font-size: 17px; font-weight: 600;
      cursor: pointer; display: grid; place-items: center;
      transition: background .14s; padding: 0;
    }
    .menu-qty-pill button:hover { background: rgba(255,154,90,.18); }
    .menu-qty-pill span {
      min-width: 22px; text-align: center;
      color: #fff; font-size: 13px; font-weight: 700;
      font-family: var(--ff-body);
    }
    /* ── One-time hint strip ── */
    .menu-add-hint {
      text-align: center; padding: 6px 12px 8px;
      font-size: 12.5px; color: #b35010; font-weight: 500;
      font-family: var(--ff-body); letter-spacing: .01em;
    }
    .menu-add-overlay { position: absolute; pointer-events: none; z-index: 5; }
    @media (max-width: 640px) {
      .menu-add-btn { width: 22px; height: 22px; font-size: 16px; }
      .menu-qty-pill button { width: 21px; height: 21px; font-size: 14px; }
      .menu-qty-pill span { min-width: 18px; font-size: 11px; }
    }
    /* ── Variant selector dots ── */
    .variant-dot {
      position: absolute; width: 5px; height: 5px; border-radius: 50%;
      cursor: pointer; pointer-events: auto;
      transform: translate(-50%,-50%);
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.28);
      transition: background .18s, box-shadow .18s, border-color .18s;
      z-index: 22;
    }
    .variant-dot.selected {
      background: rgba(255,255,255,0.96);
      border-color: rgba(255,255,255,0.96);
      box-shadow: 0 0 4px 2px var(--vc,#22c55e), 0 0 9px 4px var(--vc,#22c55e);
    }
    @media (max-width: 640px) {
      .variant-dot { width: 2px; height: 2px; border-width: 0.5px; }
      .variant-dot.selected { box-shadow: 0 0 2px 1px var(--vc,#22c55e), 0 0 5px 2px var(--vc,#22c55e); }
    }


    /* ── Mobile tagline break ── */
    .tag-br { display: inline; }
    @media (max-width: 640px) {
      .tag-br { display: block; height: 0; }
    }

    /* ── Time-of-day sky ── */
    .hero-moon {
      position: absolute; left: 74%; top: 30%;
      width: clamp(150px, 22vw, 290px); height: clamp(150px, 22vw, 290px);
      transform: translate(-50%, -50%);
      clip-path: circle(50%); background: transparent;
      animation: moonPulse 5s ease-in-out infinite, celestialDrift 30s ease-in-out infinite;
    }
    /* Gentle drift layered on top of the hour-based position. The -50% keeps the
       body centred on its left/top anchor while it sways a few pixels. */
    @keyframes celestialDrift {
      0%,100% { transform: translate(-50%, -50%); }
      50%     { transform: translate(calc(-50% + 5px), calc(-50% - 7px)); }
    }
    @keyframes moonPulse {
      0%,100% { filter: drop-shadow(0 0 14px rgba(242,237,212,.18)) drop-shadow(0 0 32px rgba(200,190,255,.08)); }
      50%      { filter: drop-shadow(0 0 32px rgba(242,237,212,.55)) drop-shadow(0 0 70px rgba(200,190,255,.22)); }
    }
    .hero-stars { position: absolute; inset: 0; pointer-events: none; }
    .star { position: absolute; border-radius: 50%; background: #fff; }
    @keyframes twinkle {
      0%,100% { opacity: .25; transform: scale(1); }
      50%      { opacity: 1;   transform: scale(1.5); }
    }
    .hero--night .hero-tag  { color: rgba(200,190,255,.95); }
    .hero--night .lead      { color: rgba(210,220,255,.85); }
    .hero--night h1         { color: #f0eae0; }
    .hero--night .hero-badge { background: rgba(10,20,50,.8); border-color: rgba(255,255,255,.2); color: rgba(220,220,255,.9); }
    .hero--night .hero-badge .stars { color: #c8b8ff; }
    .hero--night .cloud     { opacity: .1 !important; }

    .hero--dusk .hero-tag   { color: #ffe0b0; }
    .hero--dusk .lead       { color: rgba(255,240,210,.9); }
    .hero--dusk h1          { color: #fff5e8; }
    .hero--dusk .hero-badge { background: rgba(40,10,20,.7); border-color: rgba(255,200,100,.3); color: rgba(255,230,180,.95); }
    .hero--dusk .hero-badge .stars { color: #ffcc80; }

    .hero--morning .hero-tag { color: #b84010; }
    .hero--morning h1        { color: #fff5e0; text-shadow: 0 1px 14px rgba(180,80,10,.45), 0 2px 28px rgba(180,80,10,.25); }
    .hero--morning p.lead    { color: #5c1e00; }
    .hero--morning .hero-badge { background: rgba(255,255,255,.65); border-color: rgba(200,100,20,.25); color: #5a2a08; }

    .hero--afternoon .hero-tag { color: #1a527a; }
    .hero--afternoon h1        { color: #f0f8ff; }
    .hero--afternoon p.lead    { color: #0f3058; }
    .hero--afternoon .hero-badge { background: rgba(255,255,255,.65); border-color: rgba(50,120,200,.25); color: #0f2240; }

    /* ════════ OFFERS ════════ */
    .offers { padding: 0; background: transparent; }
    .offers-head { text-align: center; max-width: 620px; margin: 0 auto 56px; }
    .offers-head .title-line { margin: 20px auto 0; }
    .offers-head .section-sub { margin: 16px auto 0; }
    .offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
    .offer-card {
      position: relative; display: flex; flex-direction: column;
      background: var(--card); border: 1px solid var(--border);
      border-radius: 24px; padding: 32px 26px 26px; overflow: hidden;
      box-shadow: var(--shadow-sm); transition: transform .35s, box-shadow .35s;
    }
    .offer-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
    .offer-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
      background: linear-gradient(90deg, var(--amber), var(--terracotta));
    }
    .offer-card.oc-green::before { background: linear-gradient(90deg, #25D366, #128C7E); }
    .offer-card.oc-sage::before  { background: linear-gradient(90deg, var(--sage), var(--moss)); }
    .offer-badge {
      position: absolute; top: 16px; right: 16px;
      background: linear-gradient(135deg, var(--amber), var(--amber-dark));
      color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
      padding: 5px 12px; border-radius: 100px;
      box-shadow: 0 4px 12px -4px rgba(224,162,78,.5);
    }
    .offer-ico {
      width: 62px; height: 62px; border-radius: 18px; margin-bottom: 18px;
      background: radial-gradient(circle at 50% 38%, #fff3df, #f6e3c6 72%);
      display: flex; align-items: center; justify-content: center;
      font-size: 26px; color: var(--amber-dark); transition: transform .4s;
    }
    .offer-card:hover .offer-ico { transform: scale(1.08) rotate(-4deg); }
    .offer-card h4 {
      font-family: var(--ff-display); font-size: 21px; font-weight: 700;
      line-height: 1.18; margin: 0 0 10px; color: var(--bark);
    }
    .offer-card > p {
      font-size: 14.5px; color: var(--bark-soft); line-height: 1.62; flex: 1; margin-bottom: 20px;
    }
    .offer-pills {
      display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px;
    }
    .offer-pills span {
      font-size: 12px; font-weight: 600; color: var(--bark-soft);
      background: rgba(44,38,32,.07); padding: 4px 11px; border-radius: 100px;
    }
    .offer-pills span.good { background: rgba(120,200,80,.13); color: var(--moss); }
    .offer-pills span.bad  { background: rgba(220,60,60,.10); color: #c03030; text-decoration: line-through; }
    .offer-action {
      background: var(--amber-dark); color: #fff; border: none; cursor: pointer;
      font-family: var(--ff-body); font-size: 14px; font-weight: 700;
      padding: 13px 22px; border-radius: 100px; transition: all .25s; width: 100%; text-align: center;
    }
    .offer-action:hover { background: var(--terracotta); transform: scale(1.02); }
    .offer-action i { margin-right: 7px; }
    .offer-card.hl { background: linear-gradient(135deg, #fff9ee 0%, #fff2dd 100%); border-color: rgba(224,162,78,.3); }
    .offer-card.hl .offer-ico { background: radial-gradient(circle at 50% 38%, var(--amber), var(--amber-dark) 90%); color: #fff; }

    /* ════════ PHOTO GALLERY ════════ */
    .pgallery { padding: 100px 0 80px; }
    .pgallery-head { text-align: center; max-width: 620px; margin: 0 auto 56px; }
    .pgallery-head .title-line { margin: 20px auto 0; }
    .pgallery-head .section-sub { margin: 16px auto 0; }
    .pgallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .pimg {
      position: relative; border-radius: 20px; overflow: hidden; cursor: pointer;
      box-shadow: var(--shadow-sm); border: 1px solid var(--border);
      aspect-ratio: 4/3;
    }
    .pimg.tall  { aspect-ratio: 3/4; }
    .pimg.wide  { grid-column: span 2; aspect-ratio: 16/9; }
    .pimg img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform .6s cubic-bezier(.25,.46,.45,.94), filter .4s;
    }
    .pimg:hover img { transform: scale(1.06); filter: brightness(1.05) saturate(1.08); }
    .pimg::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(44,38,32,.55) 0%, transparent 55%);
      opacity: 0; transition: opacity .4s; border-radius: 20px;
    }
    .pimg:hover::after { opacity: 1; }
    .pimg-label {
      position: absolute; bottom: 14px; left: 16px; right: 16px; z-index: 2;
      color: #fff; font-family: var(--ff-display); font-size: 15px; font-weight: 600;
      opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s;
    }
    .pimg:hover .pimg-label { opacity: 1; transform: translateY(0); }
    .pimg-zoom {
      position: absolute; top: 12px; right: 12px; z-index: 2;
      width: 32px; height: 32px; border-radius: 50%; border: none;
      background: rgba(255,255,255,.85); color: var(--bark-soft); font-size: 13px;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s;
    }
    .pimg:hover .pimg-zoom { opacity: 1; transform: scale(1); }
    /* lightbox */
    .plb {
      position: fixed; inset: 0; z-index: 9999; background: rgba(10,6,2,.92);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity .3s;
    }
    .plb.open { opacity: 1; pointer-events: all; }
    .plb-img { max-width: 92vw; max-height: 88vh; border-radius: 14px; box-shadow: 0 40px 80px rgba(0,0,0,.6); display: block; }
    .plb-close {
      position: absolute; top: 18px; right: 22px; background: rgba(255,255,255,.15);
      border: none; color: #fff; font-size: 22px; width: 44px; height: 44px;
      border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background .25s;
    }
    .plb-close:hover { background: rgba(255,255,255,.3); }
    .plb-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,.13); border: none; color: #fff; font-size: 20px;
      width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
      display: flex; align-items: center; justify-content: center; transition: background .25s;
    }
    .plb-nav:hover { background: rgba(255,255,255,.28); }
    .plb-prev { left: 18px; } .plb-next { right: 18px; }
    .plb-counter { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
      color: rgba(255,255,255,.7); font-size: 13px; font-weight: 500; }
    @media (max-width: 768px) {
      .pgallery-grid { grid-template-columns: repeat(2, 1fr); }
      .pimg.wide { grid-column: span 1; aspect-ratio: 4/3; }
      .pimg.tall { aspect-ratio: 4/3; }
    }
    @media (max-width: 480px) {
      .pgallery-grid { gap: 10px; }
    }

/* ─────────── Kona Fit Banner ─────────── */
.gym-section{
  padding:14px 16px 16px;
  background:#060606;
  position:relative;overflow:hidden;
  margin:0 16px;
  border-radius:26px;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Kona Fit — logo pinned to true center of the 1:1 square */
.gym-section{padding:0 !important;}
.gym-glass-card{
  padding:0 !important;border:none !important;
  width:100% !important;height:100% !important;
  box-sizing:border-box !important;border-radius:26px !important;
  position:relative !important;overflow:hidden !important;
}
.gym-card-inner{
  position:absolute !important;inset:12px !important;z-index:1 !important;
}
/* eyebrow at top */
.gym-eyebrow-tag{
  position:absolute !important;top:0;left:0;right:0;
  text-align:center !important;margin:0 !important;
}
/* logo at exact center */
.gym-logo-wrap{
  position:absolute !important;
  top:50% !important;left:50% !important;
  transform:translate(-50%,-50%) scale(0.85) !important;
  margin:0 !important;
}
.gym-section.gym-visible .gym-logo-wrap{
  opacity:1 !important;
  transform:translate(-50%,-50%) scale(1) !important;
}
.gym-logo-img{width:182px !important;height:182px !important;}
.gym-logo-ring{width:182px !important;height:182px !important;}
/* fire title + stats + tap anchored to bottom */
.gym-fire-title{
  position:absolute !important;
  bottom:58px !important;left:0 !important;right:0 !important;
  font-size:clamp(16px,4.5vw,21px) !important;
  margin:0 !important;line-height:1.1 !important;
}
.gym-stats-row{
  position:absolute !important;
  bottom:20px !important;left:0 !important;right:0 !important;
  display:flex !important;justify-content:center !important;
  gap:10px !important;margin:0 !important;
}
.gym-tap-hint{
  position:absolute !important;
  bottom:5px !important;left:0 !important;right:0 !important;
  text-align:center !important;margin:0 !important;
}
@media(min-width:641px){
  .gym-section{margin:0 32px;border-radius:32px;}
}
.gym-section::before{
  content:'';position:absolute;inset:-50px;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 80%,rgba(212,148,10,0.09) 0%,transparent 65%);
}
.gym-glass-card{
  position:relative;border-radius:22px;overflow:hidden;
  background:linear-gradient(170deg,#0E0B04 0%,#080808 100%);
  border:1px solid rgba(212,148,10,0.28);
  padding:22px 18px 20px;
  cursor:pointer;
  box-shadow:0 4px 24px rgba(0,0,0,0.8),inset 0 1px 0 rgba(212,148,10,0.10);
  will-change:transform;transition:border-color .3s,box-shadow .3s;
  text-align:center;
}
.gym-glass-card::before{
  content:'';position:absolute;inset:0;border-radius:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.04;pointer-events:none;z-index:0;
}
.gym-glass-card::after{
  content:'';position:absolute;inset:0;border-radius:22px;
  background:linear-gradient(130deg,rgba(212,148,10,0.08) 0%,transparent 45%,rgba(212,148,10,0.04) 100%);
  pointer-events:none;z-index:0;opacity:0;transition:opacity .35s;
}
.gym-glass-card:active::after,.gym-glass-card:hover::after{opacity:1;}
.gym-glass-card:active{transform:scale(0.983);}
.gym-card-inner{position:relative;z-index:1;}

/* eyebrow */
.gym-eyebrow-tag{
  font-size:9px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  color:rgba(212,148,10,0.7);margin-bottom:18px;
  opacity:0;transition:opacity .4s ease;
}

/* ── Logo ── */
.gym-logo-wrap{
  position:relative;display:inline-block;
  margin:0 auto 16px;
  opacity:0;transform:scale(0.85);
  transition:opacity .55s ease .05s,transform .55s cubic-bezier(0.22,1.2,0.36,1) .05s;
}
.gym-logo-img{
  width:200px;height:200px;object-fit:contain;display:block;
  position:relative;z-index:2;
  transition:transform .35s cubic-bezier(0.34,1.56,0.64,1),filter .35s;
  filter:drop-shadow(0 0 12px rgba(212,148,10,0.25));
}
.gym-glass-card:active .gym-logo-img,.gym-glass-card:hover .gym-logo-img{
  transform:scale(1.07);
  filter:drop-shadow(0 0 22px rgba(212,148,10,0.55)) drop-shadow(0 0 8px rgba(255,140,0,0.4));
}
/* pulsing ring behind logo — driven by JS */
.gym-logo-ring{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:200px;height:200px;border-radius:50%;z-index:1;
  box-shadow:0 0 0 0 rgba(212,148,10,0);
}

/* ── Fire title ── */
.gym-fire-title{
  font-size:clamp(28px,8.5vw,38px);font-weight:900;
  letter-spacing:2px;text-transform:uppercase;
  line-height:1.05;margin-bottom:18px;
  display:block;word-break:break-word;
  /* Single shimmer gradient on the container — 1 GPU layer, no repaints */
  background:linear-gradient(90deg,#fff 0%,#FFE8A0 18%,#ff8c00 35%,#D4940A 50%,#ff8c00 65%,#FFE8A0 82%,#fff 100%);
  background-size:250% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:none;
}
.fire-letter{
  display:inline-block;
  opacity:0;transform:translateY(16px) scale(0.8);
  transition:opacity .35s ease,transform .4s cubic-bezier(0.22,1.4,0.36,1);
  will-change:opacity,transform;
}

/* Shimmer sweeps once on entry, then loops slowly — single element, zero repaint */
@keyframes fireShimmer{
  0%  {background-position:100% center;}
  100%{background-position:-100% center;}
}
.gym-section.gym-visible .fire-letter{
  opacity:1;transform:translateY(0) scale(1);
}
/* fireShimmer removed — static gradient, zero ongoing paint cost */
/* cleanup will-change after entry (saves GPU memory) */
.gym-section.gym-visible .fire-letter.settled{
  will-change:auto;
}

/* stats */
.gym-stats-row{
  display:flex;gap:10px;margin-bottom:14px;justify-content:center;
}
.gym-stat{
  flex:1;max-width:140px;padding:10px 8px;text-align:center;
  background:rgba(212,148,10,0.07);border-radius:12px;
  border:1px solid rgba(212,148,10,0.16);
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease;
}
.gs-num{display:block;font-size:15px;font-weight:900;color:#D4940A;line-height:1.1;}
.gs-label{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,0.38);margin-top:3px;}

/* tap hint */
.gym-tap-hint{
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(212,148,10,0.55);
  opacity:0;transition:opacity .4s ease .4s;
}

/* ── visible states ── */
.gym-section.gym-visible .gym-eyebrow-tag{opacity:1;}
.gym-section.gym-visible .gym-logo-wrap{opacity:1;transform:scale(1);}
.gym-section.gym-visible .gym-stat{opacity:1;transform:translateY(0);}
.gym-section.gym-visible .gym-stat:nth-child(2){transition-delay:.1s;}
.gym-section.gym-visible .gym-tap-hint{opacity:1;}

/* border breathe — opacity-only, GPU composited, zero repaint */
@keyframes gymGlow{0%,100%{opacity:.55;}50%{opacity:1;}}
.gym-glass-card::after{
  content:'';position:absolute;inset:-1px;border-radius:21px;
  background:transparent;
  box-shadow:0 0 22px 4px rgba(212,148,10,0.18);
  pointer-events:none;z-index:0;opacity:.55;
}
.gym-section.gym-visible .gym-glass-card::after{animation:gymGlow var(--glow-dur,3.5s) ease-in-out infinite;}

/* ripple */
.gym-ripple{
  position:absolute;border-radius:50%;
  background:rgba(212,148,10,0.18);
  transform:translate(-50%,-50%) scale(0);
  animation:gymRipple .65s ease-out forwards;
  pointer-events:none;z-index:2;
}
@keyframes gymRipple{
  to{width:340px;height:340px;opacity:0;transform:translate(-50%,-50%) scale(1);}
}

@media(min-width:768px){
  .gym-logo-img{width:240px;height:240px;}
  .gym-logo-ring{width:240px;height:240px;}
  .gym-glass-card:hover{border-color:rgba(212,148,10,0.55);}
}

/* ── desktop upgrades (hover tilt only above 768px) ── */
@media(min-width:768px){
  .gym-section{padding:36px 24px;}
  .gym-glass-card{padding:30px 28px 26px;}
  .gym-card-title{font-size:40px;}
  .gym-glass-card:hover{border-color:rgba(212,148,10,0.55);box-shadow:0 10px 40px rgba(0,0,0,.7),0 0 28px rgba(212,148,10,0.12);}
  .gym-explore-btn:hover{background:#f0b429;box-shadow:0 0 30px rgba(212,148,10,0.50);}
}

/* ─────────── Visual Menu Cards ─────────── */
.vm-section { background: var(--cream-2); padding: 64px 0 76px; }
.vm-head    { text-align: center; margin-bottom: 44px; }
.vm-cat     { margin-bottom: 40px; }
.vm-cat-hd  { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vm-cat-hd h3 { font-size: 14px; font-weight: 800; color: #3d1f00; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.vm-cat-hd::after { content:''; flex:1; height:1.5px; background: linear-gradient(90deg, rgba(var(--amber-rgb),.4), transparent); border-radius:99px; }
.vm-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }

/* Card */
.vm-card { border-radius: 13px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(61,31,0,.08); cursor: pointer; position: relative; transition: transform .22s ease, box-shadow .22s ease; -webkit-tap-highlight-color: transparent; }
.vm-card:hover, .vm-card.vm-held { transform: translateY(-5px) scale(1.025); box-shadow: 0 12px 32px rgba(61,31,0,.18); z-index: 5; }
.vm-card:active { transform: scale(.96); transition: transform .08s; }

/* Thumbnail */
.vm-thumb { position:relative; overflow:hidden; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; }
.vm-thumb img.vm-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.vm-card:hover .vm-img, .vm-card.vm-held .vm-img { transform: scale(1.08); }
.vm-ph { font-size:2.6rem; z-index:1; pointer-events:none; transition:transform .3s ease; line-height:1; }
.vm-card:hover .vm-ph, .vm-card.vm-held .vm-ph { transform: scale(1.18) rotate(-6deg); }
.vm-veil { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.05) 50%, transparent 100%); opacity:0; z-index:2; transition:opacity .25s; display:flex; flex-direction:column; justify-content:flex-end; padding:8px; }
.vm-card:hover .vm-veil, .vm-card.vm-held .vm-veil { opacity:1; }
.vm-veil-n { font-size:9.5px; font-weight:700; color:#fff; line-height:1.35; margin-bottom:2px; }
.vm-veil-p { font-size:12px; font-weight:800; color:var(--amber); }

/* Info strip */
.vm-info { padding: 6px 8px 9px; }
.vm-irow { display:flex; align-items:flex-start; gap:4px; }
.vm-name { font-size:9.5px; font-weight:600; color:#3d1f00; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vm-price { font-size:10.5px; font-weight:800; color:var(--amber-dark); margin-top:3px; }
.vm-dot { flex-shrink:0; width:7px; height:7px; border-radius:50%; margin-top:2px; }
.vm-dot.v { background:#22c55e; }
.vm-dot.n { background:#ef4444; }
.vm-dot.b { background: conic-gradient(#22c55e 50%,#ef4444 50%); }

/* Category palette */
.snack-c    { background: linear-gradient(145deg,#fff5d5,#ffcf5a 65%,#f0a015); }
.shawarma-c { background: linear-gradient(145deg,#ffe4cc,#f08848 65%,#c85010); }
.wrap-c     { background: linear-gradient(145deg,#eef9df,#c6da60 65%,#8a9c28); }
.maggi-c    { background: linear-gradient(145deg,#fffae0,#fdd44a 65%,#d0a008); }
.bev-c      { background: linear-gradient(145deg,#e4f4ff,#72c4f4 65%,#2884cc); }
.starter-c  { background: linear-gradient(145deg,#22304a,#3a4e88 65%,#5060b0); }
.rice-c     { background: linear-gradient(145deg,#1e1438,#3f2e70 65%,#6245a8); }

/* Add-ons row */
.vm-addon-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:10px; }
.vm-addon { background:rgba(var(--amber-rgb),.09); border:1px solid rgba(var(--amber-rgb),.22); border-radius:9px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.vm-addon-n { font-size:11px; font-weight:600; color:#3d1f00; }
.vm-addon-p { font-size:12px; font-weight:800; color:var(--amber-dark); white-space:nowrap; }

/* Kona Cloud */
.vm-cloud-wrap { background:linear-gradient(135deg,#0f172a 0%,#1c2d52 55%,#0f1f3d 100%); border-radius:20px; padding:36px 20px 44px; margin-top:52px; position:relative; overflow:hidden; }
.vm-cloud-wrap::before { content:''; position:absolute; top:-70px; right:-70px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(255,210,100,.1),transparent 70%); pointer-events:none; }
.vm-cloud-hd { text-align:center; margin-bottom:30px; }
.vm-cloud-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:99px; padding:6px 20px; font-size:12px; font-weight:700; color:rgba(255,255,255,.9); letter-spacing:.5px; text-transform:uppercase; margin-bottom:14px; }
.vm-cloud-title { font-size:22px; font-weight:800; color:#fff; margin:0 0 10px; line-height:1.25; }
.vm-cloud-desc { font-size:13px; color:rgba(255,255,255,.6); max-width:350px; margin:0 auto; line-height:1.7; }
.vm-cloud-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:14px; }
.vm-cloud-tag { font-size:11px; font-weight:600; background:rgba(255,255,255,.1); color:rgba(255,255,255,.75); border-radius:99px; padding:4px 12px; }
.vm-cloud-sub { font-size:11px; font-weight:700; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.8px; margin:28px 0 10px; }
.vm-cloud-wrap .vm-card { background:rgba(255,255,255,.07); box-shadow:none; border:1px solid rgba(255,255,255,.08); }
.vm-cloud-wrap .vm-card:hover, .vm-cloud-wrap .vm-card.vm-held { background:rgba(255,255,255,.13); box-shadow:0 8px 28px rgba(0,0,0,.35); }
.vm-cloud-wrap .vm-name { color:rgba(255,255,255,.88); }
.vm-cloud-wrap .vm-price { color:#ffd080; }

@media(max-width:640px){
  .vm-section { padding:44px 0 52px; }
  .vm-grid { gap:6px; }
  .vm-cloud-wrap { border-radius:16px; padding:24px 14px 32px; margin-top:40px; }
  .vm-cloud-title { font-size:18px; }
  .vm-cloud-desc { font-size:12px; }
  .vm-ph { font-size:2.1rem; }
  .vm-name { font-size:8.5px; }
  .vm-price { font-size:9.5px; }
  .vm-info { padding:5px 6px 7px; }
}

/* ═══════════════════════════════════════════
   LAYOUT CLEANUP — rhythm, motion, decoration
   ═══════════════════════════════════════════ */

/* 1 · Consistent section vertical rhythm
      Before: 34px / 56px / 70px / 80px / 100px / 120px scattered.
      After:  88px standard, 64px compact (stats/quick-order), 100px final. */
.story       { padding: 88px 0; }
.combos      { padding: 88px 0; }
.picks       { padding: 88px 0; }
.offers      { padding: 0; }
.pgallery    { padding: 88px 0 72px; }
.reviews     { padding: 88px 0; }
.order       { padding: 72px 0; }
.visit       { padding: 88px 0 68px; }
.vm-section  { background: var(--cream-2); padding: 88px 0; }
.stats       { padding: 52px 0; }
.quick-order { padding: 72px 0 56px; }
.final       { padding: 96px 24px 104px; margin: 0 24px; }

/* 2 · Simplify .title-line — gradient bar on every heading was too busy */
.title-line {
  width: 40px;
  height: 2px;
  background: var(--amber);
  border-radius: 0;
  margin-top: 14px;
}

/* 3 · Normalize section head spacing */
.combos-head,
.picks-head,
.offers-head,
.pgallery-head,
.reviews-head,
.visit-head,
.quick-order-head { margin-bottom: 48px; }

/* 4 · Tone down picks-head script animation — triple anims competed too hard */
.picks-head .script {
  animation: m92Float 5s ease-in-out infinite;
  text-shadow: none;
  background: transparent;
}
.picks-head .script::before,
.picks-head .script::after { animation: none; opacity: 0.55; }
.picks-head .script span {
  background: linear-gradient(90deg, var(--terracotta), var(--amber-dark));
  background-size: 100% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: none;
}

/* 5 · Stop header order button pulsing — already high-contrast enough */
.header-btn { animation: none; }

/* 6 · Reduce icon glow to just float — glow loop drew the eye away from content */
.glow-ico       { animation: floaty 5s ease-in-out infinite; box-shadow: none; }
.glow-ico-green { animation: floaty 5s ease-in-out infinite; box-shadow: none; }

/* 7 · Remove save-badge bounce on hover — already has colour + scale */
.combo:hover .combo-save { animation: none; }

/* 8 · Subtle, consistent card hover lift across all card types */
.combo:hover,
.offer-card:hover,
.pick:hover,
.vcard:hover,
.review:hover { transform: translateY(-5px); }

/* 9 · Uniform grid gaps */
.combos-grid { gap: 20px; }
.picks-grid  { gap: 20px; }
.offers-grid { gap: 20px; }
.reviews-grid { gap: 20px; }

/* 10 · Remove floating story deco orbs */
.story-deco { display: none; }

/* 11 · Mobile rhythm cleanup */
@media (max-width: 640px) {
  .story, .combos, .picks, .offers,
  .pgallery, .reviews, .visit { padding-top: 60px; padding-bottom: 60px; }
  .quick-order { padding-top: 52px; padding-bottom: 40px; }
  .order { padding: 52px 0; }
  .final { padding: 72px 20px 80px; margin: 0 12px; }
}

/* ═══════════════════════════════════════════
   POLISH PASS — anti-patterns, a11y, type
   ═══════════════════════════════════════════ */

/* A · Remove card top-strip
      Rounded card + coloured accent stripe is a cardinal AI-slop tell.
      Replace with a subtle top border that provides the same separation
      without the gradient weight. */
.combo::before,
.offer-card::before { display: none; }
.combo        { border-top: 1.5px solid rgba(var(--amber-rgb), .32); }
.offer-card   { border-top: 1.5px solid rgba(var(--amber-rgb), .32); }
.offer-card.oc-green { border-top-color: rgba(37, 211, 102, .38); }
.offer-card.oc-sage  { border-top-color: rgba(167, 174, 87,  .38); }

/* B · Focus-visible states (WCAG 2.4.7 Focus Visible, Level AA)
      Suppresses ugly default outline on mouse clicks while preserving
      a clear ring for keyboard / AT users. */
.btn:focus-visible,
.sun-btn:focus-visible,
.combo-add:focus-visible,
.combo-tab:focus-visible,
.pick-add:focus-visible,
.offer-action:focus-visible,
.menu-open-btn:focus-visible,
.menu-preview-order-btn:focus-visible,
.nav-toggle:focus-visible,
.footer-socials a:focus-visible,
.sun-menu a:focus-visible,
.sun-menu button:focus-visible,
.plb-close:focus-visible,
.plb-nav:focus-visible,
.pimg-zoom:focus-visible {
  outline: 2.5px solid var(--amber-dark);
  outline-offset: 3px;
}
/* Suppress default UA outline only when :focus-visible is not triggered */
.btn:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* C · Button active / press feedback */
.btn:active              { transform: translateY(1px) scale(.985); }
.btn-primary:active      { box-shadow: 0 3px 8px -4px rgba(var(--amber-rgb), .7); }
.btn-wa:active           { background: #128C7E; }
.combo-add:active,
.pick-add:active,
.offer-action:active     { transform: scale(.96); }

/* D · ALL CAPS letter-spacing (must be ≥ 0.06em per typography rules)
      Previously many labels were using pixel values or .4px — too tight. */
.combo-tag        { letter-spacing: 0.07em; }
.pick-tag         { letter-spacing: 0.07em; }
.combo-save .lbl  { letter-spacing: 0.09em; }
.offer-badge      { letter-spacing: 0.07em; }
.vm-cloud-badge   { letter-spacing: 0.07em; }
.vm-cat-hd h3     { letter-spacing: 0.07em; }
.chat-card-label  { letter-spacing: 0.08em; }
.chat-card-badge  { letter-spacing: 0.06em; }
.combo-time       { letter-spacing: 0.04em; }

/* E · Section title weight + tracking refinement */
.section-title { font-weight: 700; letter-spacing: -0.018em; }
.section-sub   { font-size: 16.5px; line-height: 1.68; color: var(--bark-soft); }

/* F · Hero h1 tighter tracking at large size */
@media (min-width: 1024px) {
  .hero h1 { letter-spacing: -3.5px; }
}

/* G · Reduced-motion catch-all for marquees + ribbon
      The hero, picks-head, and icon glows are already covered above.
      Marquee rows and the ribbon slide need explicit pausing. */
@media (prefers-reduced-motion: reduce) {
  .ribbon-row              { animation: none !important; }
  .marquee-row,
  #galleryRow,
  .honest-marquee-row,
  #honestRow               { animation-play-state: paused !important; }
  .anim                    { transition: none !important; opacity: 1 !important; transform: none !important; }
  .split .word > span      { transform: none !important; transition: none !important; }
  .combo-icon,
  .offer-ico,
  .pick-img                { transition: none !important; }
  .cloud                   { animation: none !important; }
}

/* H · Stat counter numbers — use tabular numerics */
.stat .num { font-variant-numeric: tabular-nums; }

/* I · Footer: tighten mobile stacking */
@media (max-width: 640px) {
  .footer-grid { gap: 28px; }
  .footer-about { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANTI-SLOP PASS — taste-skill audit
   Three targeted fixes: decorative shimmer, double flourish on gradient text,
   and the triple-layer CTA gradient. Everything else is brand-justified.
   ───────────────────────────────────────────────────────────────────────────── */

/* 1 · Gallery shimmer — "skeleton shimmer as decoration" anti-pattern.
       The amber hover glow (.vibes-glow) stays: it's a tasteful 18% tint.
       The sweep animation adds no information and signals AI-default. */
.vibes-shimmer { display: none; }

/* 2 · Hero feature card headline drop-shadows.
       Gradient clip-text already carries visual interest — the additional
       filter: drop-shadow is a second competing flourish on one element. */
.feat-photo h4 { filter: none; }
.feat-night h4 { filter: none; }

/* 0 · Hero text — default golden-hour state.
       lead, meta .k, and meta .s were all inheriting var(--bark) (dark brown)
       on the amber sky. Changed to warm light cream tones.
       Morning/afternoon restore dark text because those skies fade to pale cream
       in the lower section (where the hero content sits). Night/dusk already have
       their own lead/h1 overrides; meta now inherits the lighter base correctly. */
.hero p.lead              { color: rgba(50, 22, 5, 0.82); }
/* Night/dusk need light text — these must come AFTER the dark override above */
.hero--night p.lead, .hero--night .lead { color: rgba(210,220,255,.90); }
.hero--dusk  p.lead, .hero--dusk  .lead { color: rgba(255,240,210,.92); }
.hero-meta .k             { color: rgba(255, 248, 228, 0.95); }
.hero-meta .s             { color: rgba(255, 232, 190, 0.75); }

/* Restore dark meta text for lighter morning + afternoon skies */
.hero--morning .hero-meta .k,
.hero--afternoon .hero-meta .k { color: var(--bark); }
.hero--morning .hero-meta .s,
.hero--afternoon .hero-meta .s { color: var(--bark-soft); }

/* 3 · Final CTA section: collapse three stacked backgrounds into one clean wash.
       Original had two linear-gradients + var(--peach), producing a floating-island
       with 48px radius — the canonical AI-generated CTA section shape.
       Replaced with a single gentle warm tint; radius tightened to 28px. */
.final {
  background: rgba(var(--amber-rgb), .07);
  border-radius: 28px;
  border: 1px solid rgba(var(--amber-rgb), .18);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MENU CARD COMPACT PASS
   1. Square thumb: aspect-ratio 3/4 → 1 (matches square food photos perfectly)
   2. 4-col grid desktop → less scrolling; responsive 3→2 at smaller widths
   3. Slight info-row tightening
   ───────────────────────────────────────────────────────────────────────────── */
.vm-thumb { aspect-ratio: 1; }
.vm-grid  { grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 900px) { .vm-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 580px) { .vm-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; } }
.vm-info  { padding: 5px 7px 8px; }

/* ─────────────────────────────────────────────────────────────────────────────
   MOTION PASS — emilkowalski-motion
   1. Scroll-reveal spring: spring easing replaces generic ease; travel 42→20 px
   2. Cart FAB badge pop: scale burst confirms add-to-cart action
   Reduced-motion is handled by the !important catch-all above (line ~4115)
   for .anim, plus an explicit suppression for the badge animation below.
   ───────────────────────────────────────────────────────────────────────────── */

/* 1 · Scroll-reveal spring -------------------------------------------------- */
.anim {
  transition:
    opacity  0.55s cubic-bezier(.22, 1, .36, 1),
    transform 0.55s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0s);
}
.anim.up:not(.in-view){ transform: translateY(20px); }
.anim.left:not(.in-view){ transform: translateX(-28px); }
.anim.right:not(.in-view){ transform: translateX(28px); }
.anim.zoom:not(.in-view){ transform: scale(.94); }

/* 2 · Cart FAB badge pop ---------------------------------------------------- */
@keyframes kona-badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.44); }
  68%  { transform: scale(0.86); }
  100% { transform: scale(1); }
}
#konaCartCount.bump {
  animation: kona-badge-pop 0.32s cubic-bezier(.22, 1, .36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  #konaCartCount.bump { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOD PHOTO POP-OUT + 3D PASS
   bg removal: card-thumb bg (#ede7de) matched to photo grey → plate emerges
   pop: scale(1.18) translateY(-10%) + overflow:visible → plate above card edge
   3D: tiered warm box-shadow on card + elliptical contact-shadow at plate base
   ───────────────────────────────────────────────────────────────────────────── */

/* Card: allow image overflow, elevate with warm tiered shadow */
.vm-card.vm-has-photo {
  overflow: visible;
  box-shadow:
    0 2px 5px  rgba(78,52,24,.06),
    0 10px 26px rgba(78,52,24,.13),
    0 28px 50px rgba(78,52,24,.08);
}
.vm-card.vm-has-photo:hover,
.vm-card.vm-has-photo.vm-held {
  transform: translateY(-7px) scale(1.03);
  box-shadow:
    0 4px 10px  rgba(78,52,24,.1),
    0 16px 38px rgba(78,52,24,.2),
    0 42px 66px rgba(78,52,24,.12);
}

/* Thumb: allow overflow, bg matches photo bg so plate blends in seamlessly */
.vm-has-photo .vm-thumb {
  overflow: visible;
  background: #ede7de;
  border-radius: 13px 13px 0 0;
}

/* Elliptical contact shadow at plate base — the 3D "ground" cue */
.vm-has-photo .vm-thumb::before {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 5px;
  left: 50%;
  width: 62%;
  height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(78,52,24,.34), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  transition: opacity .4s ease;
}
.vm-has-photo:hover .vm-thumb::before,
.vm-has-photo.vm-held .vm-thumb::before {
  opacity: 0.55;
}

/* Info strip: clean white, rounded bottom, above overflow image */
.vm-has-photo .vm-info {
  position: relative;
  z-index: 3;
  background: #fff;
  border-radius: 0 0 13px 13px;
  border-top: 1px solid rgba(125,85,50,.07);
}

/* Image: contain (vs cover) so full plate visible; pop above card with scale+shift */
.vm-has-photo .vm-thumb img.vm-img {
  object-fit: contain !important;
  transform: scale(1.18) translateY(-10%);
  transform-origin: bottom center;
  z-index: 2;
  padding: 0 4%;
  transition: transform .45s cubic-bezier(.22,1,.36,1) !important;
}
.vm-has-photo:hover .vm-thumb img.vm-img,
.vm-has-photo.vm-held .vm-thumb img.vm-img {
  transform: scale(1.24) translateY(-13%);
}

/* Veil above everything when hovered */
.vm-has-photo .vm-veil {
  z-index: 4;
  border-radius: 13px 13px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .vm-has-photo .vm-thumb img.vm-img { transform: none !important; transition: none !important; }
}
/* ── Offers — interactive auto-scroll carousel ── */
@media(max-width:640px){
  .offers-marquee-wrap { overflow-x:scroll; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
  .offers-marquee-wrap::-webkit-scrollbar { display:none; }
  .offers-grid { display:flex; flex-wrap:nowrap; gap:14px; width:max-content; animation:none !important; padding:0 12px 4px; }
  .offer-card { width:240px; flex-shrink:0; opacity:1 !important; transform:none !important; padding:18px 16px 16px; }
  .offer-ico { width:44px; height:44px; font-size:20px; border-radius:13px; margin-bottom:10px; }
  .offer-card h4 { font-size:16px; margin:0 0 7px; }
  .offer-card > p { font-size:12.5px; line-height:1.52; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .offer-pills { gap:5px; margin-bottom:12px; }
  .offer-pills span { font-size:11px; padding:3px 9px; }
  .offer-action { font-size:13px; padding:10px 16px; }
  .offer-badge { font-size:9.5px; padding:4px 10px; top:12px; right:12px; }
}
/* ── Honest food cards — slightly smaller on mobile ── */
@media(max-width:640px){
  .honest-marquee-row .honest-card { flex:0 0 265px; width:265px; min-height:300px; }
}
/* ── Hero "View Menu" button upgrade ── */
.hero-btns .btn-ghost { background:rgba(40,20,5,.14); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-color:rgba(40,20,5,.22); color:var(--bark); font-weight:600; }
.hero--night .hero-btns .btn-ghost,.hero--dusk .hero-btns .btn-ghost { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff; }
/* ── Hero badge mobile trim ── */
@media(max-width:640px){ .badge-sub{display:none} .hero-badge{font-size:12.5px;padding:6px 12px 6px 8px} }
/* ── Gallery cards — compact strip on mobile ── */
/* ── Touch-pause marquees ── */
.gallery:active .marquee-row,.honest-food:active .honest-marquee-row{animation-play-state:paused}
/* ── Hero zone pills ── */
.hero-anchors { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.hero-anchor-pill { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.28); border-radius:99px; padding:9px 20px; font-size:13px; font-weight:600; color:#fff; text-decoration:none; transition:background .2s,transform .18s; }
.hero-anchor-pill:hover { background:rgba(255,255,255,.28); transform:translateY(-2px); }
.hero-anchor-pill i { font-size:12px; opacity:.8; }
.hero--morning .hero-anchor-pill,.hero--afternoon .hero-anchor-pill { background:rgba(44,38,32,.1); border-color:rgba(44,38,32,.2); color:var(--bark); }
#food,#vibe,#deliveries { display:block; height:0; overflow:hidden; scroll-margin-top:72px; }
#vm-section { scroll-margin-top:80px; }
@media(max-width:640px){ .hero-anchor-pill { font-size:12px; padding:8px 15px; } }

/* ========================================================================== 
   Layer 03: kona-gallery-rebuild
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
.kona-gallery{position:relative;overflow:hidden;padding:88px 0 80px;isolation:isolate}
    .kona-gallery .container{position:relative;z-index:1}
    .kona-gallery::before{content:"";position:absolute;inset:0;background:
      radial-gradient(circle at 15% 26%, rgba(255,220,154,.22), transparent 34%),
      radial-gradient(circle at 86% 38%, rgba(239,149,73,.22), transparent 31%),
      linear-gradient(180deg,#78b7d5 0%,#93c6dc 17%,#c4b99d 39%,#e7a05f 63%,rgba(250,239,225,.82) 100%);pointer-events:none}
    .kona-gallery-head{max-width:720px;margin:0 auto 28px;text-align:center}
    .kona-gallery-shell{position:relative;overflow:hidden;padding:18px;border-radius:34px;border:1px solid rgba(102,61,18,.11);background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,248,240,.58));box-shadow:0 24px 70px rgba(44,24,8,.08)}
    .kona-gallery-fade{position:absolute;top:0;bottom:0;width:84px;pointer-events:none;z-index:3}
    .kona-gallery-fade.left{left:0;background:linear-gradient(90deg, rgba(250,242,232,1), rgba(250,242,232,0))}
    .kona-gallery-fade.right{right:0;background:linear-gradient(270deg, rgba(250,242,232,1), rgba(250,242,232,0))}
    .kona-gallery-track{display:flex;gap:16px;width:max-content;animation:konaGalleryFlow 52s linear infinite;will-change:transform;position:relative;z-index:1}
    .kona-gallery.is-paused .kona-gallery-track,.kona-gallery:hover .kona-gallery-track{animation-play-state:paused}
    @keyframes konaGalleryFlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
    .kona-gallery-card{position:relative;flex:0 0 auto;width:min(420px,86vw);aspect-ratio:1/1;border:0;padding:0;border-radius:24px;overflow:hidden;background:#f5ecdf;box-shadow:0 14px 40px rgba(57,34,10,.14);cursor:pointer;transform:translateZ(0)}
    .kona-gallery-card.wide{width:min(420px,86vw);aspect-ratio:1/1}
    .kona-gallery-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease, filter .45s ease;filter:saturate(1.03) contrast(1.03)}
    .kona-gallery-card:hover img{transform:scale(1.04)}
    .kona-gallery-overlay{position:absolute;inset:auto 16px 16px 16px;display:flex;align-items:flex-end;justify-content:flex-start;gap:10px;color:#fff;text-align:left;pointer-events:none}
    .kona-gallery-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(15,10,6,.46);backdrop-filter:blur(10px);font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
    .kona-gallery-label{max-width:70%;font-size:14px;font-weight:700;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.4)}
    .kona-gallery-note{margin:18px auto 0;max-width:680px;text-align:center;font-size:14px;color:var(--bark-soft)}
    .kona-gallery-viewer{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(16,10,5,.76)}
    .kona-gallery-viewer.open{display:flex}
    .kona-gallery-viewer-inner{position:relative;width:min(920px,100%);border-radius:28px;overflow:hidden;background:rgba(255,250,244,.96);box-shadow:0 30px 90px rgba(0,0,0,.32)}
    .kona-gallery-viewer-inner img{display:block;width:100%;max-height:min(76vh,840px);object-fit:cover;background:#f3ebdf}
    .kona-gallery-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px 18px;color:#23160d}
    .kona-gallery-close,.kona-gallery-nav{appearance:none;border:0;background:rgba(34,20,9,.88);color:#fff;cursor:pointer}
    .kona-gallery-close{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:999px}
    .kona-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:999px}
    .kona-gallery-prev{left:14px}
    .kona-gallery-next{right:14px}
    .kona-gallery-counter{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.72}
    @media (max-width: 640px){
      .kona-gallery{padding:72px 0 66px}
      /* Give the shell more of the viewport and an even 12px inset, then size the
         card to fill that inset exactly, so a single card shows the same border
         on all four sides instead of bleeding off the right under overflow:hidden. */
      .kona-gallery .container{padding-left:14px;padding-right:14px}
      .kona-gallery-shell{padding:12px;border-radius:26px}
      .kona-gallery-track{gap:12px}
      .kona-gallery-card{width:calc(100vw - 52px)}
      .kona-gallery-card.wide{width:calc(100vw - 52px)}
      .kona-gallery-fade{width:42px}
      .kona-gallery-viewer{padding:12px}
      .kona-gallery-viewer-inner{border-radius:22px}
      .kona-gallery-viewer-inner img{max-height:68vh}
      .kona-gallery-viewer-bar{padding:13px 14px 15px}
    }
    @media (prefers-reduced-motion: reduce){
      .kona-gallery-track{animation:none}
      .kona-gallery-card img{transition:none}
    }

/* ========================================================================== 
   Layer 04: table-booking-party-size
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
.kbsz input{display:none}.kbsz span{display:inline-block;padding:8px 16px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s;background:var(--cream-2);color:var(--bark)}.kbsz input:checked+span{background:var(--amber);border-color:var(--amber-dark);color:#fff}@media(max-width:540px){#konaBookForm .kbgrid{grid-template-columns:1fr!important}}

/* ========================================================================== 
   Layer 05: order-cta-interactions
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
    /* WhatsApp green interaction for every Order / WhatsApp CTA */
    button[onclick="order()"],
    a[onclick="order()"],
    .sun-menu-wa {
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
      -webkit-tap-highlight-color: transparent;
    }

    button[onclick="order()"],
    a[onclick="order()"] {
      box-shadow:
        0 0 0 0 rgba(var(--amber-rgb), .28),
        0 12px 28px -10px rgba(var(--amber-rgb), .85);
    }

    button[onclick="order()"]:hover,
    button[onclick="order()"]:focus-visible,
    a[onclick="order()"]:hover,
    a[onclick="order()"]:focus-visible,
    .sun-menu-wa:hover,
    .sun-menu-wa:focus-visible {
      background: #25D366 !important;
      color: #fff !important;
      border-color: #25D366 !important;
      transform: translateY(-3px);
      box-shadow:
        0 0 0 6px rgba(37, 211, 102, .16),
        0 16px 34px -9px rgba(37, 211, 102, .95) !important;
    }

    button[onclick="order()"]:active,
    a[onclick="order()"]:active,
    .sun-menu-wa:active {
      background: #1DA851 !important;
      color: #fff !important;
      border-color: #1DA851 !important;
      transform: translateY(-1px) scale(.98);
      box-shadow:
        0 0 0 5px rgba(37, 211, 102, .18),
        0 10px 24px -10px rgba(37, 211, 102, .9) !important;
    }

/* ========================================================================== 
   Layer 06: weekly-gift-launcher
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ---- Floating Offers Magnet ---- */
#konaOffersMagnet{ position:fixed; left:18px; bottom:84px; z-index:9990; border:0; cursor:pointer; padding:0; background:transparent; -webkit-tap-highlight-color:transparent; animation:komBob 3.2s ease-in-out infinite; will-change:transform; }
#konaOffersMagnet .kom-inner{ position:relative; z-index:2; display:flex; align-items:center; gap:9px; padding:14px 22px 14px 18px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); border:1px solid rgba(255,255,255,.5); box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -2px 6px rgba(255,255,255,.18),0 14px 34px rgba(31,20,40,.3); color:#fff; font-weight:900; letter-spacing:.04em; font-family:inherit; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; will-change:transform; }
/* iridescent dispersion sheen */
#konaOffersMagnet .kom-inner::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(125deg,rgba(255,120,180,.30) 0%,rgba(120,200,255,0) 38%,rgba(180,140,255,0) 60%,rgba(120,255,210,.28) 100%); mix-blend-mode:screen; pointer-events:none; }
/* top gloss highlight */
#konaOffersMagnet .kom-inner::after{ content:""; position:absolute; left:7%; right:7%; top:3px; height:42%; border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0)); pointer-events:none; }
#konaOffersMagnet .kom-fire,#konaOffersMagnet .kom-label{ position:relative; z-index:3; }
#konaOffersMagnet:hover .kom-inner{ transform:scale(1.07); background:rgba(255,255,255,.22); box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 0 0 6px rgba(255,255,255,.12),0 20px 46px rgba(31,20,40,.42); }
#konaOffersMagnet:active .kom-inner{ transform:scale(.96); }
.kom-fire{ font-size:22px; line-height:1; animation:komFire 1.1s ease-in-out infinite; }
.kom-label{ font-size:15px; text-transform:uppercase; text-shadow:0 1px 3px rgba(20,8,30,.55),0 0 10px rgba(255,255,255,.3); }
.kom-badge{ position:absolute; top:-6px; right:-4px; z-index:3; min-width:23px; height:23px; padding:0 6px; border-radius:999px; background:#fff; color:#ff2e88; font-size:12px; font-weight:950; display:grid; place-items:center; box-shadow:0 3px 8px rgba(0,0,0,.25); animation:komBadge 1.6s ease-in-out infinite; }
.kom-ring{ position:absolute; left:50%; top:50%; width:62%; height:74%; transform:translate(-50%,-50%); border-radius:999px; border:2px solid rgba(255,255,255,.6); z-index:1; animation:komRing 2.4s ease-out infinite; }
.kom-ring.r2{ animation-delay:.8s; }
.kom-ring.r3{ animation-delay:1.6s; }
.kom-spark{ position:absolute; width:7px; height:7px; border-radius:50%; background:#ffd166; z-index:1; opacity:0; box-shadow:0 0 8px #ffd166; animation:komSpark 2.2s ease-in-out infinite; }
.kom-spark.s1{ left:4px; top:0; animation-delay:.1s; }
.kom-spark.s2{ right:16px; top:-5px; animation-delay:.9s; background:#4cc9f0; box-shadow:0 0 8px #4cc9f0; }
.kom-spark.s3{ right:34px; bottom:-4px; animation-delay:1.5s; background:#fff; box-shadow:0 0 8px #fff; }
@keyframes komBob{ 0%,100%{ transform:translateY(0) rotate(0); } 25%{ transform:translateY(-7px) rotate(-2deg);} 50%{ transform:translateY(0) rotate(0);} 70%{ transform:translateY(-3px) rotate(2deg);} }
@keyframes komGrad{ 0%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} 100%{ background-position:0% 50%;} }
@keyframes komFire{ 0%,100%{ transform:scale(1) rotate(-5deg);} 50%{ transform:scale(1.22) rotate(5deg);} }
@keyframes komBadge{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.18);} }
@keyframes komRing{ 0%{ transform:translate(-50%,-50%) scale(.7); opacity:.8;} 100%{ transform:translate(-50%,-50%) scale(1.95); opacity:0;} }
@keyframes komSpark{ 0%,100%{ opacity:0; transform:translateY(0) scale(.6);} 40%{ opacity:1; transform:translateY(-11px) scale(1.1);} }

/* ---- Teaser bubble ---- */
#konaOffersTeaser{ display:none!important; position:fixed; left:20px; bottom:94px; z-index:9991; background:#fff; color:#2a160c; font-weight:800; font-size:13px; padding:10px 15px; border-radius:14px; max-width:210px; line-height:1.32; box-shadow:0 12px 28px rgba(120,40,90,.28); opacity:0; transform:translateY(12px) scale(.85); transform-origin:left bottom; pointer-events:none; transition:opacity .4s ease, transform .4s cubic-bezier(.2,1.3,.5,1); }
#konaOffersTeaser::after{ content:""; position:absolute; left:26px; bottom:-7px; width:14px; height:14px; background:#fff; transform:rotate(45deg); border-radius:2px; }
#konaOffersTeaser.show{ opacity:1; transform:translateY(0) scale(1); animation:tzWiggle 2.5s ease-in-out .45s infinite; }
@keyframes tzWiggle{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-3px) rotate(-1.5deg);} }

/* ---- Arrival Popup ---- */
.kona-pop{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(20,8,16,.62); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility .35s; }
.kona-pop.open{ opacity:1; visibility:visible; pointer-events:auto; }
.kona-pop-card{ position:relative; width:min(430px,100%); border-radius:26px; padding:4px; overflow:hidden; box-shadow:0 30px 80px rgba(40,10,30,.5); transform:scale(.3) rotate(-7deg); opacity:0; }
.kona-pop.open .kona-pop-card{ animation:popBurst .7s cubic-bezier(.18,1.5,.4,1) forwards; }
.kona-pop-spin{ position:absolute; inset:-60%; z-index:0; background:conic-gradient(from 0deg,#ff7a00,#ff2e88,#9d4edd,#4cc9f0,#ffd166,#ff7a00); animation:popRing 4s linear infinite; }
.kona-pop-inner{ position:relative; z-index:1; border-radius:22px; padding:34px 26px 28px; text-align:center; background:linear-gradient(180deg,#fffdf8,#fff4ea); }
@keyframes popRing{ to{ transform:rotate(360deg);} }
@keyframes popBurst{ 0%{ transform:scale(.3) rotate(-7deg); opacity:0;} 60%{ transform:scale(1.06) rotate(2deg); opacity:1;} 80%{ transform:scale(.97) rotate(-1deg);} 100%{ transform:scale(1) rotate(0); opacity:1;} }
.kona-pop-x{ position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; background:rgba(40,20,10,.08); color:#7a4a2a; font-size:20px; line-height:1; display:grid; place-items:center; transition:background .2s; }
.kona-pop-x:hover{ background:rgba(40,20,10,.16); }
.kona-pop-emoji{ font-size:50px; line-height:1; animation:popEmoji 1.4s ease-in-out infinite; }
@keyframes popEmoji{ 0%,100%{ transform:rotate(-8deg) scale(1);} 50%{ transform:rotate(8deg) scale(1.12);} }
.kona-pop-kicker{ margin-top:6px; font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#e0297a; }
.kona-pop-title{ margin:6px 0 4px; font-size:38px; line-height:1.02; font-weight:950; background:linear-gradient(100deg,#ff6a00,#ff2e88,#9d4edd); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.kona-pop-sub{ margin:0 0 20px; font-size:13.5px; color:#7a5a44; font-weight:600; }
.kona-pop-btns{ display:flex; flex-direction:column; gap:10px; }
.kona-pop-go{ border:0; cursor:pointer; padding:15px 20px; border-radius:14px; font-size:15.5px; font-weight:900; color:#fff; background:linear-gradient(120deg,#25D366,#128C7E); box-shadow:0 12px 26px rgba(18,140,126,.4); transition:transform .18s; }
.kona-pop-go:hover{ transform:translateY(-2px) scale(1.02); }
.kona-pop-more{ border:0; background:transparent; cursor:pointer; font-size:13.5px; font-weight:800; color:#bb0660; text-decoration:underline; padding:4px; }

/* ---- Reveal overlay ---- */
.kona-reveal{ position:fixed; inset:0; z-index:10000; overflow-y:auto; padding:64px 18px 48px; background:linear-gradient(135deg,#2a0a3a,#7a1550 45%,#c43a1a 100%); background-size:200% 200%; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s ease, visibility .4s; }
.kona-reveal.open{ opacity:1; visibility:visible; pointer-events:auto; animation:revBg 8s ease infinite; }
@keyframes revBg{ 0%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} 100%{ background-position:0% 50%;} }
.kona-reveal-x{ position:fixed; top:16px; right:18px; z-index:2; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.18); color:#fff; font-size:24px; line-height:1; backdrop-filter:blur(6px); display:grid; place-items:center; transition:background .2s, transform .3s; }
.kona-reveal-x:hover{ background:rgba(255,255,255,.32); transform:rotate(90deg); }
.kona-reveal-title{ text-align:center; font-size:clamp(34px,7vw,58px); font-weight:950; color:#fff; letter-spacing:.02em; text-shadow:0 4px 24px rgba(0,0,0,.3); }
.kona-reveal.open .kona-reveal-title{ animation:revSlam .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes revSlam{ 0%{ transform:scale(2.4); opacity:0; filter:blur(8px);} 100%{ transform:scale(1); opacity:1; filter:blur(0);} }
.kona-reveal-sub{ text-align:center; color:rgba(255,255,255,.82); font-weight:700; font-size:14px; margin:8px 0 28px; }
.kona-reveal.open .kona-reveal-sub{ animation:revFade .5s ease .25s both; }
@keyframes revFade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.kona-reveal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:15px; max-width:1000px; margin:0 auto; }
.kona-reveal-card{ opacity:0; position:relative; }
.kona-reveal-card::before{ content:""; position:absolute; inset:-2px; border-radius:20px; z-index:-1; background:linear-gradient(135deg,#ff8a00,#ff2e88 55%,#ffd166); opacity:.4; filter:blur(7px); animation:revHalo 3.2s ease-in-out infinite; animation-delay:calc(var(--i,0) * .2s); }
@keyframes revHalo{ 0%,100%{ opacity:.28; transform:scale(.99); } 50%{ opacity:.58; transform:scale(1.012); } }
.kona-reveal.open .kona-reveal-card{ animation:cardFly .6s cubic-bezier(.2,1.3,.4,1) both; animation-delay:calc(var(--i,0) * .07s + .2s); }
@keyframes cardFly{ 0%{ opacity:0; transform:translateY(46px) scale(.82) rotate(-3deg);} 100%{ opacity:1; transform:translateY(0) scale(1) rotate(0);} }
/* Compact + punchy reveal cards (smaller, less text, fancier) */
.kona-reveal-grid .offer-card{ width:auto!important; flex-shrink:initial!important; height:100%; opacity:1!important; transform:none!important; padding:15px 14px 14px!important; border-radius:18px!important; box-shadow:0 10px 28px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.5)!important; transition:transform .22s cubic-bezier(.2,1.1,.4,1), box-shadow .22s ease!important; }
.kona-reveal-grid .offer-card:hover{ transform:translateY(-7px) scale(1.03)!important; box-shadow:0 24px 52px rgba(0,0,0,.5),0 0 0 2px #fff,0 0 30px rgba(255,180,80,.4)!important; }
.kona-reveal-grid .offer-ico{ width:38px!important; height:38px!important; font-size:17px!important; border-radius:11px!important; margin-bottom:8px!important; }
.kona-reveal-grid .offer-card h4{ font-size:16px!important; line-height:1.16!important; margin:0 0 5px!important; }
.kona-reveal-grid .offer-card > p{ font-size:12px!important; line-height:1.42!important; margin:0 0 9px!important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; opacity:.78; }
.kona-reveal-grid .offer-pills{ gap:5px!important; margin-bottom:10px!important; }
.kona-reveal-grid .offer-pills span{ font-size:10.5px!important; padding:3px 8px!important; }
.kona-reveal-grid .offer-pills span:nth-child(n+3){ display:none!important; }
.kona-reveal-grid .offer-action{ font-size:13px!important; padding:11px 14px!important; border-radius:11px!important; font-weight:900!important; }
.kona-reveal-grid .offer-badge{ font-size:9.5px!important; padding:4px 9px!important; top:11px!important; right:11px!important; }

/* ---- Confetti ---- */
#konaConfettiLayer{ position:fixed; inset:0; z-index:10010; pointer-events:none; overflow:hidden; }
.kona-confetti-piece{ position:absolute; top:-24px; border-radius:2px; will-change:transform; animation:confFall linear forwards; }
@keyframes confFall{ 0%{ transform:translateY(-24px) rotate(0); opacity:1;} 100%{ transform:translateY(112vh) rotate(720deg); opacity:.85;} }

@media(max-width:560px){
  #konaOffersMagnet{ left:14px; bottom:82px; }
  #konaOffersTeaser{ left:14px; bottom:84px; }
  #konaOffersMagnet .kom-inner{ padding:12px 18px 12px 15px; }
  .kom-label{ font-size:14px; }
  .kona-pop-title{ font-size:32px; }
  .kona-reveal{ padding-top:58px; }
  .kona-reveal-grid{ grid-template-columns:repeat(2,1fr); gap:11px; max-width:380px; }
  .kona-reveal-grid .offer-card{ padding:13px 11px 12px!important; }
  .kona-reveal-grid .offer-card h4{ font-size:14px!important; }
  .kona-reveal-grid .offer-card > p{ -webkit-line-clamp:2; font-size:11px!important; }
  .kona-reveal-grid .offer-action{ font-size:12px!important; padding:9px 10px!important; }
}
@media(prefers-reduced-motion:reduce){
  #konaOffersBand,.kob-fire,.kob-glow,.kob-arrow{ animation:none!important; }
  #konaOffersMagnet,.kom-fire,.kom-badge,.kom-ring,.kom-spark,.kom-inner,.kona-pop-emoji,.kona-pop-spin,.kona-cart-fab{ animation:none!important; }
  .kona-pop-card{ opacity:1!important; transform:none!important; animation:none!important; }
  .kona-reveal.open{ animation:none!important; }
  .kona-reveal-card{ opacity:1!important; animation:none!important; }
  .kona-reveal-card::before{ animation:none!important; opacity:.4!important; transform:none!important; }
  .kona-reveal.open .kona-reveal-title,.kona-reveal.open .kona-reveal-sub{ animation:none!important; }
}
/* ---- Slim Offers Teaser Band ---- */
#konaOffersBand{position:relative;display:flex;align-items:center;gap:18px;background:linear-gradient(120deg,#ff7a00,#ff2e88 45%,#9d4edd 92%);background-size:220% 220%;animation:kobGrad 4s ease infinite,kobPulse 3s ease-in-out infinite;border-radius:22px;padding:20px 26px;cursor:pointer;color:#fff;box-shadow:0 10px 36px rgba(255,46,136,.42),0 0 0 2px rgba(255,255,255,.15);overflow:hidden;user-select:none;transition:transform .18s,box-shadow .18s;max-width:900px;margin:0 auto;}
#konaOffersBand:hover,#konaOffersBand:focus-visible{outline:none;transform:translateY(-4px) scale(1.01);box-shadow:0 20px 56px rgba(255,46,136,.6),0 0 0 2px rgba(255,255,255,.35);}
.kob-glow{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.11) 50%,transparent 100%);background-size:200% 100%;animation:kobShimmer 2.6s ease-in-out infinite;pointer-events:none;}
.kob-fire{font-size:40px;animation:kobFireBob 1.7s ease-in-out infinite;flex-shrink:0;line-height:1;filter:drop-shadow(0 0 10px #ffaa00);}
.kob-center{flex:1;min-width:0;}
.kob-head{font-size:24px;font-weight:900;letter-spacing:.06em;line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.28);margin-bottom:7px;}
.kob-pills{display:flex;flex-wrap:wrap;gap:6px;}
.kob-pills span{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:30px;padding:3px 11px;font-size:12.5px;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(4px);}
.kob-cta{font-size:17px;font-weight:900;background:rgba(255,255,255,.22);border:2.5px solid rgba(255,255,255,.45);border-radius:40px;padding:11px 22px;white-space:nowrap;flex-shrink:0;transition:background .18s,border-color .18s;letter-spacing:.05em;text-transform:uppercase;}
#konaOffersBand:hover .kob-cta{background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.65);}
.kob-arrow{display:inline-block;animation:kobArrow 1.3s ease-in-out infinite;}
@keyframes kobGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes kobPulse{0%,100%{box-shadow:0 10px 36px rgba(255,46,136,.42),0 0 0 2px rgba(255,255,255,.15)}50%{box-shadow:0 10px 56px rgba(255,46,136,.72),0 0 0 3px rgba(255,255,255,.3),0 0 90px rgba(255,120,0,.28)}}
@keyframes kobShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes kobFireBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-7px) rotate(6deg)}}
@keyframes kobArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media(max-width:560px){#konaOffersBand{padding:14px 16px;gap:12px;border-radius:16px;flex-wrap:wrap;}.kob-fire{font-size:30px;}.kob-head{font-size:18px;}.kob-pills span:nth-child(n+4){display:none;}.kob-cta{font-size:13px;padding:9px 14px;}}

/* ========================================================================== 
   Layer 07: menu-visual-theme
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ── variables ───────────────────────────────────────── */
:root{
  --gl-bg:   rgba(255,255,255,.38);
  --gl-bg2:  rgba(255,255,255,.54);
  --gl-bdr:  rgba(255,255,255,.65);
  --gl-blur: blur(22px) saturate(170%);
  --gl-sh:   0 4px 28px rgba(130,80,20,.07), inset 0 1.5px 0 rgba(255,255,255,.85);
  --gl-shH:  0 18px 52px rgba(130,80,20,.13), inset 0 1.5px 0 rgba(255,255,255,.95);
}

/* ── offer cards (light bg) ──────────────────────────── */
.offer-card{
  background:var(--gl-bg)!important;
  backdrop-filter:var(--gl-blur)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  border:1px solid var(--gl-bdr)!important;
  box-shadow:var(--gl-sh)!important;
}
.offer-card:hover{
  background:var(--gl-bg2)!important;
  box-shadow:var(--gl-shH)!important;
}
.offer-ico{
  background:rgba(255,243,218,.45)!important;
  border:1px solid rgba(255,255,255,.6)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.offer-pills span{
  background:rgba(255,255,255,.42)!important;
  border:1px solid rgba(255,255,255,.6)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.offer-pills span.bad{
  background:rgba(255,220,220,.45)!important;
}
.offer-pills span.good{
  background:rgba(210,246,220,.45)!important;
}

/* ── honest-food cards ───────────────────────────────── */
.honest-card{
  background:rgba(255,255,255,.32)!important;
  backdrop-filter:var(--gl-blur)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  border:1px solid rgba(255,255,255,.58)!important;
  box-shadow:0 4px 24px rgba(130,80,20,.06),inset 0 1.5px 0 rgba(255,255,255,.8)!important;
  transform:translateZ(0);
}
.honest-card:hover,.honest-card:focus-within,.honest-card.is-open{
  background:rgba(255,255,255,.5)!important;
  box-shadow:0 18px 50px rgba(130,80,20,.11),inset 0 1.5px 0 rgba(255,255,255,.9)!important;
}
.honest-icon{
  background:rgba(255,243,218,.45)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* ── combo picks ─────────────────────────────────────── */
.pick{
  background:var(--gl-bg)!important;
  backdrop-filter:var(--gl-blur)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  border:1px solid var(--gl-bdr)!important;
  box-shadow:var(--gl-sh)!important;
}
.pick:hover{
  background:var(--gl-bg2)!important;
  box-shadow:var(--gl-shH)!important;
}
.pick-img{
  background:rgba(255,243,218,.4)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* ── inline menu cards ───────────────────────────────── */
.kona-menu-item{
  background:rgba(255,255,255,.40)!important;
  backdrop-filter:var(--gl-blur)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  border:1px solid rgba(255,255,255,.62)!important;
  box-shadow:0 4px 22px rgba(78,52,24,.05),inset 0 1.5px 0 rgba(255,255,255,.82)!important;
}
.kona-menu-item:hover{
  background:rgba(255,255,255,.58)!important;
  box-shadow:0 12px 36px rgba(78,52,24,.1),inset 0 1.5px 0 rgba(255,255,255,.92)!important;
}
.kona-menu-visual{
  background:rgba(255,243,218,.35)!important;
  border-bottom:1px solid rgba(255,255,255,.5)!important;
}

/* ── full-menu dish cards ────────────────────────────── */
.dish-card{
  background:var(--gl-bg)!important;
  backdrop-filter:var(--gl-blur)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  border:1px solid var(--gl-bdr)!important;
  box-shadow:var(--gl-sh)!important;
}

/* ── navbar (scrolled state) ─────────────────────────── */
.header.scrolled{
  background:rgba(255,248,236,.5)!important;
  backdrop-filter:blur(30px) saturate(200%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(200%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.55),0 6px 30px -12px rgba(120,80,30,.12)!important;
}

/* ── Options dropdown ────────────────────────────────── */
.sun-menu{
  background:rgba(255,252,245,.72)!important;
  backdrop-filter:blur(28px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 8px 40px rgba(120,80,30,.12),inset 0 1px 0 rgba(255,255,255,.85)!important;
}

/* ── popup card inner ────────────────────────────────── */
.kona-pop-inner{
  background:rgba(255,253,248,.78)!important;
  backdrop-filter:blur(28px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(170%)!important;
}

/* ── reveal cards (on dark overlay bg) ──────────────── */
.kona-reveal-grid .offer-card{
  background:rgba(255,255,255,.11)!important;
  backdrop-filter:blur(22px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%)!important;
  border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.22),inset 0 1.5px 0 rgba(255,255,255,.22)!important;
}
.kona-reveal-grid .offer-card:hover{
  background:rgba(255,255,255,.2)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.38),inset 0 1.5px 0 rgba(255,255,255,.35),0 0 28px rgba(255,180,80,.18)!important;
}

/* ── teaser band — translucent gradient ──────────────── */
#konaOffersBand{
  background:linear-gradient(120deg,rgba(255,122,0,.78),rgba(255,46,136,.74) 45%,rgba(157,78,221,.78) 92%)!important;
  backdrop-filter:blur(14px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 10px 40px rgba(255,46,136,.3),inset 0 1.5px 0 rgba(255,255,255,.28)!important;
}

/* ── cart / cart modal reset ─────────────────────────── */
.kona-cart-drawer,.kona-cart-modal{
  background:#fff7ea!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:1px solid rgba(125,85,50,.14)!important;
}

/* ── footer glass strip ──────────────────────────────── */
.footer{
  background:rgba(251,244,232,.6)!important;
  backdrop-filter:blur(20px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%)!important;
  border-top:1px solid rgba(255,255,255,.5)!important;
}

/* ── section divider panels ──────────────────────────── */
.vm-section{
  background:rgba(246,238,224,.55)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.combos,.picks{
  background:rgba(251,244,232,.0)!important;
}

/* ========================================================================== 
   Layer 08: page-glass-background
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ── 1. BODY BACKGROUND — rich blob gradient so glass has something to blur ── */
body{
  background:
    radial-gradient(ellipse 55% 45% at 8%  12%, rgba(255,150,40,.28)  0%,transparent 58%),
    radial-gradient(ellipse 48% 38% at 93%  6%, rgba(220,65,55,.22)   0%,transparent 54%),
    radial-gradient(ellipse 62% 52% at 22% 78%, rgba(158,56,210,.18)  0%,transparent 62%),
    radial-gradient(ellipse 50% 42% at 80% 68%, rgba(255,175,35,.22)  0%,transparent 56%),
    radial-gradient(ellipse 58% 48% at 55% 48%, rgba(255,110,55,.12)  0%,transparent 66%),
    radial-gradient(ellipse 40% 35% at 68% 22%, rgba(255,60,100,.12)  0%,transparent 52%),
    #f8eed8;
  background-attachment:fixed;
}

/* ── 2. Wipe section backgrounds so the body gradient bleeds through ─────── */
.honest-food,.story,.combos,.picks,.gallery,
.vm-section,.location-section,.picks{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.vm-section{background:transparent!important;}

/* ── 3. Glass variables — very translucent ───────────────────────────────── */
:root{
  --gl-bg:   rgba(255,255,255,.15);
  --gl-bg2:  rgba(255,255,255,.26);
  --gl-bdr:  rgba(255,255,255,.55);
  --gl-blur: blur(28px) saturate(180%);
  --gl-sh:   0 4px 32px rgba(100,50,10,.09), inset 0 1.5px 0 rgba(255,255,255,.9);
  --gl-shH:  0 18px 56px rgba(100,50,10,.16), inset 0 1.5px 0 rgba(255,255,255,1);
}

/* ── 4. Offer cards ──────────────────────────────────────────────────────── */
.offer-card{
  background:var(--gl-bg)!important;
  backdrop-filter:var(--gl-blur)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  border:1px solid var(--gl-bdr)!important;
  box-shadow:var(--gl-sh)!important;
}
.offer-card:hover{
  background:var(--gl-bg2)!important;
  box-shadow:var(--gl-shH)!important;
}
.offer-ico{
  background:rgba(255,245,225,.35)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.offer-pills span{
  background:rgba(255,255,255,.30)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.offer-pills span.bad{ background:rgba(255,200,200,.30)!important; }
.offer-pills span.good{ background:rgba(200,245,215,.30)!important; }

/* ── 5. Honest-food cards ────────────────────────────────────────────────── */
.honest-card{
  background:rgba(255,255,255,.14)!important;
  backdrop-filter:var(--gl-blur)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  border:1px solid rgba(255,255,255,.52)!important;
  box-shadow:0 4px 28px rgba(100,50,10,.08),inset 0 1.5px 0 rgba(255,255,255,.88)!important;
}
.honest-card:hover,.honest-card:focus-within,.honest-card.is-open{
  background:rgba(255,255,255,.24)!important;
  box-shadow:0 20px 54px rgba(100,50,10,.14),inset 0 1.5px 0 rgba(255,255,255,1)!important;
}
.honest-icon{
  background:rgba(255,245,225,.32)!important;
  border:1px solid rgba(255,255,255,.5)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

/* ── 6. Combo picks ──────────────────────────────────────────────────────── */
.pick{
  background:var(--gl-bg)!important;
  backdrop-filter:var(--gl-blur)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  border:1px solid var(--gl-bdr)!important;
  box-shadow:var(--gl-sh)!important;
}
.pick:hover{ background:var(--gl-bg2)!important; box-shadow:var(--gl-shH)!important; }
.pick-img{
  background:rgba(255,245,225,.30)!important;
  border:1px solid rgba(255,255,255,.5)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

/* ── 7. Inline menu cards ────────────────────────────────────────────────── */
.kona-menu-item{
  background:rgba(255,255,255,.16)!important;
  backdrop-filter:var(--gl-blur)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:0 4px 24px rgba(78,40,10,.06),inset 0 1.5px 0 rgba(255,255,255,.85)!important;
}
.kona-menu-item:hover{
  background:rgba(255,255,255,.28)!important;
  box-shadow:0 14px 40px rgba(78,40,10,.12),inset 0 1.5px 0 rgba(255,255,255,1)!important;
}
.kona-menu-visual{
  background:rgba(255,245,220,.28)!important;
  border-bottom:1px solid rgba(255,255,255,.45)!important;
}

/* ── 8. Full-menu dish cards ─────────────────────────────────────────────── */
.dish-card{
  background:var(--gl-bg)!important;
  backdrop-filter:var(--gl-blur)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  border:1px solid var(--gl-bdr)!important;
  box-shadow:var(--gl-sh)!important;
}

/* ── 9. Navbar (scrolled) ────────────────────────────────────────────────── */
.header.scrolled{
  background:rgba(248,235,210,.42)!important;
  backdrop-filter:blur(32px) saturate(200%)!important;
  -webkit-backdrop-filter:blur(32px) saturate(200%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.6),0 6px 30px -12px rgba(100,60,10,.14)!important;
}

/* ── 10. Options dropdown ────────────────────────────────────────────────── */
.sun-menu{
  background:rgba(255,250,238,.55)!important;
  backdrop-filter:blur(30px) saturate(190%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(190%)!important;
  border:1px solid rgba(255,255,255,.7)!important;
  box-shadow:0 8px 40px rgba(100,60,10,.14),inset 0 1.5px 0 rgba(255,255,255,.9)!important;
}

/* ── 11. Popup card inner ────────────────────────────────────────────────── */
.kona-pop-inner{
  background:rgba(255,252,244,.72)!important;
  backdrop-filter:blur(30px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(180%)!important;
}

/* ── 12. Reveal cards (dark overlay bg) ─────────────────────────────────── */
.kona-reveal-grid .offer-card{
  background:rgba(255,255,255,.10)!important;
  backdrop-filter:blur(24px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(170%)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.22),inset 0 1.5px 0 rgba(255,255,255,.22)!important;
}
.kona-reveal-grid .offer-card:hover{
  background:rgba(255,255,255,.19)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.36),inset 0 1.5px 0 rgba(255,255,255,.32),0 0 28px rgba(255,175,70,.2)!important;
}

/* ── 13. Teaser band — translucent ───────────────────────────────────────── */
#konaOffersBand{
  background:linear-gradient(120deg,rgba(255,122,0,.70),rgba(255,46,136,.66) 45%,rgba(157,78,221,.70) 92%)!important;
  backdrop-filter:blur(18px) saturate(200%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(200%)!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:0 10px 40px rgba(255,46,136,.28),inset 0 1.5px 0 rgba(255,255,255,.32)!important;
}

/* ── 14. Footer ──────────────────────────────────────────────────────────── */
.footer{
  background:rgba(240,225,200,.35)!important;
  backdrop-filter:blur(22px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%)!important;
  border-top:1px solid rgba(255,255,255,.5)!important;
}

/* ========================================================================== 
   Layer 09: interaction-glows
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ── Glow animations ─────────────────────────────────────────── */
@keyframes glowAmber{
  0%,100%{ box-shadow:0 6px 18px -4px rgba(224,140,40,.55),0 0 16px rgba(224,140,40,.22); }
  50%    { box-shadow:0 8px 28px -4px rgba(224,140,40,.85),0 0 32px rgba(224,140,40,.45); }
}
@keyframes glowGreen{
  0%,100%{ box-shadow:0 6px 18px -4px rgba(37,211,102,.5), 0 0 16px rgba(37,211,102,.2);  }
  50%    { box-shadow:0 8px 28px -4px rgba(37,211,102,.82),0 0 32px rgba(37,211,102,.42); }
}

/* ── Orange-glow buttons ─────────────────────────────────────── */
.btn-primary{
  animation:glowAmber 2.6s ease-in-out infinite;
}
.btn-primary:hover{
  animation:none;
  box-shadow:0 12px 36px -6px rgba(224,140,40,.9),0 0 44px rgba(224,140,40,.5)!important;
}

/* offer-action (amber ones — phone or generic) */
.offer-action{
  animation:glowAmber 2.8s ease-in-out infinite;
}

/* override for WhatsApp offer buttons */
.offer-action:has(.fa-whatsapp){
  background:#1da851!important;
  animation:glowGreen 2.6s ease-in-out infinite;
}
.offer-action:has(.fa-whatsapp):hover{
  animation:none;
  box-shadow:0 12px 36px -6px rgba(37,211,102,.9),0 0 44px rgba(37,211,102,.5)!important;
}

/* pick-add (amber) */
.pick-add{
  animation:glowAmber 2.8s ease-in-out infinite;
}
.pick-add:hover{
  animation:none;
  box-shadow:0 10px 28px -4px rgba(224,140,40,.85),0 0 32px rgba(224,140,40,.45)!important;
}

/* ── Green-glow WhatsApp buttons ─────────────────────────────── */
.btn-wa{
  animation:glowGreen 2.6s ease-in-out infinite;
}
.btn-wa:hover{
  animation:none;
  box-shadow:0 12px 36px -6px rgba(37,211,102,.9),0 0 44px rgba(37,211,102,.5)!important;
}

/* ── Glass border — story-photo style inset ring ─────────────── */

/* Food gallery marquee cards (.gphoto) */
.gphoto{
  box-shadow:var(--shadow-sm),inset 0 0 0 5px rgba(255,255,255,.52)!important;
  border:1px solid rgba(255,255,255,.55)!important;
}

/* Photo gallery (.pimg) — add ::before for the border ring */
.pimg{
  border:1px solid rgba(255,255,255,.5)!important;
}
.pimg::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.45);
  z-index:2;pointer-events:none;
}

/* Reviews — keep white bg, add glass border */
.review{
  background:var(--card)!important;
  border:1px solid rgba(255,255,255,.7)!important;
  box-shadow:0 4px 24px rgba(100,60,10,.07),
             inset 0 0 0 4px rgba(255,255,255,.55),
             inset 0 1.5px 0 rgba(255,255,255,.9)!important;
  backdrop-filter:blur(12px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(140%)!important;
}
.review:hover{
  box-shadow:0 14px 40px rgba(100,60,10,.12),
             inset 0 0 0 4px rgba(255,255,255,.7),
             inset 0 1.5px 0 rgba(255,255,255,1)!important;
}

/* ── Floating magnet — keep as-is, no glow override ─────────── */

/* ========================================================================== 
   Layer 10: menu-card-layout
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ── Card: same glass+pick feel ───────────────────────────────── */
.kona-menu-item{
  text-align:center!important;
  padding:18px 18px 20px!important;
  border-radius:26px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}

/* ── Image visual — compact square like pick-img ──────────────── */
.kona-menu-visual{
  width:100%!important;
  height:165px!important;
  border-radius:20px!important;
  background:rgba(255,245,220,.38)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.45)!important;
  margin-bottom:14px!important;
  overflow:hidden!important;
}

/* Remove the gimmick blob in bottom-right corner */
.kona-menu-item::after{ display:none!important; }

/* ── Top bar — availability dot left, centered feel ───────────── */
.kona-menu-item-top{
  width:100%!important;
  justify-content:center!important;
  gap:8px!important;
  margin-bottom:8px!important;
}

/* ── Name ─────────────────────────────────────────────────────── */
.kona-menu-item h3{
  font-size:18px!important;
  text-align:center!important;
  margin:0 0 5px!important;
  line-height:1.2!important;
}

/* ── Description ─────────────────────────────────────────────── */
.kona-menu-item p{
  text-align:center!important;
  margin:0 0 10px!important;
  font-size:12px!important;
}

/* ── Price row ────────────────────────────────────────────────── */
.kona-menu-price-row{
  justify-content:center!important;
  margin-bottom:14px!important;
  width:100%!important;
}
.kona-menu-price{
  font-size:19px!important;
  font-weight:800!important;
  color:var(--amber-dark)!important;
  text-align:center!important;
}

/* ── Add button — amber pill like pick-add ────────────────────── */
.kona-add-btn{
  background:rgba(var(--amber-rgb),.13)!important;
  color:var(--amber-dark)!important;
  border:none!important;
  border-radius:100px!important;
  padding:11px 26px!important;
  font-size:14px!important;
  font-weight:800!important;
  width:100%!important;
  cursor:pointer!important;
  animation:glowAmber 2.8s ease-in-out infinite!important;
  transition:background .22s,color .22s,box-shadow .22s!important;
  margin-top:auto!important;
}
.kona-add-btn:hover,.kona-add-btn:focus{
  background:#25D366!important;
  color:#fff!important;
  animation:glowGreen 0s!important;
  box-shadow:0 8px 28px -4px rgba(37,211,102,.82),0 0 32px rgba(37,211,102,.42)!important;
}

/* ── Grid: match picks grid columns ───────────────────────────── */
.kona-menu-grid{
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;
  gap:20px!important;
}

/* Mobile */
@media(max-width:560px){
  .kona-menu-grid{ grid-template-columns:repeat(2,1fr)!important; gap:14px!important; }
  .kona-menu-visual{ height:145px!important; }
  .kona-menu-item h3{ font-size:15px!important; }
  .kona-add-btn{ font-size:13px!important; padding:10px 18px!important; }
}

/* ========================================================================== 
   Layer 11: menu-grid-layout
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ── Grid: picks-style spacing ───────────────────────────────── */
.vm-grid{
  grid-template-columns:repeat(3,1fr)!important;
  gap:22px!important;
}
@media(max-width:720px){ .vm-grid{ grid-template-columns:repeat(2,1fr)!important; gap:14px!important; } }

/* ── Card: glass + picks proportions ─────────────────────────── */
.vm-card{
  background:rgba(255,255,255,.18)!important;
  backdrop-filter:blur(28px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,.65)!important;
  border-radius:26px!important;
  box-shadow:0 4px 32px rgba(100,50,10,.09),inset 0 0 0 4px rgba(255,255,255,.48),inset 0 1.5px 0 rgba(255,255,255,.9)!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  text-align:center!important;
  padding:0 0 20px!important;
}
.vm-card:hover,.vm-card.vm-held{
  transform:translateY(-6px) scale(1.025)!important;
  box-shadow:0 18px 48px rgba(100,50,10,.16),inset 0 0 0 4px rgba(255,255,255,.65),inset 0 1.5px 0 rgba(255,255,255,1)!important;
}

/* ── Thumb: warm rounded top (keeps category gradients) ──────── */
.vm-thumb{
  aspect-ratio:1!important;
  border-radius:22px 22px 0 0!important;
  margin-bottom:0!important;
  overflow:hidden!important;
}
.vm-has-photo .vm-thumb{
  overflow:hidden!important;
  border-radius:22px 22px 0 0!important;
}

/* ── Emoji: bigger, picks-scale ──────────────────────────────── */
.vm-ph{ font-size:4rem!important; }

/* ── Info strip: centered, generous padding ───────────────────── */
.vm-info{
  padding:12px 16px 0!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}

/* ── Veg/non-veg row: stack dot above name ────────────────────── */
.vm-irow{
  flex-direction:column!important;
  align-items:center!important;
  gap:4px!important;
  margin-bottom:4px!important;
}

/* ── Name: big, picks-weight ─────────────────────────────────── */
.vm-name{
  font-family:var(--ff-display,inherit)!important;
  font-size:17px!important;
  font-weight:800!important;
  color:var(--bark)!important;
  text-align:center!important;
  -webkit-line-clamp:2!important;
  line-height:1.25!important;
}

/* ── Price: amber, prominent ─────────────────────────────────── */
.vm-price{
  font-size:19px!important;
  font-weight:800!important;
  color:var(--amber-dark)!important;
  margin-top:4px!important;
  margin-bottom:14px!important;
}

/* ── Order button (pseudo-element, no JS needed) ─────────────── */
.vm-info::after{
  content:'Order Now';
  display:inline-block;
  background:rgba(var(--amber-rgb),.13);
  color:var(--amber-dark);
  border:none;
  border-radius:100px;
  padding:10px 26px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  animation:glowAmber 2.8s ease-in-out infinite;
  cursor:pointer;
  pointer-events:none;
}
.vm-card:hover .vm-info::after,.vm-card.vm-held .vm-info::after{
  background:#25D366!important;
  color:#fff!important;
  animation:glowGreen 2.6s ease-in-out infinite!important;
}

/* ── Veg dot: slightly bigger, visible ───────────────────────── */
.vm-dot{ width:10px!important; height:10px!important; }

/* ── Veil: keep but slim the text so it doesn't clash ────────── */
.vm-veil{ border-radius:0!important; }

/* ========================================================================== 
   Layer 12: menu-category-tabs
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ── Category tabs ───────────────────────────────────────────── */
.pm-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px;}
.pm-tab{
  background:rgba(255,255,255,.25);
  border:1.5px solid rgba(255,255,255,.6);
  border-radius:100px;
  padding:10px 22px;
  font-size:14px;
  font-weight:700;
  color:var(--bark);
  cursor:pointer;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .22s,box-shadow .22s,color .22s;
  white-space:nowrap;
}
.pm-tab.active{
  background:var(--amber);
  color:#fff;
  border-color:var(--amber);
  box-shadow:0 4px 20px rgba(var(--amber-rgb),.46);
}
.pm-tab:hover:not(.active){background:rgba(255,255,255,.5);}
.pm-hidden{display:none!important;}

/* ── Emoji inside pick-img ───────────────────────────────────── */
.pm-emoji{font-size:3.6rem;line-height:1;filter:drop-shadow(0 6px 14px rgba(80,40,0,.22));display:block;}

/* ── Variant button strip ────────────────────────────────────── */
.pm-variants{display:flex;flex-direction:column;gap:8px;width:100%;}
.pm-var{width:100%!important;font-size:12px!important;padding:8px 14px!important;text-align:center!important;}

/* ── Menu pick — pick.css inherits; add glow + green hover ─── */
.menu-pick .pick-add{animation:glowAmber 2.8s ease-in-out infinite;}
.menu-pick .pick-add:hover,.menu-pick .pick-add:focus{
  background:#25D366!important;color:#fff!important;
  animation:glowGreen 2.6s ease-in-out infinite!important;
}

/* ── Grid gap ─────────────────────────────────────────────────── */
.pm-cat.picks-grid{gap:24px;}

@media(max-width:600px){
  .pm-tab{font-size:12px;padding:8px 14px;}
  .pm-cat.picks-grid{gap:16px;}
  .pm-emoji{font-size:2.6rem;}
}

/* ========================================================================== 
   Layer 13: menu-addons-and-cloud
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
#vm-addon-sheet{ display:none!important; }

/* Kona Cloud: midnight glass */
.vm-cloud-wrap{
  background:linear-gradient(160deg,rgba(12,16,40,.74) 0%,rgba(28,18,58,.68) 100%)!important;
  border-radius:28px!important;
  padding:32px 20px 30px!important;
  backdrop-filter:blur(32px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(32px) saturate(130%)!important;
  border:1px solid rgba(110,130,220,.28)!important;
  box-shadow:0 10px 56px rgba(8,8,36,.4),inset 0 0 0 1px rgba(150,170,255,.1)!important;
  margin-top:48px!important;
}
.vm-cloud-wrap .vm-card{
  background:rgba(35,45,100,.26)!important;
  border:1px solid rgba(130,155,255,.26)!important;
  box-shadow:0 4px 24px rgba(8,8,36,.28),inset 0 0 0 3px rgba(150,175,255,.16),inset 0 1.5px 0 rgba(190,210,255,.3)!important;
}
.vm-cloud-wrap .vm-card:hover,
.vm-cloud-wrap .vm-card.vm-held{
  transform:translateY(-6px) scale(1.025)!important;
  background:rgba(55,80,170,.3)!important;
  box-shadow:0 14px 44px rgba(8,8,36,.4),inset 0 0 0 3px rgba(170,200,255,.28)!important;
}
.vm-cloud-wrap .vm-name{ color:rgba(215,228,255,.95)!important; }
.vm-cloud-wrap .vm-price{ color:#ffd080!important; }
.vm-cloud-sub{ color:rgba(180,200,255,.8)!important;font-weight:900!important;letter-spacing:.08em!important;text-transform:uppercase!important;font-size:13px!important;margin:20px 0 10px!important; }
.vm-cloud-note{ margin-top:10px;font-size:12.5px;font-weight:700;color:rgba(180,200,255,.72);padding:8px 14px;background:rgba(100,140,255,.1);border-radius:10px;border:1px solid rgba(130,160,255,.18);display:inline-block; }

/* Cloud button: resting blue tint */
.vm-cloud-wrap .vm-info::after{
  background:rgba(110,150,255,.16)!important;color:rgba(180,210,255,.9)!important;
  border:1px solid rgba(130,170,255,.28)!important;animation:none!important;
  box-shadow:0 0 14px rgba(100,140,255,.3)!important;
}
/* Cloud button: hover blue sun */
.vm-cloud-wrap .vm-card:hover .vm-info::after,
.vm-cloud-wrap .vm-card.vm-held .vm-info::after{
  background:rgba(100,150,255,.72)!important;color:#fff!important;animation:none!important;
  box-shadow:0 0 22px rgba(110,170,255,.85),0 0 48px rgba(80,130,255,.5),0 8px 22px rgba(50,80,210,.4)!important;
}

/* Regular card button: sun glow on hover (overrides green) */
.vm-cat .vm-card:hover .vm-info::after,
.vm-cat .vm-card.vm-held .vm-info::after{
  background:rgba(255,138,28,.94)!important;color:#fff!important;animation:none!important;
  box-shadow:0 0 22px rgba(255,154,90,.9),0 0 48px rgba(255,118,38,.55),0 8px 24px rgba(255,88,18,.35)!important;
}

/* ========================================================================== 
   Layer 14: menu-add-button-states
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ── Pick-add button hover: SUN GLOW (overrides any green) ──── */
.pick-add:hover,.pick-add:focus,.pm-var:hover,.pm-var:focus{
  background:rgba(255,138,28,.93)!important;
  color:#fff!important;
  animation:none!important;
  box-shadow:0 0 22px rgba(255,154,90,.9),0 0 50px rgba(255,118,38,.55),0 8px 24px rgba(255,88,18,.35)!important;
  transform:translateY(-1px) scale(1.03)!important;
}

/* ── Kona Cloud wrapper: midnight glass ──────────────────────── */
.pm-cloud-wrap{
  background:linear-gradient(158deg,rgba(10,14,36,.76) 0%,rgba(26,16,56,.70) 100%);
  border-radius:26px;
  padding:28px 18px 24px;
  backdrop-filter:blur(30px) saturate(130%);
  -webkit-backdrop-filter:blur(30px) saturate(130%);
  border:1px solid rgba(100,125,210,.28);
  box-shadow:0 10px 52px rgba(6,6,30,.42),inset 0 0 0 1px rgba(140,165,255,.1);
  margin-top:44px;
}
.pm-cloud-hd{margin-bottom:22px;}
.pm-cloud-badge{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(160,190,255,.85);
  background:rgba(100,140,255,.14);border:1px solid rgba(120,160,255,.28);
  border-radius:100px;padding:5px 14px;margin-bottom:10px;
}
.pm-cloud-title{font-size:21px;font-weight:900;color:rgba(215,228,255,.96);margin:0 0 8px;font-family:var(--ff-display,inherit);}
.pm-cloud-desc{font-size:13px;color:rgba(170,195,255,.72);line-height:1.55;margin:0 0 10px;}
.pm-cloud-note{
  display:inline-block;font-size:12px;font-weight:700;
  color:rgba(175,200,255,.72);padding:6px 13px;
  background:rgba(100,140,255,.1);border:1px solid rgba(120,155,255,.2);border-radius:9px;
}
.pm-cloud-sub{
  font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(170,195,255,.78);margin:18px 0 10px;padding-left:2px;
}
/* Cloud picks: cool-tinted card */
.pm-cloud-wrap .pick{
  background:rgba(30,40,90,.24)!important;
  border:1px solid rgba(120,150,255,.24)!important;
  box-shadow:0 4px 22px rgba(6,6,30,.3),inset 0 0 0 3px rgba(140,170,255,.15),inset 0 1.5px 0 rgba(180,210,255,.28)!important;
}
.pm-cloud-wrap .pick:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 16px 44px rgba(6,6,30,.42),inset 0 0 0 3px rgba(165,195,255,.28)!important;
}
.pm-cloud-wrap h4{color:rgba(215,228,255,.96)!important;}
.pm-cloud-wrap .pick-price{color:#ffd080!important;}
/* Cloud pick-add button resting: cool blue */
.pm-cloud-wrap .pick-add,.pm-cloud-wrap .pm-var{
  background:rgba(100,140,255,.16)!important;
  color:rgba(180,210,255,.9)!important;
  animation:none!important;
  box-shadow:0 0 14px rgba(90,130,255,.3)!important;
}
/* Cloud pick-add hover: blue glow */
.pm-cloud-wrap .pick-add:hover,.pm-cloud-wrap .pm-var:hover,
.pm-cloud-wrap .pick-add:focus,.pm-cloud-wrap .pm-var:focus{
  background:rgba(90,140,255,.72)!important;
  color:#fff!important;
  box-shadow:0 0 22px rgba(100,165,255,.85),0 0 46px rgba(75,125,255,.5)!important;
  transform:translateY(-1px) scale(1.03)!important;
}

/* ========================================================================== 
   Layer 15: menu-cloud-color-theme
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ── Override midnight blue with light mint-green ────────────── */
.pm-cloud-wrap{
  background:linear-gradient(158deg,rgba(40,170,90,.13) 0%,rgba(60,190,100,.10) 100%)!important;
  border:1px solid rgba(80,200,110,.32)!important;
  box-shadow:0 8px 40px rgba(30,130,60,.10),inset 0 0 0 1px rgba(100,220,130,.14)!important;
  backdrop-filter:blur(28px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(150%)!important;
}
.pm-cloud-badge{
  color:rgba(30,110,55,.88)!important;
  background:rgba(60,200,100,.14)!important;
  border:1px solid rgba(80,200,110,.36)!important;
}
.pm-cloud-title{ color:rgba(20,90,45,.95)!important; }
.pm-cloud-desc{ color:rgba(30,100,50,.70)!important; }
.pm-cloud-note{
  color:rgba(25,95,48,.75)!important;
  background:rgba(60,200,100,.10)!important;
  border:1px solid rgba(80,200,110,.22)!important;
}
.pm-cloud-sub{ color:rgba(35,130,65,.80)!important; }

/* Cloud pick cards: light green glass */
.pm-cloud-wrap .pick{
  background:rgba(50,190,90,.10)!important;
  border:1px solid rgba(80,210,110,.26)!important;
  box-shadow:0 4px 20px rgba(20,120,50,.08),inset 0 0 0 3px rgba(100,230,130,.14),inset 0 1.5px 0 rgba(180,255,200,.3)!important;
}
.pm-cloud-wrap .pick:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 16px 40px rgba(20,120,50,.14),inset 0 0 0 3px rgba(100,230,130,.26)!important;
}
.pm-cloud-wrap h4{ color:rgba(15,75,35,.95)!important; }
.pm-cloud-wrap .pick-price{ color:rgba(100,160,50,.95)!important; }

/* Cloud add button: resting soft green */
.pm-cloud-wrap .pick-add,.pm-cloud-wrap .pm-var{
  background:rgba(55,185,90,.16)!important;
  color:rgba(20,100,45,.9)!important;
  animation:none!important;
  box-shadow:0 0 12px rgba(50,190,90,.22)!important;
}
/* Cloud add button: hover green sun glow */
.pm-cloud-wrap .pick-add:hover,.pm-cloud-wrap .pm-var:hover,
.pm-cloud-wrap .pick-add:focus,.pm-cloud-wrap .pm-var:focus{
  background:rgba(45,180,80,.85)!important;
  color:#fff!important;
  box-shadow:0 0 20px rgba(50,210,90,.8),0 0 44px rgba(40,190,70,.45),0 8px 22px rgba(20,150,50,.3)!important;
  transform:translateY(-1px) scale(1.03)!important;
}

/* ========================================================================== 
   Layer 16: optimized-fixed-background
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ── 1. Background: fixed pseudo-element instead of background-attachment:fixed
        bg-attachment:fixed stops scroll compositing on mobile (= janky scroll).
        A fixed ::before element composites separately, costs nothing per scroll. */
body{
  background: #f8eed8 !important;
  background-attachment: scroll !important;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 65% 55% at 12% 15%, rgba(255,150,40,.20) 0%,transparent 60%),
    radial-gradient(ellipse 52% 44% at 90% 8%,  rgba(220,65,55,.16)  0%,transparent 56%),
    radial-gradient(ellipse 60% 50% at 78% 72%, rgba(158,56,210,.15) 0%,transparent 62%),
    radial-gradient(ellipse 48% 40% at 22% 80%, rgba(255,175,35,.16) 0%,transparent 56%),
    #f8eed8;
}

/* ── 2. Cards: backdrop-filter only on hover — the single biggest GPU save.
        At rest, cards use a semi-opaque white so they still look glassy.
        On hover the full frosted blur kicks in for that one card only. */
.pick,
.offer-card,
.honest-card,
.review,
.kona-menu-item,
.dish-card,
.vm-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,.76) !important;
}
.pick:hover, .pick:focus-within,
.offer-card:hover,
.honest-card:hover,
.review:hover,
.vm-card:hover, .vm-card.vm-held {
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  background: rgba(255,255,255,.18) !important;
}
/* Kona Cloud picks keep green tint */
.pm-cloud-wrap .pick{
  background:rgba(60,200,100,.13)!important;
}
.pm-cloud-wrap .pick:hover{
  background:rgba(50,190,90,.10)!important;
}

/* ── 3. Buttons: static box-shadow glow at rest (no animation = no per-frame work).
        Animation only fires on hover when there's just ONE button to animate. */
.pick-add,
.pm-var,
.offer-action,
.btn-primary,
.btn-wa,
.kona-add-btn,
.dish-add {
  animation: none !important;
  box-shadow: 0 4px 14px -3px rgba(224,140,40,.38), 0 0 10px rgba(224,140,40,.16) !important;
}
.btn-wa{
  box-shadow: 0 4px 14px -3px rgba(37,211,102,.38), 0 0 10px rgba(37,211,102,.16) !important;
}

/* Hover: full glow animation on the one card you're touching */
.pick-add:hover, .pick-add:focus,
.pm-var:hover,  .pm-var:focus,
.btn-primary:hover, .btn-primary:focus,
.kona-add-btn:hover, .kona-add-btn:focus {
  animation: glowAmber 1.4s ease-in-out infinite !important;
}
.btn-wa:hover, .btn-wa:focus,
.offer-action:hover, .offer-action:focus {
  animation: glowGreen 1.4s ease-in-out infinite !important;
}

/* ── 4. Keep other high-blur elements (navbar, popups, sheets) — they're single
        instances so the cost is negligible. */
.kona-nav, #konaOffersReveal, #vas-card,
.kob-glow, #vm-addon-sheet > div {
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}

/* ========================================================================== 
   Layer 17: menu-action-pills
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ── Flat amber pill — same style as Signature Picks buttons ──────── */
.btn-primary,
.pick-add,
.pm-var,
.kona-add-btn,
.dish-add,
.btn-wa,
.offer-action,
.kona-pop-go,
.sun-menu-wa,
.kona-checkout-btn,
#vas-add,
.vas-add-btn,
.menu-modal-btn.wa,
.hero-order-card button {
  background: #ff9630 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(255,140,50,.28) !important;
  animation: none !important;
  text-shadow: none !important;
}

/* ── On hover/tap → light mint green ────────────────────────────── */
.btn-primary:hover,  .btn-primary:active,  .btn-primary:focus,
.pick-add:hover,     .pick-add:active,     .pick-add:focus,
.pm-var:hover,       .pm-var:active,       .pm-var:focus,
.kona-add-btn:hover, .kona-add-btn:active,
.dish-add:hover,     .dish-add:active,
.btn-wa:hover,       .btn-wa:active,       .btn-wa:focus,
.offer-action:hover, .offer-action:active,
.kona-pop-go:hover,  .kona-pop-go:active,
.sun-menu-wa:hover,  .sun-menu-wa:active,
.kona-checkout-btn:hover,
#vas-add:hover,
.menu-modal-btn.wa:hover,
.hero-order-card button:hover,
.hero-order-card button:active {
  background: #7de8b8 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(80,210,160,.38) !important;
  animation: none !important;
  transform: translateY(-2px) !important;
}

/* ── Cloud .pick-add: soft green at rest, brighter on hover ──────── */
.pm-cloud-wrap .pick-add,
.pm-cloud-wrap .pm-var {
  background: #4ade80 !important;
  box-shadow: 0 3px 10px rgba(74,222,128,.30) !important;
}

/* ── "Skip" button in addon sheet stays neutral ─────────────────── */
#vas-skip {
  background: transparent !important;
  color: var(--bark, #3d1f00) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#vas-skip:hover {
  background: rgba(125,85,50,.08) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Ghost/outline button (View Menu) stays its style ──────────── */
.btn-ghost {
  background: transparent !important;
  color: var(--bark, #3d1f00) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn-ghost:hover {
  background: rgba(125,85,50,.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}
/* Night/dusk: ghost button needs light text (overrides dark above) */
.hero--night .btn-ghost,
.hero--dusk  .btn-ghost {
  color: rgba(255,255,255,.90) !important;
  border-color: rgba(255,255,255,.38) !important;
}
.hero--night .btn-ghost:hover,
.hero--dusk  .btn-ghost:hover {
  background: rgba(255,255,255,.12) !important;
}

/* ========================================================================== 
   Layer 18: menu-food-imagery
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* ── Bigger pick-img: full-width square fills the card top ─────── */
.menu-pick {
  padding: 10px 10px 12px !important;
}
.menu-pick h4 {
  font-size: 13px !important;
  margin: 6px 0 6px !important;
  line-height: 1.3 !important;
}
.menu-pick .pick-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 12px !important;
  margin: 0 0 4px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#vm-body .picks-grid {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 10px !important;
}
@media(max-width:640px){
  #vm-body .picks-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
}
@media(max-width:480px){
  #vm-body .picks-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .menu-pick .pick-add,
  .menu-pick .pm-var {
    min-height: 44px;
  }
}
.pm-combo-btn {
  width: 100% !important;
  display: block !important;
  font-size: 12px !important;
  padding: 7px 8px !important;
  border-radius: 10px !important;
}
.menu-pick .pick-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.menu-pick .pick-img:hover img { transform: scale(1.08) !important; }
.menu-pick.veg-card{background:rgba(34,139,34,0.18)!important;border-color:rgba(34,139,34,0.40)!important}
.menu-pick.nonveg-card{background:rgba(210,30,30,0.16)!important;border-color:rgba(210,30,30,0.40)!important}
.menu-pick.egg-card{background:rgba(160,100,10,0.18)!important;border-color:rgba(160,100,10,0.40)!important}

/* ── Zoom-pop animation on tap ─────────────────────────────────── */
@keyframes pmZoomPop {
  0%   { transform: scale(1) rotate(0deg); }
  45%  { transform: scale(1.22) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.pm-zooming { animation: pmZoomPop 0.38s cubic-bezier(0.34,1.56,0.64,1) !important; }

/* ── Frosted dialog ────────────────────────────────────────────── */
#pm-dish-card {
  background: rgba(255,255,255,0.68) !important;
  backdrop-filter: blur(36px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.74) !important;
  border-radius: 28px !important;
  padding: 28px 22px 22px !important;
  max-width: 310px !important;
  width: calc(100% - 48px) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  text-align: center !important;
  transform: translateY(44px) scale(0.93) !important;
  opacity: 0 !important;
  transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease !important;
}
#pm-dish-card.pm-open {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

/* ========================================================================== 
   Layer 19: arc-navigation
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
#arc-star{
  position:fixed;top:10px;right:10px;z-index:1001;
  width:40px;height:40px;border-radius:50%;
  will-change:transform;
  background:rgba(255,220,100,0.13);
  border:1.5px solid rgba(255,220,100,0.45);
  box-shadow:0 0 14px rgba(255,200,60,0.22),0 2px 8px rgba(0,0,0,0.25);
  cursor:pointer;padding:0;
  font-size:17px;color:rgba(255,255,255,0.90);
  text-shadow:0 0 8px rgba(255,220,100,0.9),0 0 18px rgba(255,180,0,0.5);
  animation:arcStarBlink 2.4s ease-in-out infinite;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
#arc-star:hover{
  background:rgba(255,220,100,0.24);
  border-color:rgba(255,220,100,0.72);
}
#arc-star.arc-active{
  animation:none;opacity:1;z-index:9999;
  background:rgba(255,220,100,0.24);
  border-color:rgba(255,220,100,0.72);
  box-shadow:0 0 22px rgba(255,200,60,0.50),0 2px 8px rgba(0,0,0,0.25);
  text-shadow:0 0 14px rgba(255,220,100,1),0 0 30px rgba(255,160,0,.8);
}
@keyframes arcStarBlink{
  0%,100%{opacity:.65;box-shadow:0 0 10px rgba(255,200,60,0.15),0 2px 8px rgba(0,0,0,0.25);}
  45%{opacity:1;box-shadow:0 0 22px rgba(255,200,60,0.55),0 0 40px rgba(255,180,0,0.22),0 2px 8px rgba(0,0,0,0.25);}
  65%{opacity:.82;box-shadow:0 0 14px rgba(255,200,60,0.32),0 2px 8px rgba(0,0,0,0.25);}
}
#arc-nav{position:fixed;top:30px;right:30px;z-index:9998;pointer-events:none;}
#arc-backdrop{position:fixed;inset:0;z-index:9996;display:none;background:transparent;}
#arc-nav.arc-open{pointer-events:all;}
#arc-nav.arc-open~#arc-backdrop{display:block;}
.arc-item{
  position:absolute;left:-26px;top:-26px;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(30px) saturate(220%);
  -webkit-backdrop-filter:blur(30px) saturate(220%);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 8px 32px rgba(0,0,0,0.18),0 2px 8px rgba(0,0,0,0.10),inset 0 1px 0 rgba(255,255,255,0.22),inset 0 -1px 0 rgba(0,0,0,0.10);
  color:rgba(255,255,255,0.88);
  font-size:18px;text-decoration:none;cursor:pointer;
  opacity:0;pointer-events:none;
  will-change:transform;
  transform:translate(0,0) scale(0);
  transition:opacity 0.25s ease,background 0.2s,box-shadow 0.2s;
}
.arc-item.arc-vis{opacity:1;pointer-events:all;}
.arc-item:hover,.arc-item:active{
  background:rgba(255,255,255,0.20)!important;
  box-shadow:0 12px 44px rgba(0,0,0,0.30),inset 0 1px 0 rgba(255,255,255,0.38),inset 0 -1px 0 rgba(0,0,0,0.12)!important;
}
.arc-label{display:none;}

/* ========================================================================== 
   Layer 20: permission-liquid-glass-ui
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
:root{
  --pg-bg: rgba(255,255,255,.18);
  --pg-bg-strong: rgba(255,255,255,.32);
  --pg-bg-dark: rgba(24,18,16,.18);
  --pg-border: rgba(255,255,255,.58);
  --pg-border-soft: rgba(255,255,255,.34);
  --pg-shadow: 0 22px 70px rgba(61,37,16,.18), 0 8px 24px rgba(61,37,16,.10), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(255,255,255,.22);
  --pg-shadow-hover: 0 32px 88px rgba(61,37,16,.24), 0 12px 32px rgba(255,130,40,.12), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.28);
  --pg-blur: blur(30px) saturate(190%);
  --pg-radius: 26px;
  --pg-glint-x: 18%;
  --pg-glint-y: 0%;
}
body{
  background:#f8eed8!important;
  isolation:isolate;
}
body::before{
  background:
    radial-gradient(circle at 12% 14%, rgba(255,166,56,.30), transparent 32%),
    radial-gradient(circle at 88% 8%, rgba(239,76,111,.22), transparent 30%),
    radial-gradient(circle at 75% 74%, rgba(109,90,255,.20), transparent 36%),
    radial-gradient(circle at 20% 84%, rgba(82,210,148,.16), transparent 30%),
    linear-gradient(145deg,#fff4de 0%,#f7dfc2 42%,#f4d7b6 100%)!important;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.45;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.22), transparent 34%, rgba(255,255,255,.13) 68%, transparent),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.22), transparent 34%);
  mix-blend-mode:soft-light;
}
.header,
.header.scrolled{
  background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,246,230,.16))!important;
  -webkit-backdrop-filter:blur(34px) saturate(210%)!important;
  backdrop-filter:blur(34px) saturate(210%)!important;
  border-bottom:1px solid rgba(255,255,255,.46)!important;
  box-shadow:0 14px 44px rgba(70,38,12,.10), inset 0 1px 0 rgba(255,255,255,.76)!important;
}
.sun-btn,
.header-call,
.hero-badge,
.hero-meta .item,
.hero-anchor-pill,
.btn-ghost,
.sun-menu,
.kona-cart-fab,
.arc-item,
#arc-star,
.kona-menu-tab,
#konaMenuSearch,
.kona-menu-view-header,
.kona-menu-view-nav,
.menu-modal-bar{
  background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.10))!important;
  -webkit-backdrop-filter:var(--pg-blur)!important;
  backdrop-filter:var(--pg-blur)!important;
  border:1px solid var(--pg-border-soft)!important;
  box-shadow:0 14px 42px rgba(45,24,10,.13), inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(255,255,255,.14)!important;
}
.offer-card,
.honest-card,
.review,
.pick,
.menu-pick,
.kona-menu-item,
.dish-card,
.vm-card,
.vcard,
.chat-order-card,
.order-box,
.order-num,
.final-inner,
.kona-pop-inner,
.kona-reveal-card,
#pm-dish-card,
.pm-cloud-wrap,
.gym-glass-card,
.story-card,
.bento-card,
.vibe-mobile-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.11))!important;
  -webkit-backdrop-filter:var(--pg-blur)!important;
  backdrop-filter:var(--pg-blur)!important;
  border:1px solid var(--pg-border)!important;
  box-shadow:var(--pg-shadow)!important;
}
.offer-card::before,
.honest-card::before,
.review::before,
.pick::before,
.menu-pick::before,
.kona-menu-item::before,
.dish-card::before,
.vm-card::before,
.vcard::before,
.chat-order-card::before,
.order-box::before,
.order-num::before,
.final-inner::before,
.kona-pop-inner::before,
.kona-reveal-card::before,
#pm-dish-card::before,
.pm-cloud-wrap::before,
.gym-glass-card::before,
.story-card::before,
.bento-card::before,
.vibe-mobile-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at var(--pg-glint-x) var(--pg-glint-y), rgba(255,255,255,.78), transparent 22%),
    linear-gradient(145deg, rgba(255,255,255,.38), transparent 34%, rgba(255,255,255,.16) 74%, transparent),
    linear-gradient(315deg, rgba(255,255,255,.18), transparent 44%);
  opacity:.72;
  mix-blend-mode:screen;
}
.offer-card::after,
.honest-card::after,
.review::after,
.pick::after,
.menu-pick::after,
.kona-menu-item::after,
.dish-card::after,
.vm-card::after,
.vcard::after,
.chat-order-card::after,
.order-box::after,
.order-num::after,
.final-inner::after,
.kona-pop-inner::after,
.kona-reveal-card::after,
#pm-dish-card::after,
.pm-cloud-wrap::after,
.gym-glass-card::after,
.story-card::after,
.bento-card::after,
.vibe-mobile-card::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset 18px 22px 44px rgba(255,255,255,.10), inset -20px -18px 40px rgba(135,74,18,.08);
}
.offer-card > *,
.honest-card > *,
.review > *,
.pick > *,
.menu-pick > *,
.kona-menu-item > *,
.dish-card > *,
.vm-card > *,
.vcard > *,
.chat-order-card > *,
.order-box > *,
.order-num > *,
.final-inner > *,
.kona-pop-inner > *,
.kona-reveal-card > *,
#pm-dish-card > *,
.pm-cloud-wrap > *,
.gym-glass-card > *,
.story-card > *,
.bento-card > *,
.vibe-mobile-card > *{
  position:relative;
  z-index:1;
}
.pick:hover,
.pick:focus-within,
.menu-pick:hover,
.offer-card:hover,
.honest-card:hover,
.honest-card:focus-within,
.review:hover,
.vm-card:hover,
.vm-card.vm-held,
.vcard:hover,
.chat-order-card:hover,
.kona-menu-item:hover,
.dish-card:hover,
.gym-glass-card:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.18))!important;
  -webkit-backdrop-filter:blur(36px) saturate(220%)!important;
  backdrop-filter:blur(36px) saturate(220%)!important;
  box-shadow:var(--pg-shadow-hover)!important;
  transform:translateY(-5px) scale(1.006)!important;
}
.dish-thumb,
.pick-img,
.menu-pick .pick-img,
.kona-menu-visual,
.offer-ico,
.honest-icon,
.vcard .ico,
.chat-window,
.chat-order-note,
.kbsz span,
input,
textarea,
select{
  background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.12))!important;
  -webkit-backdrop-filter:blur(18px) saturate(170%)!important;
  backdrop-filter:blur(18px) saturate(170%)!important;
  border-color:rgba(255,255,255,.50)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62), 0 8px 24px rgba(72,38,12,.07)!important;
}
.order-box,
.final,
.kona-reveal.open,
.gym-section{
  background:linear-gradient(135deg,rgba(224,126,32,.22),rgba(255,255,255,.10) 46%,rgba(157,78,221,.14))!important;
}
.order-box,
.order-box p,
.order-box h2,
.order-num,
.order-num .s{
  color:#fff!important;
  text-shadow:0 1px 12px rgba(57,28,8,.34);
}
.footer{
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,236,205,.16))!important;
  -webkit-backdrop-filter:blur(30px) saturate(180%)!important;
  backdrop-filter:blur(30px) saturate(180%)!important;
  border-top:1px solid rgba(255,255,255,.56)!important;
  box-shadow:0 -18px 64px rgba(64,34,10,.10), inset 0 1px 0 rgba(255,255,255,.74)!important;
}
.btn-primary,
.pick-add,
.pm-var,
.kona-add-btn,
.dish-add,
.btn-wa,
.offer-action,
.kona-pop-go,
.sun-menu-wa,
.kona-checkout-btn,
#vas-add,
.vas-add-btn,
.menu-modal-btn.wa,
.hero-order-card button,
.chat-order-btn{
  background:linear-gradient(135deg,rgba(255,166,64,.88),rgba(255,114,54,.72))!important;
  -webkit-backdrop-filter:blur(16px) saturate(180%)!important;
  backdrop-filter:blur(16px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,.36)!important;
  box-shadow:0 14px 32px rgba(220,105,34,.28), inset 0 1px 0 rgba(255,255,255,.56), inset 0 -1px 0 rgba(120,44,0,.12)!important;
}
.btn-primary:hover,
.pick-add:hover,
.pm-var:hover,
.kona-add-btn:hover,
.dish-add:hover,
.btn-wa:hover,
.offer-action:hover,
.kona-pop-go:hover,
.sun-menu-wa:hover,
.kona-checkout-btn:hover,
#vas-add:hover,
.vas-add-btn:hover,
.menu-modal-btn.wa:hover,
.hero-order-card button:hover,
.chat-order-btn:hover{
  background:linear-gradient(135deg,rgba(134,238,190,.86),rgba(67,204,139,.76))!important;
  box-shadow:0 18px 42px rgba(57,205,138,.32), 0 0 26px rgba(108,238,178,.28), inset 0 1px 0 rgba(255,255,255,.62)!important;
}
.btn-ghost:hover,
.sun-btn:hover,
.hero-anchor-pill:hover,
.kona-menu-tab:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.18))!important;
}
.kona-reveal-grid .offer-card,
.hero--night .hero-meta .item,
.hero--dusk .hero-meta .item,
.hero--night .hero-badge,
.hero--dusk .hero-badge{
  background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.07))!important;
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.28)!important;
}
@media(max-width:640px){
  :root{ --pg-blur: blur(24px) saturate(180%); }
  .offer-card,
  .honest-card,
  .review,
  .pick,
  .menu-pick,
  .kona-menu-item,
  .dish-card,
  .vm-card,
  .vcard,
  .chat-order-card,
  .order-box{
    box-shadow:0 14px 42px rgba(61,37,16,.13), inset 0 1px 0 rgba(255,255,255,.76)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .pick:hover,
  .menu-pick:hover,
  .offer-card:hover,
  .honest-card:hover,
  .review:hover,
  .vm-card:hover,
  .vcard:hover,
  .chat-order-card:hover,
  .kona-menu-item:hover,
  .dish-card:hover,
  .gym-glass-card:hover{
    transform:none!important;
  }
}

/* ========================================================================== 
   Layer 21: kona-fit-black-bg-only
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
#gym-section{
  scroll-margin-top:86px!important;
  background:#000!important;
  aspect-ratio:0.86/1!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 26px 80px rgba(0,0,0,.55)!important;
}
#gym-section::before{
  background:radial-gradient(ellipse 78% 54% at 50% 78%,rgba(212,148,10,.15) 0%,transparent 66%)!important;
}
#gym-section .gym-glass-card{
  background:linear-gradient(170deg,#090909 0%,#020202 58%,#080603 100%)!important;
  border-color:rgba(212,148,10,.42)!important;
  box-shadow:0 10px 42px rgba(0,0,0,.82),0 0 28px rgba(212,148,10,.10),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#gym-section .gym-glass-card::before{
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.055),rgba(255,255,255,.018) 20%,transparent 38%),
    radial-gradient(ellipse 72% 46% at 50% 76%,rgba(212,148,10,.10),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")!important;
  opacity:.13!important;
  mix-blend-mode:screen!important;
}
#gym-section .gym-logo-wrap{
  top:40%!important;
  width:255px!important;
  height:255px!important;
}
#gym-section.gym-visible .gym-logo-wrap{
  transform:translate(-50%,-50%) scale(1)!important;
}
#gym-section .gym-logo-wrap::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  z-index:0;
  background:transparent;
  border:7px solid rgba(255,246,216,.78);
  box-shadow:
    0 0 10px rgba(255,255,255,.68),
    0 0 24px rgba(255,225,150,.42),
    0 0 44px rgba(212,148,10,.28),
    inset 0 0 12px rgba(255,255,255,.30),
    inset 0 0 24px rgba(212,148,10,.18);
  pointer-events:none;
}
#gym-section .gym-logo-img{
  width:255px!important;
  height:255px!important;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.22)) drop-shadow(0 0 20px rgba(255,190,72,.36)) drop-shadow(0 5px 18px rgba(0,0,0,.82))!important;
}
#gym-section .gym-logo-ring{
  width:255px!important;
  height:255px!important;
}
#gym-section .gym-fire-title{
  bottom:108px!important;
  font-size:clamp(18px,4.7vw,23px)!important;
  line-height:1.04!important;
  text-shadow:0 2px 14px rgba(0,0,0,.96),0 0 18px rgba(255,184,61,.28)!important;
}
#gym-section .gym-stats-row{
  bottom:45px!important;
  gap:12px!important;
  padding:0 24px!important;
}
#gym-section .gym-stat{
  max-width:none!important;
  min-width:0!important;
  padding:11px 12px 10px!important;
  background:rgba(0,0,0,.60)!important;
  border-color:rgba(212,148,10,.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 22px rgba(0,0,0,.42)!important;
  color:rgba(255,238,190,.96)!important;
  text-shadow:0 2px 12px rgba(0,0,0,.94)!important;
}
#gym-section .gs-num,
#gym-section .gym-stat strong{
  color:#ffd777!important;
  font-size:16px!important;
}
#gym-section .gs-label,
#gym-section .gym-stat span{
  color:rgba(255,244,215,.84)!important;
  font-size:9px!important;
  letter-spacing:.7px!important;
}
#gym-section .gym-eyebrow-tag,
#gym-section .gym-tap-hint{
  text-shadow:0 2px 14px rgba(0,0,0,.92),0 0 14px rgba(255,184,61,.18)!important;
}
#gym-section .gym-tap-hint{
  bottom:17px!important;
  color:rgba(255,211,108,.72)!important;
}
@media(min-width:900px){
  #gym-section{
    max-width:720px!important;
    margin:0 auto!important;
  }
  #gym-section .gym-logo-wrap{
    top:40%!important;
    width:270px!important;
    height:270px!important;
  }
  #gym-section .gym-logo-img,
  #gym-section .gym-logo-ring{
    width:270px!important;
    height:270px!important;
  }
  #gym-section .gym-logo-wrap::before{
    inset:20px;
    border-width:8px;
  }
  #gym-section .gym-fire-title{
    bottom:112px!important;
  }
  #gym-section .gym-stats-row{
    bottom:48px!important;
    padding:0 34px!important;
  }
}
@media(max-width:430px){
  #gym-section{
    aspect-ratio:.84/1!important;
  }
  #gym-section .gym-logo-wrap,
  #gym-section .gym-logo-img,
  #gym-section .gym-logo-ring{width:226px!important;height:226px!important;}
  #gym-section .gym-logo-wrap{top:38%!important;}
  #gym-section .gym-logo-wrap::before{inset:17px;border-width:6px;}
  #gym-section .gym-fire-title{bottom:101px!important;font-size:clamp(17px,4.6vw,21px)!important;}
  #gym-section .gym-stats-row{bottom:43px!important;padding:0 20px!important;gap:10px!important;}
  #gym-section .gym-tap-hint{bottom:16px!important;}
}

/* ========================================================================== 
   Layer 22: kona-offscreen-performance
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
.hero,.gallery,.offers,.honest-food,.gym-section,.vm-section,.combos,.quick-order,.picks,.story,.pgallery,.vibe-carousel,.reviews,.stats,.visit,.order,.final{
  content-visibility:auto;
  contain-intrinsic-size:900px;
}
.offer-card,.honest-card,.review,.pick,.menu-pick,.kona-menu-item,.dish-card,.vm-card,.vcard,.story-card,.bento-card,.pimg,.gphoto,.vibe-slide,.kg-inner,.kg-scratch-wrap,.kona-guide-pop{
  contain:layout paint style;
}
.kona-perf-sleep,.kona-perf-sleep *{
  animation-play-state:paused!important;
}

/* ========================================================================== 
   Layer 23: kona-order-guide-ui
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
.kona-guide-launch{
  position:fixed;left:18px;bottom:18px;z-index:9996;border:1px solid rgba(255,255,255,.68);border-radius:999px;
  width:54px;height:54px;padding:0 11px;justify-content:flex-start;gap:0;overflow:hidden;white-space:nowrap;
  background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  color:#fff;font-weight:900;font-size:13px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.72),0 14px 34px rgba(28,18,10,.24);cursor:pointer;
  animation:konaGuideBreathe 3.2s ease-in-out infinite;
  transition:width .45s ease,padding .45s ease,transform .25s ease,background .25s ease,box-shadow .25s ease;
  will-change:transform,width,padding;
}
.kona-guide-launch.is-expanded{
  width:250px;padding:10px 14px 10px 11px;gap:9px;
}
.kona-guide-launch .guide-label{display:none;}
.kona-guide-launch.is-expanded .guide-label{display:inline;}
.kona-guide-launch i{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#ffb22e,#25D366);box-shadow:0 0 20px rgba(255,178,46,.45);flex:0 0 32px;}
.kona-guide-launch:hover{transform:translateY(-3px);background:rgba(255,255,255,.26);}
.kona-guide-launch .guide-dot{width:8px;height:8px;border-radius:999px;background:#25D366;box-shadow:0 0 0 0 rgba(37,211,102,.54);animation:konaGuidePing 1.8s ease-out infinite;display:inline-grid;flex:0 0 8px;}
.kona-guide-pop{
  position:fixed;left:18px;bottom:82px;z-index:9996;width:min(360px,calc(100vw - 36px));border-radius:28px;padding:16px;
  background:rgba(255,251,242,.86);-webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
  border:1px solid rgba(255,255,255,.82);box-shadow:0 24px 70px rgba(45,28,10,.22),inset 0 1px 0 rgba(255,255,255,.86);
  color:var(--bark,#3d2614);opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
.kona-guide-pop.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.kona-guide-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.kona-guide-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:950;color:rgba(71,45,22,.58);}
.kona-guide-pop h3{margin:3px 0 0;font-family:var(--ff-display,inherit);font-size:24px;line-height:1.02;color:var(--bark,#3d2614);}
.kona-guide-close{width:34px;height:34px;border:0;border-radius:999px;background:rgba(255,255,255,.72);color:var(--bark,#3d2614);cursor:pointer;box-shadow:0 8px 18px rgba(70,40,12,.1);}
.kona-guide-question{margin:11px 0 9px;font-size:14px;font-weight:800;color:rgba(61,38,20,.88);}
.kona-guide-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px;}
.kona-guide-options button,.kona-guide-actions button{
  border:0;border-radius:16px;padding:11px 10px;background:rgba(255,255,255,.74);color:var(--bark,#3d2614);font-weight:900;font-size:13px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 18px rgba(76,43,12,.08);transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.kona-guide-options button:hover,.kona-guide-actions button:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(76,43,12,.13);background:#fff;}
.kona-guide-actions{display:grid;gap:9px;}
.kona-guide-actions .primary{background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;box-shadow:0 14px 30px rgba(37,211,102,.28);}
.kona-guide-actions .warm{background:linear-gradient(135deg,#ff9d2e,#ffc45e);color:#fff;box-shadow:0 14px 30px rgba(255,157,46,.28);}
.kona-guide-note{font-size:12px;line-height:1.4;color:rgba(71,45,22,.62);margin-top:10px;}
.kona-guide-toast{position:fixed;left:18px;bottom:82px;z-index:9997;max-width:min(330px,calc(100vw - 36px));border-radius:20px;padding:12px 14px;background:rgba(37,211,102,.92);color:#fff;font-weight:900;box-shadow:0 18px 44px rgba(37,211,102,.28);opacity:0;transform:translateY(12px);pointer-events:none;transition:.24s ease;}
.kona-guide-toast.show{opacity:1;transform:translateY(0);}
@keyframes konaGuidePing{to{box-shadow:0 0 0 14px rgba(37,211,102,0)}}
@keyframes konaGuideBreathe{0%,100%{box-shadow:inset 0 1px 1px rgba(255,255,255,.72),0 14px 34px rgba(28,18,10,.24)}50%{box-shadow:inset 0 1px 1px rgba(255,255,255,.86),0 0 0 6px rgba(255,255,255,.1),0 18px 42px rgba(37,211,102,.22)}}
body.cart-open .kona-guide-launch,body.cart-open .kona-guide-pop{display:none!important;}
@media(max-width:560px){.kona-guide-launch{left:14px;bottom:18px}.kona-guide-pop{left:14px;bottom:140px;width:calc(100vw - 28px)}.kona-guide-options{grid-template-columns:1fr}.kona-guide-toast{left:14px;bottom:140px}}
@media(prefers-reduced-motion:reduce){.kona-guide-launch,.kona-guide-launch .guide-dot{animation:none!important}}

/* ========================================================================== 
   Layer 24: kona-orizon-glass-theme
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* Orizon-inspired white glass cafe theme. Revert point: index.restore-before-orizon-glass-2026-07-01.html */
:root{
  --orizon-ink:#171512!important;
  --orizon-muted:rgba(23,21,18,.62)!important;
  --orizon-glass:rgba(255,255,255,.38)!important;
  --orizon-glass-strong:rgba(255,255,255,.58)!important;
  --orizon-border:rgba(255,255,255,.82)!important;
  --orizon-line:rgba(23,21,18,.08)!important;
  --orizon-gold:#e7ad62!important;
  --orizon-shadow:0 28px 90px rgba(44,38,30,.18), inset 0 1px 0 rgba(255,255,255,.88)!important;
  --orizon-soft-shadow:0 18px 50px rgba(44,38,30,.12), inset 0 1px 0 rgba(255,255,255,.72)!important;
  --bark:#171512!important;
  --bark-soft:rgba(23,21,18,.62)!important;
  --muted:rgba(23,21,18,.58)!important;
  --card:rgba(255,255,255,.44)!important;
  --cream:#e8e2d7!important;
  --cream-2:rgba(255,255,255,.28)!important;
  --border:rgba(255,255,255,.74)!important;
  --amber:#e7ad62!important;
  --amber-dark:#9b672f!important;
  --terracotta:#c9864f!important;
}
html{background:#d8d2c7!important;}
body{
  color:var(--orizon-ink)!important;
  background:
    linear-gradient(180deg,rgba(238,234,225,.62),rgba(211,205,194,.9)),
    url('../images/menu/Why Cafe Kona Vibe Collage 1.webp') center top/cover fixed!important;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url('../images/menu/Why Cafe Kona Vibe Collage 1.webp') center/cover fixed;
  filter:grayscale(.9) contrast(.78) brightness(1.28) blur(.2px);
  opacity:.42;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 58% 12%,rgba(255,255,255,.54),transparent 34%),linear-gradient(180deg,rgba(245,242,235,.74),rgba(188,181,169,.48));
}
.header{padding:18px 0!important;background:transparent!important;box-shadow:none!important;}
.header.scrolled{background:rgba(245,243,238,.56)!important;-webkit-backdrop-filter:blur(22px) saturate(145%)!important;backdrop-filter:blur(22px) saturate(145%)!important;border-bottom:1px solid rgba(255,255,255,.5)!important;box-shadow:0 16px 44px rgba(40,36,30,.1)!important;}
.sun-btn,.sun-menu,.header-call,.hero-badge,.btn,.hero-anchor-pill,.hero-meta .item,#arc-star,.arc-item,.kona-guide-launch,.kona-cart-fab{
  background:rgba(255,255,255,.48)!important;
  border:1px solid var(--orizon-border)!important;
  -webkit-backdrop-filter:blur(24px) saturate(150%)!important;backdrop-filter:blur(24px) saturate(150%)!important;
  color:var(--orizon-ink)!important;
  box-shadow:var(--orizon-soft-shadow)!important;
}
.hero{
  min-height:min(880px,100svh)!important;
  display:flex!important;align-items:center!important;
  padding:130px 0 78px!important;
  background:transparent!important;
  overflow:visible!important;
}
.hero::before{
  content:"";position:absolute;inset:96px clamp(16px,4vw,54px) 36px;border-radius:58px;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.36)),
    url('../images/menu/Why Cafe Kona Vibe Collage 1.webp') center/cover;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 34px 110px rgba(47,42,35,.26),inset 0 0 0 1px rgba(255,255,255,.34);
  filter:saturate(.86) contrast(.94) brightness(1.06);
}
.hero::after{
  content:"";position:absolute;inset:99px clamp(19px,4vw + 3px,57px) 39px;border-radius:55px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(17,15,12,.14),rgba(255,255,255,.08) 48%,rgba(255,255,255,.28));
}
.hero-sky{display:none!important;}
.hero-inner{
  position:relative!important;z-index:3!important;max-width:880px!important;margin-left:clamp(18px,9vw,122px)!important;
  padding:clamp(22px,5vw,54px)!important;border-radius:44px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.08))!important;
  border:1px solid rgba(255,255,255,.32)!important;
  -webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important;
}
.hero h1{color:rgba(255,255,255,.86)!important;text-shadow:0 14px 46px rgba(0,0,0,.25)!important;letter-spacing:0!important;font-weight:700!important;font-size:clamp(64px,9vw,118px)!important;}
.hero h1 .accent{color:rgba(255,255,255,.9)!important;font-style:normal!important;}
.hero-tag{color:rgba(255,255,255,.82)!important;text-shadow:0 10px 32px rgba(0,0,0,.22)!important;font-family:var(--ff-display)!important;font-weight:600!important;letter-spacing:0!important;}
.hero p.lead{color:rgba(255,255,255,.82)!important;text-shadow:0 8px 28px rgba(0,0,0,.2)!important;max-width:560px!important;}
.hero-badge{color:var(--orizon-ink)!important;background:rgba(255,255,255,.58)!important;}
.hero-badge .stars,.review .stars{color:var(--orizon-gold)!important;text-shadow:0 0 14px rgba(231,173,98,.4)!important;}
.btn-primary,.btn-wa,.offer-action,.pick-add,.kona-add-btn,.kona-checkout-btn,.chat-order-btn,.kona-guide-actions .primary{
  background:rgba(255,255,255,.58)!important;color:var(--orizon-ink)!important;border:1px solid var(--orizon-border)!important;
  box-shadow:var(--orizon-soft-shadow)!important;
}
.btn-primary:hover,.btn-wa:hover,.offer-action:hover,.pick-add:hover,.kona-add-btn:hover,.kona-checkout-btn:hover{background:#fff!important;color:var(--orizon-ink)!important;}
section:not(.hero):not(.gym-section){background:transparent!important;}
.container{position:relative;z-index:2;}
.gallery,.offers,.honest-food,.vm-section,.picks,.story,.pgallery,.reviews,.stats,.visit,.order,.final{
  position:relative!important;
}
.gallery::before,.offers::before,.honest-food::before,.vm-section::before,.picks::before,.story::before,.pgallery::before,.reviews::before,.stats::before,.visit::before,.order::before,.final::before{
  content:"";position:absolute;inset:20px clamp(14px,4vw,50px);border-radius:46px;z-index:0;pointer-events:none;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);box-shadow:0 20px 70px rgba(45,40,34,.08);
  -webkit-backdrop-filter:blur(10px) saturate(125%);backdrop-filter:blur(10px) saturate(125%);
}
.section-title,.hero-order-title,.vm-head h2,.picks-head h2,.reviews-head h2,.visit h2,.final h2{color:var(--orizon-ink)!important;letter-spacing:0!important;}
.script,.section-sub,.lead,.footer-about,.rl,.review p,.pick p,.honest-card p,.vcard p,.kona-menu-item p{color:var(--orizon-muted)!important;}
.title-line{background:linear-gradient(90deg,transparent,var(--orizon-gold),transparent)!important;opacity:.62!important;}
.offer-card,.honest-card,.review,.pick,.menu-pick,.kona-menu-item,.dish-card,.vm-card,.vcard,.story-photo,.pimg,.gphoto,.order-box,.order-num,.final-inner,.stat,.pm-cloud-wrap,.kona-reveal-card,.kona-pop-inner,#pm-dish-card,.kona-guide-pop{
  background:linear-gradient(145deg,rgba(255,255,255,.54),rgba(255,255,255,.22))!important;
  border:1px solid var(--orizon-border)!important;
  -webkit-backdrop-filter:blur(28px) saturate(150%)!important;backdrop-filter:blur(28px) saturate(150%)!important;
  box-shadow:var(--orizon-shadow)!important;
  color:var(--orizon-ink)!important;
}
.offer-card::before,.honest-card::before,.review::before,.pick::before,.menu-pick::before,.kona-menu-item::before,.dish-card::before,.vm-card::before,.vcard::before,.story-card::before,.bento-card::before,.pm-cloud-wrap::before,.order-box::before,.final-inner::before{
  opacity:.42!important;background:linear-gradient(145deg,rgba(255,255,255,.76),transparent 36%,rgba(255,255,255,.22))!important;mix-blend-mode:normal!important;
}
.offer-card::after,.honest-card::after,.review::after,.pick::after,.menu-pick::after,.kona-menu-item::after,.dish-card::after,.vm-card::after,.vcard::after,.story-card::after,.bento-card::after,.pm-cloud-wrap::after,.order-box::after,.final-inner::after{border-color:rgba(255,255,255,.7)!important;opacity:.75!important;}
.pick-img,.kona-menu-visual,.offer-ico,.honest-icon,.vcard .ico,.stat,.pimg,.gphoto{
  border:1px solid rgba(255,255,255,.78)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 16px 42px rgba(40,34,28,.12)!important;
}
.pick-img img,.kona-menu-visual img,.pimg img,.gphoto img{filter:saturate(.82) contrast(.96) brightness(1.04)!important;}
.offer-badge,.pick-tag,.vm-cloud-badge,.kob-head,.kob-pills span,.gym-eyebrow-tag,.hero-order-pill{
  background:rgba(255,255,255,.58)!important;color:var(--orizon-ink)!important;border:1px solid rgba(255,255,255,.76)!important;
}
#konaOffersBand{
  background:linear-gradient(135deg,rgba(255,255,255,.54),rgba(255,255,255,.2))!important;
  border:1px solid var(--orizon-border)!important;-webkit-backdrop-filter:blur(30px) saturate(150%)!important;backdrop-filter:blur(30px) saturate(150%)!important;box-shadow:var(--orizon-shadow)!important;color:var(--orizon-ink)!important;
}
.kob-fire,.kob-glow{opacity:.45!important;filter:saturate(.65)!important;}
.stats .stat .num,.stat .num{color:var(--orizon-ink)!important;}
.footer{background:rgba(235,231,222,.42)!important;border-top:1px solid rgba(255,255,255,.45)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}
.footer,.footer a,.footer span,.footer p{color:var(--orizon-ink)!important;}
.kona-menu-tab,.search-wrap,.kona-menu-select,.kona-menu-search,#konaCartNote,input,textarea,.kbsz span{
  background:rgba(255,255,255,.52)!important;border:1px solid rgba(255,255,255,.76)!important;color:var(--orizon-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.68)!important;
}
.kona-menu-tab.active{background:#fff!important;color:var(--orizon-ink)!important;}
.kona-cart-backdrop{background:rgba(31,21,13,.58)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
.gym-section{background:#000!important;}
.gym-section::before{display:none!important;}
@media(max-width:760px){
  .hero{padding:108px 0 54px!important;min-height:92svh!important;}
  .hero::before{inset:82px 12px 24px;border-radius:34px;}
  .hero::after{inset:85px 15px 27px;border-radius:31px;}
  .hero-inner{margin:0 18px!important;padding:28px 22px!important;border-radius:28px!important;}
  .hero h1{font-size:clamp(48px,15vw,74px)!important;}
  .gallery::before,.offers::before,.honest-food::before,.vm-section::before,.picks::before,.story::before,.pgallery::before,.reviews::before,.stats::before,.visit::before,.order::before,.final::before{inset:10px 8px;border-radius:28px;}
}

/* ========================================================================== 
   Layer 25: kona-orizon-hero-sunset-restore
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* Hero-only adjustment: keep Orizon glass, restore original animated sunset sky. */
.hero{
  min-height:clamp(620px,88svh,820px)!important;
  padding:118px 0 56px!important;
  background:
    linear-gradient(to bottom,rgba(251,244,232,.42) 0%,rgba(251,244,232,.12) 48%,rgba(120,183,213,.9) 100%),
    linear-gradient(115deg,rgba(240,194,162,.58),rgba(224,162,78,.34) 58%,rgba(167,174,87,.22)),
    var(--peach,#f2c2a2)!important;
  overflow:hidden!important;
}
.hero::before,.hero::after{display:none!important;content:none!important;}
.hero-sky{display:block!important;position:absolute!important;inset:0!important;z-index:0!important;opacity:1!important;}
.hero-sun{display:block!important;opacity:.88!important;filter:saturate(.9) brightness(1.04)!important;}
.cloud{display:block!important;opacity:.66!important;filter:grayscale(.1) brightness(1.08)!important;}
.hero-inner{
  z-index:2!important;
  max-width:690px!important;
  margin-left:clamp(18px,7vw,96px)!important;
  padding:clamp(20px,3.4vw,38px)!important;
  border-radius:34px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.44),rgba(255,255,255,.18))!important;
  border:1px solid rgba(255,255,255,.58)!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%)!important;
  backdrop-filter:blur(18px) saturate(140%)!important;
  box-shadow:0 24px 72px rgba(68,45,18,.15),inset 0 1px 0 rgba(255,255,255,.75)!important;
}
.hero h1{
  color:var(--orizon-ink,#171512)!important;
  text-shadow:none!important;
  font-size:clamp(56px,8vw,98px)!important;
  margin-bottom:4px!important;
}
.hero h1 .accent{color:var(--terracotta,#c9864f)!important;font-style:italic!important;}
.hero-tag{
  color:var(--amber-dark,#9b672f)!important;
  text-shadow:none!important;
  font-family:var(--ff-script)!important;
  font-weight:700!important;
  margin-bottom:16px!important;
}
.hero p.lead{display:none!important;}
.hero-btns{margin-bottom:18px!important;gap:10px!important;}
.hero-meta{gap:8px!important;margin-top:4px!important;}
.hero-meta .item{
  gap:7px!important;
  padding:5px 9px 5px 5px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.45)!important;
  box-shadow:0 10px 24px rgba(64,42,18,.09),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
.hero-meta .ico{width:28px!important;height:28px!important;font-size:12px!important;}
.hero-meta .k{font-size:12px!important;line-height:1.05!important;color:var(--orizon-ink,#171512)!important;}
.hero-meta .s{font-size:10.5px!important;line-height:1.05!important;color:rgba(23,21,18,.56)!important;}
.hero-anchors{display:none!important;}
#food,#vibe,#deliveries{scroll-margin-top:72px;}
@media(max-width:760px){
  .hero{min-height:82svh!important;padding:104px 0 38px!important;}
  .hero-inner{margin:0 14px!important;padding:22px 18px!important;border-radius:26px!important;}
  .hero h1{font-size:clamp(46px,14vw,70px)!important;}
  .hero-meta{display:grid!important;grid-template-columns:1fr!important;max-width:270px!important;}
  .hero-meta .item{width:100%!important;box-sizing:border-box!important;}
}

/* ========================================================================== 
   Layer 26: kona-random-hero-clouds
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* Random hero clouds: varied depth, size, and tap-to-poof interaction. */
.hero{isolation:isolate!important;}
.hero-sky{pointer-events:none!important;}
.hero-sky .cloud{pointer-events:auto;cursor:pointer;}
.hero.is-paused .kona-cloud-field,
.hero.is-paused .kona-random-cloud{
  animation-play-state: paused !important;
}
.kona-cloud-field{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.kona-cloud-field.back{z-index:1;}
.kona-cloud-field.front{z-index:8;}
.kona-random-cloud{
  --cloud-y:24%;
  --cloud-scale:1;
  --cloud-opacity:.55;
  --cloud-duration:68s;
  --cloud-delay:0s;
  --cloud-blur:1.5px;
  --cloud-drift:0px;
  position:absolute;
  left:-34vw;
  top:var(--cloud-y);
  width:clamp(90px,calc(16vw * var(--cloud-scale)),310px);
  height:clamp(22px,calc(4.4vw * var(--cloud-scale)),74px);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,244,222,.42));
  filter:blur(var(--cloud-blur)) saturate(.92);
  opacity:var(--cloud-opacity);
  box-shadow:
    calc(24px * var(--cloud-scale)) calc(-10px * var(--cloud-scale)) 0 calc(9px * var(--cloud-scale)) rgba(255,255,255,.48),
    calc(62px * var(--cloud-scale)) calc(-15px * var(--cloud-scale)) 0 calc(17px * var(--cloud-scale)) rgba(255,255,255,.38),
    calc(110px * var(--cloud-scale)) calc(-5px * var(--cloud-scale)) 0 calc(12px * var(--cloud-scale)) rgba(255,247,230,.34);
  transform:translate3d(0,0,0) scale(var(--cloud-scale));
  animation:konaCloudWander var(--cloud-duration) linear infinite;
  animation-delay:var(--cloud-delay);
  will-change:transform,opacity;
  pointer-events:auto;
  cursor:pointer;
}
.kona-random-cloud::before,
.kona-random-cloud::after{
  content:"";
  position:absolute;
  border-radius:999px;
  background:inherit;
  opacity:.72;
}
.kona-random-cloud::before{
  width:46%;
  height:130%;
  left:18%;
  top:-62%;
}
.kona-random-cloud::after{
  width:58%;
  height:116%;
  right:10%;
  top:-42%;
}
.kona-cloud-field.front .kona-random-cloud{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,244,222,.36));
  mix-blend-mode:normal;
  text-shadow:none;
}
.kona-random-cloud.poof{
  animation:konaCloudPoof .62s ease-out forwards!important;
  pointer-events:none;
}
@keyframes konaCloudWander{
  0%{transform:translate3d(-8vw,var(--cloud-drift),0) scale(var(--cloud-scale));}
  45%{transform:translate3d(58vw,calc(var(--cloud-drift) * -1),0) scale(calc(var(--cloud-scale) * 1.04));}
  100%{transform:translate3d(142vw,var(--cloud-drift),0) scale(var(--cloud-scale));}
}
@keyframes konaCloudPoof{
  0%{opacity:var(--cloud-opacity);transform:translate3d(var(--poof-x,0),0,0) scale(var(--cloud-scale));filter:blur(var(--cloud-blur));}
  55%{opacity:.38;filter:blur(7px);}
  100%{opacity:0;transform:translate3d(var(--poof-x,0),-18px,0) scale(calc(var(--cloud-scale) * 1.38));filter:blur(13px);}
}
@media(max-width:760px){
  .kona-cloud-field.front .kona-random-cloud{opacity:calc(var(--cloud-opacity) * .72);}
}
@media(prefers-reduced-motion:reduce){
  .kona-random-cloud{animation:none!important;}
}

/* ========================================================================== 
   Layer 27: kona-gift-style
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
.kg-overlay{position:fixed;inset:0;z-index:10001;display:none;flex-direction:column;align-items:center;justify-content:flex-start;
  background:radial-gradient(120% 80% at 50% 20%,#1b1712 0%,#0d0c0e 62%,#070708 100%);
  color:#f4efe6;overflow-y:auto;opacity:0;transition:opacity .3s ease;padding:64px 20px 30px;}
.kg-overlay.open{display:flex;opacity:1;}
.kg-x{position:absolute;top:18px;left:16px;z-index:6;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);color:#f4efe6;font-size:17px;display:grid;place-items:center;transition:background .2s;}
.kg-x:hover{background:rgba(255,255,255,.16);}
.kg-inner{display:flex;flex-direction:column;align-items:center;width:100%;max-width:420px;margin:auto 0;}
.kg-gifticon{font-size:26px;color:#f0a828;filter:drop-shadow(0 0 14px rgba(240,168,40,.5));margin-bottom:10px;}
.kg-title{font-family:var(--ff-display,sans-serif);font-weight:800;font-size:clamp(22px,6.4vw,30px);text-align:center;line-height:1.14;margin:0 0 6px;color:#f6f1e7;}
.kg-sub{font-size:13px;font-weight:600;color:#9b9488;text-align:center;line-height:1.4;margin:0 0 22px;max-width:320px;}
.kg-scratch-wrap{position:relative;width:min(78vw,300px);aspect-ratio:5/6;border-radius:24px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.6);}
.kg-prize{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;
  background:linear-gradient(160deg,var(--c1,#e9d7b6),var(--c2,#caa46a));}
.kg-prize .kg-card-brand{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(30,22,12,.62);}
.kg-prize .kg-card-big{font-family:var(--ff-display,sans-serif);font-weight:900;font-size:clamp(22px,6vw,28px);line-height:1.02;color:#241a0e;margin:12px 0 6px;}
.kg-prize .kg-card-sub{font-size:12px;font-weight:600;color:rgba(36,26,14,.66);}
.kg-prize .kg-card-emoji{font-size:52px;margin-top:14px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.2));}
.kg-foil{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .45s ease;}
.kg-foil.gone{opacity:0;pointer-events:none;}
.kg-hint{margin-top:16px;font-size:13px;font-weight:700;color:#f0a828;letter-spacing:.01em;display:flex;align-items:center;gap:7px;animation:kgHintPulse 1.6s ease-in-out infinite;}
@keyframes kgHintPulse{0%,100%{opacity:.7;}50%{opacity:1;}}
.kg-cta{margin-top:20px;width:min(78vw,300px);display:none;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;padding:15px;border-radius:16px;font-family:var(--ff-display,sans-serif);font-weight:800;font-size:16px;
  color:#1a1206;background:linear-gradient(135deg,#ffc45a,#f0a828);box-shadow:0 14px 32px rgba(240,168,40,.34);
  animation:kgCtaIn .4s ease both;}
.kg-cta.show{display:flex;}
@keyframes kgCtaIn{0%{transform:translateY(14px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
.kg-cta:hover{filter:brightness(1.05);}
.kg-locked .kg-scratch-wrap,.kg-locked .kg-hint{display:none;}
.kg-locked .kg-lockmsg{display:block;}
.kg-lockmsg{display:none;margin-top:8px;font-size:14px;font-weight:600;color:#c9a15a;text-align:center;max-width:300px;line-height:1.45;}
.kg-phone{display:flex;flex-direction:column;gap:10px;width:min(78vw,300px);margin-top:8px;}
.kg-phone input{padding:14px 16px;border-radius:14px;border:1px solid rgba(240,168,40,.4);background:rgba(255,255,255,.06);color:#f4efe6;font-size:16px;text-align:center;}
.kg-phone input::placeholder{color:#8a8378;}
.kg-phone button{padding:14px;border:0;border-radius:14px;font-weight:800;font-size:15px;color:#1a1206;background:linear-gradient(135deg,#ffc45a,#f0a828);cursor:pointer;}
.kg-phone-note{font-size:11px;color:#9b9488;text-align:center;}
.kg-choice{width:min(78vw,300px);margin-top:16px;text-align:center;animation:kgCtaIn .4s ease both;}
.kg-choice-label{font-size:13px;font-weight:700;color:#e7c98a;margin-bottom:9px;letter-spacing:.2px;}
.kg-choice-opts{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;}
.kg-choice-opt{flex:1 1 0;min-width:120px;padding:12px 12px;border-radius:13px;border:1px solid rgba(240,168,40,.4);
  background:rgba(255,255,255,.05);color:#f4efe6;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;}
.kg-choice-opt.sel{background:linear-gradient(135deg,#ffc45a,#f0a828);border-color:#f0a828;color:#1a1206;}
.kona-gift-banner{margin:0 0 12px;padding:11px 13px;border-radius:14px;background:linear-gradient(135deg,rgba(240,168,40,.16),rgba(240,168,40,.08));border:1px solid rgba(240,168,40,.4);color:#7a5a1e;font-size:12.5px;font-weight:600;line-height:1.35;}
.kona-gift-banner b{color:#4a3410;}
@media(prefers-reduced-motion:reduce){.kg-hint,.kg-cta{animation:none!important;}}

/* ========================================================================== 
   Layer 28: kona-offers-collapse
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
#offers{content-visibility:visible!important;contain-intrinsic-size:auto!important;contain:none!important;padding:0!important;background:transparent!important;min-height:0!important;}

/* ========================================================================== 
   Layer 29: kona-gym-bg
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
#gym-section .gym-glass-card{
  background:
    linear-gradient(170deg,rgba(9,9,9,.72) 0%,rgba(2,2,2,.8) 58%,rgba(8,6,3,.72) 100%)
    ,url('../images/gym-bg.webp') center/cover no-repeat
    !important;
  background-blend-mode:normal,normal!important;
}
#gym-section .gym-glass-card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  -webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
  filter:brightness(.62) saturate(.95);
}
#gym-section .gym-glass-card > *{position:relative;z-index:1;}

/* ========================================================================== 
   Layer 30: kona-vibe-coverflow
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
.vibe-carousel{position:relative;margin-top:8px;}
.vibe-track{
  width:100%;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  padding:34px 6vw;perspective:1000px;box-sizing:border-box;
}
.vibe-track::-webkit-scrollbar{display:none;}
.vibe-slide{
  flex:0 0 auto;width:min(52vw,280px);scroll-snap-align:center;will-change:transform,opacity,filter;
  transform-style:preserve-3d;
}
.vibe-slide .pimg{width:100%;height:100%;aspect-ratio:4/3!important;}
.vibe-slide .pimg.wide{grid-column:unset;aspect-ratio:4/3!important;}
.vibe-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--bark);font-size:14px;cursor:pointer;box-shadow:var(--shadow-sm);
  display:grid;place-items:center;transition:transform .2s,background .2s;
}
.vibe-arrow.vibe-prev{left:4px;}
.vibe-arrow.vibe-next{right:4px;}
.vibe-arrow:hover{transform:translateY(-50%) scale(1.08);background:#fff;}
.vibe-arrow:active{transform:translateY(-50%) scale(.94);}
.vibe-dots{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.vibe-dot{width:7px;height:7px;border-radius:50%;background:var(--border);border:0;padding:0;cursor:pointer;transition:background .25s,transform .25s;}
.vibe-dot.active{background:var(--amber);transform:scale(1.35);}
@media(max-width:640px){
  .vibe-arrow{width:34px;height:34px;font-size:12px;}
  .vibe-track{padding:26px 4vw;gap:10px;}
  .vibe-slide{width:min(60vw,260px);}
}
@media(prefers-reduced-motion:reduce){
  .vibe-slide{transform:none!important;filter:none!important;opacity:1!important;}
}

/* ========================================================================== 
   Layer 31: kona-hero-daynight-fix
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
.hero.hero--morning{
  background:linear-gradient(to bottom,rgba(255,200,120,.7) 0%,rgba(255,220,160,.4) 45%,rgba(151,202,225,.9) 92%,#78b7d5 100%),linear-gradient(115deg,rgba(255,170,90,.5),rgba(255,220,140,.3) 60%,rgba(240,220,180,.2)),#fce8c8!important;
}
.hero.hero--afternoon{
  background:linear-gradient(to bottom,rgba(100,180,230,.7) 0%,rgba(160,215,235,.52) 58%,rgba(135,193,220,.9) 92%,#78b7d5 100%),linear-gradient(115deg,rgba(100,180,230,.5),rgba(176,224,230,.3) 60%,rgba(255,244,200,.2)),#d4eefa!important;
}
.hero.hero--dusk{
  background:linear-gradient(to bottom,#1a0a3e 0%,#6b2060 35%,#c04020 65%,#f09050 85%,#78b7d5 100%)!important;
}
.hero.hero--night{
  background:linear-gradient(to bottom,#040d21 0%,#0a1535 30%,#111e45 58%,#1e1220 75%,#5c3522 87%,#78b7d5 100%)!important;
}

/* ========================================================================== 
   Layer 32: kona-magnet-circle
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
#konaOffersMagnet .kom-inner{width:58px!important;height:58px!important;padding:0!important;border-radius:50%!important;gap:0!important;justify-content:center!important;}
#konaOffersMagnet .kom-label{display:none!important;}
#konaOffersMagnet .kom-fire{font-size:24px!important;line-height:1!important;}
#konaOffersMagnet .kom-ring,#konaOffersMagnet .kom-spark{display:none!important;}
#konaMagnetBadge{position:absolute!important;right:-4px!important;top:-4px!important;min-width:20px!important;height:20px!important;padding:0 5px!important;font-size:10px!important;}

/* ========================================================================== 
   Layer 33: kona-fit-wip-card
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
#gym-section .gym-glass-card{cursor:default!important;}#gym-section .gym-tap-hint{color:rgba(255,231,168,.86)!important;letter-spacing:1.1px!important;}

/* ========================================================================== 
   Layer 34: kona-cart-location-style
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
#konaCartAddress{width:100%;min-height:58px;resize:vertical;border:1px solid rgba(125,85,50,.13);border-radius:16px;padding:12px;background:#fff;font-family:inherit;font-size:13px;outline:none;margin-bottom:10px;}
#konaCartAddress:focus{border-color:#25D366;box-shadow:0 0 0 4px rgba(37,211,102,.12);}
.kona-location-row{display:flex;align-items:stretch;gap:8px;margin:0 0 12px;}
.kona-location-btn{border:1px solid rgba(37,211,102,.28);border-radius:16px;background:rgba(37,211,102,.1);color:#176b3a;font-family:inherit;font-weight:800;font-size:12px;padding:10px 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;white-space:nowrap;}
.kona-location-btn:hover{background:rgba(37,211,102,.16);}
.kona-location-status{flex:1;min-height:40px;border:1px solid rgba(125,85,50,.1);border-radius:16px;background:rgba(255,255,255,.72);color:var(--muted);font-size:11px;line-height:1.25;padding:9px 10px;display:flex;align-items:center;}
.kona-location-status a{color:#176b3a;font-weight:800;text-decoration:none;}
@media(max-width:420px){.kona-location-row{flex-direction:column}.kona-location-btn{width:100%;}}

/* ========================================================================== 
   Layer 35: kona-performance-patch
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
/* Keep the long single-page layout cheap while it is off-screen. */
  @supports (content-visibility: auto) {
    body > section:not(#top), body > .section:not(#top) {
      content-visibility: auto;
      contain-intrinsic-size: 800px;
    }
  }

  /* Continuous marquees and blur-heavy motion are expensive on small GPUs. */
  @media (max-width: 700px) {
    .marquee-row, .ribbon-row, .honest-marquee-row,
    .kona-gallery-track, .menu-preview-strip,
    .kona-cart-fab {
      animation: none !important;
      will-change: auto !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .001ms !important;
    }
  }

  /* Keep the branded sky moving, but pause it when the hero is hidden. */
  .hero-sun, .cloud { will-change: transform; }
  .hero:not(.hero-visible) .hero-sun,
  .hero:not(.hero-visible) .cloud { animation-play-state: paused; }

  /* Use the lighter Signature Picks card treatment for the full menu. */
  #vm-section .vm-card {
    background: var(--card, #fffdf8) !important;
    border: 1px solid var(--border, rgba(125,85,50,.13)) !important;
    box-shadow: var(--shadow-sm, 0 8px 22px rgba(78,52,24,.08)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #vm-section .vm-card::before,
  #vm-section .vm-card::after { display: none !important; }

  /* Center the Need Help icon and remove the separate green ping dot. */
  .kona-guide-launch { justify-content: center; gap: 9px; }
  .kona-guide-launch .guide-dot { display: none !important; }
  .kona-guide-launch.is-expanded { justify-content: flex-start; overflow: visible; }
  .kona-guide-launch.is-expanded .guide-label {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
    text-align: left;
    line-height: 32px;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Keep the owner-facing Need Help label visible at rest as well. */
  .kona-guide-launch {
    width: 250px !important;
    min-width: 250px;
    padding: 10px 14px 10px 11px !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    overflow: visible !important;
  }
  .kona-guide-launch .guide-label {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap;
    text-align: left;
    line-height: 32px;
  }
  @media (max-width: 560px) {
    .kona-guide-launch { width: min(250px, calc(100vw - 28px)) !important; min-width: 0; }
  }

  /* Keep the story photo as a clean rounded image, without a protruding film. */
  .story-photo {
    overflow: hidden !important;
    border-radius: 26px !important;
    isolation: isolate;
  }
  .story-photo img {
    position: relative;
    z-index: 1;
    border-radius: inherit !important;
  }
  .story-photo::before { display: none !important; content: none !important; }
  .story-photo::after {
    inset: 0 !important;
    z-index: 2 !important;
    border-radius: inherit !important;
    box-shadow: inset 0 0 0 8px rgba(255,255,255,.5) !important;
  }

  /* Leave the hero gallery as an empty replacement slot for new images. */
  /* Keep the moving card shells; only the current image assets are removed. */
  #galleryRow .gphoto { display: block !important; }
  #galleryRow .gphoto img { display: block !important; }

  /* Restore the original cloud drift on every viewport, including mobile. */
  .cloud-1 { animation: drift 52s linear infinite !important; }
  .cloud-2 { animation: drift 70s linear infinite -28s !important; }
  .cloud-3 { animation: drift 90s linear infinite -48s !important; }
  #galleryRow.marquee-row { animation: slideX 50s linear infinite !important; will-change: transform; }

  /* Bring back the visible neon ordering treatment. */
  .header-btn,
  .hero-order-card button {
    background: linear-gradient(135deg, #25D366, #0f9f63) !important;
    color: #fff !important;
    border-color: rgba(176,255,215,.9) !important;
    box-shadow: 0 0 0 3px rgba(37,211,102,.14),
      0 0 22px rgba(37,211,102,.68),
      0 10px 24px rgba(18,140,126,.32) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.24) !important;
  }

  /* Honest Food: replace the always-running marquee with a quiet carousel. */
  #honest-food .honest-marquee-row {
    animation: none !important;
    transition: transform .62s cubic-bezier(.22,.75,.25,1) !important;
    will-change: transform;
  }
  #honest-food .honest-card,
  #honest-food .honest-card::before,
  #honest-food .honest-card::after,
  #honest-food .honest-title span {
    animation: none !important;
  }
  #honest-food .honest-card { transform: none !important; }

  /* Return Need Help to its compact button, with text only on expand. */
  .kona-guide-launch {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px;
    padding: 0 11px !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  .kona-guide-launch .guide-label { display: none !important; }
  .kona-guide-launch.is-expanded {
    width: 250px !important;
    min-width: 0 !important;
    padding: 10px 14px 10px 11px !important;
    gap: 9px !important;
  }
  .kona-guide-launch.is-expanded .guide-label {
    display: block !important;
    color: #23160d !important;
    font-weight: 900;
    line-height: 32px;
    white-space: nowrap;
  }

  /* The old food strip stays hidden; the Kona Vibe gallery is moved by the script below. */
  section.gallery[aria-label="Café Kona favourites"] { display: none !important; }

  /* Final Need Help component repair: the label is an actual foreground item. */
  body button#konaGuideLaunch {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    padding: 0 11px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    z-index: 10002 !important;
  }
  body button#konaGuideLaunch.is-expanded {
    width: 250px !important;
    min-width: 250px !important;
    padding: 10px 14px 10px 11px !important;
    gap: 9px !important;
    overflow: visible !important;
  }
  body button#konaGuideLaunch > i {
    position: relative;
    z-index: 2;
    flex: 0 0 32px !important;
  }
  body button#konaGuideLaunch > .guide-label,
  body button#konaGuideLaunch.is-expanded > .guide-label {
    display: none !important;
    position: relative;
    z-index: 3;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    color: #23160d !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 32px !important;
    white-space: nowrap !important;
    text-align: left !important;
  }
  body button#konaGuideLaunch.is-expanded > .guide-label { display: inline-block !important; }
  body button#konaGuideLaunch > .guide-dot { display: none !important; }
  @media (max-width: 560px) {
    body button#konaGuideLaunch.is-expanded { width: calc(100vw - 28px) !important; min-width: 0 !important; }
  }

/* ========================================================================== 
   Layer 36: kona-final-layout-lock
   Preserved in original cascade order during the 2026-07-20 consolidation.
   ========================================================================== */
html, body { overflow-x: hidden !important; overflow-y: auto !important; }
  body { min-height: 100%; }

  /* Hero sizing only. The background is owned by initSky (set inline with
     !important per time of day), so it is intentionally not set here. */
  #top.hero {
    min-height: clamp(620px, 88svh, 820px) !important;
    overflow: hidden !important;
  }

  /* The Vibe gallery overlaps the hero by two pixels and starts on the hero's
     exact horizon blue. This removes sub-pixel seams before blue warms to orange. */
  #gallery { display: block !important; visibility: visible !important; margin-top: -2px; background:#78b7d5 !important; }
  section.gallery[aria-label="Café Kona favourites"] { display: none !important; }

  /* One stable mobile Need Help control. */
  body button#konaGuideLaunch {
    position: fixed !important;
    left: 14px !important;
    bottom: 18px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    overflow: hidden !important;
    z-index: 10002 !important;
  }
  body button#konaGuideLaunch.is-expanded {
    width: min(250px, calc(100vw - 28px)) !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  body button#konaGuideLaunch > .guide-label { display: none !important; }
  body button#konaGuideLaunch.is-expanded > .guide-label {
    display: inline-block !important;
    color: #23160d !important;
    white-space: nowrap !important;
  }
  /* Off entirely whenever the cart, the scratch-card gift, or any other
     full-screen overlay is open — toggled by syncGuideVisibility() above. */
  body button#konaGuideLaunch.kona-guide-suppressed { display: none !important; }

/* Final menu maintenance: the detail trigger is now a real button. Reset only
   browser button chrome so it remains visually identical to the old image box. */
.menu-pick button.pick-img {
  width: 100%;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

/* Preserve the same mobile sky while avoiding three continuous compositor
   animations on small GPUs. Desktop motion remains unchanged. */
@media (max-width: 700px) {
  .hero .cloud {
    animation-play-state: paused !important;
    will-change: auto !important;
  }
}