/*
 * eetZA Stage 1 design system
 *
 * This is the single visual authority for the public marketplace and seller
 * workspace. It replaces the retired blue shell, glossy controls, detached
 * What’s Cooking launcher and route-specific header geometry.
 */

:root {
  --color-canvas: #f3f0eb;
  --color-surface: #fffcf8;
  --color-ink: #1a1714;
  --color-muted: #6f6a64;
  --color-subtle: #9a948c;
  --color-line: #e6e1da;
  --color-brand: #b42318;
  --color-brand-fg: #fffcf8;
  --color-brand-soft: #f6e8e5;
  --color-sage: #3d6b4f;
  --color-sage-soft: #e7efe9;
  --color-clay: #9a4a32;
  --color-stone: #d9d0c5;
  --color-rose: #e6d3cc;

  /* Compatibility names used by existing feature templates. */
  --cream: var(--color-canvas);
  --cream-2: var(--color-brand-soft);
  --paper: var(--color-surface);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --orange: var(--color-brand);
  --orange-dark: #971f16;
  --sage: var(--color-sage);

  --text-display: 2.125rem;
  --text-title: 1.75rem;
  --text-headline: 1.0625rem;
  --text-callout: .9375rem;
  --text-footnote: .8125rem;
  --text-caption: .75rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --eetza-pill-radius: 12px;
  --eetza-search-radius: 11px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-3xl: 36px;
  --radius: var(--radius-xl);

  --shadow-card: 0 0 0 1px rgb(26 23 20 / .05), 0 1px 2px rgb(26 23 20 / .04), 0 8px 24px rgb(26 23 20 / .04);
  --shadow-lift: 0 0 0 1px rgb(26 23 20 / .06), 0 2px 4px rgb(26 23 20 / .04), 0 12px 32px rgb(26 23 20 / .08);
  --shadow-bar: 0 -1px 0 rgb(26 23 20 / .06), 0 -8px 24px rgb(26 23 20 / .04);
  --shadow: var(--shadow-card);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

html {
  background: var(--color-canvas) !important;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body,
input,
button,
textarea,
select {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body,
body.buyer-shell-page,
body.backoffice-shell-page {
  min-height: 100dvh;
  margin: 0;
  background: var(--color-canvas) !important;
  color: var(--color-ink);
}

body::before,
body::after {
  content: none;
}

a { color: inherit; }
p { color: var(--color-muted); }
h1, h2, h3, h4, h5, h6 { color: var(--color-ink); text-wrap: balance; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  box-shadow: none;
}

/* Shared content geometry */
.page-shell {
  width: min(1120px, calc(100% - 40px)) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding: 28px 0 108px !important;
  background: transparent !important;
}

body.marketplace-home-page [data-eetza-marketplace-page],
body.marketplace-browse-page [data-eetza-marketplace-page] {
  background: var(--color-canvas) !important;
}

.eetza-stage1-home-intro {
  width: min(100% - 40px, 1120px);
  margin: 0 auto;
  padding: 34px 0 22px;
}
.eetza-stage1-home-intro h1 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.04em;
}
.eetza-stage1-home-address {
  display: inline-flex;
  max-width: 100%;
  min-height: 34px;
  align-items: center;
  gap: 5px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  box-shadow: none;
  font-size: var(--text-callout);
  font-weight: 500;
  text-align: left;
}
.eetza-stage1-home-address span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eetza-stage1-home-address svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: var(--color-subtle);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel,
.auth-card,
.table-card,
.stat-card,
.action-card,
.seller-card,
.menu-card,
.search-panel,
.empty-state,
.notice-panel,
.dashboard-hero,
.cart-summary,
.radio-card {
  border-color: var(--color-line);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.panel,
.auth-card,
.table-card,
.empty-state,
.notice-panel,
.dashboard-hero {
  border-radius: var(--radius-xl);
}

/* Controls: quiet surface by default, ink for the main decision. */
button,
.btn,
.button,
[role="button"],
input,
select,
textarea {
  max-height: none;
}

.btn,
.button,
button.btn,
a.btn,
.primary-button,
.primary-action,
.secondary-button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--eetza-pill-radius, 12px);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  font-size: var(--text-callout);
  font-weight: 600;
  line-height: 1;
  transition: transform 150ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}

.btn:hover,
.button:hover,
button.btn:hover,
a.btn:hover { transform: none; }

.btn:active,
.button:active,
button.btn:active,
a.btn:active { transform: scale(.97); }

.btn-primary,
.button-primary,
.primary-button,
.primary-action,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary {
  border-color: var(--color-ink) !important;
  background: var(--color-ink) !important;
  color: var(--color-surface) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.button-primary:hover,
.primary-button:hover,
.primary-action:hover {
  border-color: #2b2723 !important;
  background: #2b2723 !important;
}

html body.buyer-shell-page .page-shell :is(.btn.btn-primary, .button-primary, .primary-button, .primary-action),
html body.backoffice-shell-page .page-shell :is(.btn.btn-primary, .button-primary, .primary-button, .primary-action),
html body.admin-portal-page :is(.btn.btn-primary, .button-primary, .primary-button, .primary-action) {
  border-color: var(--color-ink) !important;
  background: var(--color-ink) !important;
  background-image: none !important;
  color: var(--color-surface) !important;
  box-shadow: none !important;
}

.btn-danger,
.danger-button,
.link-danger {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-brand-fg);
}

.btn-secondary,
.btn-ghost,
.button-secondary {
  border-color: var(--color-line) !important;
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  box-shadow: var(--shadow-card) !important;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: none;
}

input::placeholder,
textarea::placeholder { color: var(--color-subtle); }

.eyebrow {
  color: var(--color-brand);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .12em;
}

.badge,
.tag-row span,
.rating-chip,
.status-badge,
.filter-pill {
  border-color: var(--color-line);
  background: var(--color-surface);
  color: var(--color-muted);
  box-shadow: none;
}

.status-delivered,
.badge-success,
.status-complete {
  border-color: transparent;
  background: var(--color-sage-soft);
  color: var(--color-sage);
}

.flash {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}
.flash-success { background: var(--color-sage-soft); color: var(--color-sage); }
.flash-error { background: var(--color-brand-soft); color: var(--color-brand); }

/* One app header on every public and seller route. */
.site-header.live-style-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgb(230 225 218 / .7) !important;
  background: rgb(243 240 235 / .88) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.buyer-shell-page .site-header.live-style-header,
body.backoffice-shell-page .site-header.live-style-header,
body.marketplace-home-page .site-header.live-style-header,
body.seller-detail-page .site-header.live-style-header {
  display: block !important;
  visibility: visible !important;
  min-height: 68px !important;
  height: auto !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid rgb(230 225 218 / .7) !important;
  background: rgb(243 240 235 / .88) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.seller-detail-page .store-live-back-button.eetza-store-back-button {
  display: none !important;
}

.wordmark-brand {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
  color: var(--color-ink);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
}
.wordmark-brand .wordmark-za { color: var(--color-brand); }

.mobile-header-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.mobile-header-mode-switch,
.mobile-header-bag {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  transition: transform 150ms var(--ease-out);
}
.mobile-header-mode-switch:active,
.mobile-header-bag:active { transform: scale(.96); }
.mobile-header-mode-switch > span,
.mobile-header-mode-switch svg,
.mobile-header-bag > span,
.mobile-header-bag svg { display: block; width: 20px; height: 20px; }
.mobile-header-mode-switch svg,
.mobile-header-bag svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mobile-header-bag em {
  position: absolute;
  top: -2px;
  right: -2px;
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-brand-fg);
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

/* Count placeholders stay in the DOM so polling can reveal new alerts. */
.mobile-header-bag em[hidden],
.desktop-app-badge[hidden],
.buyer-nav-badge[hidden],
.seller-nav-badge[hidden] { display: none !important; }

/* Desktop keeps the same language in a roomier horizontal shell. */
.desktop-app-header {
  width: min(1180px, calc(100% - 40px));
  min-height: 68px;
  margin-inline: auto;
  padding: 10px 0;
  gap: 18px;
}
.desktop-app-brand { font-size: var(--text-title); }
.desktop-app-location .header-location-text-button,
.desktop-app-location .header-location-pill {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-muted);
}
.desktop-app-nav-link,
.desktop-app-action,
.desktop-app-menu,
.desktop-app-mode-switch,
.desktop-app-sign-in {
  border-color: transparent;
  border-radius: var(--eetza-pill-radius, 12px);
  background: transparent;
  color: var(--color-subtle);
  box-shadow: none;
}
.desktop-app-nav-link.is-active,
.desktop-app-action.is-active {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}
.desktop-app-nav-icon svg,
.desktop-app-action-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Side sheets and dialogs use the same quiet surfaces. */
.eetza-side-menu-panel,
.location-modal-panel,
.modal-card,
.sheet,
[role="dialog"] {
  border-color: var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-lift);
}

.eetza-side-primary,
.eetza-side-secondary,
.eetza-side-links a {
  border-color: var(--color-line);
  background: transparent;
  color: var(--color-ink);
}

/* One persistent five-tab component for both buyer and seller modes. */
:is(nav.app-mobile-nav, nav.seller-context-nav.seller-app-bottom-nav) {
  display: none !important;
}

.buyer-active-order {
  position: fixed;
  z-index: 1290;
  right: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  display: flex;
  align-items: center;
  width: min(calc(100% - 32px), 440px);
  margin-inline: auto;
  box-sizing: border-box;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-lift);
}
.buyer-active-order[hidden] { display: none !important; }
.buyer-active-order-link { display: flex; flex: 1; min-width: 0; align-items: center; gap: 9px; padding: 9px 10px; color: inherit; text-decoration: none; }
.buyer-active-order-icon { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--color-brand); color: transparent; font-size: 0; }
.buyer-active-order-copy { display: grid; gap: 1px; min-width: 0; font-size: 12px; line-height: 1.2; }
.buyer-active-order-copy :is(small,strong,span) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buyer-active-order-copy small { color: var(--color-muted); font-size: 11px; }
.buyer-active-order-copy strong { font-size: 12px; font-weight: 600; }
.buyer-active-order-copy > span { color: var(--color-muted); }
.buyer-active-order-dismiss { width: 32px; height: 32px; flex: 0 0 32px; margin-right: 7px; border: 0; border-radius: 8px; background: transparent; color: var(--color-muted); font-size: 20px; cursor: pointer; }

.site-footer {
  border-color: var(--color-line);
  background: var(--color-surface);
  color: var(--color-muted);
}

/* Existing feature layouts keep their information architecture but lose the
   old blue/pink visual shells immediately. */
body.cart-page {
  --cart-red: var(--color-brand);
  --cart-red-dark: #971f16;
  --cart-ink: var(--color-ink);
  --cart-muted: var(--color-muted);
  --cart-line: var(--color-line);
  --cart-blue: var(--color-canvas);
  --cart-soft-red: var(--color-brand-soft);
  --cart-surface: var(--color-surface);
}
body.cart-page :is(.multi-cart-bar, .cart-fulfilment-plan, .warning-panel, .group-cart-notice, .cart-date-group, .cart-fulfilment-choices, .cart-totals-panel) {
  border-color: var(--color-line) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-card) !important;
}
body.cart-page .multi-cart-tab.is-current button,
body.cart-page .fulfilment-choice.is-selected {
  border-color: var(--color-ink) !important;
  background: var(--color-ink) !important;
  color: var(--color-surface) !important;
  box-shadow: none !important;
}

body.buyer-orders-page:not(.buyer-orders-v2-page),
body.buyer-orders-page:not(.buyer-orders-v2-page) main.page-shell {
  background: var(--color-canvas) !important;
}
body.buyer-orders-page:not(.buyer-orders-v2-page) main.page-shell { background-image: none !important; }
body.buyer-orders-page:not(.buyer-orders-v2-page) :is(.buyer-orders-heading, .buyer-orders-tabs, .buyer-orders-empty, .buyer-order-card) {
  border-color: var(--color-line) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--shadow-card) !important;
}
body.buyer-orders-page:not(.buyer-orders-v2-page) .buyer-orders-heading::before { content: none !important; }
body.buyer-orders-page:not(.buyer-orders-v2-page) .buyer-orders-tabs a.is-active {
  border-color: var(--color-ink) !important;
  background: var(--color-ink) !important;
  background-image: none !important;
  color: var(--color-surface) !important;
  box-shadow: none !important;
}
body.buyer-orders-page:not(.buyer-orders-v2-page) .buyer-orders-empty > span {
  border-color: var(--color-rose) !important;
  background: var(--color-brand-soft) !important;
}

body.whats-cooking-page {
  --wc-green: var(--color-brand);
  --wc-green-dark: #971f16;
  --wc-green-soft: var(--color-brand-soft);
  --wc-polish-blue: var(--color-brand);
  --wc-polish-action: var(--color-brand);
  --wc-polish-deep: #971f16;
  --wc-polish-sky: var(--color-brand-soft);
}

body.account-compact-page:not(.account-v2-page) :is(.account-hero, .account-menu-group, .account-page > .panel, .account-two-col > .panel),
body.buyer-order-status-consistency-page :is(.panel, .order-status-hero, .delivery-status-card, .delivery-map-card, .order-summary-card) {
  border-color: var(--color-line) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--shadow-card) !important;
}

/* Administration inherits the same foundation without changing its dense IA. */
body.admin-portal-page {
  background: var(--color-canvas) !important;
  color: var(--color-ink);
}
.admin-portal-header,
.admin-portal-footer {
  border-color: var(--color-line) !important;
  background: rgb(243 240 235 / .9) !important;
  color: var(--color-ink) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.admin-portal-brand span { color: var(--color-ink) !important; }
.admin-portal-brand b { color: var(--color-brand) !important; }
.admin-portal-page :is(.admin-card, .panel, .table-card, .admin-portal-nav nav) {
  border-color: var(--color-line) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-card) !important;
}
.admin-portal-page :is(button, .btn-primary) {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-surface);
  box-shadow: none;
}

@media (max-width: 899px) {
  body.buyer-shell-page:not(.marketplace-home-page):not(.cart-page),
  body.backoffice-shell-page { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  .site-header.live-style-header {
    min-height: 68px !important;
    height: auto !important;
    padding: 0 !important;
  }

  .site-header.live-style-header > .buyer-mobile-header-row {
    position: relative;
    display: flex !important;
    width: 100% !important;
    min-height: 68px !important;
    height: auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 20px !important;
  }

  .site-header.live-style-header .mobile-header-brand {
    position: static;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--text-headline) !important;
    transform: none !important;
  }

  .desktop-app-header { display: none; }

  .page-shell {
    width: min(100% - 40px, 680px) !important;
    max-width: 680px !important;
    padding: 24px 0 calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .eetza-stage1-home-intro {
    width: 100%;
    padding: 34px 20px 18px;
  }

  :is(nav.app-mobile-nav, nav.seller-context-nav.seller-app-bottom-nav) {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 1300 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 6px 8px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 1px solid rgb(230 225 218 / .7) !important;
    border-radius: 0 !important;
    background: rgb(243 240 235 / .9) !important;
    background-image: none !important;
    box-shadow: var(--shadow-bar) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  :is(nav.app-mobile-nav, nav.seller-context-nav.seller-app-bottom-nav) > a,
  :is(nav.app-mobile-nav, nav.seller-context-nav.seller-app-bottom-nav) > a.is-active {
    position: relative !important;
    display: flex !important;
    inline-size: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 50px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--color-subtle) !important;
    box-shadow: none !important;
    font-size: var(--text-caption);
    font-weight: 500;
    line-height: 1.1;
    text-align: center !important;
  }

  :is(nav.app-mobile-nav, nav.seller-context-nav.seller-app-bottom-nav) > a.is-active { color: var(--color-brand) !important; }

  :is(nav.app-mobile-nav, nav.seller-context-nav.seller-app-bottom-nav) :is(.buyer-nav-icon, .seller-nav-icon) {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: inherit !important;
  }

  :is(nav.app-mobile-nav, nav.seller-context-nav.seller-app-bottom-nav) a.is-active :is(.buyer-nav-icon, .seller-nav-icon) { background: var(--color-brand-soft) !important; }

  :is(nav.app-mobile-nav, nav.seller-context-nav.seller-app-bottom-nav) :is(.buyer-nav-icon, .seller-nav-icon) svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  :is(nav.app-mobile-nav, nav.seller-context-nav.seller-app-bottom-nav) a.is-active :is(.buyer-nav-icon, .seller-nav-icon) svg { stroke-width: 2; }

  :is(nav.app-mobile-nav, nav.seller-context-nav.seller-app-bottom-nav) :is(.buyer-nav-label, .seller-nav-label) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  :is(nav.app-mobile-nav, nav.seller-context-nav.seller-app-bottom-nav) :is(.buyer-nav-badge, .seller-nav-badge) {
    position: absolute;
    top: 0;
    left: calc(50% + 8px);
    display: inline-flex;
    min-width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--color-canvas);
    border-radius: 999px;
    background: var(--color-brand);
    color: var(--color-brand-fg);
    font-size: 9px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
  }

  .site-footer { display: none; }

  .buyer-active-order { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 900px) {
  .mobile-header-top { display: none; }
  .page-shell { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}