/* ---- tokens ---- */
:root {
  /* Deep ink night - blue-black, not purple. */
  --night: #0a0e16;
  --night-raised: #121826;
  --night-deep: #05070a;
  --moonlight: #eef1f6;
  --moonlight-dim: #a9b2c4;

  /* Amber is the one warm colour: café light, status-open, prices, cart. */
  --amber: #d98a3e;
  --amber-deep: #c17138;

  /* Neutral (not amber, not red) status tones for "later" / "closed". */
  --status-later: #8b93a4;
  --status-closed: #5b6577;

  --font-display: "Petrona", Georgia, "Times New Roman", serif;
  --font-body: "Karla", -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* iOS-like drawer curve, for the order sheet's opening slide only —
     closing uses --ease-out for a snappier, less ceremonial exit. */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Drink layers, cooled toward the night palette but still legible as
     their real ingredient (espresso stays brown, matcha stays green). */
  --layer-espresso: #5a3620;
  --layer-matcha: #74845a;
  --layer-hojicha: #8f6a45;
  --layer-chocolate: #3d2a1e;
  --layer-strawberry: #a8536a;
  --layer-mango: #c99a52;
  --layer-milk: #d7dae2;
  --layer-foam: #e8ebf1;
  --layer-ice: #c6ccd6;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.93 0 0 0 0 0.95 0 0 0 0 0.98 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Sparse, tiny, seeded stars - hand-placed coordinates (not
     Math.random), so the field is pixel-identical on every load.
     Two densities: fewer dots for small screens. */
  --stars-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Ccircle cx='18' cy='24' r='1.1' fill='%23eef1f6' opacity='0.5'/%3E%3Ccircle cx='64' cy='72' r='0.7' fill='%23eef1f6' opacity='0.3'/%3E%3Ccircle cx='122' cy='18' r='0.9' fill='%23eef1f6' opacity='0.4'/%3E%3Ccircle cx='168' cy='96' r='1.2' fill='%23eef1f6' opacity='0.45'/%3E%3Ccircle cx='210' cy='40' r='0.6' fill='%23eef1f6' opacity='0.3'/%3E%3Ccircle cx='256' cy='130' r='0.8' fill='%23eef1f6' opacity='0.35'/%3E%3Ccircle cx='296' cy='60' r='1.0' fill='%23eef1f6' opacity='0.4'/%3E%3Ccircle cx='40' cy='160' r='0.7' fill='%23eef1f6' opacity='0.3'/%3E%3Ccircle cx='90' cy='210' r='1.1' fill='%23eef1f6' opacity='0.45'/%3E%3Ccircle cx='150' cy='180' r='0.6' fill='%23eef1f6' opacity='0.28'/%3E%3Ccircle cx='190' cy='250' r='0.9' fill='%23eef1f6' opacity='0.38'/%3E%3Ccircle cx='240' cy='200' r='0.7' fill='%23eef1f6' opacity='0.32'/%3E%3Ccircle cx='285' cy='270' r='1.0' fill='%23eef1f6' opacity='0.42'/%3E%3Ccircle cx='20' cy='280' r='0.8' fill='%23eef1f6' opacity='0.35'/%3E%3Ccircle cx='110' cy='120' r='0.5' fill='%23eef1f6' opacity='0.25'/%3E%3Ccircle cx='300' cy='300' r='0.9' fill='%23eef1f6' opacity='0.4'/%3E%3C/svg%3E");
  --stars-sparse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Ccircle cx='24' cy='30' r='0.9' fill='%23eef1f6' opacity='0.4'/%3E%3Ccircle cx='140' cy='60' r='0.7' fill='%23eef1f6' opacity='0.3'/%3E%3Ccircle cx='230' cy='40' r='1.0' fill='%23eef1f6' opacity='0.4'/%3E%3Ccircle cx='80' cy='160' r='0.6' fill='%23eef1f6' opacity='0.28'/%3E%3Ccircle cx='200' cy='180' r='0.8' fill='%23eef1f6' opacity='0.35'/%3E%3Ccircle cx='270' cy='260' r='0.7' fill='%23eef1f6' opacity='0.3'/%3E%3Ccircle cx='40' cy='260' r='0.9' fill='%23eef1f6' opacity='0.38'/%3E%3C/svg%3E");

  --content-width: 30rem;
  --gutter: 1.25rem;
}

* { box-sizing: border-box; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

html {
  background: var(--night);
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  color: var(--moonlight);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background-color: var(--night);
  background-image: var(--noise);
  background-repeat: repeat;
}

body.has-order {
  padding-bottom: 4.5rem;
}

/* ---- sky ---- */
/* Fixed behind everything, runs under the whole page. Dots are tiny and
   very low-opacity (see --stars-dense/--stars-sparse) specifically so
   they never interfere with body text wherever they land - an opaque
   cutout behind the menu/beans/visit copy was tried and rejected, since
   it just drew a visible rectangular seam against the starfield. */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--stars-dense);
  background-repeat: repeat;
  background-size: 220px 220px;
}

@media (max-width: 599px) {
  .sky {
    background-image: var(--stars-sparse);
    background-size: 200px 200px;
  }
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--moonlight);
  opacity: 0.55;
}

.star--a { top: 8%; left: 22%; animation: twinkle 7.5s ease-in-out infinite; }
.star--b { top: 15%; left: 78%; animation: twinkle 9s ease-in-out infinite; animation-delay: 2.1s; }
.star--c { top: 40%; left: 10%; animation: twinkle 8.2s ease-in-out infinite; animation-delay: 4.3s; }
.star--d { top: 6%; left: 55%; animation: twinkle 6.8s ease-in-out infinite; animation-delay: 1.2s; }

@media (max-width: 599px) {
  .star--c, .star--d { display: none; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.65; }
}

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

a {
  color: var(--moonlight);
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

main {
  padding: 0 var(--gutter);
}

.hero, #beans, #visit, #menu {
  max-width: var(--content-width);
  margin-inline: auto;
}

section {
  padding-block: 2.5rem;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--moonlight);
}

h2 {
  font-size: 1.7rem;
  border-top: 1px solid rgba(238, 241, 246, 0.16);
  padding-top: 2.25rem;
}

p { margin: 0 0 1rem; }

/* ---- hero ---- */
.hero {
  position: relative;
  z-index: 1;
  padding-block: 2.5rem 2rem;
  text-align: center;
}

.hero-photo {
  position: relative;
  width: min(88vw, 400px);
  margin: 0 auto 0;
}

.hero-photo img {
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 42%, black 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 42%, black 55%, transparent 100%);
  filter: saturate(1.04);
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(18, 26, 46, 0.35), transparent 55%),
    linear-gradient(to top, var(--night) 0%, rgba(10, 14, 22, 0) 42%);
  mix-blend-mode: multiply;
}

.hero-photo .sign {
  position: absolute;
  left: 1.5rem;
  right: 1.25rem;
  bottom: 0.9rem;
  z-index: 1;
  text-align: left;
}

.hero-photo .sign .deg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--moonlight);
}

.hero-photo .sign .word {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--moonlight-dim);
  margin-top: 0.35rem;
}

.hero-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
}

.moon-widget {
  width: 68px;
  height: 68px;
  margin-bottom: 0.5rem;
}

.moon-widget svg {
  display: block;
  width: 100%;
  height: 100%;
}

.moon-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--moonlight-dim);
  margin: 0 0 1.1rem;
}

.status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
}

.status-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--moonlight-dim);
  flex: none;
}

.status-dot--open { background: var(--amber); }
.status-dot--later { background: var(--status-later); }
.status-dot--closed { background: var(--status-closed); }

.status-sub {
  font-family: var(--font-body);
  color: var(--moonlight-dim);
  font-size: 0.95rem;
}

.clock {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--moonlight-dim);
  letter-spacing: 0.02em;
}

.clock-tz {
  color: var(--moonlight-dim);
  opacity: 0.8;
}

.blink { animation: blink-colon 1.6s steps(1) infinite; }

@keyframes blink-colon {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0.55; }
  100% { opacity: 1; }
}

.notice {
  margin-top: 1.25rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(238, 241, 246, 0.25);
  color: var(--moonlight-dim);
  font-size: 0.85rem;
  border-radius: 0.6rem;
  display: inline-block;
}

.notice[hidden] {
  display: none;
}

.motto {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--moonlight-dim);
  font-size: 1.05rem;
}

.motto::before { content: "\201C"; }
.motto::after { content: "\201D"; }

#translationWord {
  font-family: var(--font-display), "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  display: inline-block;
  transition: opacity 0.6s ease;
}

#translationWord.is-changing {
  opacity: 0;
}

/* ---- menu ---- */
.menu-note {
  color: var(--moonlight-dim);
  font-size: 0.85rem;
  margin-top: -0.5rem;
}

.menu-tabs {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}

.menu-tab {
  background: none;
  border: 1px solid rgba(238, 241, 246, 0.22);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 1.1rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--moonlight-dim);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .menu-tab:hover {
    border-color: var(--moonlight-dim);
    color: var(--moonlight);
  }
}

.menu-tab.is-active {
  background: var(--moonlight);
  border-color: var(--moonlight);
  color: var(--night-deep);
}

.menu-group {
  margin-bottom: 2rem;
}

.menu-group:last-child {
  margin-bottom: 0;
}

.menu-groups {
  display: block;
}

.menu-sub {
  margin-bottom: 1.75rem;
}

.menu-sub:last-child {
  margin-bottom: 0;
}

.menu-sub h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--moonlight);
  margin: 0 0 0.85rem;
}

.menu-icon {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  color: var(--moonlight-dim);
  opacity: 0.9;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.menu-item {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--night-raised);
  border: 1px solid rgba(238, 241, 246, 0.1);
  border-radius: 0.85rem;
  font-size: 0.95rem;
}

.item-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.menu-item .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--moonlight);
}

.menu-item .desc {
  font-size: 0.82rem;
  color: var(--moonlight-dim);
}

.variants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.variant-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0.45rem 0.9rem 0.45rem 0.45rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--moonlight-dim);
  background: var(--night);
  border: 1px solid rgba(238, 241, 246, 0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), border-color 140ms ease, background 140ms ease, color 140ms ease;
}

/* Same specificity trap as .variant-stepper above - display:flex here
   beats the UA [hidden] rule, so it needs restating once the chip can
   itself be hidden (once its variant is in the cart). */
.variant-btn[hidden] {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .variant-btn:hover {
    border-color: var(--amber);
    color: var(--moonlight);
  }
}

.variant-btn:active {
  transform: scale(0.97);
}

.variant-btn .v-plus {
  opacity: 0.8;
}

.variant-btn .v-price {
  color: var(--amber);
}

.variant-btn.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--night-deep);
}

.variant-btn.is-active .v-price {
  color: var(--night-deep);
}

.variant-btn .v-qty {
  display: inline-block;
  font-weight: 800;
  margin-left: auto;
}

/* ---- inline stepper: replaces the chip in the same slot once a variant
   is in the cart, so Hot and Iced can each be adjusted (or removed) right
   on the card instead of only from the order sheet. Same pill shape and
   amber "selected" fill as .variant-btn.is-active used to be, so it reads
   as a continuation of the same control, not a new one. ---- */
.variant-stepper {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1 1 auto;
  padding: 0.3rem 0.3rem 0.3rem 0.45rem;
  background: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 999px;
  color: var(--night-deep);
}

/* `.variant-stepper`'s own `display: flex` above beats the UA stylesheet's
   `[hidden] { display: none }` on specificity + source order - restate it
   explicitly or every stepper renders regardless of the hidden attribute. */
.variant-stepper[hidden] {
  display: none;
}

.variant-stepper .v-icon,
.variant-stepper .drink-icon {
  color: var(--night-deep);
}

.step-qty {
  flex: 1 1 auto;
  min-width: 1.4rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
}

.step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--night-deep);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .step-btn:hover {
    background: rgba(5, 7, 10, 0.12);
  }
}

.step-btn:active {
  transform: scale(0.9);
}

/* ---- drink illustration ---- */
.v-icon {
  display: block;
  width: 34px;
  height: 34px;
  flex: none;
}

.drink-icon {
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--moonlight-dim);
}

.variant-btn.is-active .drink-icon {
  color: var(--night-deep);
}

.drink-icon .vessel-outline,
.drink-icon .handle,
.drink-icon .rim,
.drink-icon .steam,
.drink-icon .straw {
  stroke: currentColor;
}

.drink-icon .liquid { fill: var(--layer-espresso); }
.drink-icon[data-base="matcha"] .liquid { fill: var(--layer-matcha); }
.drink-icon[data-base="hojicha"] .liquid { fill: var(--layer-hojicha); }
.drink-icon[data-base="chocolate"] .liquid { fill: var(--layer-chocolate); }
.drink-icon[data-base="strawberry"] .liquid { fill: var(--layer-strawberry); }
.drink-icon[data-base="mango"] .liquid { fill: var(--layer-mango); }

.drink-icon .milk-band { fill: var(--layer-milk); display: none; }
.drink-icon[data-milk="true"] .milk-band { display: block; }

.drink-icon .foam { fill: var(--layer-foam); display: none; }
.drink-icon[data-top="foam"] .foam { display: block; }

.drink-icon .ice { fill: var(--layer-ice); stroke: rgba(10, 14, 22, 0.3); stroke-width: 0.6; display: none; }
.drink-icon[data-top="ice"] .ice { display: block; }

.drink-icon .steam { opacity: 0.7; }

.drink-fill {
  clip-path: inset(0 0 0% 0);
  transition: clip-path 620ms var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 70ms);
}

.drink-icon.is-hidden .drink-fill {
  clip-path: inset(0 0 100% 0);
}

/* ---- ordering-disabled mode: menu-only, no cart ---- */
.ordering-off .variant-btn {
  flex: 1 1 auto;
  background: none;
  border: none;
  padding: 0.2rem 0;
  cursor: default;
  color: var(--moonlight-dim);
}

.ordering-off .variant-btn:hover,
.ordering-off .variant-btn:active {
  border-color: transparent;
  color: var(--moonlight-dim);
  transform: none;
}

.ordering-off .v-qty {
  display: none;
}

/* ---- order bar / panel ---- */

/* Dimmed scrim behind the sheet, mobile only (JS never opens it on the
   desktop floating panel). Sits below the bar and panel so both stay
   tappable above the dim. */
.order-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: rgba(3, 4, 8, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms;
}

.order-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms var(--ease-out);
}

.order-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: var(--night-deep);
  border-top: 1px solid rgba(238, 241, 246, 0.16);
}

.order-bar-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding: 0.9rem var(--gutter);
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--amber);
  background: none;
  border: none;
  cursor: pointer;
}

/* Sheet: hidden state sits just off-screen (not scale/opacity-only, so it
   reads as something that lives below the viewport, not something that
   fades into existence) and slides up on open. transition (not keyframes)
   so a rapid close mid-open retargets from wherever it currently is,
   rather than restarting. Faster to close than to open — the open is a
   deliberate reveal, the close is a snap-back response. */
.order-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 4.5rem;
  z-index: 4;
  max-height: 85svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--night-deep);
  border-top: 1px solid rgba(238, 241, 246, 0.16);
  padding: 0.5rem var(--gutter) 1.25rem;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 220ms var(--ease-out), visibility 0s linear 220ms;
}

.order-panel.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 320ms var(--ease-drawer), visibility 0s linear 0s;
}

/* While the grab handle is being dragged, transform is set directly per
   pointer position (see js/order.js) - no transition fighting the touch. */
.order-panel.is-dragging {
  transition: none;
}

.order-panel-inner {
  max-width: var(--content-width);
  margin-inline: auto;
}

.order-panel-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-bottom: 0.5rem;
}

.sheet-handle {
  grid-column: 1 / -1;
  justify-self: center;
  width: 2.5rem;
  height: 4px;
  margin-bottom: 0.6rem;
  border-radius: 999px;
  background: rgba(238, 241, 246, 0.22);
  touch-action: none;
}

.order-panel-title {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--moonlight);
}

.sheet-close {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -0.5rem -0.4rem -0.5rem 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--moonlight-dim);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .sheet-close:hover {
    color: var(--moonlight);
    background: rgba(238, 241, 246, 0.08);
  }
}

.sheet-close:active {
  transform: scale(0.94);
}

.order-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.order-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px dotted rgba(238, 241, 246, 0.18);
  font-size: 0.9rem;
}

.order-line:last-child { border-bottom: none; }

.ol-name {
  flex: 1 1 auto;
  min-width: 8rem;
  color: var(--moonlight);
  font-family: var(--font-display);
}

.ol-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
}

.ol-step {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(238, 241, 246, 0.22);
  background: none;
  color: var(--moonlight);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  flex: none;
}

.ol-count {
  min-width: 1.25rem;
  text-align: center;
  font-family: var(--font-body);
}

.ol-total {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
  min-width: 3.5rem;
  text-align: right;
  /* On a narrow row (the desktop floating panel is only 22rem) the line
     wraps and .ol-total lands alone on its own line — margin-left: auto
     still pushes it to that line's right edge instead of the left, which
     is where flex-wrap would otherwise leave a lone wrapped item. */
  margin-left: auto;
}

.order-field {
  margin-bottom: 0.85rem;
}

.order-field label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--moonlight-dim);
  margin-bottom: 0.35rem;
}

.order-field select,
.order-field input {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--moonlight);
  background: var(--night);
  border: 1px solid rgba(238, 241, 246, 0.22);
  border-radius: 0.6rem;
}

.order-field select:disabled {
  color: var(--moonlight-dim);
  opacity: 0.6;
}

.order-note {
  color: var(--moonlight-dim);
  font-size: 0.78rem;
  margin: 0 0 1rem;
}

.order-actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 0.75rem;
}

.order-actions .button {
  text-align: center;
}

.order-actions .link-btn {
  align-self: center;
}

@media (min-width: 480px) {
  .order-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .order-actions .link-btn {
    align-self: auto;
  }
}

.link-btn {
  background: none;
  border: none;
  color: var(--moonlight-dim);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.5rem 0;
}

/* ---- beans ---- */
.beans p { color: var(--moonlight); }
.beans .label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--moonlight-dim);
  margin-bottom: 0.25rem;
}

/* ---- cross-link (sister-site card) ---- */
.cross-link-card {
  margin-top: 1.5rem;
  text-align: left;
}

.cross-link-shots {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.shot-frame {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(238, 241, 246, 0.12);
}

.shot-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.shot-frame--desktop {
  flex: 1 1 0;
  aspect-ratio: 4 / 3;
}

.shot-frame--mobile {
  flex: 0 0 30%;
  aspect-ratio: 9 / 16;
}

.cross-link-info {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.cross-link-crescent {
  width: 30px;
  height: 30px;
  color: var(--moonlight);
}

.cross-link-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--moonlight);
}

.cross-link-status {
  margin: 0;
  color: var(--moonlight-dim);
  font-size: 0.9rem;
}

.cross-link-visit {
  margin-top: 0.35rem;
}

/* ---- visit ---- */
.button {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--night-deep);
  background: var(--amber);
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  min-height: 44px;
  line-height: 1.7;
  text-align: center;
  transition: background 140ms ease;
}

.button[aria-disabled="true"] {
  background: var(--night);
  color: var(--moonlight-dim);
  border: 1px solid rgba(238, 241, 246, 0.22);
  cursor: not-allowed;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--amber-deep); }
}

.hours-line {
  font-family: var(--font-body);
  color: var(--moonlight-dim);
  font-size: 0.9rem;
}

.social-links {
  margin-top: 1.5rem;
  display: flex;
  gap: 1.25rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
}

footer {
  padding: 2rem var(--gutter) 3rem;
  text-align: center;
  color: var(--moonlight-dim);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  position: relative;
  z-index: 0;
}

footer .credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  width: fit-content;
  margin: 0.75rem auto 0;
  padding: 0.65rem 0.5rem;
  min-height: 44px;
  color: var(--moonlight-dim);
  opacity: 0.6;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  text-decoration: none;
  transition: opacity 200ms ease;
}
footer .credit:hover { opacity: 1; }
footer .credit-mark { width: 11px; height: auto; flex-shrink: 0; }

/* ---- desktop ---- */
@media (min-width: 768px) {
  :root { --content-width: 34rem; }
  body { font-size: 17px; }
}

@media (min-width: 560px) {
  .menu-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  #menu {
    max-width: 46rem;
  }

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

  /* Floating panel instead of a full-width sticky bar */
  .order-bar {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    border-top: none;
    border-radius: 999px;
    box-shadow: 0 1rem 2.5rem rgba(3, 4, 8, 0.6);
  }

  .order-bar-summary {
    max-width: none;
    padding: 0.9rem 1.5rem;
    gap: 1.25rem;
  }

  .order-panel {
    left: auto;
    right: 1.5rem;
    bottom: 5.5rem;
    width: 22rem;
    max-height: 70vh;
    border-top: none;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(3, 4, 8, 0.6);
    /* Desktop keeps its original instant show/hide — only mobile gets the
       slide-up sheet treatment. Adding a close control and Escape here
       doesn't change how the panel itself appears. */
    transform: none;
    transition: visibility 0s linear 0s;
  }

  .order-panel.is-open {
    transform: none;
    transition: none;
  }

  /* No grab handle on a panel that isn't a swipe-to-dismiss sheet. */
  .sheet-handle {
    display: none;
  }

  body.has-order {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
  #translationWord { transition: none; }
  .drink-fill { transition: none; }
  .drink-icon.is-hidden .drink-fill { clip-path: inset(0 0 0% 0); }
  .star { animation: none; opacity: 0.4; }
  /* Movement goes instant; the backdrop's opacity fade is a color-style
     transition (not movement) and stays - "gentler, not zero." */
  .order-panel,
  .order-panel.is-open {
    transition: visibility 0s linear;
  }
}