:root {
  --night: #171b1a;
  --night-soft: #232a27;
  --paper: #f7f3e9;
  --acid: #d7f36b;
  --coral: #ff735c;
  --muted: #8d9890;
  --line: rgb(var(--kaishi-ink, 23 27 26) / 0.12);
}

@keyframes order-panel-enter {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes float-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(215, 243, 107, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(215, 243, 107, 0); }
}

* { box-sizing: border-box; }

.bill-choice[aria-pressed="true"] { border-color: var(--night) !important; background: var(--acid) !important; }
.bill-choice[aria-pressed="true"]::before { content: '✓ '; }
.bill-choice { min-height: 4rem; border-width: 2px; }
.bill-choice:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
#confirmBill, #cancelBill { min-height: 3rem; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper) !important;
  color: var(--night) !important;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
  background-image: radial-gradient(rgba(23, 27, 26, 0.075) 0.7px, transparent 0.7px) !important;
  background-size: 9px 9px !important;
}

main { position: relative; }

/* Compact access strip; wrap naturally when text grows or the viewport narrows. */
#occupationAccess { padding: .625rem .75rem; margin-bottom: .75rem; gap: .25rem .5rem; align-items: center; }
#occupationAccess:not(.hidden) { display: flex; flex-wrap: wrap; }
#occupationAccess .occupation-access-copy { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
#occupationAccessTitle { font-size: .875rem; line-height: 1.25; }
#occupationAccess .occupation-access-copy p { margin-top: .125rem; font-size: .75rem; line-height: 1.25; }
#occupationAccessForm { display: flex; flex-wrap: wrap; gap: .375rem; min-width: 0; max-width: 100%; }
#occupationCode { width: 4.25rem; max-width: 100%; min-width: 0; min-height: 44px; padding: .375rem .5rem; font-size: 1rem; letter-spacing: .125em; }
#occupationAccessSubmit { min-width: 44px; min-height: 44px; max-width: 100%; padding: .5rem .625rem; font-size: .875rem; line-height: 1.25; overflow-wrap: anywhere; }
#occupationCode:focus-visible, #occupationAccessSubmit:focus-visible { outline: 2px solid rgb(var(--kaishi-ink, 23 27 26)); outline-offset: 2px; }
#occupationAccessFeedback { flex: 1 0 100%; min-width: 0; font-size: .8125rem; line-height: 1.3; overflow-wrap: anywhere; }

header {
  align-items: center;
  border-color: var(--line) !important;
  column-gap: 0.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  max-width: 100%;
  padding-bottom: 0.45rem !important;
  padding-top: 0.45rem !important;
  position: relative;
  row-gap: 0.2rem;
  width: 100%;
  z-index: 3;
}

.header-identity > #restaurantName {
  color: var(--night) !important;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.06em !important;
}

#restaurantLogoPublic {
  grid-column: 2;
  grid-row: 1;
  display: block;
  height: 3.5rem;
  max-height: 3.5rem;
  max-width: min(36vw, 9rem);
  object-fit: contain;
  object-position: right center;
  width: min(36vw, 9rem);
}
#restaurantLogoPublic[hidden] { display: none; }
#restaurantLogoPublic.logo--square,
#restaurantLogoPublic.logo--portrait {
  height: 4.5rem;
  grid-row: 1 / span 2;
  max-height: 4.5rem;
}
#restaurantLogoPublic.logo--square { max-width: min(36vw, 4.5rem); width: min(36vw, 4.5rem); }
#restaurantLogoPublic.logo--portrait { max-width: min(36vw, 3.5rem); width: min(36vw, 3.5rem); }
#restaurantLogoPublic.logo--wide { max-width: min(46vw, 13rem); width: min(46vw, 13rem); }
@media (max-width: 359px) {
  #restaurantLogoPublic.logo--wide { max-width: min(36vw, 9rem); width: min(36vw, 9rem); }
}

.header-identity > #restaurantName::before {
  background: var(--coral);
  border-radius: 50%;
  content: '';
  display: inline-block;
  height: 0.55rem;
  margin-right: 0.42rem;
  vertical-align: 0.08rem;
  width: 0.55rem;
}

.header-identity > #restaurantName {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.header-identity { align-items: center; display: flex; grid-column: 1; grid-row: 1; min-width: 0; width: 100%; }
.header-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; grid-column: 1; grid-row: 2; justify-content: flex-start; width: 100%; }
#restaurantLogoPublic.logo--wide ~ .header-controls { grid-column: 1 / -1; }
#historyButton, #staffOrderExit { flex: none; }

header button { border-color: var(--line) !important; }
header #historyButton { color: var(--night) !important; }
header #historyButton:hover { background: var(--acid) !important; border-color: var(--acid) !important; }

.language-flag {
  border: 1px solid rgba(23, 27, 26, 0.18);
  border-radius: 0.12rem;
  box-shadow: 0 1px 1px rgba(23, 27, 26, 0.08);
  display: inline-block;
  flex: 0 0 auto;
  height: 0.75rem;
  overflow: hidden;
  width: 1.125rem;
}

.language-flag--es {
  background: linear-gradient(to bottom, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}

.language-flag--gb {
  background:
    linear-gradient(33deg, transparent 43%, #fff 43% 49%, #c8102e 49% 54%, #fff 54% 60%, transparent 60%),
    linear-gradient(-33deg, transparent 43%, #fff 43% 49%, #c8102e 49% 54%, #fff 54% 60%, transparent 60%),
    linear-gradient(to right, transparent 38%, #fff 38% 44%, #c8102e 44% 56%, #fff 56% 62%, transparent 62%),
    linear-gradient(to bottom, transparent 35%, #fff 35% 42%, #c8102e 42% 58%, #fff 58% 65%, transparent 65%),
    #012169;
}

#historyButton { flex-shrink: 0; white-space: nowrap; }
#contentLanguageControl { flex-shrink: 0; }

#inicio {
  animation: float-in 500ms ease-out both;
  padding-bottom: 0.85rem !important;
  padding-top: 1rem !important;
}

#inicio p:first-child {
  color: rgb(var(--kaishi-terracotta, 157 61 43)) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.16em !important;
}

#inicio h1 {
  color: var(--night) !important;
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
  font-size: clamp(2.2rem, 10vw, 3.6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.085em !important;
  line-height: 0.94 !important;
  max-width: 22rem !important;
}

#inicio h1::after {
  color: var(--coral);
  content: '.';
}
#inicio h1.has-custom-slogan::after { content: none; }

#inicio p:last-child { color: var(--kaishi-intro-muted, #5f6a63) !important; font-size: 0.88rem !important; }

.table-context {
  align-items: center;
  background: rgb(var(--kaishi-sage, 233 245 176) / 0.7);
  border-radius: 9999px;
  color: rgba(23, 27, 26, 0.75);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
}

#waiterStatus { color: var(--kaishi-waiter-muted, #657069) !important; }

#waiterButton {
  background: var(--kaishi-primary, #171b1a) !important;
  border-radius: 0.85rem !important;
  letter-spacing: -0.02em;
}
#waiterButton:hover { background: rgb(var(--kaishi-terracotta, 157 61 43)) !important; }

.category-nav {
  scrollbar-width: none;
  position: sticky;
  top: var(--menu-search-height, 4rem);
  z-index: 10;
  background: var(--paper);
}
.category-nav::-webkit-scrollbar { display: none; }
.category-chip {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--kaishi-category-muted, #66716a);
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  transition: 180ms ease;
}
.category-chip:hover { border-color: var(--night); color: var(--night); transform: translateY(-2px); }
.category-chip.is-active { background: var(--kaishi-primary, #171b1a); border-color: var(--kaishi-primary, #171b1a); color: var(--kaishi-active-text, #d7f36b); }
#confirmBill { background: var(--kaishi-primary, #171b1a) !important; }

.sticky {
  background: rgb(var(--kaishi-cream, 247 243 233) / 0.88) !important;
  backdrop-filter: blur(14px);
}
.sticky > div {
  background: #fffdf8 !important;
  border: 1px solid var(--line) !important;
  border-radius: 0.9rem !important;
  box-shadow: 0 8px 30px rgba(23, 27, 26, 0.07) !important;
}
.sticky input { font-size: 0.83rem !important; }
#menuSearchBar { z-index: 11; }
#menuSearchBar > div:has(#search:focus-visible) {
  outline: 3px solid rgb(var(--kaishi-ink, 23 27 26));
  outline-offset: 3px;
}

#menu { animation: float-in 650ms 100ms ease-out both; }
#menu, #emptyMessage, #menu section { scroll-margin-top: calc(var(--menu-sticky-height, 7rem) + .75rem); }
#menu section > div:first-child h2 {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.06em !important;
}
#menu section > div:first-child p { color: rgb(var(--kaishi-terracotta, 157 61 43)) !important; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.58rem !important; }

.menu-item {
  border: 1px solid rgba(23, 27, 26, 0.08) !important;
  box-shadow: 0 10px 30px rgba(23, 27, 26, 0.06) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.menu-item:hover { border-color: rgb(var(--kaishi-terracotta, 157 61 43) / 0.4) !important; box-shadow: 0 14px 34px rgba(23, 27, 26, 0.1) !important; transform: translateY(-3px); }
.menu-item img { filter: saturate(0.92); transition: transform 500ms ease, filter 500ms ease; }
.menu-item:hover img { filter: saturate(1.15); transform: scale(1.05); }
.menu-item h3 { letter-spacing: -0.035em; }
.menu-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.menu-tag { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; border: 1px solid rgba(23, 27, 26, 0.08); background: rgba(23, 27, 26, 0.03); padding: 0.28rem 0.55rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; }
.menu-tag--vegan { background: rgba(123, 164, 74, 0.12); border-color: rgba(123, 164, 74, 0.2); color: #386233; }
.menu-tag--spicy { background: rgba(255, 115, 92, 0.10); border-color: rgba(255, 115, 92, 0.18); color: #9d3d2b; }
.menu-tag--gluten-free { background: rgba(71, 122, 153, 0.10); border-color: rgba(71, 122, 153, 0.18); color: #2e536a; }
.menu-tag--allergen { background: rgba(242, 186, 68, 0.12); border-color: rgba(242, 186, 68, 0.22); color: #7b5812; }
.product-allergens { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.allergen-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.allergen-icon-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.allergen-mark { display: inline-flex; width: 27px; height: 27px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--allergen-color); vertical-align: middle; }
.allergen-mark svg { width: 18px; height: 18px; fill: none; stroke: white; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.allergen-mark--gluten { --allergen-color: #8b5327; }
.allergen-mark--crustaceos { --allergen-color: #a34442; }
.allergen-mark--huevos { --allergen-color: #8a611c; }
.allergen-mark--pescado { --allergen-color: #286681; }
.allergen-mark--cacahuetes { --allergen-color: #795133; }
.allergen-mark--soja { --allergen-color: #48713e; }
.allergen-mark--leche { --allergen-color: #456a9b; }
.allergen-mark--frutos-secos { --allergen-color: #86512a; }
.allergen-mark--apio { --allergen-color: #54742e; }
.allergen-mark--mostaza { --allergen-color: #916117; }
.allergen-mark--sesamo { --allergen-color: #8b5368; }
.allergen-mark--sulfitos { --allergen-color: #655d93; }
.allergen-mark--altramuces { --allergen-color: #865280; }
.allergen-mark--moluscos { --allergen-color: #386c73; }
.allergen-tooltip { position: fixed; z-index: 50; max-width: min(18rem, calc(100vw - 16px)); padding: 0.4rem 0.65rem; border-radius: 0.55rem; background: #171b1a; color: white; box-shadow: 0 8px 22px rgba(23, 27, 26, 0.2); font-size: 0.75rem; font-weight: 600; line-height: 1.3; text-align: center; pointer-events: auto; }
/* The transparent bridge fills only the physical gap, not adjacent controls. */
.allergen-tooltip::after { content: ''; position: absolute; left: 0; right: 0; height: var(--allergen-tooltip-gap, 6px); }
.allergen-tooltip[data-placement="above"]::after { top: 100%; }
.allergen-tooltip[data-placement="below"]::after { bottom: 100%; }
.allergen-tooltip[hidden] { display: none; }
.customize-allergens__heading { margin-bottom: 0.45rem; color: rgba(23, 27, 26, 0.7); font-size: 0.75rem; font-weight: 700; }
.customize-allergens__list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.customize-allergen { display: inline-flex; max-width: 100%; min-height: 1.9rem; align-items: center; gap: 0.4rem; padding: 0.2rem 0.55rem 0.2rem 0.2rem; border: 1px solid rgba(23, 27, 26, 0.1); border-radius: 999px; background: rgba(23, 27, 26, 0.025); color: rgba(23, 27, 26, 0.75); font-size: 0.72rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.customize-allergen .allergen-mark { width: 22px; height: 22px; }
.customize-allergen .allergen-mark svg { width: 15px; height: 15px; }
.customize-quantity-button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--paper);
  font-weight: 700;
}
.customize-quantity-button[aria-disabled="true"] { color: rgb(var(--kaishi-ink, 23 27 26) / .4); cursor: default; }
.customize-quantity-button:focus-visible {
  outline: 2px solid rgb(var(--kaishi-terracotta, 157 61 43));
  outline-offset: 2px;
}
.menu-item .add-button { border-radius: 0.7rem !important; font-size: 0.7rem !important; padding: 0.58rem 0.82rem !important; }
.menu-item .add-button:hover { background: rgb(var(--kaishi-terracotta, 157 61 43)) !important; border-color: rgb(var(--kaishi-terracotta, 157 61 43)) !important; color: white !important; }
.menu-actions { margin-top: 0.75rem !important; }
.menu-decrease { border-color: var(--line) !important; }
.menu-quantity { background: var(--acid) !important; color: var(--night) !important; }

/* Customer A05: contextual secondary copy, without changing the brand palette. */
:where(#customerMain, #customizePanel, #offerPanel, #orderPanel, #checkoutPanel, #historyPanel, #servicePanel)
  :where(.text-ink\/35, .text-ink\/40, .text-ink\/45, .text-ink\/50, .text-ink\/55):not(svg):not(:disabled),
#orderItems .text-ink\/60, #checkoutSummary .text-ink\/60, #historyItems .text-ink\/60, #historyTable.text-ink\/60,
#historyMine.text-ink\/60 {
  color: var(--kaishi-secondary-text, #636460);
}
#search::placeholder, #customerName::placeholder, #customizeForm textarea::placeholder {
  color: var(--kaishi-secondary-text, #636460);
  opacity: 1;
}
html[data-menu-template="kaishi"] #inicio p:last-child {
  color: color-mix(in srgb, var(--kaishi-intro-muted, #5f6a63) 95%, var(--night)) !important;
}
/* Inset and outer strokes define the badge on both light cards and photos.
   They do not participate in layout or replace the template's geometry. */
#menu .table-count {
  color: #fff;
  outline: 1px solid #fff;
  outline-offset: -2px;
  box-shadow: 0 0 0 1px var(--night);
}

.order-stepper { margin-bottom: 1.25rem; }
.order-step { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 4.2rem; line-height: 1.1; }
.order-step .step-number { font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-weight: 700; letter-spacing: -0.06em; }
.order-step--active { box-shadow: inset 0 0 0 1px rgba(123, 164, 74, 0.18); }
.order-step--current { box-shadow: inset 0 0 0 1px rgba(23, 27, 26, 0.06); }

.history-order { transition: border-color 180ms ease, box-shadow 180ms ease; }
.history-order.is-open { border-color: rgba(23, 27, 26, 0.18); box-shadow: 0 8px 20px rgba(23, 27, 26, 0.05); }
.history-toggle { font-size: 0.67rem; letter-spacing: 0.02em; }
.history-detail-list { display: grid; gap: 0.6rem; }
.history-detail-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-radius: 0.9rem; background: rgba(23, 27, 26, 0.03); padding: 0.7rem 0.8rem; }
.history-detail-item__meta { min-width: 0; }
.history-detail-item__name { display: block; font-size: 0.77rem; font-weight: 700; color: var(--night); }
.history-detail-item__qty { display: block; margin-top: 0.15rem; font-size: 0.68rem; color: rgba(23, 27, 26, 0.58); }
.history-status { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.26rem 0.58rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.history-status--pending { background: rgba(255, 115, 92, 0.10); color: #9d3d2b; }
.history-status--preparing { background: rgba(242, 186, 68, 0.12); color: #7b5812; }
.history-status--ready { background: rgba(123, 164, 74, 0.12); color: #386233; }
.history-status--delivered { background: rgba(71, 122, 153, 0.10); color: #2e536a; }
.history-status--cancelled { background: rgba(23, 27, 26, 0.11); color: #37413c; }

#menu .featured-section .menu-item { background: var(--night) !important; border: 0 !important; }
#menu .featured-section .menu-item:hover { transform: none; }
.featured-heading { gap: .5rem; }
.featured-controls { display: flex; flex: none; }
.featured-controls button {
  width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--night); font-size: 1.15rem;
}
.featured-controls button[hidden] { display: block; visibility: hidden; }
.featured-controls button:focus-visible, .featured-carousel:focus-visible {
  outline: 2px solid var(--coral); outline-offset: 2px;
}
.featured-carousel {
  display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.featured-carousel::-webkit-scrollbar { display: none; }
.featured-carousel > .menu-item {
  flex: 0 0 var(--featured-card-width, 100%); min-width: 0; scroll-snap-align: start;
}
.featured-carousel h3 { min-width: 0; overflow-wrap: anywhere; }

#cartDock {
  animation: float-in 250ms ease-out;
  background: var(--kaishi-primary, #171b1a) !important;
  border: 1px solid rgb(var(--kaishi-sage, 233 245 176) / 0.28) !important;
  bottom: 1rem !important;
  box-shadow: 0 16px 40px rgba(23, 27, 26, 0.24) !important;
}
#cartDock:hover { background: rgb(var(--kaishi-terracotta, 157 61 43)) !important; transform: translate(-50%, -3px); }
#cartDockCount { background: var(--acid) !important; color: var(--night) !important; }
.customer-dock {
  position: fixed;
  z-index: 20;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--customer-dock-viewport-inset, 0px));
  max-width: 28rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}
.customer-dock::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -.5rem -1rem calc(-1 * max(1rem, env(safe-area-inset-bottom)));
  background: var(--paper);
  pointer-events: none;
}
.customer-dock.hidden { display: none; }
/* Empty cart: only the bell floats; the transparent wrapper must not catch clicks. */
.customer-dock.is-empty { pointer-events: none; }
.customer-dock.is-empty::before { content: none; }
.customer-dock.is-empty #serviceButton { pointer-events: auto; }
html:has(#customerDock.is-empty) #customerMain { padding-bottom: 0; }
.customer-dock #cartDock {
  position: static;
  left: auto;
  bottom: auto !important;
  width: auto;
  max-width: none;
  min-width: 0;
  flex: 1;
  transform: none !important;
}
.customer-dock #cartDockStatus { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-dock ~ #toast { bottom: calc(var(--customer-dock-clearance, 6rem) + .5rem); }
.customer-dock.is-empty ~ #toast {
  bottom: calc(48px + max(1rem, env(safe-area-inset-bottom)) + var(--customer-dock-viewport-inset, 0px) + .75rem);
}
.service-dock-button {
  order: 2;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  color: var(--night);
  box-shadow: 0 4px 14px rgba(23, 27, 26, .12);
}
#serviceButton.hidden { display: none; }
.service-dock-button svg, .service-action svg { width: 24px; height: 24px; flex: none; }
.service-dock-button:focus-visible, #servicePanel button:focus-visible {
  outline: 2px solid rgb(var(--kaishi-terracotta, 157 61 43));
  outline-offset: 2px;
}
.service-action { display: flex; align-items: center; gap: .75rem; min-height: 48px; text-align: left; }
#serviceSessionStatus:empty, #waiterStatus:empty { display: none; }
#servicePanel h2 { font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-weight: 700; }
#customerMain { padding-bottom: max(9rem, var(--customer-dock-clearance, 6rem)); }
body.session-closed #customerMain { padding-bottom: max(12rem, var(--customer-dock-clearance, 6rem)); }
html { scroll-padding-bottom: var(--customer-dock-clearance, 0px); }
body.session-closed main { padding-bottom: 12rem; }

#orderPanel:not(.hidden) section, #checkoutPanel:not(.hidden) section, #historyPanel:not(.hidden) section { animation: order-panel-enter 220ms ease-out; }
#customizePanel section, #offerPanel section {
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}
/* Keep the complete sheet scrollable, including its header and final actions. */
#orderPanel, #checkoutPanel, #historyPanel, #servicePanel {
  top: var(--customer-panel-viewport-top, 0px);
  bottom: auto;
  height: var(--customer-panel-viewport-height, 100vh);
  height: var(--customer-panel-viewport-height, 100dvh);
}
#orderPanel > [role="dialog"], #checkoutPanel > [role="dialog"], #historyPanel > [role="dialog"], #servicePanel > [role="dialog"] {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: .5rem;
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}
.customize-photo:not([hidden]) {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(18rem, 35dvh);
  object-fit: contain;
  border-radius: 1rem;
  margin-top: 1rem;
}
#orderPanel section, #checkoutPanel section, #historyPanel section { border: 1px solid var(--line); }
#orderPanel h2, #checkoutPanel h2, #historyPanel h2 { font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important; font-weight: 700 !important; letter-spacing: -0.06em !important; }


button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button:active { transform: scale(0.97); }

@media (min-width: 640px) {
  main { box-shadow: 0 0 80px rgba(23, 27, 26, 0.08); }
}
@keyframes order-panel-enter {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#orderPanel:not(.hidden) section {
  animation: order-panel-enter 220ms ease-out;
}

button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}