/* Cyberpunk palette. */
:root {
  --bg: #090d19;
  --surface: #111a2b;
  --surface-alt: #18243a;
  --text: #f3f6ff;
  --muted: #abb7d0;
  --accent: #62e7ed;
  --accent-text: #081525;
  --accent-soft: #153347;
  --line: #35516b;
  --eyebrow: #73e2ed;
  --warm: #ff65bc;
  --status: #153d4a;
  --neon: #63f6f4;
  --promo-a: #fb409d;
  --promo-b: #923df1;
}
body { background: radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--warm) 6%, transparent), transparent 28%), var(--bg); }
.app-shell { max-width: 1020px; }
.topbar { height: 81px; margin-bottom: 18px; border-bottom: 0; }
.brand { gap: 10px; font-family: 'Playfair Display', Georgia, serif; font-size: 22px; letter-spacing: -.045em; line-height: .94; }
.brand > span:last-child { display: block; }
.brand small { display: block; margin-top: 5px; font: 700 8px/1 'Space Grotesk', Arial, sans-serif; letter-spacing: .26em; color: var(--muted); }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; font-family: Arial, sans-serif; font-size: 26px; transform: rotate(-8deg); }
.brand-dot { color: var(--warm); }
.topbar-right { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 11px; }
.open-dot { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px var(--neon); background: var(--neon); }
.home-search { min-height: 48px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 0 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 5px 17px #2d18100c; color: var(--muted); }
.home-search > span:first-child { font-size: 27px; line-height: 1; }
.home-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.home-search input::placeholder { color: var(--muted); }
.home-search-key { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--warm); font-weight: 800; }
.hero { isolation: isolate; display: block; min-height: 390px; border: 0; border-radius: 27px; background: linear-gradient(90deg, #1c0d08ed 0%, #1c0d08c2 37%, #1c0d0840 72%), url('/hero-coffee.png') 60% center / cover no-repeat; box-shadow: 0 19px 46px #2b130d38; overflow: hidden; }
.hero:before { z-index: -1; background: linear-gradient(0deg, #10080575, transparent 42%), radial-gradient(circle at 89% 14%, color-mix(in srgb, var(--warm) 24%, transparent), transparent 26%); }
.hero:after { content: ''; position: absolute; inset: 14px; border: 1px solid #ffffff26; border-radius: 18px; pointer-events: none; }
.hero-copy { max-width: 610px; padding: 47px 48px 66px; }
.hero-kicker { display: inline-block; padding: 6px 9px; border: 1px solid #72f1ed9c; color: #8bf6ec; background: #11303b8f; font: 700 10px/1 'Space Grotesk', Arial, sans-serif; letter-spacing: .18em; box-shadow: 0 0 17px #25dce234; }
.hero-script { display: block; margin: 24px 0 0; color: #ffe6d3; font: italic 25px/1.1 'Playfair Display', Georgia, serif; }
.hero h1 { margin: 8px 0 13px; max-width: 500px; color: #fff9f2; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(38px, 4.8vw, 58px); font-weight: 600; letter-spacing: -.04em; line-height: 1.04; }
.hero h1 em { color: #f2d5ba; font-weight: 500; }
.hero p { max-width: 310px; margin-bottom: 23px; color: #f2dfd1; font-size: 12px; line-height: 1.65; }
.hero-btn { width: fit-content; min-height: 43px; gap: 18px; padding: 10px 12px 10px 18px; border-radius: 999px; background: #fff6eb; color: #321b15; font: 700 10px/1 'Space Grotesk', Arial, sans-serif; letter-spacing: .07em; box-shadow: 0 8px 22px #0005; }
.hero-btn span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--warm); color: #fff; font-size: 16px; }
.hero-index { position: absolute; bottom: 24px; right: 31px; color: #fff9; font: 700 10px/1 'Space Grotesk', Arial, sans-serif; letter-spacing: .18em; }
.hero-index span { color: #f89cbb; margin-left: 8px; letter-spacing: .4em; }
.quick-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 25px 0 13px; }
.quick-categories button { display: grid; justify-items: center; gap: 8px; padding: 3px; border: 0; background: none; color: var(--text); }
.quick-categories button span { width: 59px; height: 59px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font-size: 24px; box-shadow: 0 5px 15px #2b171010; transition: transform .18s, border-color .18s; }
.quick-categories button:first-child span { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.quick-categories button:hover span { transform: translateY(-3px); border-color: var(--warm); }
.quick-categories strong { font-size: 11px; font-weight: 700; }
.section-heading { margin-top: 35px; }
.section-heading h2, .page-heading h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; letter-spacing: -.04em; }
.section-heading h2 { font-size: clamp(23px, 3vw, 30px); }
.eyebrow.dark { color: var(--warm); font-family: 'Space Grotesk', Arial, sans-serif; letter-spacing: .18em; }
.picks-heading { gap: 12px; }
.section-link { flex: none; align-self: end; padding: 0 0 5px; background: none; border: 0; color: var(--accent); font-size: 11px; font-weight: 800; }
.home-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.pick-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: 0 8px 20px #301a100a; }
.pick-image { position: relative; height: 155px; overflow: hidden; background: var(--surface-alt); }
.pick-image .product-image { width: 100%; height: 100%; border-radius: 0; font-size: 59px; }
.pick-image .product-image:before { width: 130px; height: 130px; }
.pick-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick-tag { position: absolute; top: 10px; left: 10px; padding: 5px 8px; border-radius: 6px; background: #43231cd9; color: #fff5e8; font: 700 9px/1 'Space Grotesk', Arial, sans-serif; letter-spacing: .06em; }
.pick-body { padding: 12px 13px 14px; }
.pick-body strong, .pick-body small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pick-body strong { font-size: 13px; }
.pick-body small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.pick-bottom { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 15px; }
.pick-bottom b { font-size: 14px; }
.pick-bottom .add-btn, .pick-bottom .qty button { border-radius: 50%; }
.pick-bottom .qty { gap: 5px; }
.feature-card { min-height: 175px; border-radius: 16px; overflow: hidden; }
.feature-card:after { content: ''; position: absolute; width: 18px; height: 18px; right: 0; top: 0; border-top: 2px solid var(--warm); border-right: 2px solid var(--warm); }
.feature-card .feature-icon { background: var(--accent-soft); color: var(--warm); }
.feature-card strong { font-size: 15px; }
.feature-arrow { color: var(--warm); }
.home-note { position: relative; width: 100%; min-height: 132px; margin: 19px 0 38px; border: 0; padding: 22px 27px; text-align: left; background: linear-gradient(115deg, var(--promo-a), var(--promo-b)); color: #160b1a; clip-path: polygon(0 0, calc(100% - 23px) 0, 100% 23px, 100% 100%, 0 100%); box-shadow: none; }
.home-note p { display: grid; gap: 5px; margin: 0; color: #211123; }
.home-note small { font: 700 10px 'Space Grotesk', Arial, sans-serif; letter-spacing: .1em; }
.home-note strong { color: #1d1020; font: 700 26px/1.1 'Space Grotesk', Arial, sans-serif; letter-spacing: -.05em; }
.home-note em { font-size: 11px; font-style: normal; }
.note-bolt { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 13px; background: #1a1026; color: #ff73b8; font-size: 31px; }
.note-arrow { margin-left: auto; color: #1d1020; font-size: 26px; }
.page-heading { padding-top: 12px; }
.page-heading h1 { font-size: clamp(34px, 4vw, 47px); }
.category-tabs button { border-radius: 999px; }
.category-tabs button.active { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent); }
.menu-search, .product-card, .map-wrap, .table-detail, .history-card { box-shadow: 0 7px 22px #24130c08; }
.product-card { border-radius: 17px; }
.product-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.product-image span { z-index: 1; }
.product-image:has(img) span { opacity: 0; }
.product-image:has(img) img { z-index: 2; }
.product-image:has(img) img[hidden] { display: none; }
.product-info h3 { font-family: 'Space Grotesk', Arial, sans-serif; font-weight: 700; }
.add-btn, .qty button { border-radius: 50%; }
.floor-plan { background-image: linear-gradient(color-mix(in srgb, var(--plan-line) 72%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--plan-line) 72%, transparent) 1px, transparent 1px); }
.table.selected { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 17px color-mix(in srgb, var(--neon) 33%, transparent); }
.detail-btn, .primary-btn, .cart-fab { border-radius: 12px; }
.pay-link { background: var(--accent); color: var(--accent-text); }
.bottom-nav { min-height: 75px; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 28px #1c100d14; }
.bottom-nav button { position: relative; font-family: 'Space Grotesk', Arial, sans-serif; }
.bottom-nav button.active:after { content: ''; position: absolute; width: 23px; height: 3px; bottom: 7px; border-radius: 5px; background: var(--warm); box-shadow: 0 0 9px color-mix(in srgb, var(--warm) 70%, transparent); }
.bottom-nav button.active .nav-icon { color: var(--warm); }
.modal-sheet { border-top: 3px solid var(--warm); }
.modal-head h2 { font-family: 'Playfair Display', Georgia, serif; }
.toast { border-left: 3px solid var(--neon); }
:root .hero { box-shadow: 0 0 0 1px #68e7f870, 0 17px 38px #0008, 0 0 23px #ed45ae29; }
:root .hero-kicker { color: #8af8fa; }
:root .home-note { color: #10091c; }
:root .pick-card, :root .feature-card { box-shadow: 0 0 0 1px #66e6ed21, 0 10px 25px #0005; }
@media (max-width: 700px) {
  .app-shell { padding-left: 14px; padding-right: 14px; }
  .topbar { height: 72px; margin-bottom: 8px; }
  .topbar-actions { gap: 8px; }
  .topbar-right { font-size: 10px; }
  .hero { min-height: 369px; background-position: 62% center; border-radius: 23px; }
  .hero-copy { max-width: none; padding: 28px 25px 58px; }
  .hero-kicker { font-size: 8px; }
  .hero-script { margin-top: 26px; font-size: 22px; }
  .hero h1 { max-width: 300px; font-size: clamp(33px, 8.8vw, 42px); }
  .hero p { max-width: 250px; font-size: 11px; }
  .hero-index { right: 22px; bottom: 19px; }
  .quick-categories { margin-top: 20px; }
  .quick-categories button span { width: 54px; height: 54px; }
  .quick-categories strong { font-size: 10px; }
  .home-picks { display: flex; overflow-x: auto; gap: 10px; margin-right: -14px; padding-right: 14px; padding-bottom: 7px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .home-picks::-webkit-scrollbar { display: none; }
  .pick-card { flex: 0 0 156px; scroll-snap-align: start; }
  .pick-image { height: 136px; }
  .pick-body { padding: 11px; }
  .pick-body strong { font-size: 12px; }
  .pick-bottom b { font-size: 13px; }
  .section-heading { margin-top: 29px; }
  .section-heading h2 { font-size: 24px; }
  .section-link { font-size: 10px; }
  .feature-grid { gap: 10px; }
  .feature-card { min-height: 171px; }
  .feature-card strong { font-size: 12px; }
  .home-note { min-height: 119px; padding: 17px 16px; gap: 12px; }
  .home-note strong { font-size: 20px; }
  .note-bolt { width: 45px; height: 45px; font-size: 25px; }
  .note-arrow { font-size: 20px; }
}
@media (max-width: 380px) {
  .topbar-right span:last-child { display: none; }
  .hero-copy { padding-left: 20px; }
  .hero h1 { font-size: 32px; }
  .hero p { max-width: 210px; }
  .quick-categories button span { width: 49px; height: 49px; }
  .quick-categories strong { font-size: 9px; }
  .section-heading h2 { font-size: 21px; }
}