/* =========================================================
   Public QR menu — mobile first
   ========================================================= */
body.menu-page { --menu-w: 760px; background: var(--c-night); padding-bottom: env(safe-area-inset-bottom, 0px); }

.menu-top {
  padding: calc(env(safe-area-inset-top, 0px) + var(--s-6)) 0 var(--s-5);
  text-align: center;
  background: radial-gradient(70% 90% at 50% 0%, rgba(201,168,107,.14), transparent 70%);
}
.menu-top__logo { width: 92px; margin: 0 auto var(--s-4); }
.menu-top h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
.menu-top p { margin: var(--s-2) auto 0; color: var(--c-mist); font-size: var(--t-sm); }
.menu-top .lang-switch { margin-top: var(--s-5); }

/* Sticky category bar */
.cat-bar {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(5,7,13,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-velvet-line);
}
.cat-bar__scroll { display: flex; gap: var(--s-2); overflow-x: auto; padding: var(--s-3) max(1.25rem, calc((100% - var(--menu-w)) / 2)); scrollbar-width: none; scroll-padding-inline: 1.25rem; }
.cat-bar__scroll::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: none; height: 38px; padding: 0 var(--s-4); border-radius: var(--arch-full);
  border: 1px solid var(--c-velvet-line); font-size: var(--t-sm); color: var(--c-mist); white-space: nowrap;
}
.cat-chip[aria-current="true"] { border-color: var(--c-champagne); color: var(--c-night); background: var(--c-champagne); }

.menu-search { padding: var(--s-4) 0 0; }
.menu-search .input { border-radius: var(--arch-full); padding-left: var(--s-5); }

.menu-main { width: min(100% - 2.5rem, var(--menu-w)); margin-inline: auto; padding-bottom: var(--s-8); }
.cat-section { padding-top: var(--s-7); scroll-margin-top: calc(66px + env(safe-area-inset-top, 0px)); }
.cat-section h2 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.cat-section__rule { height: 1px; background: linear-gradient(90deg, var(--c-champagne), transparent); margin-bottom: var(--s-3); opacity: .6; }

.item {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 76px 1fr auto; gap: var(--s-4); align-items: center;
  padding: var(--s-4) 0; border-bottom: 1px solid rgba(42,58,94,.6);
}
.item--no-photo { grid-template-columns: 1fr auto; }
.item__photo { width: 76px; height: 96px; border-radius: var(--arch); overflow: hidden; background: var(--c-velvet-2); }
.item__photo img { width: 100%; height: 100%; object-fit: cover; }
.item__name { font-size: var(--t-base); font-weight: 400; color: var(--c-linen); }
.item__desc { margin-top: 2px; font-size: var(--t-xs); color: var(--c-mist); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item__price { font-size: var(--t-base); color: var(--c-champagne-2); white-space: nowrap; text-align: right; }
.item__price small { display: block; font-size: var(--t-xs); color: var(--c-mist); }
.item.is-soldout { opacity: .45; }
.item.is-soldout .item__price { text-decoration: line-through; }
.item .badge { margin-top: var(--s-2); }

.menu-empty, .menu-error { padding: var(--s-8) 0; text-align: center; color: var(--c-mist); }
.menu-foot { text-align: center; font-size: var(--t-xs); color: var(--c-mist); padding: var(--s-6) 0; }
.menu-foot a { color: var(--c-champagne); }

/* Item detail sheet */
.sheet .modal__body { padding: 0; }
.sheet__text h2 { padding-right: var(--s-7); }
/* On phones the item opens as a bottom sheet */
@media (max-width: 600px) {
  .sheet { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: var(--r-md) var(--r-md) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sheet[open] { animation: sheet-up .28s var(--ease); }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
.sheet__photo { aspect-ratio: 4 / 4.2; background: var(--c-velvet-2); }
.sheet__photo img { width: 100%; height: 100%; object-fit: cover; }
.sheet__text { padding: var(--s-5); display: grid; gap: var(--s-3); }
.sheet__text h2 { font-size: var(--t-xl); }
.sheet__close { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; background: rgba(5,7,13,.6); color: var(--c-linen); }

/* Loading skeleton */
.skeleton { height: 96px; margin-top: var(--s-4); border-radius: var(--r-md); background: linear-gradient(90deg, var(--c-velvet) 0%, var(--c-velvet-2) 50%, var(--c-velvet) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Responsive refinements ---------- */
.menu-foot a { display: inline-block; padding-block: 8px; }
.cat-chip { min-height: 40px; }

/* Tablets: bigger photos and type */
@media (min-width: 700px) {
  .item { grid-template-columns: 96px 1fr auto; gap: var(--s-5); }
  .item.item--no-photo { grid-template-columns: 1fr auto; }
  .item__photo { width: 96px; height: 120px; }
  .item__name { font-size: var(--t-md); }
  .item__desc { font-size: var(--t-sm); }
  .menu-top__logo { width: 110px; }
}

/* Desktop: two columns of items so the screen is used well */
@media (min-width: 1100px) {
  body.menu-page { --menu-w: 1080px; }
  .cat-section__items { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-7); }
  .menu-search { max-width: 520px; }
  .sheet { width: min(100% - 3rem, 860px); }
  .sheet .modal__body { display: grid; grid-template-columns: 1fr 1fr; }
  .sheet__photo { aspect-ratio: auto; min-height: 100%; }
  .sheet__text { align-content: center; padding: var(--s-7) var(--s-6); }
}

/* ---------- Sizes (small / medium / large) ---------- */
.item__price small:first-child { display: block; font-size: var(--t-xs); color: var(--c-mist); }
.item__sizes { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-top: var(--s-2); }
.item__sizes span {
  display: inline-flex; gap: 6px; align-items: baseline;
  padding: 3px 10px; border-radius: var(--arch-full);
  border: 1px solid var(--c-velvet-line); font-size: var(--t-xs); color: var(--c-champagne-2);
}
.item__sizes b { font-weight: 400; color: var(--c-mist); }
.sheet__sizes { display: grid; gap: 0; border-top: 1px solid var(--c-velvet-line); }
.sheet__sizes span { display: flex; justify-content: space-between; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-velvet-line); color: var(--c-champagne-2); font-size: var(--t-md); }
.sheet__sizes b { font-weight: 300; color: var(--c-linen); font-size: var(--t-base); }