:root {
    --bg:        #0d0b08;
    --bg-deep:   #0a0806;
    --card:      #131009;
    --ink:       #f2ead8;
    --ink-soft:  #c9c0a8;
    --ink-faint: #8f8670;
    --gold:      #c9a24b;
    --gold-soft: #a8843c;
    --fire:      #e8923a;
    --line:      #2c2619;
    --line-soft: #211c12;
    --line2:     #3a3327;
    --gold-dim:  #8a6f3c;
    --ok:        #7fb069;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background:
      radial-gradient(1000px 480px at 50% -8%, rgba(120,82,30,.14) 0%, transparent 60%),
      radial-gradient(800px 420px at 88% 112%, rgba(180,92,255,.05) 0%, transparent 55%),
      radial-gradient(700px 360px at 8% 108%, rgba(245,115,55,.07) 0%, transparent 55%),
      var(--bg);
    color: var(--ink);
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
  }
  ::selection { background: rgba(201,162,75,.28); }
  #embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; }

  .wrap { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; padding: 46px 30px 170px; }

  /* ============ Masthead ============ */
  .masthead { text-align: center; margin-bottom: 6px; }
  .crest {
    width: 44px; height: 44px; margin: 0 auto 18px;
    border: 1px solid var(--gold-soft); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold); font-size: 16px;
    box-shadow: 0 0 24px -6px rgba(201,162,75,.5);
  }
  .brand-zh { font-size: 36px; letter-spacing: .5em; margin-right: -.5em; font-weight: 600; text-shadow: 0 0 32px rgba(232,146,58,.2); }
  .brand-en { font-family: "Cormorant Garamond", Georgia, serif; font-size: 15px; letter-spacing: .58em; text-indent: .58em; color: var(--ink-soft); margin-top: 8px; }
  .rule-double { display: flex; align-items: center; gap: 18px; margin: 24px 0 6px; }
  .rule-double::before, .rule-double::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); }
  .tagline { text-align: center; font-size: 12px; letter-spacing: .5em; color: var(--ink-faint); }

  .hint {
    text-align: center; margin-top: 22px;
    font-family: "Noto Sans SC", sans-serif;
    font-size: 10.5px; letter-spacing: .28em; color: var(--ink-faint);
  }
  .hint b { color: var(--gold); font-weight: 400; }
  .hint i.h-dot { font-style: normal; }

  /* ============ 一级 · 顶部导航（分区 + 菜单全览） ============ */
  .topnav {
    position: sticky; top: 0; z-index: 60;
    display: flex; flex-direction: column;
    margin: 26px 0 6px; padding: 4px 8px 0;
    background: linear-gradient(180deg, rgba(13,11,8,.97), rgba(13,11,8,.9));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  /* 右上角工具行：语言切换 + 音乐（与分区导航分离开，不再挤占导航宽度） */
  .nav-utils {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 6px; padding: 0 6px 3px; flex: none;
  }
  .nav-utils .langbox { margin-left: 0; }
  .nav-utils .music-btn { margin-left: 0; }
  .secnav { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; align-items: center; -webkit-overflow-scrolling: touch; flex: none; width: 100%; }
  .secnav::-webkit-scrollbar { display: none; }
  .secnav button {
    font-family: "Noto Serif SC", "Noto Sans SC", serif;
    font-size: 12.5px; letter-spacing: .3em; text-indent: .3em;
    padding: 9px 12px; white-space: nowrap; flex: none;
    background: transparent; border: none; color: var(--ink-soft);
    cursor: pointer; position: relative; transition: color .25s;
  }
  .secnav button::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 1px;
    background: linear-gradient(90deg, var(--gold), var(--gold-soft));
    transform: scaleX(0); transform-origin: center; transition: transform .28s ease;
  }
  .secnav button:hover { color: var(--ink); }
  .secnav button.on { color: var(--gold); }
  .secnav button.on::after { transform: scaleX(1); }
  .secnav .nav-sep { flex: none; width: 1px; height: 16px; background: var(--line2); margin: 0 4px; }
  .secnav button.nav-all { letter-spacing: .26em; text-indent: .26em; color: var(--ink-soft); }
  /* 分区导航溢出提示：内容超出可视时右缘渐隐 + 箭头脉冲（JS 检测后点亮 body.nav-more） */
  .nav-fade {
    position: absolute; right: 0; bottom: 0; height: 38px; width: 66px;
    background: linear-gradient(90deg, rgba(13,11,8,0), rgba(13,11,8,.92) 72%);
    display: flex; align-items: center; justify-content: flex-end;
    pointer-events: none; opacity: 0; transition: opacity .35s; z-index: 3;
  }
  .nav-fade::after {
    content: "›"; font-family: Georgia, "Times New Roman", serif;
    font-size: 20px; line-height: 1; color: var(--gold); margin-right: 13px;
    text-shadow: 0 0 10px rgba(201,162,75,.65);
    animation: navArrow 1.5s ease-in-out infinite;
  }
  body.nav-more .nav-fade { opacity: 1; }
  @keyframes navArrow {
    0%, 100% { transform: translateX(0); opacity: .4; }
    50%      { transform: translateX(3px); opacity: 1; }
  }
  .langbox { display: flex; margin-left: 2px; flex: none; }
  .langbox button {
    font-family: "Noto Sans SC", sans-serif; font-size: 10px; letter-spacing: .22em;
    padding: 6px 12px; background: transparent; border: 1px solid var(--line);
    color: var(--ink-faint); cursor: pointer; transition: all .25s;
  }
  .langbox button + button { border-left: none; }
  .langbox button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .langbox button:not(.active):hover { color: var(--gold); border-color: var(--gold); }
  /* 音乐开关（中/EN 旁） */
  .music-btn {
    display: flex; align-items: center; justify-content: center; flex: none;
    min-width: 34px; height: 30px; margin-left: 6px; padding: 0 10px;
    font-family: "Noto Sans SC", sans-serif; font-size: 12px; line-height: 1;
    background: transparent; border: 1px solid var(--line);
    color: var(--ink-faint); cursor: pointer; transition: all .25s;
  }
  .music-btn:hover { color: var(--gold); border-color: var(--gold); }
  .music-btn:disabled { opacity: .35; cursor: not-allowed; }
  .music-btn.on { color: var(--gold); border-color: rgba(201,162,75,.65); background: rgba(201,162,75,.09); box-shadow: 0 0 14px -4px rgba(201,162,75,.55); }
  .music-btn .eq { display: none; gap: 2px; align-items: flex-end; height: 11px; margin-left: 6px; }
  .music-btn.on .eq { display: inline-flex; }
  .eq i { width: 2px; background: var(--gold); animation: eqB .9s ease-in-out infinite; }
  .eq i:nth-child(2) { animation-delay: .18s; }
  .eq i:nth-child(3) { animation-delay: .36s; }
  @keyframes eqB { 0%, 100% { height: 3px; } 50% { height: 11px; } }
  body.zh .en, body.en .zh { display: none !important; }

  /* ============ 视图切换（丝滑：淡出上移 + 内容级联入场） ============ */
  .stage { min-height: 40vh; transition: opacity .3s ease, transform .3s ease, filter .3s ease; will-change: opacity, transform, filter; }
  .stage.swap-out { opacity: 0; transform: translateY(16px); filter: blur(3px); }
  .stage .sec-head, .stage .dcard, .stage .drinks-hold, .stage .drink-row, .stage .ovl-group { opacity: 0; }
  .stage.play-in .sec-head, .stage.play-in .dcard, .stage.play-in .drinks-hold, .stage.play-in .drink-row, .stage.play-in .ovl-group { animation: cardUp .6s cubic-bezier(.22, .9, .32, 1) both; }
  @keyframes cardUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

  /* ============ 一级 · 分区 / 全览标题 ============ */
  .sec-head { text-align: center; margin-top: 40px; }
  .sec-zh { font-size: 16px; letter-spacing: .5em; text-indent: .5em; color: var(--ink); }
  .sec-zh.en { font-family: "Cormorant Garamond", serif; font-style: italic; letter-spacing: .1em; text-indent: 0; font-size: 15px; }
  .sec-en { font-family: "Cormorant Garamond", Georgia, serif; font-size: 10px; letter-spacing: .5em; text-indent: .5em; color: var(--gold); text-transform: uppercase; text-align: center; margin-top: 5px; }
  .sec-en.zh { font-family: "Noto Sans SC", sans-serif; font-style: normal; text-transform: none; letter-spacing: .42em; font-size: 10px; }
  .sec-rule { width: 34px; height: 1px; background: var(--gold-soft); margin: 14px auto 24px; box-shadow: 0 0 10px rgba(201,162,75,.4); }
  .sec-count { text-align: center; font-family: "Noto Sans SC", sans-serif; font-size: 9.5px; letter-spacing: .34em; color: var(--ink-faint); margin: -14px 0 26px; }

  /* ============ 二级 · 菜品卡（图左文右，手绘 9:16 完整展出） ============ */
  .dcard {
    border: 1px solid var(--line-soft);
    background: linear-gradient(160deg, rgba(19,16,9,.92), rgba(13,11,8,.6));
    margin-bottom: 22px;
    overflow: hidden;
    scroll-margin-top: 120px;
    transition: border-color .4s, box-shadow .4s;
  }
  .dcard.open { border-color: rgba(201,162,75,.5); box-shadow: 0 0 0 1px rgba(201,162,75,.18), 0 18px 60px -28px rgba(0,0,0,.9); }
  .dcard .dc-grid { display: grid; grid-template-columns: 270px 1fr; align-items: stretch; }

  .dc-media { position: relative; background: var(--bg-deep); overflow: hidden; aspect-ratio: 9 / 16; }
  .dc-media.has-media { cursor: zoom-in; }
  .dc-media.has-media img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .dc-media.has-media:hover img { transform: scale(1.03); }
  .dc-media .zoom-hint {
    position: absolute; right: 8px; bottom: 8px; z-index: 2;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12,10,6,.62); border: 1px solid rgba(201,162,75,.5);
    color: var(--gold); font-size: 12px; line-height: 1;
    opacity: 0; transition: opacity .3s; pointer-events: none;
  }
  .dc-media.has-media:hover .zoom-hint { opacity: 1; }
  .dc-media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; object-position: center;   /* 完整展出，绝不裁切 */
    display: block;
  }
  .dc-ph {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(201,162,75,.06), transparent 60%),
      repeating-linear-gradient(0deg, transparent 0 34px, rgba(201,162,75,.035) 34px 35px),
      repeating-linear-gradient(90deg, transparent 0 34px, rgba(201,162,75,.035) 34px 35px),
      rgba(19,16,9,.5);
  }
  .dc-ph .ph-ic { font-size: 21px; color: var(--gold-soft); }
  .dc-ph .ph-cn { font-size: 12.5px; letter-spacing: .4em; color: var(--ink-soft); }
  .dc-ph .ph-en { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 10px; letter-spacing: .2em; color: var(--ink-faint); }
  .dc-ph::after {
    content: attr(data-wm); position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: "Cormorant Garamond", serif; font-style: italic;
    font-size: clamp(20px, 5vw, 30px); color: rgba(201,162,75,.045);
    letter-spacing: .14em; transform: rotate(-6deg); white-space: nowrap;
  }

  /* 正文列 */
  .dc-body { display: flex; flex-direction: column; padding: 28px 28px 22px; min-width: 0; }
  .dc-head { display: flex; align-items: baseline; gap: 14px; }
  .dc-no { font-family: "Cormorant Garamond", serif; font-size: 14px; letter-spacing: .2em; color: var(--gold); }
  .dc-badges { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
  .badge {
    font-family: "Noto Sans SC", sans-serif; font-size: 9px; letter-spacing: .2em;
    border: 1px solid rgba(232,146,58,.5); color: var(--fire);
    padding: 3px 8px; white-space: nowrap;
  }
  .badge.pick { border-color: rgba(201,162,75,.55); color: var(--gold); }
  .dc-name { font-size: 23px; letter-spacing: .1em; font-weight: 500; margin-top: 12px; line-height: 1.5; }
  .dc-name.en { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: 19px; letter-spacing: .01em; margin-top: 3px; }
  .dc-note { font-family: "Noto Sans SC", sans-serif; font-size: 11.5px; letter-spacing: .14em; color: var(--gold); margin-top: 10px; }
  .dc-note.en { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 12.5px; letter-spacing: .04em; color: var(--gold-soft); margin-top: 5px; }

  /* 那一句（无标签文字） */
  .dc-l0 { margin-top: auto; padding-top: 26px; }
  .dc-l0 .qmark { font-family: "Cormorant Garamond", Georgia, serif; font-size: 40px; line-height: 0; color: var(--fire); opacity: .8; display: block; margin: 0 0 4px -2px; }
  .dc-l0 .l0-zh { font-size: 16.5px; line-height: 2; color: var(--ink); letter-spacing: .05em; }
  .dc-l0 .l0-en { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 15.5px; line-height: 1.85; color: var(--ink-soft); }

  .dc-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
  .dc-price { font-family: "Cormorant Garamond", serif; font-size: 18px; color: var(--gold); letter-spacing: .04em; }
  .dc-acts { margin-left: auto; display: flex; gap: 9px; }
  .dc-btn {
    font-family: "Noto Sans SC", sans-serif; font-size: 10.5px; letter-spacing: .28em;
    padding: 10px 18px; background: transparent; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--gold-soft); color: var(--gold);
    transition: all .3s;
  }
  .dc-btn:hover:not(:disabled) { background: rgba(201,162,75,.12); box-shadow: 0 0 18px -6px rgba(201,162,75,.5); }
  .dc-btn.off { border-color: var(--line); color: var(--ink-faint); cursor: not-allowed; opacity: .55; }
  .dc-btn.primary {
    background: linear-gradient(135deg, rgba(201,162,75,.22), rgba(201,162,75,.07));
    border-color: rgba(232,146,58,.7); color: var(--ink);
    position: relative; overflow: hidden;
  }
  .dc-btn.primary:hover:not(:disabled) { background: linear-gradient(135deg, rgba(232,146,58,.34), rgba(201,162,75,.14)); box-shadow: 0 0 20px -6px rgba(232,146,58,.6); }
  .dc-btn.primary::before { content: "+"; margin-right: 7px; color: var(--fire); font-weight: 400; }
  .dc-btn.added { border-color: var(--ok); color: var(--ok); background: rgba(127,176,105,.08); }
  .dc-btn.added::before { content: "✓ "; color: var(--ok); }

  /* 变体规格选择（烤鸡 半/整） */
  .spec-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; background: rgba(201,162,75,.045); border: 1px dashed var(--line2); }
  @keyframes specIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
  .spec-tip { font-family: "Noto Sans SC", sans-serif; font-size: 9.5px; letter-spacing: .24em; color: var(--ink-faint); margin-right: 2px; }
  .spec-chip {
    font-family: "Noto Serif SC", serif; font-size: 12px; letter-spacing: .08em;
    padding: 7px 13px; cursor: pointer; color: var(--ink-soft);
    border: 1px solid var(--line2); background: rgba(255,255,255,.02);
    transition: all .25s; white-space: nowrap;
  }
  .spec-chip b { color: var(--gold); font-weight: 500; margin-left: 7px; font-family: "Cormorant Garamond", serif; font-size: 13px; }
  .spec-chip .sp-q { color: var(--fire); margin-left: 7px; font-size: 10.5px; }
  .spec-chip:hover { border-color: var(--gold-soft); color: var(--ink); }
  .spec-chip:active { background: rgba(201,162,75,.16); }
  .spec-mini { font-family: "Noto Sans SC", sans-serif; font-size: 9.5px; letter-spacing: .2em; color: var(--ink-faint); margin-left: auto; cursor: pointer; }
  .spec-mini:hover { color: var(--ink-soft); }
  .dc-hascart { display: none; font-family: "Noto Sans SC", sans-serif; font-size: 10px; letter-spacing: .2em; color: var(--ok); margin-top: 9px; align-items: center; gap: 8px; flex-wrap: wrap; }
  .dc-hascart.show { display: flex; }
  .dc-hascart .go-cart { color: var(--gold); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; letter-spacing: .14em; }

  /* ============ 三级 · 菜品解析 ============ */
  .dc-detail { display: none; border-top: 1px solid var(--line); background: var(--bg-deep); position: relative; z-index: 2; }
  .dcard.open .dc-detail { display: block; animation: rise .45s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .kb { padding: 26px 30px 34px; background: rgba(10,8,6,.5); }
  .khead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .khead .kno { font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: .16em; color: var(--gold); }
  .khead .kt { font-family: "Noto Sans SC", sans-serif; font-size: 11.5px; letter-spacing: .34em; color: var(--ink); }
  .khead .ke { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 10px; letter-spacing: .2em; color: var(--ink-faint); text-transform: uppercase; margin-left: auto; }
  .kblock { margin-bottom: 26px; }
  .ess { font-size: 13.5px; line-height: 2.1; color: var(--ink-soft); border-left: 2px solid var(--gold-dim); padding-left: 16px; }
  .ess b { color: var(--ink); font-weight: 500; }
  table.ing { width: 100%; border-collapse: collapse; font-size: 12px; }
  table.ing th { text-align: left; font-weight: 400; font-size: 10px; color: var(--ink-faint); letter-spacing: .24em; font-family: "Noto Sans SC", sans-serif; padding: 8px 12px; border-bottom: 1px solid var(--line2); background: rgba(255,255,255,.015); }
  table.ing td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); vertical-align: top; line-height: 1.9; }
  table.ing td:first-child { color: var(--gold-soft); white-space: nowrap; letter-spacing: .1em; }
  table.ing td:nth-child(2) { color: var(--ink); }
  .taste3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
  .taste3 div { background: var(--bg-deep); padding: 14px 16px; }
  .taste3 i { display: block; font-style: normal; font-family: "Noto Sans SC", sans-serif; font-size: 9.5px; letter-spacing: .3em; color: var(--gold-soft); margin-bottom: 8px; }
  .taste3 span { font-size: 12px; line-height: 1.9; color: var(--ink-soft); }
  .mouth { margin-top: 1px; background: rgba(201,162,75,.04); border: 1px solid var(--line-soft); padding: 12px 16px; font-size: 12px; color: var(--ink-soft); line-height: 2; }
  .mouth b { color: var(--gold); font-weight: 400; letter-spacing: .1em; margin-right: 8px; font-size: 10px; }
  ol.tech { list-style: none; counter-reset: t; }
  ol.tech li { counter-increment: t; position: relative; padding: 0 0 11px 30px; font-size: 12.5px; line-height: 2; color: var(--ink-soft); }
  ol.tech li::before { content: counter(t, decimal-leading-zero); position: absolute; left: 0; top: 3px; font-family: "Cormorant Garamond", serif; font-size: 11px; color: var(--gold); letter-spacing: .05em; }
  ol.tech li b { color: var(--ink); font-weight: 500; }
  ol.tech li::after { content: ""; position: absolute; left: 16px; top: 20px; bottom: 0; width: 1px; background: var(--line-soft); }
  ol.tech li:last-child::after { display: none; }
  .culture { font-size: 12.5px; line-height: 2.2; color: var(--ink-soft); }
  .quote { margin-top: 18px; padding: 18px 22px; background: linear-gradient(135deg, rgba(201,164,90,.07), rgba(201,164,90,0)); border: 1px solid var(--line2); }
  .quote .qen { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 16px; color: var(--gold); line-height: 1.9; }
  .quote .qzh { font-size: 13px; color: var(--ink); line-height: 2.1; margin-top: 6px; }
  .copy { background: var(--card); border: 1px solid var(--line-soft); padding: 20px 24px; }
  .copy .l1 { font-family: "Noto Sans SC", sans-serif; font-size: 12px; color: var(--fire); letter-spacing: .12em; }
  .copy .l1 b, .copy .l2 b { color: var(--ink-faint); font-weight: 400; font-size: 10px; letter-spacing: .3em; margin-right: 10px; }
  .copy .l2 { margin-top: 14px; font-size: 13px; line-height: 2.15; color: var(--ink-soft); }

  /* ============ 菜单全览 ============ */
  .ovl-group { margin-bottom: 26px; }
  .ovl-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
  .ovl-zh { font-size: 14px; letter-spacing: .4em; color: var(--ink); }
  .ovl-en { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 11px; letter-spacing: .16em; color: var(--ink-faint); }
  .ovl-rule { height: 1px; flex: 1; background: linear-gradient(90deg, var(--gold-soft), transparent); opacity: .5; }
  .ovl-row {
    display: flex; align-items: baseline; gap: 12px; padding: 9px 4px;
    border-bottom: 1px solid var(--line-soft); font-size: 13.5px; letter-spacing: .06em;
  }
  .ovl-row .n { font-family: "Cormorant Garamond", serif; font-size: 11px; color: var(--gold-dim); letter-spacing: .1em; flex: none; }
  .ovl-row .nm { color: var(--ink-soft); }
  .ovl-row .pr { margin-left: auto; font-family: "Cormorant Garamond", serif; font-size: 14.5px; color: var(--gold); white-space: nowrap; }
  .ovl-tip { text-align: center; font-family: "Noto Sans SC", sans-serif; font-size: 10px; letter-spacing: .3em; color: var(--ink-faint); margin-top: 30px; }

  /* ============ 饮品空缺位 ============ */
  .drinks-hold {
    margin: 0 auto; max-width: 620px; text-align: center;
    border: 1px dashed rgba(201,162,75,.35);
    background: repeating-linear-gradient(0deg, transparent 0 32px, rgba(201,162,75,.03) 32px 33px),
                repeating-linear-gradient(90deg, transparent 0 32px, rgba(201,162,75,.03) 32px 33px),
                rgba(13,11,8,.4);
    padding: 54px 26px;
  }
  .drinks-hold .dh-mark { font-size: 18px; color: var(--gold-soft); letter-spacing: 0; }
  .drinks-hold .dh-zh { font-size: 15px; letter-spacing: .5em; text-indent: .5em; color: var(--ink-soft); margin-top: 16px; }
  .drinks-hold .dh-en { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 12px; letter-spacing: .3em; color: var(--ink-faint); margin-top: 10px; text-transform: uppercase; }
  .drinks-hold .dh-line { font-family: "Noto Sans SC", sans-serif; font-size: 10.5px; letter-spacing: .3em; color: var(--ink-faint); margin-top: 22px; }

  /* ============ 饮品（文字行 · 无图占位） ============ */
  .drinks-list { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 4px; }
  .drink-row {
    background: linear-gradient(160deg, rgba(19,16,9,.78), rgba(13,11,8,.5));
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 18px 22px 16px;
    display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: start;
  }
  .drink-row .dk-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .drink-row .dk-no { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 12px; color: var(--gold-soft); letter-spacing: .22em; }
  .drink-row .dk-name { font-family: "Noto Sans SC", sans-serif; font-size: 15px; letter-spacing: .15em; color: var(--ink-soft); }
  .drink-row .dk-en { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 12px; color: var(--ink-faint); letter-spacing: .12em; margin-left: 4px; }
  .drink-row .dk-style { font-family: "Noto Sans SC", sans-serif; font-size: 11.5px; line-height: 1.75; color: var(--ink-faint); margin-top: 8px; max-width: 64ch; grid-column: 1 / 2; }
  .drink-row .dk-style.en { font-style: italic; letter-spacing: .04em; }
  .drink-row .dk-spec { font-family: "Noto Sans SC", sans-serif; font-size: 10.5px; color: var(--ink-faint); margin-top: 6px; letter-spacing: .12em; grid-column: 1 / 2; }
  .drink-row .dk-price { font-family: "Cormorant Garamond", serif; font-size: 17px; color: var(--gold); text-align: right; }
  .drink-row .dk-acts { display: flex; gap: 8px; align-items: center; margin-top: 6px; justify-content: flex-end; }
  .drink-row .dk-btn {
    font-family: "Noto Sans SC", sans-serif; font-size: 10.5px; letter-spacing: .22em;
    padding: 8px 14px; background: transparent; color: var(--gold-soft);
    border: 1px solid rgba(201,162,75,.4); border-radius: 4px; cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
  }
  .drink-row .dk-btn:hover { background: rgba(201,162,75,.12); color: var(--gold); }
  .drink-row .dk-btn-bottle { color: var(--gold); border-color: rgba(201,162,75,.7); }
  .drink-row .dk-btn-bottle:hover { background: rgba(201,162,75,.18); }

  /* ============ Footer ============ */
  .legend { display: flex; justify-content: center; gap: 22px; align-items: center; margin: 40px auto 0; flex-wrap: wrap; }
  .legend-item { display: flex; align-items: center; gap: 7px; }
  .legend-star { color: var(--fire); font-size: 10px; letter-spacing: .14em; }
  .legend-text { font-family: "Noto Sans SC", sans-serif; font-size: 10px; color: var(--ink-faint); letter-spacing: .2em; }
  .foot { text-align: center; margin-top: 64px; }
  .foot-rule { width: 44px; height: 1px; background: var(--gold-soft); margin: 0 auto 22px; box-shadow: 0 0 10px rgba(201,162,75,.4); }
  .foot-zh { font-size: 11px; letter-spacing: .4em; color: var(--ink-faint); }
  .foot-en { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 10.5px; letter-spacing: .34em; color: var(--ink-faint); margin-top: 10px; text-transform: uppercase; }

  /* ============ 右下角 · 实时购物车栏 ============ */
  .cart-dock {
    position: fixed; right: 16px; bottom: 16px; z-index: 70;
    display: flex; align-items: stretch;
    border: 1px solid rgba(201,162,75,.55);
    background: linear-gradient(180deg, rgba(23,18,10,.96), rgba(13,11,8,.97));
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 44px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4), 0 0 26px -8px rgba(201,162,75,.28);
    max-width: calc(100vw - 28px);
    animation: dockIn .5s ease both;
  }
  @keyframes dockIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes dockPulse { 0% { box-shadow: 0 0 0 0 rgba(232,146,58,.55); } 100% { box-shadow: 0 0 0 14px rgba(232,146,58,0); } }
  .cart-dock.pulse { animation: dockPulse .6s ease-out 1; }
  .dock-main { display: flex; align-items: center; gap: 12px; padding: 0 16px; cursor: pointer; border: none; background: transparent; color: var(--ink); font-family: "Noto Sans SC", sans-serif; }
  .dock-ic { width: 30px; height: 30px; border: 1px solid rgba(201,162,75,.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 12px; flex: none; }
  .dock-tx { text-align: left; }
  .dock-l1 { font-size: 9px; letter-spacing: .3em; color: var(--ink-faint); }
  .dock-l2 { font-family: "Cormorant Garamond", serif; font-size: 15px; color: var(--gold); letter-spacing: .04em; margin-top: 2px; white-space: nowrap; }
  .dock-l2.empty { color: var(--ink-faint); font-family: "Noto Sans SC", sans-serif; font-size: 11px; letter-spacing: .14em; }
  .dock-go {
    border: none; border-left: 1px solid rgba(201,162,75,.35);
    background: linear-gradient(135deg, #d9b060, #a8843c); color: #171209;
    font-family: "Noto Serif SC", serif; font-size: 12px; letter-spacing: .3em; text-indent: .3em;
    padding: 0 18px; cursor: pointer; transition: filter .25s; white-space: nowrap;
  }
  .dock-go:disabled { filter: grayscale(.9) opacity(.45); cursor: not-allowed; }
  .dock-go:not(:disabled):hover { filter: brightness(1.1); }

  /* ============ 购物车单（底部抽屉） ============ */
  .mask { position: fixed; inset: 0; background: rgba(5,4,2,.62); backdrop-filter: blur(2px); z-index: 80; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .mask.show { opacity: 1; visibility: visible; }
  .sheet {
    position: fixed; left: 50%; bottom: 0; z-index: 90;
    transform: translate(-50%, 105%); transition: transform .32s cubic-bezier(.22,.9,.32,1);
    width: min(600px, 100%); max-height: 78vh;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #181309, #0d0b08);
    border: 1px solid var(--line2); border-bottom: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 60px -20px rgba(0,0,0,.9);
  }
  .sheet.show { transform: translate(-50%, 0); }
  .sheet-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
  .sheet-title { font-size: 15px; letter-spacing: .4em; color: var(--ink); }
  .sheet-sub { font-family: "Noto Sans SC", sans-serif; font-size: 9px; letter-spacing: .3em; color: var(--ink-faint); margin-top: 3px; }
  .sheet-x { margin-left: auto; font-size: 18px; color: var(--ink-faint); cursor: pointer; padding: 4px 8px; }
  .sheet-x:hover { color: var(--gold); }
  .cart-lines { overflow-y: auto; padding: 6px 20px; }
  .cl-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
  .cl-row:last-child { border-bottom: none; }
  .cl-name { min-width: 0; }
  .cl-n1 { font-size: 14.5px; letter-spacing: .06em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cl-spec { display: inline-block; margin-top: 5px; font-family: "Noto Sans SC", sans-serif; font-size: 9px; letter-spacing: .18em; color: var(--gold); border: 1px solid var(--line2); padding: 2px 7px; }
  .cl-unit { font-family: "Cormorant Garamond", serif; font-size: 13px; color: var(--ink-faint); margin-left: 8px; }
  .cl-qty { display: flex; align-items: center; gap: 0; border: 1px solid var(--line2); margin-left: auto; }
  .cl-qty button { width: 28px; height: 28px; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 15px; line-height: 1; }
  .cl-qty button:hover { color: var(--gold); }
  .cl-qty span { width: 30px; text-align: center; font-family: "Cormorant Garamond", serif; font-size: 14px; color: var(--ink); }
  .cl-sub { font-family: "Cormorant Garamond", serif; font-size: 14.5px; color: var(--gold); min-width: 64px; text-align: right; }
  .cl-del { color: var(--ink-faint); font-size: 14px; padding: 6px; cursor: pointer; }
  .cl-del:hover { color: var(--fire); }
  .cart-empty { text-align: center; padding: 44px 20px; color: var(--ink-faint); }
  .cart-empty .ce-ic { font-size: 20px; color: var(--gold-dim); }
  .cart-empty .ce-t { font-size: 12px; letter-spacing: .3em; margin-top: 14px; font-family: "Noto Sans SC", sans-serif; }
  .sheet-foot { border-top: 1px solid var(--line); padding: 14px 20px 18px; background: rgba(10,8,6,.55); }
  .sf-sum { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; padding-bottom: 12px; }
  .sf-lab { font-family: "Noto Sans SC", sans-serif; font-size: 10px; letter-spacing: .3em; color: var(--ink-faint); }
  .sf-tot { font-family: "Cormorant Garamond", serif; font-size: 24px; color: var(--gold); }
  .sf-acts { display: flex; gap: 10px; }
  .btn-ghost {
    flex: 1; padding: 12px 10px; cursor: pointer;
    border: 1px solid var(--line2); background: transparent; color: var(--ink-faint);
    font-family: "Noto Sans SC", sans-serif; font-size: 11px; letter-spacing: .28em;
    transition: all .25s;
  }
  .btn-ghost:hover { color: var(--fire); border-color: var(--fire); }
  .btn-gold {
    flex: 2.2; padding: 13px 10px; cursor: pointer; border: none;
    background: linear-gradient(135deg, #d9b060, #a8843c); color: #171209;
    font-family: "Noto Serif SC", serif; font-size: 12.5px; letter-spacing: .3em; text-indent: .3em;
    transition: filter .25s;
  }
  .btn-gold:hover { filter: brightness(1.1); }
  .sf-note { font-family: "Noto Sans SC", sans-serif; font-size: 9px; letter-spacing: .2em; color: var(--ink-faint); text-align: center; margin-top: 12px; }

  /* ============ 预点单（整版覆盖层） ============ */
  .ck {
    position: fixed; inset: 0; z-index: 100; overflow-y: auto;
    background:
      radial-gradient(900px 400px at 50% -6%, rgba(120,82,30,.16) 0%, transparent 60%),
      radial-gradient(700px 380px at 90% 108%, rgba(245,115,55,.06) 0%, transparent 55%),
      var(--bg);
    display: none;
  }
  .ck.show { display: block; animation: fadeIn .3s ease both; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .ck-wrap { max-width: 640px; margin: 0 auto; padding: 44px 22px 70px; position: relative; }
  .ck-x { position: fixed; top: 14px; right: 14px; z-index: 5; font-size: 20px; color: var(--ink-faint); cursor: pointer; padding: 8px 12px; background: rgba(13,11,8,.6); border: 1px solid var(--line); }
  .ck-x:hover { color: var(--gold); border-color: var(--gold-soft); }
  .ck-brand { text-align: center; }
  .ck-brand .b1 { font-size: 20px; letter-spacing: .44em; text-indent: .44em; color: var(--ink); }
  .ck-brand .b2 { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 11px; letter-spacing: .4em; color: var(--ink-faint); margin-top: 6px; text-transform: uppercase; }
  .ck-brand .b3 { font-size: 11px; letter-spacing: .5em; text-indent: .5em; color: var(--gold); margin-top: 14px; }
  .ck-brand .bline { width: 40px; height: 1px; margin: 16px auto 0; background: var(--gold-soft); }

  /* 表单 */
  .ck-form { margin-top: 30px; }
  .fld { margin-bottom: 20px; }
  .fld label { display: block; font-family: "Noto Sans SC", sans-serif; font-size: 10px; letter-spacing: .3em; color: var(--gold-soft); margin-bottom: 9px; }
  .fld label i { font-style: normal; color: var(--fire); margin-left: 4px; }
  .fld input, .fld select, .fld textarea {
    width: 100%; padding: 12px 14px;
    background: rgba(255,255,255,.02); border: 1px solid var(--line2);
    color: var(--ink); font-family: "Noto Serif SC", serif; font-size: 14px; letter-spacing: .06em;
    outline: none; transition: border-color .25s; border-radius: 0;
    -webkit-appearance: none; appearance: none;
    color-scheme: dark;   /* 原生下拉弹层 / 日期时间选择器走深色渲染 */
  }
  .fld select option { color: var(--gold); background: #0d0b08; }   /* 备选内容：雅金字 · 网页同款黑底 */
  .fld textarea { min-height: 74px; resize: vertical; }
  .fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--gold-soft); }
  .fld input::-webkit-calendar-picker-indicator { filter: invert(.8) sepia(.4); cursor: pointer; }
  .fld select { background-image: linear-gradient(45deg, transparent 50%, var(--gold-soft) 50%), linear-gradient(135deg, var(--gold-soft) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
  .fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .fld-name { grid-template-columns: 1.7fr 1fr; align-items: end; }
  .fld .err { display: none; font-family: "Noto Sans SC", sans-serif; font-size: 9.5px; color: var(--fire); letter-spacing: .12em; margin-top: 6px; }
  .fld.bad .err { display: block; }
  .fld.bad input, .fld.bad select { border-color: var(--fire); }
  .ck-cta { display: block; width: 100%; margin-top: 8px; padding: 15px 10px; cursor: pointer; border: none; background: linear-gradient(135deg, #d9b060, #a8843c); color: #171209; font-family: "Noto Serif SC", serif; font-size: 14px; letter-spacing: .4em; text-indent: .4em; transition: filter .25s; }
  .ck-cta:hover { filter: brightness(1.1); }
  .ck-hint { text-align: center; font-family: "Noto Sans SC", sans-serif; font-size: 9.5px; letter-spacing: .24em; color: var(--ink-faint); margin-top: 16px; line-height: 2; }

  /* 确认单 */
  .ck-confirm { display: none; margin-top: 26px; }
  .ck.conf .ck-form { display: none; }
  .ck.conf .ck-confirm { display: block; }
  .conf-card { border: 1px solid var(--line2); background: linear-gradient(170deg, rgba(19,16,9,.92), rgba(13,11,8,.55)); padding: 26px 26px 20px; }
  .conf-cap { text-align: center; font-family: "Noto Sans SC", sans-serif; font-size: 10px; letter-spacing: .5em; color: var(--gold); }
  .conf-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 20px 0 4px; padding: 16px 0; border-top: 1px dashed var(--line2); border-bottom: 1px dashed var(--line2); font-size: 13px; }
  .conf-info .ci { display: flex; gap: 8px; }
  .conf-info .ci b { font-weight: 400; color: var(--ink-faint); font-family: "Noto Sans SC", sans-serif; font-size: 10px; letter-spacing: .2em; flex: none; }
  .conf-info .ci span { color: var(--ink); }
  .conf-note { grid-column: 1 / -1; font-size: 12px; color: var(--ink-soft); line-height: 1.9; }
  .conf-note b { font-weight: 400; color: var(--ink-faint); font-family: "Noto Sans SC", sans-serif; font-size: 10px; letter-spacing: .2em; margin-right: 6px; }
  .conf-items { margin-top: 18px; }
  .cf-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
  .cf-row .ci-name { color: var(--ink); }
  .cf-row .ci-spec { color: var(--gold-soft); font-size: 11.5px; }
  .cf-row .ci-q { color: var(--ink-faint); font-size: 12px; flex: none; }
  .cf-row .ci-sub { margin-left: auto; font-family: "Cormorant Garamond", serif; color: var(--gold); font-size: 14.5px; }
  .conf-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; padding: 16px 0 2px; }
  .conf-total .tl { font-family: "Noto Sans SC", sans-serif; font-size: 10.5px; letter-spacing: .3em; color: var(--ink-faint); }
  .conf-total .tv { font-family: "Cormorant Garamond", serif; font-size: 28px; color: var(--gold); }
  .conf-foot { text-align: center; margin-top: 18px; font-family: "Noto Sans SC", sans-serif; font-size: 9px; letter-spacing: .24em; color: var(--ink-faint); line-height: 2.2; }
  .conf-acts { display: flex; gap: 10px; margin-top: 20px; }
  .conf-copy { text-align: center; font-family: "Noto Sans SC", sans-serif; font-size: 10px; letter-spacing: .4em; color: var(--fire); margin-top: 22px; animation: fadeIn .4s ease both; }
  .conf-copy b { font-weight: 400; }

  /* Toast */
  #toast {
    position: fixed; left: 50%; bottom: 92px; z-index: 130; transform: translate(-50%, 14px);
    background: rgba(23,18,10,.96); border: 1px solid var(--gold-soft); color: var(--ink);
    font-family: "Noto Sans SC", sans-serif; font-size: 11px; letter-spacing: .16em;
    padding: 11px 20px; opacity: 0; visibility: hidden; transition: all .3s ease;
    max-width: 82vw; text-align: center; box-shadow: 0 10px 34px -12px rgba(0,0,0,.8);
  }
  #toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  #toast b { color: var(--gold); font-weight: 500; }

  /* ============ 图片灯箱（点击手绘图放大查看） ============ */
  .lightbox {
    position: fixed; inset: 0; z-index: 999;
    display: none; align-items: center; justify-content: center;
    background: rgba(8,6,4,.94);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 22px;
  }
  .lightbox.on { display: flex; animation: lbIn .3s ease both; }
  @keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
  .lightbox img {
    max-width: 100%; max-height: 100%;
    object-fit: contain; display: block;
    box-shadow: 0 30px 90px -30px rgba(0,0,0,.95);
    animation: lbImg .38s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes lbImg { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
  .lightbox .lb-close {
    position: absolute; top: 16px; right: 16px;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20,16,9,.7); border: 1px solid rgba(201,162,75,.45);
    color: var(--gold); font-size: 19px; line-height: 1; cursor: pointer;
    transition: all .25s;
  }
  .lightbox .lb-close:hover { background: rgba(201,162,75,.18); border-color: var(--gold); }
  .lightbox .lb-cap {
    position: absolute; left: 0; right: 0; bottom: 18px;
    text-align: center; padding: 0 24px;
    font-family: "Noto Serif SC", serif; font-size: 14px; letter-spacing: .18em;
    color: var(--gold-soft);
  }
  .lightbox .lb-cap .lb-en {
    display: block; margin-top: 5px;
    font-family: "Cormorant Garamond", serif; font-style: italic;
    font-size: 12.5px; letter-spacing: .06em; color: var(--ink-faint);
  }
  body.lb-open { overflow: hidden; }

  @media (max-width: 700px) {
    .wrap { padding: 34px 16px 150px; }
    .brand-zh { font-size: 30px; }
    /* ---- 手机端：图在左、文在右（与桌面端同构，等比缩放）----
       图片列恒占行宽 **40%**（= 设计稿 320/785 的等比换算），所有卡片列宽严格一致；
       右列 minmax(0,1fr) 可被压缩、不撑破栅格。两列 min-width:0 + 溢出裁剪，
       杜绝图片原始像素把网格列顶开。 */
    .dcard .dc-grid { grid-template-columns: 40% minmax(0, 1fr); }
    .dcard .dc-media, .dcard .dc-body { min-width: 0; }
    .dc-media { width: 100%; max-width: 100%; aspect-ratio: 9 / 16; overflow: hidden; }
    .dc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    .dc-media { aspect-ratio: 9 / 16; }
    .dc-body { padding: 12px 12px 11px; }
    .dc-name { font-size: 15.5px; letter-spacing: .01em; margin-top: 7px; line-height: 1.4; }
    .dc-name.en { font-size: 12px; }
    .dc-note { font-size: 9.5px; letter-spacing: .06em; margin-top: 6px; }
    .dc-note.en { font-size: 10.5px; }
    .dc-head { gap: 7px; }
    .dc-badges { flex-wrap: wrap; }
    .dc-l0, .dc-foot, .dc-acts { min-width: 0; }
    .dc-name, .dc-note, .dc-l0 .l0-zh, .dc-l0 .l0-en { word-break: break-word; }
    .dc-no { font-size: 11px; }
    .badge { font-size: 7.5px; letter-spacing: .1em; padding: 2px 5px; }
    .dc-l0 { padding-top: 13px; }
    .dc-l0 .qmark { font-size: 25px; }
    .dc-l0 .l0-zh { font-size: 12px; line-height: 1.8; }
    .dc-l0 .l0-en { font-size: 11px; line-height: 1.65; }
    /* 底部：价格独占一行，两个按钮**竖排成一列**、等宽满行 */
    .dc-foot { margin-top: 13px; padding-top: 11px; gap: 9px; flex-direction: column; align-items: stretch; }
    .dc-price { font-size: 16px; }
    .dc-btn { font-size: 10px; letter-spacing: .18em; padding: 9px 10px; box-sizing: border-box; min-width: 0; white-space: normal; }
    .dc-acts { margin-left: 0; width: 100%; flex-direction: column; gap: 7px; }
    .dc-acts .dc-btn { width: 100%; text-align: center; }
    .spec-box { margin-top: 9px; padding: 8px 9px; gap: 6px; }
    .spec-chip { font-size: 11px; padding: 6px 10px; }
    .kb { padding: 20px 16px 26px; }
    .taste3 { grid-template-columns: 1fr; }
    /* 引导语手机端两行：◈…加入购物车” / 右下角一键生成预点单…◈ */
    .hint { line-height: 2.1; letter-spacing: .2em; }
    .hint .h-b { display: block; }
    .hint .h-dot { display: none; }
    /* 分区导航：更紧凑排布，溢出可滑，选中项自动滚到可视区中央 */
    .secnav { gap: 2px; scroll-snap-type: x proximity; }
    .secnav button { font-size: 12px; letter-spacing: .2em; text-indent: .2em; padding: 9px 11px; scroll-snap-align: start; }
    .topnav { margin-top: 18px; padding: 2px 6px 0; }
    .nav-utils { padding: 0 4px 2px; }
    .nav-fade { height: 36px; width: 58px; }
    .fld-row { grid-template-columns: 1fr; gap: 0; }
    .cart-dock { right: 10px; bottom: 10px; }
    .ck-wrap { padding: 40px 16px 60px; }
    .conf-card { padding: 20px 16px 16px; }
    .dc-acts { width: 100%; margin-left: 0; }
    .dc-acts .dc-btn { flex: 1; text-align: center; }
    .dc-foot { gap: 8px; }
    .drink-row { grid-template-columns: 1fr; padding: 16px 18px 14px; }
    .drink-row .dk-price { text-align: left; }
    .drink-row .dk-acts { justify-content: flex-start; }
  }
  @media (prefers-reduced-motion: reduce) {
    #embers, .cart-dock, .sheet, .ck, .stage, .stage .dcard, .stage .sec-head, .stage .drinks-hold, .stage .drink-row, .stage .ovl-group { animation: none !important; }
    .stage { transition: none !important; }
    .stage .sec-head, .stage .dcard, .stage .drinks-hold, .stage .drink-row, .stage .ovl-group { opacity: 1 !important; }
  }
  @media print {
    .topnav, .cart-dock, .sheet, .mask, #embers, .legend, .dc-btn, .ck-x, .conf-copy { display: none !important; }
    body { background: #0d0b08 !important; }
    .ck { position: static; display: block !important; background: #0d0b08 !important; }
    .ck.conf .ck-form { display: none; }
    .ck.conf .ck-confirm { display: block; }
  }