/* ═══════════════════════════════════════════════════════
   THE FOOD SCIENTISTS — Customer Frontend
   Premium dark-first design synced with logo colors
   ═══════════════════════════════════════════════════════ */

body.customer-body {
  background: var(--bg-base);
  color: var(--ink);
}

/* ─── Header ─── */
.customer-header {
  height: 74px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100% - 1240px) / 2));
  gap: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 30;
  transition: background var(--transition), border-color var(--transition);
}
.customer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.customer-brand strong, .customer-brand small { display: block }
.customer-brand strong { font-size: 15px; font-weight: 800; color: var(--ink) }
.customer-brand small {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--accent);
  font-weight: 700;
  margin-top: 3px;
}
.customer-header-right { display: flex; align-items: center; gap: 12px }
.open-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-secondary);
  font-size: 10px;
  font-weight: 700;
}
.open-pill i {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e60;
}


/* ─── Main ─── */
.customer-main {
  max-width: 1240px;
  margin: auto;
  padding: 28px 24px 50px;
}


/* ─── Customer Hero ─── */
.customer-hero {
  min-height: 340px;
  border-radius: 20px;
  padding: 46px 52px;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 40%, #0d0d0d 100%);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr .85fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(245,197,24,0.1);
}
.customer-hero:before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(245,197,24,0.08);
  border-radius: 50%;
  right: 4%;
  top: -140px;
  box-shadow:
    0 0 0 40px rgba(245,197,24,0.03),
    0 0 0 80px rgba(245,197,24,0.02);
  animation: hero-pulse 6s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%,100% { transform: scale(1); opacity: 1 }
  50% { transform: scale(1.04); opacity: 0.7 }
}
.customer-hero .hero-copy { position: relative; z-index: 2 }
.customer-hero .hero-kicker {
  font-size: 10px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 2px;
}
.customer-hero h1 {
  font-size: 50px;
  line-height: 1.03;
  letter-spacing: -2.2px;
  margin: 16px 0 12px;
  font-weight: 900;
  color: #fff;
}
.customer-hero h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--accent);
  font-style: italic;
}
.customer-hero p {
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  font-size: 13px;
  max-width: 420px;
  margin: 0;
}
.hero-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.btn-light {
  background: var(--accent);
  color: #000;
  font-weight: 800;
  border-radius: 12px;
  padding: 12px 20px;
}
.btn-light:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-glow);
}
.hero-trust { font-size: 10px; color: rgba(255,255,255,0.4) }

/* Hero food */
.hero-food {
  height: 260px;
  position: relative;
  display: grid;
  place-items: center;
  z-index: 1;
}
.hero-orbit {
  height: 240px;
  width: 240px;
  border-radius: 50%;
  background: rgba(245,197,24,0.05);
  border: 1px solid rgba(245,197,24,0.1);
  position: absolute;
  animation: orbit-spin 20s linear infinite;
}
@keyframes orbit-spin {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}
.hero-food-main {
  font-size: 150px;
  filter: drop-shadow(0 22px 18px rgba(0,0,0,0.6));
  transform: rotate(-10deg);
  z-index: 2;
  animation: food-float 4s ease-in-out infinite;
}
@keyframes food-float {
  0%,100% { transform: rotate(-10deg) translateY(0) }
  50% { transform: rotate(-10deg) translateY(-8px) }
}
.hero-food-small {
  position: absolute;
  z-index: 3;
  font-size: 55px;
  filter: drop-shadow(0 9px 10px rgba(0,0,0,0.5));
}
.hero-food-small.one { bottom: 25px; left: 10% }
.hero-food-small.two { right: 8%; top: 15px }
.hero-spark {
  position: absolute;
  right: 12%;
  bottom: 28px;
  font-size: 30px;
  color: var(--accent);
  animation: spark-pulse 2s ease-in-out infinite;
}
@keyframes spark-pulse {
  0%,100% { opacity: 1; transform: scale(1) }
  50% { opacity: 0.5; transform: scale(1.15) }
}


/* ─── Welcome Strip ─── */
.welcome-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 20px 0 48px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  transition: background var(--transition), border-color var(--transition);
}
.welcome-strip > div {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 3px 15px;
  border-right: 1px solid var(--line);
}
.welcome-strip > div:first-child { padding-left: 0 }
.welcome-strip > div:last-child { border-right: 0 }
.strip-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 14px;
}
.welcome-strip strong, .welcome-strip small { display: block }
.welcome-strip strong { font-size: 11px; color: var(--ink) }
.welcome-strip small { font-size: 9px; color: var(--ink-muted); margin-top: 3px }


/* ─── Menu ─── */
.menu-section { scroll-margin-top: 20px }
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}
.section-heading h2, .how-it-works h2 {
  font-size: 28px;
  letter-spacing: -1px;
  margin: 6px 0 5px;
  color: var(--ink);
}
.section-heading p { font-size: 12px; color: var(--ink-muted); margin: 0 }
.menu-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: 10px;
  padding: 0 12px;
  width: 260px;
  flex-shrink: 0;
  transition: border-color var(--transition);
}
.menu-search:focus-within { border-color: var(--accent) }
.menu-search span { font-size: 20px; color: var(--ink-muted) }
.menu-search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  height: 42px;
  font-size: 11px;
  color: var(--ink);
}
.menu-meta {
  display: flex;
  justify-content: space-between;
  color: var(--ink-muted);
  font-size: 10px;
  margin: 9px 1px 12px;
}
.menu-meta strong { color: var(--ink-secondary) }

/* Customer product grid */
.customer-main .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px }
.customer-main .product-card { box-shadow: 0 4px 20px rgba(0,0,0,0.2) }
.customer-main .product-art { height: 145px }
.customer-main .product-info { padding: 14px }
.customer-main .product-info h3 { font-size: 13px }
.customer-main .product-info p { font-size: 10px }


/* ─── How It Works ─── */
.how-it-works {
  margin-top: 56px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 30px 34px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 24px;
  align-items: center;
}
.how-it-works h2 { font-size: 24px; max-width: 270px }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.steps > div { display: flex; flex-direction: column; gap: 7px }
.steps b { font-size: 10px; color: var(--accent) }
.steps strong { font-size: 11px; color: var(--ink) }
.steps small { font-size: 10px; color: var(--ink-muted); line-height: 1.5 }


/* ─── Footer ─── */
.customer-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-surface);
  padding: 22px max(24px, calc((100% - 1240px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: background var(--transition), border-color var(--transition);
}
.customer-footer > span { color: var(--ink-muted); font-size: 10px }
.customer-footer > a:last-child {
  font-size: 10px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}
.customer-footer .brand-mark { flex-shrink: 0 }


/* ─── Checkout / UPI ─── */
.checkout-total-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0;
}
.upi-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px;
  text-align: center;
  background: var(--bg-card);
}
.upi-panel img {
  width: 220px;
  height: 220px;
  max-width: 100%;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.upi-panel .upi-amount {
  font-size: 27px;
  font-weight: 900;
  color: var(--accent);
  margin: 7px 0;
}
.upi-panel p { font-size: 10px; color: var(--ink-muted); line-height: 1.5 }
.upi-uri {
  word-break: break-all;
  font-size: 9px;
  color: var(--ink-muted);
  background: var(--bg-elevated);
  border-radius: 7px;
  padding: 8px;
  text-align: left;
}


/* ─── Account & Login Panel ─── */
.account-tabs {
  display: flex;
  gap: 8px;
  background: var(--bg-elevated);
  padding: 6px;
  border-radius: 12px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
}
.account-tabs button {
  flex: 1;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  transition: all var(--transition);
}
.account-tabs button:hover {
  color: var(--ink);
}
.account-tabs button.active {
  background: var(--bg-card);
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid var(--line);
}
.account-note {
  display: block;
  text-align: center;
  color: var(--ink-muted);
  font-size: 10px;
  margin-top: 20px;
  line-height: 1.5;
  padding: 0 20px;
}
#account-form .field {
  margin-bottom: 16px;
}
#account-submit {
  margin-top: 10px;
  padding: 12px;
  font-size: 13px;
}


/* ─── Tracked Orders ─── */
.tracked-order {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.tracked-order .quick-row {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.tracking-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.tracking-steps span {
  flex: 1;
  font-size: 11px;
  text-align: center;
  padding: 10px 4px;
  background: var(--bg-input);
  color: var(--ink-muted);
  border-radius: 8px;
  font-weight: 700;
  transition: all var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tracking-steps span.done {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-glow);
}
.tracked-order .total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.tracked-order .total-row:last-of-type {
  border-bottom: 0;
}
.tracker-utr-field {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
}
.tracker-utr-field button {
  margin-top: 12px;
}
.ready-alert {
  background: var(--accent);
  color: #000;
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  margin-top: 20px;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════

   RESPONSIVE
   ═══════════════════════════════════ */
@media (max-width: 900px) {
  .customer-main { padding: 20px 18px 35px }
  .customer-hero { padding: 32px; min-height: 290px }
  .customer-hero h1 { font-size: 42px }
  .hero-food-main { font-size: 125px }
  .hero-orbit { width: 195px; height: 195px }
  .welcome-strip { padding: 13px }
  .welcome-strip > div { padding: 3px 8px }
  .welcome-strip strong { font-size: 10px }
  .customer-main .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .how-it-works { grid-template-columns: 1fr }
  .steps { gap: 12px }
}
@media (max-width: 600px) {
  .customer-header { height: 65px; padding: 0 13px }
  .customer-header .brand-mark { height: 37px; width: 37px }
  .customer-brand strong { font-size: 12px }
  .customer-brand small { font-size: 7px; letter-spacing: .8px }
  .customer-header-right { gap: 8px }
  .open-pill { display: none }
  .customer-header .btn { padding: 9px 10px; font-size: 10px }
  .customer-main { padding: 13px 12px 28px }
  .customer-hero { padding: 25px 21px; grid-template-columns: 1fr; min-height: 310px; border-radius: 17px }
  .customer-hero h1 { font-size: 39px }
  .customer-hero p { max-width: 260px; font-size: 11px }
  .hero-food { position: absolute; right: -35px; bottom: -3px; width: 190px; height: 170px; opacity: .56 }
  .hero-food-main { font-size: 100px }
  .hero-orbit { width: 150px; height: 150px }
  .hero-food-small { font-size: 36px }
  .hero-trust { font-size: 9px }
  .welcome-strip { grid-template-columns: 1fr; gap: 0; margin: 12px 0 32px; padding: 7px 13px }
  .welcome-strip > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 0 }
  .welcome-strip > div:last-child { border-bottom: 0 }
  .welcome-strip strong { font-size: 11px }
  .welcome-strip small { font-size: 9px }
  .section-heading { display: block }
  .section-heading h2 { font-size: 24px }
  .menu-search { width: 100%; margin-top: 15px }
  .customer-main .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px }
  .customer-main .product-art { height: 108px; font-size: 58px }
  .customer-main .product-info { padding: 10px }
  .customer-main .product-info h3 { font-size: 12px }
  .customer-main .product-info p { font-size: 9px; min-height: 39px }
  .customer-main .price { font-size: 13px }
  .customer-main .product-bottom .add-btn { width: 28px; height: 28px }
  .how-it-works { padding: 22px 18px; margin-top: 35px }
  .how-it-works h2 { font-size: 22px }
  .steps { grid-template-columns: 1fr; gap: 15px }
  .steps > div { display: grid; grid-template-columns: 30px 1fr; gap: 4px 8px }
  .steps b { grid-row: span 2 }
  .steps small { grid-column: 2 }
  .customer-footer { padding: 17px 13px; flex-wrap: wrap }
  .customer-footer > span { display: none }
  .customer-footer .customer-brand strong { font-size: 11px }
  .customer-footer > a:last-child { margin-left: auto }
}

/* Multi-branch store selector */
.branch-picker-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px clamp(16px,5vw,72px);background:var(--surface, #171a1d);border-bottom:1px solid rgba(255,255,255,.08)}
.branch-picker-copy{display:flex;flex-direction:column;gap:3px;margin-right:auto}
.branch-picker-copy strong{font-weight:800}
.branch-picker-copy small,.branch-status{font-size:12px;opacity:.72}
.branch-picker-strip label{font-size:12px;font-weight:700;opacity:.8}
.branch-select{min-width:190px;max-width:100%;padding:11px 36px 11px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#202428;color:inherit;font:inherit}
.branch-status{min-width:160px}
@media(max-width:560px){.branch-picker-strip{align-items:flex-start;gap:9px}.branch-picker-copy{width:100%}.branch-picker-strip label{align-self:center}.branch-select{flex:1;min-width:0}.branch-status{width:100%}}

/* Branch-first storefront chooser */
.store-gate{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:22px;background:rgba(6,8,6,.94);backdrop-filter:blur(16px);overflow:auto}
.store-gate[hidden]{display:none}
.store-gate-card{width:min(920px,100%);border:1px solid rgba(255,255,255,.13);border-radius:26px;padding:clamp(22px,4vw,42px);background:linear-gradient(145deg,#1b211b,#111411);box-shadow:0 32px 100px #0009}
.store-gate-brand{font-size:12px;letter-spacing:.15em;font-weight:900;color:#ffc700}.store-gate-brand span{color:#c5cfc5;font-weight:500;letter-spacing:.04em}
.store-gate-kicker{font-size:10px;letter-spacing:.16em;font-weight:900;color:#b8f36b;margin:28px 0 8px}
.store-gate-card h1{font-size:clamp(30px,5vw,48px);line-height:1.02;margin:0;letter-spacing:-.04em}
.store-gate-intro{color:#b2bdb3;margin:12px 0 26px;max-width:550px}
.store-gate-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.store-gate-branch{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:9px;padding:20px;border:1px solid #354037;border-radius:17px;background:#171c17;color:#f7faf7;cursor:pointer;min-height:170px;transition:transform .16s,border-color .16s,background .16s}
.store-gate-branch:hover{transform:translateY(-3px);border-color:#b8f36b;background:#20281f}
.store-gate-branch .store-pin{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#2b3727;color:#b8f36b;font-size:19px}
.store-gate-branch strong{font-size:19px}.store-gate-branch small{color:#aab6ac;line-height:1.4}.store-gate-branch .store-choose{margin-top:auto;color:#b8f36b;font-weight:800;font-size:12px}
.store-gate-branch[disabled]{opacity:.48;cursor:not-allowed;transform:none}
.store-gate-foot,.store-gate-loading{font-size:11px;color:#95a195;margin-top:20px}
@media(max-width:680px){.store-gate-branches{grid-template-columns:1fr}.store-gate-branch{min-height:0;display:grid;grid-template-columns:42px 1fr;column-gap:12px;padding:14px}.store-gate-branch .store-pin{grid-row:span 3}.store-gate-branch .store-choose{grid-column:2}.store-gate-card{padding:22px;border-radius:20px}}

/* UX patch: stable order modal header, clean scrollbars, mobile-first controls */
#customer-modal .modal-head{position:sticky;top:0;z-index:8;background:var(--bg-panel,var(--bg-topbar));padding:16px 18px;border-bottom:1px solid var(--line);border-radius:18px 18px 0 0;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#customer-modal .modal-head h2{margin:0;min-width:0}
#customer-modal .modal-close{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;position:sticky;top:0}
#customer-modal .modal-body{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 48%,transparent) transparent}
#customer-modal .modal-body::-webkit-scrollbar,.customer-main::-webkit-scrollbar{width:7px}
#customer-modal .modal-body::-webkit-scrollbar-track,.customer-main::-webkit-scrollbar-track{background:transparent}
#customer-modal .modal-body::-webkit-scrollbar-thumb,.customer-main::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 38%,transparent);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
#customer-toasts{position:fixed!important;top:calc(78px + env(safe-area-inset-top))!important;right:14px!important;bottom:auto!important;z-index:2147483000!important;pointer-events:none;isolation:isolate}
#customer-toasts .toast{pointer-events:auto;animation:toast-in .18s ease-out;box-shadow:0 12px 36px #0003}
@keyframes toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.customer-header{height:auto;min-height:64px;padding:10px 12px;gap:8px}.customer-header-right{gap:6px;flex-wrap:wrap;justify-content:flex-end}.customer-main{padding:18px 12px 36px}#customer-modal{width:calc(100vw - 16px);max-width:none;max-height:calc(100dvh - 16px);margin:auto;border-radius:18px}#customer-modal .modal-head{padding:12px 14px;min-height:58px}#customer-modal .modal-body{max-height:calc(100dvh - 90px);overflow:auto;padding:14px}.tracked-order{overflow-wrap:anywhere}.tracking-steps{gap:6px;flex-wrap:wrap}.tracking-steps span{font-size:10px}.modal-footer{position:sticky;bottom:0;background:var(--bg-panel,var(--bg-topbar));padding:10px 0 0;z-index:5;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){#customer-toasts .toast{animation:none!important;transition:none!important}}

/* Customer branch selector: use the active theme tokens and native mobile sizing. */
.branch-picker-strip{background:var(--bg-card);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 8px 28px rgba(0,0,0,.08)}
.branch-select{width:100%;min-height:46px;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--bg-input);color:var(--ink);font:inherit;outline-offset:3px;color-scheme:dark}
html[data-theme="light"] .branch-select{color-scheme:light}
.branch-select:focus-visible{outline:2px solid var(--accent)}
.store-gate{background:color-mix(in srgb,var(--bg-base) 92%,transparent);backdrop-filter:blur(14px)}
.store-gate-card{background:var(--bg-card);color:var(--ink);border-color:var(--line)}
.store-gate-card h1{color:var(--ink)}
.store-gate-intro,.store-gate-foot{color:var(--ink-muted)}
.store-gate-branch{background:var(--bg-input);color:var(--ink);border-color:var(--line);min-width:0;overflow-wrap:anywhere}
.store-gate-branch small{color:var(--ink-muted)}
.tracking-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.tracking-steps span{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;white-space:normal;overflow-wrap:anywhere}
.tracking-steps span b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--line);font-size:12px}
.tracking-steps span.done b{background:var(--accent);color:#151515}
.tracking-steps span small{font-size:clamp(9px,2.3vw,11px);line-height:1.2;text-transform:none;letter-spacing:0}
.tracking-steps span.current{box-shadow:inset 0 0 0 1px var(--accent)}
.order-timeline{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;font-size:13px}
.order-timeline summary{cursor:pointer;font-weight:700;padding:7px 0}
.order-timeline ol{padding-left:20px;margin:8px 0}.order-timeline li{padding:5px 0}.order-timeline li small{display:block;color:var(--ink-muted);margin-top:3px}
.password-form{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
#customer-modal .modal-body h3{margin:12px 0}
@media(max-width:600px){.tracking-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.tracking-steps span{padding:8px 2px}.tracking-steps span b{width:22px;height:22px}.tracked-order{padding:14px}.branch-picker-strip{width:100%;box-sizing:border-box}.store-gate{padding:12px}.store-gate-card{width:100%;box-sizing:border-box}.store-gate-branches{grid-template-columns:1fr}}