@font-face {
  font-family:'DM Sans';
  src:url("fonts/dm-sans-variable.d3a19ba12483.woff2") format('woff2');
  font-weight:100 1000;
  font-style:normal;
  font-display:swap;
}

:root {
  color-scheme:light;
  --blue:#003cff;
  --mint:#00ebc7;
  --lime:#c7ff00;
  --ink:#141418;
  --paper:#fff;
  --canvas:#f6f7fb;
  --muted:#475467;
  --line:#e3e6ed;
  --control-border:#848e9e;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --bs-body-font-family:'DM Sans',Arial,sans-serif;
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--canvas);
  --bs-primary:#003cff;
  --bs-primary-rgb:0,60,255;
  --bs-border-color:var(--line);
  --bs-link-color:var(--blue);
  --bs-link-hover-color:#002bb8;
  --bs-border-radius:8px;
  --bs-border-radius-lg:12px;
  --sidebar-width:248px;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  min-width:280px;
  font-size:16px;
  line-height:1.5;
  background:var(--canvas);
  color:var(--ink);
}

a {
  color:var(--blue);
  text-underline-offset:3px;
}

a:hover {
  color:#002bb8;
}

button,input,textarea,select {
  font:inherit;
}

h1,h2,h3,p {
  overflow-wrap:anywhere;
}

h1 {
  font-size:26px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.035em;
  margin:0 0 var(--space-2);
}

h2 {
  font-size:20px;
  font-weight:650;
  line-height:1.3;
  letter-spacing:-.02em;
  margin:0 0 var(--space-4);
}

h3 {
  font-size:16px;
  font-weight:650;
  margin:var(--space-6) 0 var(--space-3);
}

p {
  margin:0 0 var(--space-4);
}

ul,ol {
  padding-left:var(--space-6);
}

li {
  margin:var(--space-2) 0;
}

img {
  max-width:100%;
}

:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:3px;
}

[hidden] {
  display:none!important;
}

.ui-icon {
  width:22px;
  height:22px;
  flex-shrink:0;
  vertical-align:middle;
}

.skip-link {
  position:fixed;
  top:8px;
  left:16px;
  padding:var(--space-3);
  background:white;
  z-index:2000;
  clip-path:inset(50%);
  opacity:0;
  pointer-events:none;
}

.skip-link:focus {
  clip-path:none;
  opacity:1;
  pointer-events:auto;
}

.brand-header {
  height:64px;
  position:relative;
  z-index:1030;
  background:var(--blue);
  color:white;
  padding:0 var(--space-6);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:var(--space-3);
  color:white;
  text-decoration:none;
  white-space:nowrap;
}

.brand:hover {
  color:white;
}

.wordmark {
  font-size:23px;
  font-weight:750;
  letter-spacing:-.05em;
}

.brand-header :focus-visible {
  outline-color:var(--lime);
}

.header-actions {
  display:flex;
  align-items:center;
  gap:var(--space-3);
}

.header-button {
  border:1px solid #ffffff80!important;
  background:transparent!important;
  color:white!important;
  padding:var(--space-2) var(--space-3)!important;
  display:flex;
  align-items:center;
  gap:var(--space-2);
}

.account-menu {
  position:relative;
}

.account-menu summary {
  list-style:none;
  min-height:44px;
  min-width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-2);
  cursor:pointer;
  font-weight:500;
}

.account-menu summary::-webkit-details-marker {
  display:none;
}

.account-menu-panel {
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:240px;
  padding:var(--space-4);
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 12px 32px #10182818;
  color:var(--ink);
  display:grid;
  gap:var(--space-2);
  z-index:1050;
}

.account-menu-panel a {
  padding:var(--space-2);
  min-height:44px;
  text-decoration:none;
}

.account-menu-panel form {
  margin:0;
}

.account-menu-panel button {
  width:100%;
}

.page {
  max-width:1440px;
  margin:0 auto;
  padding:var(--space-6);
  min-width:0;
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-4);
  margin-bottom:var(--space-6);
}

.page-description {
  max-width:680px;
  color:var(--muted);
  margin:0;
}

.eyebrow {
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 var(--space-2);
}

.muted,.helptext {
  color:var(--muted);
  font-size:14px;
}

.breadcrumbs {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
  color:var(--muted);
  font-size:14px;
  margin-bottom:var(--space-4);
}

.breadcrumbs a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
}

.panel,.checkout-line,.order-card {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:var(--space-6);
  margin-bottom:var(--space-6);
}

.panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  margin-bottom:var(--space-6);
}

.panel-head h2 {
  margin:0;
}

.panel>:last-child,.checkout-line>:last-child {
  margin-bottom:0;
}

.panel-muted {
  background:#f0f4ff;
}

.detail-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-6);
  align-items:start;
}

.detail-layout>* {
  min-width:0;
}

.detail-layout .panel:last-child {
  margin-bottom:0;
}

.detail-summary {
  order:-1;
}

.return-work-layout > .detail-summary {
  order:0;
}

.section-label {
  font-size:12px;
  font-weight:650;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.07em;
}

.price {
  font-size:26px;
  font-weight:700;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}

.details {
  display:grid;
  grid-template-columns:minmax(110px,1fr) minmax(0,2fr);
  gap:var(--space-3) var(--space-4);
  margin:0 0 var(--space-6);
}

.details dt {
  font-weight:400;
  color:var(--muted);
  font-size:14px;
}

.details dd {
  margin:0;
  overflow-wrap:anywhere;
  font-weight:500;
}

.details dd.price {
  font-weight:700;
}

.divider {
  border-top:1px solid var(--line);
  margin:var(--space-6) 0;
}

.action-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
}

.button,button:not(.btn-close) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:44px;
  border:1px solid transparent;
  border-radius:8px;
  padding:var(--space-3) var(--space-4);
  font-size:14px;
  font-weight:650;
  line-height:1.4;
  background:var(--blue);
  color:white;
  text-decoration:none;
  cursor:pointer;
}

.button:hover,button:not(.btn-close):hover {
  background:#002fca;
  color:white;
}

.secondary {
  background:white!important;
  color:var(--ink)!important;
  border-color:var(--control-border)!important;
}

.secondary:hover {
  background:var(--canvas)!important;
  border-color:var(--muted)!important;
}

.danger {
  background:#b42318!important;
  color:white!important;
}

.danger:hover {
  background:#912018!important;
}

.text-action {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:var(--space-2) 0;
  gap:var(--space-2);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}

.button:disabled,button:disabled {
  opacity:.55;
  cursor:not-allowed;
}

.ui-field {
  margin-bottom:var(--space-6);
  min-width:0;
}

.ui-field label,.field-label,label {
  font-size:14px;
  font-weight:600;
  margin-bottom:var(--space-2);
  display:block;
}

.required-mark {
  color:#b42318;
}

.form-control,.form-select,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea {
  width:100%;
  min-height:44px;
  font:inherit;
  font-size:16px;
  padding:var(--space-3) var(--space-3);
  border:1px solid var(--control-border);
  border-radius:8px;
  color:var(--ink);
  background-color:white;
}

.form-control:focus,.form-select:focus,input:focus,textarea:focus,select:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px #003cff18;
}

.form-control[aria-invalid=true],input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true] {
  border-color:#b42318;
}

.form-control[type=file] {
  padding:var(--space-2);
}

.helptext {
  margin:var(--space-2) 0 0;
  font-size:13px;
  display:block;
}

.check-row,label:has(input[type=radio]),label:has(input[type=checkbox]) {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  min-height:44px;
  margin:0;
  padding:var(--space-2) 0;
  font-weight:500;
}

.form-check-input,input[type=radio],input[type=checkbox] {
  width:20px;
  height:20px;
  min-width:20px;
  margin:0;
  float:none;
  accent-color:var(--blue);
  border-color:var(--control-border);
}

.field-errors {
  color:#b42318;
  font-size:14px;
  margin:var(--space-2) 0;
}

.errorlist {
  list-style:none;
  padding:0;
  margin:0;
  color:#b42318;
}

.errorlist li {
  margin:var(--space-1) 0;
}

.error-summary {
  border-radius:12px;
}

.error-summary a {
  display:flex;
  align-items:center;
  min-height:44px;
  color:#912018;
}

.error-summary ul:empty {
  display:none;
}

.form-panel {
  max-width:720px;
  margin:0 auto;
}

.form-panel form {
  background:white;
  padding:var(--space-6);
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:var(--space-4);
}

.form-grid {
  display:grid;
  gap:0 var(--space-6);
  grid-template-columns:1fr;
}

.form-section {
  margin-bottom:var(--space-6);
  border-bottom:1px solid var(--line);
  padding-bottom:var(--space-2);
}

.form-section:last-of-type {
  border-bottom:0;
}

fieldset {
  padding:0;
  min-width:0;
  border:0;
}

legend.field-label {
  font-size:14px;
  float:none;
  width:auto;
}

.filter-form {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:var(--space-4);
  display:flex;
  align-items:flex-end;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin:0 0 var(--space-6);
}

.filter-form>div,.filter-form>.ui-field {
  flex:1 1 160px;
  margin:0;
}

.filter-form label {
  margin-bottom:var(--space-2);
}

.filter-form button {
  flex:0 0 auto;
  min-height:46px;
}

.filter-form .error-summary {
  flex-basis:100%;
}

.filter-form .helptext {
  max-width:320px;
}

.message {
  border:1px solid #cdd7ff;
  border-left:4px solid var(--blue);
  background:#eef3ff;
  border-radius:8px;
  padding:var(--space-4);
  font-size:14px;
  margin-bottom:var(--space-4);
}

.message.warning {
  border-color:#f0cc76;
  background:#fffbeb;
  color:#854d0e;
}

.message.error {
  border-color:#f8b4ac;
  background:#fef3f2;
  color:#912018;
}

.message.success {
  border-color:#b6dfc2;
  background:#f0fdf4;
  color:#166534;
}

.system-notices:empty {
  display:none;
}

.status-badge,.badge {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  border-radius:6px;
  padding:5px var(--space-2);
  font-size:12px;
  font-weight:600;
  line-height:1.3;
  background:#f0f1f5;
  color:#475467;
}

.status-success {
  color:#166534;
  background:#ecfdf3;
}

.status-warning {
  color:#854d0e;
  background:#fffaeb;
}

.status-danger {
  color:#b42318;
  background:#fef3f2;
}

.status-info {
  color:#0030cd;
  background:#eef3ff;
}

.status-neutral {
  color:#475467;
  background:#f0f1f5;
}

.badge.mint {
  background:#d6fff5;
  color:#145244;
}

.mint {
  background:var(--mint);
}

.lime {
  background:var(--lime);
}

.staff-sidebar {
  --bs-offcanvas-width:280px;
  background:white;
  border-right:1px solid var(--line);
}

.staff-sidebar .offcanvas-body {
  display:flex;
  flex-direction:column;
  padding:var(--space-6) var(--space-4);
}

.offcanvas-header {
  border-bottom:1px solid var(--line);
}

.offcanvas-title {
  font-size:18px;
  margin:0;
}

.staff-nav {
  width:100%;
}

.nav-group {
  margin-bottom:var(--space-6);
}

.nav-group>p {
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#667085;
  font-weight:650;
  padding:0 var(--space-3);
  margin:0 0 var(--space-2);
}

.staff-nav a,.sidebar-portal-link {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  border-radius:8px;
  min-height:44px;
  padding:var(--space-3) var(--space-3);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  color:#475467;
  margin-bottom:var(--space-1);
}

.staff-nav a:hover {
  background:var(--canvas);
  color:var(--ink);
}

.staff-nav a.active {
  background:#edf2ff;
  color:var(--blue);
  font-weight:650;
}

.nav-attention-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  min-width:22px;
  height:22px;
  padding:0 6px;
  margin-left:auto;
  border-radius:999px;
  background:var(--blue);
  color:white;
  font-size:12px;
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.sidebar-portal-link {
  border-top:1px solid var(--line);
  border-radius:0;
  margin-top:auto;
  padding-top:var(--space-6);
}

.nojs-navigation {
  padding:var(--space-4);
  background:white;
}

.nojs-navigation .staff-nav {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
}

.shop-nav {
  display:flex;
  align-items:center;
  gap:var(--space-2);
}

.shop-nav a {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-height:44px;
  padding:var(--space-2) var(--space-4);
  text-decoration:none;
  color:white;
  font-size:14px;
  font-weight:500;
  border-radius:8px;
}

.shop-nav a:hover,.shop-nav a.active {
  background:#ffffff22;
  color:white;
}

.desktop-shop-navigation .ui-icon {
  display:none;
}

.mobile-shop-navigation {
  display:none;
}

.shop-nav-icon {
  position:relative;
  display:inline-flex;
}

.cart-count {
  position:absolute;
  top:-7px;
  right:-10px;
  display:grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 4px;
  border-radius:20px;
  background:var(--lime);
  color:var(--ink);
  font-size:11px;
  font-weight:700;
  line-height:1;
}

.cart-count[hidden] {
  display:none;
}

.desktop-shop-navigation .shop-nav-icon:not(:has(.cart-count)) {
  display:none;
}

.desktop-shop-navigation .shop-nav-icon:has(.cart-count) {
  margin-right:8px;
}

.desktop-shop-navigation .shop-nav-icon:has(.cart-count) .ui-icon {
  display:block;
}

#cart-toast-region {
  position:fixed;
  bottom:calc(88px + env(safe-area-inset-bottom));
  right:var(--space-4);
  left:var(--space-4);
  z-index:1040;
  pointer-events:none;
}

.cart-toast {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  max-width:440px;
  margin-left:auto;
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--line);
  border-left:4px solid var(--blue);
  border-radius:12px;
  background:white;
  box-shadow:0 8px 32px #14141822;
  pointer-events:auto;
}

.cart-toast a {
  margin-left:auto;
  padding:var(--space-3) 0;
  font-weight:650;
  white-space:nowrap;
}

.cart-toast .cart-toast-close {
  flex-shrink:0;
  width:44px;
  padding:0;
  font-size:22px;
  color:var(--muted);
  background:transparent;
}

@media(min-width:768px) {
  #cart-toast-region {
    bottom:var(--space-6);
    left:auto;
  }
}

.subnav {
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  margin:0 0 var(--space-6);
}

.subnav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:var(--space-3) 14px;
  font-size:14px;
  text-decoration:none;
  border-radius:8px;
  color:var(--muted);
}

.subnav a[aria-current=page],.subnav a.active {
  background:#e9eeff;
  color:var(--blue);
  font-weight:650;
}

.subnav a:hover {
  background:#e9eeff;
}

.pagination-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin:var(--space-6) 0;
  color:var(--muted);
  font-size:13px;
}

.table-scroll {
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  margin-bottom:var(--space-6);
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  text-align:left;
}

caption {
  caption-side:top;
  text-align:left;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  padding:var(--space-4) var(--space-6);
  border-bottom:1px solid var(--line);
}

th,td {
  padding:14px var(--space-6);
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  overflow-wrap:anywhere;
}

th {
  background:#f9fafc;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

tbody tr:last-child td {
  border-bottom:0;
}

td a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-weight:600;
  text-decoration:none;
}

td form {
  margin:0;
}

.staff-orders-table td {
  padding-top:var(--space-2);
  padding-bottom:var(--space-2);
}

.staff-orders-table .order-secondary {
  display:block;
  color:var(--muted);
  font-size:12px;
}

.staff-orders-table .order-total {
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

td button {
  white-space:nowrap;
}

.empty-state {
  text-align:center;
  padding:var(--space-12) var(--space-6);
  color:var(--muted);
}

.empty-state h2 {
  color:var(--ink);
  margin:var(--space-4) 0 var(--space-2);
}

.empty-state p {
  max-width:440px;
  margin:0 auto var(--space-6);
}

.empty-icon {
  display:inline-flex;
  padding:var(--space-4);
  border-radius:50%;
  background:#eef3ff;
  color:var(--blue);
}

.summary-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
  margin-bottom:var(--space-6);
}

.stock-balances {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}

.stock-balances .metric-value {
  font-size:24px;
  line-height:1.2;
}

.metric-card {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--space-4);
  padding:var(--space-6);
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  color:var(--ink);
}

.metric-card:hover {
  border-color:#a9baff;
  color:var(--ink);
}

.metric-top {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:var(--space-3);
  font-size:13px;
  color:var(--muted);
}

.metric-top .ui-icon {
  color:var(--blue);
}

.metric-value {
  font-size:32px;
  line-height:1;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

.metric-foot {
  color:var(--blue);
  font-size:12px;
  font-weight:600;
  display:flex;
  gap:var(--space-2);
  align-items:center;
}

.welcome-panel {
  border-radius:12px;
  padding:var(--space-6);
  background:#e2fff5;
  border:1px solid #b7efe1;
  margin-bottom:var(--space-6);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
}

.welcome-panel p {
  max-width:560px;
  margin:0;
  color:#274b45;
}

.agenda-list {
  padding:0;
  list-style:none;
  margin:0;
}

.agenda-item {
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:var(--space-4);
  align-items:start;
  padding:var(--space-4) 0;
  border-bottom:1px solid var(--line);
}

.agenda-item:last-child {
  border:0;
}

.agenda-time {
  font-size:14px;
  font-weight:650;
}

.agenda-info a {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
}

.agenda-info p {
  font-size:13px;
  color:var(--muted);
  margin:0;
}

.quick-actions {
  display:grid;
  gap:var(--space-2);
}

.quick-actions a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  text-decoration:none;
  color:var(--ink);
  padding:var(--space-3);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:14px;
}

.quick-actions a:hover {
  background:var(--canvas);
}

.timeline {
  padding:0;
  list-style:none;
}

.timeline li {
  position:relative;
  border-left:2px solid #e5eaff;
  margin:0 0 0 var(--space-2);
  padding:0 0 var(--space-6) var(--space-6);
  font-size:14px;
}

.timeline li::before {
  content:'';
  position:absolute;
  left:-5px;
  top:6px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
}

.timeline li:last-child {
  padding-bottom:0;
}

.timeline time,.timeline .muted {
  display:block;
  font-size:12px;
}

.history-disclosure {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:var(--space-4);
  padding:0 var(--space-6);
}

.history-disclosure>summary {
  min-height:56px;
  display:list-item;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  padding:var(--space-4) 0;
}

.history-disclosure>.disclosure-body {
  padding:var(--space-2) 0 var(--space-6);
}

.confirmation-panel {
  border:1px solid #f0cc76;
  border-radius:12px;
  background:#fffbeb;
  padding:var(--space-6);
  margin-bottom:var(--space-6);
}

.confirmation-panel h2 {
  font-size:17px;
  color:#854d0e;
}

.document-link {
  display:flex;
  gap:var(--space-3);
  align-items:center;
  min-height:48px;
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:8px;
  padding:var(--space-3);
  margin-bottom:var(--space-2);
}

.document-link .ui-icon {
  color:var(--blue);
}

.auth-shell .page {
  max-width:1040px;
  padding-top:var(--space-12);
}

.auth-panel {
  max-width:440px;
  margin:0 auto;
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:var(--space-8);
}

.auth-panel h1 {
  font-size:32px;
}

.auth-panel form>button {
  width:100%;
}

.auth-mark {
  display:inline-flex;
  padding:var(--space-3);
  background:var(--blue);
  border-radius:12px;
  margin-bottom:var(--space-6);
}

.auth-intro {
  color:var(--muted);
  margin-bottom:var(--space-6);
}

.otp-input input {
  font-size:28px;
  letter-spacing:.25em;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

.auth-footer {
  max-width:440px;
  margin:var(--space-6) auto;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}

.portal-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-6);
  margin:var(--space-8) 0;
}

.portal-card {
  display:block;
  padding:var(--space-8);
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .15s;
}

.portal-card:hover {
  border-color:var(--blue);
  color:var(--ink);
}

.portal-card .portal-icon {
  display:inline-flex;
  background:#e7fff8;
  border-radius:12px;
  padding:var(--space-4);
  color:#17483c;
  margin-bottom:var(--space-6);
}

.portal-card.staff .portal-icon {
  background:#f0ffd0;
  color:#33430b;
}

.portal-card h2 {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:24px;
}

.portal-card p {
  color:var(--muted);
  margin-bottom:var(--space-6);
}

.portal-card .portal-action {
  font-size:14px;
  font-weight:650;
  color:var(--blue);
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
  gap:var(--space-6);
}

.catalogue-choice-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:var(--space-4);
}

.catalogue-choice {
  display:flex;
  align-items:center;
  gap:var(--space-4);
  padding:var(--space-6);
  min-height:112px;
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  color:var(--ink);
  text-decoration:none;
}

.catalogue-choice:hover {
  border-color:var(--blue);
  color:var(--blue);
}

.catalogue-choice-icon {
  display:grid;
  place-items:center;
  background:var(--mint);
  color:var(--blue);
  border-radius:8px;
  width:44px;
  height:44px;
  flex-shrink:0;
}

.catalogue-choice-body {
  display:grid;
  gap:var(--space-1);
  flex:1;
  min-width:0;
}

.catalogue-choice-body strong {
  font-size:19px;
  overflow-wrap:anywhere;
}

.catalogue-breadcrumbs>* {
  max-width:100%;
  overflow-wrap:anywhere;
}

.product-card {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:box-shadow .15s,border-color .15s;
}

.product-card:hover {
  border-color:#a9baff;
  box-shadow:0 6px 20px #1018280a;
}

.product-link {
  display:block;
  text-decoration:none;
  color:var(--ink);
}

.product-link:hover {
  color:var(--ink);
}

.product-card img,.product-image {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  height:auto;
}

.product-image {
  border-radius:12px;
}

.image-placeholder {
  display:grid;
  place-items:center;
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#e8eeff,#dcfff4);
  color:var(--blue);
  font-size:64px;
  font-weight:750;
  border-radius:12px;
}

.product-card .image-placeholder {
  border-radius:0;
}

.card-body {
  padding:var(--space-6);
}

.card-body h2 {
  font-size:19px;
  margin:var(--space-2) 0 var(--space-3);
}

.card-body .product-meta {
  font-size:12px;
  color:var(--muted);
}

.product-layout {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
  margin-bottom:var(--space-6);
  align-items:start;
}

.product-details {
  background:white;
  padding:var(--space-6);
  border:1px solid var(--line);
  border-radius:12px;
}

.product-details .price {
  margin-bottom:var(--space-2);
}

.collection-info {
  margin-top:var(--space-8);
  padding:var(--space-6);
  background:#e2fff5;
  border:1px solid #b7efe1;
  border-radius:12px;
}

.collection-info h2 {
  font-size:18px;
}

.collection-info p {
  font-size:14px;
  margin-bottom:var(--space-2);
}

.purchase-steps {
  list-style:none;
  display:flex;
  gap:var(--space-4);
  padding:0;
  margin:0 0 var(--space-6);
  border-bottom:1px solid var(--line);
}

.purchase-steps li {
  margin:0;
  flex:1;
}

.purchase-steps .purchase-step {
  min-height:52px;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:13px;
  text-decoration:none;
  color:var(--muted);
  border-bottom:3px solid transparent;
}

.purchase-steps .purchase-step-number {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#e9edf5;
  font-size:12px;
}

.purchase-steps [aria-current=step] .purchase-step {
  color:var(--blue);
  font-weight:650;
  border-color:var(--blue);
}

.purchase-steps [aria-current=step] .purchase-step-number {
  background:var(--blue);
  color:white;
}

.cart-line {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-3);
  background:white;
  padding:var(--space-4);
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:var(--space-4);
}

.cart-line-heading {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:var(--space-3);
}

.cart-line-heading h2,.cart-line-heading .price {
  margin:0;
}

.cart-line-heading .price {
  flex-shrink:0;
}

.cart-line-info,.cart-line-form {
  min-width:0;
}

.cart-line-meta {
  font-size:14px;
  margin:var(--space-1) 0 0;
}

.cart-line-info .message {
  margin:var(--space-2) 0 0;
}

.cart-line .cart-line-form {
  display:grid;
  gap:var(--space-2);
}

.cart-line-form .action-row {
  display:grid;
  grid-template-columns:1fr 1fr;
}

.cart-line .price {
  font-size:20px;
}

.cart-summary {
  padding:var(--space-6);
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:var(--space-6);
}

.cart-summary h2 {
  font-size:18px;
}

.cart-summary .button {
  width:100%;
}

.schedule-layout {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
}

.hours-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
  padding:var(--space-4) 0;
  border-bottom:1px solid var(--line);
}

.hours-row>strong {
  grid-column:1/-1;
  font-size:14px;
}

.hours-row .ui-field {
  margin:0;
}

.hours-row label {
  font-size:12px;
  font-weight:400;
}

.slot-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:var(--space-3);
  margin:var(--space-4) 0 var(--space-6);
}

.order-details,.order-actions {
  max-width:900px;
  margin-inline:auto;
}

.order-details .line-item>div {
  min-width:0;
  overflow-wrap:anywhere;
}

.order-details .line-item>strong {
  flex-shrink:0;
  white-space:nowrap;
}

.order-actions .button {
  white-space:normal;
}

@media(max-width:991.98px) {
  .staff-shell .brand-header {
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
  }
  .staff-shell .brand {
    justify-self:center;
  }
  .staff-shell .header-actions {
    justify-self:end;
  }
  .staff-menu-button.header-button {
    width:44px;
    height:44px;
    padding:var(--space-2)!important;
    justify-content:center;
    border:0!important;
  }
  .staff-menu-button.header-button .ui-icon {
    width:24px;
    height:24px;
  }
}

@media(max-width:767.98px) {
  .order-actions {
    flex-direction:column;
    align-items:stretch;
  }

  .order-actions>.button,.order-actions>button,.order-actions>.order-documents {
    width:100%;
  }

  .order-actions .button,.order-actions>button {
    width:100%;
    min-height:52px;
  }
}

.order-document-links {
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding:var(--space-4);
  border:1px solid var(--line);
  border-radius:8px;
  background:white;
}

.slot-option {
  border:1px solid var(--control-border);
  border-radius:8px;
  padding:var(--space-3)!important;
  min-height:52px!important;
  cursor:pointer;
  font-size:14px;
}

.slot-option:has(input:checked) {
  border-color:var(--blue);
  background:#eef3ff;
  color:var(--blue);
}

.order-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:var(--space-6);
}

.order-card {
  margin-bottom:0;
}

.order-card h2 {
  margin:var(--space-3) 0;
}

.order-card .price {
  font-size:24px;
}

.success-heading {
  display:flex;
  align-items:center;
  gap:var(--space-4);
  margin-bottom:var(--space-6);
}

.success-icon {
  padding:var(--space-4);
  background:#d6fff5;
  color:#166534;
  border-radius:50%;
  display:inline-flex;
}

.line-item {
  display:flex;
  justify-content:space-between;
  gap:var(--space-4);
  border-bottom:1px solid var(--line);
  padding:var(--space-4) 0;
}

.line-item:last-child {
  border-bottom:0;
}

.line-item h3 {
  margin:0 0 var(--space-2);
}

.line-item p {
  margin:0;
  font-size:14px;
  color:var(--muted);
}

.item-form-row {
  padding:var(--space-6) 0;
  border-bottom:1px solid var(--line);
}

.item-form-row:last-child {
  border-bottom:0;
}

.comparison-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
}

.image-preview {
  margin-bottom:var(--space-6);
  max-width:400px;
}

.image-preview img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:12px;
}

.finance-metrics {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
  margin-bottom:var(--space-6);
}

.finance-metric {
  padding:var(--space-4);
  background:var(--canvas);
  border-radius:8px;
}

.finance-metric dt {
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  margin-bottom:var(--space-2);
}

.finance-metric dd {
  font-weight:700;
  font-size:22px;
  font-variant-numeric:tabular-nums;
  margin:0;
  overflow-wrap:anywhere;
}

.export-info {
  padding:var(--space-6);
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:var(--space-6);
  background:var(--canvas);
}

@media(min-width:768px) {
  h1 {
    font-size:32px;
  }
  .page {
    padding:var(--space-8);
  }
  .form-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .product-layout {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .cart-line {
    grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);
  }
  .schedule-layout {
    grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  }
  .comparison-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hours-row {
    grid-template-columns:110px 1fr 1fr;
    align-items:center;
  }
  .hours-row>strong {
    grid-column:auto;
  }
  .finance-metrics {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(min-width:992px) {
  .staff-menu-button {
    display:none!important;
  }
  .staff-sidebar {
    position:fixed!important;
    top:64px;
    bottom:0;
    left:0;
    width:var(--sidebar-width)!important;
    overflow-y:auto;
    background:white!important;
  }
  .staff-sidebar .offcanvas-body {
    height:100%;
    background:white!important;
  }
  .staff-shell .page {
    margin-left:var(--sidebar-width);
    max-width:calc(1440px - var(--sidebar-width));
  }
  .staff-shell .brand-header {
    position:sticky;
    top:0;
  }
  .detail-layout {
    grid-template-columns:minmax(0,1fr) 320px;
  }
  .detail-summary {
    order:0;
    position:sticky;
    top:88px;
  }
  .summary-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .welcome-panel {
    padding:var(--space-6) var(--space-8);
  }
}

@media(max-width:767.98px) {
  .page {
    padding:var(--space-6) var(--space-4);
  }
  .brand-header {
    height:56px;
    padding:0 var(--space-4);
    gap:var(--space-2);
  }
  .wordmark {
    font-size:20px;
  }
  .brand {
    gap:var(--space-2);
  }
  .brand img {
    width:26px;
    height:26px;
  }
  .header-actions {
    gap:var(--space-1);
  }
  .header-button {
    padding:var(--space-2)!important;
    font-size:13px!important;
  }
  .header-button .ui-icon {
    width:18px;
    height:18px;
  }
  .panel,.checkout-line,.form-panel form,.cart-summary,.product-details {
    padding:var(--space-6);
  }
  .page-heading {
    margin-bottom:var(--space-6);
  }
  .desktop-shop-navigation {
    display:none;
  }
  .mobile-shop-navigation {
    display:block;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:white;
    border-top:1px solid var(--line);
    z-index:1020;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-shop-navigation .shop-nav {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
  }
  .mobile-shop-navigation a {
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
    padding:var(--space-2) 0 var(--space-2);
    min-height:64px;
    border-radius:0;
    color:#667085;
    font-size:11px;
  }
  .mobile-shop-navigation a:is(:hover,:focus-visible),.mobile-shop-navigation a.active {
    color:var(--blue);
    background:#f5f7ff;
  }
  .shop-shell .page {
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
  }
  .welcome-panel {
    padding:var(--space-6);
    align-items:start;
    flex-direction:column;
  }
  .summary-grid {
    gap:var(--space-3);
  }
  .metric-card {
    padding:var(--space-4);
  }
  .metric-top {
    font-size:12px;
  }
  .metric-top .ui-icon {
    width:18px;
    height:18px;
  }
  .metric-value {
    font-size:28px;
  }
  .metric-foot {
    font-size:11px;
  }
  .auth-shell .page {
    padding-top:var(--space-8);
  }
  .auth-panel {
    padding:var(--space-6);
  }
  .auth-panel h1 {
    font-size:26px;
  }
  .portal-grid {
    grid-template-columns:1fr;
    gap:var(--space-4);
  }
  .portal-card {
    padding:var(--space-6);
  }
  .portal-card .portal-icon {
    margin-bottom:var(--space-4);
  }
  .portal-card p {
    margin-bottom:var(--space-4);
  }
  .purchase-steps {
    gap:var(--space-2);
  }
  .purchase-steps .purchase-step {
    font-size:12px;
    gap:var(--space-2);
  }
  .table-scroll:not(.wide-table) {
    border:0;
    border-radius:0;
    background:transparent;
    overflow:visible;
  }
  .table-scroll:not(.wide-table) table,.table-scroll:not(.wide-table) tbody {
    display:block;
  }
  .table-scroll:not(.wide-table) caption {
    display:block;
    border:0;
    background:transparent;
    padding:0 0 var(--space-3);
    font-size:13px;
  }
  .table-scroll:not(.wide-table) thead {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
  }
  .table-scroll:not(.wide-table) tbody tr {
    display:block;
    border:1px solid var(--line);
    background:white;
    border-radius:12px;
    padding:var(--space-3) var(--space-4);
    margin-bottom:var(--space-3);
  }
  .table-scroll:not(.wide-table) td {
    display:grid;
    grid-template-columns:minmax(80px,36%) minmax(0,1fr);
    gap:var(--space-3);
    padding:var(--space-2) 0;
    border:0;
    font-size:14px;
    align-items:center;
  }
  .table-scroll:not(.wide-table) td::before {
    content:attr(data-label);
    color:var(--muted);
    font-size:12px;
    font-weight:500;
  }
  .table-scroll:not(.wide-table) td[colspan] {
    display:block;
    text-align:center;
    padding:var(--space-6) 0;
    color:var(--muted);
  }
  .table-scroll:not(.wide-table) td[colspan]::before {
    display:none;
  }
  .table-scroll td .action-row {
    grid-column:2;
  }
  .table-scroll td a {
    min-height:44px;
  }
  .table-scroll td form {
    min-width:0;
  }
  .table-scroll.staff-orders-table tbody tr:not(:has(td[colspan])) {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"reference status" "customer total" "fulfilment fulfilment";
    align-items:center;
    gap:var(--space-2) var(--space-3);
    padding:var(--space-3) var(--space-4);
  }
  .table-scroll.staff-orders-table td:not([colspan]) {
    display:block;
    padding:0;
    min-width:0;
  }
  .table-scroll.staff-orders-table td::before {
    display:none;
  }
  .staff-orders-table .order-reference {
    grid-area:reference;
  }
  .staff-orders-table .order-status {
    grid-area:status;
    text-align:right;
  }
  .staff-orders-table .order-customer {
    grid-area:customer;
  }
  .staff-orders-table .order-total {
    grid-area:total;
    text-align:right;
    white-space:nowrap;
  }
  .staff-orders-table .order-fulfilment {
    grid-area:fulfilment;
    color:var(--muted);
  }
  .staff-orders-table .order-fulfilment .order-secondary {
    display:inline;
    margin-left:var(--space-2);
  }
  .agenda-item {
    grid-template-columns:84px minmax(0,1fr);
    gap:var(--space-3);
  }
  .form-panel {
    max-width:100%;
  }
  .details {
    grid-template-columns:minmax(90px,1fr) minmax(0,1.5fr);
    gap:var(--space-3);
  }
  .history-disclosure {
    padding:0 var(--space-6);
  }
  .filter-form {
    padding:var(--space-4);
  }
  .filter-form>div {
    flex-basis:100%;
  }
  .filter-form button {
    width:100%;
  }
  .filter-form input,.filter-form select {
    width:100%;
  }
  .finance-metrics {
    gap:var(--space-3);
  }
  .finance-metric {
    padding:var(--space-3);
  }
  .finance-metric dd {
    font-size:19px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}

.radio-group {
  display:grid;
  gap:var(--space-1);
}

.radio-group>div {
  margin:0;
}

.radio-group input {
  display:inline-block;
}

button[aria-disabled=true] {
  opacity:.65;
  cursor:wait;
}

button[aria-disabled=true]::after {
  content:'';
  width:14px;
  height:14px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:ui-spin .7s linear infinite;
}

@keyframes ui-spin {
  to {
    transform:rotate(360deg);
  }
}

@media(prefers-reduced-motion:reduce) {
  button[aria-disabled=true]::after {
    animation:none;
  }
}

.cart-layout {
  display:grid;
  gap:var(--space-6);
  align-items:start;
}

.cart-items {
  min-width:0;
}

.cart-layout .cart-summary {
  margin-bottom:0;
}

@media(min-width:992px) {
  .cart-layout {
    grid-template-columns:minmax(0,1fr) 320px;
  }
  .cart-layout .cart-summary {
    position:sticky;
    top:88px;
  }
}

.purchase-steps button {
  width:100%;
  background:transparent;
  border:0;
  border-bottom:3px solid transparent;
  border-radius:0;
  box-shadow:none;
  padding:0;
  text-align:left;
}

.purchase-steps button:hover {
  background:transparent;
  color:var(--blue);
}

.history-disclosure a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

.cost-adjustment-slider { min-height: 44px; }

.cost-confirmation {
  width: min(30rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  margin: auto;
}
.cost-confirmation::backdrop { background: rgb(16 24 40 / 45%); }

.staff-order-detail {
  margin-bottom:var(--space-6);
}
.staff-order-summary .panel-head {
  align-items:flex-start;
  margin-bottom:var(--space-4);
}
.staff-order-summary .status-badge {
  flex-shrink:0;
}
.staff-order-log {
  margin-bottom:0;
}
.invoice-history {
  list-style:none;
  padding:0;
  margin:0;
  font-size:13px;
}
.invoice-history li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
}
.invoice-history a,.invoice-history li>span {
  display:block;
  min-width:0;
  min-height:44px;
  line-height:44px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:650;
}
.invoice-history time {
  flex-shrink:0;
  color:var(--muted);
  white-space:nowrap;
  font-size:12px;
}
.staff-order-items {
  margin-bottom:0;
}
.staff-order-items td {
  padding:var(--space-3);
}
.stock-item-meta {
  display:block;
  font-size:12px;
  color:var(--muted);
}
.staff-order-actions {
  display:flex;
  align-items:start;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-6);
}
.order-action>summary {
  list-style:none;
}
.order-action>summary::-webkit-details-marker {
  display:none;
}
.order-action>[data-confirmation-content] {
  margin-top:var(--space-4);
  max-width:480px;
}
.order-confirmation {
  width:min(30rem,calc(100% - 2rem));
  max-height:calc(100dvh - 2rem);
  padding:0;
  margin:auto;
  border:1px solid var(--line);
  border-radius:12px;
}
.order-confirmation::backdrop {
  background:rgb(16 24 40 / 45%);
}
.order-confirmation .panel {
  margin:0;
  border:0;
}
.order-confirmation .action-row {
  margin-top:var(--space-4);
}
@media(max-width:767.98px) {
  .staff-items-panel,.staff-invoices-panel {
    padding:var(--space-4);
  }
  .staff-order-log {
    padding:0 var(--space-4);
  }
  .table-scroll.staff-order-items tbody tr {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"item total" "farm farm" "grams rate";
    align-items:center;
    gap:var(--space-2) var(--space-3);
    padding:var(--space-3);
    margin-bottom:var(--space-2);
  }
  .table-scroll.staff-order-items tbody tr:last-child {
    margin-bottom:0;
  }
  .table-scroll.staff-order-items td {
    display:block;
    padding:0;
    min-width:0;
  }
  .table-scroll.staff-order-items td::before {
    display:none;
  }
  .staff-order-items .stock-item-name { grid-area:item; }
  .staff-order-items .stock-item-total { grid-area:total; font-weight:700; text-align:right; }
  .staff-order-items .stock-item-farm { grid-area:farm; color:var(--muted); font-size:12px; }
  .table-scroll.staff-order-items .stock-item-farm::before { display:inline; content:"Farm: "; }
  .staff-order-items .stock-item-grams { grid-area:grams; }
  .staff-order-items .stock-item-rate { grid-area:rate; text-align:right; }
  .staff-order-actions { flex-direction:column; }
  .staff-order-actions>.button,.staff-order-actions>.order-action { width:100%; }
  .staff-order-actions .button { width:100%; min-height:52px; }
  .order-confirmation .action-row { display:grid; grid-template-columns:1fr; }
  .order-confirmation button { width:100%; min-height:52px; }
}

/* Keep the notification matrix readable and its switches usable on phones. */
.notification-matrix { table-layout: fixed; width: 100%; }
.notification-matrix th:first-child { width: auto; overflow-wrap: anywhere; }

@media (min-width:768px) {
  .delivery-table { table-layout:fixed; }
  .delivery-table th,.delivery-table td { padding-left:16px; padding-right:16px; }
  .delivery-table th { white-space:nowrap; }
  .delivery-table th:nth-child(1) { width:30%; }
  .delivery-table th:nth-child(2) { width:16%; }
  .delivery-table th:nth-child(3) { width:10%; }
  .delivery-table th:nth-child(4) { width:17%; }
  .delivery-table th:nth-child(5) { width:15%; }
  .delivery-table th:nth-child(6) { width:12%; }
}
.notification-matrix th:not(:first-child), .notification-matrix td { width: 80px; text-align: center; }
.notification-matrix thead th { white-space: nowrap; }
.notification-matrix th small { display: block; font-weight: 400; margin-top: .25rem; }
.notification-event { font-size: .9rem; }
.notification-switch { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; cursor: pointer; }
.notification-switch input { width: 20px; height: 20px; margin: 0; }
@media (max-width: 575px) {
  .notification-matrix th, .notification-matrix td { padding: .5rem .25rem; }
  .notification-matrix th:not(:first-child), .notification-matrix td { width: 80px; font-size: .75rem; }
}

.finance-balance-metrics {
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:0;
}

.finance-chart-legend {
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  padding:0;
  margin:24px 0 32px;
  list-style:none;
  font-size:14px;
}

.finance-chart-legend li { display:flex; align-items:center; gap:8px; }
.finance-line-order_value { color:var(--blue); }
.finance-line-paid_value { color:#007f70; }
.finance-line-outstanding { color:#8844b8; }
.finance-line-key { width:24px; border-top:3px solid currentColor; }
.finance-line-key.finance-line-paid_value { border-top-style:dashed; }
.finance-line-key.finance-line-outstanding { border-top-style:dotted; }

.finance-chart { display:grid; grid-template-columns:88px minmax(0,1fr); margin:0 0 48px; }
.finance-chart-axis { position:relative; height:260px; font-size:12px; color:var(--muted); }
.finance-chart-axis span { position:absolute; right:12px; transform:translateY(-50%); white-space:nowrap; }
.finance-chart-plot { position:relative; height:260px; }
.finance-chart-plot svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.finance-chart-gridline { position:absolute; left:0; right:0; border-top:1px solid var(--line); }
.finance-chart-line { fill:none; stroke:currentColor; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.finance-chart-line.finance-line-paid_value { stroke-dasharray:9 6; }
.finance-chart-line.finance-line-outstanding { stroke-dasharray:2 6; }
.finance-chart-dot { stroke:currentColor; stroke-width:7; stroke-linecap:round; }
.finance-chart-dates { position:absolute; top:calc(100% + 12px); left:0; right:0; display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:12px; }
.finance-chart-dates span:only-child { margin:auto; }
.finance-chart-values { margin:0; }
.finance-chart-values td { white-space:nowrap; font-variant-numeric:tabular-nums; }

@media(max-width:767px) {
  .finance-balance-metrics { grid-template-columns:1fr; }
  .finance-chart { grid-template-columns:76px minmax(0,1fr); }
  .finance-chart-axis,.finance-chart-plot { height:220px; }
  .finance-chart-dates span { font-size:11px; }
  .finance-chart-dates span:nth-child(2):not(:last-child) { display:none; }
}

.customer-transaction-actions { margin-bottom:var(--space-6); }

@media(max-width:767px) {
  .customer-finance-filters .button { width:100%; }
}

.staff-nav [data-attention-container] { display:inline-flex; margin-left:auto; }