@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Nunito+Sans:wght@400;600;700;800;900&display=swap');

:root {
  --pink: #ff2f8f;
  --purple: #4b2e83;
  --purple-bright: #8f5fd6;
  --gold: #d9860f;
  --gold-bright: #f2a93c;
  --ink: #14101c;
  --ink-soft: #4a3f56;
  --paper: #fbf6ee;
  --panel: #ffffff;
  --panel-border: #ece1d3;
  --text: #241b2e;
  --text-muted: #6b5f75;
  --gradient-brand: linear-gradient(92deg, var(--pink), var(--purple));
  /* --purple is the University of Washington's official purple — a nod to
     Yosh, a UW grad. Darkened variants of --pink/--gold below are for use
     as text on light backgrounds — the brand colors read at ~3:1 against
     white/paper, which fails WCAG AA for text (4.5:1). Keep using
     --pink/--gold for backgrounds, gradients, and borders, where this
     contrast concern doesn't apply. --purple already clears 4.5:1 as-is,
     so it needs no separate text variant. */
  --pink-text: #dc0066;
  --gold-text: #a0630b;

  --font-display: 'Bungee', -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-ui: 'Nunito Sans', -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;

  color-scheme: light;
  font-family: var(--font-ui);
  line-height: 1.6;
  font-weight: 400;
  color: var(--text);
  background: var(--paper);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
}

h2, h3, h4,
.footer-brand,
button, .cta-button, .nav-order-btn,
.site-nav > a, .nav-dropdown-toggle,
.category-name, .item-name,
.eyebrow, .section-heading, .badge-like {
  font-family: var(--font-ui);
}

h1, .brand-name {
  font-family: var(--font-display);
}

.brand-name {
  font-weight: 400;
  letter-spacing: 0.01em;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.hero {
  margin-bottom: 2rem;
}

.eyebrow {
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pink-text);
  font-size: 0.78rem;
  font-weight: 700;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.15;
}

.hero p {
  margin: 0;
  max-width: 640px;
  color: var(--text-muted);
}

.category {
  margin-bottom: 2rem;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(36, 20, 45, 0.06);
  scroll-margin-top: 90px;
}

.category h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 3px solid var(--pink);
  padding-bottom: 0.4rem;
}

.items {
  display: grid;
  gap: 0.9rem;
}

.item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #f3ecee;
}

.item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.item-body {
  flex: 1;
  min-width: 0;
}

.item h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
}

.item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.item-photo {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}

.price {
  font-weight: 800;
  color: var(--gold-text);
  font-family: var(--font-ui);
  /* Short by default ("$28.00"), but can grow into a full breakdown once
     add-ons are checked ("$58.70 ($28.00 + Bacon $5.50, Yosh Size $25.20)")
     — needs to wrap onto its own lines on a narrow screen instead of
     forcing the row wider than the viewport. min-width: 0 lets it actually
     shrink inside the flex row rather than being held to its unwrapped width. */
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}

.staff-edit-link {
  align-self: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--pink);
  color: var(--pink-text);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-ui);
  white-space: nowrap;
}

.staff-edit-link:hover {
  background: #fdf1f6;
}

.order-btn {
  align-self: center;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: none;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
}

.order-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.order-btn-active {
  background: var(--gold);
  color: var(--ink);
}

.order-btn-in-cart {
  background: var(--purple-bright);
  color: #fff;
}

.cart-fab-btn {
  position: fixed;
  bottom: 1.5rem;
  left: 1rem;
  z-index: 150;
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: var(--font-ui);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.cart-fab-btn[hidden] {
  display: none;
}

@media (max-width: 860px) {
  .cart-fab-btn {
    bottom: 76px;
  }
}

.cart-lines {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.cart-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3ecee;
}

.cart-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cart-line-name {
  font-weight: 700;
}

.cart-line-modifiers {
  margin-top: 0.15rem;
}

.cart-line-remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.reviews-widget {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  margin: 1.5rem 0;
}

.review-card {
  background: var(--panel);
  border: 1px solid #f3ecee;
  border-radius: 16px;
  padding: 1.25rem;
  width: 300px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.review-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.review-author {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}

.review-stars {
  color: var(--gold-text);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.review-time {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.review-text {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-source {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: auto;
}

.staff-alerts-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

@media (max-width: 860px) {
  /* On mobile the hamburger (.nav-toggle) lives in this same top-right
     corner — without this, the alerts container's higher z-index sits
     directly on top of it, so taps meant for the hamburger hit the mute
     toggle/alert badge instead and the nav menu becomes unreachable.
     Dropping below the ~60px sticky header clears it entirely. */
  .staff-alerts-container {
    top: 4.25rem;
    right: 0.75rem;
  }
}

.staff-order-alert {
  background: var(--gradient-brand);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: var(--font-ui);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.staff-alert-mute-toggle {
  background: var(--panel);
  color: var(--text-muted);
  border: 1px solid var(--panel-border);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.78rem;
  font-family: var(--font-ui);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.staff-alert-mute-toggle[aria-pressed="true"] {
  color: var(--pink-text);
  border-color: var(--pink);
}

.feedback-tab-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1rem;
  z-index: 150;
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: var(--font-ui);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

@media (max-width: 860px) {
  .feedback-tab-btn {
    bottom: 76px;
  }
}

.feedback-stars {
  display: flex;
  gap: 0.25rem;
  margin: 0.5rem 0 1rem;
}

.feedback-star {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--panel-border);
  cursor: pointer;
  padding: 0;
}

.feedback-star.active {
  color: var(--gold);
}

.error {
  padding: 1rem;
  border-radius: 12px;
  background: #fdf1f6;
  color: #9a2c5a;
  border: 1px solid #f7c6de;
}

@media (max-width: 640px) {
  .item {
    flex-direction: column;
  }

  .price,
  .staff-edit-link,
  .order-btn {
    align-self: flex-start;
  }
}

.admin-link {
  margin-top: 0.75rem;
}

.admin-link a {
  color: var(--pink-text);
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-ui);
}

.admin-link a:hover {
  text-decoration: underline;
}

.staff-tools-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.staff-tools-nav a {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-ui);
}

.staff-tools-nav a:hover,
.staff-tools-nav a.active {
  border-color: var(--pink);
  color: var(--pink-text);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 30px rgba(36, 20, 45, 0.06);
}

.panel h2 {
  margin-top: 0;
}

.hint {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.hint code {
  background: #f3ecee;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

button {
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

button:hover {
  filter: brightness(1.08);
}

button:active {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button.secondary {
  background: #ffffff;
  color: var(--pink-text);
  border: 1px solid var(--pink);
}

button.secondary:hover {
  background: #fdf1f6;
  filter: none;
}

/* Table-orders admin: Cancel sits next to Confirm Entered/Delivered in the
   same cell — a little breathing room so they don't sit flush together. */
.data-table .cancel-btn {
  margin-left: 0.4rem;
}

.status {
  min-height: 1.2em;
  font-size: 0.9rem;
  margin: 0.6rem 0 0;
}

.status-ok {
  color: #15803d;
}

.status-error {
  color: #b91c1c;
}

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

.oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 160px;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid #d9cdd3;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  font-family: var(--font-ui);
  transition: filter 0.15s ease;
}

.oauth-btn:hover {
  filter: brightness(0.97);
}

.oauth-btn-google {
  border-color: #dadce0;
}

.oauth-btn-apple {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Apple Sign-In isn't configured yet — hidden for now via the `hidden`
   attribute. Needs its own rule since `.oauth-btn-apple` and `[hidden]`
   tie in specificity, and the later class rule would otherwise win. */
.oauth-btn-apple[hidden] {
  display: none;
}

.oauth-btn-facebook {
  background: #1877f2;
  color: #fff;
  border-color: #1877f2;
}

/* Facebook Login is configured and live (2026-09-08) — no element actually
   carries [hidden] anymore, but this stays as the same override-safety-net
   as .oauth-btn-apple[hidden] above, in case it's ever re-hidden. */
.oauth-btn-facebook[hidden] {
  display: none;
}

.oauth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.oauth-divider::before,
.oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--panel-border);
}

.analytics-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  height: 160px;
  padding-top: 1rem;
  overflow-x: auto;
}

.analytics-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 18px;
  height: 100%;
}

.analytics-bar {
  width: 100%;
  min-height: 3px;
  background: var(--gradient-brand);
  border-radius: 3px 3px 0 0;
}

.analytics-bar-label {
  margin-top: 0.35rem;
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.analytics-hbar {
  height: 10px;
  background: var(--gradient-brand);
  border-radius: 4px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.6rem;
}

.gallery-item {
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
  aspect-ratio: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.performer-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.performer-card {
  padding-top: 1.2rem;
  border-top: 1px solid var(--panel-border);
}

.performer-card:first-child {
  padding-top: 0;
  border-top: none;
}

.performer-card h3 {
  margin: 0 0 0.4rem;
}

.performer-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-top: 0.6rem;
  max-width: 480px;
}

.performer-card video {
  display: block;
  width: 100%;
  max-width: 480px;
  border-radius: 10px;
  margin-top: 0.8rem;
}

.editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.toolbar-actions {
  display: flex;
  gap: 0.5rem;
}

.edit-category {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
}

.edit-category-header {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.edit-category-header .category-name {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.5rem 0.6rem;
  border: 1px solid #d9cdd3;
  border-radius: 8px;
}

.edit-items {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.edit-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-radius: 10px;
  transition: background-color 0.4s ease;
}

.edit-item-highlight {
  background-color: #fdf1f6;
}

.edit-item input {
  padding: 0.5rem 0.6rem;
  border: 1px solid #d9cdd3;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: var(--font-ui);
}

.edit-item-photo {
  flex: 0 0 160px;
}

.item-thumb-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.menu-photo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.menu-photo-item .menu-photo-extract-btn {
  font-size: 0.65rem;
  padding: 0.2rem 0.45rem;
  white-space: nowrap;
}

.item-thumb-wrap {
  position: relative;
  width: 60px;
  height: 60px;
}

.item-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  display: block;
}

.thumb-feature-btn,
.thumb-remove-btn,
.thumb-featured-badge {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.65rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--panel-border);
  cursor: pointer;
}

.thumb-feature-btn,
.thumb-featured-badge {
  top: -6px;
  left: -6px;
  background: var(--gold-bright);
  color: #1c1626;
}

.thumb-featured-badge {
  cursor: default;
}

.thumb-remove-btn {
  top: -6px;
  right: -6px;
  background: #fff;
  color: var(--pink-text);
}

/* Small non-interactive dot flagging a competitor menu photo that hasn't
   been read for prices/dishes yet — paired with .thumb-mark-reviewed-btn
   below, which lets a staff member clear it by hand without waiting on a
   Claude session to process it. */
.thumb-unreviewed-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gradient-brand);
  border: 1px solid #fff;
}

.thumb-mark-reviewed-btn {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--panel-border);
  cursor: pointer;
  background: #fff;
  color: #15803d;
}

.photo-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.photo-upload-btn,
.photo-google-btn {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  background: #ffffff;
  color: var(--pink-text);
  border: 1px solid var(--pink);
  border-radius: 8px;
  font-weight: 600;
  font-family: var(--font-ui);
}

.photo-upload-btn:hover,
.photo-google-btn:hover {
  background: #fdf1f6;
}

.edit-item-photo .photo-status {
  font-size: 0.75rem;
  margin: 0.3rem 0 0;
}

.google-picker-modal {
  max-width: 640px;
}

.google-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}

.google-picker-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
}

.google-picker-grid img:hover {
  border-color: var(--pink);
}

.edit-item-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.edit-item-row-top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
}

.edit-item-fields .item-desc {
  width: 100%;
}

.featured-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: var(--font-ui);
}

.tags-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--pink-text);
  font-weight: 600;
  font-family: var(--font-ui);
}

.tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.modifiers-section {
  margin: 1.25rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--panel-border);
}

.modifiers-section h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.tag-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

select {
  padding: 0.55rem 0.7rem;
  border: 1px solid #d9cdd3;
  border-radius: 8px;
  font-size: 0.9rem;
  background: #fff;
  font-family: var(--font-ui);
}

.section-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.75rem 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-heading:first-child {
  margin-top: 0;
}

.category-note-input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid #d9cdd3;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-ui);
}

.edit-item-row-top .item-price {
  width: 100px;
}

.edit-item .remove-item {
  padding: 0.4rem 0.7rem;
}

.save-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  position: sticky;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid var(--panel-border);
  padding: 1rem 1.25rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-bottom: -1.25rem;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 -6px 16px rgba(36, 20, 45, 0.1);
  z-index: 10;
}

@media (max-width: 640px) {
  .edit-item {
    flex-direction: column;
    align-items: stretch;
  }

  .edit-item-photo {
    flex: none;
  }

  .edit-item-row-top {
    grid-template-columns: 1fr;
  }
}

/* ---- Site chrome: header, nav, hero banner, footer ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.site-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 0.6rem;
}

.brand-logo {
  height: 36px;
  width: 36px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0.4rem;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.site-nav > a {
  color: #e7dfec;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.15s ease;
}

.site-nav > a:hover,
.site-nav > a.active {
  color: #ff7fbb;
}

.nav-order-btn {
  background: var(--gradient-brand);
  color: #fff !important;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
}

.nav-order-btn:hover {
  filter: brightness(1.1);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  background: transparent;
  border: none;
  color: #e7dfec;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.nav-dropdown-toggle:hover {
  background: transparent;
  color: #ff7fbb;
  filter: none;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 130%;
  left: 0;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  min-width: 160px;
  padding: 0.4rem;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

/* Hover-to-open is a bonus for real mouse/trackpad users only — on touch
   devices (iPad included) a tap leaves a synthetic ":hover" stuck active,
   which OR'd with this rule kept the menu open even after the JS toggle
   removed .open. Scoping it out for touch means the JS toggle is the only
   thing controlling visibility there. */
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .nav-dropdown-menu {
    display: block;
  }
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  background: #fdf1f6;
  color: var(--pink-text);
}

@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.25rem 1.5rem;
    gap: 0.9rem;
  }

  .site-nav.open {
    display: flex;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    background: #241c2c;
    margin-top: 0.4rem;
  }

  .nav-dropdown-menu a {
    color: #e7dfec;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ff7fbb;
  }
}

/* ---- Persistent mobile bottom bar: Call / Order / Directions ---- */

.mobile-cta-bar {
  display: none;
}

@media (max-width: 860px) {
  body {
    padding-bottom: 60px;
  }

  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--ink);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
  }

  .mobile-cta-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 0.5rem;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mobile-cta-bar a:last-child {
    border-right: none;
  }

  .mobile-cta-bar a.mobile-cta-order {
    background: var(--gradient-brand);
  }
}

.hero-banner {
  background-size: cover;
  background-position: center;
  padding: 4.5rem 1.25rem 5.5rem;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(20, 16, 28, 0.94) 5%, rgba(75, 46, 131, 0.32) 55%, rgba(255, 47, 122, 0.16) 100%);
}

.hero-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 46px;
  background: var(--paper);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,60 350,0 600,28 C850,56 1050,4 1200,26 L1200,60 L0,60 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,60 350,0 600,28 C850,56 1050,4 1200,26 L1200,60 L0,60 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hero-banner-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.hero-banner .eyebrow {
  color: var(--gold-bright);
}

.hero-banner h1 {
  margin-bottom: 0.75rem;
  background: linear-gradient(92deg, #ff8fb8, #ffd7a8 40%, #c9a6ee 70%, var(--purple-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-banner p {
  color: #e9f2ef;
  max-width: 100%;
}

.site-footer {
  background: var(--ink);
  color: #cbbfd6;
  margin-top: 3rem;
  padding: 2.5rem 1.25rem 1.5rem;
}

.site-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.site-footer p {
  margin: 0.2rem 0;
}

.footer-brand {
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
}

.site-footer a {
  color: var(--gold-bright);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-copyright {
  max-width: 1100px;
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  color: #8d7f99;
}

.content-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}

.content-section + .content-section {
  padding-top: 0;
}

.content-section h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.content-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
}

.content-grid img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(36, 20, 45, 0.14);
}

@media (max-width: 720px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.cta-button {
  display: inline-block;
  background: var(--gradient-brand);
  color: #fff;
  text-decoration: none;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-ui);
  transition: filter 0.15s ease;
}

.cta-button:hover {
  filter: brightness(1.08);
}

.cta-button.secondary {
  background: #ffffff;
  color: var(--pink-text);
  border: 1px solid var(--pink);
}

.cta-button.secondary:hover {
  background: #fdf1f6;
  filter: none;
}

.category-note {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: -0.6rem 0 1rem;
}

.section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.menu-review-summary {
  margin: 0 0 1rem;
}

.menu-eating-guide {
  margin: 0 0 1.5rem;
  max-width: 68ch;
}

.section-tabs a {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--pink);
  color: var(--pink-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--font-ui);
}

.section-tabs a.active {
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent;
}

/* ---- Staff floor map (table-orders-admin.html) ---- */

.floor-map-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.floor-map-tabs button {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--pink);
  background: transparent;
  color: var(--pink-text);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--font-ui);
  cursor: pointer;
}

.floor-map-tabs button.active {
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent;
}

.floor-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.floor-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.floor-map-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
}

.floor-map-dot-needs {
  background: var(--gold-bright);
}

.floor-map-dot-processing {
  background: var(--purple-bright);
}

.floor-map-dot-awaiting {
  background: var(--pink);
}

.floor-map-canvas {
  position: relative;
  width: 100%;
  padding-bottom: 55%;
  background: var(--paper);
  border: 1px dashed var(--panel-border);
  border-radius: 16px;
}

.floor-map-table {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 2px solid var(--panel-border);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.8rem;
  box-shadow: 0 4px 10px rgba(36, 20, 45, 0.08);
}

.floor-map-table.shape-round {
  border-radius: 50%;
}

.floor-map-table.shape-square {
  border-radius: 10px;
}

.floor-map-table.processing {
  background: var(--purple-bright);
  border-color: var(--purple-bright);
  color: #fff;
}

.floor-map-table.flash-needs {
  animation: floorMapFlashNeeds 1s ease-in-out infinite;
}

.floor-map-table.flash-awaiting {
  animation: floorMapFlashAwaiting 1.6s ease-in-out infinite;
}

@keyframes floorMapFlashNeeds {
  0%, 100% { background: var(--panel); border-color: var(--gold-bright); color: var(--text); }
  50% { background: var(--gold-bright); border-color: var(--gold-bright); color: #fff; }
}

@keyframes floorMapFlashAwaiting {
  0%, 100% { background: var(--panel); border-color: var(--pink); color: var(--text); }
  50% { background: var(--pink); border-color: var(--pink); color: #fff; }
}

.floor-map-tabs button.tab-flash-needs {
  animation: floorMapFlashNeeds 1s ease-in-out infinite;
}

.floor-map-tabs button.tab-flash-awaiting {
  animation: floorMapFlashAwaiting 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .floor-map-table.flash-needs {
    animation: none;
    background: var(--gold-bright);
    color: #fff;
  }

  .floor-map-table.flash-awaiting {
    animation: none;
    background: var(--pink);
    color: #fff;
  }

  .floor-map-tabs button.tab-flash-needs {
    animation: none;
    background: var(--gold-bright);
    border-color: var(--gold-bright);
    color: #fff;
  }

  .floor-map-tabs button.tab-flash-awaiting {
    animation: none;
    background: var(--pink);
    border-color: var(--pink);
    color: #fff;
  }
}

.locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.location-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(36, 20, 45, 0.06);
}

.location-card h2 {
  margin-top: 0;
}

/* ---- Menu search & category nav ---- */

.menu-controls {
  margin-bottom: 1.5rem;
}

.menu-search {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  font-size: 1rem;
  font-family: var(--font-ui);
  background: var(--panel);
  box-shadow: 0 4px 16px rgba(36, 20, 45, 0.05);
}

.menu-search:focus-visible {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 47, 143, 0.35);
}

.menu-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.menu-jump a {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-ui);
}

.menu-jump a:hover {
  border-color: var(--pink);
  color: var(--pink-text);
}

.tag-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.tag-chip {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
}

.tag-chip:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.tag-chip.active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
}

.item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.item-tag-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #f3ecee;
  color: var(--text-muted);
  font-family: var(--font-ui);
}

.item-modifiers {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  background: #f9f5f7;
}

/* Needed since the rule above sets its own `display` — an author style
   always beats the browser's default [hidden] rule unless re-declared
   explicitly (same bug class as the label[hidden] fix elsewhere in this
   file). Without this, staff-revealable-extras' `hidden` attribute would
   be silently ignored and the block would show even before staff login
   is confirmed. */
.item-modifiers[hidden],
.item-choice-groups[hidden] {
  display: none;
}

.item-modifier-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-family: var(--font-ui);
  color: var(--ink-soft);
  cursor: pointer;
}

.item-choice-groups {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.item-choice-group {
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  background: #f9f5f7;
}

.item-choice-group-label {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-ui);
  color: var(--ink-soft);
}

.item-choice-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-family: var(--font-ui);
  color: var(--ink-soft);
  cursor: pointer;
}

.item-choice-group-error {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: #b91c1c;
}

.item-modifiers-error {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: #b91c1c;
}

.item-modifiers-error[hidden] {
  display: none;
}

.item-choice-group-error[hidden] {
  display: none;
}

.special-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--gold-bright);
  color: #1c1626;
  margin-bottom: 0.35rem;
  font-family: var(--font-ui);
}

.item.item-hidden,
.category.category-hidden {
  display: none;
}

/* ---- Shop / Swag ---- */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.shop-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(36, 20, 45, 0.06);
}

/* Wraps 1+ .shop-card-photo images, cross-fading through all of them when
   there's more than one (e.g. a t-shirt's front and back) — same absolute-
   stack + opacity-transition technique as .item-modal-gallery/-gallery-img
   in menu-section.js, just sized for a card tile instead of the item modal. */
.shop-card-photo-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.shop-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.shop-card-photo.active {
  opacity: 1;
}

.shop-card-photo-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  background: #f3ecee;
}

.shop-card-body {
  padding: 1rem;
}

.shop-card-body h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.shop-card-body .price {
  font-size: 1.1rem;
  margin-bottom: 0.7rem;
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.qty-stepper button {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
}

.qty-value {
  font-weight: 700;
  min-width: 1.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Gift card amount picker ---- */

.amount-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.amount-btn {
  background: #ffffff;
  color: var(--pink-text);
  border: 1px solid var(--pink);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
}

.amount-btn.selected {
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent;
}

.sold-out-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--ink-soft);
  color: #fff;
  margin-bottom: 0.35rem;
  margin-right: 0.35rem;
  font-family: var(--font-ui);
}

.item-modal-sold-out[hidden] {
  display: none;
}

.item.item-sold-out {
  opacity: 0.55;
}

.item.item-sold-out .item-photo {
  filter: grayscale(0.6);
}

/* ---- Places photo carousel ---- */

.places-photos {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 10px 30px rgba(36, 20, 45, 0.14);
}

.places-photo-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.places-photo-slide.active {
  opacity: 1;
}

.places-photo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.places-photo-slide figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(0deg, rgba(18, 14, 24, 0.75), transparent);
  color: #f3ecf7;
  font-size: 0.72rem;
  font-family: var(--font-ui);
}

.places-photo-slide figcaption a {
  color: #ffb1e0;
  text-decoration: none;
}

.places-photo-slide figcaption a:hover {
  text-decoration: underline;
}

.places-photos img {
  cursor: zoom-in;
}

/* ---- Lightbox ---- */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 14, 24, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 2rem;
}

.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  color: #f3ecf7;
  margin-top: 1rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ---- Item detail modal ---- */

.item {
  cursor: pointer;
}

.item:focus-visible {
  outline: none;
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(255, 47, 143, 0.35);
}

/* Specificity note: `.item p` (line ~146) is `.item` + type, which beats a
   single class selector — `.item-body .item-tap-hint` matches it so these
   rules actually win instead of silently falling back to the muted/0.95rem
   paragraph default. */
.item-body .item-tap-hint {
  color: var(--pink-text);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
  margin: 0.3rem 0 0;
  opacity: 0.85;
}

.item:hover .item-tap-hint,
.item:focus-visible .item-tap-hint {
  opacity: 1;
}

.item-tap-hint-arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}

.item:hover .item-tap-hint-arrow,
.item:focus-visible .item-tap-hint-arrow {
  transform: translateX(3px);
}

.item-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 14, 24, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
  padding: 1.25rem;
}

.item-modal-overlay[hidden] {
  display: none;
}

.item-modal {
  background: var(--panel);
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  padding: 1.75rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.item-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  background: var(--paper);
  border: 1px solid var(--panel-border);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.item-modal-gallery {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--paper);
}

.item-modal-gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  cursor: zoom-in;
}

.item-modal-gallery-img.active {
  opacity: 1;
}

.item-modal-category {
  color: var(--pink-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-ui);
  margin: 0 0 0.3rem;
}

.item-modal-name {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
}

.item-modal-price {
  display: inline-block;
  color: var(--gold-text);
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-ui);
}

.item-modal-price[hidden] {
  display: none;
}

.item-modal-desc {
  color: var(--text-muted);
  line-height: 1.6;
}

.item-modal-modifiers {
  margin-top: 0.75rem;
}

.item-modal-modifiers[hidden] {
  display: none;
}

.item-modal-order-btn {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  text-align: center;
}

.item-modal-order-btn[hidden] {
  display: none;
}

.item-modal-google-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--panel-border);
}

.item-modal-google-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.item-modal-google-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.item-modal-google-strip img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  flex: none;
  cursor: zoom-in;
}

/* ---- Photo detail modal (edit.html / edit-item.html) ---- */

.item-thumb {
  cursor: zoom-in;
}

.photo-detail-modal {
  max-width: 420px;
}

.photo-detail-image {
  display: block;
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
  border-radius: 14px;
  background: var(--paper);
  margin-bottom: 1.1rem;
}

.photo-detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

.photo-detail-list > div {
  display: contents;
}

.photo-detail-list dt {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: var(--font-ui);
}

.photo-detail-list dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.photo-detail-loading,
.photo-detail-error {
  color: var(--text-muted);
  font-size: 0.85rem;
  grid-column: 1 / -1;
}

/* ---- Forms: rewards + staff admin pages ---- */

label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-ui);
  margin-bottom: 0.9rem;
}

/* An author-stylesheet rule like the one above always beats the UA
   stylesheet's own "[hidden] { display: none }" rule when neither is
   !important, regardless of specificity — so any JS toggling a label's
   hidden attribute (bonus-type/social-link fields on the rewards and
   account pages, etc.) silently did nothing without this override. */
label[hidden] {
  display: none;
}

input[type="text"],
input[type="tel"],
input[type="search"],
textarea {
  padding: 0.6rem 0.7rem;
  border: 1px solid #d9cdd3;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 400;
  font-family: var(--font-ui);
  color: var(--text);
  background: #fff;
}

textarea {
  resize: vertical;
}

fieldset {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 0 0 0.9rem;
}

fieldset legend {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0 0.4rem;
}

.bonus-type-fieldset label {
  flex-direction: row;
  align-items: center;
  font-weight: 400;
  margin-bottom: 0.4rem;
}

/* ---- Pills, cards, tables: loyalty + events ---- */

.pill {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: #f3ecee;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-ui);
}

.pill-approved {
  background: #dcf5e3;
  color: #15803d;
}

.pill-denied {
  background: #fdeaea;
  color: #b91c1c;
}

.pill-warning {
  background: #fbf0dd;
  color: var(--gold-text);
}

.pickup-order-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.pickup-order-photo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.loyalty-card-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

/* ---- Visual punch card (rewards.html, "My Punch Card") ----
   punch-card-bg.png is the card art (purple gradient, gold frame, Ohana
   logo) with its lower half left deliberately clear — the 10 punch dots
   below are a live HTML overlay, not baked into the image, since the
   punch count is different for every guest and changes in real time. */
.punch-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1200 / 756;
  margin: 0.5rem 0 1rem;
  border-radius: 18px;
  background-image: url('/images/punch-card-bg.png');
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 32px rgba(36, 27, 46, 0.28);
}

.punch-card-dots {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 54%;
  bottom: 10%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6%;
}

.punch-dot {
  border-radius: 50%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.7rem, 3.2vw, 1.3rem);
  font-weight: 800;
  font-family: var(--font-ui);
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

.punch-dot.punched {
  border-color: transparent;
  background: var(--gold-bright);
  color: var(--purple);
  box-shadow: inset 0 2px 4px rgba(36, 27, 46, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.punch-card-reward-ready {
  margin-top: 0.9rem;
}

/* ---- Loyalty admin: program-at-a-glance stat tiles ---- */
.loyalty-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.9rem;
  margin-top: 0.75rem;
}

.loyalty-stat-tile {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 1rem 0.9rem;
  text-align: center;
}

.loyalty-stat-tile .stat-number {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  font-family: var(--font-ui);
  color: var(--purple);
}

.loyalty-stat-tile .stat-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* ---- Analytics: collapsible summary-card grid + single-section detail view ---- */

.analytics-page-toolbar {
  margin-bottom: 1.25rem;
}

#analytics-back-link {
  color: var(--pink-text);
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-ui);
}

#analytics-back-link:hover {
  text-decoration: underline;
}

.analytics-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  align-items: start;
}

.analytics-sections-grid .analytics-section {
  margin-bottom: 0;
}

/* A couple of sections (Feedback, Missing Price) have toolbar buttons that
   act on their detail content — irrelevant, and too cramped to lay out
   next to the title, while the card is collapsed in the grid. */
.analytics-sections-grid .analytics-section .editor-toolbar {
  display: block;
}

.analytics-sections-grid .analytics-section .toolbar-actions {
  display: none;
}

.analytics-section-title {
  display: block;
  color: inherit;
  text-decoration: none;
}

.editor-toolbar .analytics-section-title {
  flex: 1;
  min-width: 0;
}

.analytics-section-title h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.analytics-section-title h2::after {
  content: "View details →";
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pink-text);
}

.analytics-section-title:hover h2 {
  text-decoration: underline;
}

.analytics-section.expanded .analytics-section-title h2::after {
  content: "";
}

.analytics-section-detail {
  display: none;
  margin-top: 0.75rem;
}

.analytics-section.expanded .analytics-section-detail {
  display: block;
}

.data-table {
  overflow-x: auto;
}

.menu-health-group + .menu-health-group {
  margin-top: 1.5rem;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}

.data-table th {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-ui);
}

.data-table td .approve-btn,
.data-table td .deny-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
}

.plain-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  white-space: normal;
  font-size: 0.85rem;
}

.plain-list li {
  padding: 0.2rem 0;
}