/* Shared white-first identity for customer, account, admin, and rider pages. */
:root {
  --green-950: #111111;
  --green-900: #161616;
  --green-800: #171717;
  --green-700: #363636;
  --green-100: #f2f2f2;
  --lime-500: #d4d4d4;
  --lime-100: #f7f7f7;
  --cream-50: #ffffff;
  --cream-100: #fafafa;
  --cream-200: #eeeeee;
  --ink-900: #171717;
  --ink-700: #525252;
  --ink-500: #686868;
  --ink-300: #b5b5b5;
  --danger-700: #333333;
  --danger-100: #f2f2f2;
  --success-700: #222222;
  --success-100: #f2f2f2;
  --warning-700: #444444;
  --warning-100: #f5f5f5;
  --border: #e6e6e6;
  --border-strong: #cacaca;
  --shadow-sm: 0 8px 24px rgb(0 0 0 / 5%);
  --shadow-md: 0 24px 70px rgb(0 0 0 / 12%);
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
}
html, body, body.staff-page { background: #fff; }
[hidden] { display: none !important; }
.site-header, .staff-topbar { background: rgb(255 255 255 / 97%); box-shadow: none; border-bottom: 1px solid var(--border); }
.brand-mark { width: 38px; height: 52px; overflow: hidden; border-radius: 0; background: #fff; flex-shrink: 0; }
.brand-mark::after { content: none; }
.brand-logo { width: 100%; height: 100%; object-fit: cover; transform: scale(1.75); }
.brand-copy strong { color: #111; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.brand-copy small { color: #555; font-weight: 600; letter-spacing: .33em; }
.hero { min-height: 480px; padding-block: 46px; gap: 32px; border-bottom: 1px solid var(--border); }
.hero::before { content: none; }
.hero-content { padding-inline: 0; max-width: 680px; }
.hero h1 { max-width: none; margin-top: 20px; font-size: clamp(3rem, 6.3vw, 5.4rem); line-height: .99; letter-spacing: -.065em; font-weight: 850; }
.hero h1 span { color: #111; }
.hero-description { max-width: 40ch; font-size: 1rem; margin-top: 23px; }
.hero-note { font-size: .75rem; color: #666; }
.hero-note span { color: #111; }
.brand-showcase { display: grid; place-items: center; min-width: 0; height: 370px; border-left: 1px solid var(--border); }
.brand-showcase img { width: 270px; max-width: 100%; height: 100%; object-fit: contain; }
.primary-button, .checkout-button, .add-cart-button, .customize-button { background: #171717; color: #fff; border-radius: 10px; }
.primary-button:hover, .checkout-button:hover, .add-cart-button:hover, .customize-button:hover { background: #363636; }
.secondary-button, .icon-button, .cart-trigger, .profile-trigger { border-radius: 10px; }
.menu-section { padding-block: 56px 48px; }
.section-heading h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.05em; }
.section-copy { max-width: 41ch; font-size: .88rem; }
.menu-toolbar { grid-template-columns: 1fr; gap: 18px; }
.search-field { max-width: 480px; border-radius: 10px; background: #fff; }
.category-strip { flex-wrap: wrap; justify-content: flex-start; overflow: visible; padding: 0; gap: 8px; }
.category-button { min-height: 38px; padding-inline: 12px; background: #fff; border-radius: 8px; font-size: .74rem; }
.category-button.is-active { background: #171717; color: #fff; }
.menu-status { margin-top: 24px; font-size: .76rem; }
.menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.product-card { display: flex; flex-direction: column; border: 1px solid #e8e8e8; border-radius: 14px; box-shadow: none; background: #fff; }
.product-card:hover { transform: translateY(-2px); border-color: #bdbdbd; box-shadow: var(--shadow-sm); }
.product-visual.catalog-visual { min-height: 160px; height: 160px; background: #fafafa; border-bottom: 1px solid #eee; }
.catalog-visual { position: relative; display: grid; place-items: center; overflow: hidden; color: #8a8a8a; background: #fafafa; }
.catalog-visual::before, .catalog-visual::after { content: none; }
.catalog-icon { width: 62px; height: 62px; stroke-width: 1.05; }
.catalog-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fafafa; }
.product-badge { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 5px 8px; border: 1px solid #e5e5e5; border-radius: 5px; color: #555; background: #fff; font-size: .57rem; font-weight: 650; letter-spacing: .02em; }
.product-card-content { flex: 1; display: flex; flex-direction: column; padding: 18px; }
.product-category { font-size: .6rem; letter-spacing: .09em; color: #666; }
.product-card h3 { margin-top: 7px; font-size: 1rem; line-height: 1.35; letter-spacing: -.02em; }
.product-description { margin-top: 8px; margin-bottom: 18px; font-size: .74rem; line-height: 1.5; color: #686868; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.product-description:empty { display: none; }
.product-card-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid #f0f0f0; gap: 8px; align-items: center; }
.product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; font-size: 1rem; color: #171717; letter-spacing: -.03em; }
.product-price small { color: #686868; font-size: .6rem; }
.customize-button { min-height: 36px; min-width: 104px; padding: 0 12px; font-size: .72rem; white-space: nowrap; }
.catalog-load-error { margin-top: 12px; padding: 32px; display: grid; justify-items: center; gap: 12px; border: 1px solid #e5e5e5; border-radius: 14px; text-align: center; }
.catalog-load-error p { color: #666; line-height: 1.6; }
.how-it-works { border: 1px solid #e8e8e8; background: #fff; border-radius: 16px; }
.site-footer { background: #fff; border-top: 1px solid var(--border); }
.mobile-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); background: rgb(255 255 255 / 98%); box-shadow: 0 -1px 0 #e6e6e6; }
.cart-item-visual.catalog-visual { border-radius: 10px; background: #fafafa; }
.cart-item-visual .catalog-icon { width: 36px; height: 36px; }
.dialog-hero { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 20px; min-height: 160px; padding: 30px 24px 24px; background: #fafafa; border-bottom: 1px solid var(--border); }
.dialog-hero::before { content: ""; position: absolute; top: 10px; left: calc(50% - 23px); width: 46px; height: 4px; border-radius: 999px; background: #b5b5b5; }
.sheet-drag-region { touch-action: none; user-select: none; cursor: grab; }
.sheet-drag-region:active { cursor: grabbing; }
.customize-dialog[open] { animation: sheet-enter 180ms ease both; }
@keyframes sheet-enter { from { opacity: 0; } to { opacity: 1; } }
.sheet-dismiss-hint, .dialog-product-copy > .sheet-dismiss-hint { margin-top: 8px; font-size: .65rem; line-height: 1.5; color: #686868; font-weight: 400; }
#dialog-product-description { margin-top: 9px; color: #525252; font-size: .79rem; line-height: 1.5; }
.cart-panel { inset: auto 0 0; width: min(100%, 540px); max-height: min(88dvh, 780px); margin-inline: auto; grid-template-rows: auto auto minmax(0, 1fr) auto; border-radius: 24px 24px 0 0; transform: translateY(105%); }
.cart-panel.is-open { transform: translateY(0); }
.overlay:not(.is-visible) { pointer-events: none; }
.panel-handle { display: block; }
#sugar-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-group[hidden] + .option-group { margin-top: 0; }
.dialog-drink-visual.catalog-visual { position: relative; left: auto; bottom: auto; width: 80px; height: 80px; background: transparent; }
.dialog-drink-visual .catalog-icon { width: 62px; height: 62px; }
.dialog-drink-visual .catalog-image { border-radius: 12px; }
.segmented-options { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
.option-group legend #variant-label { color: #171717; font-size: .93rem; }
.option-card label { background: #fff; }
.option-card input:checked + label { border-color: #171717; background: #f5f5f5; color: #171717; box-shadow: 0 0 0 1px #171717; }
.addon-card input:checked + label { background: #f5f5f5; }
.quantity-row > div > span { color: #686868; }
.rider-hero { background: #fff; color: #171717; box-shadow: none; border: 1px solid var(--border); }
.admin-hero, .staff-phase-card { background: #fff; color: #171717; box-shadow: none; border: 1px solid var(--border); }
.admin-hero .eyebrow, .staff-phase-card .eyebrow { color: #666; }
.admin-hero-copy, .admin-live-panel small { color: #666; }
.admin-live-panel { background: #fafafa; border-color: var(--border); }
.admin-refresh-button { border-color: var(--border); }
#admin-enable-order-sound { min-height: 44px; font-size: .8rem; }
#admin-order-sound-status { font-size: .75rem; line-height: 1.5; }
.admin-live-dot, .admin-live-dot[data-state="live"], .admin-live-dot[data-state="offline"] { background: #555; box-shadow: 0 0 0 4px #eee; }
.rider-hero .eyebrow { color: #666; }
.rider-hero-copy, .rider-live-panel small { color: #666; }
.rider-live-panel { background: #fafafa; border-color: var(--border); }
.rider-refresh-button { border-color: var(--border); }
.rider-section { background: #fff; }
.rider-live-dot, .rider-live-dot[data-state="live"], .rider-live-dot[data-state="offline"] { background: #555; box-shadow: 0 0 0 4px #eee; }
.rider-status-pill, .rider-status-pill.status-dispatched, .rider-status-pill.status-completed { color: #333; background: #f1f1f1; border: 1px solid #ddd; }

.rider-toast.is-error, .rider-toast.is-success, .rider-status-message[data-type="error"] { background: #f5f5f5; color: #333; border-color: #ddd; }
.reset-brand-mark { background: #fff; color: #171717; overflow: hidden; }
.reset-brand-mark .brand-logo { width: 38px; height: 52px; }
@media (min-width: 760px) { .hero { grid-template-columns: 1.4fr 1fr; } }
@media (max-width: 1000px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 759px) {
  .hero { min-height: 0; padding-block: 32px; grid-template-columns: 1fr; gap: 26px; }
  .hero-content { text-align: left; }
  .hero h1 { font-size: clamp(2.7rem, 9.5vw, 4rem); }
  .hero-description { font-size: .9rem; max-width: 44ch; }
  .hero-actions { margin-top: 23px; gap: 14px; }
  .brand-showcase { height: 190px; border-left: 0; border-top: 1px solid #eee; padding-top: 12px; }
  .brand-showcase img { width: 150px; }
  .menu-section { padding-top: 32px; }
  .category-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-visual.catalog-visual { min-height: 128px; height: 128px; }
  .product-card-content { padding: 13px; }
  .product-card h3 { font-size: .9rem; }
  .product-description { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: break-word; font-size: .7rem; line-height: 1.6; margin-bottom: 12px; }
  .product-card-footer { flex-wrap: wrap; padding-top: 12px; }
  .product-price { font-size: .94rem; }
  .customize-button { width: 100%; padding-inline: 10px; }
  .product-badge { left: 8px; top: 8px; font-size: .52rem; padding-inline: 5px; }
}
@media (max-width: 480px) {
  .dialog-hero { grid-template-columns: 48px minmax(0,1fr); gap: 12px; min-height: 140px; padding: 26px 16px 22px; }
  .dialog-drink-visual.catalog-visual { width: 48px; height: 64px; }
  .dialog-drink-visual .catalog-icon { width: 44px; height: 44px; }
  .dialog-product-copy h2 { font-size: 1.4rem; }
}
@media (max-width: 360px) {
  .brand-copy strong { font-size: .88rem; }
  .menu-grid { grid-template-columns: 1fr; }
  .product-card { display: grid; grid-template-columns: 96px minmax(0,1fr); }
  .product-visual.catalog-visual { height: 100%; border-bottom: 0; }
  .product-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .product-card:hover { transform: none; } }

/* Matching staff navigation, with a compact two-button mode switch. */
.product-card.is-unavailable .product-visual { filter: grayscale(1); opacity: .75; }
.product-card.is-unavailable .unavailable-badge { display: inline-flex; background: #333; color: #fff; }
.product-card.is-unavailable .customize-button { border-color: #ddd; background: #eee; color: #777; cursor: not-allowed; }
body.staff-page { --staff-header-height: 110px; }
.staff-page .staff-topbar { position: sticky; top: 0; z-index: 80; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 38px; align-items: center; gap: 8px 12px; height: calc(var(--staff-header-height) + env(safe-area-inset-top)); min-height: 0; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
.staff-page .staff-topbar .staff-brand { grid-row: 1; grid-column: 1; min-width: 0; gap: 9px; }
.staff-page .staff-topbar .brand-mark { width: 28px; height: 40px; }
.staff-page .staff-topbar .staff-brand strong { max-width: none; font-size: clamp(.8rem, 3.5vw, 1rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-page .staff-topbar .staff-brand small, .staff-page .staff-topbar .staff-role-pill { display: none; }
.staff-page .staff-topbar > .staff-signout-button { grid-row: 1; grid-column: 2; align-self: center; justify-self: end; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: .75rem; }
.staff-page .staff-topbar .staff-mode-nav { grid-row: 2; grid-column: 1 / -1; justify-self: start; display: flex; flex-wrap: nowrap; width: 196px; max-width: 100%; min-width: 0; gap: 4px; padding: 3px; border: 1px solid #e6e6e6; border-radius: 10px; background: #f5f5f5; }
.staff-page .staff-mode-nav .staff-action-link { flex: 1; min-width: 0; min-height: 30px; padding: 5px 12px; border: 0; border-radius: 7px; background: transparent; color: #666; font-size: .75rem; font-weight: 700; }
.staff-page .staff-mode-nav .staff-action-link[aria-current="page"] { background: #171717; color: #fff; }
.staff-page .staff-mode-nav .staff-action-link:focus-visible { outline: 2px solid #171717; outline-offset: 2px; }
@media (min-width: 760px) {
  body.staff-page { --staff-header-height: 76px; }
  .staff-page .staff-topbar { grid-template-columns: minmax(0, 1fr) 196px auto; grid-template-rows: 44px; column-gap: 20px; padding: calc(16px + env(safe-area-inset-top)) max(20px, calc((100vw - 1120px) / 2)) 16px; }
  .staff-page .staff-topbar .staff-mode-nav { grid-row: 1; grid-column: 2; }
  .staff-page .staff-topbar > .staff-signout-button { grid-column: 3; }
}