/* El Cangrejo Loco exclusive visual system. Loaded after the inherited Casa app CSS. */
:root {
  --cl-ink: #23120f;
  --cl-muted: #7a695f;
  --cl-paper: #fff7e8;
  --cl-paper-strong: #fffdf7;
  --cl-sand: #f5e9d4;
  --cl-line: rgba(35, 18, 15, 0.14);
  --cl-teal: #008f96;
  --cl-teal-dark: #064b4d;
  --cl-lagoon: #13b3b2;
  --cl-coral: #ef4f35;
  --cl-yellow: #ffd24a;
  --cl-leaf: #2d8b57;
  --cl-shadow: 0 20px 54px rgba(52, 29, 18, 0.14);
  --cl-radius: 18px;
}

html {
  background: var(--cl-paper) !important;
  color: var(--cl-ink) !important;
}

body {
  color: var(--cl-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 246, 225, 0.96), rgba(255, 247, 232, 1) 44rem),
    radial-gradient(circle at 90% 2%, rgba(19, 179, 178, 0.18), transparent 28rem),
    var(--cl-paper) !important;
}

body::before {
  display: none !important;
}

.app-shell {
  display: block !important;
  min-height: 100svh !important;
  background: transparent !important;
}

.brand-rail {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: 22px !important;
  height: 88px !important;
  min-height: 88px !important;
  padding: 10px clamp(18px, 3vw, 42px) !important;
  border-bottom: 1px solid rgba(255, 253, 247, 0.2) !important;
  color: #fffdf7 !important;
  background:
    linear-gradient(135deg, rgba(0, 143, 150, 0.98), rgba(6, 75, 77, 0.98)),
    var(--cl-teal-dark) !important;
  box-shadow: 0 10px 30px rgba(6, 75, 77, 0.2) !important;
}

.brand-rail::after {
  display: none !important;
}

.brand-lockup {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  color: inherit !important;
}

.brand-mark {
  width: 86px !important;
  height: 62px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 253, 247, 0.42) !important;
  border-radius: 16px !important;
  background: var(--cl-paper) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14) !important;
}

.brand-logo,
.brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.brand-lockup strong {
  color: #fffdf7 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.2rem, 2vw, 1.9rem) !important;
  line-height: 0.92 !important;
  letter-spacing: 0 !important;
}

.brand-lockup small {
  color: var(--cl-yellow) !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
}

.role-switch--public {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.role-tab,
.language-toggle,
.nav-order-button {
  border-radius: 12px !important;
  letter-spacing: 0 !important;
}

.role-tab {
  min-height: 44px !important;
  padding: 0 14px !important;
  color: rgba(255, 253, 247, 0.88) !important;
  background: transparent !important;
  font-size: 0.8rem !important;
  font-weight: 950 !important;
}

.role-tab.is-active,
.role-tab:hover {
  color: var(--cl-yellow) !important;
  background: rgba(255, 253, 247, 0.08) !important;
}

.role-tab.is-active::before {
  display: none !important;
}

.language-toggle {
  min-height: 44px !important;
  border: 1px solid rgba(255, 253, 247, 0.28) !important;
  color: #fffdf7 !important;
  background: rgba(255, 253, 247, 0.1) !important;
}

.nav-order-button,
.primary-button {
  border: 0 !important;
  color: #fffdf7 !important;
  background: linear-gradient(135deg, var(--cl-coral), #ff7458) !important;
  box-shadow: 0 14px 30px rgba(239, 79, 53, 0.28) !important;
}

.secondary-button {
  border-color: rgba(0, 143, 150, 0.22) !important;
  color: var(--cl-teal-dark) !important;
  background: #fffdf7 !important;
}

.ghost-button,
.icon-button,
.text-button {
  border-color: rgba(35, 18, 15, 0.14) !important;
  color: var(--cl-teal-dark) !important;
  background: rgba(255, 253, 247, 0.74) !important;
}

.workspace {
  padding: 0 !important;
  background: transparent !important;
}

.promo-view {
  color: var(--cl-ink) !important;
  background: transparent !important;
}

.casa-hero {
  display: grid !important;
  grid-template-areas:
    "copy media"
    "proof media" !important;
  grid-template-columns: minmax(520px, 1fr) minmax(420px, 0.76fr) !important;
  align-items: center !important;
  gap: clamp(22px, 3vw, 44px) !important;
  width: min(1500px, calc(100% - 44px)) !important;
  min-height: min(700px, calc(100svh - 126px)) !important;
  margin: 24px auto 0 !important;
  padding: clamp(28px, 4vw, 56px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(35, 18, 15, 0.1) !important;
  border-radius: 28px !important;
  color: var(--cl-ink) !important;
  background:
    linear-gradient(135deg, rgba(255, 253, 247, 0.96), rgba(255, 247, 232, 0.86)),
    radial-gradient(circle at 88% 20%, rgba(19, 179, 178, 0.18), transparent 18rem),
    var(--cl-paper-strong) !important;
  box-shadow: var(--cl-shadow) !important;
}

.hero-video {
  display: none !important;
  grid-area: media !important;
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  height: clamp(360px, 54svh, 560px) !important;
  border: 10px solid #fffdf7 !important;
  border-radius: 28px !important;
  object-fit: cover !important;
  opacity: 0.92 !important;
  filter: saturate(1.08) contrast(1.03) !important;
  box-shadow: 0 24px 60px rgba(6, 75, 77, 0.22) !important;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(255, 253, 247, 0.96) 0%, rgba(255, 253, 247, 0.76) 52%, rgba(255, 253, 247, 0.04) 100%) !important;
}

.hero-copy {
  position: relative !important;
  grid-area: copy !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 760px !important;
  padding: 0 !important;
  color: var(--cl-ink) !important;
}

.hero-logo {
  display: block !important;
  width: 118px !important;
  height: 82px !important;
  margin: 0 0 18px !important;
  border: 1px solid var(--cl-line) !important;
  border-radius: 18px !important;
  object-fit: contain !important;
  background: #fffdf7 !important;
  box-shadow: 0 12px 28px rgba(35, 18, 15, 0.1) !important;
}

.hero-copy h1 {
  max-width: 850px !important;
  margin: 0 !important;
  color: var(--cl-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(3rem, 5.4vw, 5.6rem) !important;
  line-height: 0.88 !important;
  text-shadow: none !important;
}

.hero-copy p,
.hero-tagline {
  max-width: 620px !important;
  color: var(--cl-muted) !important;
  font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
  line-height: 1.65 !important;
}

.hero-tagline {
  color: var(--cl-teal-dark) !important;
  font-weight: 950 !important;
}

.hero-actions {
  gap: 12px !important;
  margin-top: 24px !important;
}

.hero-actions .primary-button,
.hero-actions .secondary-button {
  min-height: 52px !important;
  border-radius: 14px !important;
  padding: 0 22px !important;
}

.hero-proof-strip {
  position: relative !important;
  grid-area: proof !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 20px !important;
}

.hero-proof-strip div {
  min-height: 68px !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(0, 143, 150, 0.16) !important;
  border-radius: 16px !important;
  background: rgba(255, 253, 247, 0.82) !important;
}

.hero-proof-strip strong {
  color: var(--cl-coral) !important;
}

.hero-proof-strip span {
  color: var(--cl-muted) !important;
}

.hero-media-stack {
  position: relative !important;
  grid-area: media !important;
  z-index: 2 !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  justify-self: stretch !important;
  align-self: center !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.hero-media-stack figure {
  position: relative !important;
  min-height: clamp(170px, 18vw, 250px) !important;
  border: 8px solid #fffdf7 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: var(--cl-paper-strong) !important;
  box-shadow: 0 18px 42px rgba(6, 75, 77, 0.16) !important;
}

.hero-media-stack figure::before,
.hero-media-stack figure::after {
  display: none !important;
}

.hero-media-stack img,
.hero-media-stack video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

.hero-media-stack figcaption {
  position: absolute !important;
  inset: auto 10px 10px 10px !important;
  z-index: 2 !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  color: #fffdf7 !important;
  background: rgba(6, 75, 77, 0.78) !important;
  backdrop-filter: blur(10px) !important;
}

.hero-media-stack figcaption span {
  color: #fffdf7 !important;
  font-weight: 900 !important;
}

.home-marquee,
.featured-menu,
.experience-grid,
.chef-story,
.private-access-panel {
  width: min(1500px, calc(100% - 44px)) !important;
  margin-inline: auto !important;
}

.home-marquee {
  margin-top: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--cl-teal-dark) !important;
  background: transparent !important;
}

.home-marquee__track span {
  color: var(--cl-teal-dark) !important;
}

.featured-menu,
.experience-grid,
.chef-story,
.private-access-panel {
  margin-top: 28px !important;
  border: 1px solid rgba(35, 18, 15, 0.1) !important;
  border-radius: 24px !important;
  background: rgba(255, 253, 247, 0.94) !important;
  box-shadow: var(--cl-shadow) !important;
}

.featured-menu {
  padding: clamp(20px, 3vw, 34px) !important;
}

.section-title-row h2,
.chef-story h2 {
  color: var(--cl-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
}

.section-title-row a,
.text-button {
  color: var(--cl-coral) !important;
}

.featured-menu__rail {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(180px, 1fr)) !important;
  gap: 14px !important;
}

.featured-dish {
  min-width: 0 !important;
  border: 1px solid rgba(35, 18, 15, 0.12) !important;
  border-radius: 20px !important;
  color: var(--cl-ink) !important;
  background: #fffdf7 !important;
  box-shadow: none !important;
}

.featured-dish img {
  height: 170px !important;
}

.featured-dish small {
  color: var(--cl-muted) !important;
}

.featured-dish strong {
  color: var(--cl-teal-dark) !important;
}

.featured-add-button,
.add-button {
  color: #fffdf7 !important;
  background: var(--cl-coral) !important;
  box-shadow: 0 10px 22px rgba(239, 79, 53, 0.22) !important;
}

.home-category-strip {
  border-color: rgba(0, 143, 150, 0.14) !important;
  color: var(--cl-teal-dark) !important;
  background: rgba(0, 143, 150, 0.06) !important;
}

.experience-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  padding: clamp(18px, 3vw, 30px) !important;
}

.experience-grid .section-title-row--full {
  grid-column: 1 / -1 !important;
}

.video-card {
  min-height: 300px !important;
  border-radius: 22px !important;
  box-shadow: none !important;
}

.video-card figcaption {
  border-radius: 14px !important;
  color: #fffdf7 !important;
  background: rgba(6, 75, 77, 0.74) !important;
}

.chef-story {
  grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1fr) !important;
  gap: clamp(24px, 4vw, 54px) !important;
  padding: clamp(22px, 4vw, 44px) !important;
  align-items: center !important;
}

.menu-board-preview {
  display: grid !important;
  gap: 16px !important;
  padding: 18px !important;
  border: 2px solid rgba(0, 143, 150, 0.16) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, #fffdf7, #fff3db),
    var(--cl-paper-strong) !important;
  box-shadow: inset 0 -8px 0 rgba(255, 210, 74, 0.24) !important;
}

.menu-board-preview__brand {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

.menu-board-preview__brand img {
  width: 92px !important;
  height: 68px !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  background: #fffdf7 !important;
}

.menu-board-preview__brand strong {
  display: block !important;
  color: var(--cl-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.8rem !important;
  line-height: 1 !important;
}

.menu-board-preview__brand span,
.menu-board-preview small {
  color: var(--cl-muted) !important;
}

.menu-board-preview__grid {
  display: grid !important;
  gap: 10px !important;
}

.menu-board-preview__grid div {
  display: grid !important;
  grid-template-columns: minmax(120px, 0.55fr) minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(35, 18, 15, 0.1) !important;
  border-radius: 14px !important;
  background: rgba(255, 253, 247, 0.82) !important;
}

.menu-board-preview__grid span {
  color: var(--cl-coral) !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.menu-board-preview__grid strong {
  color: var(--cl-ink) !important;
}

.private-access-panel {
  padding: clamp(20px, 3vw, 34px) !important;
  color: var(--cl-ink) !important;
}

.private-access-menu summary,
.private-access-menu nav a {
  border-color: rgba(0, 143, 150, 0.14) !important;
  color: var(--cl-teal-dark) !important;
  background: rgba(0, 143, 150, 0.06) !important;
}

#customer-view,
#staff-view,
#owner-view {
  box-sizing: border-box !important;
  width: min(1500px, calc(100% - 44px)) !important;
  margin: 0 auto !important;
  padding: 64px 0 42px !important;
  color: var(--cl-ink) !important;
  scroll-margin-top: 112px !important;
}

#customer-view .topbar,
#staff-view .topbar,
#owner-view .topbar {
  align-items: end !important;
  gap: 18px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  color: var(--cl-ink) !important;
}

#staff-view .topbar,
#owner-view .topbar {
  padding: 22px 24px !important;
  border: 1px solid rgba(35, 18, 15, 0.1) !important;
  border-radius: 20px !important;
  background: rgba(255, 253, 247, 0.96) !important;
  box-shadow: var(--cl-shadow) !important;
  overflow: visible !important;
}

#customer-view .topbar h1,
#staff-view .topbar h1,
#owner-view .topbar h1 {
  max-width: 920px !important;
  color: var(--cl-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.4rem, 5vw, 5.4rem) !important;
  line-height: 0.9 !important;
}

#staff-view .topbar h1,
#owner-view .topbar h1 {
  max-width: 820px !important;
  font-size: clamp(2.3rem, 4.2vw, 4.35rem) !important;
  line-height: 0.95 !important;
}

.eyebrow {
  color: var(--cl-coral) !important;
  letter-spacing: 0 !important;
}

#customer-view .customer-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px) !important;
  gap: 22px !important;
}

#customer-view .customer-grid.is-orders-mode {
  grid-template-columns: minmax(0, 1fr) !important;
}

#customer-view .customer-grid.is-orders-mode .customer-main {
  min-width: 0 !important;
}

#customer-view .market-panel {
  display: grid !important;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) !important;
  gap: 22px !important;
  padding: 18px !important;
}

#customer-view .market-panel,
#customer-view .cart-panel,
#customer-view .tracker-panel,
#customer-view .orders-list-panel,
#customer-view .orders-detail-panel,
#staff-view .queue-panel,
#staff-view .delivery-detail,
#owner-view .owner-report,
#owner-view .owner-inventory-panel,
#staff-view .login-panel,
#owner-view .login-panel {
  border: 1px solid rgba(35, 18, 15, 0.11) !important;
  border-radius: var(--cl-radius) !important;
  color: var(--cl-ink) !important;
  background: rgba(255, 253, 247, 0.96) !important;
  box-shadow: var(--cl-shadow) !important;
}

#customer-view .catalog-tools {
  position: sticky !important;
  top: 112px !important;
  display: grid !important;
  gap: 14px !important;
  align-self: start !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(0, 143, 150, 0.12) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(0, 143, 150, 0.08), rgba(255, 253, 247, 0.92)) !important;
}

#customer-view .search-control {
  min-height: 50px !important;
  border: 1px solid rgba(35, 18, 15, 0.12) !important;
  border-radius: 14px !important;
  color: var(--cl-ink) !important;
  background: #fffdf7 !important;
}

#customer-view .search-control input,
#customer-view .checkout-form input,
#customer-view .checkout-form textarea,
#customer-view .checkout-form select,
#owner-view input,
#owner-view select,
#owner-view textarea,
#staff-view input,
#staff-view select,
#staff-view textarea {
  color: var(--cl-ink) !important;
  background: #fffdf7 !important;
  border-color: rgba(35, 18, 15, 0.14) !important;
}

#customer-view input::placeholder,
#customer-view textarea::placeholder {
  color: rgba(122, 105, 95, 0.72) !important;
}

#customer-view .category-tabs {
  display: grid !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow: visible !important;
}

#customer-view .category-tab,
#customer-view .mode-chip,
#owner-view .mode-chip,
.owner-mode-switch .mode-chip {
  min-height: 44px !important;
  justify-content: flex-start !important;
  border: 1px solid rgba(35, 18, 15, 0.1) !important;
  border-radius: 12px !important;
  color: var(--cl-teal-dark) !important;
  background: #fffdf7 !important;
}

#customer-view .category-tab.is-active,
#customer-view .mode-chip.is-active,
#owner-view .mode-chip.is-active,
.owner-mode-switch .mode-chip.is-active {
  color: #fffdf7 !important;
  border-color: var(--cl-teal) !important;
  background: linear-gradient(135deg, var(--cl-teal), var(--cl-lagoon)) !important;
}

#customer-view .catalog-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 16px !important;
}

#customer-view .catalog-item {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(35, 18, 15, 0.1) !important;
  border-radius: 18px !important;
  color: var(--cl-ink) !important;
  background: #fffdf7 !important;
  box-shadow: none !important;
}

#customer-view .catalog-item.is-in-cart {
  border-color: rgba(239, 79, 53, 0.38) !important;
  box-shadow: inset 0 0 0 2px rgba(239, 79, 53, 0.08) !important;
}

#customer-view .product-swatch {
  width: 100% !important;
  height: clamp(120px, 11vw, 150px) !important;
  border-radius: 14px !important;
}

#customer-view .product-swatch img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#customer-view .product-main h3 {
  color: var(--cl-ink) !important;
  font-size: clamp(1rem, 1.15vw, 1.14rem) !important;
  line-height: 1.08 !important;
}

#customer-view .product-meta,
#customer-view .cart-empty,
#customer-view .location-helper,
#customer-view .panel-heading p,
#staff-view .panel-heading p,
#owner-view .panel-heading p,
#owner-view .empty-state,
.empty-state p {
  color: var(--cl-muted) !important;
}

#customer-view .tag,
.status-pill,
.live-pill {
  border-radius: 999px !important;
  color: var(--cl-teal-dark) !important;
  background: rgba(0, 143, 150, 0.1) !important;
}

#customer-view .tag--available,
#customer-view .tag--stock {
  color: #12623c !important;
  background: rgba(45, 139, 87, 0.13) !important;
}

#customer-view .tag--unavailable {
  color: var(--cl-coral) !important;
  background: rgba(239, 79, 53, 0.12) !important;
}

#customer-view .product-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

#customer-view .product-actions strong,
.price,
[data-cart-total],
[data-cart-subtotal],
[data-cart-delivery],
#total {
  color: var(--cl-teal-dark) !important;
}

#customer-view .quantity-button,
#customer-view .icon-button {
  color: var(--cl-teal-dark) !important;
  background: #fff7e8 !important;
}

#customer-view .cart-panel {
  position: sticky !important;
  top: 112px !important;
  padding: 20px !important;
  max-height: calc(100svh - 132px) !important;
  overflow: auto !important;
}

#customer-view .cart-panel h2,
#customer-view .panel-heading h2,
#staff-view h2,
#owner-view h2,
.queue-summary h2 {
  color: var(--cl-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
}

#customer-view .cart-line,
#customer-view .summary-row,
#customer-view .status-row,
#staff-view .driver-row {
  border-color: rgba(35, 18, 15, 0.1) !important;
}

#customer-view .totals {
  border-color: rgba(35, 18, 15, 0.12) !important;
}

#customer-view .checkout-form label,
#customer-view .payment-field,
#customer-view .location-card {
  color: var(--cl-muted) !important;
}

#customer-view .location-card,
#customer-view .payment-field,
#customer-view .manual-location,
#customer-view .delivery-destination {
  border-color: rgba(35, 18, 15, 0.1) !important;
  color: var(--cl-ink) !important;
  background: rgba(255, 247, 232, 0.74) !important;
}

.mini-map,
.staff-map,
.customer-tracking-map,
#customer-map,
#staff-map,
#owner-map,
.route-map,
.tracker-map {
  border: 1px solid rgba(0, 143, 150, 0.18) !important;
  border-radius: 16px !important;
  background: #d7f1ec !important;
}

#customer-view .customer-stage-bar,
#customer-view .customer-mode-switch {
  border-radius: 16px !important;
}

#customer-view .orders-workspace,
#customer-view .tracker-shell {
  gap: 18px !important;
}

#customer-view .orders-workspace {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.34fr) minmax(0, 1fr) !important;
  align-items: start !important;
  width: 100% !important;
}

#customer-view .orders-list-panel,
#customer-view .orders-detail-panel {
  min-width: 0 !important;
}

#customer-view .tracker-header,
#customer-view .tracker-info-panel,
#customer-view .tracker-card,
#customer-view .tracker-summary-grid .metric,
#customer-view .customer-order-card,
#staff-view .order-card,
#owner-view .owner-metric,
#owner-view .owner-period-card,
#owner-view .owner-insight-card,
#owner-view .owner-inventory-card,
#owner-view .owner-inventory-item {
  border-color: rgba(35, 18, 15, 0.1) !important;
  color: var(--cl-ink) !important;
  background: #fffdf7 !important;
}

#customer-view .tracker-header h2,
#customer-view .tracker-empty h2,
#customer-view .tracker-card h3,
#customer-view .tracker-summary-grid .metric strong,
#customer-view .tracker-items strong {
  color: var(--cl-ink) !important;
}

#customer-view .tracker-header p,
#customer-view .tracker-empty p,
#customer-view .tracker-card p,
#customer-view .tracker-summary-grid .metric span,
#customer-view .tracker-items span {
  color: var(--cl-muted) !important;
}

#customer-view .tracker-summary-grid,
#customer-view .tracker-shell {
  border-color: rgba(35, 18, 15, 0.1) !important;
  background: transparent !important;
}

#customer-view .tracker-shell {
  align-items: stretch !important;
}

#customer-view .tracker-map-stage {
  position: relative !important;
  overflow: hidden !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(0, 143, 150, 0.12) !important;
  border-radius: 18px !important;
  background: #fffdf7 !important;
}

#customer-view .tracker-map-toolbar {
  position: absolute !important;
  inset: 24px 24px auto auto !important;
  z-index: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  max-width: calc(100% - 96px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

#customer-view .tracker-map-toolbar > * {
  pointer-events: auto !important;
}

#customer-view .tracker-map-toolbar .status-pill,
#customer-view .tracker-map-toolbar .secondary-button {
  min-height: 42px !important;
  border: 1px solid rgba(255, 253, 247, 0.76) !important;
  color: var(--cl-teal-dark) !important;
  background: rgba(255, 253, 247, 0.9) !important;
  box-shadow: 0 12px 28px rgba(6, 75, 77, 0.18) !important;
  backdrop-filter: blur(12px) !important;
}

#customer-view .tracker-map-toolbar .status-pill.is-live {
  color: #fffdf7 !important;
  background: linear-gradient(135deg, var(--cl-teal), var(--cl-lagoon)) !important;
}

#customer-view .tracker-map-toolbar .secondary-button:disabled {
  opacity: 0.75 !important;
  cursor: not-allowed !important;
}

#customer-view .tracker-map,
#customer-view .tracker-map.leaflet-container,
#customer-view .tracker-map--focused,
#customer-view .tracker-map--focused.leaflet-container {
  display: block !important;
  width: 100% !important;
  height: clamp(360px, 54svh, 540px) !important;
  min-height: 360px !important;
  max-height: 540px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 143, 150, 0.16) !important;
  border-radius: 16px !important;
  background: #d7f1ec !important;
}

#customer-view .tracker-timeline .timeline-step {
  color: var(--cl-teal-dark) !important;
  background: rgba(0, 143, 150, 0.1) !important;
}

#customer-view .tracker-timeline .timeline-step.is-done {
  color: #fffdf7 !important;
  background: linear-gradient(135deg, var(--cl-teal), var(--cl-lagoon)) !important;
}

#staff-view .delivery-grid {
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr) !important;
  gap: 22px !important;
}

#staff-view .queue-panel {
  position: sticky !important;
  top: 112px !important;
  max-height: calc(100svh - 132px) !important;
  min-height: 0 !important;
  overflow: auto !important;
}

#staff-view .delivery-detail {
  min-height: 640px !important;
}

#staff-view .detail-empty {
  display: grid !important;
  min-height: 460px !important;
  place-items: center !important;
  color: var(--cl-muted) !important;
}

.delivery-detail.is-route-focus {
  box-shadow: var(--cl-shadow) !important;
}

.route-stage,
.route-focus-sidebar .detail-card,
.mobile-nav-sheet {
  border-color: rgba(35, 18, 15, 0.1) !important;
  color: var(--cl-ink) !important;
  background: rgba(255, 253, 247, 0.96) !important;
}

.route-stage h3,
.route-focus-sidebar .detail-card h3,
.mobile-nav-sheet h3 {
  color: var(--cl-ink) !important;
}

.route-stage p,
.route-stage .detail-meta,
.route-stage .detail-meta span:not(.live-pill),
.route-focus-sidebar .detail-card p,
.mobile-nav-sheet p {
  color: var(--cl-muted) !important;
}

.map-float-button,
.map-float-pill {
  color: var(--cl-teal-dark) !important;
  background: #fffdf7 !important;
}

.map-float-button--primary {
  color: #fffdf7 !important;
  background: var(--cl-coral) !important;
}

#owner-view .owner-report {
  overflow: hidden !important;
}

#owner-view .owner-inventory-card {
  overflow: hidden !important;
  border-color: rgba(35, 18, 15, 0.1) !important;
  color: var(--cl-ink) !important;
  background: #fffdf7 !important;
}

#owner-view .owner-inventory-card > .owner-insight-card__header {
  border-color: rgba(35, 18, 15, 0.1) !important;
  color: var(--cl-ink) !important;
  background: rgba(0, 143, 150, 0.07) !important;
}

#owner-view .owner-inventory-card > .owner-insight-card__header h3 {
  color: var(--cl-ink) !important;
  font-size: clamp(1.8rem, 3vw, 2.7rem) !important;
}

#owner-view .owner-inventory-card > .owner-insight-card__header .eyebrow {
  color: var(--cl-coral) !important;
}

#owner-view .owner-inventory-card > .owner-insight-card__header p {
  color: var(--cl-muted) !important;
}

#owner-view .owner-inventory-add {
  grid-template-columns: minmax(190px, 0.9fr) repeat(3, minmax(120px, 1fr)) !important;
  min-width: 0 !important;
  border-color: rgba(0, 143, 150, 0.14) !important;
  color: var(--cl-ink) !important;
  background: rgba(255, 247, 232, 0.78) !important;
}

#owner-view .owner-inventory-add label,
#owner-view .owner-inventory-item__fields label {
  min-width: 0 !important;
  color: var(--cl-ink) !important;
}

#owner-view .owner-inventory-add label span,
#owner-view .owner-inventory-item__fields label span {
  color: var(--cl-muted) !important;
}

#owner-view .owner-inventory-add input,
#owner-view .owner-inventory-add select,
#owner-view .owner-inventory-item__fields input,
#owner-view .owner-inventory-item__fields select {
  min-width: 0 !important;
  color: var(--cl-ink) !important;
  background: #fffdf7 !important;
  border-color: rgba(35, 18, 15, 0.14) !important;
}

#owner-view .inventory-upload-drop {
  border-color: rgba(0, 143, 150, 0.24) !important;
  color: var(--cl-ink) !important;
  background: rgba(0, 143, 150, 0.06) !important;
}

#owner-view .inventory-upload-drop span,
#owner-view .inventory-upload-drop strong {
  color: var(--cl-teal-dark) !important;
}

#owner-view .inventory-upload-drop input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#owner-view .owner-inventory-list {
  min-width: 0 !important;
}

#owner-view .owner-inventory-item {
  grid-template-columns: 116px minmax(0, 1fr) minmax(190px, 240px) !important;
  min-width: 0 !important;
  border-color: rgba(35, 18, 15, 0.1) !important;
  color: var(--cl-ink) !important;
  background: #fffdf7 !important;
}

#owner-view .owner-inventory-item__visual {
  border-color: rgba(35, 18, 15, 0.1) !important;
  background: rgba(0, 143, 150, 0.07) !important;
}

#owner-view .owner-inventory-item__visual span {
  color: var(--cl-teal-dark) !important;
}

#owner-view .owner-inventory-item__fields {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#owner-view .owner-inventory-item__actions {
  min-width: 0 !important;
}

#owner-view .owner-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#owner-view .owner-table-wrap,
#owner-view .owner-period-history,
#owner-view .owner-period-detail,
#owner-view .owner-study,
#owner-view .owner-order-detail {
  border-color: rgba(35, 18, 15, 0.1) !important;
  color: var(--cl-ink) !important;
  background: #fffdf7 !important;
}

#owner-view .owner-table th {
  color: var(--cl-teal-dark) !important;
  background: rgba(0, 143, 150, 0.08) !important;
}

#owner-view .owner-table td,
#owner-view .owner-table th {
  border-color: rgba(35, 18, 15, 0.1) !important;
}

#owner-view .owner-inventory-item__visual img,
#owner-view .owner-inventory-item__visual span {
  border-radius: 14px !important;
}

.login-panel {
  max-width: 560px !important;
  margin: 70px auto !important;
  padding: clamp(22px, 4vw, 42px) !important;
}

.assistant-widget {
  border-color: rgba(35, 18, 15, 0.12) !important;
  color: var(--cl-ink) !important;
  background: rgba(255, 253, 247, 0.98) !important;
}

.assistant-widget__header,
.assistant-widget__form {
  border-color: rgba(35, 18, 15, 0.1) !important;
}

.assistant-widget__header strong,
.assistant-message,
.assistant-message--bot,
.assistant-widget__form input {
  color: var(--cl-ink) !important;
}

.assistant-widget__header small {
  color: var(--cl-muted) !important;
}

.assistant-message--bot {
  background: rgba(0, 143, 150, 0.08) !important;
}

.assistant-message--user {
  color: #fffdf7 !important;
  background: var(--cl-teal) !important;
}

@media (max-width: 1180px) {
  .brand-rail {
    grid-template-columns: minmax(260px, 1fr) auto auto !important;
    gap: 12px !important;
  }

  .role-switch--public {
    grid-column: 1 / -1 !important;
    order: 4 !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  .brand-rail {
    height: auto !important;
    min-height: 104px !important;
  }

  .casa-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "copy"
      "media"
      "proof" !important;
  }

  .hero-video {
    display: none !important;
  }

  .hero-media-stack {
    max-width: 760px !important;
  }

  .featured-menu__rail,
  .experience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #customer-view .market-panel,
  #customer-view .customer-grid,
  #staff-view .delivery-grid {
    grid-template-columns: 1fr !important;
  }

  #customer-view .catalog-tools,
  #customer-view .cart-panel,
  #staff-view .queue-panel {
    position: static !important;
    max-height: none !important;
  }

  #customer-view .category-tabs {
    display: flex !important;
    overflow-x: auto !important;
  }

  #customer-view .category-tab {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 760px) {
  .brand-rail {
    grid-template-columns: 1fr auto !important;
    min-height: 0 !important;
    padding: calc(8px + env(safe-area-inset-top)) 10px 10px !important;
    gap: 10px !important;
  }

  .brand-lockup {
    grid-template-columns: 62px minmax(0, 1fr) !important;
  }

  .brand-mark,
  .brand-logo {
    width: 62px !important;
    height: 52px !important;
  }

  .brand-lockup strong {
    font-size: clamp(1.05rem, 5.4vw, 1.45rem) !important;
    line-height: 0.95 !important;
  }

  .brand-lockup small {
    font-size: 0.75rem !important;
  }

  .language-toggle,
  .nav-order-button {
    min-height: 40px !important;
    padding: 0 12px !important;
  }

  .role-switch--public {
    width: 100% !important;
    gap: 4px !important;
    overflow-x: visible !important;
  }

  .role-switch--public .role-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 38px !important;
    justify-content: center !important;
    padding: 0 4px !important;
    font-size: 0.66rem !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .role-switch--public .role-tab span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .casa-hero,
  .featured-menu,
  .experience-grid,
  .chef-story,
  .private-access-panel,
  #customer-view,
  #staff-view,
  #owner-view {
    width: calc(100% - 20px) !important;
  }

  .casa-hero {
    min-height: auto !important;
    padding: 20px !important;
    border-radius: 22px !important;
  }

  .hero-video {
    display: none !important;
  }

  .hero-overlay {
    display: none !important;
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 16vw, 5rem) !important;
  }

  .hero-proof-strip,
  .hero-media-stack,
  .featured-menu__rail,
  .experience-grid,
  .chef-story,
  .menu-board-preview__grid div {
    grid-template-columns: 1fr !important;
  }

  .hero-media-stack figure {
    min-height: 190px !important;
  }

  .featured-dish img {
    height: 190px !important;
  }

  #customer-view,
  #staff-view,
  #owner-view {
    padding-top: 28px !important;
  }

  #customer-view .topbar,
  #staff-view .topbar,
  #owner-view .topbar {
    display: grid !important;
    gap: 14px !important;
  }

  #customer-view .topbar h1,
  #staff-view .topbar h1,
  #owner-view .topbar h1 {
    font-size: clamp(2.2rem, 11vw, 3.5rem) !important;
    line-height: 0.94 !important;
  }

  #customer-view .topbar-actions {
    position: sticky !important;
    top: 134px !important;
    z-index: 85 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    width: 100% !important;
    padding: 8px 0 10px !important;
    background: linear-gradient(180deg, rgba(255, 247, 232, 0.96), rgba(255, 247, 232, 0.7)) !important;
    backdrop-filter: blur(12px) !important;
  }

  #customer-view .market-panel {
    display: block !important;
    padding: 12px !important;
  }

  #customer-view .catalog-tools {
    margin-bottom: 14px !important;
  }

  #customer-view .catalog-list {
    grid-template-columns: 1fr !important;
  }

  #customer-view .catalog-item {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
  }

  #customer-view .product-swatch {
    width: 96px !important;
    height: 92px !important;
  }

  #customer-view .product-actions {
    grid-column: 1 / -1 !important;
  }

  #customer-view .cart-panel {
    position: fixed !important;
    inset: auto 10px max(10px, env(safe-area-inset-bottom)) 10px !important;
    z-index: 2147481200 !important;
    max-height: min(78svh, 680px) !important;
  }

  #customer-view .orders-workspace {
    grid-template-columns: 1fr !important;
  }

  #customer-view .tracker-map-stage {
    padding: 8px !important;
    border-radius: 14px !important;
  }

  #customer-view .tracker-map-toolbar {
    inset: 18px 18px auto auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    max-width: calc(100% - 76px) !important;
  }

  #customer-view .tracker-map-toolbar .status-pill,
  #customer-view .tracker-map-toolbar .secondary-button {
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 0.82rem !important;
  }

  #customer-view .tracker-map,
  #customer-view .tracker-map.leaflet-container,
  #customer-view .tracker-map--focused,
  #customer-view .tracker-map--focused.leaflet-container {
    height: clamp(300px, 45svh, 390px) !important;
    min-height: 300px !important;
    max-height: 390px !important;
    border-radius: 12px !important;
  }

  #owner-view .owner-metrics {
    grid-template-columns: 1fr !important;
  }

  #owner-view .topbar-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  #owner-view .topbar-actions .ghost-button {
    width: 100% !important;
  }

  #owner-view .owner-report {
    padding: 14px !important;
    overflow: hidden !important;
  }

  #owner-view .owner-mode-switch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  #owner-view .owner-inventory-card,
  #owner-view .owner-inventory-add,
  #owner-view .owner-inventory-list,
  #owner-view .owner-inventory-item,
  #owner-view .owner-inventory-item__fields,
  #owner-view .owner-inventory-item__actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #owner-view .owner-inventory-card > .owner-insight-card__header,
  #owner-view .owner-inventory-add,
  #owner-view .owner-inventory-item {
    padding: 14px !important;
  }

  #owner-view .owner-inventory-add,
  #owner-view .owner-inventory-item,
  #owner-view .owner-inventory-item__fields,
  #owner-view .owner-inventory-item__actions {
    grid-template-columns: 1fr !important;
  }

  #owner-view .owner-inventory-item__visual {
    width: 100% !important;
    min-height: 150px !important;
  }

  #owner-view .owner-inventory-item__visual img,
  #owner-view .owner-inventory-item__visual span {
    width: 100% !important;
    height: 100% !important;
  }

  #owner-view .owner-inventory-add .primary-button,
  #owner-view .owner-inventory-item__actions .primary-button,
  #owner-view .owner-inventory-item__actions button,
  #owner-view .inventory-toggle {
    width: 100% !important;
  }
}

@media (max-width: 430px) {
  .brand-lockup strong {
    font-size: 1.02rem !important;
  }

  #customer-view .catalog-item {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  #customer-view .product-swatch {
    width: 82px !important;
    height: 82px !important;
  }
}