:root {  color-scheme: light;  --ink: #122927;  --muted: #657a78;  --soft: #f5efe0;  --surface: #fffaf0;  --surface-strong: #ffffff;  --line: #e4d9c2;  --green: #008f8c;  --green-strong: #073b3a;  --coral: #ff6b4a;  --gold: #f2c14e;  --blue: #146c94;  --shadow: 0 18px 42px rgba(19, 52, 50, 0.14);  --radius: 8px;  font-family:    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",    sans-serif;}
* {  box-sizing: border-box;}
html {  min-height: 100%;  background: var(--soft);  -webkit-text-size-adjust: 100%;}
body {  min-height: 100svh;  margin: 0;  color: var(--ink);  overflow-x: hidden;  background:    linear-gradient(180deg, rgba(255, 250, 240, 0.86), rgba(245, 239, 224, 0.92)),    var(--soft);  letter-spacing: 0;}
body.is-transitioning {  overflow: hidden;}
button,input,textarea,select {  font: inherit;  letter-spacing: 0;}
button,a,select {  -webkit-tap-highlight-color: transparent;}
button {  border: 0;  cursor: pointer;  touch-action: manipulation;}
button:disabled {  cursor: not-allowed;  opacity: 0.58;}
a {  color: inherit;  text-decoration: none;}
@media (prefers-reduced-motion: no-preference) {  html {    scroll-behavior: smooth;  }
}
svg {  width: 20px;  height: 20px;  fill: none;  stroke: currentColor;  stroke-linecap: round;  stroke-linejoin: round;  stroke-width: 1.8;}
.app-shell {  display: grid;  grid-template-columns: 288px minmax(0, 1fr);  min-height: 100svh;}
.brand-rail {  position: sticky;  top: 0;  display: flex;  flex-direction: column;  gap: 22px;  height: 100svh;  overflow-y: auto;  padding: 22px;  color: #f8fff9;  background:    linear-gradient(180deg, #073b3a 0%, #082f34 58%, #102927 100%);}
.brand-lockup {  display: flex;  align-items: center;  gap: 12px;}
.brand-mark {  position: relative;  display: block;  width: 126px;  height: 58px;  border: 0;  border-radius: 8px;  overflow: hidden;  padding: 0;  background: transparent;}
.brand-mark img,.brand-mark svg {  display: block;  position: absolute;  inset: 0;  width: 100%;  height: 100%;  object-fit: contain;}
.brand-logo {  object-fit: contain;  object-position: center;}
.brand-lockup strong,.brand-lockup small {  display: block;}
.brand-lockup strong {  font-size: 1.08rem;}
.brand-lockup small {  margin-top: 2px;  color: rgba(248, 255, 249, 0.68);}
.role-switch {  display: grid;  gap: 8px;}
.admin-menu {  margin-top: 0;  padding-top: 12px;  border-top: 1px solid rgba(255, 255, 255, 0.12);}
.admin-menu summary {  display: inline-flex;  align-items: center;  gap: 7px;  min-height: 34px;  width: fit-content;  max-width: 100%;  padding: 0 9px;  border: 1px solid rgba(255, 255, 255, 0.14);  border-radius: 8px;  color: rgba(248, 255, 249, 0.62);  background: rgba(255, 255, 255, 0.06);  font-size: 0.78rem;  font-weight: 800;  list-style: none;  cursor: pointer;  transition:    color 160ms ease,    background 160ms ease,    transform 160ms ease;}
.admin-menu summary::-webkit-details-marker {  display: none;}
.admin-menu summary:hover {  color: #ffffff;  background: rgba(255, 255, 255, 0.1);  transform: translateY(-1px);}
.admin-menu summary svg {  width: 15px;  height: 15px;  transition: transform 160ms ease;}
.admin-menu[open] summary svg {  transform: rotate(180deg);}
.role-switch--private {  display: grid;  gap: 7px;  margin-top: 8px;}
.role-switch--private .role-tab {  min-height: 40px;  color: rgba(248, 255, 249, 0.62);  font-size: 0.92rem;}
.role-switch--private .tab-icon {  width: 28px;  height: 28px;}
.language-toggle {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 8px;  width: fit-content;  min-height: 40px;  padding: 0 12px;  border: 1px solid rgba(255, 255, 255, 0.18);  border-radius: 8px;  color: #ffffff;  background: rgba(255, 255, 255, 0.08);  font-weight: 800;  transition:    background 160ms ease,    transform 160ms ease;}
.language-toggle:hover {  background: rgba(255, 255, 255, 0.14);  transform: translateY(-1px);}
.role-tab {  display: flex;  align-items: center;  gap: 10px;  min-height: 44px;  padding: 9px 10px;  border-radius: 8px;  color: rgba(248, 255, 249, 0.72);  transition:    color 160ms ease,    background 160ms ease,    transform 160ms ease;}
.role-tab:hover,.role-tab.is-active {  color: #ffffff;  background: rgba(255, 255, 255, 0.1);  transform: translateX(2px);}
.tab-icon {  display: grid;  width: 30px;  height: 30px;  place-items: center;  border-radius: 8px;  background: rgba(255, 255, 255, 0.08);}
.store-visual {  position: relative;  min-height: 270px;  margin-top: auto;  overflow: hidden;  border-radius: 8px;  background:    linear-gradient(180deg, rgba(7, 59, 58, 0.1), rgba(7, 59, 58, 0.66)),    url("assets/oldharbour3.jpg?v=20260513");  background-position: center;  background-size: cover;  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);}
.store-visual div {  position: absolute;  right: 14px;  bottom: 14px;  left: 14px;}
.store-visual span,.store-visual strong {  display: block;}
.store-visual span {  color: rgba(248, 255, 249, 0.74);  font-size: 0.86rem;}
.store-visual strong {  margin-top: 4px;  color: #ffffff;  font-size: 1.32rem;}
.store-meta {  display: grid;  gap: 10px;  color: rgba(248, 255, 249, 0.72);  font-size: 0.92rem;  line-height: 1.45;}
.store-meta p {  margin: 0;}
.store-meta a {  width: fit-content;  color: #ffffff;  font-weight: 700;}
.workspace {  min-width: 0;  padding:    max(22px, env(safe-area-inset-top))    max(22px, env(safe-area-inset-right))    max(22px, env(safe-area-inset-bottom))    max(22px, env(safe-area-inset-left));}
.view {  display: none;  min-height: calc(100svh - 44px);  animation: surfaceIn 280ms ease both;}
.view.is-active {  display: block;}
[hidden] {  display: none !important;}
@keyframes surfaceIn {  from {    opacity: 0;    transform: translateY(8px);  }
  to {    opacity: 1;    transform: translateY(0);  }
}
.view.is-view-entering .hero-panel,.view.is-view-entering .promo-band,.view.is-view-entering .market-panel,.view.is-view-entering .cart-panel,.view.is-view-entering .tracker-panel,.view.is-view-entering .queue-panel,.view.is-view-entering .delivery-detail,.view.is-view-entering .owner-report {  animation: polishedPanelIn 520ms cubic-bezier(0.2, 0.82, 0.2, 1) both;}
.view.is-view-entering .cart-panel,.view.is-view-entering .delivery-detail,.view.is-view-entering .owner-report {  animation-delay: 70ms;}
@keyframes polishedPanelIn {  from {    opacity: 0;    transform: translateY(14px) scale(0.992);    filter: blur(4px);  }
  to {    opacity: 1;    transform: translateY(0) scale(1);    filter: blur(0);  }
}
.topbar {  display: flex;  align-items: flex-start;  justify-content: space-between;  gap: 18px;  margin-bottom: 18px;}
.topbar h1,.panel-heading h2,.queue-summary h2 {  margin: 2px 0 0;}
.topbar h1 {  max-width: 680px;  font-size: 2.55rem;  line-height: 1.02;}
.panel-heading h2,.queue-summary h2 {  font-size: 1.18rem;}
.eyebrow {  margin: 0;  color: var(--green);  font-size: 0.74rem;  font-weight: 800;  text-transform: uppercase;}
.topbar-actions {  display: flex;  align-items: center;  gap: 10px;  flex-wrap: wrap;  justify-content: flex-end;}
.promo-view {  position: relative;  min-height: calc(100svh - 44px);}
.home-orb {  display: none;}
.home-orb--one {  top: 8vh;  right: 7vw;  width: 24vw;  min-width: 240px;  height: 24vw;  min-height: 240px;  background: rgba(15, 122, 79, 0.18);  animation: homeOrbDrift 14s ease-in-out infinite alternate;}
.home-orb--two {  bottom: 4vh;  left: 25vw;  width: 18vw;  min-width: 180px;  height: 18vw;  min-height: 180px;  background: rgba(40, 111, 143, 0.14);  animation: homeOrbDrift 16s ease-in-out infinite alternate-reverse;}
.hero-panel {  position: relative;  display: grid;  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr);  gap: clamp(24px, 4vw, 56px);  min-height: min(780px, calc(100svh - 44px));  align-items: center;  overflow: hidden;  padding: clamp(22px, 4vw, 48px);  border-radius: 8px;  color: #ffffff;  background:    linear-gradient(145deg, rgba(7, 59, 58, 0.98), rgba(0, 143, 140, 0.94) 58%, rgba(20, 108, 148, 0.9)),    linear-gradient(25deg, transparent 0 58%, rgba(242, 193, 78, 0.42) 58% 66%, transparent 66%),    linear-gradient(150deg, transparent 0 72%, rgba(255, 107, 74, 0.34) 72% 80%, transparent 80%);  box-shadow: var(--shadow);  animation: homeReveal 760ms cubic-bezier(0.2, 0.82, 0.2, 1) both;}
.hero-panel::before {  position: absolute;  inset: 18px;  pointer-events: none;  border: 1px solid rgba(219, 238, 228, 0.2);  border-radius: 8px;  content: "";}
.hero-panel::after {  position: absolute;  right: -8rem;  bottom: -10rem;  width: 24rem;  height: 24rem;  border-radius: 50%;  background: rgba(242, 193, 78, 0.24);  filter: blur(8px);  content: "";}
.hero-copy {  position: relative;  z-index: 1;  width: min(680px, 100%);  padding: 0;  animation: homeTextRise 780ms cubic-bezier(0.2, 0.82, 0.2, 1) 120ms both;}
.hero-copy .eyebrow {  width: fit-content;  padding: 8px 10px;  border: 1px solid rgba(219, 238, 228, 0.22);  border-radius: 999px;  color: #dbeee4;  background: rgba(255, 255, 255, 0.08);}
.hero-copy h1 {  margin: 18px 0 18px;  max-width: 8ch;  font-size: 5.75rem;  line-height: 0.92;  letter-spacing: 0;}
.hero-copy p {  max-width: 520px;  margin: 0;  color: rgba(255, 255, 255, 0.8);  font-size: 1.1rem;  line-height: 1.62;}
.hero-actions {  display: flex;  gap: 10px;  flex-wrap: wrap;  margin-top: 24px;}
.hero-actions .secondary-button {  border-color: rgba(255, 255, 255, 0.36);  color: #ffffff;  background: rgba(255, 255, 255, 0.1);  backdrop-filter: blur(12px);}
.hero-market-board {  position: relative;  z-index: 1;  min-height: 560px;}
.hero-photo {  position: absolute;  margin: 0;  overflow: hidden;  border: 1px solid rgba(255, 255, 255, 0.16);  background: #0c1913;  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);  animation: homePhotoFloat 7s ease-in-out infinite alternate;}
.hero-photo img,.market-intro__photo img {  display: block;  width: 100%;  height: 100%;  object-fit: cover;  color: transparent;  font-size: 0;  line-height: 0;}
.hero-photo.is-image-missing,.market-intro__photo.is-image-missing {  display: grid;  place-items: center;  background:    radial-gradient(circle at 80% 18%, rgba(76, 176, 136, 0.26), transparent 13rem),    linear-gradient(145deg, #0c2f26, #165941);}
.hero-photo.is-image-missing::before,.market-intro__photo.is-image-missing::before {  content: "Old Harbour";  color: #e6f5ef;  font-size: 1.65rem;  font-weight: 800;  letter-spacing: 0;}
.hero-photo figcaption {  position: absolute;  right: 12px;  bottom: 12px;  left: 12px;  padding: 10px 12px;  border-radius: 8px;  color: rgba(255, 255, 255, 0.86);  background: rgba(12, 25, 19, 0.72);  font-size: 0.82rem;  line-height: 1.3;  backdrop-filter: blur(12px);}
.hero-photo--main {  top: 0;  right: 0;  width: min(100%, 500px);  height: 390px;  border-radius: 8px;  z-index: 1;}
.hero-photo--float {  right: clamp(28px, 6vw, 86px);  bottom: 0;  width: min(68%, 320px);  height: 240px;  border-radius: 8px;  animation-delay: 900ms;  z-index: 2;}
.hero-photo--main figcaption {  top: 12px;  right: 12px;  bottom: auto;  left: 12px;  max-width: min(88%, 360px);}
.hero-photo--float figcaption {  right: 12px;  bottom: 12px;  left: 12px;}
.hero-proof-strip {  position: relative;  right: auto;  bottom: auto;  left: auto;  z-index: 2;  display: grid;  grid-column: 1 / -1;  grid-template-columns: repeat(3, minmax(0, 1fr));  gap: 1px;  margin-top: 14px;  overflow: hidden;  border: 1px solid rgba(255, 255, 255, 0.14);  border-radius: 8px;  background: rgba(255, 255, 255, 0.14);  backdrop-filter: blur(16px);  animation: homeTextRise 760ms cubic-bezier(0.2, 0.82, 0.2, 1) 260ms both;}
.hero-proof-strip div {  display: grid;  gap: 3px;  min-height: 72px;  align-content: center;  padding: 12px 16px;  background: rgba(8, 25, 19, 0.36);}
.hero-proof-strip strong {  color: #dbeee4;  font-size: 1.35rem;  line-height: 1;}
.hero-proof-strip span {  color: rgba(255, 255, 255, 0.74);  font-size: 0.82rem;}
.home-marquee {  position: relative;  margin-top: 18px;  overflow: hidden;  border: 1px solid rgba(7, 92, 59, 0.12);  border-radius: 999px;  background: rgba(255, 255, 255, 0.72);  box-shadow: 0 14px 30px rgba(16, 32, 26, 0.08);}
.home-marquee::before,.home-marquee::after {  position: absolute;  top: 0;  bottom: 0;  z-index: 1;  width: 12%;  content: "";  pointer-events: none;}
.home-marquee::before {  left: 0;  background: linear-gradient(90deg, var(--soft), transparent);}
.home-marquee::after {  right: 0;  background: linear-gradient(270deg, var(--soft), transparent);}
.home-marquee__track {  display: flex;  width: max-content;  gap: clamp(28px, 5vw, 72px);  padding: 14px 24px;  color: var(--green-strong);  font-size: 1rem;  font-weight: 900;  text-transform: uppercase;  letter-spacing: 0.08em;  animation: homeMarquee 26s linear infinite;}
.home-marquee__track span {  position: relative;}
.home-marquee__track span::after {  position: absolute;  top: 50%;  right: calc(-1 * clamp(18px, 3vw, 42px));  width: 8px;  height: 8px;  border-radius: 50%;  background: var(--gold);  content: "";  transform: translateY(-50%);}
.market-intro,.review-dossier {  display: grid;  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.62fr);  gap: clamp(20px, 3vw, 34px);  margin-top: 20px;}
.market-intro {  align-items: stretch;}
.market-intro__copy,.review-dossier__heading {  padding: clamp(24px, 4vw, 44px);  border: 1px solid var(--line);  border-radius: 8px;  background:    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(238, 243, 239, 0.92)),    var(--surface);  box-shadow: var(--shadow);}
.market-intro__copy h2,.review-dossier__heading h2 {  max-width: 760px;  margin: 10px 0 14px;  font-size: 3rem;  line-height: 1.04;  letter-spacing: 0;  overflow-wrap: anywhere;}
.market-intro__copy p:last-child,.review-dossier__heading p:last-child {  max-width: 650px;  margin: 0;  color: var(--muted);  font-size: 1.04rem;  line-height: 1.65;}
.market-intro__photo {  min-height: 360px;  overflow: hidden;  border: 1px solid var(--line);  border-radius: 8px;  box-shadow: var(--shadow);}
.review-showcase {  display: grid;  grid-template-columns: minmax(0, 0.72fr) minmax(420px, 1fr);  gap: clamp(20px, 3vw, 34px);  align-items: stretch;  margin-top: 20px;}
.review-showcase__heading {  position: relative;  overflow: hidden;  padding: clamp(24px, 4vw, 46px);  border-radius: 8px;  color: #ffffff;  background:    linear-gradient(180deg, rgba(7, 59, 58, 0.1), rgba(7, 59, 58, 0.8)),    url("assets/oldharbour3.jpg?v=20260513");  background-position: center;  background-size: cover;  box-shadow: var(--shadow);}
.review-showcase__heading::after {  position: absolute;  right: -14%;  bottom: -28%;  width: 260px;  height: 260px;  border-radius: 999px;  background: rgba(15, 122, 79, 0.22);  content: "";}
.review-showcase__heading .eyebrow {  color: #dbeee4;}
.review-showcase__heading h2 {  position: relative;  z-index: 1;  margin: 12px 0 14px;  font-size: 2.75rem;  line-height: 1.05;  letter-spacing: 0;  overflow-wrap: anywhere;}
.review-showcase__heading p {  position: relative;  z-index: 1;  max-width: 520px;  margin: 0;  color: rgba(255, 255, 255, 0.8);  line-height: 1.65;}
.review-lane {  display: grid;  grid-template-columns: 1.08fr 0.92fr;  gap: 14px;}
.review-card {  position: relative;  display: grid;  gap: 18px;  align-content: space-between;  min-height: 236px;  overflow: hidden;  padding: clamp(22px, 3vw, 32px);  border: 1px solid rgba(7, 92, 59, 0.13);  border-radius: 8px;  background:    radial-gradient(circle at top right, rgba(15, 122, 79, 0.18), transparent 12rem),    rgba(255, 255, 255, 0.92);  box-shadow: 0 18px 42px rgba(16, 32, 26, 0.1);  min-width: 0;}
.review-card--featured {  grid-row: span 2;  min-height: 486px;  color: #ffffff;  background:    radial-gradient(circle at 90% 8%, rgba(15, 122, 79, 0.3), transparent 14rem),    linear-gradient(145deg, #0a1e17, #0f4a36);}
.review-card__stars {  color: var(--gold);  font-size: 1rem;  letter-spacing: 0.16em;}
.review-card blockquote {  margin: 0;  color: var(--ink);  font-size: 1.45rem;  font-weight: 900;  line-height: 1.14;  letter-spacing: 0;  overflow-wrap: anywhere;  word-break: normal;}
.review-card--featured blockquote {  color: #ffffff;  font-size: 2.12rem;  line-height: 1.12;  max-width: 100%;}
.review-card footer {  display: grid;  gap: 3px;}
.review-card footer strong {  font-size: 1rem;}
.review-card footer span {  color: var(--muted);  font-size: 0.9rem;}
.review-card--featured footer span {  color: rgba(255, 255, 255, 0.66);}
.delivery-story {  display: grid;  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1fr);  gap: clamp(20px, 3vw, 34px);  align-items: stretch;  margin-top: 20px;  margin-bottom: 10px;}
.delivery-story__media {  min-height: 480px;  overflow: hidden;  border-radius: 8px;  box-shadow: var(--shadow);}
.delivery-story__media img {  display: block;  width: 100%;  height: 100%;  object-fit: cover;}
.delivery-story__panel {  display: grid;  gap: 22px;  align-content: center;  padding: clamp(24px, 4vw, 48px);  border-radius: 8px;  background:    radial-gradient(circle at top right, rgba(15, 122, 79, 0.18), transparent 18rem),    #ffffff;  box-shadow: var(--shadow);}
.delivery-story__panel h2 {  margin: 0;  max-width: 680px;  font-size: 3.8rem;  line-height: 0.98;  letter-spacing: 0;}
.delivery-story__steps {  display: grid;  gap: 12px;}
.delivery-story__steps div {  display: grid;  grid-template-columns: auto minmax(0, 1fr);  gap: 14px;  align-items: start;  padding: 14px;  border: 1px solid rgba(7, 92, 59, 0.14);  border-radius: 8px;  background: rgba(238, 243, 239, 0.76);}
.delivery-story__steps span {  display: grid;  width: 42px;  height: 42px;  place-items: center;  border-radius: 999px;  color: #ffffff;  background: var(--green-strong);  font-size: 0.82rem;  font-weight: 900;}
.delivery-story__steps p {  margin: 0;  color: var(--muted);  line-height: 1.55;}
.home-reveal {  --reveal-x: 0px;  --reveal-y: 42px;  --reveal-scale: 0.98;  --reveal-rotate: 0deg;  --reveal-delay: 0ms;  transform-origin: 50% 56%;}
.home-reveal.is-reveal-ready {  opacity: 0;  filter: blur(12px);  transform:    translate3d(var(--reveal-x), var(--reveal-y), 0)    scale(var(--reveal-scale))    rotate(var(--reveal-rotate));  transition:    opacity 780ms cubic-bezier(0.2, 0.82, 0.2, 1),    filter 900ms cubic-bezier(0.2, 0.82, 0.2, 1),    transform 900ms cubic-bezier(0.18, 0.9, 0.2, 1);  transition-delay: var(--reveal-delay);  will-change: opacity, filter, transform;}
.home-reveal.is-visible {  opacity: 1;  filter: blur(0);  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);}
.home-reveal[data-reveal="left"] {  --reveal-x: -58px;  --reveal-y: 16px;  --reveal-rotate: -1.4deg;}
.home-reveal[data-reveal="right"] {  --reveal-x: 58px;  --reveal-y: 18px;  --reveal-rotate: 1.6deg;}
.home-reveal[data-reveal="zoom"] {  --reveal-y: 26px;  --reveal-scale: 0.92;}
.home-reveal[data-reveal="split"] {  --reveal-x: -26px;  --reveal-y: 34px;  --reveal-scale: 0.96;}
.home-reveal[data-reveal="tide"] {  --reveal-x: 32px;  --reveal-y: 52px;  --reveal-rotate: 0.8deg;}
.home-reveal[data-reveal="wave"] {  --reveal-x: -34px;  --reveal-y: 18px;  --reveal-scale: 0.99;}
@keyframes homeReveal {  from {    opacity: 0;    transform: translateY(18px) scale(0.99);  }
  to {    opacity: 1;    transform: translateY(0) scale(1);  }
}
@keyframes homeTextRise {  from {    opacity: 0;    transform: translateY(20px);  }
  to {    opacity: 1;    transform: translateY(0);  }
}
@keyframes homePhotoFloat {  from {    transform: translateY(0) rotate(-0.5deg);  }
  to {    transform: translateY(-10px) rotate(0.7deg);  }
}
@keyframes homeMarquee {  from {    transform: translateX(0);  }
  to {    transform: translateX(-50%);  }
}
@keyframes homeOrbDrift {  from {    transform: translate3d(0, 0, 0) scale(1);  }
  to {    transform: translate3d(18px, -22px, 0) scale(1.08);  }
}
.promo-band {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 1px;  margin-top: 18px;  overflow: hidden;  border: 1px solid var(--line);  border-radius: 8px;  background: var(--line);  box-shadow: var(--shadow);}
.promo-band div {  min-height: 190px;  padding: 22px;  background: rgba(255, 255, 255, 0.84);}
.promo-band h2 {  margin: 6px 0 10px;  font-size: 2rem;  line-height: 1;}
.promo-band p {  margin: 0;  color: var(--muted);  line-height: 1.5;}
.primary-button,.secondary-button,.ghost-button,.icon-button,.text-button {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 8px;  min-height: 42px;  border-radius: 8px;  font-weight: 800;  transition:    background 160ms ease,    border-color 160ms ease,    color 160ms ease,    transform 160ms ease,    box-shadow 200ms ease,    filter 180ms ease;}
.primary-button {  padding: 0 16px;  color: #ffffff;  background: var(--green);  box-shadow: 0 10px 24px rgba(15, 122, 79, 0.22);}
.primary-button:hover {  background: var(--green-strong);  transform: translateY(-1px);}
.primary-button span:last-child {  display: grid;  min-width: 24px;  height: 24px;  place-items: center;  border-radius: 999px;  color: var(--green-strong);  background: #ffffff;  font-size: 0.82rem;}
.secondary-button,.ghost-button,.icon-button {  border: 1px solid var(--line);  color: var(--ink);  background: var(--surface-strong);}
.secondary-button {  padding: 0 14px;}
.secondary-button.is-live {  color: var(--green-strong);  border-color: rgba(15, 122, 79, 0.34);  background: rgba(15, 122, 79, 0.08);}
.ghost-button {  padding: 0 12px;  color: var(--muted);}
.icon-button {  width: 42px;  padding: 0;}
.secondary-button:hover,.ghost-button:hover,.icon-button:hover {  border-color: rgba(15, 122, 79, 0.34);  color: var(--green-strong);  transform: translateY(-1px);  box-shadow: 0 10px 18px rgba(16, 32, 26, 0.12);}
.primary-button,.secondary-button,.ghost-button,.icon-button,.text-button,.role-tab,.mode-chip,.category-tab,.order-card,.customer-order-card,.map-float-button {  position: relative;  overflow: hidden;}
.primary-button::after,.secondary-button::after,.ghost-button::after,.icon-button::after,.text-button::after,.role-tab::after,.mode-chip::after,.category-tab::after,.order-card::after,.customer-order-card::after,.map-float-button::after {  content: "";  position: absolute;  left: var(--tap-x, 50%);  top: var(--tap-y, 50%);  width: 12px;  height: 12px;  border-radius: 999px;  pointer-events: none;  opacity: 0;  background: rgba(255, 255, 255, 0.34);  transform: translate(-50%, -50%) scale(0.2);}
.secondary-button::after,.ghost-button::after,.icon-button::after,.text-button::after,.role-tab::after,.mode-chip::after,.category-tab::after,.order-card::after,.customer-order-card::after {  background: rgba(15, 122, 79, 0.2);}
.tap-ripple::after {  animation: tapRipple 420ms ease-out both;}
.text-button {  min-height: 34px;  padding: 0;  color: var(--coral);  background: transparent;}
.full-width {  width: 100%;}
.customer-grid,.delivery-grid {  display: grid;  align-items: start;  gap: 18px;  transition: grid-template-columns 280ms ease;}
.customer-grid {  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);}
.customer-main {  display: grid;  gap: 18px;}
.customer-stage-bar {  display: flex;  align-items: center;  justify-content: space-between;  gap: 12px;}
.customer-mode-switch {  display: inline-grid;  grid-auto-flow: column;  gap: 8px;  padding: 6px;  border: 1px solid var(--line);  border-radius: 10px;  background: rgba(255, 255, 255, 0.86);  box-shadow: var(--shadow);}
.mode-chip {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 8px;  min-height: 40px;  padding: 0 14px;  border-radius: 8px;  color: var(--muted);  font-weight: 800;  background: transparent;}
.mode-chip span:last-child {  display: inline-grid;  min-width: 22px;  height: 22px;  place-items: center;  border-radius: 999px;  background: rgba(17, 24, 39, 0.08);  color: var(--ink);  font-size: 0.78rem;}
.mode-chip.is-active {  color: #ffffff;  background: var(--green);  box-shadow: 0 10px 24px rgba(15, 122, 79, 0.2);}
.mode-chip.is-active span:last-child {  background: rgba(255, 255, 255, 0.18);  color: #ffffff;}
.customer-stage {  display: grid;  gap: 18px;}
.customer-grid.is-orders-mode {  grid-template-columns: 1fr;}
.shop-order-banner {  border: 1px solid var(--line);  border-radius: var(--radius);  background:    linear-gradient(90deg, rgba(15, 122, 79, 0.08), rgba(40, 111, 143, 0.03)),    rgba(255, 255, 255, 0.84);  box-shadow: var(--shadow);}
.shop-order-banner__content {  display: flex;  align-items: center;  justify-content: space-between;  gap: 18px;  padding: 18px;}
.shop-order-banner h2 {  margin: 4px 0 6px;  font-size: 1.8rem;}
.shop-order-banner p {  margin: 0;  color: var(--muted);}
.shop-order-banner__actions {  display: grid;  justify-items: end;  gap: 10px;}
.orders-workspace {  display: grid;  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);  gap: 18px;  align-items: start;}
.orders-list-panel {  border: 1px solid var(--line);  border-radius: var(--radius);  background: rgba(255, 255, 255, 0.82);  box-shadow: var(--shadow);  overflow: hidden;}
.customer-orders-list {  display: grid;}
.customer-orders-empty h3 {  margin: 4px 0 0;  font-size: 1.1rem;}
.customer-order-card {  display: grid;  gap: 10px;  padding: 16px;  border-bottom: 1px solid var(--line);  text-align: left;  background: transparent;  transition:    background 160ms ease,    transform 160ms ease;}
.customer-order-card:hover {  background: rgba(15, 122, 79, 0.04);}
.customer-order-card.is-selected {  background: rgba(15, 122, 79, 0.08);}
.customer-order-card__header,.customer-order-card__meta {  display: flex;  align-items: center;  justify-content: space-between;  gap: 10px;}
.customer-order-card__meta {  color: var(--muted);  font-size: 0.86rem;}
.customer-order-card p {  margin: 0;  color: var(--muted);  font-size: 0.9rem;  line-height: 1.45;}
.orders-detail-panel {  min-height: 680px;}
.delivery-grid {  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);}
.delivery-grid.is-route-focus {  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);}
.market-panel,.cart-panel,.tracker-panel,.queue-panel,.delivery-detail {  border: 1px solid var(--line);  border-radius: var(--radius);  background: rgba(255, 255, 255, 0.82);  box-shadow: var(--shadow);}
.market-panel,.queue-panel,.delivery-detail {  min-height: 680px;}
.queue-panel {  position: sticky;  top: 22px;  display: grid;  grid-template-rows: auto minmax(0, 1fr);  max-height: calc(100svh - 44px);  overflow: hidden;}
.delivery-grid.is-route-focus .queue-panel {  box-shadow: 0 12px 24px rgba(21, 44, 35, 0.08);}
.owner-gate-page {  display: grid;  min-height: calc(100svh - 44px);  place-items: center;  padding: 24px;}
.owner-report {  margin-top: 0;  overflow: hidden;  border: 1px solid var(--line);  border-radius: var(--radius);  background: rgba(255, 255, 255, 0.86);  box-shadow: var(--shadow);  contain: layout paint;}
.owner-mode-switch {  display: flex;  gap: 8px;  padding: 14px;  border-bottom: 1px solid var(--line);  background:    linear-gradient(90deg, rgba(15, 122, 79, 0.08), rgba(40, 111, 143, 0.06)),    rgba(255, 255, 255, 0.9);}
.owner-mode-switch .mode-chip {  border: 1px solid transparent;}
.owner-mode-switch .mode-chip.is-active {  color: #ffffff;  background: var(--green);  box-shadow: 0 10px 22px rgba(15, 122, 79, 0.18);}
.owner-mode-panel.is-hidden {  display: none;}
.owner-period-card {  display: grid;  grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.4fr) auto;  gap: 14px;  align-items: center;  padding: 16px;  border-bottom: 1px solid var(--line);  background:    radial-gradient(circle at top right, rgba(228, 172, 63, 0.14), transparent 14rem),    rgba(255, 255, 255, 0.92);}
.owner-period-card__copy h3,.owner-period-history__header h3,.owner-period-detail h4 {  margin: 4px 0 0;}
.owner-period-card__copy p:not(.eyebrow) {  margin: 6px 0 0;  color: var(--muted);  line-height: 1.45;}
.owner-period-summary,.owner-period-detail__metrics {  display: grid;  grid-template-columns: repeat(3, minmax(0, 1fr));  gap: 1px;  overflow: hidden;  border: 1px solid var(--line);  border-radius: 8px;  background: var(--line);}
.owner-period-summary div {  min-height: 78px;  padding: 12px;  background: rgba(255, 255, 255, 0.9);}
.owner-period-summary span {  display: block;  color: var(--muted);  font-size: 0.72rem;  font-weight: 900;  text-transform: uppercase;}
.owner-period-summary strong {  display: block;  margin-top: 8px;  font-size: 1.08rem;  line-height: 1.12;}
.owner-period-actions {  display: flex;  justify-content: flex-end;}
.owner-period-history {  display: grid;  gap: 14px;  padding: 16px;  border-bottom: 1px solid var(--line);}
.owner-period-history__header {  display: flex;  align-items: start;  justify-content: space-between;  gap: 12px;}
.owner-period-list {  display: grid;  gap: 8px;}
.owner-period-row {  display: grid;  grid-template-columns: minmax(0, 1.2fr) auto auto;  gap: 10px;  align-items: center;  width: 100%;  padding: 12px;  border: 1px solid var(--line);  border-radius: 8px;  color: inherit;  text-align: left;  background: #ffffff;  transition:    transform 160ms ease,    border-color 160ms ease,    box-shadow 160ms ease,    background 160ms ease;}
.owner-period-row:hover,.owner-period-row.is-selected {  transform: translateY(-1px);  border-color: rgba(15, 122, 79, 0.38);  background: rgba(15, 122, 79, 0.06);  box-shadow: 0 12px 22px rgba(16, 32, 26, 0.08);}
.owner-period-row span {  color: var(--muted);  font-size: 0.86rem;  font-weight: 800;}
.owner-period-detail {  display: grid;  gap: 14px;  padding: 14px;  border: 1px solid rgba(15, 122, 79, 0.16);  border-radius: 8px;  background: rgba(238, 247, 242, 0.72);}
.owner-period-detail__grid {  display: grid;  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);  gap: 14px;}
.owner-product-row--static {  cursor: default;}
.owner-product-row--static:hover {  transform: none;}
.owner-table-wrap--compact {  padding: 0;  overflow-x: auto;}
.owner-table--compact {  min-width: 560px;}
.owner-period-orders {  display: grid;  gap: 8px;}
.owner-period-order {  overflow: hidden;  border: 1px solid var(--line);  border-radius: 8px;  background: #ffffff;}
.owner-period-order summary {  display: grid;  grid-template-columns: minmax(150px, 1fr) minmax(110px, 0.8fr) auto auto;  gap: 10px;  align-items: center;  padding: 12px;  cursor: pointer;  list-style: none;}
.owner-period-order summary::-webkit-details-marker {  display: none;}
.owner-period-order summary span,.owner-period-order summary small,.owner-period-order__meta span,.owner-period-order__delivery span,.owner-period-order__item small {  color: var(--muted);}
.owner-period-order summary small,.owner-period-order__item small {  display: block;  margin-top: 2px;  font-size: 0.76rem;}
.owner-period-order[open] summary {  border-bottom: 1px solid var(--line);  background: rgba(15, 122, 79, 0.05);}
.owner-period-order__body {  display: grid;  gap: 12px;  padding: 12px;}
.owner-period-order__meta {  display: grid;  grid-template-columns: repeat(4, minmax(0, 1fr));  gap: 8px;}
.owner-period-order__meta div,.owner-period-order__delivery {  padding: 10px;  border: 1px solid var(--line);  border-radius: 8px;  background: rgba(251, 252, 250, 0.92);}
.owner-period-order__meta span,.owner-period-order__delivery span {  display: block;  font-size: 0.72rem;  font-weight: 900;  text-transform: uppercase;}
.owner-period-order__delivery p {  margin: 6px 0 0;}
.owner-period-order__items {  display: grid;  gap: 6px;}
.owner-period-order__item {  display: grid;  grid-template-columns: minmax(0, 1fr) auto auto auto;  gap: 10px;  align-items: center;  padding: 9px 10px;  border-radius: 8px;  background: rgba(238, 247, 242, 0.65);}
.owner-metrics {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));  gap: 1px;  background: var(--line);}
.owner-metric {  min-height: 104px;  padding: 16px;  background: rgba(255, 255, 255, 0.92);  transition:    background 180ms ease,    transform 180ms ease;}
.owner-metric:hover {  background: #ffffff;  transform: translateY(-1px);}
.owner-metric span,.owner-table-title span,.owner-table th,.owner-study__table th {  color: var(--muted);  font-size: 0.74rem;  font-weight: 900;  text-transform: uppercase;}
.owner-metric strong {  display: block;  margin-top: 10px;  font-size: 1.9rem;  line-height: 1;}
.owner-table-wrap {  padding: 18px;}
.owner-analytics-grid {  display: grid;  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);  gap: 1px;  background: var(--line);}
.owner-analytics-grid--products {  grid-template-columns: 1fr;}
.owner-insight-card {  min-height: 320px;  padding: 18px;  background: rgba(255, 255, 255, 0.92);}
.owner-inventory-card {  padding: 18px;  background:    radial-gradient(circle at top right, rgba(228, 172, 63, 0.14), transparent 16rem),    rgba(255, 255, 255, 0.94);}
.owner-inventory-list {  display: grid;  gap: 12px;  margin-top: 16px;}
.owner-inventory-add {  display: grid;  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(120px, 1fr)) auto;  gap: 10px;  align-items: end;  margin-top: 16px;  padding: 14px;  border: 1px solid rgba(15, 122, 79, 0.16);  border-radius: 8px;  background: rgba(15, 122, 79, 0.06);}
.owner-inventory-add p {  margin: 4px 0 0;  color: var(--muted);}
.owner-inventory-item {  display: grid;  grid-template-columns: 72px minmax(0, 1fr) minmax(210px, auto);  gap: 14px;  align-items: center;  padding: 14px;  border: 1px solid rgba(15, 122, 79, 0.14);  border-radius: 8px;  background: rgba(255, 255, 255, 0.92);  box-shadow: 0 12px 24px rgba(16, 32, 26, 0.06);}
.owner-inventory-item.is-low-stock {  border-color: rgba(228, 172, 63, 0.45);  background: rgba(255, 250, 238, 0.92);}
.owner-inventory-item.is-out-of-stock {  border-color: rgba(219, 91, 66, 0.28);  background: rgba(255, 247, 245, 0.94);}
.owner-inventory-item__visual {  display: grid;  width: 64px;  height: 64px;  overflow: hidden;  place-items: center;  border-radius: 8px;  background: rgba(15, 122, 79, 0.1);}
.owner-inventory-item__visual img {  width: 100%;  height: 100%;  object-fit: cover;}
.owner-inventory-item__visual span {  display: grid;  width: 100%;  height: 100%;  place-items: center;  color: #ffffff;  font-weight: 900;}
.owner-inventory-item__fields {  display: grid;  grid-template-columns: minmax(160px, 0.8fr) minmax(180px, 1fr);  gap: 10px;}
.owner-inventory-item label {  display: grid;  gap: 6px;}
.owner-inventory-item label span {  color: var(--muted);  font-size: 0.74rem;  font-weight: 900;  text-transform: uppercase;}
.owner-inventory-item input[type="text"],.owner-inventory-item input[type="url"],.owner-inventory-item input[type="number"],.owner-inventory-item select,.owner-inventory-add input,.owner-inventory-add select {  min-height: 40px;  width: 100%;  padding: 0 10px;  border: 1px solid var(--line);  border-radius: 8px;  background: #ffffff;}
.owner-inventory-add label {  display: grid;  gap: 6px;}
.owner-inventory-add label span {  color: var(--muted);  font-size: 0.74rem;  font-weight: 900;  text-transform: uppercase;}
.inventory-upload-drop {  display: grid !important;  grid-template-columns: 52px minmax(0, 1fr);  gap: 10px;  align-items: center;  min-height: 62px;  padding: 8px;  border: 1px dashed rgba(15, 122, 79, 0.34);  border-radius: 8px;  background: rgba(15, 122, 79, 0.05);  cursor: pointer;  transition:    transform 180ms ease,    border-color 180ms ease,    background 180ms ease,    box-shadow 180ms ease;}
.inventory-upload-drop:hover,.inventory-upload-drop.is-dragging {  border-color: var(--green);  background: rgba(15, 122, 79, 0.11);  box-shadow: 0 12px 22px rgba(15, 122, 79, 0.12);  transform: translateY(-1px);}
.inventory-upload-drop input[type="file"] {  position: absolute;  width: 1px;  height: 1px;  opacity: 0;  pointer-events: none;}
.inventory-upload-preview {  display: grid;  width: 48px;  height: 48px;  overflow: hidden;  place-items: center;  border-radius: 8px;  color: #ffffff;  background: var(--green);  font-weight: 900;}
.inventory-upload-preview img {  width: 100%;  height: 100%;  object-fit: cover;}
.inventory-upload-copy {  display: grid;  gap: 2px;  min-width: 0;}
.inventory-upload-copy strong {  color: var(--green-strong);  font-size: 0.88rem;}
.inventory-upload-copy small {  color: var(--muted);  line-height: 1.25;}
.inventory-upload-copy [data-upload-name] {  overflow: hidden;  color: var(--green);  font-weight: 800;  text-overflow: ellipsis;  white-space: nowrap;}
.owner-inventory-item .inventory-upload-drop span,.owner-inventory-add .inventory-upload-drop span {  color: inherit;  font-size: inherit;  font-weight: inherit;  text-transform: none;}
.owner-inventory-item__actions {  display: grid;  gap: 8px;  justify-items: stretch;}
.inventory-toggle {  display: inline-flex !important;  align-items: center;  justify-content: center;  min-height: 40px;  padding: 0 10px;  border: 1px solid rgba(15, 122, 79, 0.2);  border-radius: 8px;  color: var(--green-strong);  background: rgba(15, 122, 79, 0.08);  font-weight: 900;}
.inventory-toggle input {  width: 18px;  height: 18px;  accent-color: var(--green);}
.owner-insight-card__header p {  margin: 6px 0 0;  color: var(--muted);  line-height: 1.5;}
.owner-insight-card__header h3 {  margin: 4px 0 0;  font-size: 1.15rem;}
.owner-product-list {  display: grid;  gap: 10px;  margin-top: 14px;}
.owner-product-row {  display: grid;  gap: 10px;  width: 100%;  padding: 12px;  border: 1px solid var(--line);  border-radius: 8px;  color: inherit;  text-align: left;  background: #ffffff;  transition:    transform 160ms ease,    border-color 160ms ease,    box-shadow 160ms ease;}
.owner-product-row:hover {  transform: translateY(-1px);  border-color: rgba(15, 122, 79, 0.4);  box-shadow: 0 12px 20px rgba(16, 32, 26, 0.08);}
.owner-product-row__top {  display: flex;  align-items: baseline;  justify-content: space-between;  gap: 10px;}
.owner-product-row__top strong {  font-size: 1rem;}
.owner-product-row__top span,.owner-product-row__meta span {  color: var(--muted);  font-size: 0.82rem;}
.owner-product-row__meta {  display: flex;  align-items: center;  justify-content: space-between;  gap: 8px;}
.owner-product-row__meta strong {  color: var(--ink);}
.owner-product-row__bar {  display: block;  height: 7px;  overflow: hidden;  border-radius: 999px;  background: rgba(15, 122, 79, 0.1);}
.owner-product-row__bar > span {  display: block;  height: 100%;  border-radius: inherit;  background: linear-gradient(90deg, #0f7a4f, #32a868);}
.owner-study {  display: grid;  align-content: start;  gap: 14px;}
.owner-study__header {  display: flex;  align-items: flex-start;  justify-content: space-between;  gap: 12px;}
.owner-study__header-actions {  display: flex;  align-items: center;  gap: 8px;  flex-wrap: wrap;  justify-content: flex-end;}
.owner-study__header h3 {  margin: 4px 0;  font-size: 1.2rem;}
.owner-study__header p {  margin: 0;  color: var(--muted);}
.owner-study__stats,.owner-study__totals {  display: grid;  gap: 10px;}
.owner-study__stats {  grid-template-columns: repeat(3, minmax(0, 1fr));}
.owner-study__totals {  grid-template-columns: repeat(3, minmax(0, 1fr));}
.owner-study__stats div,.owner-study__totals div {  min-height: 86px;  padding: 12px;  border: 1px solid var(--line);  border-radius: 8px;  background: #ffffff;}
.owner-study__stats span,.owner-study__totals span {  display: block;  color: var(--muted);  font-size: 0.76rem;  font-weight: 800;  text-transform: uppercase;}
.owner-study__stats strong,.owner-study__totals strong {  display: block;  margin-top: 9px;  font-size: 1.4rem;  line-height: 1;}
.owner-study__table-wrap {  overflow-x: auto;}
.owner-study__table {  width: 100%;  min-width: 640px;  border-collapse: collapse;  overflow: hidden;  border: 1px solid var(--line);  border-radius: 8px;  background: #ffffff;}
.owner-study__table th,.owner-study__table td {  padding: 11px;  border-bottom: 1px solid var(--line);  text-align: left;  white-space: nowrap;}
.owner-study__table td small {  display: block;  margin-top: 2px;  color: var(--muted);  font-size: 0.76rem;}
.owner-order-row.is-selected {  background: rgba(15, 122, 79, 0.07);}
.owner-order-row {  cursor: pointer;  transition:    background 150ms ease,    box-shadow 150ms ease,    transform 150ms ease;}
.owner-order-row:hover {  transform: translateX(2px);}
.owner-order-row:focus-visible {  outline: 3px solid rgba(15, 122, 79, 0.28);  outline-offset: -3px;}
.owner-order-row td:first-child {  position: relative;}
.owner-order-row.is-selected td:first-child::before {  content: "";  position: absolute;  top: 10px;  bottom: 10px;  left: 0;  width: 4px;  border-radius: 999px;  background: var(--green);}
.owner-order-detail-row td {  padding: 0;  white-space: normal;  background: rgba(238, 247, 242, 0.72);}
.owner-order-detail {  display: grid;  gap: 14px;  padding: 16px;  transform-origin: top center;  animation: ownerDetailIn 160ms cubic-bezier(0.2, 0.82, 0.2, 1) both;}
@keyframes ownerDetailIn {  from {    opacity: 0;    transform: translateY(-6px);  }
  to {    opacity: 1;    transform: translateY(0);  }
}
.owner-table-title {  display: flex;  align-items: center;  justify-content: space-between;  gap: 12px;  margin-bottom: 12px;}
.owner-table-title h3 {  margin: 0;  font-size: 1rem;}
.owner-table {  width: 100%;  border-collapse: collapse;  overflow: hidden;  border: 1px solid var(--line);  border-radius: 8px;  background: #ffffff;}
.owner-table th,.owner-table td {  padding: 12px;  border-bottom: 1px solid var(--line);  text-align: left;  white-space: nowrap;}
.owner-table tbody tr:hover {  background: rgba(15, 122, 79, 0.04);}
.owner-table .owner-order-row td:nth-last-child(-n + 3) {  font-weight: 800;}
.owner-empty {  min-height: 110px;}
.tracker-panel {  overflow: hidden;}
.tracker-empty {  display: grid;  min-height: 210px;  align-items: center;  padding: 22px;  background:    linear-gradient(90deg, rgba(15, 122, 79, 0.08), transparent),    rgba(255, 255, 255, 0.84);}
.tracker-empty h2,.tracker-header h2 {  margin: 4px 0 8px;  font-size: 2.05rem;  line-height: 1;}
.tracker-empty p,.tracker-header p {  max-width: 620px;  margin: 0;  color: var(--muted);  line-height: 1.5;}
.tracker-header {  display: grid;  grid-template-columns: minmax(0, 1fr) auto;  align-items: start;  gap: 14px;  padding: 18px;  border-bottom: 1px solid var(--line);}
.tracker-header > :first-child {  min-width: 0;}
.tracker-header h2 {  font-size: 1.65rem;  line-height: 1.06;  max-width: 14ch;}
.tracker-header p {  max-width: 48ch;}
.tracker-body {  display: grid;  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);  gap: 1px;  background: var(--line);}
.tracker-map {  min-height: 220px;  margin: 0;  border: 0;  border-radius: 0;}
.tracker-info {  display: grid;  gap: 1px;  background: var(--line);}
.metric {  display: grid;  align-content: center;  min-height: 72px;  padding: 14px;  background: rgba(255, 255, 255, 0.88);}
.metric span {  color: var(--muted);  font-size: 0.78rem;  font-weight: 800;  text-transform: uppercase;}
.metric strong {  margin-top: 4px;  font-size: 1.02rem;}
.tracker-timeline {  padding: 14px;  margin-top: 0;  border-top: 1px solid var(--line);}
.tracker-header__status {  display: grid;  justify-items: end;  gap: 10px;}
.tracker-shell {  display: grid;  grid-template-columns: 1fr;  gap: 0;}
.tracker-map-stage,.tracker-info-panel {  background: rgba(255, 255, 255, 0.88);}
.tracker-map-stage {  overflow: hidden;  border-bottom: 1px solid var(--line);}
.tracker-map-toolbar {  display: flex;  align-items: center;  justify-content: space-between;  gap: 10px;  padding: 12px 14px;  border-bottom: 1px solid var(--line);  background: rgba(255, 255, 255, 0.92);}
.tracker-map--focused,.tracker-map--focused.leaflet-container {  height: clamp(260px, 42vh, 340px);  min-height: 260px;  max-height: 340px;}
.tracker-info-panel {  display: grid;  gap: 14px;  padding: 14px;}
.tracker-summary-grid {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 1px;  background: var(--line);}
.tracker-detail-grid {  display: grid;  grid-template-columns: repeat(2, minmax(0, 1fr));  gap: 14px;}
.tracker-card {  padding: 16px;  border: 1px solid var(--line);  border-radius: 8px;  background: rgba(251, 252, 250, 0.9);}
.tracker-card h3 {  margin: 4px 0 8px;  font-size: 1.14rem;}
.tracker-card p {  margin: 0;  color: var(--muted);  line-height: 1.5;}
.tracker-items {  display: grid;  gap: 10px;}
.catalog-tools {  position: sticky;  top: 0;  z-index: 4;  display: grid;  gap: 12px;  padding: 14px;  border-bottom: 1px solid var(--line);  border-radius: 8px 8px 0 0;  background: rgba(251, 252, 250, 0.94);  backdrop-filter: blur(14px);}
.search-control {  display: flex;  align-items: center;  gap: 8px;  min-height: 44px;  padding: 0 12px;  border: 1px solid var(--line);  border-radius: 8px;  background: #ffffff;  color: var(--muted);}
.search-control input {  width: 100%;  border: 0;  outline: 0;  color: var(--ink);  background: transparent;}
.category-tabs {  display: flex;  gap: 8px;  overflow-x: auto;  scrollbar-width: thin;}
.category-tab {  flex: 0 0 auto;  min-height: 36px;  padding: 0 12px;  border: 1px solid var(--line);  border-radius: 999px;  color: var(--muted);  background: #ffffff;  font-weight: 800;}
.category-tab.is-active {  border-color: rgba(15, 122, 79, 0.2);  color: #ffffff;  background: var(--green);}
.catalog-list,.order-list {  display: grid;}
.order-list {  min-height: 0;  overflow: auto;}
.catalog-item {  display: grid;  grid-template-columns: 64px minmax(0, 1fr) auto;  align-items: center;  gap: 14px;  padding: 14px;  border-bottom: 1px solid var(--line);  background: transparent;  transition:    box-shadow 180ms ease,    border-color 180ms ease,    background 160ms ease,    transform 160ms ease;}
.catalog-item:hover {  background: rgba(15, 122, 79, 0.04);}
.catalog-item.is-in-cart {  background: rgba(15, 122, 79, 0.05);  box-shadow: inset 3px 0 0 rgba(15, 122, 79, 0.92);}
.catalog-item.is-just-added {  animation: cartSelectPulse 420ms ease;}
.catalog-item.is-unavailable {  opacity: 0.68;  background: rgba(102, 114, 109, 0.05);}
.catalog-item.is-low-stock {  box-shadow: inset 3px 0 0 rgba(228, 172, 63, 0.9);}
.catalog-item.is-unavailable .product-actions {  opacity: 0.78;}
@keyframes cartSelectPulse {  0% {    transform: scale(0.995);    background: rgba(15, 122, 79, 0.12);  }
  60% {    transform: scale(1);    background: rgba(15, 122, 79, 0.08);  }
  100% {    transform: scale(1);    background: rgba(15, 122, 79, 0.05);  }
}
.product-swatch {  display: grid;  width: 58px;  height: 58px;  overflow: hidden;  place-items: center;  border-radius: 8px;  color: rgba(255, 255, 255, 0.92);  font-weight: 900;}
.product-swatch img {  width: 100%;  height: 100%;  object-fit: cover;}
.product-main {  min-width: 0;}
.product-main h3 {  margin: 0;  font-size: 1rem;}
.product-meta {  display: flex;  align-items: center;  gap: 8px;  flex-wrap: wrap;  margin-top: 5px;  color: var(--muted);  font-size: 0.88rem;}
.product-selection-copy {  color: var(--green-strong);  font-weight: 800;}
.tag {  display: inline-flex;  min-height: 22px;  align-items: center;  padding: 0 8px;  border-radius: 999px;  background: rgba(219, 91, 66, 0.12);  color: #98402f;  font-size: 0.76rem;  font-weight: 800;}
.tag--available {  color: var(--green-strong);  background: rgba(15, 122, 79, 0.12);}
.tag--stock {  color: #315d70;  background: rgba(49, 93, 112, 0.12);}
.tag--low-stock {  color: #8a5a00;  background: rgba(228, 172, 63, 0.22);}
.tag--unavailable {  color: #98402f;  background: rgba(219, 91, 66, 0.14);}
.product-actions {  display: grid;  justify-items: end;  gap: 8px;}
.product-actions strong {  font-size: 0.98rem;  white-space: nowrap;}
.product-cart-tools {  display: inline-grid;  grid-auto-flow: column;  align-items: center;  gap: 8px;}
.add-button,.quantity-button {  display: grid;  width: 34px;  height: 34px;  place-items: center;  border-radius: 8px;  color: #ffffff;  background: var(--green);  font-size: 1.12rem;  font-weight: 900;}
.add-button.is-active {  background: var(--green-strong);  box-shadow: 0 10px 18px rgba(7, 92, 59, 0.18);}
.quantity-button--subtle {  color: var(--green-strong);  background: rgba(15, 122, 79, 0.12);}
.product-quantity-chip {  display: grid;  min-width: 28px;  height: 28px;  place-items: center;  padding: 0 8px;  border-radius: 999px;  color: #ffffff;  background: var(--blue);  font-size: 0.82rem;  font-weight: 900;  transform: scale(0.82);  opacity: 0;  transition:    opacity 160ms ease,    transform 160ms ease;}
.product-quantity-chip.is-visible {  transform: scale(1);  opacity: 1;}
.cart-panel {  position: sticky;  top: 22px;  max-height: calc(100vh - 44px);  overflow: auto;}
.panel-heading,.queue-summary {  display: flex;  align-items: center;  justify-content: space-between;  gap: 12px;  padding: 14px;  border-bottom: 1px solid var(--line);}
.cart-items {  display: grid;  min-height: 120px;}
.cart-empty,.empty-state {  display: grid;  place-items: center;  min-height: 150px;  padding: 24px;  color: var(--muted);  text-align: center;}
.cart-line {  display: grid;  grid-template-columns: minmax(0, 1fr) auto;  gap: 12px;  padding: 12px 14px;  border-bottom: 1px solid var(--line);}
.cart-line h3 {  margin: 0 0 4px;  font-size: 0.96rem;}
.cart-line p {  margin: 0;  color: var(--muted);  font-size: 0.86rem;}
.cart-line__stock {  display: inline-block;  margin-top: 5px;  color: var(--green-strong);  font-size: 0.78rem;  font-weight: 800;}
.cart-line__stock.is-low {  color: #8a5a00;}
.quantity-control {  display: flex;  align-items: center;  gap: 8px;}
.quantity-button {  width: 30px;  height: 30px;  color: var(--ink);  background: var(--soft);}
.totals {  display: grid;  gap: 10px;  padding: 14px;  border-bottom: 1px solid var(--line);}
.totals div {  display: flex;  align-items: center;  justify-content: space-between;  gap: 12px;  color: var(--muted);}
.totals strong {  color: var(--ink);}
.grand-total {  padding-top: 10px;  border-top: 1px solid var(--line);  font-size: 1.08rem;}
.checkout-form {  display: grid;  gap: 12px;  padding: 14px;}
.checkout-form label {  display: grid;  gap: 6px;  color: var(--muted);  font-size: 0.86rem;  font-weight: 800;}
.payment-field {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 8px;  margin: 0;  padding: 0;  border: 0;}
.payment-field legend {  grid-column: 1 / -1;  color: var(--muted);  font-size: 0.86rem;  font-weight: 800;}
.checkout-form .payment-option {  position: relative;  display: block;  color: var(--ink);  cursor: pointer;}
.payment-option input {  position: absolute;  opacity: 0;  pointer-events: none;}
.payment-option span {  display: grid;  min-height: 42px;  place-items: center;  border: 1px solid var(--line);  border-radius: 8px;  background: #ffffff;  font-weight: 900;}
.payment-option input:checked + span {  border-color: rgba(15, 122, 79, 0.24);  color: #ffffff;  background: var(--green);}
.checkout-form input,.checkout-form textarea,.queue-summary select {  width: 100%;  border: 1px solid var(--line);  border-radius: 8px;  outline: 0;  background: #ffffff;  color: var(--ink);}
.checkout-form input {  min-height: 42px;  padding: 0 11px;}
.checkout-form textarea {  resize: vertical;  min-height: 82px;  padding: 11px;}
.checkout-form input:focus,.checkout-form textarea:focus,.queue-summary select:focus {  border-color: rgba(15, 122, 79, 0.46);  box-shadow: 0 0 0 4px rgba(15, 122, 79, 0.1);}
.form-row {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 10px;}
.location-actions {  display: grid;  grid-template-columns: minmax(0, 1fr) auto;  gap: 10px;}
.manual-location {  display: grid;  gap: 10px;  padding-top: 2px;}
.location-card,.manual-location__header {  display: grid;  gap: 6px;}
.location-mode-switch {  display: grid;  grid-template-columns: repeat(2, minmax(0, 1fr));  gap: 8px;  padding: 6px;  border: 1px solid var(--line);  border-radius: 10px;  background: rgba(255, 255, 255, 0.86);}
.location-mode-switch .mode-chip {  width: 100%;  min-height: 36px;  padding: 0 10px;  font-size: 0.82rem;  line-height: 1.15;  text-align: center;  white-space: normal;}
.location-helper {  margin: 0;  color: var(--muted);  font-size: 0.84rem;  line-height: 1.45;}
.location-status {  margin: 0;  color: var(--muted);  font-size: 0.86rem;}
.mini-map,.route-map {  position: relative;  overflow: hidden;  min-height: 140px;  border: 1px solid var(--line);  border-radius: 8px;  background:    linear-gradient(90deg, rgba(15, 122, 79, 0.08) 1px, transparent 1px),    linear-gradient(180deg, rgba(15, 122, 79, 0.08) 1px, transparent 1px),    #f5faf7;  background-size: 28px 28px;}
.live-map,.mini-map.leaflet-container,.route-map.leaflet-container {  min-height: 240px;  width: 100%;  background: #dfece5;}
.mini-map.leaflet-container {  min-height: 220px;}
.tracker-map.leaflet-container {  min-height: 260px;}
.mini-map.is-pin-select-mode,.mini-map.is-pin-select-mode.leaflet-container,.mini-map.is-pin-select-mode .leaflet-pane,.mini-map.is-pin-select-mode .leaflet-interactive {  cursor: crosshair !important;}
.mini-map.is-pin-select-mode::after {  content: attr(data-pin-hint);  position: absolute;  z-index: 640;  right: 10px;  bottom: 10px;  left: 10px;  padding: 7px 10px;  border: 1px solid rgba(15, 122, 79, 0.2);  border-radius: 999px;  color: var(--green-strong);  background: rgba(255, 255, 255, 0.95);  text-align: center;  font-size: 0.74rem;  font-weight: 800;  line-height: 1.25;  pointer-events: none;}
.mini-map.leaflet-container::before,.route-map.leaflet-container::before,.live-map.leaflet-container::before {  display: none;}
.route-map.is-map-locked .leaflet-control-zoom {  opacity: 0.45;  pointer-events: none;}
.route-map.is-map-locked,.route-map.is-map-locked .leaflet-pane,.route-map.is-map-locked .leaflet-interactive {  cursor: default !important;}
.map-fallback {  position: absolute;  inset: 0;  display: grid;  place-items: center;  padding: 18px;  color: var(--muted);  text-align: center;  background:    linear-gradient(90deg, rgba(15, 122, 79, 0.08) 1px, transparent 1px),    linear-gradient(180deg, rgba(15, 122, 79, 0.08) 1px, transparent 1px),    #f5faf7;  background-size: 28px 28px;}
.leaflet-pin {  position: relative;  display: grid;  width: 34px;  height: 34px;  place-items: center;  border: 3px solid #ffffff;  border-radius: 999px;  color: #ffffff;  background: var(--green);  box-shadow: 0 12px 24px rgba(16, 32, 26, 0.24);  font-size: 0.68rem;  font-weight: 900;  isolation: isolate;  transition:    box-shadow 180ms ease,    filter 180ms ease;  will-change: transform;}
.leaflet-pin span {  position: relative;  z-index: 2;  transform: rotate(calc(var(--map-bearing, 0deg) * -1));}
.leaflet-pin .pin-heading {  position: absolute;  inset: -22px;  z-index: 1;  opacity: 0;  pointer-events: none;  transform: rotate(var(--pin-heading, 0deg));  transform-origin: 50% 50%;  transition: opacity 160ms ease;}
.leaflet-pin .pin-heading::before {  content: "";  position: absolute;  top: 1px;  left: 50%;  width: 18px;  height: 31px;  background: linear-gradient(180deg, #41b6df 0%, #286f8f 100%);  clip-path: polygon(50% 0, 100% 100%, 50% 78%, 0 100%);  filter: drop-shadow(0 6px 8px rgba(16, 32, 26, 0.28));  transform: translateX(-50%);}
.leaflet-pin.driver.has-heading .pin-heading {  opacity: 1;}
.leaflet-pin.driver[data-heading-source="route"] .pin-heading::before {  background: linear-gradient(180deg, #3cc985 0%, #148a59 100%);}
.leaflet-pin.customer {  background: var(--coral);  box-shadow:    0 0 0 5px rgba(219, 91, 66, 0.16),    0 12px 24px rgba(16, 32, 26, 0.24);}
.leaflet-pin.driver {  background: var(--blue);  animation: pulsePin 1.8s ease-in-out infinite;}
.leaflet-pin.dropoff {  background: var(--gold);  box-shadow:    0 0 0 5px rgba(228, 172, 63, 0.18),    0 12px 24px rgba(16, 32, 26, 0.24);}
.leaflet-control-attribution {  font-size: 0.65rem;}
.mini-map::before,.route-map::before {  content: "";  position: absolute;  inset: 18px;  border-top: 3px solid rgba(40, 111, 143, 0.34);  border-right: 3px solid rgba(40, 111, 143, 0.34);  border-radius: 40% 18% 35% 20%;  transform: rotate(-8deg);}
.map-pin {  position: absolute;  display: grid;  min-width: 32px;  height: 32px;  place-items: center;  border-radius: 999px 999px 999px 0;  color: #ffffff;  background: var(--coral);  font-size: 0.72rem;  font-weight: 900;  transform: rotate(-45deg);  box-shadow: 0 10px 22px rgba(219, 91, 66, 0.24);}
.map-pin span {  transform: rotate(45deg);}
.map-pin.store {  top: 34%;  left: 26%;  background: var(--green);}
.map-pin.customer {  right: 24%;  bottom: 26%;}
.map-pin.driver {  background: var(--blue);}
.map-pin.driver.at-store {  top: 24%;  left: 31%;}
.map-pin.driver.is-waiting {  top: 42%;  left: 47%;  opacity: 0.74;}
.map-pin.driver.is-live {  top: 46%;  left: 54%;  animation: pulsePin 1.8s ease-in-out infinite;}
@keyframes pulsePin {  0%,  100% {    box-shadow: 0 10px 22px rgba(40, 111, 143, 0.2);  }
  50% {    box-shadow: 0 10px 26px rgba(40, 111, 143, 0.42);  }
}
.queue-summary select {  max-width: 150px;  min-height: 38px;  padding: 0 9px;  font-weight: 800;}
.order-card {  width: 100%;  padding: 14px;  border: 0;  border-bottom: 1px solid var(--line);  color: var(--ink);  background: transparent;  text-align: left;  transition:    background 160ms ease,    box-shadow 160ms ease;}
.order-card:hover,.order-card.is-selected {  background: rgba(15, 122, 79, 0.05);}
.order-card.is-selected {  box-shadow: inset 4px 0 0 var(--green);}
.order-card h3,.detail-title h2 {  margin: 0;}
.order-card-meta,.detail-meta,.timeline,.item-list {  display: flex;  gap: 8px;  flex-wrap: wrap;}
.order-card-meta,.detail-meta {  margin-top: 8px;  color: var(--muted);  font-size: 0.86rem;}
.status-pill {  display: inline-flex;  min-height: 24px;  align-items: center;  padding: 0 8px;  border-radius: 999px;  color: var(--green-strong);  background: rgba(15, 122, 79, 0.12);  font-size: 0.75rem;  font-weight: 900;}
.status-pill.delivered {  color: #315d70;  background: rgba(40, 111, 143, 0.12);}
.status-pill.is-live {  color: var(--green-strong);  background: rgba(15, 122, 79, 0.16);}
.delivery-detail {  overflow: hidden;  transition:    transform 280ms ease,    box-shadow 280ms ease,    background 280ms ease;}
.delivery-detail.is-route-focus {  transform: translateY(-2px);  background: rgba(248, 251, 249, 0.96);  box-shadow: 0 24px 48px rgba(16, 32, 26, 0.16);}
.detail-empty {  display: grid;  min-height: 680px;  place-items: center;  padding: 30px;  color: var(--muted);  text-align: center;}
.detail-header,.detail-section,.detail-actions {  padding: 16px;  border-bottom: 1px solid var(--line);}
.detail-header {  display: flex;  align-items: flex-start;  justify-content: space-between;  gap: 14px;}
.route-focus-callout {  display: none;  max-width: 300px;  padding: 12px 14px;  border: 1px solid rgba(40, 111, 143, 0.16);  border-radius: 8px;  background: rgba(40, 111, 143, 0.08);}
.route-focus-callout.is-visible {  display: grid;  gap: 4px;}
.route-focus-callout strong {  font-size: 0.92rem;}
.route-focus-callout span {  color: var(--muted);  font-size: 0.82rem;  line-height: 1.45;}
.detail-title p,.detail-section p {  margin: 6px 0 0;  color: var(--muted);}
.detail-section h3 {  margin: 0;  font-size: 0.96rem;}
.route-focus-shell {  display: grid;  gap: 1px;}
.route-focus-shell.is-active {  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.78fr);  background: var(--line);}
.route-focus-sidebar {  display: grid;  gap: 1px;  background: var(--line);}
.route-stage,.detail-card {  background: rgba(255, 255, 255, 0.9);}
.route-stage {  min-height: 100%;}
.route-stage-header {  display: flex;  align-items: flex-start;  justify-content: space-between;  gap: 12px;}
.route-nav-banner {  display: grid;  grid-template-columns: minmax(0, 1fr) auto;  gap: 14px;  margin-top: 16px;  margin-bottom: 16px;  padding: 14px 16px;  border: 1px solid rgba(35, 136, 230, 0.18);  border-radius: 8px;  color: #f7fbff;  background:    linear-gradient(135deg, rgba(18, 71, 116, 0.94), rgba(35, 136, 230, 0.92)),    #1d87cf;  box-shadow: 0 18px 30px rgba(35, 136, 230, 0.18);}
.route-nav-banner.is-muted {  color: var(--ink);  background: rgba(255, 255, 255, 0.92);  box-shadow: none;}
.route-nav-banner__copy,.route-nav-banner__eta {  display: grid;  gap: 4px;}
.route-nav-banner__copy span,.route-nav-banner__eta span {  font-size: 0.72rem;  font-weight: 800;  text-transform: uppercase;  opacity: 0.82;}
.route-nav-banner__copy strong,.route-nav-banner__eta strong {  line-height: 1.2;}
.route-nav-banner__copy strong {  font-size: 1.02rem;}
.route-nav-banner__copy small,.route-nav-banner__eta small {  font-size: 0.84rem;  line-height: 1.45;  opacity: 0.86;}
.route-nav-banner__eta {  align-content: center;  justify-items: end;  min-width: 92px;}
.route-nav-banner__eta strong {  font-size: 1.4rem;}
.route-distance-badge {  display: inline-flex;  align-items: center;  min-height: 30px;  padding: 0 10px;  border-radius: 999px;  color: var(--green-strong);  background: rgba(15, 122, 79, 0.12);  font-size: 0.8rem;  font-weight: 900;  white-space: nowrap;}
.route-distance-badge--eta {  color: var(--blue);  background: rgba(40, 111, 143, 0.12);}
.route-guidance-panel {  display: grid;  gap: 14px;  padding-top: 18px;}
.route-summary-grid {  display: grid;  grid-template-columns: repeat(2, minmax(0, 1fr));  gap: 12px;}
.route-summary-card,.route-steps-panel {  padding: 14px;  border: 1px solid var(--line);  border-radius: 8px;  background: rgba(255, 255, 255, 0.8);}
.route-summary-card {  display: grid;  gap: 6px;}
.route-summary-card span,.route-steps-head span {  color: var(--muted);  font-size: 0.76rem;  font-weight: 800;  text-transform: uppercase;}
.route-summary-card strong {  font-size: 1.3rem;  line-height: 1;}
.route-summary-card small,.route-loading-copy,.route-step__copy small {  color: var(--muted);  line-height: 1.45;}
.route-summary-card--primary strong,.route-step__number {  color: var(--green-strong);}
.route-steps-panel {  display: grid;  gap: 12px;}
.route-steps-head {  display: flex;  align-items: center;  justify-content: space-between;  gap: 12px;  flex-wrap: wrap;}
.route-steps-head h4,.route-loading-copy {  margin: 0;}
.route-steps-list {  display: grid;  gap: 10px;}
.route-step {  display: grid;  grid-template-columns: 28px minmax(0, 1fr);  gap: 12px;  align-items: flex-start;}
.route-step__number {  display: grid;  width: 28px;  height: 28px;  place-items: center;  border-radius: 999px;  background: rgba(15, 122, 79, 0.12);  font-size: 0.82rem;  font-weight: 900;}
.route-step__copy {  display: grid;  gap: 4px;}
.route-step__copy strong {  font-size: 0.94rem;  line-height: 1.35;}
.route-guidance-panel.is-muted .route-summary-card--primary strong {  color: var(--ink);}
.route-map--expanded,.route-map--expanded.leaflet-container {  min-height: 500px;}
.route-map-shell {  position: relative;  overflow: hidden;  margin-top: 12px;  border: 1px solid var(--line);  border-radius: 8px;  background: #dfece5;  box-shadow: 0 18px 32px rgba(16, 32, 26, 0.12);  contain: layout paint;}
.route-map-shell .route-map,.route-map-shell .route-map.leaflet-container {  min-height: 500px;  margin-top: 0;  border: 0;  border-radius: 0;}
.route-map-floating {  position: absolute;  top: 12px;  right: 12px;  z-index: 700;  display: grid;  justify-items: end;  gap: 8px;}
.map-float-button,.map-float-pill {  display: inline-flex;  align-items: center;  justify-content: center;  min-height: 34px;  padding: 0 12px;  border-radius: 999px;  color: #ffffff;  font-size: 0.78rem;  font-weight: 800;  line-height: 1;  letter-spacing: 0;  white-space: nowrap;  backdrop-filter: blur(10px);  box-shadow: 0 10px 20px rgba(11, 25, 20, 0.28);}
.map-float-button {  border: 1px solid rgba(255, 255, 255, 0.64);  background: rgba(11, 25, 20, 0.78);}
.map-float-button:hover {  background: rgba(11, 25, 20, 0.9);}
.map-float-button--primary {  border-color: rgba(255, 255, 255, 0.34);  background: var(--green);}
.map-float-button--primary:hover {  background: var(--green-strong);}
.map-float-pill {  border: 1px solid rgba(16, 32, 26, 0.14);  color: var(--green-strong);  background: rgba(255, 255, 255, 0.92);}
.route-focus-sidebar.is-hidden-mobile-nav {  display: none;}
.route-map-shell--mobile-nav {  min-height: 74svh;}
.route-map--mobile-nav,.route-map--mobile-nav.leaflet-container {  min-height: 74svh;}
.mobile-nav-sheet {  position: absolute;  right: 10px;  bottom: calc(10px + env(safe-area-inset-bottom));  left: 10px;  z-index: 680;  display: grid;  gap: 10px;  padding: 12px;  border: 1px solid rgba(16, 32, 26, 0.12);  border-radius: 8px;  background: rgba(255, 255, 255, 0.82);  backdrop-filter: blur(14px);  box-shadow: 0 14px 28px rgba(16, 32, 26, 0.24);}
.mobile-nav-sheet__grab {  justify-self: center;  width: 42px;  height: 4px;  border-radius: 999px;  background: rgba(16, 32, 26, 0.2);}
.mobile-nav-sheet__header {  display: flex;  align-items: center;  justify-content: space-between;  gap: 10px;}
.mobile-nav-sheet__header strong {  font-size: 0.98rem;}
.mobile-nav-sheet__sub {  margin: 0;  color: var(--muted);  font-size: 0.84rem;  line-height: 1.35;}
.mobile-nav-metrics {  display: grid;  grid-template-columns: repeat(3, minmax(0, 1fr));  gap: 8px;}
.mobile-nav-metrics div {  display: grid;  gap: 4px;  padding: 8px;  border: 1px solid var(--line);  border-radius: 8px;  background: rgba(251, 252, 250, 0.92);}
.mobile-nav-metrics span {  color: var(--muted);  font-size: 0.7rem;  font-weight: 800;  text-transform: uppercase;}
.mobile-nav-metrics strong {  font-size: 0.92rem;}
.mobile-nav-states {  display: flex;  gap: 6px;  overflow-x: auto;  padding-bottom: 2px;}
.detail-card--status,.detail-card--customer {  position: relative;}
.customer-focus {  display: grid;  gap: 8px;  margin-top: 14px;}
.customer-focus strong {  font-size: 1.08rem;}
.customer-focus span,.customer-focus p {  margin: 0;}
.customer-focus-line {  color: var(--ink);  font-weight: 700;}
.compact-meta {  margin-top: 2px;}
.route-live-meta {  align-items: center;}
.live-pill {  display: inline-flex;  align-items: center;  min-height: 24px;  padding: 0 10px;  border-radius: 999px;  background: rgba(17, 24, 39, 0.06);  color: var(--muted);  font-weight: 600;}
.live-pill.is-live {  background: rgba(15, 122, 79, 0.12);  color: var(--green-strong);}
.location-indicator {  display: inline-flex;  align-items: center;  gap: 8px;  min-width: 0;  min-height: 42px;  padding: 0 12px;  border: 1px solid var(--line);  border-radius: 8px;  color: var(--muted);  background: rgba(255, 255, 255, 0.9);  font-size: 0.88rem;  font-weight: 800;  line-height: 1.3;}
.status-dot {  width: 10px;  height: 10px;  border-radius: 999px;  background: rgba(102, 114, 109, 0.4);}
.location-indicator.is-live {  color: var(--green-strong);  border-color: rgba(15, 122, 79, 0.2);  background: rgba(15, 122, 79, 0.08);}
.location-indicator.is-live .status-dot {  background: var(--green);}
.location-indicator.is-pending {  color: var(--blue);  border-color: rgba(40, 111, 143, 0.16);  background: rgba(40, 111, 143, 0.08);}
.location-indicator.is-pending .status-dot {  background: var(--blue);}
.location-indicator.is-error {  color: var(--coral);  border-color: rgba(219, 91, 66, 0.2);  background: rgba(219, 91, 66, 0.08);}
.location-indicator.is-error .status-dot {  background: var(--coral);}
.delivery-states {  display: grid;  gap: 10px;  margin-top: 14px;}
.delivery-state {  display: grid;  grid-template-columns: 34px minmax(0, 1fr);  gap: 10px;  align-items: start;  padding: 10px;  border-radius: 8px;  background: var(--soft);  transition:    background 180ms ease,    transform 180ms ease;}
.delivery-state.is-current {  background: rgba(15, 122, 79, 0.12);  transform: translateX(2px);}
.delivery-state.is-done {  background: rgba(40, 111, 143, 0.09);}
.delivery-state-marker {  display: grid;  width: 34px;  height: 34px;  place-items: center;  border-radius: 999px;  color: var(--muted);  background: #ffffff;  font-size: 0.8rem;  font-weight: 900;}
.delivery-state.is-current .delivery-state-marker,.delivery-state.is-done .delivery-state-marker {  color: #ffffff;  background: var(--green);}
.delivery-state strong,.delivery-state small {  display: block;}
.delivery-state strong {  font-size: 0.92rem;}
.delivery-state small {  margin-top: 4px;  color: var(--muted);  font-size: 0.78rem;  line-height: 1.45;}
.item-list {  display: grid;  gap: 8px;  margin-top: 12px;}
.item-row {  display: flex;  align-items: center;  justify-content: space-between;  gap: 12px;  min-height: 36px;  padding: 0 10px;  border-radius: 8px;  background: var(--soft);}
.route-map {  min-height: 240px;  margin-top: 12px;}
.route-map .map-pin.store {  top: 24%;  left: 18%;}
.route-map .map-pin.customer {  right: 18%;  bottom: 22%;}
.tracker-map .map-pin.store {  top: 24%;  left: 18%;}
.tracker-map .map-pin.customer {  right: 16%;  bottom: 22%;}
.timeline {  margin-top: 12px;}
.timeline-step {  display: inline-flex;  align-items: center;  min-height: 30px;  padding: 0 9px;  border-radius: 999px;  color: var(--muted);  background: var(--soft);  font-size: 0.8rem;  font-weight: 900;}
.timeline-step.is-done {  color: #ffffff;  background: var(--green);}
.timeline-step.is-current {  color: var(--green-strong);  background: rgba(15, 122, 79, 0.16);}
.detail-actions {  display: flex;  gap: 10px;  flex-wrap: wrap;  border-bottom: 0;}
.staff-gate {  display: grid;  min-height: calc(100svh - 44px);  place-items: center;  padding: 24px;}
.login-panel {  display: grid;  width: min(440px, 100%);  gap: 14px;  padding: 24px;  border: 1px solid var(--line);  border-radius: 8px;  background: rgba(255, 255, 255, 0.9);  box-shadow: var(--shadow);}
.login-panel h1 {  margin: 0;  font-size: 2.7rem;  line-height: 0.96;}
.login-panel p {  margin: 0;  color: var(--muted);  line-height: 1.5;}
.login-panel label {  display: grid;  gap: 6px;  color: var(--muted);  font-size: 0.86rem;  font-weight: 800;}
.login-panel input {  min-height: 44px;  width: 100%;  border: 1px solid var(--line);  border-radius: 8px;  outline: 0;  padding: 0 11px;  color: var(--ink);  background: #ffffff;}
.login-panel input:focus {  border-color: rgba(15, 122, 79, 0.46);  box-shadow: 0 0 0 4px rgba(15, 122, 79, 0.1);}
.toast {  position: fixed;  right: 20px;  bottom: 20px;  z-index: 20;  max-width: min(360px, calc(100vw - 40px));  padding: 13px 15px;  border: 1px solid rgba(15, 122, 79, 0.24);  border-radius: 8px;  color: #ffffff;  background: #10201a;  box-shadow: var(--shadow);  animation: toastIn 220ms ease both;}
@keyframes toastIn {  from {    opacity: 0;    transform: translateY(12px);  }
  to {    opacity: 1;    transform: translateY(0);  }
}
.language-toggle {  box-shadow: 0 10px 20px rgba(16, 32, 26, 0.14);}
.primary-button:active,.secondary-button:active,.ghost-button:active,.icon-button:active,.map-float-button:active {  transform: translateY(0) scale(0.985);}
.primary-button:focus-visible,.secondary-button:focus-visible,.ghost-button:focus-visible,.icon-button:focus-visible,.map-float-button:focus-visible,.language-toggle:focus-visible,.assistant-fab:focus-visible {  outline: 0;  box-shadow:    0 0 0 3px rgba(15, 122, 79, 0.22),    0 10px 24px rgba(16, 32, 26, 0.16);}
.live-map.leaflet-container .leaflet-map-pane {  will-change: transform;}
.live-map.leaflet-container .leaflet-overlay-pane,.live-map.leaflet-container .leaflet-tile-pane,.live-map.leaflet-container .leaflet-shadow-pane,.live-map.leaflet-container .leaflet-marker-pane {  backface-visibility: hidden;  transform-origin: 50% 50%;}
.view-transition {  position: fixed;  inset: 0;  z-index: 5000;  overflow: hidden;  pointer-events: none;  opacity: 0;  background: transparent;}
.view-transition.is-active {  animation: transitionFade 1000ms linear both;}
.view-transition__road {  display: none;}
.view-transition__trail {  position: absolute;  inset: -8svh -40vw;  z-index: 1;  opacity: 0;  pointer-events: none;}
.view-transition__trail span {  position: absolute;  display: block;  width: clamp(190px, 30vw, 560px);  height: clamp(190px, 30vw, 560px);  border-radius: 999px;  font-size: 0;  box-shadow: 0 18px 36px rgba(16, 76, 56, 0.22);}
.view-transition__trail span::after {  content: "";  position: absolute;  top: -34px;  left: 36%;  width: 30%;  height: 34px;  border-radius: 12px 12px 0 0;  background: #4f8d48;}
.view-transition__trail span:nth-child(1) {  top: 6%;  left: 70%;  background: #f3b441;}
.view-transition__trail span:nth-child(2) {  top: 38%;  left: 88%;  background: #7db56d;}
.view-transition__trail span:nth-child(3) {  top: 66%;  left: 72%;  background: #e25e45;}
.view-transition__trail span:nth-child(4) {  top: 20%;  left: 102%;  background: #eb8c3c;}
.view-transition__trail span:nth-child(5) {  top: 74%;  left: 94%;  background: #f4d24f;}
.view-transition__car {  position: absolute;  top: 50%;  left: 120%;  z-index: 2;  height: clamp(580px, 108svh, 1400px);  width: auto;  color: #f6fbf8;  opacity: 0;  transform: translateY(-50%);  filter: drop-shadow(0 24px 38px rgba(20, 92, 66, 0.24));}
.view-transition__car svg {  width: auto;  height: 100%;  fill: #2e94d6;  stroke: rgba(24, 83, 61, 0.95);  stroke-width: 2.2;}
.view-transition.is-active .view-transition__car {  animation: transitionCar 920ms cubic-bezier(0.18, 0.78, 0.2, 1) 20ms both;}
.view-transition.is-active .view-transition__trail {  animation: transitionVeg 920ms linear 80ms both;}
@keyframes transitionFade {  0% {    opacity: 0;  }
  6%,  94% {    opacity: 1;  }
  100% {    opacity: 0;  }
}
@keyframes transitionCar {  from {    left: 120%;    opacity: 1;    transform: translateY(-50%) translateY(8px) rotate(-1deg);  }
  52% {    transform: translateY(-50%) translateY(-8px) rotate(0deg);  }
  to {    left: -220%;    opacity: 1;    transform: translateY(-50%) translateY(0) rotate(1deg);  }
}
@keyframes transitionVeg {  0% {    opacity: 1;    transform: translateX(128vw) scale(1);  }
  10%,  92% {    opacity: 1;  }
  100% {    opacity: 1;    transform: translateX(-132vw) scale(1.04);  }
}
.language-wave {  position: fixed;  inset: 0;  z-index: 5100;  overflow: hidden;  pointer-events: none;  visibility: hidden;  opacity: 0;  background: rgba(4, 27, 31, 0.04);}
.language-wave.is-active {  visibility: visible;  opacity: 1;}
.language-wave__sheet {  position: absolute;  top: -20svh;  left: -8vw;  width: 158vw;  height: 142svh;  border-radius: 0 48% 52% 0 / 0 42% 58% 0;  transform: translate3d(-170vw, 0, 0) skewX(-5deg);  will-change: transform;}
.language-wave__sheet::after {  position: absolute;  inset: 8% -2% 6% 58%;  border-radius: 999px;  background:    radial-gradient(circle at 35% 34%, rgba(255, 255, 255, 0.82), transparent 0.55rem),    radial-gradient(circle at 62% 54%, rgba(255, 255, 255, 0.72), transparent 0.45rem),    radial-gradient(circle at 48% 72%, rgba(255, 255, 255, 0.64), transparent 0.5rem);  content: "";  filter: blur(0.2px);  opacity: 0.72;}
.language-wave__sheet--lagoon {  z-index: 1;  background:    radial-gradient(circle at 72% 24%, rgba(177, 240, 212, 0.3), transparent 14rem),    linear-gradient(110deg, #04363d 0%, #066c74 46%, #0fa9a2 100%);  box-shadow: 22px 0 70px rgba(4, 54, 61, 0.34);}
.language-wave__sheet--reef {  top: -16svh;  z-index: 2;  width: 146vw;  height: 134svh;  background:    radial-gradient(circle at 76% 18%, rgba(255, 209, 95, 0.24), transparent 13rem),    linear-gradient(112deg, #078090 0%, #19b6ad 52%, #8de4d2 100%);  opacity: 0.92;}
.language-wave__sheet--foam {  top: -12svh;  z-index: 3;  width: 138vw;  height: 126svh;  border-radius: 0 54% 46% 0 / 0 48% 52% 0;  background:    radial-gradient(circle at 83% 22%, rgba(255, 208, 80, 0.32), transparent 10rem),    linear-gradient(112deg, rgba(236, 255, 243, 0.96), rgba(170, 238, 220, 0.82) 48%, rgba(250, 255, 235, 0.92));  opacity: 0.96;}
.language-wave__spark {  position: absolute;  z-index: 4;  width: clamp(90px, 12vw, 170px);  height: clamp(90px, 12vw, 170px);  border: 1px solid rgba(255, 255, 255, 0.68);  border-radius: 999px;  opacity: 0;  transform: translate3d(-42vw, 0, 0) scale(0.75);  will-change: transform, opacity;}
.language-wave__spark--one {  top: 16%;  left: 16%;}
.language-wave__spark--two {  top: 58%;  left: 34%;  width: clamp(64px, 9vw, 130px);  height: clamp(64px, 9vw, 130px);}
.language-wave__spark--three {  top: 34%;  right: 12%;  width: clamp(48px, 7vw, 96px);  height: clamp(48px, 7vw, 96px);}
.language-wave__label {  position: absolute;  top: 50%;  left: 50%;  z-index: 5;  display: inline-flex;  align-items: center;  gap: clamp(12px, 2vw, 22px);  padding: clamp(14px, 2vw, 20px) clamp(18px, 4vw, 36px);  border: 1px solid rgba(255, 255, 255, 0.52);  border-radius: 999px;  color: #07353a;  background: rgba(255, 255, 255, 0.78);  box-shadow: 0 22px 70px rgba(4, 54, 61, 0.24);  opacity: 0;  transform: translate(-50%, -50%) scale(0.92);  backdrop-filter: blur(16px);  will-change: opacity, transform;}
.language-wave__label span {  display: grid;  min-width: 42px;  min-height: 42px;  place-items: center;  border-radius: 999px;  color: #ffffff;  background: #07353a;  font-size: 0.9rem;  font-weight: 950;  letter-spacing: 0.08em;}
.language-wave__label strong {  color: #07353a;  font-size: 1.35rem;  letter-spacing: 0;  white-space: nowrap;}
.language-wave.is-active .language-wave__sheet--lagoon {  animation: languageLagoonWash 1360ms cubic-bezier(0.18, 0.76, 0.14, 1) both;}
.language-wave.is-active .language-wave__sheet--reef {  animation: languageReefWash 1290ms cubic-bezier(0.2, 0.78, 0.12, 1) 55ms both;}
.language-wave.is-active .language-wave__sheet--foam {  animation: languageFoamWash 1220ms cubic-bezier(0.18, 0.84, 0.14, 1) 95ms both;}
.language-wave.is-active .language-wave__spark {  animation: languageFoamSpark 980ms cubic-bezier(0.18, 0.84, 0.22, 1) 150ms both;}
.language-wave.is-active .language-wave__spark--two {  animation-delay: 240ms;}
.language-wave.is-active .language-wave__spark--three {  animation-delay: 320ms;}
.language-wave.is-active .language-wave__label {  animation: languageLabelFloat 780ms cubic-bezier(0.18, 0.84, 0.22, 1) 300ms both;}
body.is-language-washing {  overflow: hidden;}
@keyframes languageLagoonWash {  0% {    transform: translate3d(-172vw, 0, 0) skewX(-5deg) scaleX(0.96);  }
  43%,  58% {    transform: translate3d(-9vw, 0, 0) skewX(-2deg) scaleX(1.03);  }
  100% {    transform: translate3d(118vw, 0, 0) skewX(4deg) scaleX(0.98);  }
}
@keyframes languageReefWash {  0% {    transform: translate3d(-164vw, 0, 0) skewX(-6deg) scaleX(0.94);  }
  46%,  61% {    transform: translate3d(-2vw, 0, 0) skewX(-1deg) scaleX(1.02);  }
  100% {    transform: translate3d(124vw, 0, 0) skewX(5deg) scaleX(0.98);  }
}
@keyframes languageFoamWash {  0% {    transform: translate3d(-156vw, 0, 0) skewX(-7deg) scaleX(0.92);  }
  48%,  63% {    transform: translate3d(4vw, 0, 0) skewX(0deg) scaleX(1.01);  }
  100% {    transform: translate3d(130vw, 0, 0) skewX(6deg) scaleX(0.96);  }
}
@keyframes languageFoamSpark {  0% {    opacity: 0;    transform: translate3d(-36vw, 10px, 0) scale(0.72);  }
  26%,  70% {    opacity: 0.82;  }
  100% {    opacity: 0;    transform: translate3d(78vw, -18px, 0) scale(1.45);  }
}
@keyframes languageLabelFloat {  0% {    opacity: 0;    transform: translate(-54%, -50%) scale(0.88);  }
  25%,  76% {    opacity: 1;    transform: translate(-50%, -50%) scale(1);  }
  100% {    opacity: 0;    transform: translate(-44%, -50%) scale(0.96);  }
}
@keyframes tapRipple {  0% {    opacity: 0.42;    transform: translate(-50%, -50%) scale(0.2);  }
  100% {    opacity: 0;    transform: translate(-50%, -50%) scale(18);  }
}
@media (min-width: 901px) {  .view-transition {    display: none !important;  }
}
@media (max-width: 980px) {  .language-toggle {    position: fixed;    top: calc(12px + env(safe-area-inset-top));    right: calc(12px + env(safe-area-inset-right));    z-index: 1120;    min-height: 38px;    padding: 0 11px;    border: 1px solid rgba(16, 32, 26, 0.14);    color: var(--green-strong);    background: rgba(255, 255, 255, 0.94);    box-shadow: 0 12px 22px rgba(16, 32, 26, 0.15);    backdrop-filter: blur(8px);  }
  .language-toggle svg {    width: 16px;    height: 16px;  }
  .language-toggle:hover {    background: #ffffff;    transform: translateY(-1px);  }
}
@media (max-width: 980px) {  .owner-period-card,  .owner-period-detail__grid {    grid-template-columns: 1fr;  }
  .owner-period-actions {    justify-content: stretch;  }
  .owner-period-actions .primary-button {    width: 100%;  }
  .owner-period-order summary,  .owner-period-order__meta,  .owner-period-order__item {    grid-template-columns: 1fr;  }
  .owner-metrics {    grid-template-columns: repeat(2, minmax(0, 1fr));  }
  .owner-analytics-grid {    grid-template-columns: 1fr;  }
  .owner-inventory-add,  .owner-inventory-item,  .owner-inventory-item__fields {    grid-template-columns: 1fr;  }
  .owner-inventory-item__visual {    width: 72px;    height: 72px;  }
  .owner-study__stats,  .owner-study__totals {    grid-template-columns: repeat(2, minmax(0, 1fr));  }
  .owner-table-wrap {    overflow-x: auto;  }
  .owner-table {    min-width: 820px;  }
}
@media (max-width: 640px) {  .owner-period-summary,  .owner-period-detail__metrics,  .owner-metrics {    grid-template-columns: 1fr;  }
  .owner-period-row {    grid-template-columns: 1fr;  }
  .owner-mode-switch {    display: grid;    grid-template-columns: 1fr 1fr;  }
  .owner-study__stats,  .owner-study__totals {    grid-template-columns: 1fr;  }
  .owner-product-row__top,  .owner-product-row__meta {    flex-direction: column;    align-items: flex-start;    gap: 4px;  }
}
@media (prefers-reduced-motion: reduce) {  *,  *::before,  *::after {    scroll-behavior: auto !important;    animation-duration: 0.01ms !important;    animation-iteration-count: 1 !important;    transition-duration: 0.01ms !important;  }
  .home-reveal,  .home-reveal.is-reveal-ready,  .home-reveal.is-visible {    opacity: 1 !important;    filter: none !important;    transform: none !important;    transition: none !important;  }
  .language-wave {    display: none !important;  }
}
@media (min-width: 981px) {  .mini-map.leaflet-container {    min-height: 250px;  }
}
@media (max-width: 1280px) and (min-width: 981px) {  .app-shell {    grid-template-columns: 250px minmax(0, 1fr);  }
  .brand-rail {    padding: 18px;  }
  .customer-grid {    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);  }
  .orders-workspace {    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);  }
  .delivery-grid {    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);  }
  .route-focus-shell.is-active {    grid-template-columns: minmax(0, 1.28fr) minmax(280px, 0.82fr);  }
}
.assistant-fab {  position: fixed;  right: calc(14px + env(safe-area-inset-right));  bottom: calc(14px + env(safe-area-inset-bottom));  z-index: 1125;  min-width: 54px;  min-height: 54px;  padding: 0 14px;  border: 1px solid rgba(16, 32, 26, 0.14);  border-radius: 999px;  color: var(--green-strong);  background: rgba(255, 255, 255, 0.96);  box-shadow: 0 16px 26px rgba(16, 32, 26, 0.2);  transition:    transform 180ms ease,    box-shadow 180ms ease,    background 180ms ease;}
.assistant-fab:hover {  transform: translateY(-1px);  background: #ffffff;}
.assistant-fab.is-open {  background: rgba(15, 122, 79, 0.12);  color: var(--green-strong);}
.assistant-widget {  position: fixed;  right: calc(14px + env(safe-area-inset-right));  bottom: calc(78px + env(safe-area-inset-bottom));  z-index: 1124;  display: grid;  width: min(390px, calc(100vw - 20px));  max-height: min(72svh, 620px);  grid-template-rows: auto minmax(120px, 1fr) auto auto;  border: 1px solid rgba(15, 122, 79, 0.18);  border-radius: 8px;  background:    radial-gradient(circle at top right, rgba(40, 111, 143, 0.12), transparent 12rem),    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 251, 248, 0.98));  box-shadow: 0 24px 46px rgba(16, 32, 26, 0.22);  backdrop-filter: blur(12px);  animation: assistantPanelIn 180ms ease both;}
.assistant-widget__header {  display: flex;  align-items: center;  justify-content: space-between;  gap: 10px;  padding: 12px;  border-bottom: 1px solid rgba(15, 122, 79, 0.14);}
.assistant-widget__header strong,.assistant-widget__header small {  display: block;}
.assistant-widget__header small {  margin-top: 2px;  color: var(--muted);  font-size: 0.8rem;}
.assistant-widget__messages {  display: grid;  align-content: start;  gap: 8px;  overflow: auto;  padding: 10px 12px;  background:    radial-gradient(circle at 10% 0%, rgba(228, 172, 63, 0.1), transparent 10rem),    linear-gradient(180deg, rgba(249, 252, 250, 0.9), rgba(255, 255, 255, 0.98));}
.assistant-message {  display: grid;  gap: 4px;  width: min(100%, 320px);  padding: 9px 10px;  border-radius: 8px;  color: var(--ink);  border: 1px solid rgba(15, 122, 79, 0.11);  background: rgba(15, 122, 79, 0.08);  box-shadow: 0 8px 18px rgba(16, 32, 26, 0.05);  animation: assistantMessageIn 180ms ease both;}
.assistant-message p {  margin: 0;  line-height: 1.45;}
.assistant-message small {  color: var(--muted);  font-size: 0.72rem;}
.assistant-message--user {  justify-self: end;  color: #ffffff;  background: var(--green);}
.assistant-message--user small {  color: rgba(255, 255, 255, 0.78);}
.assistant-widget__quick {  display: flex;  gap: 7px;  overflow-x: auto;  padding: 10px 12px;  border-top: 1px solid rgba(15, 122, 79, 0.14);  scroll-snap-type: x proximity;}
.assistant-widget__quick .ghost-button {  min-height: 32px;  white-space: nowrap;  font-size: 0.8rem;  scroll-snap-align: start;}
.assistant-widget__form {  display: grid;  grid-template-columns: minmax(0, 1fr) auto;  gap: 8px;  align-items: center;  padding: 12px;  border-top: 1px solid rgba(15, 122, 79, 0.14);}
.assistant-widget__form input {  min-height: 40px;  width: 100%;  padding: 0 10px;  border: 1px solid var(--line);  border-radius: 8px;}
.assistant-widget__form input:focus {  outline: 0;  border-color: rgba(15, 122, 79, 0.42);  box-shadow: 0 0 0 3px rgba(15, 122, 79, 0.12);}
@keyframes assistantPanelIn {  from {    opacity: 0;    transform: translateY(8px) scale(0.985);  }
  to {    opacity: 1;    transform: translateY(0) scale(1);  }
}
@keyframes assistantMessageIn {  from {    opacity: 0;    transform: translateY(5px);  }
  to {    opacity: 1;    transform: translateY(0);  }
}
@media (max-width: 980px) {  .app-shell {    grid-template-columns: 1fr;  }
  .brand-rail {    position: sticky;    top: 0;    z-index: 1100;    display: grid;    grid-template-columns: 1fr;    height: auto;    padding: 14px;    overflow: visible;  }
  .role-switch {    align-self: center;  }
  .role-switch--public,  .role-switch--private {    grid-template-columns: repeat(2, minmax(0, 1fr));  }
  .role-switch--private {    margin-top: 8px;  }
  .role-switch--private .role-tab {    min-height: 38px;    font-size: 0.9rem;  }
  .language-toggle {    justify-self: start;  }
  .admin-menu {    margin-top: 0;    padding-top: 10px;  }
  .store-visual,  .store-meta {    display: none;  }
  .customer-grid,  .orders-workspace,  .tracker-shell,  .tracker-body,  .route-focus-shell.is-active,  .delivery-grid,  .promo-band,  .hero-panel,  .market-intro,  .review-dossier,  .home-feature-board,  .review-showcase,  .delivery-story,  .review-lane {    grid-template-columns: 1fr;  }
  .hero-panel {    min-height: auto;  }
  .hero-copy h1 {    font-size: 4.35rem;  }
  .market-intro__copy h2,  .review-dossier__heading h2 {    font-size: 2.45rem;  }
  .review-showcase__heading h2 {    font-size: 2.35rem;  }
  .delivery-story__panel h2 {    font-size: 2.85rem;  }
  .hero-market-board {    min-height: 520px;  }
  .hero-proof-strip {    position: relative;    right: auto;    bottom: auto;    left: auto;    grid-column: 1;  }
  .home-feature-board article:nth-child(2) {    transform: none;  }
  .review-card--featured {    min-height: 360px;  }
  .delivery-story__media {    min-height: 320px;  }
  .cart-panel {    position: static;    max-height: none;  }
  .orders-detail-panel {    order: 1;    min-height: auto;  }
  .orders-list-panel {    order: 2;  }
  .queue-panel,  .delivery-detail {    min-height: auto;  }
  .queue-panel {    position: static;    max-height: none;    overflow: visible;  }
  .delivery-grid.is-route-focus {    grid-template-columns: 1fr;  }
  .delivery-grid.is-route-focus .queue-panel {    box-shadow: none;  }
  .tracker-detail-grid {    grid-template-columns: 1fr;  }
}
@media (max-width: 720px) {  html,  body {    overflow-x: hidden;  }
  .language-toggle {    top: calc(10px + env(safe-area-inset-top));    right: calc(10px + env(safe-area-inset-right));    min-height: 36px;    padding: 0 10px;  }
  .assistant-fab {    right: calc(10px + env(safe-area-inset-right));    bottom: calc(10px + env(safe-area-inset-bottom));    min-width: 50px;    min-height: 50px;  }
  .assistant-widget {    right: calc(10px + env(safe-area-inset-right));    left: calc(10px + env(safe-area-inset-left));    width: auto;    bottom: calc(66px + env(safe-area-inset-bottom));    max-height: min(78svh, 600px);  }
  .assistant-message {    width: min(100%, 92vw);  }
  .assistant-widget__quick {    gap: 6px;    padding: 9px 10px;  }
  .assistant-widget__form {    grid-template-columns: 1fr;  }
  .assistant-widget__form .primary-button {    width: 100%;  }
}
@media (max-width: 720px) {  .brand-rail {    grid-template-columns: minmax(0, 1fr) auto;    gap: 10px;    padding: 12px;  }
  .brand-lockup {    min-width: 0;  }
  .brand-lockup strong,  .brand-lockup small {    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;  }
  .role-switch {    grid-column: 1 / -1;    grid-auto-flow: row;  }
  .role-switch--public,  .role-switch--private {    grid-template-columns: repeat(2, minmax(0, 1fr));  }
  .role-tab {    min-width: 0;    gap: 8px;    padding: 8px;  }
  .role-tab > span:not(.tab-icon) {    min-width: 0;    overflow-wrap: anywhere;    line-height: 1.15;  }
  .role-switch--private .role-tab {    min-height: 36px;    font-size: 0.84rem;  }
  .role-switch--private .tab-icon {    width: 26px;    height: 26px;  }
  .language-toggle {    grid-column: 2;    grid-row: 1;    width: auto;    justify-content: center;  }
  .admin-menu {    grid-column: 1 / -1;    justify-self: start;    padding-top: 0;    border-top: 0;  }
  .admin-menu summary {    min-height: 32px;    font-size: 0.74rem;  }
  .language-wave__sheet {    left: -18vw;    width: 190vw;  }
  .language-wave__sheet--reef {    width: 178vw;  }
  .language-wave__sheet--foam {    width: 166vw;  }
  .language-wave__label {    width: min(86vw, 360px);    justify-content: space-between;    padding: 12px 14px;  }
  .language-wave__label span {    min-width: 38px;    min-height: 38px;  }
  .workspace {    padding:      max(14px, env(safe-area-inset-top))      max(14px, env(safe-area-inset-right))      max(14px, env(safe-area-inset-bottom))      max(14px, env(safe-area-inset-left));    overflow-x: hidden;  }
  .view,  .promo-view,  .panel,  .card,  .hero-panel,  .review-showcase__heading,  .market-intro__copy,  .review-dossier__heading,  .delivery-story__panel,  .owner-inventory-card {    min-width: 0;  }
  .hero-panel::after,  .review-showcase__heading::after {    display: none;  }
  .home-reveal[data-reveal] {    --reveal-x: 0px;    --reveal-rotate: 0deg;  }
  .primary-button,  .secondary-button,  .ghost-button,  .text-button,  .map-float-button,  .map-float-pill,  .mode-chip,  .category-tab,  .status-pill,  .timeline-step {    min-width: 0;    white-space: normal;    overflow-wrap: anywhere;    text-align: center;    line-height: 1.15;  }
  .topbar {    display: grid;  }
  .topbar-actions {    display: grid;    grid-template-columns: repeat(2, minmax(0, 1fr));    width: 100%;    justify-content: stretch;  }
  .topbar-actions > * {    width: 100%;  }
  .customer-stage-bar,  .shop-order-banner__content,  .manual-location__header {    display: grid;  }
  .customer-mode-switch {    width: 100%;    grid-template-columns: repeat(2, minmax(0, 1fr));    grid-auto-flow: row;  }
  .mode-chip {    width: 100%;    padding: 0 12px;  }
  .tracker-header {    grid-template-columns: 1fr;  }
  .tracker-header__status {    justify-items: start;  }
  .tracker-map-toolbar {    display: grid;  }
  .route-summary-grid {    grid-template-columns: 1fr;  }
  .topbar h1 {    font-size: 1.85rem;    line-height: 1.02;  }
  .form-row,  .payment-field,  .location-actions {    grid-template-columns: 1fr;  }
  .panel-heading,  .queue-summary,  .detail-actions,  .detail-header {    display: grid;  }
  .queue-summary select {    max-width: none;  }
  .delivery-detail {    order: 1;  }
  .queue-panel {    order: 2;  }
  .delivery-grid.is-route-focus,  .route-focus-shell.is-active {    grid-template-columns: 1fr;  }
  .delivery-grid.is-route-focus .queue-panel {    display: grid;  }
  .delivery-detail.is-route-focus {    transform: none;    box-shadow: var(--shadow);  }
  .route-focus-callout {    max-width: none;  }
  .detail-title h2 {    font-size: 1.55rem;    line-height: 1.04;  }
  .hero-panel {    min-height: auto;    background:      radial-gradient(circle at 74% 0%, rgba(15, 122, 79, 0.25), transparent 18rem),      linear-gradient(135deg, rgba(6, 24, 20, 0.98), rgba(10, 51, 36, 0.96));  }
  .hero-copy {    padding: 0;  }
  .hero-copy h1 {    max-width: 9ch;    font-size: 3.18rem;    line-height: 0.98;  }
  .hero-copy p {    font-size: 1rem;  }
  .hero-proof-strip {    position: relative;    right: auto;    bottom: auto;    left: auto;    margin-top: 12px;    grid-column: 1 / -1;    grid-template-columns: 1fr;  }
  .hero-market-board {    min-height: auto;  }
  .market-intro__copy,  .review-dossier__heading,  .home-feature-board article,  .review-dossier blockquote {    border-radius: 8px;  }
  .market-intro__photo {    min-height: 260px;  }
  .market-intro__copy h2,  .review-dossier__heading h2,  .review-showcase__heading h2,  .delivery-story__panel h2 {    font-size: 2rem;    line-height: 1.08;  }
  .review-card blockquote,  .review-card--featured blockquote {    font-size: 1.35rem;    line-height: 1.16;    overflow-wrap: anywhere;  }
  .review-showcase__heading,  .delivery-story__panel {    border-radius: 8px;    overflow-wrap: anywhere;  }
  .review-card,  .review-card--featured {    min-height: 230px;    border-radius: 8px;  }
  .review-card--featured blockquote {    font-size: 1.35rem;    line-height: 1.16;    max-width: 100%;  }
  .delivery-story__steps div {    grid-template-columns: 1fr;  }
  .hero-photo--main,  .hero-photo--float {    position: relative;    right: auto;    bottom: auto;    width: 100%;  }
  .hero-photo--main figcaption {    top: 10px;    right: 10px;    left: 10px;    max-width: min(90%, 320px);  }
  .hero-photo--main {    height: 270px;  }
  .hero-photo--float {    width: 88%;    height: 185px;    margin: 12px 0 0 auto;  }
  .catalog-item {    grid-template-columns: 50px minmax(0, 1fr);  }
  .product-main,  .product-meta,  .product-actions,  .product-cart-tools {    min-width: 0;  }
  .product-meta {    flex-wrap: wrap;  }
  .product-swatch {    width: 48px;    height: 48px;  }
  .product-actions {    grid-column: 2;    grid-template-columns: 1fr;    align-items: center;    justify-items: start;  }
  .product-cart-tools {    width: 100%;    justify-content: flex-start;  }
  .detail-header {    display: grid;  }
  .route-stage-header {    display: grid;  }
  .tracker-map-toolbar > * {    width: 100%;  }
  .route-nav-banner {    grid-template-columns: 1fr;  }
  .route-nav-banner__eta {    justify-items: start;    min-width: 0;  }
  .route-map--expanded,  .route-map--expanded.leaflet-container {    min-height: 300px;  }
  .route-map-shell .route-map,  .route-map-shell .route-map.leaflet-container {    min-height: 300px;  }
  .live-map,  .route-map,  .mini-map,  .leaflet-container {    max-width: 100%;  }
  .live-map:not(.leaflet-container),  .route-map:not(.leaflet-container),  .mini-map:not(.leaflet-container) {    display: grid;    place-items: center;    padding: 16px;    overflow: visible;    text-align: center;    overflow-wrap: anywhere;    word-break: break-word;    white-space: normal;    font-size: 0.9rem;  }
  .route-map-floating {    top: auto;    right: 10px;    bottom: 10px;    left: 10px;    grid-template-columns: repeat(2, minmax(0, 1fr));    justify-items: stretch;  }
  .map-float-button,  .map-float-pill {    width: 100%;    min-height: 36px;    padding: 0 10px;  }
  .map-float-button--primary,  .map-float-pill {    grid-column: 1 / -1;  }
  .delivery-detail.is-mobile-navigator {    overflow: visible;    border: 0;    background: transparent;    box-shadow: none;  }
  .delivery-detail.is-mobile-navigator .detail-header {    display: none;  }
  .delivery-detail.is-mobile-navigator .route-focus-shell,  .delivery-detail.is-mobile-navigator .route-stage {    background: transparent;  }
  .delivery-detail.is-mobile-navigator .route-stage {    padding: 0;    border-bottom: 0;  }
  .delivery-detail.is-mobile-navigator .route-map-shell--mobile-nav {    margin-top: 0;    min-height: min(78dvh, 680px);  }
  .delivery-detail.is-mobile-navigator .route-map--mobile-nav,  .delivery-detail.is-mobile-navigator .route-map--mobile-nav.leaflet-container {    min-height: min(78dvh, 680px);  }
  .delivery-detail.is-mobile-navigator .route-map-floating--mobile-nav {    top: 10px;    right: 10px;    bottom: auto;    left: auto;    grid-template-columns: 1fr;    justify-items: end;  }
  .delivery-detail.is-mobile-navigator .route-map-floating--mobile-nav .map-float-button,  .delivery-detail.is-mobile-navigator .route-map-floating--mobile-nav .map-float-pill {    width: auto;    min-width: 124px;    min-height: 34px;    padding: 0 12px;    grid-column: auto;  }
  .delivery-detail.is-mobile-navigator .mobile-nav-sheet {    left: 10px;    right: 10px;    bottom: calc(10px + env(safe-area-inset-bottom));    gap: 8px;    padding: 10px;    background: rgba(255, 255, 255, 0.78);  }
  .delivery-detail.is-mobile-navigator .mobile-nav-metrics {    grid-template-columns: repeat(3, minmax(0, 1fr));    gap: 6px;  }
  .delivery-detail.is-mobile-navigator .mobile-nav-metrics div {    padding: 7px;  }
  .delivery-detail.is-mobile-navigator .mobile-nav-sheet__sub {    display: -webkit-box;    overflow: hidden;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;  }
  .timeline,  .mobile-nav-states {    max-width: 100%;    flex-wrap: wrap;    overflow-x: visible;  }
  .delivery-state {    min-width: 0;  }
  .delivery-state strong,  .delivery-state small,  .mobile-nav-sheet__header,  .mobile-nav-sheet__sub,  .mobile-nav-metrics span,  .mobile-nav-metrics strong {    min-width: 0;    overflow-wrap: anywhere;  }
  .owner-inventory-card {    padding: 14px;  }
  .owner-inventory-add,  .owner-inventory-item {    gap: 10px;    padding: 12px;  }
  .inventory-upload-drop {    grid-template-columns: 44px minmax(0, 1fr);    min-width: 0;  }
  .inventory-upload-copy {    min-width: 0;  }
  .tracker-map--focused,  .tracker-map--focused.leaflet-container {    height: clamp(220px, 34svh, 280px);    min-height: 220px;    max-height: 280px;  }
  .tracker-summary-grid {    grid-template-columns: 1fr;  }
  .toast {    right: 14px;    bottom: calc(14px + env(safe-area-inset-bottom));    left: 14px;    max-width: none;  }
}
@media (max-width: 420px) {  .workspace {    padding:      max(12px, env(safe-area-inset-top))      max(10px, env(safe-area-inset-right))      max(12px, env(safe-area-inset-bottom))      max(10px, env(safe-area-inset-left));  }
  .brand-rail {    padding: 10px;  }
  .role-tab {    gap: 6px;    padding: 7px;    font-size: 0.86rem;  }
  .role-switch--private .role-tab {    font-size: 0.78rem;  }
  .topbar h1 {    font-size: 1.62rem;  }
  .hero-copy h1 {    font-size: 2.7rem;  }
  .market-intro__copy h2,  .review-dossier__heading h2,  .review-showcase__heading h2,  .delivery-story__panel h2 {    font-size: 1.72rem;  }
  .review-card blockquote,  .review-card--featured blockquote {    font-size: 1.12rem;  }
  .mobile-nav-metrics {    grid-template-columns: 1fr;  }
  .delivery-detail.is-mobile-navigator .mobile-nav-metrics {    grid-template-columns: repeat(3, minmax(0, 1fr));    gap: 5px;  }
  .delivery-detail.is-mobile-navigator .mobile-nav-sheet {    left: 12px;    right: 12px;    gap: 6px;    padding: 8px;  }
  .delivery-detail.is-mobile-navigator .mobile-nav-sheet__header strong {    font-size: 0.92rem;  }
  .delivery-detail.is-mobile-navigator .mobile-nav-sheet__sub {    font-size: 0.76rem;    -webkit-line-clamp: 1;  }
  .delivery-detail.is-mobile-navigator .mobile-nav-metrics div {    gap: 2px;    padding: 5px;  }
  .delivery-detail.is-mobile-navigator .mobile-nav-metrics span {    font-size: 0.58rem;  }
  .delivery-detail.is-mobile-navigator .mobile-nav-metrics strong {    font-size: 0.8rem;  }
  .delivery-detail.is-mobile-navigator .mobile-nav-states {    flex-wrap: nowrap;    overflow-x: auto;  }
  .delivery-detail.is-mobile-navigator .timeline-step {    min-height: 28px;    padding: 0 9px;    font-size: 0.72rem;  }
  .owner-mode-switch {    grid-template-columns: 1fr;  }
  .owner-inventory-item__actions {    grid-template-columns: 1fr;  }
}

/* Old Harbour visual redesign */:root {  --ink: #211915;  --muted: #71655c;  --soft: #fff3dc;  --surface: #fffaf1;  --surface-strong: #ffffff;  --line: #ead7bd;  --green: #008f7a;  --green-strong: #07463d;  --coral: #df2638;  --gold: #ffc928;  --blue: #0877a8;  --mural-orange: #f47b27;  --mural-teal: #00a9a5;  --mural-red: #d81735;  --shadow: 0 18px 42px rgba(64, 41, 24, 0.14);  --radius: 8px;  font-family:    "Aptos", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system,    BlinkMacSystemFont, sans-serif;}
html {  background:    linear-gradient(90deg, rgba(216, 23, 53, 0.06) 0 1px, transparent 1px 48px),    linear-gradient(180deg, rgba(0, 169, 165, 0.07) 0 1px, transparent 1px 48px),    #fff3dc;}
body {  background:    radial-gradient(circle at 8% 8%, rgba(255, 201, 40, 0.24), transparent 18rem),    radial-gradient(circle at 94% 14%, rgba(0, 169, 165, 0.22), transparent 18rem),    linear-gradient(180deg, rgba(255, 250, 241, 0.9), rgba(255, 243, 220, 0.96));}
.app-shell {  grid-template-columns: 248px minmax(0, 1fr);}
.brand-rail {  gap: 18px;  color: #fff9ef;  background:    linear-gradient(180deg, rgba(33, 25, 21, 0.1), rgba(33, 25, 21, 0.48)),    linear-gradient(155deg, #d81735 0 27%, #ffc928 27% 38%, #008f7a 38% 66%, #0877a8 66% 100%);}
.brand-rail::before {  content: "";  position: absolute;  inset: 0;  pointer-events: none;  background:    linear-gradient(135deg, transparent 0 28%, rgba(255, 255, 255, 0.12) 28% 29%, transparent 29% 62%, rgba(255, 255, 255, 0.1) 62% 63%, transparent 63%),    radial-gradient(circle at 18% 92%, rgba(255, 201, 40, 0.24), transparent 12rem);}
.brand-rail > * {  position: relative;  z-index: 1;}
.brand-lockup {  align-items: flex-start;  flex-direction: column;  gap: 10px;  padding-bottom: 6px;}
.brand-mark {  width: 146px;  height: 68px;  padding: 5px;  background: rgba(255, 255, 255, 0.92);  box-shadow: 0 16px 30px rgba(33, 25, 21, 0.22);}
.brand-lockup strong {  max-width: 12ch;  color: #ffffff;  font-size: 1.45rem;  line-height: 0.95;  text-transform: uppercase;}
.brand-lockup small {  color: rgba(255, 255, 255, 0.8);  font-weight: 800;}
.role-switch {  gap: 7px;}
.role-tab {  min-height: 48px;  border: 1px solid rgba(255, 255, 255, 0.22);  color: rgba(255, 255, 255, 0.82);  background: rgba(33, 25, 21, 0.16);  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);}
.role-tab:hover,.role-tab.is-active {  transform: translateX(0) translateY(-1px);  color: #211915;  background: #ffc928;  box-shadow: 0 12px 24px rgba(33, 25, 21, 0.2);}
.tab-icon {  border-radius: 999px;  background: rgba(255, 255, 255, 0.16);}
.role-tab.is-active .tab-icon,.role-tab:hover .tab-icon {  background: rgba(33, 25, 21, 0.12);}
.language-toggle,.admin-menu summary {  border-color: rgba(255, 255, 255, 0.28);  color: #ffffff;  background: rgba(33, 25, 21, 0.18);}
.store-visual {  min-height: 210px;  background:    linear-gradient(180deg, rgba(33, 25, 21, 0.04), rgba(33, 25, 21, 0.82)),    url("assets/oldharbour4.jpg?v=20260513");  background-position: center;  background-size: cover;}
.workspace {  padding: clamp(14px, 2vw, 26px);}
.topbar {  position: relative;  align-items: center;  margin-bottom: 16px;  padding: 16px;  border: 1px solid rgba(234, 215, 189, 0.9);  border-radius: 8px;  background:    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 250, 241, 0.78)),    linear-gradient(90deg, rgba(216, 23, 53, 0.08), transparent 42%, rgba(0, 169, 165, 0.08));  box-shadow: 0 12px 28px rgba(64, 41, 24, 0.08);}
.topbar h1 {  font-size: clamp(1.8rem, 4vw, 3.1rem);  line-height: 0.98;  text-transform: uppercase;}
.eyebrow {  color: var(--mural-red);  letter-spacing: 0.08em;}
.hero-panel {  grid-template-columns: minmax(310px, 0.74fr) minmax(360px, 1.08fr);  gap: clamp(20px, 3vw, 42px);  min-height: min(760px, calc(100svh - 44px));  padding: clamp(18px, 4vw, 46px);  border: 0;  border-radius: 8px;  color: #fffaf1;  background:    linear-gradient(110deg, rgba(33, 25, 21, 0.9) 0 42%, rgba(33, 25, 21, 0.18) 42% 100%),    url("assets/oldharbour1.jpg?v=20260513");  background-position: center;  background-size: cover;  box-shadow: 0 24px 58px rgba(64, 41, 24, 0.22);}
.hero-panel::before {  inset: 14px;  border: 3px solid rgba(255, 201, 40, 0.78);}
.hero-panel::after {  right: auto;  bottom: -8rem;  left: -8rem;  width: 22rem;  height: 22rem;  background: rgba(216, 23, 53, 0.24);  filter: blur(0);}
.hero-sign {  position: absolute;  top: clamp(18px, 3vw, 34px);  right: clamp(18px, 3vw, 34px);  z-index: 2;  display: grid;  gap: 2px;  min-width: 160px;  padding: 10px 14px;  border: 2px solid rgba(255, 255, 255, 0.78);  border-radius: 8px;  color: #211915;  background: #ffc928;  box-shadow: 0 14px 26px rgba(33, 25, 21, 0.24);  transform: rotate(1.5deg);}
.hero-sign span,.hero-sign strong {  display: block;  line-height: 1;  text-transform: uppercase;}
.hero-sign span {  font-size: 0.72rem;  font-weight: 900;}
.hero-sign strong {  font-size: 1.05rem;}
.hero-copy {  align-self: end;  padding: 28px 0 24px;}
.hero-copy h1 {  max-width: 9ch;  margin: 0 0 18px;  color: #ffffff;  font-size: clamp(4.1rem, 8.4vw, 7.8rem);  line-height: 0.78;  text-transform: uppercase;  text-shadow: 0 8px 20px rgba(33, 25, 21, 0.34);}
.hero-copy p {  max-width: 560px;  color: rgba(255, 250, 241, 0.92);  font-size: 1.05rem;  font-weight: 650;}
.hero-market-board {  min-height: 560px;}
.hero-photo {  border: 4px solid #fffaf1;  border-radius: 8px;  background: #211915;  box-shadow: 0 24px 50px rgba(33, 25, 21, 0.34);}
.hero-photo--main {  top: 92px;  width: min(100%, 560px);  height: 340px;}
.hero-photo--float {  right: clamp(14px, 4vw, 58px);  bottom: 12px;  width: min(64%, 330px);  height: 250px;}
.hero-photo figcaption {  color: #211915;  background: rgba(255, 201, 40, 0.94);  font-weight: 850;}
.hero-proof-strip {  border: 0;  background: #211915;  box-shadow: 0 16px 26px rgba(33, 25, 21, 0.22);}
.hero-proof-strip div {  background: linear-gradient(180deg, rgba(255, 250, 241, 0.94), rgba(255, 243, 220, 0.92));}
.hero-proof-strip strong {  color: #d81735;}
.hero-proof-strip span {  color: #211915;  font-weight: 850;}
.primary-button,.secondary-button,.ghost-button,.icon-button,.add-button,.quantity-button,.mode-chip,.category-tab,.map-float-button,.map-float-pill {  border-radius: 8px;}
.primary-button {  color: #211915;  background: #ffc928;  box-shadow: 0 10px 0 rgba(33, 25, 21, 0.18), 0 18px 30px rgba(64, 41, 24, 0.18);}
.primary-button:hover {  color: #ffffff;  background: #d81735;}
.primary-button span:last-child {  color: #ffffff;  background: #d81735;}
.secondary-button,.ghost-button,.icon-button {  border-color: #ead7bd;  background: #fffaf1;}
.secondary-button:hover,.ghost-button:hover,.icon-button:hover {  border-color: rgba(216, 23, 53, 0.38);  color: #d81735;}
.home-marquee {  border: 0;  border-radius: 8px;  background: #211915;  box-shadow: 0 16px 30px rgba(64, 41, 24, 0.14);}
.home-marquee::before,.home-marquee::after {  display: none;}
.home-marquee__track {  color: #fffaf1;}
.home-marquee__track span::after {  background: #ffc928;}
.market-intro {  grid-template-columns: minmax(0, 0.72fr) minmax(420px, 1fr);  align-items: stretch;  padding: clamp(18px, 3vw, 32px);  border: 1px solid rgba(234, 215, 189, 0.9);  border-left: 8px solid #00a9a5;  border-radius: 8px;  background: #fffaf1;  box-shadow: var(--shadow);}
.market-intro__copy {  align-content: center;  padding: 0;}
.market-intro__copy h2 {  font-size: clamp(2.1rem, 4vw, 4.6rem);  line-height: 0.9;  text-transform: uppercase;}
.market-intro__photo {  min-height: 420px;  border: 0;  box-shadow: none;}
.market-intro__photo img {  border-radius: 8px;}
.review-showcase {  grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1fr);}
.review-showcase__heading {  background:    linear-gradient(180deg, rgba(33, 25, 21, 0.12), rgba(33, 25, 21, 0.82)),    url("assets/oldharbour2.jpg?v=20260513");  background-position: center;  background-size: cover;}
.review-showcase__heading::after {  background: #ffc928;  opacity: 0.36;}
.review-showcase__heading h2 {  font-size: clamp(2rem, 4vw, 3.45rem);  line-height: 0.94;  text-transform: uppercase;}
.review-card {  border: 1px solid rgba(234, 215, 189, 0.9);  border-left: 7px solid var(--mural-teal);  border-radius: 8px;  background: #fffaf1;  box-shadow: 0 14px 26px rgba(64, 41, 24, 0.1);}
.review-card--featured {  border-left-color: var(--mural-red);  background: #211915;  color: #fffaf1;}
.review-card__stars {  width: fit-content;  padding: 5px 8px;  border-radius: 8px;  color: #211915;  background: #ffc928;  font-size: 0.78rem;  font-weight: 950;  text-transform: uppercase;}
.delivery-story {  align-items: stretch;  border-radius: 8px;  background:    linear-gradient(90deg, #008f7a 0 10px, transparent 10px),    #211915;}
.delivery-story__media {  min-height: 360px;}
.delivery-story__media img {  filter: saturate(1.08) contrast(1.04);}
.delivery-story__panel {  color: #fffaf1;  background: transparent;}
.delivery-story__panel h2 {  color: #ffffff;  text-transform: uppercase;}
.delivery-story__steps div {  border-color: rgba(255, 255, 255, 0.16);  background: rgba(255, 250, 241, 0.08);}
.delivery-story__steps span {  color: #ffc928;}
.customer-mode-switch,.location-mode-switch {  border: 0;  background: #211915;  box-shadow: none;}
.mode-chip {  color: #fffaf1;  background: transparent;}
.mode-chip.is-active,.location-mode-switch .mode-chip.is-active {  color: #211915;  background: #ffc928;  box-shadow: none;}
.customer-grid {  grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);}
.market-panel,.cart-panel,.tracker-panel,.queue-panel,.delivery-detail,.owner-report,.login-panel {  border: 1px solid rgba(234, 215, 189, 0.92);  border-radius: 8px;  background: rgba(255, 250, 241, 0.94);  box-shadow: 0 16px 34px rgba(64, 41, 24, 0.11);}
.market-panel {  overflow: hidden;  background:    linear-gradient(180deg, rgba(255, 250, 241, 0.96), rgba(255, 243, 220, 0.9));}
.catalog-tools {  gap: 14px;  padding: 16px;  border-bottom: 1px solid #ead7bd;  background:    linear-gradient(90deg, rgba(216, 23, 53, 0.1), transparent 30%, rgba(0, 169, 165, 0.1)),    rgba(255, 250, 241, 0.96);}
.search-control {  min-height: 48px;  border: 2px solid #211915;  background: #ffffff;  box-shadow: 5px 5px 0 rgba(33, 25, 21, 0.12);}
.category-tabs {  gap: 10px;  padding-bottom: 2px;}
.category-tab {  min-height: 38px;  border: 2px solid #211915;  color: #211915;  background: #fffaf1;  box-shadow: 4px 4px 0 rgba(33, 25, 21, 0.1);}
.category-tab.is-active {  border-color: #211915;  color: #211915;  background: #ffc928;}
.catalog-list {  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));  gap: 14px;  padding: 14px;}
.catalog-item {  position: relative;  grid-template-columns: 76px minmax(0, 1fr);  grid-template-areas:    "swatch main"    "actions actions";  align-items: start;  gap: 12px;  min-height: 182px;  padding: 14px;  border: 2px solid rgba(33, 25, 21, 0.1);  border-bottom: 2px solid rgba(33, 25, 21, 0.1);  border-radius: 8px;  background: #ffffff;  box-shadow: 6px 6px 0 rgba(33, 25, 21, 0.08);}
.catalog-item::before {  content: attr(data-category);  position: absolute;  top: 10px;  right: 10px;  max-width: 45%;  padding: 4px 7px;  border-radius: 8px;  color: #fffaf1;  background: #211915;  font-size: 0.68rem;  font-weight: 950;  text-transform: uppercase;}
.catalog-item[data-category="Produce"] {  border-top: 6px solid #008f7a;}
.catalog-item[data-category="Pantry"] {  border-top: 6px solid #f47b27;}
.catalog-item[data-category="Drinks"] {  border-top: 6px solid #0877a8;}
.catalog-item[data-category="Home"] {  border-top: 6px solid #d81735;}
.catalog-item:hover {  transform: translateY(-2px);  background: #ffffff;  box-shadow: 8px 8px 0 rgba(33, 25, 21, 0.14);}
.catalog-item.is-in-cart {  background: #fff8e7;  box-shadow: 8px 8px 0 rgba(255, 201, 40, 0.38);}
.catalog-item.is-low-stock {  box-shadow: 8px 8px 0 rgba(244, 123, 39, 0.26);}
.product-swatch {  grid-area: swatch;  width: 72px;  height: 72px;  border: 3px solid #211915;  border-radius: 8px;  box-shadow: 4px 4px 0 rgba(33, 25, 21, 0.12);}
.product-main {  grid-area: main;  padding-right: 54px;}
.product-main h3 {  font-size: 1.06rem;  line-height: 1.1;}
.product-meta {  gap: 6px;  margin-top: 8px;}
.tag {  min-height: 23px;  border-radius: 8px;  font-weight: 950;}
.product-actions {  grid-area: actions;  grid-template-columns: 1fr auto;  align-items: center;  justify-items: stretch;  width: 100%;  padding-top: 12px;  border-top: 1px dashed rgba(33, 25, 21, 0.18);}
.product-actions strong {  font-size: 1.28rem;  color: #d81735;}
.add-button,.quantity-button {  border: 2px solid #211915;  color: #211915;  background: #ffc928;  box-shadow: 3px 3px 0 rgba(33, 25, 21, 0.14);}
.add-button.is-active {  background: #00a9a5;}
.quantity-button--subtle {  background: #fff3dc;}
.product-quantity-chip {  color: #ffffff;  background: #d81735;}
.cart-panel {  border-top: 8px solid #d81735;}
.panel-heading,.queue-summary {  border-bottom-color: #ead7bd;  background:    linear-gradient(90deg, rgba(255, 201, 40, 0.18), transparent),    #fffaf1;}
.cart-line,.customer-order-card,.order-card,.tracker-card,.detail-card,.owner-period-row,.owner-period-order,.owner-inventory-item {  border-color: rgba(33, 25, 21, 0.12);  border-radius: 8px;  background: #ffffff;}
.cart-line {  margin: 10px 12px;  border: 1px solid rgba(33, 25, 21, 0.12);  box-shadow: 4px 4px 0 rgba(33, 25, 21, 0.06);}
.checkout-form input,.checkout-form textarea,.queue-summary select,.owner-inventory-item input,.owner-inventory-item select,.owner-inventory-add input,.owner-inventory-add select {  border: 2px solid rgba(33, 25, 21, 0.14);  border-radius: 8px;  background: #ffffff;}
.payment-option span {  border: 2px solid #211915;  border-radius: 8px;  background: #fffaf1;}
.payment-option input:checked + span {  border-color: #211915;  color: #211915;  background: #ffc928;}
.mini-map,.route-map,.live-map,.tracker-map.leaflet-container,.mini-map.leaflet-container,.route-map.leaflet-container {  border: 2px solid #211915;  border-radius: 8px;  background:    linear-gradient(90deg, rgba(8, 119, 168, 0.09) 1px, transparent 1px),    linear-gradient(180deg, rgba(8, 119, 168, 0.09) 1px, transparent 1px),    #e5f4ef;  box-shadow: 6px 6px 0 rgba(33, 25, 21, 0.08);}
.tracker-header,.tracker-info-panel {  background: #fffaf1;}
.tracker-shell {  background: #211915;}
.metric {  border: 1px solid rgba(33, 25, 21, 0.1);  background: #ffffff;}
.timeline-step,.delivery-state,.status-pill,.live-pill {  border-radius: 8px;}
.status-pill,.live-pill {  color: #211915;  background: rgba(255, 201, 40, 0.25);}
.status-pill.delivered,.status-pill.is-live,.live-pill.is-live {  color: #ffffff;  background: #008f7a;}
.queue-panel {  border-top: 8px solid #0877a8;}
.order-card {  margin: 10px;  border: 2px solid rgba(33, 25, 21, 0.1);  box-shadow: 5px 5px 0 rgba(33, 25, 21, 0.07);}
.order-card.is-selected,.customer-order-card.is-selected {  border-color: #211915;  background: #fff8e7;  box-shadow: 6px 6px 0 rgba(255, 201, 40, 0.42);}
.delivery-detail {  border-top: 8px solid #008f7a;}
.delivery-detail.is-route-focus {  background: #fffaf1;  box-shadow: 0 22px 44px rgba(64, 41, 24, 0.16);}
.route-focus-shell.is-active,.route-focus-sidebar {  background: #ead7bd;}
.route-stage,.detail-card {  background: #fffaf1;}
.route-nav-banner {  border: 2px solid #211915;  color: #211915;  background:    linear-gradient(90deg, #ffc928, #fff3dc);  box-shadow: 6px 6px 0 rgba(33, 25, 21, 0.12);}
.route-summary-card,.route-steps-panel {  border: 1px solid rgba(33, 25, 21, 0.12);  background: #ffffff;}
.map-float-button,.map-float-pill {  border: 2px solid #211915;  color: #211915;  background: #fffaf1;  box-shadow: 4px 4px 0 rgba(33, 25, 21, 0.18);}
.map-float-button--primary {  background: #ffc928;}
.owner-report {  border-top: 8px solid #d81735;}
.owner-mode-switch {  background:    linear-gradient(90deg, rgba(216, 23, 53, 0.14), rgba(0, 169, 165, 0.12)),    #fffaf1;}
.owner-mode-switch .mode-chip {  color: #211915;  background: #ffffff;}
.owner-mode-switch .mode-chip.is-active {  color: #211915;  background: #ffc928;  box-shadow: 4px 4px 0 rgba(33, 25, 21, 0.12);}
.owner-metrics,.owner-period-summary,.owner-period-detail__metrics {  gap: 10px;  padding: 10px;  border: 0;  background: #fff3dc;}
.owner-metric,.owner-period-summary div {  border: 1px solid rgba(33, 25, 21, 0.1);  border-radius: 8px;  background: #ffffff;}
.owner-metric strong {  color: #d81735;}
.owner-table th,.owner-table td,.owner-study__table th,.owner-study__table td {  border-bottom-color: rgba(33, 25, 21, 0.1);}
.owner-insight-card,.owner-inventory-card,.owner-study {  background: #fffaf1;}
.owner-inventory-add,.owner-inventory-item {  border: 2px solid rgba(33, 25, 21, 0.1);  box-shadow: 5px 5px 0 rgba(33, 25, 21, 0.06);}
.inventory-upload-drop {  border: 2px dashed rgba(33, 25, 21, 0.22);  border-radius: 8px;  background: #fff8e7;}
.assistant-fab {  border: 2px solid #211915;  color: #211915;  background: #ffc928;  box-shadow: 6px 6px 0 rgba(33, 25, 21, 0.18);}
.assistant-panel {  border: 2px solid #211915;  border-radius: 8px;  background: #fffaf1;  box-shadow: 10px 10px 0 rgba(33, 25, 21, 0.14);}
@media (max-width: 1100px) {  .app-shell {    grid-template-columns: 216px minmax(0, 1fr);  }
  .hero-panel {    grid-template-columns: 1fr;    min-height: auto;  }
  .hero-market-board {    min-height: 470px;  }
  .hero-photo--main {    top: 0;  }
  .hero-sign {    top: auto;    bottom: 16px;  }
  .customer-grid {    grid-template-columns: 1fr;  }
  .cart-panel {    position: static;    max-height: none;  }
}
@media (max-width: 860px) {  .app-shell {    display: block;  }
  .brand-rail {    position: sticky;    z-index: 50;    top: 0;    height: auto;    flex-direction: row;    align-items: center;    gap: 10px;    overflow-x: auto;    padding: 10px;  }
  .brand-lockup {    flex: 0 0 auto;    flex-direction: row;    align-items: center;  }
  .brand-mark {    width: 88px;    height: 42px;  }
  .brand-lockup strong {    max-width: 9ch;    font-size: 0.92rem;  }
  .store-visual,  .store-meta {    display: none;  }
  .role-switch--public,  .role-switch--private {    display: flex;    gap: 8px;  }
  .role-tab {    min-height: 38px;    padding: 7px 9px;  }
  .tab-icon {    width: 26px;    height: 26px;  }
  .language-toggle {    min-height: 38px;  }
  .admin-menu {    padding-top: 0;    border-top: 0;  }
  .workspace {    padding: 12px;  }
  .hero-copy h1 {    font-size: clamp(3.4rem, 15vw, 5.3rem);  }
  .hero-market-board {    min-height: 420px;  }
  .hero-photo--main {    width: 100%;    height: 280px;  }
  .hero-photo--float {    width: 58%;    height: 190px;  }
  .hero-proof-strip,  .market-intro,  .review-showcase,  .delivery-story {    grid-template-columns: 1fr;  }
  .market-intro__photo {    min-height: 260px;  }
  .catalog-list {    grid-template-columns: 1fr;    padding: 10px;  }
  .topbar {    align-items: flex-start;    flex-direction: column;  }
}
@media (max-width: 560px) {  .hero-panel {    padding: 14px;  }
  .hero-sign {    display: none;  }
  .hero-copy {    padding-top: 120px;  }
  .hero-photo figcaption {    display: none;  }
  .hero-proof-strip {    grid-template-columns: 1fr;  }
  .catalog-item {    min-height: 0;  }
  .product-main {    padding-right: 0;  }
  .catalog-item::before {    position: static;    grid-column: 1 / -1;    max-width: none;    width: fit-content;    order: -1;  }
  .product-actions {    grid-template-columns: 1fr;    justify-items: start;  }
  .product-cart-tools {    justify-self: stretch;  }
  .add-button,  .quantity-button {    width: 42px;    height: 38px;  }
}

/* Old Harbour V2: top-bar product UI, no legacy side-rail layout */
body {
  background:
    linear-gradient(90deg, rgba(216, 23, 53, 0.055) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, rgba(8, 119, 168, 0.055) 0 1px, transparent 1px 64px),
    #fff0d6;
}

.app-shell {
  display: block;
  min-height: 100svh;
}

.brand-rail {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  height: auto;
  min-height: 78px;
  padding: 10px clamp(14px, 3vw, 34px);
  overflow: visible;
  color: #211915;
  background:
    linear-gradient(90deg, #d81735 0 12px, #ffc928 12px 24px, #008f7a 24px 36px, #0877a8 36px 48px, transparent 48px),
    rgba(255, 250, 241, 0.94);
  border-bottom: 3px solid #211915;
  box-shadow: 0 12px 0 rgba(33, 25, 21, 0.06);
  backdrop-filter: blur(14px);
}

.brand-rail::before,
.store-visual,
.store-meta {
  display: none;
}

.brand-lockup {
  display: grid;
  grid-template-columns: 108px auto;
  align-items: center;
  gap: 12px;
  padding: 0;
}

.brand-mark {
  width: 108px;
  height: 52px;
  padding: 3px;
  border: 2px solid #211915;
  background: #ffffff;
  box-shadow: 4px 4px 0 rgba(33, 25, 21, 0.12);
}

.brand-lockup strong {
  max-width: 13ch;
  color: #211915;
  font-size: 1rem;
  line-height: 0.96;
  text-transform: uppercase;
}

.brand-lockup small {
  color: #71655c;
  font-size: 0.76rem;
  font-weight: 900;
}

.role-switch--public {
  display: flex;
  justify-content: center;
}

.role-switch--private {
  display: flex;
  margin-top: 0;
}

.role-tab {
  min-height: 42px;
  padding: 7px 12px;
  border: 2px solid transparent;
  color: #211915;
  background: transparent;
  font-weight: 900;
  box-shadow: none;
}

.role-tab:hover,
.role-tab.is-active {
  border-color: #211915;
  color: #211915;
  background: #ffc928;
  transform: translateY(-1px);
  box-shadow: 4px 4px 0 rgba(33, 25, 21, 0.14);
}

.tab-icon {
  width: 28px;
  height: 28px;
  color: #211915;
  background: rgba(33, 25, 21, 0.08);
}

.language-toggle,
.admin-menu summary {
  min-height: 38px;
  border: 2px solid #211915;
  color: #211915;
  background: #ffffff;
  box-shadow: 3px 3px 0 rgba(33, 25, 21, 0.12);
}

.admin-menu {
  padding-top: 0;
  border-top: 0;
}

.workspace {
  padding: clamp(14px, 2.4vw, 32px);
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1fr);
  grid-template-areas:
    "media copy"
    "media proof";
  gap: clamp(18px, 3vw, 36px);
  min-height: min(690px, calc(100svh - 126px));
  align-items: stretch;
  padding: clamp(14px, 2vw, 24px);
  overflow: hidden;
  color: #211915;
  background:
    linear-gradient(135deg, rgba(255, 250, 241, 0.96), rgba(255, 240, 214, 0.92));
  border: 3px solid #211915;
  box-shadow: 12px 12px 0 rgba(33, 25, 21, 0.12);
}

.hero-panel::before {
  display: none;
}

.hero-panel::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 220px;
  height: 220px;
  border: 26px solid rgba(216, 23, 53, 0.16);
  border-radius: 999px;
  background: transparent;
  filter: none;
}

.hero-market-board {
  grid-area: media;
  position: relative;
  z-index: 1;
  min-height: 100%;
  border: 3px solid #211915;
  border-radius: 8px;
  overflow: hidden;
  background: #211915;
  box-shadow: 8px 8px 0 rgba(33, 25, 21, 0.12);
}

.hero-photo {
  position: absolute;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero-photo--main {
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-photo--float {
  right: 16px;
  bottom: 16px;
  width: min(42%, 220px);
  height: 170px;
  border: 3px solid #fffaf1;
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(33, 25, 21, 0.28);
}

.hero-photo img {
  filter: saturate(1.05) contrast(1.03);
}

.hero-photo figcaption {
  display: none;
}

.hero-sign {
  top: auto;
  right: auto;
  bottom: 30px;
  left: 30px;
  z-index: 3;
  min-width: 190px;
  border: 3px solid #211915;
  background: #ffc928;
  transform: rotate(-2deg);
}

.hero-copy {
  grid-area: copy;
  position: static;
  z-index: 1;
  display: grid;
  align-content: center;
  width: 100%;
  max-width: 680px;
  padding: clamp(22px, 5vw, 54px) clamp(10px, 4vw, 42px) 116px 0;
  animation: none;
}

.hero-copy h1 {
  max-width: 10ch;
  margin: 0;
  color: #211915;
  font-size: clamp(3.35rem, 6vw, 6.4rem);
  line-height: 0.82;
  text-transform: uppercase;
  text-shadow: none;
  overflow-wrap: normal;
  word-break: normal;
}

.hero-copy p {
  max-width: 540px;
  margin-top: 24px;
  color: #4f433a;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 750;
  line-height: 1.55;
}

.hero-actions {
  position: absolute;
  right: clamp(22px, 4vw, 58px);
  bottom: clamp(22px, 4vw, 42px);
  z-index: 5;
  display: flex;
  gap: 12px;
  margin: 0;
}

.hero-actions .primary-button,
.hero-actions .secondary-button {
  min-height: 54px;
  border: 3px solid #211915;
  box-shadow: 5px 5px 0 rgba(33, 25, 21, 0.18);
}

.hero-actions .secondary-button {
  color: #211915;
  background: #ffffff;
  backdrop-filter: none;
}

.hero-proof-strip {
  grid-area: proof;
  align-self: end;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 clamp(10px, 4vw, 42px) 0 0;
  border: 3px solid #211915;
  border-radius: 8px;
  background: #211915;
  box-shadow: 6px 6px 0 rgba(33, 25, 21, 0.1);
}

.hero-proof-strip div {
  min-height: 86px;
  padding: 14px;
  background: #ffffff;
}

.hero-proof-strip div:nth-child(2) {
  background: #fff3dc;
}

.hero-proof-strip strong {
  color: #d81735;
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
}

.hero-proof-strip span {
  color: #211915;
  font-weight: 950;
}

.home-marquee {
  margin-top: 20px;
  border: 3px solid #211915;
  background: #211915;
  box-shadow: 8px 8px 0 rgba(33, 25, 21, 0.1);
}

.market-intro,
.review-showcase,
.delivery-story {
  margin-top: 26px;
}

.market-intro {
  grid-template-columns: minmax(380px, 0.88fr) minmax(0, 1fr);
  border: 3px solid #211915;
  border-left-width: 16px;
  box-shadow: 10px 10px 0 rgba(33, 25, 21, 0.1);
}

.customer-grid {
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
}

.customer-main {
  grid-column: 2;
}

.cart-panel {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 104px;
  max-height: calc(100vh - 126px);
  border-top: 0;
  border-left: 12px solid #d81735;
}

.market-panel {
  border: 3px solid #211915;
  box-shadow: 8px 8px 0 rgba(33, 25, 21, 0.08);
}

.catalog-list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.catalog-item {
  min-height: 214px;
}

.topbar {
  border: 3px solid #211915;
  box-shadow: 7px 7px 0 rgba(33, 25, 21, 0.09);
}

.delivery-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}

.queue-panel {
  grid-column: 2;
  grid-row: 1;
  top: 104px;
  border-top: 0;
  border-right: 12px solid #0877a8;
}

.delivery-detail {
  grid-column: 1;
  grid-row: 1;
  border-top: 0;
  border-left: 12px solid #008f7a;
}

.owner-report {
  border-top: 0;
  border-left: 12px solid #d81735;
}

@media (max-width: 980px) {
  .brand-rail {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    overflow-x: auto;
  }

  .role-switch--public,
  .admin-menu {
    grid-row: 2;
  }

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

  .hero-market-board {
    min-height: 360px;
  }

  .hero-copy {
    padding: 6px 4px 96px;
  }

  .hero-copy h1 {
    max-width: 11ch;
    font-size: clamp(3.1rem, 10vw, 5.3rem);
  }

  .hero-proof-strip {
    margin: 0;
  }

  .customer-grid,
  .delivery-grid,
  .market-intro,
  .review-showcase,
  .delivery-story {
    grid-template-columns: 1fr;
  }

  .customer-main,
  .cart-panel,
  .queue-panel,
  .delivery-detail {
    grid-column: auto;
    grid-row: auto;
  }

  .cart-panel,
  .queue-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .brand-rail {
    min-height: 68px;
    padding: 8px 10px;
  }

  .brand-lockup {
    grid-template-columns: 76px auto;
  }

  .brand-mark {
    width: 76px;
    height: 38px;
  }

  .brand-lockup strong {
    font-size: 0.78rem;
  }

  .brand-lockup small {
    display: none;
  }

  .role-tab > span:not(.tab-icon) {
    display: inline;
    font-size: 0.78rem;
  }

  .hero-panel {
    padding: 10px;
    box-shadow: 6px 6px 0 rgba(33, 25, 21, 0.12);
  }

  .hero-market-board {
    min-height: 300px;
  }

  .hero-photo--float {
    width: 46%;
    height: 128px;
  }

  .hero-sign {
    left: 14px;
    bottom: 14px;
    min-width: 142px;
    padding: 8px 10px;
  }

  .hero-copy {
    padding-bottom: 118px;
  }

  .hero-copy h1 {
    max-width: 9ch;
    font-size: clamp(2.85rem, 16vw, 4.45rem);
  }

  .hero-actions {
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-actions .primary-button,
  .hero-actions .secondary-button {
    min-height: 48px;
    padding: 0 10px;
    text-align: center;
  }

  .hero-proof-strip {
    grid-template-columns: 1fr;
  }

  .catalog-list {
    grid-template-columns: 1fr;
  }
}

/* Old Harbour V3 hard override: prevents cached base layout from visually reappearing. */
@media (min-width: 981px) {
  .app-shell {
    display: block !important;
  }

  .brand-rail {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: auto minmax(320px, 1fr) auto auto !important;
    align-items: center !important;
    height: auto !important;
    min-height: 78px !important;
    overflow: visible !important;
    padding: 10px clamp(18px, 3vw, 36px) !important;
    color: #211915 !important;
    background:
      linear-gradient(90deg, #d81735 0 14px, #ffc928 14px 28px, #008f7a 28px 42px, #0877a8 42px 56px, transparent 56px),
      rgba(255, 250, 241, 0.96) !important;
    border-bottom: 3px solid #211915 !important;
    box-shadow: 0 12px 0 rgba(33, 25, 21, 0.06) !important;
  }

  .brand-lockup {
    display: grid !important;
    grid-template-columns: 108px auto !important;
    align-items: center !important;
  }

  .brand-mark {
    width: 108px !important;
    height: 52px !important;
  }

  .brand-lockup strong {
    color: #211915 !important;
    font-size: 1rem !important;
    line-height: 0.96 !important;
  }

  .role-switch--public,
  .role-switch--private {
    display: flex !important;
    margin-top: 0 !important;
  }

  .role-tab {
    color: #211915 !important;
    background: transparent !important;
  }

  .role-tab.is-active,
  .role-tab:hover {
    color: #211915 !important;
    background: #ffc928 !important;
  }

  .store-visual,
  .store-meta,
  .brand-rail::before {
    display: none !important;
  }
}

.hero-panel {
  grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "media copy"
    "media proof" !important;
  align-items: stretch !important;
  min-height: min(690px, calc(100svh - 126px)) !important;
  padding: clamp(14px, 2vw, 24px) !important;
  color: #211915 !important;
  background: linear-gradient(135deg, rgba(255, 250, 241, 0.98), rgba(255, 240, 214, 0.94)) !important;
  border: 3px solid #211915 !important;
  box-shadow: 12px 12px 0 rgba(33, 25, 21, 0.12) !important;
}

.hero-panel::before {
  display: none !important;
}

.hero-copy {
  grid-area: copy !important;
  align-content: center !important;
  max-width: 680px !important;
  padding: clamp(22px, 5vw, 54px) clamp(10px, 4vw, 42px) 116px 0 !important;
}

.hero-copy h1 {
  max-width: 10ch !important;
  margin: 0 !important;
  color: #211915 !important;
  font-size: clamp(3rem, 5.4vw, 5.85rem) !important;
  line-height: 0.88 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-shadow: none !important;
}

.hero-copy p {
  max-width: 540px !important;
  color: #4f433a !important;
}

.hero-market-board {
  grid-area: media !important;
  display: block !important;
  min-height: 100% !important;
  border: 3px solid #211915 !important;
  background: #211915 !important;
}

.hero-photo--main {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.hero-photo--float {
  right: 16px !important;
  bottom: 16px !important;
  width: min(42%, 220px) !important;
  height: 170px !important;
}

.hero-actions {
  position: absolute !important;
  right: clamp(22px, 4vw, 58px) !important;
  bottom: clamp(22px, 4vw, 42px) !important;
  margin: 0 !important;
}

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

@media (max-width: 980px) {
  .hero-panel {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "media"
      "copy"
      "proof" !important;
  }

  .hero-market-board {
    min-height: 360px !important;
  }

  .hero-copy {
    padding: 8px 4px 106px !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.7rem, 10vw, 4.8rem) !important;
  }
}

/* Old Harbour V4 mobile polish: separate access controls and add subtle place texture. */
body {
  background:
    linear-gradient(180deg, rgba(255, 250, 241, 0.9), rgba(255, 243, 220, 0.94)),
    radial-gradient(circle at 12% 4%, rgba(255, 201, 40, 0.2), transparent 18rem),
    radial-gradient(circle at 88% 18%, rgba(0, 169, 165, 0.18), transparent 20rem),
    url("assets/oldharbour2.jpg?v=20260513-oldharbour-v4") center / cover fixed;
}

.workspace {
  background:
    linear-gradient(180deg, rgba(255, 250, 241, 0.72), rgba(255, 243, 220, 0.86)),
    linear-gradient(90deg, rgba(216, 23, 53, 0.045) 0 1px, transparent 1px 44px),
    linear-gradient(180deg, rgba(8, 119, 168, 0.04) 0 1px, transparent 1px 44px);
}

@media (max-width: 640px) {
  .brand-rail {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand lang"
      "access access"
      "public public" !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: max(10px, env(safe-area-inset-top)) 18px 12px !important;
    color: #211915 !important;
    background:
      linear-gradient(90deg, #d81735 0 11px, #ffc928 11px 22px, #008f7a 22px 34px, #0877a8 34px 46px, transparent 46px),
      rgba(255, 250, 241, 0.97) !important;
    border-bottom: 3px solid #211915 !important;
    box-shadow: 0 10px 0 rgba(33, 25, 21, 0.07) !important;
  }

  .brand-lockup {
    grid-area: brand !important;
    display: grid !important;
    grid-template-columns: 94px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding-left: 0 !important;
  }

  .brand-mark {
    width: 94px !important;
    height: 48px !important;
    padding: 3px !important;
    border: 2px solid #211915 !important;
    border-radius: 8px !important;
    background: #fffaf1 !important;
    box-shadow: 4px 4px 0 rgba(33, 25, 21, 0.12) !important;
  }

  .brand-lockup strong {
    display: block !important;
    max-width: 14ch !important;
    color: #211915 !important;
    font-size: 0.92rem !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  .brand-lockup small,
  .store-visual,
  .store-meta,
  .brand-rail::before {
    display: none !important;
  }

  .language-toggle {
    grid-area: lang !important;
    width: 76px !important;
    min-height: 48px !important;
    justify-content: center !important;
    margin: 0 !important;
    border: 2px solid #211915 !important;
    color: #211915 !important;
    background: #fffaf1 !important;
    box-shadow: 4px 4px 0 rgba(33, 25, 21, 0.12) !important;
  }

  .role-switch--public {
    grid-area: public !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .role-switch--public .role-tab {
    min-height: 50px !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border: 2px solid transparent !important;
    color: #211915 !important;
    background: rgba(33, 25, 21, 0.06) !important;
    box-shadow: none !important;
  }

  .role-switch--public .role-tab.is-active {
    border-color: #211915 !important;
    background: #ffc928 !important;
    box-shadow: 4px 4px 0 rgba(33, 25, 21, 0.14) !important;
  }

  .admin-menu {
    grid-area: access !important;
    position: relative !important;
    z-index: 1002 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .admin-menu summary {
    display: flex !important;
    min-height: 46px !important;
    width: 100% !important;
    justify-content: center !important;
    border: 2px solid #211915 !important;
    color: #211915 !important;
    background: #fffaf1 !important;
    box-shadow: 4px 4px 0 rgba(33, 25, 21, 0.12) !important;
  }

  .admin-menu[open] .role-switch--private {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1003 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    border: 2px solid #211915 !important;
    border-radius: 8px !important;
    background: #fffaf1 !important;
    box-shadow: 6px 6px 0 rgba(33, 25, 21, 0.16) !important;
  }

  .admin-menu[open] .role-switch--private .role-tab {
    min-height: 48px !important;
    justify-content: center !important;
    color: #211915 !important;
    background: rgba(0, 169, 165, 0.1) !important;
  }

  .workspace {
    background:
      linear-gradient(180deg, rgba(255, 250, 241, 0.84), rgba(255, 243, 220, 0.92)),
      url("assets/oldharbour1.jpg?v=20260513-oldharbour-v4") top center / 180% auto no-repeat,
      #fff3dc !important;
  }

  .hero-panel {
    margin-top: 18px !important;
  }
}