:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --border: #d9e2ec;
  --border-strong: #bcccdc;
  --text: #102a43;
  --muted: #486581;
  --accent: #186faf;
  --accent-soft: #e8f1fb;
  --success: #1f9254;
  --success-soft: #e8f7ef;
  --warning: #ad6a00;
  --warning-soft: #fff4db;
  --danger: #c93c37;
  --danger-soft: #fdeaea;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --radius: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #eef3f8 0%, var(--bg) 160px);
  color: var(--text);
}
a { color: var(--accent); }
a:hover { text-decoration: none; }
button, input, textarea, select { font: inherit; }
.app-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 24px 0 48px;
}
.page-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-kicker {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 8px;
}
.page-title {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  line-height: 1.05;
}
.page-subtitle {
  color: var(--muted);
  margin: 10px 0 0;
  max-width: 72ch;
}
.topbar-actions,
.inline-actions,
.card-actions,
.filter-row,
.stack-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.button,
.button-link,
button,
input[type="submit"] {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 15px;
  min-height: 44px;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(16, 42, 67, 0.04);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.button:hover,
.button-link:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.button:disabled,
button:disabled,
.is-loading {
  opacity: .72;
  cursor: wait;
  transform: none !important;
}
.button.primary,
button.primary,
input[type="submit"].primary { background: var(--accent); color: #fff; }
.button.secondary,
button.secondary { background: var(--panel-soft); border-color: var(--border); }
.button.success,
button.success { background: var(--success); color: #fff; }
.button.warning,
button.warning { background: #f59e0b; color: #fff; }
.button.danger,
button.danger { background: var(--danger); color: #fff; }
.button.ghost,
button.ghost { background: transparent; border-color: var(--border); }

.card,
.panel,
.hero {
  background: var(--panel);
  border: 1px solid rgba(188, 204, 220, 0.75);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.hero {
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
}
.card + .card,
.panel + .panel { margin-top: 14px; }
.grid {
  display: grid;
  gap: 14px;
}
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.stat-card .label {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 8px;
}
.stat-card .value {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 800;
}
.badge,
.status-pill,
.payment-pill,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-pill.pending_acceptance { background: #fff3d4; color: #855d00; }
.status-pill.accepted { background: #eef7ff; color: #165381; }
.status-pill.ready { background: #e8f7ef; color: #166c3b; }
.status-pill.pending { background: #fff3d4; color: #855d00; }
.status-pill.assigned { background: #eefcf9; color: #0f766e; }
.status-pill.picked_up { background: #e0f7f3; color: #0f6b63; }
.status-pill.out_for_delivery { background: #d9fbf3; color: #0b625b; }
.status-pill.arrived_at_dropoff { background: #e7fff1; color: #047344; }
.status-pill.delivered { background: #e6f8ed; color: #1b7a44; }
.status-pill.failed { background: #fdeaea; color: #a92828; }
.status-pill.cancelled { background: #eef2f6; color: #52606d; }
.payment-pill.account_due,
.payment-pill.cash_due { background: #fff4db; color: #8a5a00; }
.payment-pill.cash_collected,
.payment-pill.paid { background: #e8f7ef; color: #166c3b; }
.payment-pill.not_applicable { background: #eef2f6; color: #52606d; }
.payment-pill.voided { background: #f4efff; color: #6d28d9; border-color: #d9c8ff; }
.chip.cod { background: #fff0e0; color: #a24e00; }
.chip.live { background: #eaf2ff; color: #234fa5; }
.chip.claimable { background: #e8f7ef; color: #166c3b; }

.filter-card {
  margin-bottom: 20px;
}
.filter-form {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: end;
}
.filter-form label,
.form-grid label,
.field {
  display: grid;
  gap: 7px;
}
.filter-form label { min-width: 180px; }
input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px 13px;
  background: #fff;
  color: var(--text);
}
textarea { min-height: 110px; resize: vertical; }
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid rgba(24, 111, 175, 0.15);
  border-color: var(--accent);
}
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.form-card h2,
.card h2,
.panel h2,
.section-title {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 1.15rem;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.form-grid .full { grid-column: 1 / -1; }
.helper,
.muted,
.small,
.live-note {
  color: var(--muted);
}
.live-note {
  margin-top: 8px;
  font-size: 14px;
}
.flash {
  border-radius: 14px;
  padding: 14px 15px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.flash.success { background: var(--success-soft); border-color: #bfe7cf; color: #166c3b; }
.flash.error { background: var(--danger-soft); border-color: #f3b7b6; color: #9f2621; }
.flash.info { background: var(--accent-soft); border-color: #c8dbef; color: #165381; }
.empty-state {
  padding: 30px 18px;
  text-align: center;
  color: var(--muted);
}
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
th,
td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid #edf2f7;
  vertical-align: top;
}
thead th {
  background: #f8fbff;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
tbody tr:hover { background: #fbfdff; }
.job-list,
.detail-stack,
.timeline,
.history-list {
  display: grid;
  gap: 14px;
}
.job-card {
  display: grid;
  gap: 14px;
}
.job-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.job-title {
  margin: 0;
  font-size: 1.15rem;
}
.job-subtitle { color: var(--muted); margin: 6px 0 0; }
.route-grid,
.kv-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.route-stop,
.kv-card,
.info-box {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.route-stop h3,
.kv-card h3,
.info-box h3 {
  margin: 0 0 10px;
  font-size: 15px;
}
.meta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.value-stack {
  display: grid;
  gap: 5px;
}
.kv {
  display: grid;
  gap: 4px;
}
.kv .label {
  color: var(--muted);
  font-size: 13px;
}
.kv .value {
  font-weight: 600;
  word-break: break-word;
}
.timeline-item,
.history-item {
  border-left: 3px solid #d8e2eb;
  padding-left: 14px;
}
.timeline-item.is-complete { border-left-color: #5ab57a; }
.timeline-item.is-current {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
}
.timeline-item.is-current strong { color: var(--text); }
.timeline-item .time,
.history-item .time {
  color: var(--muted);
  font-size: 13px;
  margin-top: 5px;
}
.history-item .event {
  font-weight: 800;
  margin-bottom: 5px;
}
.note-block {
  white-space: pre-wrap;
  word-break: break-word;
}
.split {
  display: grid;
  gap: 18px;
  grid-template-columns: 2fr 1fr;
}
.sticky-side {
  position: sticky;
  top: 18px;
  align-self: start;
}
.toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 28px));
}
.toast {
  border-radius: 14px;
  padding: 14px 15px;
  box-shadow: var(--shadow);
  color: #fff;
  font-weight: 700;
}
.toast.success { background: #177245; }
.toast.error { background: #b5332f; }
.toast.info { background: #165381; }
.loading-note { opacity: .7; }
.mobile-stack { display: none; }
.codeish {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}
hr.soft {
  border: 0;
  border-top: 1px solid #edf2f7;
  margin: 16px 0;
}

@media (max-width: 960px) {
  .split,
  .grid.two,
  .grid.three,
  .grid.four,
  .route-grid,
  .kv-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
  .sticky-side { position: static; }
  .app-shell { width: min(100% - 20px, 1180px); }
}

@media (max-width: 720px) {
  .page-topbar { align-items: stretch; }
  .topbar-actions,
  .filter-form,
  .stack-actions,
  .inline-actions,
  .card-actions {
    width: 100%;
  }
  .topbar-actions .button,
  .stack-actions .button,
  .inline-actions .button,
  .card-actions .button,
  .filter-form .button,
  .filter-form button,
  .button.full-mobile,
  button.full-mobile {
    width: 100%;
    justify-content: center;
  }
  table { min-width: 620px; }
}

.storefront-page {
  background: linear-gradient(180deg, #edf5ff 0%, var(--bg) 180px);
}
.storefront-hero {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
}
.storefront-meta {
  display: grid;
  gap: 12px;
}
.storefront-layout {
  grid-template-columns: 280px 1fr;
}
.category-nav {
  display: grid;
  gap: 10px;
}
.category-nav .button.is-active {
  background: var(--accent-soft);
  border-color: #bfd4ea;
}
.storefront-section {
  display: grid;
  gap: 16px;
}
.storefront-item-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.storefront-item-card {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.storefront-item-card.is-unavailable {
  opacity: .88;
}
.price-tag {
  background: #0f172a;
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  white-space: nowrap;
}
.price-tag.large {
  font-size: 1.1rem;
  padding: 11px 16px;
}
.badge.success {
  background: var(--success-soft);
  color: var(--success);
}
.badge.warn {
  background: var(--warning-soft);
  color: var(--warning);
}
.badge.danger {
  background: var(--danger-soft);
  color: var(--danger);
}
@media (max-width: 960px) {
  .storefront-layout,
  .storefront-item-grid {
    grid-template-columns: 1fr;
  }
}

.inline-form {
    display: inline;
}

.cart-line-actions {
    display: grid;
    gap: 0.75rem;
}

.cart-line-actions input[type="number"] {
    max-width: 120px;
}

.compact-list .history-item {
    padding: 0.5rem 0;
}

.checkbox-row {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.checkbox-row input {
    margin-top: 0.2rem;
}

.option-group-fieldset {
    border: 1px solid var(--line, #d7dfea);
    border-radius: 12px;
    padding: 0.9rem;
}

.success-text {
    color: #166534;
}

.danger-text {
    color: #991b1b;
}

.is-disabled {
    pointer-events: none;
    opacity: 0.55;
}

/* Rider job detail polish */
.rider-next-action {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}
.rider-action-grid {
  display: grid;
  gap: 12px;
}
.rider-big-button {
  min-height: 54px;
  font-size: 1.05rem;
}
.rider-cod-form {
  display: grid;
  gap: 12px;
  background: #fffaf0;
  border: 1px solid #f2d28c;
  border-radius: 16px;
  padding: 14px;
}
.restricted-banner {
  border: 1px solid #f0b4b3;
  background: var(--danger-soft);
  color: #8f211d;
  border-radius: 16px;
  padding: 13px 14px;
}
.id-check-row {
  background: var(--warning-soft);
  border: 1px solid #f0d58c;
  border-radius: 14px;
  padding: 12px;
  font-weight: 700;
}
.rider-detail-layout {
  align-items: start;
}
.rider-route-grid {
  align-items: stretch;
}
.rider-route-card {
  min-height: 100%;
}
.order-line-list {
  display: grid;
  gap: 12px;
}
.order-line-card {
  border: 1px solid var(--border);
  background: var(--panel-soft);
  border-radius: 16px;
  padding: 14px;
}
.order-line-card.is-restricted {
  border-color: #f0b4b3;
  background: #fff7f7;
}
.selection-list {
  margin: 10px 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}
.selection-list li + li {
  margin-top: 4px;
}

@media (max-width: 720px) {
  .rider-next-action {
    margin-top: -4px;
  }
  .rider-next-action .job-head,
  .order-line-card .job-head {
    align-items: flex-start;
  }
  .rider-big-button {
    min-height: 58px;
  }
}

/* Rider dashboard console polish */
.rider-dashboard-section {
  margin-bottom: 18px;
}
.rider-dashboard-list {
  margin-top: 14px;
}
.rider-dashboard-job-card {
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}
.compact-job-card {
  gap: 10px;
}
@media (max-width: 720px) {
  .rider-dashboard-section {
    margin-bottom: 14px;
  }
  .rider-dashboard-kv,
  .rider-dashboard-route-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact claimable job cards */
.compact-claim-card {
  gap: 10px;
}
.compact-claim-head {
  align-items: center;
}
.compact-claim-badges {
  justify-content: flex-end;
}
.compact-route-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  line-height: 1.35;
}
.compact-route-stop {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
.compact-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.compact-route-arrow {
  color: var(--muted);
  font-weight: 900;
}
.compact-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 2px;
}
.compact-item-summary {
  font-weight: 800;
}

@media (max-width: 520px) {
  .compact-claim-head {
    align-items: flex-start;
  }
  .compact-claim-badges {
    justify-content: flex-start;
  }
  .compact-route-line {
    gap: 6px;
    padding: 9px 10px;
  }
  .compact-route-arrow {
    display: none;
  }
  .compact-route-stop {
    width: 100%;
  }
}


/* Rider earnings */
.rider-earnings-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.rider-earnings-strip h2 {
  margin: 0;
}
.rider-earnings-strip-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.earning-mini-stat {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 9px 12px;
  min-width: 110px;
}
.earning-mini-stat .label {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.earning-mini-stat strong {
  display: block;
  font-size: 1.25rem;
  margin-top: 2px;
}
.rider-payout-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.rider-payout-note h2 {
  margin: 0 0 6px;
}
.earnings-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.earning-card {
  border: 1px solid var(--border);
  background: var(--panel-soft);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.earning-card-main {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.earning-card-main h3 {
  margin: 0 0 4px;
}
.earning-amount {
  font-size: 1.45rem;
  font-weight: 900;
  white-space: nowrap;
}
.earning-breakdown {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  color: var(--muted);
}
.payout-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 900;
  background: #eef2ff;
  color: #3730a3;
}
.payout-pill.due,
.payout-pill.awaiting_client_payment {
  background: #fff4d7;
  color: #8a5300;
}
.payout-pill.available {
  background: #e8f7ef;
  color: #166c3b;
}
.payout-pill.requested,
.payout-pill.approved {
  background: #eaf3ff;
  color: #075985;
}
.payout-pill.paid {
  background: #e8f7ef;
  color: #166c3b;
}
.payout-pill.not_due {
  background: #eef2f7;
  color: var(--muted);
}

@media (max-width: 720px) {
  .rider-earnings-strip,
  .rider-payout-note,
  .earning-card-main {
    align-items: stretch;
    flex-direction: column;
  }
  .rider-earnings-strip-actions {
    justify-content: stretch;
  }
  .earning-mini-stat {
    flex: 1;
  }
  .earning-amount {
    font-size: 1.7rem;
  }
}

/* Storefront customer polish - April 2026 */
.storefront-page {
  background:
    radial-gradient(circle at top left, rgba(24, 111, 175, 0.18), transparent 34rem),
    linear-gradient(180deg, #eef7ff 0%, #f6f8fb 260px, #f4f7fb 100%);
}

.storefront-page .app-shell {
  width: min(1220px, calc(100% - 28px));
  padding-top: 18px;
}

.shop-topnav {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 12px;
  margin-bottom: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(14px);
}

.shop-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.shop-brand:hover { text-decoration: none; }

.platform-brand-image-link {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  line-height: 0;
  text-decoration: none;
}

.platform-brand-image {
  display: block;
  width: auto;
  height: 92px;
  max-width: min(460px, 66vw);
  object-fit: contain;
}

.platform-public-nav {
  padding: 9px 12px;
}

.shop-nav-shop-context {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  max-width: 285px;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 999px;
  background: rgba(248, 251, 255, 0.88);
  color: var(--text);
  text-decoration: none;
}

.shop-nav-shop-context:hover {
  border-color: rgba(24, 111, 175, 0.26);
  background: var(--accent-soft);
  text-decoration: none;
}

.shop-nav-shop-context strong,
.shop-nav-shop-context small {
  display: block;
}

.shop-nav-shop-context strong {
  max-width: 185px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.shop-nav-shop-context small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.shop-brand-mark.compact {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 0.95rem;
}

.shop-brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 15px;
  background: linear-gradient(135deg, #102a43, #186faf);
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.shop-brand strong,
.shop-brand small {
  display: block;
}

.shop-brand strong {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
}

.shop-brand small {
  color: var(--muted);
  margin-top: 2px;
  font-weight: 700;
}

.shop-nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.shop-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 850;
  text-decoration: none;
  border: 1px solid transparent;
}

.shop-nav-link:hover,
.shop-nav-link.is-active {
  color: var(--text);
  background: var(--accent-soft);
  border-color: rgba(24, 111, 175, 0.18);
  text-decoration: none;
}

.shop-nav-link-strong {
  background: var(--text);
  color: #fff;
}

.shop-nav-link-strong:hover {
  background: var(--accent);
  color: #fff;
}

.shop-nav-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
}

.shop-account-count,
.shop-support-count {
  margin-left: 2px;
}

.shop-account-count.is-attention,
.shop-support-count.is-attention {
  background: var(--warning);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(173, 106, 0, 0.32);
  animation: account-attention-pulse 1.45s ease-in-out infinite;
}

.shop-account-link.has-attention {
  border-color: rgba(173, 106, 0, 0.24);
  background: var(--warning-soft);
  color: var(--text);
}

.shop-empty-basket.has-pending-payment-order {
  border-color: rgba(173, 106, 0, 0.28);
  background: linear-gradient(180deg, #fffaf0, rgba(255, 255, 255, 0.96));
}

@keyframes account-attention-pulse {
  0% { box-shadow: 0 0 0 0 rgba(173, 106, 0, 0.30); transform: scale(1); }
  55% { box-shadow: 0 0 0 8px rgba(173, 106, 0, 0); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(173, 106, 0, 0); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .shop-account-count.is-attention,
  .shop-support-count.is-attention,
  .client-support-count.is-attention {
    animation: none;
  }
}

.shop-hero-pro,
.shop-status-hero,
.shop-confirmation-card,
.shop-account-nudge {
  border: 1px solid rgba(188, 204, 220, 0.75);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
}

.shop-hero-pro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 20px;
  padding: clamp(22px, 4vw, 36px);
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}

.shop-hero-pro::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -110px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(24, 111, 175, 0.10);
  pointer-events: none;
}

.shop-hero-copy,
.shop-hero-card {
  position: relative;
  z-index: 1;
}

.shop-hero-copy h1,
.shop-item-hero-card h1,
.shop-confirmation-card h1,
.shop-status-hero h1,
.shop-section-heading h1,
.shop-section-heading h2 {
  margin: 0;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.shop-hero-copy h1 {
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  max-width: 760px;
}

.shop-hero-copy p:not(.page-kicker) {
  max-width: 64ch;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.shop-hero-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.shop-hero-actions.centered {
  justify-content: center;
}

.shop-hero-card {
  align-self: center;
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid rgba(188, 204, 220, 0.82);
}

.shop-status-row,
.shop-product-badges,
.shop-item-price-row,
.shop-form-actions,
.shop-check-row-group {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.shop-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shop-summary-grid div,
.shop-total-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

.shop-summary-grid div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
}

.shop-summary-grid span,
.shop-total-list span {
  color: var(--muted);
  font-weight: 750;
}

.shop-summary-grid strong,
.shop-total-list strong {
  color: var(--text);
}

.shop-alert {
  padding: 13px 16px;
  margin-bottom: 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}

.shop-alert p { margin: 0; }

.shop-catalogue-layout,
.shop-checkout-layout,
.shop-item-detail-layout {
  display: grid;
  gap: 18px;
  align-items: start;
}

.shop-catalogue-layout { grid-template-columns: 260px minmax(0, 1fr); }
.shop-checkout-layout { grid-template-columns: minmax(0, 1fr) 340px; }
.shop-item-detail-layout { grid-template-columns: minmax(0, 1fr) 360px; }

.shop-sidebar,
.shop-summary-aside,
.shop-buy-box {
  display: grid;
  gap: 14px;
}

.shop-sidebar {
  position: sticky;
  top: 98px;
}

.shop-panel,
.shop-item-hero-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.shop-panel h2,
.shop-info-panel h2 {
  margin-top: 0;
}

.shop-category-list {
  display: grid;
  gap: 8px;
}

.shop-category-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 12px;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  border: 1px solid transparent;
}

.shop-category-link:hover,
.shop-category-link.is-active {
  background: var(--accent-soft);
  border-color: rgba(24, 111, 175, 0.2);
  text-decoration: none;
}

.shop-info-panel ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.6;
}

.shop-ordering-info-text {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.shop-ordering-info-text p {
  margin: 0;
}

.shop-section-heading,
.shop-product-section-title,
.shop-product-card-top,
.shop-cart-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.shop-section-heading {
  margin-bottom: 14px;
}

.shop-section-heading.compact {
  align-items: center;
}

.shop-product-section + .shop-product-section {
  margin-top: 22px;
}

.shop-product-section-title {
  align-items: center;
  margin-bottom: 12px;
}

.shop-product-section-title h3,
.shop-product-card h3,
.shop-cart-line h3,
.shop-choice-preview h3 {
  margin: 0;
}

.shop-product-section-title span,
.shop-product-card-top p,
.shop-cart-line p {
  color: var(--muted);
  margin: 5px 0 0;
}

.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.shop-product-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(188, 204, 220, 0.8);
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.shop-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10);
  border-color: rgba(24, 111, 175, 0.28);
}

.shop-product-card.is-unavailable {
  opacity: 0.78;
}

.shop-product-description {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.shop-product-description.large-copy {
  font-size: 1.05rem;
}

.shop-product-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-top: auto;
}

.shop-text-link {
  font-weight: 850;
  color: var(--accent);
  text-decoration: none;
}

.shop-text-link:hover { text-decoration: underline; }

.shop-breadcrumb {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--muted);
  font-weight: 750;
  margin: 0 0 18px;
}

.shop-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.shop-breadcrumb a:hover { text-decoration: underline; }

.shop-choice-preview-list,
.shop-add-form,
.shop-basket-form,
.shop-checkout-form,
.shop-cart-lines {
  display: grid;
  gap: 14px;
}

.shop-choice-preview {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
}

.shop-option-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.shop-option-pill {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-weight: 750;
  color: var(--muted);
}

.shop-option-group-fieldset {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  background: var(--panel-soft);
}

.shop-option-group-fieldset legend {
  padding: 0 7px;
  font-weight: 900;
}

.shop-choice-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
}

.shop-choice-row input {
  width: auto;
}

.shop-empty-basket {
  text-align: center;
  padding: 42px 18px;
}

.shop-empty-basket h2 { margin-top: 0; }

.shop-empty-basket p {
  margin-bottom: 0;
}

.shop-empty-basket .button {
  margin-top: 22px;
}

.shop-cart-line {
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
}

.shop-cart-lines.compact .shop-cart-line {
  padding: 13px 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.shop-cart-line-main {
  min-width: 0;
}

.shop-qty-control {
  display: grid;
  gap: 5px;
  width: 92px;
  color: var(--muted);
  font-weight: 800;
}

.shop-qty-control input {
  text-align: center;
}

.shop-cart-line-total {
  font-size: 1.1rem;
  font-weight: 900;
  white-space: nowrap;
}

.shop-total-list {
  display: grid;
  gap: 0;
}

.shop-total-list div:last-child {
  border-bottom: 0;
}

.shop-total-list .shop-total-grand {
  margin-top: 4px;
  padding-top: 16px;
  font-size: 1.12rem;
}

.full-width {
  width: 100%;
  margin-top: 14px;
}

.shop-account-nudge {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.shop-account-nudge p { margin: 5px 0 0; color: var(--muted); }

.shop-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.shop-form-grid .span-two {
  grid-column: 1 / -1;
}

.shop-checkout-form [data-delivery-address-section] {
  max-height: 180px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 0.28s ease,
    opacity 0.18s ease,
    transform 0.22s ease,
    margin 0.28s ease,
    padding 0.28s ease;
}

.shop-checkout-form .shop-check-row-group[data-delivery-address-section] {
  max-height: 90px;
}

.shop-checkout-form.is-pickup-fulfilment [data-delivery-address-section] {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.shop-warning-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px;
  border-radius: 16px;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 800;
}

.shop-warning-check input,
.shop-check-row-group input {
  width: auto;
}

.shop-status-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: clamp(20px, 4vw, 30px);
  margin-bottom: 18px;
}

.shop-status-hero p { color: var(--muted); margin-bottom: 0; }

.shop-progress-steps {
  display: grid;
  gap: 9px;
}

.shop-progress-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #64748b;
}

.shop-progress-step strong {
  font-weight: 700;
}

.shop-progress-step .shop-progress-dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 3px solid #cbd5e1;
  background: #fff;
  flex-shrink: 0;
}

.shop-progress-step.is-complete {
  color: #166534;
}

.shop-progress-step.is-complete .shop-progress-dot {
  background: #22c55e;
  border-color: #16a34a;
  box-shadow: inset 0 0 0 4px #fff;
}

.shop-progress-step.is-complete .shop-progress-dot::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.shop-progress-step.is-current {
  background: linear-gradient(90deg, #fff7e6 0%, #fffaf0 100%);
  border-color: #f0c66f;
  color: #78350f;
  box-shadow: 0 10px 24px rgba(173, 106, 0, 0.13);
}

.shop-progress-step.is-current strong {
  font-weight: 900;
}


.shop-progress-step.is-current .shop-progress-dot,
.shop-progress-step[aria-current="step"] .shop-progress-dot {
  background: radial-gradient(circle at 50% 50%, #fef3c7 0 22%, #f59e0b 24% 100%);
  border-color: #d97706;
  box-shadow: 0 0 0 5px #fef3c7, 0 0 0 0 rgba(245, 158, 11, 0.34);
  transform-origin: center;
  will-change: transform, box-shadow;
  animation: shop-current-dot-pulse 1.25s ease-in-out infinite;
}

.shop-progress-step.is-current .shop-progress-dot::before,
.shop-progress-step[aria-current="step"] .shop-progress-dot::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 999px;
  border: 3px solid rgba(245, 158, 11, 0.46);
  opacity: 0;
  transform-origin: center;
  pointer-events: none;
  animation: shop-current-dot-radar 1.25s ease-out infinite;
}

.shop-progress-step.is-current .shop-progress-dot::after,
.shop-progress-step[aria-current="step"] .shop-progress-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 10px rgba(255, 255, 255, 0.65);
  transform-origin: center;
  animation: shop-current-dot-core-pop 1.25s ease-in-out infinite;
}

@keyframes shop-current-dot-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 5px #fef3c7, 0 0 0 0 rgba(245, 158, 11, 0.34);
  }
  45% {
    transform: scale(1.16);
    box-shadow: 0 0 0 6px #fef3c7, 0 0 0 12px rgba(245, 158, 11, 0.16);
  }
}

@keyframes shop-current-dot-radar {
  0% {
    transform: scale(0.62);
    opacity: 0.72;
  }
  78%, 100% {
    transform: scale(1.42);
    opacity: 0;
  }
}

@keyframes shop-current-dot-core-pop {
  0%, 100% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.62);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-progress-step.is-current .shop-progress-dot,
  .shop-progress-step[aria-current="step"] .shop-progress-dot,
  .shop-progress-step.is-current .shop-progress-dot::before,
  .shop-progress-step[aria-current="step"] .shop-progress-dot::before,
  .shop-progress-step.is-current .shop-progress-dot::after,
  .shop-progress-step[aria-current="step"] .shop-progress-dot::after {
    animation: none;
  }

  .shop-progress-step.is-current .shop-progress-dot,
  .shop-progress-step[aria-current="step"] .shop-progress-dot {
    box-shadow: 0 0 0 6px #fef3c7, 0 0 0 10px rgba(245, 158, 11, 0.16);
  }
}

.shop-progress-step.is-upcoming {
  color: #64748b;
}

.shop-confirmation-card {
  max-width: 760px;
  margin: 40px auto;
  padding: clamp(26px, 5vw, 46px);
  text-align: center;
}

.shop-confirmation-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 2.4rem;
  font-weight: 900;
}

@media (max-width: 980px) {
  .shop-hero-pro,
  .shop-catalogue-layout,
  .shop-checkout-layout,
  .shop-item-detail-layout,
  .shop-product-grid {
    grid-template-columns: 1fr;
  }

  .shop-sidebar {
    position: static;
  }

  .shop-category-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 760px) {
  .catalogue-bulk-toolbar {
    padding: 9px 10px;
  }

  .catalogue-bulk-toolbar form {
    align-items: stretch;
  }

  .catalogue-bulk-selection {
    width: 100%;
  }

  .catalogue-bulk-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .catalogue-bulk-move {
    flex: 1 1 180px;
  }

  .catalogue-bulk-move select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .storefront-page .app-shell {
    width: min(100% - 18px, 1220px);
    padding-top: 10px;
  }

  .shop-topnav {
    position: static;
    align-items: stretch;
    border-radius: 20px;
  }

  .shop-topnav,
  .shop-account-nudge,
  .shop-status-hero,
  .shop-product-actions,
  .shop-section-heading,
  .shop-product-section-title,
  .shop-product-card-top,
  .shop-cart-line {
    flex-direction: column;
  }

  .shop-nav-links {
    justify-content: flex-start;
    width: 100%;
  }

  .shop-nav-link {
    flex: 1 1 auto;
  }

  .platform-brand-image-link {
    width: 100%;
  }

  .platform-brand-image {
    height: 56px;
    max-width: min(360px, 100%);
  }

  .shop-nav-shop-context {
    flex: 1 1 100%;
    max-width: none;
  }

  .shop-hero-pro {
    border-radius: 22px;
    padding: 22px;
  }

  .shop-hero-copy h1 {
    font-size: clamp(2.1rem, 11vw, 3.2rem);
  }

  .shop-summary-grid,
  .shop-form-grid {
    grid-template-columns: 1fr;
  }

  .shop-cart-line {
    align-items: stretch;
  }

  .shop-qty-control {
    width: 100%;
  }

  .shop-form-grid .span-two {
    grid-column: auto;
  }
}

/* Customer account storefront polish - April 2026 */
.customer-account-hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.55fr);
}

.customer-profile-card h2 {
  margin: 0 0 4px;
}

.customer-avatar {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 22px;
  background: linear-gradient(135deg, #102a43, #186faf);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(24, 111, 175, 0.18);
}

.customer-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-account-layout {
  margin-top: 18px;
}

.customer-account-panel {
  margin-bottom: 18px;
}

.customer-order-list,
.customer-address-list {
  display: grid;
  gap: 14px;
}

.customer-order-card,
.customer-address-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(188, 204, 220, 0.8);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.055);
}

.customer-order-card h3,
.customer-address-card h3 {
  margin: 0 0 5px;
}

.customer-order-card p,
.customer-address-card p {
  margin: 0;
  color: var(--muted);
}

.customer-order-card-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  text-align: right;
}

.customer-order-card-side strong {
  font-size: 1.1rem;
}

.customer-order-payment-note {
  display: inline-block;
  margin-top: 8px !important;
  padding: 8px 11px;
  border-radius: 14px;
  background: var(--warning-soft);
  color: var(--warning);
  font-weight: 800;
}

.customer-cancel-pending-payment-form {
  margin: 0;
}

.customer-pending-payment-cancel {
  align-items: flex-start;
}

.customer-order-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: 18px;
}

.customer-order-hero h1 {
  margin: 0;
  letter-spacing: -0.045em;
}

.customer-address-card {
  align-items: flex-start;
  flex-direction: column;
}

.customer-address-card .shop-form-actions {
  width: 100%;
}

.customer-account-topnav .shop-brand-mark {
  background: linear-gradient(135deg, #102a43, #186faf);
}

@media (max-width: 760px) {
  .customer-order-card,
  .customer-order-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-order-card-side {
    justify-content: flex-start;
    text-align: left;
  }

  .customer-account-hero {
    grid-template-columns: 1fr;
  }
}

.badge.info {
  background: #e0f2fe;
  color: #075985;
}

.shop-preorder-banner {
  border-color: rgba(14, 116, 144, 0.22);
  background: linear-gradient(135deg, #ecfeff, #f8fbff);
}

.shop-ordering-paused {
  border-color: rgba(180, 83, 9, 0.22);
  background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.shop-notice {
  border-color: rgba(24, 111, 175, 0.22);
  background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.shop-preorder-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: #ecfeff;
  color: #0f766e;
  font-weight: 750;
  line-height: 1.5;
}

.shop-alert.mini {
  padding: 10px 12px;
  margin: 10px 0 0;
  box-shadow: none;
  font-size: 0.92rem;
}

.preference-save-status {
  min-height: 2.65rem;
}

.preference-save-status.is-placeholder {
  visibility: hidden;
}

/* Client storefront open/closed controls */
.client-shop-status-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
  padding: clamp(18px, 3vw, 26px);
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, #ffffff, #f8fbff);
}
.client-shop-status-panel.is-open {
  border-color: rgba(31, 146, 84, 0.28);
  background: linear-gradient(135deg, #f0fff6, #ffffff);
}
.client-shop-status-panel.is-closed {
  border-color: rgba(201, 60, 55, 0.24);
  background: linear-gradient(135deg, #fff5f4, #ffffff);
}
.client-shop-status-main h2 {
  margin: 0 0 10px;
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  letter-spacing: -0.04em;
}
.client-shop-status-main p { margin: 0 0 8px; }
.client-shop-hours {
  display: inline-flex;
  margin-left: 8px;
  color: var(--muted);
  font-weight: 750;
}
.client-shop-status-actions {
  display: grid;
  gap: 10px;
  justify-items: stretch;
  min-width: 180px;
}
.client-open-toggle {
  width: 100%;
  min-height: 76px;
  padding: 16px 22px;
  border-radius: 22px;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.client-open-toggle.open {
  background: var(--success);
  color: #fff;
  border-color: rgba(31, 146, 84, 0.35);
}
.client-open-toggle.close {
  background: var(--danger);
  color: #fff;
  border-color: rgba(201, 60, 55, 0.35);
}
.client-hours-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 180px)) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid rgba(188, 204, 220, 0.7);
}
.client-hours-form label {
  display: grid;
  gap: 7px;
  font-weight: 750;
  color: var(--muted);
}
.client-preorder-check {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 10px !important;
  min-height: 44px;
  color: var(--text) !important;
}
.client-preorder-check input { width: auto; }
@media (max-width: 820px) {
  .client-shop-status-panel,
  .client-hours-form { grid-template-columns: 1fr; }
  .client-shop-status-actions { min-width: 0; }
  .client-shop-hours {
    display: flex;
    margin: 8px 0 0;
  }
}

/* Client settings page */
.settings-check-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.settings-check-grid label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dbe7f3;
    border-radius: 18px;
    background: #f8fbff;
}

.settings-check-grid input {
    width: auto;
    margin-top: 3px;
}

.settings-check-grid strong,
.settings-check-grid small {
    display: block;
}

.settings-check-grid small {
    margin-top: 3px;
    color: #48627d;
    line-height: 1.35;
}

/* Client dashboard polish - April 2026 */
.client-app-page {
  background:
    radial-gradient(circle at top left, rgba(24, 111, 175, 0.16), transparent 34rem),
    radial-gradient(circle at top right, rgba(31, 146, 84, 0.10), transparent 30rem),
    linear-gradient(180deg, #eef4fb 0%, #f7f9fc 270px, #f4f7fb 100%);
}

.client-app-page .app-shell {
  width: min(1240px, calc(100% - 28px));
  padding-top: 18px;
}

.client-app-page .button,
.client-app-page button,
.client-app-page input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.client-topnav {
  position: sticky;
  top: 12px;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(210px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(188, 204, 220, 0.74);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(14px);
}

.client-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.client-brand:hover { text-decoration: none; }

.client-brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 15px;
  background: linear-gradient(135deg, #102a43, #186faf);
  color: #fff;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.client-brand strong,
.client-brand small {
  display: block;
}

.client-brand strong {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}

.client-brand small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.client-nav-scroll,
.client-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.client-nav-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.client-nav-actions {
  justify-content: flex-end;
}

.client-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.client-nav-link.has-badge {
  gap: 6px;
  padding-right: 10px;
}

.client-support-count,
.client-update-count {
  margin-left: 0;
}

.client-support-count.is-attention {
  background: var(--warning);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(173, 106, 0, 0.32);
  animation: account-attention-pulse 1.45s ease-in-out infinite;
}

.client-nav-link:hover,
.client-nav-link.is-active {
  color: var(--text);
  background: var(--accent-soft);
  border-color: rgba(24, 111, 175, 0.18);
  text-decoration: none;
}

.client-nav-link-strong {
  background: #102a43;
  color: #fff;
  border-color: rgba(16, 42, 67, 0.18);
}

.client-nav-link-strong:hover {
  color: #fff;
  background: var(--accent);
}

.client-dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  margin-bottom: 18px;
  padding: clamp(22px, 4vw, 36px);
  overflow: hidden;
  border: 1px solid rgba(188, 204, 220, 0.76);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
}

.client-dashboard-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 300px;
  height: 300px;
  border-radius: 999px;
  background: rgba(24, 111, 175, 0.10);
  pointer-events: none;
}

.client-dashboard-hero-copy,
.client-dashboard-brief {
  position: relative;
  z-index: 1;
}

.client-dashboard-hero h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(2.1rem, 5vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.client-dashboard-hero-copy p:not(.page-kicker) {
  max-width: 66ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.client-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.client-dashboard-brief {
  align-self: center;
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(188, 204, 220, 0.82);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.client-brief-topline {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.client-brief-label,
.client-brief-row span,
.client-metric-card span,
.client-metric-card small,
.client-section-eyebrow {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.client-brief-topline strong {
  font-size: 2.55rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.client-brief-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(217, 226, 236, 0.8);
}

.client-brief-row:last-child {
  border-bottom: 0;
}

.client-brief-row strong {
  font-size: 1.08rem;
}

.client-brief-row.highlight {
  margin-top: 2px;
  padding: 12px;
  border: 1px solid rgba(24, 111, 175, 0.16);
  border-radius: 16px;
  background: var(--accent-soft);
}

.client-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.client-metric-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 134px;
  padding: 17px;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(188, 204, 220, 0.75);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.client-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.11);
  text-decoration: none;
}

.client-metric-card strong {
  font-size: clamp(1.8rem, 4vw, 2.45rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.client-metric-card small {
  align-self: end;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
}

.client-metric-card.needs-attention {
  border-color: rgba(245, 158, 11, 0.38);
  background: linear-gradient(180deg, #fffaf0, #ffffff);
}

.client-metric-card.is-ready {
  border-color: rgba(31, 146, 84, 0.28);
  background: linear-gradient(180deg, #f0fff6, #ffffff);
}

.client-metric-card.money {
  border-color: rgba(24, 111, 175, 0.24);
  background: linear-gradient(180deg, #eef7ff, #ffffff);
}

.client-dashboard-sections {
  display: grid;
  gap: 16px;
}

.client-queue-card {
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.client-queue-card.priority {
  border-color: rgba(245, 158, 11, 0.34);
  background: linear-gradient(180deg, #fffaf0, #ffffff 42%);
}

.client-queue-card.subdued {
  background: rgba(255, 255, 255, 0.78);
}

.client-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.client-section-head h2 {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  letter-spacing: -0.035em;
}

.client-section-head p {
  margin: 7px 0 0;
  max-width: 68ch;
  color: var(--muted);
  line-height: 1.5;
}

.client-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.client-row-actions form {
  margin: 0;
}

.client-queue-card .table-wrap,
.client-table-wrap {
  box-shadow: none;
  border-color: rgba(188, 204, 220, 0.72);
}

.client-queue-card .empty-state {
  border: 1px dashed rgba(188, 204, 220, 0.88);
  border-radius: 20px;
  background: #f8fbff;
  font-weight: 750;
}

.client-status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.client-shop-status-panel {
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.client-shop-status-panel.is-unconfigured {
  background: linear-gradient(135deg, #fff7ed, #ffffff);
  border-color: rgba(180, 83, 9, 0.22);
}

.client-shop-status-actions form {
  margin: 0;
}

@media (max-width: 1120px) {
  .client-topnav {
    grid-template-columns: 1fr;
  }

  .client-nav-actions {
    justify-content: flex-start;
  }

  .client-dashboard-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .client-dashboard-hero {
    grid-template-columns: 1fr;
  }

  .client-dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-section-head {
    display: grid;
  }
}

@media (max-width: 620px) {
  .client-app-page .app-shell {
    width: min(100% - 18px, 1240px);
    padding-top: 10px;
  }

  .client-topnav {
    top: 8px;
    border-radius: 20px;
  }

  .client-brand strong {
    max-width: 210px;
  }

  .client-nav-scroll,
  .client-nav-actions {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .client-dashboard-hero,
  .client-queue-card,
  .client-shop-status-panel {
    border-radius: 22px;
  }

  .client-dashboard-metrics {
    grid-template-columns: 1fr;
  }

  .client-hero-actions,
  .client-row-actions {
    width: 100%;
  }

  .client-hero-actions .button,
  .client-row-actions .button,
  .client-row-actions button,
  .client-section-head .button {
    width: 100%;
  }

  .client-row-actions {
    justify-content: stretch;
  }
}

/* Client dashboard simplification - April 2026 */
.client-topnav-operational {
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr) minmax(280px, auto);
  margin-bottom: 14px;
}

.client-nav-actions-operational {
  flex-wrap: wrap;
  gap: 8px;
}

.client-nav-open-form,
.client-nav-auto-form {
  margin: 0;
}

.client-nav-button {
  background: #fff;
  cursor: pointer;
}

.client-nav-store-state {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.client-open-toggle.compact {
  width: auto;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 950;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

.client-open-toggle.compact.open {
  background: #1f9254;
}

.client-open-toggle.compact.close {
  background: #c93c37;
}

.client-orders-main {
  display: grid;
  gap: 14px;
}

.client-orders-titlebar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 2px 2px;
}

.client-orders-titlebar h1 {
  margin: 2px 0 0;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.client-order-pills {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.client-order-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(188, 204, 220, 0.80);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06);
}

.client-order-pill:hover {
  color: var(--text);
  text-decoration: none;
  transform: translateY(-1px);
}

.client-order-pill strong {
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1;
}

.client-order-pill span {
  font-size: 0.82rem;
  font-weight: 850;
}

.client-order-pill.needs-attention {
  border-color: rgba(245, 158, 11, 0.42);
  background: #fffaf0;
}

.client-order-pill.is-ready {
  border-color: rgba(31, 146, 84, 0.30);
  background: #f0fff6;
}

.client-dashboard-sections-simple {
  gap: 14px;
}

.client-section-head.compact {
  margin-bottom: 10px;
}

.client-section-head.compact h2 {
  margin-top: 2px;
}

.client-section-head.compact p {
  margin-top: 4px;
  font-size: 0.95rem;
}

.client-dashboard-sections-simple .client-queue-card {
  padding: clamp(14px, 1.7vw, 19px);
}

.client-dashboard-sections-simple .client-queue-card .table-wrap {
  margin-top: 4px;
}

@media (max-width: 1120px) {
  .client-topnav-operational {
    grid-template-columns: 1fr;
  }

  .client-nav-actions-operational {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .client-orders-titlebar {
    display: grid;
    align-items: start;
  }

  .client-order-pills {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .client-open-toggle.compact,
  .client-nav-actions-operational .client-nav-link,
  .client-nav-button {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 0.86rem;
  }

  .client-nav-store-state {
    min-height: 38px;
  }
}

/* Client dashboard order-first layout - April 2026 */
.client-topnav-operational {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
}

.client-nav-primary-row,
.client-nav-secondary-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.client-nav-primary-row {
  justify-content: space-between;
}

.client-nav-secondary-row {
  justify-content: space-between;
  padding-top: 2px;
}

.client-nav-status-slot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}

.client-open-toggle.standalone {
  width: auto;
  min-width: 128px;
  min-height: 66px;
  padding: 16px 30px;
  border-radius: 24px;
  border: 1px solid transparent;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  cursor: pointer;
}

.client-open-toggle.standalone.open {
  background: #1f9254;
  border-color: rgba(31, 146, 84, 0.36);
}

.client-open-toggle.standalone.closed {
  background: #c93c37;
  border-color: rgba(201, 60, 55, 0.36);
}

.client-open-toggle.standalone.unconfigured {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #102a43;
  border-color: rgba(16, 42, 67, 0.24);
}

.client-open-toggle.standalone:hover {
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

.client-orders-titlebar-simple {
  display: block;
  padding: 8px 2px 0;
}

.client-order-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  padding: 6px;
  border: 1px solid rgba(188, 204, 220, 0.76);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.client-order-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.client-order-tab span {
  color: inherit;
  opacity: 0.78;
  font-weight: 950;
}

.client-order-tab:hover,
.client-order-tab.is-active {
  color: var(--text);
  background: #fff;
  border-color: rgba(24, 111, 175, 0.16);
  text-decoration: none;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.07);
}

.client-order-tab.is-active {
  background: var(--accent-soft);
  border-color: rgba(24, 111, 175, 0.22);
}

@media (max-width: 1120px) {
  .client-topnav-operational {
    grid-template-columns: 1fr;
  }

  .client-nav-secondary-row {
    display: grid;
    justify-content: stretch;
  }

  .client-nav-actions-operational {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .client-nav-primary-row {
    align-items: flex-start;
  }

  .client-open-toggle.standalone {
    min-width: 104px;
    min-height: 54px;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 1rem;
  }

  .client-order-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .client-order-tab {
    min-height: 38px;
    padding: 9px 12px;
  }
}

/* Shared client console shell - April 2026 */
.client-page-titlebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.client-page-titlebar h1 {
  margin: 2px 0 0;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.client-page-titlebar .page-subtitle {
  margin-top: 8px;
}

.client-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.client-app-page .card,
.client-app-page .panel,
.client-app-page .hero,
.client-app-page .stat-card {
  border-color: rgba(188, 204, 220, 0.78);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.client-app-page .hero {
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
}

.client-app-page .stats-grid {
  margin-top: 0;
}

.client-app-page .table-wrap {
  border-color: rgba(188, 204, 220, 0.72);
  box-shadow: none;
}

.client-app-page .filter-card,
.client-app-page .filter-form,
.client-app-page .meta-row {
  border-radius: 20px;
}

@media (max-width: 760px) {
  .client-page-titlebar {
    display: grid;
    align-items: start;
  }

  .client-page-actions {
    justify-content: flex-start;
  }
}

/* Client order management polish - April 2026 */
.client-orders-page .client-page-titlebar {
  margin-bottom: 10px;
}

.client-order-tabs-wide {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.client-orders-list-card {
  padding: clamp(14px, 1.8vw, 22px);
}

.client-list-count {
  display: inline-grid;
  place-items: center;
  min-width: 86px;
  padding: 10px 14px;
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 18px;
  background: #f8fbff;
  color: var(--muted);
  text-align: center;
  font-weight: 850;
}

.client-list-count strong {
  display: block;
  color: var(--text);
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.client-list-count span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.client-orders-table th,
.client-orders-table td {
  vertical-align: middle;
}

.client-order-id-cell {
  white-space: nowrap;
}

.client-order-id-cell span,
.client-order-id {
  display: block;
}

.client-order-id {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 950;
  text-decoration: none;
}

.client-order-id:hover {
  text-decoration: underline;
}

.client-order-id-cell span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.client-order-flags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.client-order-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 28px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.client-ticket-main h2 {
  margin: 3px 0 8px;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.06em;
}

.client-ticket-main p:not(.page-kicker) {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.client-ticket-status {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 360px;
}

.client-order-warning {
  margin: 0 0 14px;
}

.shop-alert.warning {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, #fffbeb, #ffffff);
  color: #7c2d12;
}


.shop-alert.danger {
  border-color: rgba(201, 60, 55, 0.42);
  background: linear-gradient(135deg, #fdeaea, #ffffff 62%);
  color: #8f1f1b;
}

.shop-alert.danger strong {
  color: #7f1d1d;
}

.client-order-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}

.client-packing-card {
  padding: clamp(16px, 2vw, 22px);
}

.client-packing-list {
  display: grid;
  gap: 12px;
}

.client-packing-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 20px;
  background: #ffffff;
}

.client-item-qty {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.client-item-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.client-item-title-row h3 {
  margin: 0;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
}

.client-item-title-row strong {
  white-space: nowrap;
}

.client-item-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.danger-text {
  color: var(--danger);
}

.client-selection-list {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.client-selection-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-radius: 14px;
  background: #f8fbff;
  color: var(--muted);
  font-size: 0.92rem;
}

.client-selection-list li strong {
  color: var(--text);
  text-align: right;
}

.client-detail-kv-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.client-order-sidebar .card {
  padding: 18px;
}

.client-action-stack {
  display: grid;
  gap: 10px;
}

.client-action-stack form,
.client-action-stack button {
  width: 100%;
}

.client-summary-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.client-summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(188, 204, 220, 0.62);
}

.client-summary-list > div:last-child {
  border-bottom: 0;
}

.client-summary-list dt {
  color: var(--muted);
  font-weight: 850;
}

.client-summary-list dd {
  margin: 0;
  color: var(--text);
  font-weight: 850;
  text-align: right;
}

.client-summary-list .total dd {
  font-size: 1.35rem;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.client-history-list .history-item {
  border-radius: 16px;
}

@media (max-width: 980px) {
  .client-order-detail-layout,
  .client-order-ticket {
    grid-template-columns: 1fr;
  }

  .client-ticket-status {
    justify-content: flex-start;
  }

  .client-order-sidebar.sticky-side {
    position: static;
  }
}

@media (max-width: 720px) {
  .client-packing-item {
    grid-template-columns: 1fr;
  }

  .client-item-qty {
    width: auto;
    height: 48px;
  }

  .client-item-title-row,
  .client-selection-list li,
  .client-summary-list > div {
    display: grid;
  }

  .client-selection-list li strong,
  .client-summary-list dd {
    text-align: left;
  }
}

/* Client catalogue management polish - April 2026 */
.client-catalogue-main,
.product-editor-main {
  display: grid;
  gap: 16px;
}

.catalogue-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.catalogue-overview-card {
  display: grid;
  gap: 5px;
  min-height: 118px;
  padding: 18px;
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.catalogue-overview-card span,
.catalogue-overview-card small {
  color: var(--muted);
  font-weight: 800;
}

.catalogue-overview-card span {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.catalogue-overview-card strong {
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.06em;
}

.catalogue-overview-card.primary { background: linear-gradient(135deg, #ffffff 0%, #eef7ff 100%); }
.catalogue-overview-card.success { background: linear-gradient(135deg, #ffffff 0%, #f0fff6 100%); }
.catalogue-overview-card.warn { background: linear-gradient(135deg, #ffffff 0%, #fff8eb 100%); }
.catalogue-overview-card.muted-card { background: linear-gradient(135deg, #ffffff 0%, #f5f7fb 100%); }

.catalogue-layout,
.product-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.catalogue-toolbar-card,
.product-editor-card,
.option-manager-card,
.catalogue-side-card,
.product-preview-card {
  padding: clamp(16px, 2vw, 22px);
}

.catalogue-toolbar-head,
.product-editor-card-head,
.catalogue-side-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.catalogue-toolbar-head h2,
.product-editor-card-head h2,
.catalogue-side-head h2 {
  margin-bottom: 4px;
}

.catalogue-view-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.catalogue-view-actions .button {
  min-height: 42px;
}

.catalogue-view-button {
  gap: 8px;
}

.catalogue-view-button::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.catalogue-view-button.cards::before {
  background:
    linear-gradient(currentColor 0 0) 1px 1px / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 10px 1px / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 1px 10px / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 10px 10px / 5px 5px no-repeat;
  border-radius: 3px;
}

.catalogue-view-button.lines::before {
  background:
    linear-gradient(currentColor 0 0) 1px 3px / 14px 3px no-repeat,
    linear-gradient(currentColor 0 0) 1px 7px / 14px 3px no-repeat,
    linear-gradient(currentColor 0 0) 1px 11px / 14px 3px no-repeat;
  border-radius: 2px;
}

.catalogue-view-actions .button.is-selected {
  color: #062d4d;
  border-color: rgba(14, 116, 144, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(186, 230, 253, 0.80));
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -2px 0 rgba(14, 116, 144, 0.16),
    0 10px 22px rgba(14, 116, 144, 0.10);
}

.catalogue-category-scroll {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 20px;
  background: #f8fbff;
  overflow: hidden;
}

.catalogue-category-scroll::before,
.catalogue-category-scroll::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  opacity: 1;
  transition: opacity .16s ease;
}

.catalogue-category-scroll::before {
  left: 38px;
  background: linear-gradient(90deg, #f8fbff, rgba(248, 251, 255, 0));
}

.catalogue-category-scroll::after {
  right: 38px;
  background: linear-gradient(270deg, #f8fbff, rgba(248, 251, 255, 0));
}

.catalogue-category-scroll.is-at-start::before,
.catalogue-category-scroll.is-at-end::after,
.catalogue-category-scroll:not(.has-overflow)::before,
.catalogue-category-scroll:not(.has-overflow)::after {
  opacity: 0;
}

.catalogue-category-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 2px;
  scrollbar-width: none;
}

.catalogue-category-tabs::-webkit-scrollbar {
  display: none;
}

.catalogue-category-scroll-button {
  position: relative;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 5px;
  padding: 0;
  border-radius: 14px;
  color: #31506c;
  background:
    linear-gradient(180deg, #ffffff, #eef7ff);
  box-shadow: inset 0 1px 0 #ffffff;
  font-size: 1.25rem;
  line-height: 1;
}

.catalogue-category-scroll-button:hover:not(:disabled) {
  color: #062d4d;
  border-color: rgba(24, 111, 175, 0.22);
}

.catalogue-category-scroll-button:disabled {
  opacity: 0;
  pointer-events: none;
}

.catalogue-category-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.catalogue-category-tab span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(16, 42, 67, 0.08);
  color: var(--text);
  font-size: 0.78rem;
}

.catalogue-category-tab:hover,
.catalogue-category-tab.is-active {
  background: #fff;
  color: var(--text);
  border-color: rgba(24, 111, 175, 0.16);
  text-decoration: none;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.07);
}

.catalogue-category-tab.is-active {
  background: var(--accent-soft);
  border-color: rgba(24, 111, 175, 0.22);
}

.catalogue-category-tab.needs-category {
  color: #8a5a00;
}

.catalogue-category-tab.needs-details {
  color: #9a5800;
}

.catalogue-category-tab.needs-image {
  color: #315f7d;
}

.catalogue-category-tab.needs-category.is-active,
.catalogue-category-tab.needs-category:hover,
.catalogue-category-tab.needs-details.is-active,
.catalogue-category-tab.needs-details:hover {
  background: #fff7df;
  border-color: rgba(245, 158, 11, 0.32);
}

.catalogue-category-tab.needs-image.is-active,
.catalogue-category-tab.needs-image:hover {
  background: #edf7ff;
  border-color: rgba(24, 111, 175, 0.25);
}


.catalogue-search-panel {
  margin-top: 10px;
}

.catalogue-search-panel[open] {
  padding-top: 2px;
}

.catalogue-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 #ffffff, 0 7px 16px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
  user-select: none;
}

.catalogue-search-toggle::-webkit-details-marker {
  display: none;
}

.catalogue-search-toggle::before {
  content: '⌕';
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #0f5f8e;
  background: rgba(14, 116, 144, 0.10);
  font-size: 0.92rem;
  line-height: 1;
}

.catalogue-search-toggle::after {
  content: '▾';
  color: var(--muted);
  font-size: 0.78rem;
  transition: transform .16s ease;
}

.catalogue-search-panel[open] .catalogue-search-toggle::after {
  transform: rotate(180deg);
}

.catalogue-search-toggle em {
  display: inline-grid;
  place-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #0f5f8e;
  background: var(--accent-soft);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.catalogue-filter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}

.catalogue-filter-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}

.catalogue-search-label {
  grid-column: 1 / -1;
}

.catalogue-filter-actions,
.catalogue-card-actions,
.catalogue-status-actions,
.product-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.catalogue-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
}

.catalogue-product-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
}

.catalogue-product-card.unavailable {
  border-color: rgba(245, 158, 11, 0.28);
  background: linear-gradient(135deg, #fff 0%, #fffaf0 100%);
}

.catalogue-product-card.hidden {
  border-color: rgba(188, 204, 220, 0.55);
  background: linear-gradient(135deg, #fff 0%, #f5f7fb 100%);
}

.catalogue-product-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.catalogue-product-topline h3 {
  margin: 0;
  font-size: 1.18rem;
  letter-spacing: -0.025em;
}

.catalogue-product-topline p {
  margin: 5px 0 0;
  color: var(--muted);
  font-weight: 750;
}

.catalogue-product-price,
.product-preview-price {
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 950;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.catalogue-badges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.catalogue-state,
.catalogue-type {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.79rem;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
}

.catalogue-state.available { background: var(--success-soft); color: #166c3b; }
.catalogue-state.unavailable { background: var(--warning-soft); color: #8a5a00; }
.catalogue-state.hidden { background: #eef2f6; color: #52606d; }
.catalogue-type { background: #edf6ff; color: #185a89; }
.catalogue-type.configurable { background: #f5ecff; color: #6f35a5; }
.catalogue-type.restricted,
.catalogue-type.restricted-warning { background: var(--danger-soft); color: #9f2621; }

.catalogue-product-description {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.catalogue-product-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.catalogue-product-meta span {
  padding: 6px 8px;
  border: 1px solid rgba(188, 204, 220, 0.70);
  border-radius: 999px;
  color: var(--muted);
  background: #f8fbff;
  font-size: 0.78rem;
  font-weight: 850;
}

.catalogue-line-list {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
}

.catalogue-bulk-toolbar {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(188, 204, 220, 0.68);
  background: linear-gradient(180deg, #fbfdff, #f3f8fd);
}

.catalogue-bulk-toolbar form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.catalogue-bulk-selection {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 84px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.catalogue-bulk-selection strong {
  color: var(--text);
  font-size: 1rem;
}

.catalogue-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.catalogue-bulk-actions .button,
.catalogue-bulk-actions button,
.catalogue-bulk-move select {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.82rem;
}

.catalogue-bulk-move {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.catalogue-bulk-move select {
  width: auto;
  max-width: 190px;
}

.catalogue-line-head,
.catalogue-line-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 110px minmax(210px, 0.8fr) minmax(190px, auto);
  gap: 14px;
  align-items: center;
}

.catalogue-line-head {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(188, 204, 220, 0.68);
  color: var(--muted);
  background: linear-gradient(180deg, #f8fbff, #eef7ff);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.catalogue-line-product-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.catalogue-line-product-heading input,
.catalogue-bulk-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #1673a8;
  cursor: pointer;
}

.catalogue-line-row {
  padding: 14px 16px;
  border-bottom: 1px solid #e7eef6;
  transition: background .15s ease, box-shadow .15s ease;
}

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

.catalogue-line-row.unavailable {
  background: linear-gradient(90deg, rgba(255, 250, 240, 0.88), rgba(255, 255, 255, 0.96));
}

.catalogue-line-row.hidden {
  background: linear-gradient(90deg, rgba(245, 247, 251, 0.96), rgba(255, 255, 255, 0.96));
}

.catalogue-line-row.is-selected {
  background: linear-gradient(90deg, rgba(224, 244, 255, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: inset 4px 0 0 rgba(22, 115, 168, 0.62);
}

.catalogue-line-product {
  display: grid;
  grid-template-columns: 20px 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.catalogue-bulk-check {
  display: grid;
  place-items: center;
  align-self: stretch;
  cursor: pointer;
}

.catalogue-line-thumb {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 12px;
  overflow: hidden;
  background: #f3f8fd;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.catalogue-line-thumb img {
  display: block;
  width: 100%;
  height: 100%;
}

.catalogue-line-thumb.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

.catalogue-line-copy {
  min-width: 0;
}

.catalogue-line-product h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: -0.015em;
}

.catalogue-line-product p {
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalogue-line-description {
  color: var(--muted);
  font-weight: 650;
}

.catalogue-line-description-separator.is-empty {
  display: none;
}

.catalogue-line-description.is-empty {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  color: #4f6f89;
  font-style: italic;
  opacity: 0;
  pointer-events: none;
  vertical-align: bottom;
  white-space: nowrap;
  transition: max-width .16s ease, margin-left .16s ease, opacity .16s ease;
}

.catalogue-line-row:hover .catalogue-line-description.is-empty,
.catalogue-line-row:focus-within .catalogue-line-description.is-empty {
  max-width: 110px;
  margin-left: 7px;
  opacity: 0.66;
  pointer-events: auto;
}

.catalogue-line-product p.is-inline-description-editing {
  overflow: visible;
  white-space: normal;
}

.catalogue-line-product p.is-inline-description-editing .catalogue-line-description-separator {
  display: none;
}

.catalogue-line-description.is-editing {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 6px;
  margin-left: 0;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
}

.catalogue-inline-line-description-control {
  display: block;
  width: 100%;
  max-width: 100%;
}

.catalogue-inline-editable {
  border-radius: 10px;
  cursor: text;
  outline: 0;
  transition: background .16s ease, box-shadow .16s ease;
}

.catalogue-inline-editable:hover,
.catalogue-inline-editable:focus-visible {
  background: rgba(186, 230, 253, 0.28);
  box-shadow: 0 0 0 4px rgba(186, 230, 253, 0.22);
}

.catalogue-inline-editable.is-saving {
  opacity: 0.68;
  pointer-events: none;
}

.catalogue-inline-category {
  color: #31506c;
  font-weight: 850;
}

.catalogue-inline-category.is-uncategorised {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(245, 158, 11, 0.36);
  border-radius: 999px;
  color: #8a5a00;
  background: #fff7df;
}

.catalogue-inline-control {
  width: min(100%, 280px);
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(24, 111, 175, 0.28);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

.catalogue-inline-new-category {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.catalogue-inline-new-category .catalogue-inline-control {
  width: min(220px, 100%);
}

.catalogue-inline-new-category .button,
.catalogue-inline-new-category button {
  min-height: 36px;
  padding: 7px 10px;
}

.catalogue-line-price {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 950;
  white-space: nowrap;
}

.catalogue-line-status,
.catalogue-line-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.catalogue-line-actions {
  justify-content: flex-end;
}

.catalogue-line-actions .button,
.catalogue-line-actions button {
  min-height: 38px;
  padding: 8px 12px;
}

.quick-entry-open {
  overflow: hidden;
}

.quick-entry-dialog[hidden] {
  display: none;
}

.quick-entry-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
}

.quick-entry-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 23, 38, 0.36);
  backdrop-filter: blur(10px);
}

.quick-entry-panel {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(235, 248, 255, 0.88)),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 28px 70px rgba(10, 35, 58, 0.24);
  overflow: hidden;
}

.quick-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 14px;
}

.quick-entry-head span {
  display: block;
  margin-bottom: 5px;
  color: #047857;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quick-entry-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.quick-entry-form {
  display: grid;
  gap: 14px;
  padding: 0 22px 22px;
}

.quick-entry-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 850;
}

.quick-entry-new-category,
.quick-entry-new-category label {
  display: grid;
  gap: 7px;
}

.quick-entry-new-category {
  padding: 12px;
  border: 1px solid rgba(14, 132, 191, 0.24);
  border-radius: 16px;
  background: rgba(248, 252, 255, 0.98);
  box-shadow: 0 14px 30px rgba(13, 55, 90, 0.13);
}

.quick-entry-new-category[hidden] {
  display: none !important;
}

.quick-entry-new-category-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-entry-new-category-actions .button {
  white-space: nowrap;
}

.quick-entry-new-category-actions .form-help {
  flex: 1 1 180px;
  min-width: 0;
}

.quick-entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.catalogue-card-footer {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf2f7;
}

.catalogue-status-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  height: 44px;
  min-height: 44px;
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(188, 204, 220, 0.48);
  border-radius: 999px;
  background: rgba(248, 251, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.catalogue-status-actions form {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  margin: 0;
}

.catalogue-mini-button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 5px 7px;
  border-radius: 999px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 0.82rem;
  line-height: 1;
  transform: translateY(-3px);
}

.catalogue-mini-button:hover,
.catalogue-mini-button:focus-visible {
  transform: translateY(-3px);
}

.catalogue-mini-button.is-selected,
.catalogue-mini-button:hover {
  background: #fff;
  color: var(--text);
  border-color: rgba(188, 204, 220, 0.78);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

.danger-text {
  color: var(--danger) !important;
}

.category-manage-list,
.option-group-list,
.option-row-list {
  display: grid;
  gap: 10px;
}

.category-manage-card,
.option-group-card {
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 18px;
  background: #f8fbff;
  overflow: hidden;
}

.category-manage-card summary,
.option-group-card summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  cursor: pointer;
  font-weight: 950;
}

.category-manage-card:not(.category-add-card) summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "drag title controls"
    "drag meta controls";
  column-gap: 12px;
  row-gap: 3px;
  min-height: 56px;
}

.category-manage-card:not(.category-add-card) summary::-webkit-details-marker {
  display: none;
}

.category-manage-card:not(.category-add-card) summary::marker {
  content: "";
}

.category-manage-card:not(.category-add-card) summary > .category-drag-handle {
  grid-area: drag;
}

.category-manage-card:not(.category-add-card) summary > span:not(.category-order-buttons) {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.category-manage-card:not(.category-add-card) summary > small {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.category-manage-card:not(.category-add-card) summary > .category-order-buttons {
  grid-area: controls;
  justify-self: end;
}

.category-drag-handle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 12px;
  color: #31506c;
  cursor: grab;
  touch-action: none;
}

.category-drag-handle:active {
  cursor: grabbing;
}

.category-order-buttons {
  display: inline-flex;
  gap: 5px;
  justify-content: flex-end;
  align-items: center;
}

.category-order-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 12px;
  color: #31506c;
  font-weight: 950;
  touch-action: manipulation;
}

.category-order-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.category-order-button:not(:disabled):hover {
  background: #ffffff;
}

@media (hover: none), (pointer: coarse) {
  .category-drag-handle,
  .category-order-button {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .category-manage-card summary {
    min-height: 64px;
  }
}

@media (max-width: 640px) {
  .category-manage-card:not(.category-add-card) summary {
    column-gap: 9px;
    padding-inline: 11px;
  }

  .category-manage-card:not(.category-add-card) summary > span:not(.category-order-buttons),
  .category-manage-card:not(.category-add-card) summary > small {
    max-width: 100%;
  }

  .category-order-buttons {
    gap: 4px;
  }
}

.category-manage-list.is-dragging .category-manage-card {
  user-select: none;
}

.category-manage-list.is-saving-order {
  opacity: 0.72;
  pointer-events: none;
}

.category-manage-card.is-dragging {
  border-color: rgba(24, 111, 175, 0.36);
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
  transform: scale(1.01);
}

.category-add-card {
  margin-bottom: 12px;
  border-style: dashed;
  background: linear-gradient(135deg, #ffffff 0%, #f0fff6 100%);
}

.category-add-card summary {
  grid-template-columns: minmax(0, 1fr) auto;
}

.category-add-card summary span {
  color: #166c3b;
}

.category-manage-card summary small,
.option-group-card summary small {
  color: var(--muted);
  font-weight: 800;
}

.category-manage-body {
  display: grid;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .22s ease, opacity .18s ease;
}

.category-manage-card[open] .category-manage-body {
  height: auto;
  opacity: 1;
}

.category-manage-body.is-animating {
  overflow: hidden;
}

.category-edit-form,
.option-edit-form,
.add-option-form,
.category-delete-form,
.option-group-delete-form,
.option-delete-row {
  padding: 0 14px 14px;
}

.category-edit-form {
  gap: 10px;
  padding-bottom: 8px;
}

.category-edit-form label:not(.checkbox-row),
.category-timing-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.category-edit-form input,
.category-edit-form select {
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 12px;
}

.category-compact-grid {
  gap: 10px;
}

.category-compact-checkbox {
  align-self: end;
  min-height: 42px;
}

.category-timing-toggle-row {
  min-height: 34px;
}

.category-timing-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(188, 204, 220, 0.70);
  border-radius: 14px;
  background: #ffffff;
}

.category-timing-fields.is-hidden {
  display: none;
}

.category-timing-fields .form-help {
  margin: 0;
}

.category-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 14px 14px;
}

.category-actions-row .category-delete-form {
  padding: 0;
}

.category-actions-row .button,
.category-actions-row button {
  min-height: 40px;
}

.checkbox-row {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  color: var(--text) !important;
  font-weight: 850 !important;
}

.checkbox-row input {
  width: auto;
}

.compact-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.catalogue-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.catalogue-mini-stats div {
  padding: 12px 8px;
  border: 1px solid rgba(188, 204, 220, 0.70);
  border-radius: 16px;
  text-align: center;
  background: #f8fbff;
}

.catalogue-mini-stats strong {
  display: block;
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
}

.catalogue-mini-stats span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.catalogue-tips-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.catalogue-tips-list li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.35;
}

.catalogue-tips-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4b9f46;
}

.product-editor-form {
  gap: 18px;
}

.item-editor-category-block {
  align-self: start;
  position: relative;
}

.item-editor-category-block > label:first-child,
.item-editor-new-category,
.item-editor-new-category label {
  display: grid;
  gap: 7px;
}

.item-editor-new-category {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 35;
  margin-top: 0;
  padding: 12px;
  border: 1px solid rgba(14, 132, 191, 0.28);
  border-radius: 16px;
  background: rgba(248, 252, 255, 0.98);
  box-shadow: 0 18px 38px rgba(13, 55, 90, 0.18);
}

.item-editor-new-category[hidden] {
  display: none !important;
}

.item-editor-new-category-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.item-editor-new-category-actions .button {
  white-space: nowrap;
}

.item-editor-new-category-actions .form-help {
  flex: 1 1 190px;
  min-width: 0;
}

.editor-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(188, 204, 220, 0.70);
  border-radius: 20px;
  background: #f8fbff;
}

.editor-section-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.editor-section-title > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 950;
}

.editor-section-title h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
}

.editor-section-title p {
  margin: 0;
  color: var(--muted);
}

.product-preview-card {
  display: grid;
  gap: 14px;
}

.product-preview-name {
  font-size: 1.25rem;
  font-weight: 950;
  letter-spacing: -0.035em;
}

.product-preview-list {
  display: grid;
  gap: 8px;
}

.product-preview-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2f7;
}

.product-preview-list span {
  color: var(--muted);
  font-weight: 800;
}

.product-preview-list strong {
  text-align: right;
}

.product-preview-action {
  margin-top: 4px;
}

.option-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) minmax(110px, .8fr) minmax(90px, .6fr) auto auto auto;
  gap: 8px;
  align-items: end;
  padding: 12px 14px;
  border-top: 1px solid #e6edf5;
  background: #fff;
}

.option-row label:not(.checkbox-row),
.option-edit-form label:not(.checkbox-row),
.add-option-form label:not(.checkbox-row) {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 850;
}

.option-row input,
.option-row select {
  padding: 9px 10px;
  border-radius: 10px;
}

.option-checkbox {
  padding-bottom: 9px;
}

.add-option-form {
  border-top: 1px solid #e6edf5;
  padding-top: 14px;
  background: #fbfdff;
}

.option-delete-row {
  padding-top: 0;
  margin-top: -8px;
  background: #fff;
}

.option-group-delete-form {
  border-top: 1px solid #e6edf5;
  padding-top: 12px;
}

.compact-guide-list .history-item {
  padding: 0;
  border: 0;
  background: transparent;
}

@media (max-width: 1060px) {
  .catalogue-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalogue-line-head,
  .catalogue-line-row {
    grid-template-columns: minmax(220px, 1fr) 100px minmax(180px, 0.8fr);
  }

  .catalogue-line-head span:last-child {
    display: none;
  }

  .catalogue-line-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .catalogue-layout,
  .product-editor-layout {
    grid-template-columns: 1fr;
  }

  .sticky-side {
    position: static;
  }
}

@media (max-width: 760px) {
  .catalogue-search-panel {
    margin-top: 8px;
  }

  .catalogue-search-toggle {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 0.9rem;
  }

  .catalogue-filter-form {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  .catalogue-view-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .catalogue-view-actions .button {
    flex: 0 0 auto;
    min-width: 0;
  }

  .catalogue-product-grid {
    grid-template-columns: 1fr;
  }

  .catalogue-line-head {
    display: none;
  }

  .catalogue-line-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "product price"
      "actions status";
    gap: 6px 10px;
    align-items: start;
    padding: 10px 12px;
  }

  .catalogue-line-product {
    grid-area: product;
    grid-column: auto;
    grid-template-columns: 20px 38px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .catalogue-line-thumb {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .catalogue-line-product h3 {
    font-size: 0.95rem;
    line-height: 1.15;
  }

  .catalogue-line-product p {
    margin-top: 2px;
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .catalogue-inline-category.is-uncategorised {
    min-height: 24px;
    padding: 2px 8px;
  }

  .catalogue-line-price {
    grid-area: price;
    align-self: start;
    padding-top: 2px;
    font-size: 1rem;
    line-height: 1.1;
    text-align: right;
  }

  .catalogue-line-status {
    grid-area: status;
    justify-content: flex-end;
    align-self: end;
    gap: 4px;
    max-width: 170px;
  }

  .catalogue-line-status .catalogue-state,
  .catalogue-line-status .catalogue-type {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 0.72rem;
    line-height: 1.05;
  }

  .catalogue-line-actions {
    grid-area: actions;
    grid-column: auto;
    justify-content: flex-start;
    align-self: end;
  }

  .catalogue-card-actions,
  .catalogue-line-actions,
  .product-editor-actions {
    align-items: stretch;
  }

  .catalogue-card-actions .button,
  .catalogue-card-actions button,
  .product-editor-actions .button,
  .product-editor-actions button {
    width: 100%;
  }

  .catalogue-line-actions {
    align-items: center;
    gap: 8px;
  }

  .catalogue-line-actions .button,
  .catalogue-line-actions button {
    width: auto;
    min-height: 36px;
    padding: 7px 12px;
  }


  @media (max-width: 420px) {
    .catalogue-line-row {
      grid-template-areas:
        "product price"
        "actions actions"
        "status status";
    }

    .catalogue-line-status {
      justify-content: flex-start;
      max-width: none;
    }
  }

  .quick-entry-dialog {
    align-items: end;
    padding: 10px;
  }

  .quick-entry-panel {
    border-radius: 24px;
  }

  .option-row {
    grid-template-columns: 1fr;
  }

  .option-checkbox {
    padding-bottom: 0;
  }
}

@media (max-width: 560px) {
  .catalogue-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .catalogue-overview-card {
    min-height: 0;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  }

  .catalogue-overview-card span {
    font-size: 0.68rem;
    line-height: 1.15;
    letter-spacing: 0.055em;
  }

  .catalogue-overview-card strong {
    font-size: 1.45rem;
    letter-spacing: -0.045em;
  }

  .catalogue-overview-card small {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .catalogue-product-topline {
    display: grid;
  }

  .compact-form-grid {
    grid-template-columns: 1fr;
  }

  .catalogue-mini-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .catalogue-mini-stats div {
    padding: 7px 4px;
    border-radius: 12px;
  }

  .catalogue-mini-stats strong {
    font-size: 1rem;
  }

  .catalogue-mini-stats span {
    margin-top: 2px;
    font-size: 0.62rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
  }
}

/* Catalogue AJAX filtering - April 2026 */
[data-catalogue-products-region] {
  transition: opacity .16s ease, transform .16s ease;
}

[data-catalogue-products-region].is-updating {
  opacity: .55;
  pointer-events: none;
  transform: translateY(2px);
}

/* Client shop mode control - April 2026 */
.client-shop-mode-control {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(188, 204, 220, 0.82);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

.client-shop-mode-summary {
  display: grid;
  align-content: center;
  min-width: 124px;
  min-height: 58px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 21px;
  color: #fff;
  line-height: 1;
}

.client-shop-mode-summary.open {
  background: #1f9254;
  border-color: rgba(31, 146, 84, 0.36);
}

.client-shop-mode-summary.closed {
  background: #c93c37;
  border-color: rgba(201, 60, 55, 0.36);
}

.client-shop-mode-summary strong,
.client-shop-mode-summary small {
  display: block;
}

.client-shop-mode-summary strong {
  font-size: 1.08rem;
  font-weight: 950;
  letter-spacing: -0.025em;
}

.client-shop-mode-summary small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.client-shop-mode-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(188, 204, 220, 0.70);
  border-radius: 999px;
  background: #f4f7fb;
}

.client-shop-mode-form {
  margin: 0;
}

.client-shop-mode-button {
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.client-shop-mode-button:hover:not(:disabled) {
  color: var(--text);
  background: #fff;
  border-color: rgba(24, 111, 175, 0.16);
  box-shadow: 0 5px 13px rgba(15, 23, 42, 0.08);
}

.client-shop-mode-button.is-active,
.client-shop-mode-button:disabled {
  color: #102a43;
  background: #fff;
  border-color: rgba(24, 111, 175, 0.18);
  box-shadow: 0 5px 13px rgba(15, 23, 42, 0.07);
  cursor: default;
  opacity: 1;
}

.client-shop-mode-button.mode-open.is-active {
  color: #146c3d;
  border-color: rgba(31, 146, 84, 0.28);
  background: #f0fff6;
}

.client-shop-mode-button.mode-closed.is-active {
  color: #9f2f2b;
  border-color: rgba(201, 60, 55, 0.26);
  background: #fff2f1;
}

.client-shop-mode-button.mode-auto.is-active {
  color: #155c8f;
  border-color: rgba(24, 111, 175, 0.24);
  background: #eef7ff;
}

@media (max-width: 760px) {
  .client-shop-mode-control {
    gap: 6px;
  }

  .client-shop-mode-summary {
    min-width: 108px;
    padding: 9px 13px;
  }
}

@media (max-width: 620px) {
  .client-nav-primary-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .client-nav-status-slot {
    width: 100%;
    justify-content: stretch;
  }

  .client-shop-mode-control {
    width: 100%;
    justify-content: space-between;
    border-radius: 22px;
  }

  .client-shop-mode-summary {
    min-width: 104px;
    min-height: 52px;
    border-radius: 17px;
  }

  .client-shop-mode-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .client-shop-mode-button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.78rem;
  }
}

/* Client shop mode single dropdown button - April 2026 refinement */
.client-shop-mode-control {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

.client-shop-mode-control[open] {
  z-index: 30;
}

.client-shop-mode-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 148px;
  min-height: 58px;
  padding: 10px 16px 10px 18px;
  border-radius: 22px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.client-shop-mode-summary::-webkit-details-marker {
  display: none;
}

.client-shop-mode-summary::after {
  content: "▾";
  font-size: 0.82rem;
  font-weight: 950;
  opacity: 0.82;
  transform: translateY(-1px);
}

.client-shop-mode-control[open] .client-shop-mode-summary::after {
  transform: translateY(-1px) rotate(180deg);
}

.client-shop-mode-summary span {
  display: grid;
  gap: 5px;
}

.client-shop-mode-summary strong,
.client-shop-mode-summary small {
  display: block;
}

.client-shop-mode-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 148px;
  padding: 6px;
  border: 1px solid rgba(188, 204, 220, 0.82);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
}

.client-shop-mode-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 22px;
  width: 10px;
  height: 10px;
  border-left: 1px solid rgba(188, 204, 220, 0.82);
  border-top: 1px solid rgba(188, 204, 220, 0.82);
  background: #fff;
  transform: rotate(45deg);
}

.client-shop-mode-option {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--text);
  background: transparent;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.client-shop-mode-option:hover:not(:disabled) {
  background: #f4f7fb;
  border-color: rgba(188, 204, 220, 0.62);
}

.client-shop-mode-option.is-active,
.client-shop-mode-option:disabled {
  cursor: default;
  opacity: 1;
}

.client-shop-mode-option.mode-open.is-active {
  color: #146c3d;
  background: #f0fff6;
  border-color: rgba(31, 146, 84, 0.24);
}

.client-shop-mode-option.mode-closed.is-active {
  color: #9f2f2b;
  background: #fff2f1;
  border-color: rgba(201, 60, 55, 0.24);
}

.client-shop-mode-option.mode-auto.is-active {
  color: #155c8f;
  background: #eef7ff;
  border-color: rgba(24, 111, 175, 0.24);
}

@media (max-width: 620px) {
  .client-shop-mode-control {
    width: 100%;
  }

  .client-shop-mode-summary {
    min-width: 0;
    width: 100%;
    min-height: 54px;
    padding: 10px 14px 10px 16px;
  }

  .client-shop-mode-menu {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

/* Client shell single-row navigation refinement - April 2026 */
.client-nav-main-row {
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.client-nav-main-row .client-nav-scroll {
  justify-content: flex-end;
  padding: 2px 0;
}

.client-nav-main-row .client-nav-status-slot {
  justify-content: flex-end;
}

@media (max-width: 1120px) {
  .client-nav-main-row {
    grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
  }

  .client-nav-main-row .client-nav-scroll {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .client-nav-main-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .client-nav-main-row .client-nav-scroll {
    grid-column: 1 / -1;
    order: 3;
    justify-content: flex-start;
  }

  .client-nav-main-row .client-nav-status-slot {
    grid-column: 2;
  }
}

@media (max-width: 620px) {
  .client-nav-main-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .client-nav-main-row .client-nav-scroll,
  .client-nav-main-row .client-nav-status-slot {
    grid-column: 1;
  }

  .client-nav-main-row .client-nav-scroll {
    order: 2;
  }

  .client-nav-main-row .client-nav-status-slot {
    order: 3;
  }
}

/* Storefront item images */
.item-image-preview,
.catalogue-product-image,
.shop-product-image,
.shop-item-main-image,
.shop-cart-line-image,
.client-item-image,
.order-line-image {
  overflow: hidden;
  border: 1px solid rgba(188, 204, 220, 0.72);
  background: #f8fbff;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.item-image-preview img,
.catalogue-product-image img,
.shop-product-image img,
.shop-item-main-image img,
.shop-cart-line-image img,
.client-item-image img,
.order-line-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-image-preview.placeholder,
.catalogue-product-image.placeholder,
.shop-product-image.placeholder,
.shop-item-main-image.placeholder,
.shop-cart-line-image.placeholder,
.client-item-image.placeholder,
.order-line-image.placeholder {
  background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%);
}

.item-image-editor {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.item-image-controls {
  display: grid;
  gap: 12px;
}

.product-camera-upload {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(14, 116, 144, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(226, 241, 255, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 22px rgba(25, 72, 112, 0.08);
}

.product-camera-upload-copy {
  display: grid;
  gap: 4px;
}

.product-camera-upload-copy strong {
  color: #082f49;
  font-size: 1rem;
}

.product-camera-upload-copy small {
  color: #48627d;
  font-weight: 700;
  line-height: 1.4;
}

.product-camera-upload input[type="file"] {
  width: 100%;
}

.client-photo-intake-main {
  display: grid;
  gap: 16px;
}

.client-photo-intake-form {
  display: grid;
  gap: 14px;
}

.client-photo-capture-box {
  display: grid;
  gap: 12px;
  padding: clamp(18px, 4vw, 28px);
  border: 1px solid rgba(14, 116, 144, 0.24);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(226, 241, 255, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 16px 34px rgba(25, 72, 112, 0.10);
}

.client-photo-capture-box span {
  display: grid;
  gap: 5px;
}

.client-photo-capture-box strong {
  color: #082f49;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  letter-spacing: -0.035em;
}

.client-photo-capture-box small {
  color: #48627d;
  font-weight: 750;
  line-height: 1.45;
}

.client-photo-capture-box input[type="file"] {
  width: 100%;
}

.client-photo-draft-list {
  display: grid;
  gap: 12px;
}

.client-photo-draft-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(240, 248, 255, 0.66));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 22px rgba(25, 72, 112, 0.08);
}

.client-photo-draft-image {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  background: #eef7ff;
  color: #48627d;
  font-weight: 850;
}

.client-photo-draft-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-photo-draft-body {
  display: grid;
  gap: 6px;
  justify-items: start;
  min-width: 0;
}

.client-photo-draft-body strong,
.client-photo-draft-body small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.catalogue-type.draft-warning {
  background: #fff7ed;
  border-color: rgba(245, 158, 11, 0.34);
  color: #9a4b00;
}

.catalogue-product-card.photo-draft {
  border-color: rgba(245, 158, 11, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.86), rgba(255, 255, 255, 0.70));
}

@media (max-width: 560px) {
  .client-photo-draft-card {
    grid-template-columns: 1fr;
  }
}

.item-image-preview.large {
  width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
}

.product-snapshot-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
}

.catalogue-product-image,
.shop-product-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
}

.shop-item-main-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  margin-bottom: 16px;
}

.shop-cart-line-image,
.client-item-image,
.order-line-image {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  font-size: 0.68rem;
}

.shop-cart-line-image.small {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.shop-checkout-items {
  display: grid;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.shop-checkout-item-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.shop-checkout-item-line strong,
.shop-checkout-item-line span {
  display: block;
}

.shop-checkout-item-line span {
  margin-top: 2px;
  color: var(--muted);
  font-weight: 850;
}

.order-confirmation-items {
  max-width: 920px;
  margin: 18px auto 0;
}

.client-packing-item {
  grid-template-columns: 64px 72px minmax(0, 1fr);
}

@media (max-width: 720px) {
  .item-image-editor,
  .client-packing-item {
    grid-template-columns: 1fr;
  }

  .item-image-preview.large,
  .shop-cart-line-image,
  .client-item-image,
  .order-line-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .shop-cart-line-image.small {
    width: 48px;
    height: 48px;
    aspect-ratio: 1 / 1;
  }
}

.shop-current-order-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-color: rgba(24, 111, 175, 0.28);
  background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.shop-current-order-banner h2 {
  margin: 2px 0 6px;
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  letter-spacing: -0.03em;
}

.shop-current-order-banner p:not(.page-kicker) {
  color: var(--muted);
}

@media (max-width: 640px) {
  .shop-current-order-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .shop-current-order-banner .button {
    width: 100%;
  }
}

.billing-pay-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(230, 245, 255, 0.8), rgba(255, 255, 255, 0.95));
}

.billing-pay-card form {
    margin: 0;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .billing-pay-card {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-pay-card form,
    .billing-pay-card button {
        width: 100%;
    }
}


.shop-substitution-summary {
  margin: 10px 0 18px;
  line-height: 1.45;
}

.shop-substitution-summary a {
  font-weight: 850;
}

.shop-payment-methods {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.shop-payment-methods[hidden],
.shop-delivery-slots[hidden],
[data-delivery-slot-section][hidden] {
    display: none !important;
}


.shop-payment-methods h2 {
    margin: 0;
    font-size: 1.05rem;
}

.shop-payment-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
}

.shop-payment-option input {
    width: auto;
    flex: 0 0 auto;
    margin-top: 3px;
}

.shop-payment-option span {
    display: grid;
    gap: 3px;
}

.shop-payment-option small {
    color: var(--muted);
}

.shop-fulfilment-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.shop-fulfilment-option-grid .shop-payment-option {
    height: 100%;
    margin: 0;
}

.shop-payment-option:has(input:checked) {
    border-color: rgba(26, 115, 232, 0.42);
    background: #f3f9ff;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.08);
}


/* Delivery PIN verification */
.verification-pin {
    display: inline-block;
    letter-spacing: 0.18em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 1.15em;
    font-weight: 800;
}

.rider-pin-form {
    display: grid;
    gap: 10px;
}

.rider-pin-form input[name="pickup_pin"],
.rider-pin-form input[name="dropoff_pin"] {
    max-width: 180px;
    text-align: center;
    letter-spacing: 0.22em;
    font-size: 1.25rem;
    font-weight: 800;
}

/* Rider compact shell navigation and payment privacy tidy - May 2026 */
.rider-nav-shell {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 auto 22px;
  padding-top: 2px;
}
.rider-topbar-actions {
  margin-left: auto;
  align-items: flex-end;
  gap: 8px;
}
.rider-icon-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 460px);
  margin-inline: auto;
}
.rider-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.84rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(16, 42, 67, 0.04);
}
.rider-icon-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.rider-icon-button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.rider-icon {
  font-size: 0.95rem;
  line-height: 1;
  flex: 0 0 auto;
}
.rider-icon-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.rider-utility-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 0;
}
.rider-utility-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.76rem;
  line-height: 1;
  white-space: nowrap;
}
.rider-utility-link:hover {
  color: var(--accent);
  border-color: rgba(14, 116, 144, 0.28);
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 42, 67, 0.08);
  transform: translateY(-1px);
}
.rider-utility-icon {
  font-size: 0.82rem;
  line-height: 1;
}
.rider-activation-dashboard-link {
  width: 100%;
  max-width: 150px;
  padding-inline: 12px;
}
.rider-pay-chip {
  background: var(--success-soft);
  color: #166534;
  border-color: #b7e1c7;
  font-weight: 900;
}
.rider-dropoff-focus {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  border-color: #b7d7f4;
  background: linear-gradient(135deg, #ffffff 0%, #eef8ff 100%);
}
.rider-dropoff-address {
  font-size: 1.18rem;
  line-height: 1.45;
  font-weight: 700;
}
.rider-dropoff-address strong {
  font-size: 1.28rem;
}

@media (max-width: 720px) {
  .rider-nav-shell {
    margin-bottom: 18px;
  }
  .rider-topbar-actions {
    width: 100%;
    align-items: stretch;
  }
  .rider-icon-nav {
    width: 100%;
    gap: 6px;
  }
  .rider-icon-button {
    padding: 8px 5px;
  }
  .rider-icon-label {
    font-size: 0.74rem;
  }
  .rider-utility-nav {
    gap: 6px;
  }
  .rider-utility-link {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 0.75rem;
  }
  .rider-activation-dashboard-link {
    max-width: none;
  }
  .rider-dropoff-focus {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 380px) {
  .rider-icon-button {
    gap: 3px;
    min-height: 38px;
    padding-inline: 4px;
  }
  .rider-icon-label {
    font-size: 0.68rem;
  }
}


/* Rider active job compact board - May 2026 */
.rider-active-board {
  padding-bottom: 18px;
}
.rider-active-compact-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.rider-active-compact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.rider-active-open-link {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  display: block;
}
.rider-active-main-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.rider-active-route {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.98rem;
}
.rider-active-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.rider-active-sub-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.3;
}
.rider-active-sub-line strong {
  color: var(--text);
}
.rider-mini-flag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 800;
  font-size: 0.76rem;
}
.rider-mini-flag.danger {
  border-color: #f0b4b3;
  background: #fff1f1;
  color: #991b1b;
}
.rider-mini-flag.rush {
  border-color: rgba(217, 119, 6, 0.22);
  background: #fff7ed;
  color: #9a3412;
}
.rider-active-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rider-active-actions form {
  margin: 0;
}
.button.icon-only {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 900;
}
.button.icon-only:disabled {
  opacity: .32;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 640px) {
  .rider-active-compact-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }
  .rider-active-main-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .rider-active-route {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .rider-active-sub-line {
    gap: 7px;
    font-size: 0.82rem;
  }
  .rider-active-actions {
    justify-content: flex-end;
  }
}

/* Client dashboard status colour coding - May 2026 */
.client-order-tab.status-all {
  color: #334e68;
}

.client-order-tab.status-new {
  color: #8a5a00;
}

.client-order-tab.status-preparing {
  color: #165381;
}

.client-order-tab.status-ready {
  color: #166c3b;
}

.client-order-tab.status-deliveries {
  color: #0f766e;
}

.client-order-tab.status-new:hover,
.client-order-tab.status-new.is-active {
  background: #fff4db;
  border-color: rgba(245, 158, 11, 0.34);
}

.client-order-tab.status-preparing:hover,
.client-order-tab.status-preparing.is-active {
  background: #eef7ff;
  border-color: rgba(24, 111, 175, 0.26);
}

.client-order-tab.status-ready:hover,
.client-order-tab.status-ready.is-active {
  background: #e8f7ef;
  border-color: rgba(31, 146, 84, 0.26);
}

.client-order-tab.status-deliveries:hover,
.client-order-tab.status-deliveries.is-active {
  background: #eefcf9;
  border-color: rgba(15, 118, 110, 0.24);
}

.client-queue-card.status-all {
  border-color: rgba(24, 111, 175, 0.20);
  background: linear-gradient(180deg, #f8fbff, #ffffff 46%);
}

.client-queue-card.status-new {
  border-color: rgba(245, 158, 11, 0.34);
  background: linear-gradient(180deg, #fffaf0, #ffffff 44%);
}

.client-queue-card.status-preparing {
  border-color: rgba(24, 111, 175, 0.24);
  background: linear-gradient(180deg, #eef7ff, #ffffff 44%);
}

.client-queue-card.status-ready {
  border-color: rgba(31, 146, 84, 0.24);
  background: linear-gradient(180deg, #f0fff6, #ffffff 44%);
}

.client-queue-card.status-deliveries {
  border-color: rgba(15, 118, 110, 0.24);
  background: linear-gradient(180deg, #eefcf9, #ffffff 44%);
}

.client-queue-card.status-new .client-section-eyebrow {
  color: #8a5a00;
}

.client-queue-card.status-preparing .client-section-eyebrow {
  color: #165381;
}

.client-queue-card.status-ready .client-section-eyebrow {
  color: #166c3b;
}

.client-queue-card.status-deliveries .client-section-eyebrow {
  color: #0f766e;
}

/* Client dashboard order rows and pickup PIN summary - May 2026 */
.client-order-row td {
  transition: background .12s ease, box-shadow .12s ease;
}

.client-order-row.status-new td {
  background: #fffaf0;
}

.client-order-row.status-preparing td {
  background: #f5fbff;
}

.client-order-row.status-ready td {
  background: #f3fff8;
}

.client-order-row.status-deliveries td {
  background: #f3fffc;
}

.client-order-row.status-new td:first-child {
  box-shadow: inset 5px 0 0 #f59e0b;
}

.client-order-row.status-preparing td:first-child {
  box-shadow: inset 5px 0 0 #186faf;
}

.client-order-row.status-ready td:first-child {
  box-shadow: inset 5px 0 0 #1f9254;
}

.client-order-row.status-deliveries td:first-child {
  box-shadow: inset 5px 0 0 #0f766e;
}

.client-order-row:hover td {
  background: #fbfdff;
}

.client-order-number-cell {
  width: 112px;
  vertical-align: middle;
}

.client-order-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 8px 10px;
  border-radius: 16px;
  color: #003b68;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(188, 204, 220, 0.62);
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.055em;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.client-order-number:hover {
  text-decoration: none;
  border-color: rgba(24, 111, 175, 0.32);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}


/* Client dashboard fixed column widths - June 2026
   Keep Items/Progress/Actions columns consistent between separate slot-group tables,
   even when one group has no action buttons. */
.client-order-table {
  table-layout: fixed;
  min-width: 1040px;
}

.client-order-table .client-order-col-order { width: 12%; }
.client-order-table .client-order-col-customer { width: 18%; }
.client-order-table .client-order-col-items { width: 24%; }
.client-order-table .client-order-col-progress { width: 27%; }
.client-order-table .client-order-col-actions { width: 19%; }

.client-order-table th:nth-child(5),
.client-order-table td:nth-child(5) {
  text-align: right;
}

.client-order-table-no-actions .client-order-col-order { width: 12%; }
.client-order-table-no-actions .client-order-col-customer { width: 18%; }
.client-order-table-no-actions .client-order-col-items { width: 24%; }
.client-order-table-no-actions .client-order-col-progress { width: 46%; }
.client-order-table-no-actions .client-order-col-actions { width: 0; }

.client-order-table-no-actions th:nth-child(5),
.client-order-table-no-actions td:nth-child(5) {
  display: none;
}

@media (max-width: 900px) {
  .client-order-table {
    min-width: 980px;
  }

  .client-order-table .client-order-col-order { width: 12%; }
  .client-order-table .client-order-col-customer { width: 17%; }
  .client-order-table .client-order-col-items { width: 25%; }
  .client-order-table .client-order-col-progress { width: 27%; }
  .client-order-table .client-order-col-actions { width: 19%; }

  .client-order-table-no-actions .client-order-col-order { width: 12%; }
  .client-order-table-no-actions .client-order-col-customer { width: 17%; }
  .client-order-table-no-actions .client-order-col-items { width: 25%; }
  .client-order-table-no-actions .client-order-col-progress { width: 46%; }
  .client-order-table-no-actions .client-order-col-actions { width: 0; }
}

.client-items-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 152px;
}

.client-items-primary {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.client-items-badges {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 156px;
  line-height: 1;
}

.client-items-trigger {
  appearance: none;
  display: inline;
  width: fit-content;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #004b7f;
  font: inherit;
  font-weight: 900;
  line-height: 1.25;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.client-items-trigger:hover,
.client-items-trigger:focus-visible {
  color: #006fb8;
}

.client-items-value {
  color: #0f2942;
  font-weight: 850;
  white-space: nowrap;
}


.client-items-meta-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.client-payment-pill,
.client-substitution-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.client-payment-pill {
  border: 1px solid rgba(24, 111, 175, 0.2);
  background: #eff8ff;
  color: #064f7c;
}

.client-substitution-pill {
  border: 1px solid rgba(14, 116, 144, 0.18);
  background: #ecfeff;
  color: #0f5164;
}

.client-items-modal[hidden] {
  display: none !important;
}

.client-items-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 22, 36, 0.42);
}

.client-items-modal-panel {
  width: min(94vw, 520px);
  max-height: min(78vh, 720px);
  overflow: auto;
  border: 1px solid rgba(188, 204, 220, 0.74);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.client-items-modal-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(188, 204, 220, 0.55);
  background: rgba(255, 255, 255, 0.96);
}

.client-items-modal-head h3 {
  margin: 2px 0 0;
  font-size: 1.45rem;
  letter-spacing: -0.04em;
}

.client-items-modal-close {
  appearance: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(188, 204, 220, 0.8);
  border-radius: 14px;
  background: #f8fbff;
  color: #08294a;
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}

.client-items-modal-list {
  display: grid;
  gap: 0;
  padding: 0 20px;
}

.client-items-modal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(188, 204, 220, 0.48);
}

.client-items-modal-row strong {
  color: #08294a;
}

.client-items-modal-row > span,
.client-items-modal-total strong {
  font-weight: 950;
  color: #08294a;
  white-space: nowrap;
}

.client-items-options {
  margin: 6px 0 0 18px;
  padding: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.client-items-modal-total {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px 18px;
  background: #f8fbff;
  font-weight: 900;
}

.client-summary-pin {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 9px;
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid rgba(245, 158, 11, 0.36);
  background: #fff4db;
  color: #704800;
  box-shadow: 0 6px 14px rgba(245, 158, 11, 0.10);
}

.client-summary-pin-label {
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .065em;
}

.client-summary-pin-code {
  font-size: 1.32rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

.client-summary-pin-state {
  padding: 4px 7px;
  border-radius: 999px;
  background: #fdeaea;
  color: #a92828;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.client-summary-pin.is-locked {
  border-color: rgba(169, 40, 40, 0.28);
  background: #fff1f1;
  color: #8a1f1f;
}

/* Delivery slot foundation */
.client-slot-mini,
.rider-mini-flag.slot,
.delivery-slot-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid rgba(13, 79, 124, 0.18);
  background: #e8f3ff;
  color: #0d4f7c;
  font-weight: 900;
}

.client-slot-mini,
.rider-mini-flag.slot {
  padding: 5px 8px;
  font-size: 0.8rem;
}

.badge.slot,
.chip.slot {
  border: 1px solid rgba(13, 79, 124, 0.18);
  background: #e8f3ff;
  color: #0d4f7c;
}

.client-slot-mini.rush,
.delivery-slot-summary.rush,
.badge.rush,
.chip.rush {
  border: 1px solid rgba(217, 119, 6, 0.22);
  background: #fff7ed;
  color: #9a3412;
}

.shop-payment-option.rush-option {
  border-color: rgba(217, 119, 6, 0.24);
  background: #fffaf2;
}

.shop-payment-option.rush-option:has(input:checked) {
  border-color: rgba(217, 119, 6, 0.42);
  background: #fff7ed;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.10);
}

.delivery-slot-summary {
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 12px;
  padding: 9px 12px;
  line-height: 1.25;
}

.shop-slot-option small {
  display: block;
  margin-top: 3px;
}

.shop-slot-option input[type="radio"] {
  align-self: flex-start;
  margin-top: 4px;
}

/* Compact checkout delivery slot rows */
.shop-slot-day-list {
  display: grid;
  gap: 10px;
}

.shop-slot-day-row {
  display: grid;
  grid-template-columns: minmax(88px, 120px) 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
}

.shop-slot-day-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #eef6ff;
  color: var(--accent-dark);
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
}

.shop-slot-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.shop-slot-chip {
  cursor: pointer;
}

.shop-slot-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.shop-slot-chip span {
  display: grid;
  gap: 2px;
  min-width: 116px;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(16, 42, 67, 0.04);
}

.shop-slot-chip strong {
  font-size: 0.94rem;
  line-height: 1.1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shop-slot-chip small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.15;
  white-space: nowrap;
}

.shop-slot-chip input[type="radio"]:checked + span {
  border-color: rgba(26, 115, 232, 0.48);
  background: #e8f3ff;
  color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}

.shop-slot-chip input[type="radio"]:focus-visible + span {
  outline: 3px solid rgba(26, 115, 232, 0.28);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .shop-fulfilment-option-grid {
    grid-template-columns: 1fr;
  }

  .shop-slot-day-row {
    grid-template-columns: 1fr;
  }

  .shop-slot-day-label {
    justify-content: flex-start;
    min-height: unset;
  }

  .shop-slot-chip-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-slot-chip span {
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .shop-slot-chip-list {
    grid-template-columns: 1fr;
  }
}

/* Checkout rider tips */
.shop-tip-section {
  gap: 12px;
}

.shop-tip-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.shop-tip-chip {
  cursor: pointer;
}

.shop-tip-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.shop-tip-chip span {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  font-weight: 900;
  text-align: center;
  box-shadow: 0 1px 0 rgba(16, 42, 67, 0.04);
}

.shop-tip-chip small {
  display: block;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.78rem;
}

.shop-tip-chip input[type="radio"]:checked + span {
  border-color: rgba(25, 135, 84, 0.42);
  background: #ecfdf3;
  color: #0f6b3d;
  box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.10);
}

.shop-tip-chip input[type="radio"]:focus-visible + span {
  outline: 3px solid rgba(25, 135, 84, 0.24);
  outline-offset: 2px;
}

.shop-custom-tip-row[hidden] {
  display: none !important;
}

.shop-custom-tip-row {
  max-width: 240px;
}

/* Mobile-first login */
.login-page .login-shell {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}

.login-page .login-card {
  width: min(100%, 460px);
}

.login-card-heading {
  margin-bottom: 18px;
}

.login-form {
  grid-template-columns: 1fr !important;
  gap: 14px;
}

.login-secondary-actions {
  justify-content: center;
  margin-top: 14px;
}

@media (max-width: 760px) {
  .shop-tip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .login-page .login-shell {
    padding: 16px 0;
  }

  .login-page .login-card {
    border-radius: 18px;
  }
}

@media (max-width: 420px) {
  .shop-tip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-tip-chip span {
    min-height: 46px;
    padding: 9px 8px;
  }
}

/* Rider rush/tip earning visibility */
.rider-mini-flag.tip,
.rider-earning-extra.tip {
  border-color: rgba(5, 150, 105, 0.22);
  background: #ecfdf5;
  color: #047857;
}

.rider-rush-badge {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 950;
}

.is-rush-order {
  border-color: rgba(217, 119, 6, 0.30) !important;
  box-shadow: 0 10px 24px rgba(217, 119, 6, 0.08);
}

.rush-banner {
  margin-top: 14px;
  border: 1px solid rgba(217, 119, 6, 0.24);
  background: #fff7ed;
  color: #9a3412;
  border-radius: 18px;
  padding: 12px 14px;
  font-weight: 700;
}

.rider-pay-breakdown {
  display: grid;
  gap: 8px;
  padding: 10px 0;
}

.rider-pay-breakdown > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  border-radius: 14px;
  padding: 9px 11px;
}

.rider-pay-breakdown > div.rush {
  border-color: rgba(217, 119, 6, 0.22);
  background: #fff7ed;
  color: #9a3412;
}

.rider-pay-breakdown > div.tip {
  border-color: rgba(5, 150, 105, 0.22);
  background: #ecfdf5;
  color: #047857;
}

.rider-earning-breakdown .rider-earning-extra {
  border-radius: 999px;
  padding: 4px 8px;
  border: 1px solid var(--border);
}

.rider-earning-breakdown .rider-earning-extra.rush {
  border-color: rgba(217, 119, 6, 0.22);
  background: #fff7ed;
  color: #9a3412;
}

.rider-earning-breakdown .rider-earning-extra.tip {
  border-color: rgba(5, 150, 105, 0.22);
  background: #ecfdf5;
  color: #047857;
}

/* Rider mobile chip wrapping fix - May 2026
   Keep Rush, status, pay, Rush bonus and tip chips inside phone-width active job cards. */
.rider-active-meta,
.compact-claim-badges {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.rider-active-meta > *,
.compact-claim-badges > * {
  max-width: 100%;
}

.rider-active-compact-card,
.compact-claim-card,
.rider-dashboard-job-card {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 640px) {
  .rider-active-open-link,
  .rider-active-main-line,
  .rider-active-sub-line,
  .rider-active-meta {
    width: 100%;
    max-width: 100%;
  }

  .rider-active-meta {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 5px;
  }

  .rider-active-meta .badge,
  .rider-active-meta .status-pill,
  .rider-active-meta .chip,
  .rider-active-meta .rider-mini-flag,
  .compact-claim-badges .badge,
  .compact-claim-badges .status-pill,
  .compact-claim-badges .chip,
  .compact-claim-badges .rider-mini-flag {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .rider-active-meta .chip,
  .rider-active-meta .rider-mini-flag,
  .compact-claim-badges .chip,
  .compact-claim-badges .rider-mini-flag {
    padding-inline: 7px;
    font-size: 0.74rem;
  }
}

@media (max-width: 380px) {
  .rider-active-meta,
  .compact-claim-badges {
    gap: 4px;
  }

  .rider-active-meta .badge,
  .rider-active-meta .status-pill,
  .rider-active-meta .chip,
  .rider-active-meta .rider-mini-flag,
  .compact-claim-badges .badge,
  .compact-claim-badges .status-pill,
  .compact-claim-badges .chip,
  .compact-claim-badges .rider-mini-flag {
    padding: 5px 7px;
    font-size: 0.72rem;
  }
}

/* Admin control centre */
.admin-page {
  background:
    radial-gradient(circle at top left, rgba(24, 111, 175, 0.16), transparent 34rem),
    linear-gradient(180deg, #eef4fb 0%, var(--bg) 280px, var(--bg) 100%);
}
.admin-page .app-shell {
  width: min(1320px, calc(100% - 28px));
}
.admin-topnav {
  position: sticky;
  top: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(188, 204, 220, 0.75);
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(14px);
}
.admin-nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 850;
  text-decoration: none;
  border: 1px solid transparent;
}
.admin-nav-link:hover,
.admin-nav-link.is-active {
  color: var(--text);
  background: var(--accent-soft);
  border-color: rgba(24, 111, 175, 0.18);
  text-decoration: none;
}
.admin-nav-logout {
  background: var(--panel-soft);
  border-color: var(--border);
}
.admin-hero-topbar {
  align-items: center;
}
.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 18px 0 22px;
}
.admin-metric-grid-large {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
}
.admin-metric {
  display: grid;
  gap: 7px;
  min-height: 116px;
  padding: 17px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-left: 6px solid var(--accent);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.admin-metric-label,
.admin-metric-hint {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
}
.admin-metric strong {
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  line-height: 1;
}
.admin-metric.tone-green { border-left-color: var(--success); }
.admin-metric.tone-amber { border-left-color: #f59e0b; }
.admin-metric.tone-red { border-left-color: var(--danger); }
.admin-metric.tone-purple { border-left-color: #7c3aed; }
.admin-metric.tone-teal { border-left-color: #0f766e; }
.admin-metric.tone-blue { border-left-color: var(--accent); }
.admin-dashboard-grid {
  align-items: start;
  margin-bottom: 18px;
}
.admin-panel-card {
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.07);
}
.admin-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.admin-section-head h2,
.admin-client-head h3 {
  margin: 0;
}
.admin-alert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.admin-alert-card {
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  text-decoration: none;
}
.admin-alert-card:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.admin-alert-card strong {
  font-size: 2rem;
  line-height: 1;
}
.admin-alert-card span {
  color: var(--muted);
  font-weight: 800;
}
.admin-alert-card.amber { background: #fff8e6; border-color: #f7d179; }
.admin-alert-card.green { background: #ecfdf3; border-color: #bfe7cf; }
.admin-alert-card.red { background: #fff0f0; border-color: #f4b7b5; }
.admin-alert-card.purple { background: #f4efff; border-color: #d6c6ff; }
.admin-alert-card.teal { background: #eefcf9; border-color: #a7ede2; }
.admin-alert-card.blue { background: #edf6ff; border-color: #c7ddf2; }

.admin-pilot-readiness-card {
  margin: 0 0 18px;
}
.admin-readiness-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.admin-readiness-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
  color: var(--text);
  text-decoration: none;
}
.admin-readiness-row:hover {
  text-decoration: none;
  box-shadow: var(--shadow);
}
.admin-readiness-row.ok {
  background: #ecfdf3;
  border-color: #bfe7cf;
}
.admin-readiness-row.warn {
  background: #fff8e6;
  border-color: #f7d179;
}
.admin-readiness-row.danger {
  background: #fff0f0;
  border-color: #f4b7b5;
}
.admin-readiness-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.admin-readiness-copy {
  display: grid;
  gap: 3px;
}
.admin-readiness-copy strong {
  line-height: 1.25;
}
.admin-readiness-copy small {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}
@media (max-width: 760px) {
  .admin-readiness-list {
    grid-template-columns: 1fr;
  }
}

.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.admin-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
}
.admin-filter-pill:hover,
.admin-filter-pill.active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-strong);
  text-decoration: none;
}
.admin-mini-stat-list {
  display: grid;
  gap: 10px;
}
.admin-mini-stat-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
}
.admin-mini-stat-list.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-mini-stat-list span {
  color: var(--muted);
  font-weight: 750;
}
.admin-mini-stat-list strong {
  text-align: right;
}
.admin-order-card-list {
  display: grid;
  gap: 12px;
}
.admin-order-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-left: 6px solid var(--accent);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 7px 24px rgba(15, 23, 42, 0.05);
}
.admin-order-card.is-rush {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, #fff4f4 0%, #fff 36%);
}
.admin-order-main {
  display: flex;
  gap: 13px;
  align-items: center;
  min-width: 0;
}
.admin-order-number {
  display: inline-grid;
  place-items: center;
  min-width: 76px;
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 16px;
  background: #102a43;
  color: #fff;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 950;
}
.admin-order-number:hover {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}
.admin-order-summary {
  min-width: 0;
}
.admin-order-title {
  font-weight: 900;
  line-height: 1.25;
}
.admin-order-subtitle {
  color: var(--muted);
  margin-top: 4px;
  font-size: 0.94rem;
}
.admin-order-flags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.admin-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}
.admin-flag.rush { background: #ffecec; color: #b42318; border-color: #ffc2c2; }
.admin-flag.slot { background: #eef6ff; color: #075985; border-color: #c7ddf2; }
.admin-flag.tip { background: #fff8e6; color: #9a5b00; border-color: #f5d58a; }
.admin-flag.rider { background: #eefcf9; color: #0f766e; border-color: #a7ede2; }
.admin-flag.danger { background: var(--danger-soft); color: var(--danger); border-color: #f3b7b6; }
.admin-flag.success { background: var(--success-soft); color: var(--success); border-color: #bfe7cf; }
.admin-flag.muted { background: #eef2f6; color: var(--muted); border-color: var(--border); }
.admin-flag.blue { background: #eef6ff; color: #075985; border-color: #c7ddf2; }
.admin-flag.purple { background: #f4efff; color: #6d28d9; border-color: #d9c8ff; }
.admin-flag.voided { background: #f4efff; color: #6d28d9; border-color: #d9c8ff; }

.support-choice-list {
    display: grid;
    gap: 10px;
}

.support-choice-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.72);
}

.support-choice-card input {
    width: auto;
    margin-top: 3px;
}

.support-choice-card small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}
.compact-button {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 10px;
}
.admin-filter-form label {
  min-width: 160px;
}
.admin-filter-form label:first-child {
  min-width: 240px;
}
.admin-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.admin-client-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel-soft);
}
.admin-client-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.admin-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-warning-line {
  margin: 0;
  padding: 10px 11px;
  border-radius: 12px;
  background: var(--warning-soft);
  color: #8a5300;
  font-weight: 750;
}
.admin-compact-list {
  display: grid;
  gap: 10px;
}
.admin-compact-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--panel-soft);
}
.admin-compact-row span {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: 0.9rem;
}
.admin-row-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
  text-align: right;
}
.admin-pin-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  padding: 10px 14px;
  margin: 4px 0 10px;
  border-radius: 16px;
  background: #102a43;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}
.admin-pin-locked {
  border-color: #f3b7b6;
  background: #fff7f7;
}
.payment-pill.pending,
.payment-pill.invoiced,
.payment-pill.creating,
.payment-pill.open,
.payment-pill.pending_resolution,
.payment-pill.payment_failed {
  background: var(--warning-soft);
  color: #8a5300;
}
.payment-pill.card_refunded,
.payment-pill.store_credit_issued,
.payment-pill.succeeded,
.payment-pill.complete {
  background: var(--success-soft);
  color: var(--success);
}

@media (max-width: 900px) {
  .admin-topnav {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-nav-links,
  .admin-nav-link {
    width: 100%;
  }
  .admin-nav-link {
    flex: 1 1 45%;
  }
  .admin-nav-logout {
    width: 100%;
  }
  .admin-alert-grid,
  .admin-mini-stat-list.compact {
    grid-template-columns: 1fr;
  }
  .admin-client-head,
  .admin-order-main,
  .admin-compact-row {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-row-end {
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .admin-page .app-shell {
    width: min(100% - 18px, 1320px);
    padding-top: 12px;
  }
  .admin-nav-link {
    flex: 1 1 100%;
  }
  .admin-metric {
    min-height: auto;
  }
  .admin-order-card {
    padding: 12px;
  }
  .admin-order-number {
    width: 100%;
  }
  .admin-order-flags > * {
    max-width: 100%;
  }
  .admin-mobile-table-wrap table {
    min-width: 760px;
  }
}

/* Client dashboard auto-sort and drag reordering - May 2026 */
.client-dashboard-sortable.is-dragging {
  user-select: none;
}

.client-order-row.is-dragging td {
  background: #eef7ff !important;
  box-shadow: inset 0 0 0 2px rgba(24, 111, 175, 0.18);
}

.client-order-number-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.client-order-drag-handle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 38px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(188, 204, 220, 0.74);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: #365b7a;
  box-shadow: none;
  font-size: 1rem;
  line-height: 1;
  font-weight: 950;
  cursor: grab;
  touch-action: none;
}

.client-order-drag-handle:active {
  cursor: grabbing;
}

@media (max-width: 720px) {
  .client-order-number-wrap {
    gap: 6px;
  }

  .client-order-drag-handle {
    width: 28px;
    height: 34px;
  }
}

/* Client dashboard completed/cancelled tabs and rows - May 2026 */
.client-order-tab.status-completed {
  color: #334e68;
}

.client-order-tab.status-cancelled {
  color: #9f1239;
}

.client-order-tab.status-completed:hover,
.client-order-tab.status-completed.is-active {
  background: #f1f5f9;
  border-color: rgba(100, 116, 139, 0.26);
}

.client-order-tab.status-cancelled:hover,
.client-order-tab.status-cancelled.is-active {
  background: #fff1f2;
  border-color: rgba(225, 29, 72, 0.24);
}

.client-queue-card.status-completed {
  border-color: rgba(100, 116, 139, 0.22);
  background: linear-gradient(180deg, #f8fafc, #ffffff 44%);
}

.client-queue-card.status-cancelled {
  border-color: rgba(225, 29, 72, 0.22);
  background: linear-gradient(180deg, #fff7f8, #ffffff 44%);
}

.client-queue-card.status-completed .client-section-eyebrow {
  color: #334e68;
}

.client-queue-card.status-cancelled .client-section-eyebrow {
  color: #9f1239;
}

.client-order-row.status-completed td {
  background: #f8fafc;
}

.client-order-row.status-cancelled td {
  background: #fff7f8;
}

.client-order-row.status-completed td:first-child {
  box-shadow: inset 5px 0 0 #64748b;
}

.client-order-row.status-cancelled td:first-child {
  box-shadow: inset 5px 0 0 #e11d48;
}

/* Client dashboard progress column tidy - May 2026 */
.client-progress-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 230px;
}

.client-progress-primary {
  white-space: normal;
  max-width: 100%;
  line-height: 1.2;
}

.client-progress-meta,
.client-progress-alerts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.client-progress-meta .client-slot-mini,
.client-progress-meta .client-summary-pin,
.client-progress-alerts .badge {
  margin-top: 0;
}

.client-progress-meta .client-summary-pin {
  padding: 6px 9px;
  gap: 7px;
  border-radius: 999px;
  box-shadow: none;
}

.client-progress-meta .client-summary-pin-label {
  font-size: 0.68rem;
  letter-spacing: .055em;
}

.client-progress-meta .client-summary-pin-code {
  font-size: 1.05rem;
  letter-spacing: .055em;
}

.client-progress-meta .client-summary-pin-state {
  padding: 3px 6px;
  font-size: 0.66rem;
}

@media (max-width: 760px) {
  .client-progress-summary {
    min-width: 0;
  }
}

/* Storefront special menu/category promotion */
.shop-special-menu-area {
  display: grid;
  gap: 18px;
  margin-bottom: 24px;
}

.shop-special-menu-section {
  padding: 18px;
  border-radius: 26px;
  background: linear-gradient(135deg, #fffdf5 0%, #fff7df 100%);
  border: 1px solid rgba(230, 176, 60, 0.38);
  box-shadow: 0 16px 34px rgba(91, 61, 9, 0.08);
}

.shop-special-menu-title {
  align-items: flex-start;
}

.shop-special-menu-title .page-kicker {
  margin-bottom: 3px;
}

.shop-special-menu-description {
  margin: -4px 0 14px;
  color: var(--muted);
  line-height: 1.55;
}

.form-help {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Storefront special menu preorder visibility */
.info-text {
  color: #075985;
}

.shop-special-menu-cart-note {
  border-color: rgba(14, 116, 144, 0.22);
  background: linear-gradient(135deg, #ecfeff, #f8fbff);
}

.shop-special-menu-cart-note p {
  margin: 0;
}

/* Platform homepage shop-first layout - May 2026 */
.platform-home-page .app-shell {
  width: min(1220px, calc(100% - 32px));
}

.platform-home-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(24, 111, 175, 0.20), transparent 30rem),
    radial-gradient(circle at 92% 16%, rgba(16, 42, 67, 0.12), transparent 26rem),
    linear-gradient(180deg, #f0f7ff 0%, #f7fbff 34%, #f5f7fb 100%);
}

.platform-home-nav {
  margin-bottom: 18px;
}

.platform-shopfront-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
  gap: 20px;
  align-items: stretch;
  padding: clamp(22px, 4vw, 42px);
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),
    radial-gradient(circle at 85% 0%, rgba(24, 111, 175, 0.16), transparent 22rem);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.platform-shopfront-hero::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(24, 111, 175, 0.10);
  pointer-events: none;
}

.platform-hero-copy,
.platform-hero-shop-window {
  position: relative;
  z-index: 1;
}

.platform-hero-copy {
  align-self: center;
}

.platform-hero-copy h1 {
  margin: 0;
  max-width: 720px;
  color: #08233d;
  font-size: clamp(2.55rem, 5.8vw, 4.7rem);
  line-height: 1;
  letter-spacing: -0.058em;
}

.platform-hero-copy p:not(.page-kicker) {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  line-height: 1.72;
}

.platform-hero-copy .platform-hero-supporting-copy {
  margin-top: 10px;
  color: #21415f;
  font-weight: 760;
}

.platform-hero-actions {
  margin-top: 22px;
}

.platform-quick-points {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.platform-quick-points span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(188, 204, 220, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #304a63;
  font-weight: 850;
  font-size: 0.92rem;
}

.platform-hero-shop-window {
  display: grid;
  align-items: center;
}

.platform-featured-shop-card,
.platform-shop-card,
.platform-empty-shops,
.platform-account-strip,
.platform-shop-owner-footer {
  border: 1px solid rgba(188, 204, 220, 0.78);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.09);
}

.platform-featured-shop-card {
  display: grid;
  gap: 16px;
  align-content: center;
  min-height: 360px;
  padding: clamp(22px, 3vw, 30px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 0%, rgba(24, 111, 175, 0.20), transparent 13rem),
    linear-gradient(160deg, #ffffff, #f6fbff);
}

.platform-featured-shop-card.is-empty {
  background:
    radial-gradient(circle at 90% 0%, rgba(24, 111, 175, 0.12), transparent 13rem),
    linear-gradient(160deg, #ffffff, #f8fbff);
}

.platform-featured-shop-card h2,
.platform-empty-shops h2,
.platform-account-strip h2,
.platform-shop-owner-footer h2,
.platform-shop-section h2 {
  margin: 0;
  color: #08233d;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.platform-featured-shop-card h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.platform-featured-shop-card p:not(.page-kicker),
.platform-shop-card p,
.platform-empty-shops p,
.platform-account-strip p,
.platform-shop-owner-footer p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.platform-featured-shop-top,
.platform-shop-card-header,
.platform-shop-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.platform-shop-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 20px;
  background: linear-gradient(135deg, #0b2d4a, #1b78b8);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
}

.platform-shop-avatar.large {
  width: 74px;
  height: 74px;
  border-radius: 26px;
  font-size: 2rem;
}

.platform-shop-meta-row {
  justify-content: flex-start;
  color: #405a73;
  font-size: 0.92rem;
  font-weight: 850;
}

.platform-shop-meta-row span {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: #eef6ff;
  border: 1px solid rgba(188, 204, 220, 0.76);
}

.platform-shop-section {
  padding: clamp(18px, 3vw, 24px);
  margin-bottom: 20px;
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.platform-section-heading {
  margin-bottom: 18px;
}

.platform-section-heading .muted {
  margin: 8px 0 0;
}

.platform-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.platform-shop-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  border-radius: 24px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.platform-shop-card:hover {
  transform: translateY(-3px);
  border-color: rgba(24, 111, 175, 0.34);
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.12);
}

.platform-shop-card h3 {
  margin: 0;
  color: #08233d;
  font-size: 1.42rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.platform-shop-card .button {
  justify-self: stretch;
  text-align: center;
}

.platform-empty-shops {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
}

.platform-account-strip,
.platform-shop-owner-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: clamp(18px, 3vw, 24px);
  margin-bottom: 18px;
  border-radius: 26px;
}

.platform-account-strip {
  background:
    linear-gradient(135deg, #0d2d49, #165f98);
  color: #fff;
}

.platform-account-strip h2,
.platform-account-strip p,
.platform-account-strip .page-kicker {
  color: #fff;
}

.platform-account-strip .button.primary {
  background: #fff;
  color: #0d2d49;
}

.platform-shop-owner-footer {
  background: rgba(255, 255, 255, 0.74);
  box-shadow: none;
}

.platform-shop-owner-footer h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
}

@media (max-width: 1040px) {
  .platform-shopfront-hero,
  .platform-shop-grid {
    grid-template-columns: 1fr 1fr;
  }

  .platform-hero-copy {
    grid-column: 1 / -1;
  }

  .platform-hero-shop-window {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .platform-home-page .app-shell {
    width: min(100% - 18px, 1220px);
  }

  .platform-shopfront-hero,
  .platform-shop-grid {
    grid-template-columns: 1fr;
  }

  .platform-shopfront-hero,
  .platform-shop-section,
  .platform-account-strip,
  .platform-shop-owner-footer {
    border-radius: 22px;
  }

  .platform-hero-copy h1 {
    font-size: clamp(2.35rem, 11vw, 3.7rem);
  }

  .platform-featured-shop-card {
    min-height: auto;
  }

  .platform-empty-shops,
  .platform-account-strip,
  .platform-shop-owner-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-account-strip .button,
  .platform-shop-owner-footer .button,
  .platform-empty-shops .button {
    width: 100%;
  }
}

/* Shop logos */
.shop-brand-mark.has-image,
.platform-shop-avatar.has-image,
.shop-directory-logo.has-image,
.shop-hero-logo.has-image,
.shop-logo-preview.has-image {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(188, 204, 220, 0.9);
  color: transparent;
}

.shop-brand-mark.has-image img,
.platform-shop-avatar.has-image img,
.shop-directory-logo.has-image img,
.shop-hero-logo.has-image img,
.shop-logo-preview.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-sizing: border-box;
  padding: 5px;
}

.platform-shop-avatar.has-image img {
  padding: 6px;
}

.platform-shop-avatar.large.has-image img {
  padding: 8px;
}

.shop-logo-editor {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(188, 204, 220, 0.82);
  border-radius: 22px;
  background: #f8fbff;
}

.shop-logo-preview {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 28px;
  background: linear-gradient(135deg, #102a43, #186faf);
  color: #fff;
  font-size: 2.3rem;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
}

.shop-logo-controls {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.shop-logo-controls p,
.shop-logo-controls .flash {
  margin: 0;
}

.logo-upload-button {
  align-self: flex-start;
  cursor: pointer;
}

.logo-upload-button input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--text);
}

.shop-directory-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.shop-directory-logo,
.shop-hero-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #102a43, #186faf);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}

.shop-directory-logo {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  font-size: 1.5rem;
}

.shop-hero-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}

.shop-hero-title-row .page-kicker,
.shop-hero-title-row h1 {
  margin: 0;
}

.shop-hero-title-row .page-kicker {
  margin-bottom: 8px;
}

.shop-hero-logo {
  width: 92px;
  height: 92px;
  border-radius: 30px;
  font-size: 2.4rem;
}

@media (max-width: 720px) {
  .shop-logo-editor {
    grid-template-columns: 1fr;
  }

  .shop-hero-title-row {
    align-items: flex-start;
  }

  .shop-hero-logo {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    font-size: 1.9rem;
  }
}

.client-brand-mark.has-image {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(188, 204, 220, 0.9);
  color: transparent;
}

.client-brand-mark.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-sizing: border-box;
  padding: 5px;
}

@media (max-width: 430px) {
  .platform-brand-image {
    height: 50px;
    max-width: min(320px, 100%);
  }
}

/* Public footer and placeholder policy pages */
.public-footer {
  margin-top: 28px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.public-footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) repeat(3, minmax(150px, 1fr));
  gap: clamp(18px, 3vw, 30px);
  align-items: start;
}

.public-footer-brand-block {
  display: grid;
  gap: 12px;
}

.public-footer-brand-block p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  line-height: 1.65;
}

.public-footer .public-footer-brand .platform-brand-image {
  height: 64px;
  max-width: min(330px, 100%);
}

.public-footer-links {
  display: grid;
  gap: 9px;
}

.public-footer-links h2 {
  margin: 0 0 4px;
  color: #08233d;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.public-footer-links a {
  color: var(--muted);
  font-weight: 750;
  text-decoration: none;
}

.public-footer-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.public-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(188, 204, 220, 0.62);
  color: var(--muted);
  font-size: 0.92rem;
}

.policy-hero {
  margin-bottom: 18px;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 0%, rgba(24, 111, 175, 0.18), transparent 16rem),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.policy-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: #08233d;
  font-size: clamp(2.45rem, 7vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.policy-hero p:not(.page-kicker) {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.policy-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.policy-card {
  display: grid;
  gap: 12px;
}

.policy-card h2 {
  margin: 0;
  color: #08233d;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}

.policy-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.policy-card ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
  line-height: 1.7;
}

.policy-card li + li {
  margin-top: 7px;
}

.policy-card.warning-card {
  border-color: rgba(173, 106, 0, 0.32);
  background: #fffaf0;
}

@media (max-width: 940px) {
  .public-footer-grid,
  .policy-layout {
    grid-template-columns: 1fr 1fr;
  }

  .public-footer-brand-block {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .public-footer,
  .policy-hero {
    border-radius: 22px;
  }

  .public-footer-grid,
  .policy-layout {
    grid-template-columns: 1fr;
  }

  .public-footer .public-footer-brand .platform-brand-image {
    height: 54px;
  }

  .policy-hero h1 {
    max-width: 100%;
  }
}


.shop-age-check-panel,
.rider-age-check-fields {
    border: 1px solid rgba(180, 83, 9, 0.22);
    background: rgba(255, 247, 237, 0.72);
    border-radius: 18px;
    padding: 16px;
    display: grid;
    gap: 12px;
}

.shop-age-check-panel h2 {
    margin: 0;
}

.shop-age-check-panel p,
.rider-age-check-fields p,
.rider-age-check-banner p {
    margin: 0;
}

.rider-age-check-fields input[type="date"],
.shop-age-check-panel input[type="date"] {
    max-width: 240px;
}

.shop-basket-link,
[data-basket-view-link] {
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.shop-basket-link.is-basket-updated,
[data-basket-view-link].is-basket-updated {
  animation: basket-bump .55s ease;
  box-shadow: 0 10px 24px rgba(24, 111, 175, 0.18);
}

.basket-fly-item {
  position: fixed;
  z-index: 2000;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 950;
  pointer-events: none;
  box-shadow: var(--shadow);
  transition: transform .62s cubic-bezier(.2, .9, .25, 1), opacity .62s ease;
}

@keyframes basket-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .shop-basket-link.is-basket-updated,
  [data-basket-view-link].is-basket-updated {
    animation: none;
  }

  .basket-fly-item {
    display: none;
  }
}

/* Public support/contact page */
.support-page .support-alert {
  margin-bottom: 18px;
}

.support-option-card {
  align-content: start;
}

.support-option-card.is-selected {
  border-color: rgba(24, 111, 175, 0.42);
  box-shadow: 0 18px 44px rgba(24, 111, 175, 0.12);
}

.support-form-card {
  grid-column: 1 / -1;
}

.support-form-card .shop-section-heading {
  align-items: start;
}

.support-contact-form {
  margin-top: 8px;
}

.support-form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.support-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Client rider management polish */
.rider-management-layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.rider-invite-card {
  position: sticky;
  top: 18px;
}

.rider-invite-form {
  display: grid;
  gap: 14px;
}

.rider-invite-form > label {
  display: grid;
  gap: 7px;
}

.rider-type-list {
  display: grid;
  gap: 10px;
}

.rider-type-list legend {
  font-size: 0.88rem;
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--text);
}

.rider-type-card,
.rider-invite-form label.rider-type-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
  cursor: pointer;
}

.rider-type-card:has(input:checked) {
  border-color: rgba(24, 111, 175, 0.55);
  background: #eef6ff;
  box-shadow: 0 0 0 3px rgba(24, 111, 175, 0.08);
}

.rider-type-card.is-disabled,
.rider-invite-form label.rider-type-card.is-disabled {
  opacity: 0.58;
  background: #f6f8fb;
  border-style: dashed;
  cursor: not-allowed;
}

.rider-type-card.is-disabled:has(input:checked) {
  border-color: var(--border);
  background: #f6f8fb;
  box-shadow: none;
}

.rider-type-card.is-disabled input {
  cursor: not-allowed;
}

.rider-type-disabled-note {
  color: #8a4b00;
  font-weight: 800;
}

.rider-type-card input {
  width: auto;
  margin-top: 3px;
}

.rider-type-card strong,
.rider-type-card small {
  display: block;
}

.rider-type-card small {
  margin-top: 4px;
  line-height: 1.45;
  color: var(--muted);
}

.rider-declaration,
.rider-invite-form label.rider-declaration {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  line-height: 1.45;
}

.rider-declaration input {
  width: auto;
  margin-top: 3px;
}

.rider-management-table {
  min-width: 720px;
}

.rider-management-table th,
.rider-management-table td {
  padding: 13px 12px;
}

.rider-management-table .rider-name-cell {
  width: 18%;
}

.rider-management-table .rider-email-cell {
  max-width: 210px;
  overflow-wrap: anywhere;
}

.rider-type-cell {
  min-width: 145px;
}

.rider-checks-owner,
.rider-approval-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.rider-action-cell {
  width: 96px;
  text-align: right;
}

.rider-action-cell form {
  display: inline-block;
}

.rider-action-cell .compact-button {
  min-width: 82px;
}

@media (max-width: 980px) {
  .rider-management-layout {
    grid-template-columns: 1fr;
  }

  .rider-invite-card {
    position: static;
  }
}

.rider-age-check-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid rgba(180, 83, 9, 0.22);
    background: rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    cursor: pointer;
}

.rider-age-check-option input {
    margin-top: 4px;
}

.rider-age-check-option strong {
    display: block;
    color: #78350f;
}

.rider-age-check-option small {
    display: block;
    margin-top: 3px;
    color: #6b7280;
    line-height: 1.45;
}

.rider-age-check-option:has(input:checked) {
    border-color: rgba(217, 119, 6, 0.62);
    background: #fff7ed;
    box-shadow: 0 10px 24px rgba(217, 119, 6, 0.12);
}

.rider-age-check-dob {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.58);
}

.client-rider-availability-card {
  display: grid;
  gap: 14px;
  margin: 0 0 16px;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.client-rider-availability-card.has-online {
  border-color: rgba(31, 146, 84, 0.28);
  background: linear-gradient(180deg, #f0fff6, #ffffff 48%);
}

.client-rider-availability-card.has-standby {
  border-color: rgba(24, 111, 175, 0.24);
  background: linear-gradient(180deg, #eef7ff, #ffffff 48%);
}

.client-rider-availability-card.has-none {
  border-color: rgba(245, 158, 11, 0.32);
  background: linear-gradient(180deg, #fffaf0, #ffffff 48%);
}

.client-rider-availability-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.client-rider-availability-main h2 {
  margin: 2px 0 4px;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  letter-spacing: -0.035em;
}

.client-rider-availability-main p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.client-rider-availability-status {
  display: flex;
  justify-content: flex-end;
  min-width: max-content;
}

.client-rider-availability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.client-rider-availability-stat {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(188, 204, 220, 0.66);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.client-rider-availability-stat strong {
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.045em;
}

.client-rider-availability-stat span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.client-rider-availability-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.client-rider-availability-notes span {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

@media (max-width: 760px) {
  .client-rider-availability-main {
    display: grid;
  }

  .client-rider-availability-status {
    justify-content: flex-start;
  }

  .client-rider-availability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .client-rider-availability-grid {
    grid-template-columns: 1fr;
  }
}

/* Rider public profile card */
.rider-public-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
  margin-top: 12px;
}
.rider-public-avatar {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: #eaf3ff;
  color: var(--accent);
  font-weight: 900;
  font-size: 1.05rem;
  border: 1px solid rgba(24, 111, 175, 0.20);
}
.rider-public-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rider-public-info {
  min-width: 0;
}
.rider-public-info .page-kicker {
  margin-bottom: 2px;
}
.rider-public-info h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}
.rider-public-info p:not(.page-kicker) {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.35;
}
.rider-route-position {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(24, 111, 175, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}
.rider-route-position-label {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rider-route-position strong {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.25;
}
.rider-route-position p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .rider-public-card {
    align-items: flex-start;
  }
  .rider-public-avatar {
    width: 50px;
    height: 50px;
  }
}

.button.ghost.danger,
button.ghost.danger {
  border-color: rgba(201, 60, 55, 0.28);
  color: var(--danger);
}
.button.ghost.danger:hover,
button.ghost.danger:hover {
  background: var(--danger-soft);
}
.rider-unclaim-panel {
  margin: 14px 0;
}
.rider-unclaim-panel form {
  margin-top: 10px;
}
.rider-unclaim-panel textarea {
  resize: vertical;
}

/* Patch 18: compact, AJAX-friendly public storefront browsing */
.shop-hero-pro.shop-hero-compact {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 16px;
  padding: clamp(16px, 2.4vw, 24px);
  margin-bottom: 14px;
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
}

.shop-hero-pro.shop-hero-compact::after {
  width: 190px;
  height: 190px;
  right: -70px;
  top: -80px;
}

.shop-hero-pro.shop-hero-compact .shop-hero-title-row {
  align-items: center;
  gap: 13px;
}

.shop-hero-pro.shop-hero-compact .shop-hero-logo {
  width: 58px;
  height: 58px;
  border-radius: 17px;
}

.shop-hero-pro.shop-hero-compact .shop-hero-copy h1 {
  font-size: clamp(1.65rem, 3.8vw, 2.9rem);
  letter-spacing: -0.04em;
}

.shop-hero-pro.shop-hero-compact .shop-hero-strapline {
  margin: 10px 0 0;
  max-width: 58ch;
  font-size: 0.98rem;
  line-height: 1.45;
}

.shop-hero-pro.shop-hero-compact .shop-hero-actions {
  margin-top: 12px;
}

.shop-hero-pro.shop-hero-compact .shop-hero-card {
  align-self: stretch;
  gap: 11px;
  padding: 14px;
  border-radius: 18px;
  box-shadow: none;
}

.shop-hero-pro.shop-hero-compact .shop-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shop-hero-pro.shop-hero-compact .shop-summary-grid div {
  padding: 10px 11px;
  border-radius: 13px;
}

.shop-hero-pro.shop-hero-compact .shop-summary-grid span {
  font-size: 0.76rem;
}

.shop-hero-pro.shop-hero-compact .shop-summary-grid strong {
  font-size: 0.94rem;
}

.shop-catalogue-layout[data-shop-catalogue] {
  transition: opacity .16s ease, filter .16s ease;
}

.shop-catalogue-layout[data-shop-catalogue].is-updating {
  opacity: .66;
  filter: saturate(.88);
  pointer-events: none;
}

.shop-panel.shop-categories-panel {
  padding: 14px;
}

.shop-category-list {
  gap: 7px;
}

.shop-category-link {
  padding: 9px 11px;
  border-radius: 12px;
  line-height: 1.2;
}

.shop-product-area[data-shop-product-area] {
  min-height: 260px;
}

.shop-product-section + .shop-product-section {
  margin-top: 16px;
}

.shop-product-section-title {
  margin-bottom: 10px;
}

.shop-product-grid {
  gap: 12px;
}

.shop-product-card {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px 13px;
  align-items: start;
  padding: 13px;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
}

.shop-product-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09);
}

.shop-product-card .shop-product-image {
  grid-row: 1 / span 4;
  width: 112px;
  aspect-ratio: 1 / 1;
  border-radius: 15px;
}

.shop-product-card .shop-product-card-top,
.shop-product-card .shop-product-badges,
.shop-product-card .shop-product-actions,
.shop-product-card .shop-product-description {
  grid-column: 2;
}

.shop-product-card-top {
  gap: 9px;
  align-items: flex-start;
}

.shop-product-card h3 {
  font-size: 1.02rem;
  line-height: 1.18;
}

.shop-product-card-top p {
  margin-top: 3px;
  font-size: 0.82rem;
  line-height: 1.25;
}

.shop-product-card .price-tag {
  padding: 6px 9px;
  font-size: 0.85rem;
}

.shop-product-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
  font-size: 0.91rem;
  line-height: 1.38;
}

.shop-product-badges {
  gap: 6px;
}

.shop-product-badges .badge,
.shop-product-badges .chip {
  padding: 5px 8px;
  font-size: 0.76rem;
}

.shop-product-badges .shop-limit-chip {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
}

.shop-product-actions {
  margin-top: 1px;
  align-items: center;
}

.shop-product-actions .button {
  min-height: 40px;
  padding: 9px 13px;
}

.shop-product-actions .shop-text-link {
  font-size: 0.88rem;
}

/* Patch 18I: product card basket quantity and remove button */
.shop-product-basket-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  grid-column: 2;
  margin-top: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.08);
}

.shop-product-basket-state[hidden] {
  display: none !important;
}

.shop-product-basket-count {
  color: #0f766e;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
}

.shop-product-basket-state .button.mini {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 10px;
  font-size: 0.76rem;
  line-height: 1.1;
}

.shop-product-card.has-basket-items {
  border-color: rgba(20, 184, 166, 0.28);
}

@media (max-width: 980px) {
  .shop-hero-pro.shop-hero-compact {
    grid-template-columns: 1fr;
  }

  .shop-panel.shop-categories-panel {
    padding: 12px;
  }

  .shop-category-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .shop-category-link {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .shop-hero-pro.shop-hero-compact {
    padding: 14px;
    border-radius: 20px;
  }

  .shop-hero-pro.shop-hero-compact .shop-hero-title-row {
    flex-direction: row;
    align-items: center;
  }

  .shop-hero-pro.shop-hero-compact .shop-hero-logo {
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }

  .shop-hero-pro.shop-hero-compact .shop-hero-copy h1 {
    font-size: clamp(1.45rem, 8vw, 2.25rem);
  }

  .shop-hero-pro.shop-hero-compact .shop-hero-strapline {
    font-size: 0.93rem;
  }

  .shop-hero-pro.shop-hero-compact .shop-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-product-grid {
    gap: 10px;
  }

  .shop-product-card {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 11px;
    border-radius: 16px;
  }

  .shop-product-card .shop-product-image {
    width: 84px;
    border-radius: 13px;
  }

  .shop-product-card-top {
    flex-direction: row;
    align-items: flex-start;
  }

  .shop-product-card h3 {
    font-size: 0.98rem;
  }

  .shop-product-description {
    -webkit-line-clamp: 1;
    font-size: 0.86rem;
  }

  .shop-product-actions {
    flex-direction: row;
  }

  .shop-product-actions .button {
    min-height: 38px;
    padding: 8px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-catalogue-layout[data-shop-catalogue],
  .shop-product-card {
    transition: none;
  }
}

/* Patch 18A: two-column compact product cards on phone-width storefronts */
@media (max-width: 640px) {
  .shop-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .shop-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 8px;
    border-radius: 16px;
  }

  .shop-product-card .shop-product-image {
    grid-row: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }

  .shop-product-card .shop-product-image.placeholder span {
    font-size: 0.82rem;
  }

  .shop-product-card .shop-product-card-top,
  .shop-product-card .shop-product-badges,
  .shop-product-card .shop-product-actions,
  .shop-product-card .shop-product-description {
    grid-column: auto;
  }

  .shop-product-card-top {
    display: block;
    min-width: 0;
  }

  .shop-product-card-top > div {
    min-width: 0;
  }

  .shop-product-card h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.9rem;
    line-height: 1.16;
  }

  .shop-product-card-top p {
    overflow: hidden;
    margin-top: 3px;
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .shop-product-card .price-tag {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    padding: 5px 7px;
    font-size: 0.75rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  }

  .shop-product-description {
    -webkit-line-clamp: 2;
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .shop-product-description.muted {
    display: none;
  }

  .shop-product-badges {
    gap: 4px;
  }

  .shop-product-badges .badge,
  .shop-product-badges .chip {
    max-width: 100%;
    padding: 4px 6px;
    font-size: 0.68rem;
    line-height: 1.15;
  }

  .shop-product-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: auto;
  }

  .shop-product-actions .shop-text-link {
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .shop-product-actions .inline-form {
    width: 100%;
  }

  .shop-product-actions .button {
    width: 100%;
    min-height: 36px;
    padding: 7px 8px;
    border-radius: 12px;
    font-size: 0.86rem;
  }

  .shop-product-basket-state {
    width: 100%;
    padding: 6px 7px;
    gap: 6px;
  }

  .shop-product-basket-count {
    font-size: 0.72rem;
  }

  .shop-product-basket-state .button.mini {
    min-height: 28px;
    padding: 5px 7px;
    font-size: 0.7rem;
  }
}

@media (max-width: 340px) {
  .shop-product-grid {
    grid-template-columns: 1fr;
  }
}

/* Patch 18B: move storefront hero information into the sidebar */
.shop-info-panel {
  overflow: hidden;
}

.shop-sidebar-summary {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(188, 204, 220, 0.72);
}

.shop-sidebar-summary-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.shop-sidebar-logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.shop-sidebar-summary-head h3 {
  margin: 2px 0 5px;
  font-size: 1.02rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.shop-sidebar-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.shop-sidebar-status-row .badge,
.shop-sidebar-status-row .chip {
  padding: 4px 7px;
  font-size: 0.72rem;
  line-height: 1.1;
}

.shop-sidebar-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.shop-sidebar-summary-grid div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(188, 204, 220, 0.68);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.86);
}

.shop-sidebar-summary-grid span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-sidebar-summary-grid strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-sidebar-actions {
  display: grid;
  gap: 7px;
}

.shop-sidebar-actions .button {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  padding: 8px 11px;
  border-radius: 13px;
  font-size: 0.9rem;
}

.shop-sidebar-order-note {
  padding: 9px 10px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 13px;
  background: rgba(224, 242, 241, 0.58);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.35;
}

.shop-sidebar-order-note p {
  margin: 0;
}

.shop-sidebar-order-note p + p {
  margin-top: 5px;
}

.shop-sidebar-phone {
  margin: 0;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .shop-sidebar-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .shop-info-panel ul,
  .shop-ordering-info-text {
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .shop-sidebar-summary {
    gap: 9px;
    margin-top: 12px;
    padding-top: 12px;
  }

  .shop-sidebar-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-sidebar-order-note,
  .shop-sidebar-phone {
    font-size: 0.78rem;
  }
}

.shop-sidebar-logo.has-image {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(188, 204, 220, 0.9);
  color: transparent;
}

.shop-sidebar-logo.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-sizing: border-box;
  padding: 4px;
}

/* Patch 18C: three-column product cards on roomy desktop storefronts */
@media (min-width: 1180px) {
  .shop-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .shop-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 11px;
    border-radius: 18px;
  }

  .shop-product-card .shop-product-image {
    grid-row: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
  }

  .shop-product-card .shop-product-card-top,
  .shop-product-card .shop-product-badges,
  .shop-product-card .shop-product-actions,
  .shop-product-card .shop-product-description {
    grid-column: auto;
  }

  .shop-product-card-top {
    display: block;
    min-width: 0;
  }

  .shop-product-card-top > div {
    min-width: 0;
  }

  .shop-product-card h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.98rem;
    line-height: 1.16;
  }

  .shop-product-card-top p {
    overflow: hidden;
    margin-top: 4px;
    font-size: 0.78rem;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .shop-product-card .price-tag {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    padding: 5px 8px;
    font-size: 0.8rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  }

  .shop-product-description {
    -webkit-line-clamp: 2;
    font-size: 0.84rem;
    line-height: 1.28;
  }

  .shop-product-description.muted {
    display: none;
  }

  .shop-product-badges {
    gap: 5px;
  }

  .shop-product-badges .badge,
  .shop-product-badges .chip {
    max-width: 100%;
    padding: 4px 7px;
    font-size: 0.72rem;
    line-height: 1.15;
  }

  .shop-product-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    margin-top: auto;
  }

  .shop-product-actions .shop-text-link {
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .shop-product-actions .inline-form {
    width: 100%;
  }

  .shop-product-actions .button {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 13px;
    font-size: 0.9rem;
  }
}

/* Patch 18E: compact expandable option previews on storefront cards */
.shop-product-option-preview-list {
  display: grid;
  gap: 6px;
}

.shop-product-card .shop-product-option-preview-list {
  grid-column: 2;
}

.shop-product-option-preview {
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.86);
  overflow: hidden;
}

.shop-product-option-preview summary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 28px 7px 9px;
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--text);
}

.shop-product-option-preview summary::-webkit-details-marker {
  display: none;
}

.shop-product-option-preview summary::after {
  content: '›';
  position: absolute;
  top: 50%;
  right: 10px;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 900;
  transform: translateY(-50%);
  transition: transform .14s ease;
}

.shop-product-option-preview[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.shop-product-option-preview summary small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-transform: none;
}

.shop-product-option-preview summary small.has-selection {
  color: #075985;
}

.shop-product-option-preview-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 9px 8px;
}

.shop-product-option-preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(224, 242, 254, 0.82);
  color: #075985;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
}

.shop-product-option-preview-chip em {
  color: #0f172a;
  font-style: normal;
}

.shop-product-option-preview-chip.is-muted {
  background: rgba(226, 232, 240, 0.85);
  color: var(--muted);
}

@media (max-width: 640px), (min-width: 1180px) {
  .shop-product-card .shop-product-option-preview-list {
    grid-column: auto;
  }

  .shop-product-option-preview-list {
    gap: 5px;
  }

  .shop-product-option-preview summary {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 6px 24px 6px 8px;
    font-size: 0.76rem;
  }

  .shop-product-option-preview summary small {
    font-size: 0.62rem;
  }

  .shop-product-option-preview-options {
    gap: 4px;
    padding: 0 8px 7px;
  }

  .shop-product-option-preview-chip {
    padding: 3px 6px;
    font-size: 0.66rem;
  }
}

/* Patch 18F: selectable option previews on storefront product cards */
.shop-product-config-form {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.shop-product-card .shop-product-config-form {
  grid-column: 2;
}

.shop-product-option-preview-options.is-selectable {
  display: grid;
  gap: 5px;
  padding: 0 8px 8px;
}

.shop-product-option-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(188, 204, 220, 0.82);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
}

.shop-product-option-choice:hover {
  border-color: rgba(14, 116, 144, 0.28);
  background: rgba(240, 249, 255, 0.92);
}

.shop-product-option-choice input {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
}

.shop-product-option-choice span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-product-option-choice em {
  color: #0f172a;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.shop-product-option-choice:has(input:checked) {
  border-color: rgba(14, 116, 144, 0.38);
  background: rgba(224, 242, 254, 0.92);
  box-shadow: inset 0 0 0 1px rgba(14, 116, 144, 0.12);
}

.shop-product-option-preview.is-incomplete {
  border-color: rgba(245, 158, 11, 0.65);
}

.shop-product-option-preview.is-over-limit {
  border-color: rgba(220, 38, 38, 0.65);
}

.shop-product-option-empty {
  margin: 0;
  padding: 0 9px 8px;
  font-size: 0.76rem;
}

.shop-product-config-form .shop-product-actions {
  margin-top: 0;
}

.shop-product-config-form [data-option-add-button]:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

@media (max-width: 640px), (min-width: 1180px) {
  .shop-product-card .shop-product-config-form {
    grid-column: auto;
  }

  .shop-product-config-form {
    gap: 6px;
  }

  .shop-product-option-choice {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    padding: 5px 6px;
    font-size: 0.7rem;
  }

  .shop-product-option-choice em {
    grid-column: 2;
    margin-top: -3px;
    color: var(--muted);
    font-size: 0.66rem;
  }
}

/* Patch 18J: put decrement control next to Add, not inside basket count */
.shop-product-action-controls {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.shop-product-action-controls .inline-form {
  display: flex;
}

.shop-product-action-controls .button.primary,
.shop-product-action-controls .inline-form .button.primary {
  flex: 1 1 auto;
}

.shop-product-minus-button {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  padding-inline: 18px;
  font-weight: 950;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 8px 18px rgba(23, 114, 179, 0.18);
}

.shop-product-minus-button:hover,
.shop-product-minus-button:focus-visible {
  background: #125985;
  border-color: #125985;
  color: #fff;
}

.shop-product-minus-button[hidden],
.shop-product-basket-remove-form {
  display: none !important;
}

.shop-product-basket-state {
  justify-content: flex-start;
}

@media (max-width: 980px) {
  .shop-product-action-controls {
    width: 100%;
  }

  .shop-product-action-controls .inline-form {
    flex: 1 1 auto;
    width: auto;
  }

  .shop-product-action-controls .button.primary,
  .shop-product-action-controls .inline-form .button.primary {
    width: 100%;
  }

  .shop-product-action-controls .shop-product-minus-button {
    width: auto;
    min-width: 0;
    padding-inline: 18px;
  }
}

/* Patch 18M: keep basket count above controls and make -1 visibly primary */
.shop-product-card .shop-product-basket-state {
  grid-column: 2;
  align-self: start;
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 2px;
}

.shop-product-config-form > .shop-product-basket-state {
  grid-column: auto;
}

.shop-product-action-controls .button.shop-product-minus-button,
.shop-product-action-controls button.shop-product-minus-button {
  flex: 0 0 auto;
  min-width: 54px;
  min-height: 40px;
  padding: 9px 13px;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-weight: 950;
  opacity: 1;
}

.shop-product-action-controls .button.shop-product-minus-button:hover,
.shop-product-action-controls button.shop-product-minus-button:hover,
.shop-product-action-controls .button.shop-product-minus-button:focus-visible,
.shop-product-action-controls button.shop-product-minus-button:focus-visible {
  background: #125985 !important;
  border-color: #125985 !important;
  color: #fff !important;
}

@media (max-width: 640px), (min-width: 1180px) {
  .shop-product-card .shop-product-basket-state {
    grid-column: auto;
    width: fit-content;
    margin-top: 0;
  }
}

/* Patch 26D: make shop branding primary on active custom domains */
.custom-domain-shop-nav {
  gap: 16px;
}

.custom-domain-primary-shop-brand {
  flex: 1 1 320px;
  max-width: 520px;
}

.custom-domain-primary-shop-brand strong {
  max-width: 360px;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
}

.custom-domain-primary-shop-brand small {
  color: #407233;
  font-size: 0.82rem;
}

.shop-brand-shop-logo {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: #e9f6e4;
  color: #2f7d32;
  box-shadow: inset 0 0 0 1px rgba(47, 125, 50, 0.12);
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.shop-brand-shop-logo.has-image {
  background: #fff;
}

.shop-brand-shop-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.shop-nav-platform-context {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 9px 5px 5px;
  border: 1px solid rgba(188, 204, 220, 0.68);
  border-radius: 999px;
  background: rgba(248, 251, 255, 0.76);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.shop-nav-platform-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  object-fit: contain;
}

.shop-nav-platform-context small,
.shop-nav-platform-context strong {
  display: block;
  line-height: 1.05;
}

.shop-nav-platform-context small {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.shop-nav-platform-context strong {
  margin-top: 1px;
  color: var(--text);
  font-size: 0.78rem;
}

@media (max-width: 760px) {
  .custom-domain-shop-nav {
    gap: 10px;
  }

  .custom-domain-primary-shop-brand {
    flex: 0 1 auto;
    max-width: none;
    width: 100%;
  }

  .custom-domain-primary-shop-brand strong {
    max-width: min(420px, 72vw);
    font-size: 1.16rem;
  }

  .shop-brand-shop-logo {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .shop-nav-platform-context {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

/* Patch 26F: shop-branded support page on custom/shop-context URLs */
.shop-branded-support-page .support-hero {
  background:
    radial-gradient(circle at 88% 0%, rgba(93, 173, 79, 0.18), transparent 16rem),
    rgba(255, 255, 255, 0.96);
}

.shop-branded-support-page .support-hero h1 {
  max-width: 16ch;
}

.shop-branded-support-page .support-form-card input[readonly] {
  background: rgba(241, 245, 249, 0.9);
  color: #334155;
  cursor: default;
}

/* Patch 26H: keep storefront product basket state and add/remove controls inside cards */
.shop-product-card[data-shop-product-card] .shop-product-basket-state {
  grid-column: 1 / -1;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 0 2px;
  justify-content: center;
}

.shop-product-card[data-shop-product-card] .shop-product-basket-count {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.shop-product-card[data-shop-product-card] .shop-product-config-form > .shop-product-basket-state {
  grid-column: 1 / -1;
}

.shop-product-card[data-shop-product-card] .shop-product-actions {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: 7px;
}

.shop-product-card[data-shop-product-card] .shop-product-actions .shop-text-link {
  align-self: flex-start;
}

.shop-product-card[data-shop-product-card] .shop-product-action-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 8px;
}

.shop-product-card[data-shop-product-card] .shop-product-action-controls .inline-form {
  display: flex;
  width: 100%;
  min-width: 0;
}

.shop-product-card[data-shop-product-card] .shop-product-action-controls .button.primary,
.shop-product-card[data-shop-product-card] .shop-product-action-controls .inline-form .button.primary {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.shop-product-card[data-shop-product-card] .shop-product-action-controls .shop-product-minus-button {
  width: auto;
  min-width: 54px;
  max-width: 70px;
  padding-inline: 12px;
}

/* Patch 26I: keep configurable product options full-width and above basket controls */
.shop-product-card[data-shop-product-card] .shop-product-config-form {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.shop-product-card[data-shop-product-card] .shop-product-config-form > .shop-product-option-preview-list {
  grid-column: 1 / -1;
  order: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.shop-product-card[data-shop-product-card] .shop-product-config-form > .shop-product-basket-state {
  order: 2;
}

.shop-product-card[data-shop-product-card] .shop-product-config-form > .shop-product-actions {
  order: 3;
}

.shop-product-card[data-shop-product-card] .shop-product-option-preview {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.shop-product-card[data-shop-product-card] .shop-product-option-preview summary {
  text-align: left;
}

.shop-product-card[data-shop-product-card] .shop-product-option-preview-options.is-selectable {
  width: 100%;
  box-sizing: border-box;
}

/* Patch 27: cart UX and validation polish */
.shop-cart-line-polished {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(220px, auto);
  align-items: center;
}

.shop-cart-options {
  display: grid;
  gap: 6px;
  margin: 8px 0 6px;
}

.shop-cart-options div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}

.shop-cart-options dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.shop-cart-options dd {
  margin: 0;
  color: var(--text);
  font-weight: 850;
}

.shop-cart-line-controls {
  display: grid;
  gap: 10px;
  justify-items: end;
  align-content: center;
}

.shop-cart-line-controls .shop-cart-line-total {
  display: grid;
  gap: 2px;
  text-align: right;
}

.shop-cart-line-controls .shop-cart-line-total span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shop-cart-line-controls .shop-cart-line-total strong {
  color: var(--text);
  font-size: 1.15rem;
}

.shop-qty-stepper {
  display: inline-grid;
  grid-template-columns: 44px 72px 44px;
  gap: 8px;
  align-items: end;
}

.shop-qty-stepper .shop-qty-control {
  width: auto;
  gap: 4px;
}

.shop-qty-stepper .shop-qty-control span {
  text-align: center;
  font-size: 0.76rem;
}

.shop-qty-stepper input {
  min-height: 42px;
}

.shop-qty-button {
  min-width: 44px;
  min-height: 42px;
  padding: 8px 10px;
  line-height: 1;
  font-size: 1.2rem;
}

.shop-remove-line-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--danger);
  padding: 0;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  text-decoration: none;
}

.shop-remove-line-button:hover {
  text-decoration: underline;
}

.shop-cart-form-actions {
  justify-content: space-between;
  margin-top: 4px;
}

.shop-cart-check {
  display: grid;
  gap: 8px;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 18px;
  border: 1px solid rgba(188, 204, 220, 0.85);
  background: linear-gradient(135deg, #f8fbff, #ffffff);
}

.shop-cart-check.is-ready {
  border-color: rgba(22, 163, 74, 0.28);
  background: linear-gradient(135deg, #ecfdf3, #ffffff);
}

.shop-cart-check.has-warnings {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.shop-cart-check h3,
.shop-cart-check p,
.shop-cart-check ul {
  margin: 0;
}

.shop-cart-check ul {
  padding-left: 1.1rem;
  color: var(--text);
  line-height: 1.5;
}

.shop-cart-check-notes {
  color: var(--muted) !important;
}

.shop-summary-aside .shop-total-list + .button.full-width {
  margin-top: 24px;
}

.shop-summary-aside .button.full-width + .button.full-width {
  margin-top: 12px;
}

.shop-summary-continue {
  margin-top: 10px;
}

.shop-mobile-checkout-bar {
  display: none;
}

@media (max-width: 760px) {
  .shop-cart-line-polished {
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
  }

  .shop-cart-line-polished .shop-cart-line-controls {
    grid-column: 1 / -1;
    justify-items: stretch;
    width: 100%;
  }

  .shop-cart-line-controls .shop-cart-line-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .shop-qty-stepper {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    width: 100%;
  }

  .shop-cart-form-actions {
    align-items: stretch;
  }

  .shop-cart-form-actions .button {
    width: 100%;
  }

  .shop-mobile-checkout-bar {
    position: sticky;
    bottom: 10px;
    z-index: 40;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
    padding: 12px;
    border: 1px solid rgba(188, 204, 220, 0.9);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(12px);
  }

  .shop-mobile-checkout-bar span,
  .shop-mobile-checkout-bar strong {
    display: block;
  }

  .shop-mobile-checkout-bar span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .shop-mobile-checkout-bar strong {
    color: var(--text);
    font-size: 1.08rem;
  }

  .shop-mobile-checkout-bar .button {
    margin-top: 0;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  .shop-cart-line-polished {
    grid-template-columns: 1fr;
  }

  .shop-cart-line-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Patch 27A: reserve product basket badge space to prevent card control jump */
.shop-product-card[data-shop-product-card] .shop-product-basket-state[hidden] {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

.shop-product-card[data-shop-product-card] .shop-product-basket-state[hidden] .shop-product-basket-count {
  visibility: hidden;
}

/* Patch 29: order adjustments */
.order-adjustment-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.order-adjustment-form {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border, #d8e3ef);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.65);
}

.order-adjustment-form summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--ink, #08233f);
}

.order-adjustment-form form {
    margin-top: 12px;
}

.form-grid.compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.check-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0;
}

.check-row input[type="checkbox"] {
    margin-top: 4px;
    width: auto;
}

/* Patch 29A: make fully adjusted/refunded item lines obvious in the client pack list */
.client-packing-item.is-refunded {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.92), #ffffff);
  border-color: rgba(34, 197, 94, 0.34);
}

.client-packing-item.is-refunded .client-item-qty {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
}

/* Patch 32: storefront current order sidebar card */
.shop-current-order-panel {
  display: grid;
  gap: 12px;
}

.shop-current-order-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.shop-current-order-head h2 {
  margin: 0;
}

.shop-current-order-status-card {
  display: grid;
  gap: 8px;
}

.shop-current-order-step {
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  padding: 10px 12px;
}

.shop-current-order-step span:not(.shop-progress-dot) {
  display: block;
  color: #92400e;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shop-current-order-step strong {
  display: block;
  margin-top: 2px;
  font-size: 1rem;
  line-height: 1.2;
}

.shop-current-order-note {
  margin: 0;
}

.shop-current-order-button {
  width: 100%;
}

/* Patch 34E: make item edit image previews match real customer-facing frames */
.item-image-editor-with-previews {
  grid-template-columns: 260px minmax(0, 1fr);
}

.item-image-preview-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}

.product-image-preview-sample {
  display: grid;
  gap: 7px;
  justify-items: start;
}

.product-image-preview-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.product-image-cart-preview {
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
}

.product-image-storefront-preview {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

.product-snapshot-image {
  aspect-ratio: 16 / 9;
}

@media (max-width: 720px) {
  .item-image-editor-with-previews {
    grid-template-columns: 1fr;
  }

  .product-image-cart-preview {
    width: 64px;
    height: 64px;
    aspect-ratio: 1 / 1;
  }

  .product-image-storefront-preview {
    width: 100%;
  }
}

/* Patch 34: product image fit and positioning controls */
.image-fit-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.image-fit-controls label {
  min-width: 0;
}

.item-image-preview img,
.catalogue-product-image img,
.shop-product-image img,
.shop-item-main-image img,
.shop-cart-line-image img {
  background: #f8fbff;
}

@media (max-width: 760px) {
  .image-fit-controls {
    grid-template-columns: 1fr;
  }
}

/* Patch 34F/34G3: make product image previews use real customer-facing frames and explicit live styles */
.product-image-preview-frame {
  --product-preview-fit: cover;
  --product-preview-position: center center;
  --product-preview-scale: 1;
}

.product-image-preview-frame img,
.product-image-preview-frame [data-image-fit-preview-img] {
  object-fit: var(--product-preview-fit, cover) !important;
  object-position: var(--product-preview-position, center center) !important;
  transform: scale(var(--product-preview-scale, 1)) !important;
  transform-origin: var(--product-preview-position, center center) !important;
  will-change: transform, object-position;
}

.product-editor-shop-card-preview.shop-product-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: stretch;
  width: min(220px, 100%);
  min-width: 0;
  padding: 8px;
  border-radius: 16px;
  transform: none;
}

.product-editor-shop-card-preview.shop-product-card:hover {
  transform: none;
}

.product-editor-shop-card-preview.shop-product-card .shop-product-image.product-image-storefront-preview {
  grid-row: auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}

.product-editor-shop-card-preview.shop-product-card .shop-product-card-top,
.product-editor-shop-card-preview.shop-product-card .product-editor-shop-card-preview-copy {
  grid-column: auto;
  align-self: stretch;
  display: block;
}

.product-editor-shop-card-preview-copy h3,
.product-editor-shop-card-preview-copy p {
  margin: 0;
}

.product-editor-shop-card-preview-copy p {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 850;
}

.product-preview-card .product-snapshot-image {
  width: 112px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 15px;
}

/* Patch 34G: draggable product image positioning manager */
.product-image-position-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 18px;
  background: #f8fbff;
}

.product-image-position-panel strong {
  display: block;
  margin-bottom: 4px;
}

.product-image-position-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-image-zoom-actions {
  padding-top: 2px;
}

.product-image-position-readout {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.product-image-preview-frame[data-image-position-drag-frame] {
  position: relative;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.product-image-preview-frame[data-image-position-drag-frame]:not(.placeholder)::after {
  content: "Drag to position";
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.76);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}

.product-image-preview-frame[data-image-position-drag-frame]:not(.placeholder):hover::after,
.product-image-preview-frame[data-image-position-drag-frame].is-dragging-image::after {
  opacity: 1;
  transform: translateY(0);
}

.product-image-preview-frame[data-image-position-drag-frame].is-dragging-image {
  cursor: grabbing;
  outline: 3px solid rgba(24, 111, 175, 0.24);
  outline-offset: 3px;
}

.product-image-preview-frame[data-image-position-drag-frame] img {
  pointer-events: none;
}

@media (max-width: 760px) {
  .product-image-position-actions .button {
    flex: 1 1 auto;
  }
}

/* Patch 35A: client interface simplification and onboarding polish */
.client-today-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.client-today-action {
    display: grid;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--border, #d8e0ea);
    border-radius: 18px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.client-today-action:hover,
.client-today-action:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
    border-color: rgba(37, 99, 235, 0.35);
}

.client-today-action span {
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #64748b;
}

.client-today-action strong {
    font-size: 2rem;
    line-height: 1;
}

.client-today-action small {
    color: #64748b;
    font-weight: 650;
}

.client-today-action.is-new { border-left: 5px solid #f59e0b; }
.client-today-action.is-preparing { border-left: 5px solid #3b82f6; }
.client-today-action.is-ready { border-left: 5px solid #22c55e; }
.client-today-action.is-deliveries { border-left: 5px solid #8b5cf6; }
.client-today-action.is-problems { border-left: 5px solid #ef4444; }

.client-setup-card-head,
.client-form-subhead {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.client-setup-card-head h2,
.client-form-subhead h3 {
    margin: 0;
}

.client-setup-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.client-setup-step {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.client-setup-step > span {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-weight: 900;
    flex: 0 0 auto;
}

.client-setup-step.is-done > span {
    background: #dcfce7;
    color: #166534;
}

.client-setup-step strong,
.client-setup-step small {
    display: block;
}

.client-setup-step small {
    color: #64748b;
    margin-top: 2px;
}

.client-form-subhead {
    display: block;
    padding: 16px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    margin-top: 8px;
}

.client-form-subhead p {
    margin: 4px 0 0;
    color: #64748b;
}


.client-operating-hours {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid #dbe5f0;
    border-radius: 16px;
    background: #f8fafc;
}

.client-weekly-hours {
    display: block;
}

.client-weekly-hours .form-help {
    margin: 0 0 12px;
}

.client-weekly-hours-grid {
    display: grid;
    gap: 10px;
}

.client-weekly-hours-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(130px, 160px) minmax(130px, 160px) minmax(100px, auto);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}

.client-weekly-hours-row > strong {
    color: #0f172a;
}

.client-weekly-hours-row label:not(.checkbox-inline) {
    display: grid;
    gap: 4px;
    margin: 0;
    font-weight: 700;
    color: #334155;
}

.client-weekly-hours-row label:not(.checkbox-inline) span {
    font-size: 0.78rem;
    color: #64748b;
}

.client-weekly-hours-row input[type="time"] {
    width: 100%;
    min-width: 0;
}

.client-weekly-hours-row.is-closed {
    background: #f8fafc;
}

.client-weekly-hours-row.is-closed > strong,
.client-weekly-hours-row.is-closed label:not(.checkbox-inline) span {
    color: #94a3b8;
}

.client-operating-hours legend {
    float: left;
    width: auto;
    margin: 0 12px 0 0;
    padding: 0;
    font-weight: 850;
    color: #0f172a;
}

.client-operating-hours-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.client-operating-hours-fields label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #334155;
}

.client-operating-hours-fields input[type="time"] {
    width: 9.5rem;
    min-width: 9.5rem;
}

@media (max-width: 640px) {
    .client-operating-hours {
        display: block;
    }

    .client-operating-hours legend {
        float: none;
        display: block;
        margin: 0 0 10px;
    }

    .client-operating-hours-fields {
        align-items: stretch;
    }

    .client-operating-hours-fields label {
        flex: 1 1 130px;
        justify-content: space-between;
    }

    .client-weekly-hours-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.client-advanced-panel {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fafc;
    padding: 0;
}

.client-advanced-panel > summary {
    cursor: pointer;
    list-style: none;
    padding: 16px;
    font-weight: 850;
}

.client-advanced-panel > summary::-webkit-details-marker {
    display: none;
}

.client-advanced-panel > summary::after {
    content: 'Show';
    float: right;
    font-size: .78rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.client-advanced-panel[open] > summary::after {
    content: 'Hide';
}

.client-advanced-panel > .form-grid,
.client-advanced-panel > .stats-grid,
.client-inline-advanced > .form-grid {
    padding: 0 16px 16px;
}

.client-inline-advanced {
    background: #fff;
}

.client-inline-advanced > summary {
    padding: 12px 14px;
}

.editor-section.client-advanced-panel {
    margin: 0;
}

.editor-section.client-advanced-panel > summary.editor-section-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.editor-section.client-advanced-panel > summary.editor-section-title::after {
    margin-left: auto;
}

.catalogue-product-meta-details {
    border-top: 1px solid #eef2f7;
    padding-top: 8px;
}

.catalogue-product-meta-details summary {
    cursor: pointer;
    color: #475569;
    font-weight: 800;
    font-size: .88rem;
}

.catalogue-product-meta-details .catalogue-product-meta {
    margin-top: 8px;
}

.client-payment-setup-card .client-stripe-details {
    background: #fff;
}

.client-payment-setup-disclosure {
    padding: 0;
}

.client-payment-setup-disclosure > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 18px;
}

.client-payment-setup-disclosure > summary::-webkit-details-marker {
    display: none;
}

.client-payment-summary > span:first-child {
    display: grid;
    gap: 3px;
}

.client-payment-summary strong {
    font-size: 1.05rem;
}

.client-payment-summary small {
    color: #64748b;
    font-weight: 650;
}

.client-payment-summary::after {
    content: 'Show';
    color: #64748b;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-left: auto;
}

.client-payment-setup-disclosure[open] .client-payment-summary::after {
    content: 'Hide';
}

.client-payment-setup-body {
    border-top: 1px solid #e2e8f0;
    padding: 18px;
}

.client-page-actions .button,
.catalogue-status-actions button,
.catalogue-card-actions .button,
.client-row-actions button,
.client-row-actions .button {
    min-height: 40px;
}

@media (max-width: 960px) {
    .client-today-actions,
    .client-setup-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .client-today-actions,
    .client-setup-steps {
        grid-template-columns: 1fr;
    }

    .client-today-action {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .client-today-action small {
        grid-column: 1 / -1;
    }
}

.client-settings-advanced > .settings-check-grid {
    margin: 0 16px 16px;
}

/* Patch 35B: make rider problem reports visible on client order screens */
.client-order-row.has-problem td,
.client-orders-table tr.has-problem td {
    background: #fff7f7;
}

.client-order-row.has-problem td:first-child,
.client-orders-table tr.has-problem td:first-child {
    box-shadow: inset 5px 0 0 #ef4444;
}

.client-order-row.has-problem:hover td,
.client-orders-table tr.has-problem:hover td {
    background: #fff1f2;
}

.client-problem-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: 12px;
    background: #fff1f2;
    color: #991b1b;
    text-decoration: none;
    font-size: .82rem;
    line-height: 1.2;
}

.client-problem-link strong {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .68rem;
}

.client-problem-link span {
    font-weight: 800;
}

.client-problem-link:hover,
.client-problem-link:focus-visible {
    border-color: rgba(185, 28, 28, 0.55);
    background: #ffe4e6;
    color: #7f1d1d;
}

.client-problem-link-table {
    margin: 0 0 6px;
}

.client-problem-meta {
    display: block;
    margin-top: 5px;
    color: #9f1239;
    font-size: .78rem;
    font-weight: 700;
}

.client-problem-badge {
    font-weight: 800;
}

.client-today-action.is-problems.has-problems {
    border-color: rgba(239, 68, 68, 0.4);
    background: #fff7f7;
}

.client-today-action.is-problems.has-problems strong {
    color: #b91c1c;
}

/* Patch 35C: declutter the client Orders screen */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.client-orders-quickbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 1px;
    margin: -2px 0 0;
}

.client-dashboard-tools {
    position: relative;
    z-index: 5;
}

.client-dashboard-tools > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid rgba(188, 204, 220, 0.84);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #475569;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06);
}

.client-dashboard-tools > summary::-webkit-details-marker {
    display: none;
}

.client-dashboard-tools > summary::after {
    content: '▾';
    margin-left: 8px;
    font-size: 0.8rem;
    color: #64748b;
}

.client-dashboard-tools[open] > summary::after {
    content: '▴';
}

.client-dashboard-tools-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    gap: 8px;
    min-width: 220px;
    padding: 10px;
    border: 1px solid rgba(188, 204, 220, 0.84);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.client-dashboard-tools-menu .button {
    justify-content: center;
    width: 100%;
}

.client-today-actions-first {
    margin-top: 0;
    margin-bottom: 12px;
}

.client-rider-availability-card.client-rider-availability-collapsed {
    display: block;
    gap: 0;
    margin: 0 0 10px;
    padding: 0;
    overflow: hidden;
}

.client-rider-availability-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    cursor: pointer;
}

.client-rider-availability-summary::-webkit-details-marker {
    display: none;
}

.client-rider-availability-summary-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.client-rider-availability-summary-text strong {
    color: var(--text);
    font-size: 1.02rem;
    letter-spacing: -0.02em;
}

.client-rider-availability-summary-text small {
    color: #64748b;
    font-weight: 750;
}

.client-rider-availability-summary .client-rider-availability-status {
    align-items: center;
    gap: 8px;
}

.client-details-chevron {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(188, 204, 220, 0.8);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.client-rider-availability-collapsed[open] .client-details-chevron {
    background: #fff;
    color: var(--text);
}

.client-rider-availability-details {
    display: grid;
    gap: 12px;
    padding: 0 14px 14px;
}

.client-rider-availability-note {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
}

@media (max-width: 720px) {
    .client-orders-quickbar {
        justify-content: flex-start;
    }

    .client-dashboard-tools-menu {
        left: 0;
        right: auto;
    }

    .client-rider-availability-summary {
        display: grid;
        align-items: start;
    }

    .client-rider-availability-summary .client-rider-availability-status {
        justify-content: flex-start;
    }
}

/* Patch 35D: put compact Riders bar and Tools menu on one row */
.client-orders-utility-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 0 0 10px;
}

.client-orders-utility-row .client-rider-availability-card.client-rider-availability-collapsed {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    border-radius: 18px;
}

.client-orders-utility-row .client-orders-quickbar {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    margin: 0;
}

.client-orders-utility-row .client-dashboard-tools {
    display: flex;
    align-items: stretch;
}

.client-orders-utility-row .client-dashboard-tools > summary {
    min-height: 44px;
    height: 100%;
    padding: 8px 18px;
    border-radius: 18px;
    white-space: nowrap;
}

.client-orders-utility-row .client-rider-availability-summary {
    min-height: 44px;
    padding: 8px 12px;
    gap: 10px;
}

.client-orders-utility-row .client-rider-availability-summary-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.client-orders-utility-row .client-rider-availability-summary-text .client-section-eyebrow {
    flex: 0 0 auto;
}

.client-orders-utility-row .client-rider-availability-summary-text strong,
.client-orders-utility-row .client-rider-availability-summary-text small {
    white-space: nowrap;
}

.client-orders-utility-row .client-rider-availability-summary-text small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-orders-utility-row .client-rider-availability-summary .client-rider-availability-status {
    flex: 0 0 auto;
    gap: 6px;
}

.client-orders-utility-row .client-details-chevron {
    min-height: 26px;
    padding: 4px 8px;
}

@media (max-width: 780px) {
    .client-orders-utility-row {
        display: grid;
        gap: 8px;
    }

    .client-orders-utility-row .client-orders-quickbar {
        justify-content: flex-start;
    }

    .client-orders-utility-row .client-dashboard-tools > summary {
        min-height: 40px;
    }

    .client-orders-utility-row .client-rider-availability-summary {
        display: grid;
        align-items: start;
    }

    .client-orders-utility-row .client-rider-availability-summary-text {
        display: grid;
        gap: 2px;
    }

    .client-orders-utility-row .client-rider-availability-summary-text strong,
    .client-orders-utility-row .client-rider-availability-summary-text small {
        white-space: normal;
    }
}

/* Patch 35E: keep Tools from stretching when Riders expands */
.client-orders-utility-row {
    align-items: flex-start;
}

.client-orders-utility-row .client-orders-quickbar {
    align-self: flex-start;
    align-items: flex-start;
}

.client-orders-utility-row .client-dashboard-tools {
    align-items: flex-start;
}

.client-orders-utility-row .client-dashboard-tools > summary {
    height: auto;
}


/* Patch 35I: compact client settings panels */
.client-settings-basic-card {
    width: 100%;
}

.client-settings-disclosure {
    padding: 0;
}

.client-settings-disclosure > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 18px;
}

.client-settings-disclosure > summary::-webkit-details-marker {
    display: none;
}

.client-settings-disclosure-summary > span:first-child {
    display: grid;
    gap: 3px;
}

.client-settings-disclosure-summary strong {
    font-size: 1.05rem;
}

.client-settings-disclosure-summary small {
    color: #64748b;
    font-weight: 650;
}

.client-settings-disclosure-summary::after {
    content: 'Show';
    color: #64748b;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-left: auto;
}

.client-settings-disclosure[open] .client-settings-disclosure-summary::after {
    content: 'Hide';
}

.client-settings-disclosure-body {
    border-top: 1px solid #e2e8f0;
    padding: 18px;
}

@media (max-width: 640px) {
    .client-settings-disclosure > summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .client-settings-disclosure-summary::after {
        margin-left: 0;
    }
}

/* Patch 35J: platform-controlled delivery fees note */
.client-settings-note {
    border: 1px solid #dbeafe;
    background: #eff6ff;
    border-radius: 16px;
    padding: 12px 14px;
    display: grid;
    gap: 4px;
    color: #1e3a8a;
}

.client-settings-note strong {
    font-size: .92rem;
}

.client-settings-note span {
    color: #475569;
    font-size: .88rem;
    line-height: 1.35;
}

/* Patch 35R: cart empty-state and summary polish */
.shop-empty-basket {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 20px;
}

.shop-empty-basket-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.12), rgba(22, 163, 74, 0.12));
  border: 1px solid rgba(14, 116, 144, 0.16);
  font-size: 2rem;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.shop-empty-basket h2,
.shop-empty-basket p {
  margin: 0;
}

.shop-empty-basket p {
  max-width: 560px;
}

.shop-empty-basket .button.shop-empty-basket-action {
  margin-top: 8px;
}

.shop-empty-summary {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  padding: 28px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.92), rgba(255, 255, 255, 0.96));
  border: 1px dashed rgba(71, 85, 105, 0.26);
}

.shop-empty-summary-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: #eaf5fb;
  color: var(--primary);
  font-weight: 950;
  font-size: 1.35rem;
}

.shop-empty-summary h3,
.shop-empty-summary p {
  margin: 0;
}

.shop-empty-summary p {
  color: var(--muted);
  line-height: 1.45;
}

.shop-total-list-polished {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.72);
}

.shop-total-list-polished div {
  padding-inline: 12px;
}

.shop-total-list-polished span small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.shop-total-list-polished .shop-total-grand {
  margin-top: 0;
  padding: 18px 12px;
  background: linear-gradient(135deg, rgba(13, 110, 168, 0.10), rgba(22, 163, 74, 0.10));
  border-top: 1px solid rgba(13, 110, 168, 0.16);
  font-size: 1.18rem;
}

.shop-total-list-polished .shop-total-grand span,
.shop-total-list-polished .shop-total-grand strong {
  color: var(--ink);
}

.shop-summary-aside .shop-total-list-polished + .button.full-width,
.shop-summary-aside .shop-total-list-polished + .shop-summary-checkout {
  margin-top: 22px;
}

.shop-checkout-confidence {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.shop-checkout-confidence + .button.full-width {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .shop-empty-basket {
    padding: 36px 14px;
  }

  .shop-empty-summary {
    padding: 22px 14px;
  }
}


/* Patch 35S: give the cart summary actions breathing room. */
.shop-summary-actions {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding-bottom: 8px;
}

.shop-summary-actions .button.full-width,
.shop-summary-actions .shop-summary-checkout,
.shop-summary-actions .shop-summary-continue {
  margin-top: 0;
}

.shop-summary-actions .shop-summary-checkout {
  justify-self: start;
  width: auto;
  min-width: 132px;
}

.shop-summary-actions .shop-summary-continue {
  justify-self: start;
  width: auto;
  min-width: 190px;
}

.shop-summary-actions .shop-checkout-confidence {
  max-width: 30rem;
  margin: 0;
}

@media (max-width: 720px) {
  .shop-summary-actions .shop-summary-checkout,
  .shop-summary-actions .shop-summary-continue {
    justify-self: stretch;
    width: 100%;
  }
}

/* AJAX cart updates - May 2026 */
[data-cart-page] {
  transition: opacity .16s ease, filter .16s ease, transform .16s ease;
}

[data-cart-page].is-updating {
  opacity: .68;
  filter: saturate(.9);
  pointer-events: none;
  transform: translateY(1px);
}

/* Patch Chargeback 02: show card disputes directly in the client live order queue */
.client-order-row.has-dispute td,
.client-orders-table tr.has-dispute td {
    background: #fff7ed;
}

.client-order-row.has-dispute td:first-child,
.client-orders-table tr.has-dispute td:first-child {
    box-shadow: inset 5px 0 0 #f97316;
}

.client-order-row.has-dispute:hover td,
.client-orders-table tr.has-dispute:hover td {
    background: #ffedd5;
}

.client-order-row.has-problem.has-dispute td:first-child,
.client-orders-table tr.has-problem.has-dispute td:first-child {
    box-shadow: inset 5px 0 0 #dc2626;
}

.client-dispute-link {
    border-color: rgba(249, 115, 22, 0.34);
    background: #ffedd5;
    color: #9a3412;
}

.client-dispute-link:hover,
.client-dispute-link:focus-visible {
    border-color: rgba(194, 65, 12, 0.6);
    background: #fed7aa;
    color: #7c2d12;
}

.client-dispute-meta {
    color: #9a3412;
}

.client-dispute-badge {
    background: #fed7aa;
    color: #7c2d12;
    border-color: rgba(249, 115, 22, 0.45);
    font-weight: 800;
}

/* Chargeback/dispute evidence pack */
.evidence-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 22px;
  font-size: 0.94rem;
}
.evidence-table th,
.evidence-table td {
  border: 1px solid rgba(120, 145, 170, 0.35);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.evidence-table th {
  width: 230px;
  background: rgba(232, 241, 250, 0.8);
  color: #12304a;
}
.evidence-events th {
  width: auto;
}
.summary.strong,
.summary.medium,
.summary.weak {
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.summary.strong {
  border: 1px solid rgba(39, 145, 76, 0.35);
  background: #f0fbf4;
}
.summary.medium {
  border: 1px solid rgba(219, 156, 45, 0.42);
  background: #fff8e9;
}
.summary.weak {
  border: 1px solid rgba(195, 65, 65, 0.35);
  background: #fff3f3;
}

/* Patch Chargeback 06: make admin order list disputes impossible to miss */
.admin-order-card.has-open-dispute {
  border-left-color: #c2410c;
  background: linear-gradient(90deg, #fff7ed 0%, #fff 42%);
  box-shadow: 0 10px 30px rgba(194, 65, 12, 0.10);
}

.admin-order-card.has-card-dispute {
  border-left-color: #92400e;
}

.admin-flag.dispute {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fdba74;
}

.admin-flag.dispute.is-open {
  background: #ffedd5;
  color: #9a3412;
  border-color: #fb923c;
}

.admin-flag.dispute.is-closed {
  background: #f3f4f6;
  color: #475569;
  border-color: #cbd5e1;
}

/* Weekly opening hours in customer ordering info panels */
.shop-opening-hours-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 16px;
  background: rgba(248, 251, 255, 0.9);
}

.shop-ordering-info-text + .shop-opening-hours-card {
  margin-top: 12px;
}

.shop-opening-hours-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shop-opening-hours-head .page-kicker {
  margin: 0;
}

.shop-opening-hours-head .badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  font-size: 0.72rem;
  line-height: 1.1;
}

.shop-opening-hours-list {
  display: grid;
  gap: 4px;
  margin: 0;
}

.shop-opening-hours-list div {
  display: grid;
  grid-template-columns: minmax(82px, 0.9fr) minmax(0, 1.2fr);
  gap: 8px;
  align-items: baseline;
  padding: 5px 0;
  border-top: 1px solid rgba(188, 204, 220, 0.55);
}

.shop-opening-hours-list div:first-child {
  border-top: 0;
}

.shop-opening-hours-list div.is-today {
  color: var(--text);
  font-weight: 900;
}

.shop-opening-hours-list dt,
.shop-opening-hours-list dd {
  margin: 0;
  min-width: 0;
}

.shop-opening-hours-list dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.shop-opening-hours-list dd {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 800;
  text-align: right;
}

.shop-cart-ordering-info-panel {
  align-self: start;
}

@media (max-width: 640px) {
  .shop-opening-hours-card {
    padding: 10px;
    border-radius: 14px;
  }

  .shop-opening-hours-list div {
    grid-template-columns: minmax(72px, 0.82fr) minmax(0, 1.18fr);
    gap: 6px;
  }

  .shop-opening-hours-list dt,
  .shop-opening-hours-list dd {
    font-size: 0.78rem;
  }
}

/* Admin user cleanup */
.archive-user-form {
  display: grid;
  gap: 8px;
  max-width: 260px;
}
.archive-user-form label {
  display: grid;
  gap: 4px;
}
.archive-user-form input[type="text"] {
  width: 100%;
}
.warning-text {
  color: #92400e;
}

/* Admin users compact role and cleanup cards */
.admin-user-list {
  display: grid;
  gap: 12px;
}

.admin-user-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel-soft);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.admin-user-card.is-archived {
  background: #f5f7fa;
}

.admin-user-card-main {
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) minmax(240px, 1.55fr) minmax(210px, 1.05fr) minmax(140px, auto);
  gap: 12px;
  align-items: start;
}

.admin-user-identity,
.admin-user-role-summary,
.admin-user-activity-summary,
.admin-user-status-block {
  min-width: 0;
}

.admin-user-identity strong {
  display: block;
  color: var(--text);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.admin-user-role-chips,
.admin-user-status-block {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-user-role-chips .admin-flag {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 0.78rem;
}

.admin-user-role-chips .admin-flag small {
  margin-left: 2px;
  padding-left: 6px;
  border-left: 1px solid currentColor;
  opacity: 0.72;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-user-profile-summary {
  margin-top: 6px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-user-activity-summary {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.28;
}

.admin-user-activity-summary span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 7px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.68);
}

.admin-user-activity-summary strong {
  color: var(--text);
}

.admin-user-status-block {
  justify-content: flex-end;
}

.admin-user-status-block .admin-flag {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 0.78rem;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  padding-top: 10px;
  border-top: 1px solid rgba(188, 204, 220, 0.58);
}

.admin-user-details {
  position: relative;
}

.admin-user-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 900;
  user-select: none;
}

.admin-user-details > summary::-webkit-details-marker {
  display: none;
}

.admin-user-details[open] > summary {
  border-color: rgba(24, 111, 175, 0.28);
  background: #eef6ff;
  color: var(--accent);
}

.admin-user-details.danger-zone > summary {
  border-color: rgba(201, 60, 55, 0.26);
  color: var(--danger);
}

.admin-user-details.danger-zone[open] > summary {
  background: var(--danger-soft);
}

.admin-user-role-panel,
.compact-archive-form {
  display: grid;
  gap: 12px;
  width: min(760px, calc(100vw - 56px));
  margin-top: 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.admin-user-role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-role-tile {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #f8fafc;
}

.admin-role-tile.is-selected {
  border-color: rgba(24, 111, 175, 0.35);
  background: #eef6ff;
}

.admin-role-tile.is-disabled {
  opacity: 0.68;
}

.admin-role-tile input {
  width: auto;
  margin-top: 3px;
  flex: 0 0 auto;
}

.admin-role-tile span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-role-tile strong {
  font-size: 0.88rem;
  line-height: 1.15;
}

.admin-role-tile small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.25;
}

.admin-user-form-grid,
.compact-archive-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-user-form-grid {
  display: grid;
  gap: 8px;
}

.admin-user-form-grid label,
.compact-archive-form label {
  display: grid;
  gap: 4px;
}

.admin-user-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-user-blocker,
.admin-user-locked-note {
  align-self: center;
  max-width: 520px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #eef2f6;
}

.compact-archive-form {
  width: min(520px, calc(100vw - 56px));
  align-items: end;
}

@media (max-width: 1100px) {
  .admin-user-card-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .admin-user-status-block {
    justify-content: flex-start;
  }
  .admin-user-role-grid,
  .admin-user-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .admin-user-card-main,
  .admin-user-role-grid,
  .admin-user-form-grid,
  .compact-archive-form {
    grid-template-columns: 1fr;
  }
  .admin-user-role-panel,
  .compact-archive-form {
    width: calc(100vw - 42px);
  }
  .admin-user-activity-summary span {
    justify-content: flex-start;
  }
}

.compact-archive-form { max-width: none; }

/* Patch Shop Payments 03: dedicated shop card processor section */
.client-shop-card-processor-section {
    margin: 18px 0;
    display: grid;
    gap: 16px;
    border-color: #cfe1f4;
    background:
        linear-gradient(135deg, rgba(24, 111, 175, 0.08), rgba(255, 255, 255, 0.95) 42%),
        #fff;
}

.client-shop-card-processor-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.client-shop-card-processor-head h3 {
    margin: 2px 0 6px;
    font-size: 1.35rem;
}

.client-shop-card-processor-status {
    min-width: 170px;
    display: grid;
    justify-items: end;
    gap: 6px;
    text-align: right;
}

.client-shop-card-processor-status small {
    color: #48627d;
    font-weight: 750;
    line-height: 1.3;
}


.client-shop-card-processor-test-warning,
.client-shop-card-processor-adapter-warning {
    margin: 0;
}

.client-shop-card-processor-test-warning p + p,
.client-shop-card-processor-adapter-warning p + p {
    margin-top: 6px;
}

.client-shop-card-processor-grid {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(0, 1.6fr);
    gap: 16px;
    align-items: stretch;
}

.client-shop-card-processor-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    border: 1px solid #cfe1f4;
    border-radius: 20px;
    background: #f8fbff;
    min-height: 100%;
}

.client-shop-card-processor-toggle input {
    width: auto;
    margin-top: 4px;
}

.client-shop-card-processor-toggle strong,
.client-shop-card-processor-toggle small {
    display: block;
}

.client-shop-card-processor-toggle small {
    margin-top: 6px;
    color: #48627d;
    line-height: 1.45;
}

.client-shop-card-processor-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.client-shop-card-processor-fields label {
    display: grid;
    gap: 7px;
    align-content: start;
    font-weight: 800;
    color: var(--text);
}

.client-shop-card-processor-fields label.full {
    grid-column: 1 / -1;
}

.client-shop-card-processor-fields input,
.client-shop-card-processor-fields select,
.client-shop-card-processor-fields textarea {
    width: 100%;
}

.client-shop-card-processor-fields small {
    color: #64748b;
    font-weight: 650;
    line-height: 1.35;
}

.client-shop-card-processor-note {
    margin: 0;
}

@media (max-width: 820px) {
    .client-shop-card-processor-head,
    
.client-shop-card-processor-test-warning,
.client-shop-card-processor-adapter-warning {
    margin: 0;
}

.client-shop-card-processor-test-warning p + p,
.client-shop-card-processor-adapter-warning p + p {
    margin-top: 6px;
}

.client-shop-card-processor-grid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .client-shop-card-processor-status {
        justify-items: start;
        text-align: left;
        min-width: 0;
    }

    .client-shop-card-processor-fields {
        grid-template-columns: 1fr;
    }
}

/* Patch Shop Payments 04: processor framework status panel */
.client-shop-processor-framework {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #d6e6f7;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.client-shop-processor-framework > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.client-shop-processor-framework-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.client-shop-processor-framework-grid span {
    display: block;
    padding: 9px 10px;
    border: 1px solid #d9e7f4;
    border-radius: 14px;
    background: #f8fbff;
    color: #48627d;
    font-weight: 700;
    line-height: 1.3;
}

.client-shop-processor-framework-grid strong {
    color: #0b2b4c;
}

@media (max-width: 920px) {
    .client-shop-processor-framework-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .client-shop-processor-framework-grid {
        grid-template-columns: 1fr;
    }
}

/* Shop-owned payment processor order workflow */
.client-shop-payment-card .client-shop-payment-link-form {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.85rem;
}
.client-shop-payment-card .client-shop-payment-instructions {
    margin-top: 0.75rem;
}

/* Compact public footer */
.public-footer {
  margin-top: 20px;
  padding: 22px 26px 16px;
  border-radius: 24px;
}

.public-footer-grid {
  gap: 18px 28px;
  align-items: start;
}

.public-footer-brand-block {
  gap: 9px;
}

.public-footer-brand .platform-brand-image {
  height: 52px;
  max-width: 220px;
}

.public-footer-brand-block p {
  max-width: 34ch;
  margin: 6px 0 0;
  font-size: 0.92rem;
  line-height: 1.48;
}

.public-footer-links {
  gap: 6px;
}

.public-footer-links h2 {
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.public-footer-links a {
  font-size: 0.92rem;
  line-height: 1.25;
}

.public-footer-bottom {
  margin-top: 16px;
  padding-top: 12px;
  gap: 8px 18px;
  font-size: 0.84rem;
}

@media (max-width: 760px) {
  .public-footer {
    margin-top: 14px;
    padding: 15px 15px 13px;
    border-radius: 20px;
  }

  .public-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 16px;
  }

  .public-footer-brand-block {
    grid-column: 1 / -1;
  }

  .public-footer-brand .platform-brand-image {
    height: 42px;
    max-width: 190px;
  }

  .public-footer-brand-block p {
    max-width: none;
    font-size: 0.84rem;
    line-height: 1.4;
  }

  .public-footer-links h2,
  .public-footer-links a {
    font-size: 0.84rem;
  }

  .public-footer-links {
    gap: 5px;
  }

  .public-footer-bottom {
    display: grid;
    justify-content: stretch;
    margin-top: 12px;
    padding-top: 10px;
    gap: 5px;
    font-size: 0.78rem;
    line-height: 1.35;
  }
}

@media (max-width: 420px) {
  .public-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Front page visual polish */
.platform-home-page {
  --brand-green: #73bf43;
  --brand-green-deep: #277247;
  --brand-ink: #0f2f46;
  background:
    radial-gradient(circle at 12% 4%, rgba(115, 191, 67, 0.22), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(24, 111, 175, 0.16), transparent 30rem),
    linear-gradient(180deg, #eef8f1 0%, #f5f8fb 310px, #f4f7fb 100%);
}

.platform-home-page .app-shell {
  padding-bottom: 30px;
}

.platform-home-nav {
  margin-bottom: 16px;
}

.platform-shopfront-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: clamp(18px, 3vw, 34px);
  align-items: stretch;
  margin-bottom: 18px;
  padding: clamp(24px, 5vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 30px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.96) 0%, rgba(234, 253, 240, 0.96) 30%, rgba(232, 245, 255, 0.94) 58%, rgba(255, 251, 235, 0.90) 100%);
  background-size: 240% 240%;
  box-shadow: 0 22px 60px rgba(15, 47, 70, 0.13);
  animation: platform-hero-colour-shift 18s ease-in-out infinite;
}

.platform-shopfront-hero::before {
  content: none;
}

.platform-shopfront-hero::after {
  content: "";
  position: absolute;
  left: clamp(0px, 3vw, 42px);
  top: clamp(22px, 5vw, 62px);
  width: clamp(310px, 40vw, 520px);
  aspect-ratio: 1;
  background: url("img/basildon-delivery-icon.png") center / contain no-repeat;
  opacity: 0.105;
  filter: saturate(1.2);
  transform: rotate(-10deg) scale(1);
  transform-origin: center;
  animation: platform-logo-float 24s ease-in-out infinite;
  pointer-events: none;
}

.platform-hero-copy::after {
  content: "";
  position: absolute;
  left: -70px;
  bottom: -82px;
  width: clamp(150px, 18vw, 230px);
  aspect-ratio: 1;
  background: url("img/basildon-delivery-icon.png") center / contain no-repeat;
  opacity: 0.035;
  transform: rotate(18deg);
  animation: platform-logo-float-secondary 30s ease-in-out infinite;
  pointer-events: none;
}

@keyframes platform-logo-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-10deg) scale(1);
  }
  50% {
    transform: translate3d(16px, 12px, 0) rotate(-6deg) scale(1.05);
  }
}

@keyframes platform-logo-float-secondary {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(18deg) scale(1);
  }
  50% {
    transform: translate3d(14px, -10px, 0) rotate(12deg) scale(1.04);
  }
}

@keyframes platform-hero-colour-shift {
  0%, 100% {
    background-position: 0% 45%;
  }
  50% {
    background-position: 100% 55%;
  }
}

.platform-hero-copy,
.platform-hero-shop-window {
  position: relative;
  z-index: 1;
}

.platform-hero-copy {
  display: grid;
  align-content: center;
  justify-items: start;
}

.platform-hero-copy .page-kicker,
.platform-section-heading .page-kicker,
.platform-how-it-works .page-kicker,
.platform-account-strip .page-kicker,
.platform-shop-owner-footer .page-kicker {
  color: var(--brand-green-deep);
}

.platform-hero-copy h1 {
  max-width: 780px;
  margin: 0;
  color: var(--brand-ink);
  font-size: clamp(2.5rem, 7vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.platform-hero-copy > p:not(.page-kicker) {
  max-width: 58ch;
  margin: 16px 0 0;
  color: #34516a;
  font-size: clamp(1.02rem, 1.8vw, 1.2rem);
  line-height: 1.62;
}

.platform-hero-actions {
  margin-top: 22px;
}

.platform-hero-actions .button.primary,
.platform-featured-shop-card .button.primary,
.platform-shop-card .button.primary,
.platform-account-strip .button.primary {
  background: var(--brand-green-deep);
  border-color: rgba(39, 114, 71, 0.22);
}

.platform-hero-actions .button.secondary {
  background: var(--brand-ink);
  border-color: rgba(15, 47, 70, 0.22);
  color: #fff;
}

.platform-quick-points {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.platform-quick-points span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(39, 114, 71, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #234b36;
  font-size: 0.86rem;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(15, 47, 70, 0.06);
}

.platform-featured-shop-card {
  display: grid;
  gap: 14px;
  min-height: 100%;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid rgba(39, 114, 71, 0.18);
  border-radius: 26px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fff9 100%);
  box-shadow: 0 18px 42px rgba(15, 47, 70, 0.12);
}

.platform-featured-shop-top,
.platform-shop-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.platform-shop-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-deep));
  color: #fff;
  font-weight: 950;
}

.platform-shop-avatar.large {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  font-size: 1.6rem;
}

.platform-shop-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-featured-shop-card h2,
.platform-shop-card h3,
.platform-how-it-works h2,
.platform-account-strip h2,
.platform-shop-owner-footer h2 {
  margin: 0;
  color: var(--brand-ink);
  letter-spacing: 0;
}

.platform-featured-shop-card p:not(.page-kicker),
.platform-shop-card p,
.platform-how-grid p {
  margin: 0;
  color: #486581;
  line-height: 1.52;
}

.platform-shop-meta-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.platform-shop-meta-row span,
.platform-shop-card-footnote span,
.platform-featured-shop-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef8f1;
  color: #285c3c;
  font-size: 0.8rem;
  font-weight: 900;
}

.platform-featured-shop-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.platform-featured-shop-summary span {
  display: grid;
  min-height: 62px;
  align-content: center;
  border-radius: 16px;
  background: #f5fbff;
}

.platform-featured-shop-summary strong {
  display: block;
  color: var(--brand-ink);
  font-size: 1.2rem;
}

.platform-how-it-works,
.platform-shop-section,
.platform-cta-grid,
.platform-account-strip,
.platform-shop-owner-footer {
  margin-top: 18px;
}

.platform-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.platform-how-it-works {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.74);
}

.platform-how-it-works-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}

.platform-how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.platform-how-grid article {
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 20px;
  background: #fff;
}

.platform-how-grid article span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #e8f7ef;
  color: var(--brand-green-deep);
  font-weight: 950;
}

.platform-how-grid h3 {
  margin: 0;
  color: var(--brand-ink);
}

.platform-section-heading {
  padding: 0 4px;
}

.platform-section-heading h2 {
  color: var(--brand-ink);
  font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.platform-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 14px;
}

.platform-shop-card {
  display: grid;
  gap: 12px;
  min-height: 100%;
  padding: 17px;
  border: 1px solid rgba(188, 204, 220, 0.76);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 47, 70, 0.07);
}

.platform-shop-card h3 {
  font-size: 1.22rem;
}

.platform-shop-card .button {
  margin-top: auto;
}

.platform-shop-card-footnote {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.platform-account-strip,
.platform-shop-owner-footer,
.platform-empty-shops {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.82);
}

.platform-cta-grid .platform-account-strip,
.platform-cta-grid .platform-shop-owner-footer {
  min-height: 100%;
  margin-top: 0;
  display: grid;
  align-content: space-between;
  align-items: start;
}

.platform-account-strip .button,
.platform-shop-owner-footer .button {
  flex: 0 0 auto;
  width: auto;
  max-width: 220px;
  min-height: 44px;
  justify-self: start;
  align-self: end;
}

.platform-account-strip .button.primary {
  color: #fff;
}

.platform-account-strip {
  background:
    linear-gradient(135deg, #f0fff6 0%, #ffffff 68%);
}

.platform-account-strip p,
.platform-shop-owner-footer p {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .platform-shopfront-hero,
  .platform-how-grid {
    grid-template-columns: 1fr;
  }

  .platform-featured-shop-card {
    min-height: 0;
  }

  .platform-cta-grid {
    grid-template-columns: 1fr;
  }

  .platform-empty-shops {
    display: grid;
    align-items: start;
  }

  .platform-empty-shops .button {
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .platform-home-page .app-shell {
    width: min(100% - 16px, 1220px);
    padding-top: 8px;
  }

  .platform-home-nav {
    margin-bottom: 10px;
  }

  .platform-home-nav .platform-brand-image {
    height: 46px;
  }

  .platform-home-nav .shop-nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .platform-home-nav .shop-nav-link {
    min-height: 36px;
    padding: 8px 9px;
    font-size: 0.86rem;
  }

  .platform-shopfront-hero {
    gap: 15px;
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 24px;
  }

  .platform-shopfront-hero::after {
    left: -44px;
    top: 34px;
    width: 300px;
    opacity: 0.075;
  }

  .platform-hero-copy::after {
    display: none;
  }

  .platform-hero-copy h1 {
    font-size: clamp(2.15rem, 12vw, 3.35rem);
    line-height: 0.98;
  }

  .platform-hero-copy > p:not(.page-kicker) {
    margin-top: 11px;
    font-size: 0.96rem;
    line-height: 1.48;
  }

  .platform-hero-actions {
    display: grid;
    width: 100%;
    gap: 8px;
    margin-top: 15px;
  }

  .platform-hero-actions .button {
    width: 100%;
  }

  .platform-quick-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    margin-top: 14px;
  }

  .platform-quick-points span {
    justify-content: center;
    min-height: 44px;
    padding: 7px 8px;
    text-align: center;
    font-size: 0.76rem;
    line-height: 1.15;
    white-space: normal;
  }

  .platform-featured-shop-card {
    gap: 11px;
    padding: 14px;
    border-radius: 20px;
  }

  .platform-featured-shop-top {
    align-items: center;
  }

  .platform-shop-avatar.large {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    font-size: 1.25rem;
  }

  .platform-featured-shop-summary {
    grid-template-columns: 1fr 1fr;
  }

  .platform-featured-shop-summary span {
    min-height: 52px;
    padding: 8px;
  }

  .platform-how-it-works,
  .platform-account-strip,
  .platform-shop-owner-footer,
  .platform-empty-shops {
    margin-top: 14px;
    padding: 15px;
    border-radius: 22px;
  }

  .platform-how-it-works-head,
  .platform-account-strip,
  .platform-shop-owner-footer,
  .platform-empty-shops,
  .platform-section-heading {
    display: grid;
    align-items: start;
  }

  .platform-cta-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .platform-how-grid {
    gap: 9px;
  }

  .platform-how-grid article {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 4px 10px;
    padding: 12px;
    border-radius: 18px;
  }

  .platform-how-grid article span {
    grid-row: span 2;
  }

  .platform-how-grid p {
    font-size: 0.88rem;
  }

  .platform-section-heading h2 {
    font-size: 1.55rem;
  }

  .platform-section-heading .button,
  .platform-account-strip .button,
  .platform-shop-owner-footer .button,
  .platform-empty-shops .button {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .platform-shop-grid {
    gap: 10px;
  }

  .platform-shop-card {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 14px;
    border-radius: 20px;
  }

  .platform-shop-card-header {
    align-items: center;
  }

  .platform-shop-card p {
    font-size: 0.9rem;
    line-height: 1.42;
  }

  .platform-shop-meta-row span,
  .platform-shop-card-footnote span {
    min-height: 28px;
    padding: 6px 9px;
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-shopfront-hero,
  .platform-shopfront-hero::after,
  .platform-hero-copy::after {
    animation: none;
  }
}

@media (max-width: 420px) {
  .platform-quick-points {
    grid-template-columns: 1fr;
  }

  .platform-featured-shop-summary {
    grid-template-columns: 1fr;
  }
}

/* Public support page polish */
.support-page {
  background:
    radial-gradient(circle at 12% 4%, rgba(115, 191, 67, 0.18), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(24, 111, 175, 0.13), transparent 30rem),
    linear-gradient(180deg, #eef8f1 0%, #f5f8fb 310px, #f4f7fb 100%);
}

.support-page .app-shell {
  padding-bottom: 30px;
}

.support-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 30px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.96) 0%, rgba(234, 253, 240, 0.96) 36%, rgba(232, 245, 255, 0.94) 100%);
  box-shadow: 0 18px 48px rgba(15, 47, 70, 0.11);
}

.support-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -64px;
  width: clamp(210px, 27vw, 340px);
  aspect-ratio: 1;
  background: url("img/basildon-delivery-icon.png") center / contain no-repeat;
  opacity: 0.07;
  transform: rotate(-12deg);
  pointer-events: none;
}

.support-hero .page-kicker,
.support-form-card .page-kicker,
.support-option-card.is-selected h2 {
  color: #277247;
}

.support-hero h1 {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  color: #0f2f46;
  font-size: clamp(2.25rem, 6vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.support-hero p:not(.page-kicker) {
  position: relative;
  z-index: 1;
  max-width: 68ch;
  margin: 14px 0 0;
  color: #34516a;
  font-size: 1.05rem;
  line-height: 1.62;
}

.support-alert {
  margin-bottom: 14px;
}

.support-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.support-option-card,
.support-form-card {
  border-radius: 24px;
  border-color: rgba(188, 204, 220, 0.74);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 34px rgba(15, 47, 70, 0.07);
}

.support-option-card {
  display: grid;
  gap: 9px;
  min-height: 100%;
}

.support-option-card h2 {
  margin-bottom: 0;
  color: #0f2f46;
}

.support-option-card p {
  margin: 0;
  line-height: 1.5;
}

.support-option-card.is-selected {
  border-color: rgba(39, 114, 71, 0.28);
  background: linear-gradient(135deg, #f0fff6 0%, #ffffff 72%);
}

.support-option-card .card-actions {
  margin-top: auto;
}

.support-form-card {
  grid-column: 1 / -1;
  padding: clamp(18px, 3vw, 26px);
}

.support-form-card > p {
  max-width: 78ch;
  color: #486581;
  line-height: 1.55;
}

.support-form-card .badge.info {
  background: #e8f7ef;
  color: #277247;
}

.support-contact-form {
  margin-top: 14px;
}

.support-form-status {
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: 14px;
  background: #eef2f6;
  font-weight: 850;
}

.support-form-status.success-text {
  background: #e8f7ef;
  color: #166c3b;
}

.support-form-status.danger-text {
  background: #fdeaea;
  color: #991b1b;
}

.support-contact-form label {
  font-weight: 850;
  color: #0f2f46;
}

.support-contact-form input,
.support-contact-form select,
.support-contact-form textarea {
  border-color: rgba(188, 204, 220, 0.95);
  background: #fff;
}

.support-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.support-form-actions .button.primary,
.support-option-card .button.primary {
  background: #277247;
  border-color: rgba(39, 114, 71, 0.24);
  color: #fff;
}

.support-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 820px) {
  .support-options {
    grid-template-columns: 1fr;
  }

  .support-hero {
    border-radius: 24px;
    padding: 18px;
  }

  .support-hero::after {
    right: -86px;
    top: -42px;
    width: 240px;
    opacity: 0.055;
  }

  .support-hero h1 {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .support-hero p:not(.page-kicker) {
    font-size: 0.96rem;
    line-height: 1.48;
  }

  .support-option-card,
  .support-form-card {
    border-radius: 20px;
    padding: 15px;
  }

  .support-form-card .shop-section-heading {
    display: grid;
    gap: 10px;
  }

  .support-form-actions .button {
    width: 100%;
  }
}

/* Slimmer public/shop header navigation */
.storefront-page .shop-topnav {
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 7px 10px;
  margin-bottom: 18px;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.09);
}

.storefront-page .platform-public-nav {
  padding: 6px 10px;
}

.storefront-page .platform-brand-image-link {
  margin-block: -18px;
}

.storefront-page .platform-brand-image {
  height: 92px;
}

.storefront-page .shop-nav-links {
  gap: 4px;
}

.storefront-page .shop-nav-link {
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 850;
}

.storefront-page .shop-nav-link-strong {
  box-shadow: 0 8px 18px rgba(16, 42, 67, 0.16);
}

@media (max-width: 760px) {
  .storefront-page .shop-topnav {
    gap: 10px;
    padding: 8px;
    margin-bottom: 12px;
    border-radius: 18px;
  }

  .storefront-page .platform-brand-image-link {
    margin-block: -7px;
  }

  .storefront-page .platform-brand-image {
    height: 56px;
  }
}

/* Shop directory page polish */
.shop-directory-page {
  background:
    radial-gradient(circle at 12% 4%, rgba(115, 191, 67, 0.18), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(24, 111, 175, 0.13), transparent 30rem),
    linear-gradient(180deg, #eef8f1 0%, #f5f8fb 310px, #f4f7fb 100%);
}

.shop-directory-page .app-shell {
  padding-bottom: 30px;
}

.shop-directory-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(18px, 3vw, 30px);
  align-items: stretch;
  margin-bottom: 18px;
  padding: clamp(24px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 30px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.96) 0%, rgba(234, 253, 240, 0.96) 34%, rgba(232, 245, 255, 0.94) 100%);
  box-shadow: 0 18px 48px rgba(15, 47, 70, 0.11);
}

.shop-directory-hero::after {
  content: "";
  position: absolute;
  left: clamp(4px, 3vw, 42px);
  top: clamp(24px, 5vw, 62px);
  width: clamp(280px, 34vw, 440px);
  aspect-ratio: 1;
  background: url("img/basildon-delivery-icon.png") center / contain no-repeat;
  opacity: 0.09;
  transform: rotate(-10deg);
  pointer-events: none;
}

.shop-directory-hero-copy,
.shop-directory-summary-card {
  position: relative;
  z-index: 1;
}

.shop-directory-hero-copy {
  display: grid;
  align-content: center;
  justify-items: start;
}

.shop-directory-hero .page-kicker,
.shop-directory-heading .page-kicker,
.shop-directory-summary-card .page-kicker {
  color: #277247;
}

.shop-directory-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #0f2f46;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.shop-directory-hero-copy > p:not(.page-kicker) {
  max-width: 64ch;
  margin: 14px 0 0;
  color: #34516a;
  font-size: 1.06rem;
  line-height: 1.6;
}

.shop-directory-hero-points {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.shop-directory-hero-points span,
.shop-directory-meta-row span,
.shop-directory-fee-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef8f1;
  color: #285c3c;
  font-size: 0.8rem;
  font-weight: 900;
}

.shop-directory-summary-card {
  display: grid;
  gap: 14px;
  align-content: center;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid rgba(39, 114, 71, 0.18);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fff9 100%);
  box-shadow: 0 14px 36px rgba(15, 47, 70, 0.10);
}

.shop-directory-summary-card h2 {
  margin: 0;
  color: #0f2f46;
}

.shop-directory-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.shop-directory-summary-grid div {
  display: grid;
  gap: 5px;
  min-height: 82px;
  align-content: center;
  padding: 13px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 17px;
  background: #f5fbff;
}

.shop-directory-summary-grid span {
  color: #486581;
  font-size: 0.78rem;
  font-weight: 850;
}

.shop-directory-summary-grid strong {
  color: #0f2f46;
  font-size: 2rem;
  line-height: 1;
}

.shop-directory-section {
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.78);
}

.shop-directory-heading {
  margin-bottom: 16px;
}

.shop-directory-heading h2 {
  color: #0f2f46;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.shop-directory-heading p {
  max-width: 72ch;
}

.shop-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 14px;
}

.shop-directory-card {
  display: grid;
  gap: 13px;
  min-height: 100%;
  padding: 17px;
  border: 1px solid rgba(188, 204, 220, 0.76);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 47, 70, 0.07);
}

.shop-directory-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.shop-directory-card-title {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.shop-directory-logo {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, #73bf43, #277247);
  color: #fff;
  font-weight: 950;
}

.shop-directory-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-directory-card h3 {
  margin: 0;
  color: #0f2f46;
  font-size: 1.22rem;
  letter-spacing: 0;
}

.shop-directory-card-title p,
.shop-directory-card .shop-product-description {
  margin: 4px 0 0;
  color: #486581;
  line-height: 1.48;
}

.shop-directory-meta-row,
.shop-directory-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.shop-directory-actions {
  justify-content: space-between;
  margin-top: auto;
}

.shop-directory-actions .button.primary {
  background: #277247;
  border-color: rgba(39, 114, 71, 0.24);
  color: #fff;
}

.shop-directory-empty {
  padding: 32px 18px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 20px;
  background: #fff;
  text-align: center;
}

.shop-directory-empty h2 {
  margin-top: 0;
  color: #0f2f46;
}

.shop-directory-empty p {
  margin-bottom: 0;
  color: #486581;
}

@media (max-width: 900px) {
  .shop-directory-hero {
    grid-template-columns: 1fr;
  }

  .shop-directory-summary-card {
    align-content: start;
  }
}

@media (max-width: 760px) {
  .shop-directory-hero,
  .shop-directory-section {
    border-radius: 22px;
    padding: 16px;
  }

  .shop-directory-hero {
    gap: 14px;
    margin-bottom: 14px;
  }

  .shop-directory-hero::after {
    left: -46px;
    top: 34px;
    width: 290px;
    opacity: 0.065;
  }

  .shop-directory-hero h1 {
    font-size: clamp(2.1rem, 11vw, 3.25rem);
  }

  .shop-directory-hero-copy > p:not(.page-kicker) {
    font-size: 0.96rem;
    line-height: 1.48;
  }

  .shop-directory-hero-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }

  .shop-directory-hero-points span {
    justify-content: center;
    min-height: 42px;
    padding: 7px 8px;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.15;
    white-space: normal;
  }

  .shop-directory-summary-card,
  .shop-directory-card {
    border-radius: 20px;
    padding: 14px;
  }

  .shop-directory-grid {
    gap: 10px;
  }

  .shop-directory-card-top,
  .shop-directory-actions {
    align-items: stretch;
  }

  .shop-directory-actions {
    display: grid;
  }

  .shop-directory-actions .button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .shop-directory-hero-points,
  .shop-directory-summary-grid {
    grid-template-columns: 1fr;
  }
}

.platform-zone-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(188, 204, 220, 0.82);
  border-radius: 999px;
  background: #eef8f1;
  color: #285c3c;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
}

.platform-zone-pill:hover {
  background: #e1f3e7;
  border-color: rgba(39, 114, 71, 0.28);
  box-shadow: 0 8px 18px rgba(15, 47, 70, 0.08);
}

.platform-zones-dialog {
  width: min(520px, calc(100% - 28px));
  max-height: min(680px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(188, 204, 220, 0.86);
  border-radius: 24px;
  background: #fff;
  color: #102a43;
  box-shadow: 0 24px 70px rgba(15, 47, 70, 0.24);
}

.platform-zones-dialog::backdrop {
  background: rgba(16, 42, 67, 0.36);
  backdrop-filter: blur(3px);
}

.platform-zones-dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 20px 14px;
  border-bottom: 1px solid rgba(188, 204, 220, 0.68);
  background: linear-gradient(135deg, #ffffff 0%, #f2fbf5 100%);
}

.platform-zones-dialog-head h3 {
  margin: 0;
  color: #0f2f46;
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  line-height: 1.05;
}

.platform-zones-dialog-head .page-kicker {
  color: #277247;
}

.platform-zones-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(188, 204, 220, 0.84);
  border-radius: 999px;
  background: #fff;
  color: #486581;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
}

.platform-zones-list {
  display: grid;
  gap: 10px;
  max-height: min(470px, calc(100dvh - 190px));
  overflow: auto;
  padding: 14px;
}

.platform-zone-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 16px;
  background: #f8fbff;
}

.platform-zone-row strong {
  display: block;
  color: #0f2f46;
  font-size: 1rem;
  line-height: 1.2;
}

.platform-zone-row div > span {
  display: block;
  margin-top: 3px;
  color: #486581;
  font-size: 0.82rem;
  font-weight: 800;
}

.platform-zone-row-meta {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 230px;
}

.platform-zone-row-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef8f1;
  color: #285c3c;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.platform-zones-dialog > .muted {
  margin: 0;
  padding: 18px 20px 22px;
}

.rider-rating-prompt {
  display: grid;
  gap: 12px;
}

.rider-rating-prompt h2,
.rider-rating-prompt p {
  margin: 0;
}

.rider-rating-form {
  display: grid;
  gap: 12px;
}

.rider-rating-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rider-rating-choice label {
  cursor: pointer;
}

.rider-rating-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rider-rating-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid rgba(188, 204, 220, 0.88);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #0f2f46;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 8px 18px rgba(15, 47, 70, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.rider-rating-choice span:hover {
  transform: translateY(-1px);
  border-color: rgba(24, 111, 175, 0.32);
  box-shadow: 0 12px 26px rgba(15, 47, 70, 0.10);
}

.rider-rating-choice strong {
  font-size: 1.55rem;
  line-height: 1;
}

.rider-rating-choice em {
  font-style: normal;
  line-height: 1.1;
}

.rider-rating-choice input[value="positive"]:checked + span {
  border-color: rgba(39, 114, 71, 0.42);
  background: #e8f7ef;
  box-shadow: 0 0 0 3px rgba(39, 114, 71, 0.12);
}

.rider-rating-choice input[value="negative"]:checked + span {
  border-color: rgba(201, 60, 55, 0.42);
  background: #fdeaea;
  box-shadow: 0 0 0 3px rgba(201, 60, 55, 0.12);
}

.rider-rating-choice input:focus-visible + span {
  outline: 3px solid rgba(24, 111, 175, 0.24);
  outline-offset: 2px;
}

.rider-rating-card {
  display: grid;
  gap: 12px;
}

.rider-rating-card h2,
.rider-rating-card p {
  margin: 0;
}

.rider-rating-summary {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.rider-rating-summary .rider-rating-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #e8f7ef;
  color: #166c3b;
  font-weight: 950;
}

.rider-rating-summary .rider-rating-count strong {
  font-size: 1rem;
  line-height: 1;
}

.rider-rating-summary .rider-rating-count.negative {
  background: #fdeaea;
  color: #991b1b;
}

.rider-rating-comment {
  padding: 12px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 14px;
  background: #f8fbff;
}

.admin-rider-score {
  display: grid;
  gap: 7px;
  width: 118px;
  padding: 10px;
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.admin-rider-score strong {
  color: #0f2f46;
  font-size: 1.25rem;
  line-height: 1;
}

.admin-rider-score > span {
  color: #486581;
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.1;
}

.admin-rider-score.has-score {
  border-color: rgba(39, 114, 71, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #f2fbf5 100%);
}

.admin-rider-score.no-score {
  background: #f8fafc;
}

.admin-rider-score.no-score strong {
  color: #829ab1;
}

.admin-rider-score-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.admin-rider-score-split span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 24px;
  padding: 5px 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.admin-rider-score-split .up {
  background: #e8f7ef;
  color: #166c3b;
}

.admin-rider-score-split .down {
  background: #fdeaea;
  color: #991b1b;
}

[data-live-region="admin-riders-main"] {
  transition: opacity 0.16s ease, filter 0.16s ease;
}

[data-live-region="admin-riders-main"].is-updating {
  opacity: 0.62;
  filter: saturate(0.86);
  pointer-events: none;
}

/* Client dashboard glass console - June 2026 */
.client-dashboard-glass-page {
  background:
    radial-gradient(circle at 9% 6%, rgba(14, 165, 233, 0.40), transparent 30rem),
    radial-gradient(circle at 83% 13%, rgba(34, 197, 94, 0.34), transparent 31rem),
    radial-gradient(circle at 44% 86%, rgba(251, 191, 36, 0.18), transparent 29rem),
    linear-gradient(135deg, #e5f5ff 0%, #f9fcff 42%, #eaf8ee 100%);
  background-attachment: fixed;
}

.client-dashboard-glass-page .app-shell {
  width: min(1360px, calc(100% - 26px));
}

.client-dashboard-glass-main {
  position: relative;
  isolation: isolate;
  gap: 16px;
}

.client-dashboard-glass-main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 36%, rgba(255, 255, 255, 0.10) 58%, transparent 76%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 72px);
  opacity: 0.72;
}

.client-dashboard-glass-page .client-topnav {
  border-color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(236, 248, 255, 0.74)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 50px rgba(32, 71, 103, 0.18);
  backdrop-filter: blur(22px) saturate(1.3);
}

.client-dashboard-glass-page .client-brand-mark {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 14px 26px rgba(16, 42, 67, 0.18);
}

.client-dashboard-glass-page .client-nav-link,
.client-dashboard-glass-page .client-dashboard-tools > summary,
.client-dashboard-glass-page .client-details-chevron {
  border-color: rgba(255, 255, 255, 0.68);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(239, 247, 255, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(25, 72, 112, 0.08);
}

.client-dashboard-glass-page .client-nav-link:hover,
.client-dashboard-glass-page .client-nav-link.is-active,
.client-dashboard-glass-page .client-order-tab:hover,
.client-dashboard-glass-page .client-order-tab.is-active {
  color: #082f49;
  border-color: rgba(24, 111, 175, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(218, 238, 255, 0.74));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 11px 24px rgba(25, 72, 112, 0.12);
}

.client-dashboard-glass-page .client-shop-mode-control {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 14px 34px rgba(15, 75, 75, 0.13);
  backdrop-filter: blur(18px) saturate(1.25);
}

.client-dashboard-glass-page .client-shop-mode-summary {
  min-height: 48px;
  border-radius: 17px;
}

.client-dashboard-glass-page .client-orders-utility-row .client-rider-availability-card.client-rider-availability-collapsed,
.client-dashboard-glass-page .client-order-tabs,
.client-dashboard-glass-page .client-queue-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(238, 248, 255, 0.58)),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(148, 184, 214, 0.18),
    0 22px 56px rgba(36, 74, 112, 0.16);
  backdrop-filter: blur(20px) saturate(1.28);
}

.client-dashboard-glass-page .client-orders-utility-row .client-rider-availability-card.client-rider-availability-collapsed::before,
.client-dashboard-glass-page .client-order-tabs::before,
.client-dashboard-glass-page .client-queue-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 44%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
}

.client-dashboard-glass-page .client-order-tabs {
  gap: 7px;
  margin-bottom: 2px;
  padding: 8px;
  border-radius: 24px;
}

.client-dashboard-glass-page .client-order-tab {
  position: relative;
  min-height: 44px;
  padding: 10px 16px;
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.38);
  color: #31506c;
}

.client-dashboard-glass-page .client-order-tab.is-active {
  transform: translateY(-1px);
  color: #062d4d;
  border-color: rgba(14, 116, 144, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(186, 230, 253, 0.78));
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -2px 0 rgba(14, 116, 144, 0.20),
    0 14px 28px rgba(14, 116, 144, 0.16);
}

.client-dashboard-glass-page .client-order-tab.is-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
}

.client-dashboard-glass-page .client-order-tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #082f49;
  opacity: 1;
}

.client-dashboard-glass-page .client-queue-card {
  padding: clamp(17px, 2vw, 24px);
  border-radius: 28px;
}

.client-dashboard-glass-page .client-queue-card.priority {
  border-color: rgba(250, 204, 21, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.86), rgba(255, 255, 255, 0.58)),
    rgba(255, 255, 255, 0.64);
}

.client-dashboard-glass-page .client-section-head.compact {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}

.client-dashboard-glass-page .client-section-eyebrow {
  color: #00684a;
}

.client-dashboard-glass-page .client-section-head.compact h2 {
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  color: #082f49;
}

.client-dashboard-glass-page .client-section-head.compact p {
  max-width: 78ch;
  color: #365b7a;
}

.client-dashboard-glass-page .client-queue-card .table-wrap {
  position: relative;
  z-index: 1;
  overflow: auto;
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 26px rgba(25, 72, 112, 0.08);
  backdrop-filter: blur(10px) saturate(1.1);
}

.client-dashboard-glass-page .client-queue-card table {
  border-collapse: separate;
  border-spacing: 0 10px;
}

.client-dashboard-glass-page .client-queue-card tbody tr {
  position: relative;
}

.client-dashboard-glass-page .client-queue-card th {
  position: sticky;
  top: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(249, 252, 255, 0.96), rgba(232, 243, 255, 0.91));
  color: #31506c;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: inset 0 -1px 0 rgba(188, 204, 220, 0.62);
}

.client-dashboard-glass-page .client-order-row td {
  border-top: 1px solid rgba(255, 255, 255, 0.68);
  border-bottom: 1px solid rgba(153, 184, 213, 0.30);
  background: rgba(255, 255, 255, 0.70);
  box-shadow: 0 11px 24px rgba(25, 72, 112, 0.06);
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.client-dashboard-glass-page .client-order-row td:first-child {
  position: relative;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: 18px 0 0 18px;
  box-shadow: 0 11px 24px rgba(25, 72, 112, 0.06);
  overflow: hidden;
}

.client-dashboard-glass-page .client-order-row td:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: 0 18px 18px 0;
}

.client-dashboard-glass-page .client-order-row td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, #64748b, #94a3b8);
  box-shadow: 0 0 22px rgba(100, 116, 139, 0.34);
}

.client-dashboard-glass-page .client-order-row.status-new td:first-child::before {
  background: linear-gradient(180deg, #f59e0b, #f97316);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.42);
}

.client-dashboard-glass-page .client-order-row.status-preparing td:first-child::before {
  background: linear-gradient(180deg, #0ea5e9, #2563eb);
  box-shadow: 0 0 24px rgba(14, 165, 233, 0.34);
}

.client-dashboard-glass-page .client-order-row.status-ready td:first-child::before {
  background: linear-gradient(180deg, #22c55e, #15803d);
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.34);
}

.client-dashboard-glass-page .client-order-row.status-deliveries td:first-child::before {
  background: linear-gradient(180deg, #14b8a6, #0f766e);
  box-shadow: 0 0 24px rgba(20, 184, 166, 0.34);
}

.client-dashboard-glass-page .client-order-row.status-completed td:first-child::before {
  background: linear-gradient(180deg, #64748b, #475569);
}

.client-dashboard-glass-page .client-order-row.status-cancelled td:first-child::before {
  background: linear-gradient(180deg, #fb7185, #e11d48);
  box-shadow: 0 0 24px rgba(225, 29, 72, 0.28);
}

.client-dashboard-glass-page .client-order-row:hover td {
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 17px 34px rgba(25, 72, 112, 0.12);
}

.client-dashboard-glass-page .client-order-row.status-new td {
  background: linear-gradient(90deg, rgba(255, 248, 229, 0.95), rgba(255, 255, 255, 0.72));
}

.client-dashboard-glass-page .client-order-row.status-preparing td {
  background: linear-gradient(90deg, rgba(231, 243, 255, 0.95), rgba(255, 255, 255, 0.72));
}

.client-dashboard-glass-page .client-order-row.status-ready td {
  background: linear-gradient(90deg, rgba(226, 255, 239, 0.95), rgba(255, 255, 255, 0.72));
}

.client-dashboard-glass-page .client-order-row.status-deliveries td {
  background: linear-gradient(90deg, rgba(224, 251, 246, 0.95), rgba(255, 255, 255, 0.72));
}

.client-dashboard-glass-page .client-order-row.status-completed td,
.client-dashboard-glass-page .client-order-row.status-cancelled td {
  background: rgba(248, 250, 252, 0.72);
}

.client-dashboard-glass-page .client-order-row.has-problem td {
  background: linear-gradient(90deg, rgba(255, 241, 242, 0.98), rgba(255, 255, 255, 0.74));
}

.client-dashboard-glass-page .client-order-row.has-dispute td {
  background: linear-gradient(90deg, rgba(245, 243, 255, 0.98), rgba(255, 255, 255, 0.74));
}

.client-dashboard-glass-page .client-order-row.has-problem.has-dispute td {
  background: linear-gradient(90deg, rgba(255, 241, 242, 0.98), rgba(245, 243, 255, 0.84), rgba(255, 255, 255, 0.74));
}

.client-dashboard-glass-page .client-order-row[data-live-new-order] td {
  animation: clientGlassNewOrder 1.9s ease-out;
}

@keyframes clientGlassNewOrder {
  0% {
    background: rgba(187, 247, 208, 0.98);
    box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.38);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.client-dashboard-glass-page .client-order-number,
.client-dashboard-glass-page .client-order-drag-handle {
  border-color: rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(226, 241, 255, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 8px 18px rgba(25, 72, 112, 0.10);
}

.client-dashboard-glass-page .client-order-number {
  min-width: 80px;
  padding: 10px 12px;
  border-radius: 18px;
  color: #075985;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(219, 234, 254, 0.92));
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 rgba(14, 116, 144, 0.14),
    0 13px 27px rgba(7, 89, 133, 0.14);
}

.client-dashboard-glass-page .client-items-trigger {
  color: #075985;
  text-decoration-thickness: 2px;
}

.client-dashboard-glass-page .client-items-value {
  color: #082f49;
}

.client-dashboard-glass-page .client-progress-primary,
.client-dashboard-glass-page .client-slot-mini,
.client-dashboard-glass-page .client-summary-pin,
.client-dashboard-glass-page .badge {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 14px rgba(25, 72, 112, 0.08);
}

.client-dashboard-glass-page .client-progress-primary {
  padding: 8px 12px;
  border-radius: 999px;
}

.client-dashboard-glass-page .client-slot-mini {
  border-color: rgba(14, 116, 144, 0.28);
  background:
    linear-gradient(180deg, rgba(240, 249, 255, 0.98), rgba(219, 234, 254, 0.80));
  color: #075985;
}

.client-dashboard-glass-page .client-row-actions {
  gap: 7px;
}

.client-dashboard-glass-page .client-row-actions button,
.client-dashboard-glass-page .client-row-actions .button {
  min-height: 38px;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 18px rgba(25, 72, 112, 0.11);
}

.client-dashboard-glass-page .client-queue-card .empty-state {
  position: relative;
  z-index: 1;
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(12px);
}

@media (max-width: 900px) {
  .client-dashboard-glass-page .app-shell {
    width: min(100% - 18px, 1360px);
  }

  .client-dashboard-glass-page .client-queue-card {
    padding: 14px;
    border-radius: 24px;
  }

  .client-dashboard-glass-page .client-order-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .client-dashboard-glass-page .client-order-tab {
    min-height: 40px;
    padding: 9px 12px;
  }
}

@media (max-width: 640px) {
  .client-dashboard-glass-page {
    background-attachment: scroll;
  }

  .client-dashboard-glass-page .client-topnav {
    top: 7px;
    padding: 10px;
    border-radius: 20px;
  }

  .client-dashboard-glass-main {
    gap: 12px;
  }

  .client-dashboard-glass-page .client-orders-utility-row .client-rider-availability-card.client-rider-availability-collapsed,
  .client-dashboard-glass-page .client-order-tabs,
  .client-dashboard-glass-page .client-queue-card {
    border-radius: 20px;
  }

  .client-dashboard-glass-page .client-queue-card .table-wrap {
    border-radius: 18px;
  }

  .client-dashboard-glass-page .client-queue-card th,
  .client-dashboard-glass-page .client-queue-card td {
    padding: 10px;
  }

  .client-dashboard-glass-page .client-order-number {
    min-width: 62px;
    font-size: 1.35rem;
  }

  .client-dashboard-glass-page .client-row-actions button,
  .client-dashboard-glass-page .client-row-actions .button {
    min-height: 36px;
    border-radius: 12px;
  }
}

/* Shared client console glass surfaces - June 2026 */
.client-console-glass-page .app-shell {
  zoom: var(--client-console-scale, 1);
}

.client-console-glass-page:not(.client-dashboard-glass-page) {
  background:
    radial-gradient(circle at 9% 6%, rgba(14, 165, 233, 0.34), transparent 30rem),
    radial-gradient(circle at 84% 12%, rgba(34, 197, 94, 0.28), transparent 31rem),
    radial-gradient(circle at 46% 88%, rgba(251, 191, 36, 0.14), transparent 29rem),
    linear-gradient(135deg, #e6f5ff 0%, #f9fcff 44%, #edf9f1 100%);
  background-attachment: fixed;
}

.client-console-glass-page:not(.client-dashboard-glass-page) .app-shell {
  width: min(1360px, calc(100% - 26px));
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-topnav {
  border-color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(235, 248, 255, 0.74)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 50px rgba(32, 71, 103, 0.16);
  backdrop-filter: blur(22px) saturate(1.25);
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-brand-mark {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 14px 26px rgba(16, 42, 67, 0.18);
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-nav-link,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-page-actions .button,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-page-actions button {
  border-color: rgba(255, 255, 255, 0.66);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(239, 247, 255, 0.66));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(25, 72, 112, 0.08);
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-page-actions .button.primary,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-page-actions button.primary {
  color: #062d4d;
  text-shadow: none;
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-nav-link:hover,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-nav-link.is-active {
  color: #062d4d;
  border-color: rgba(14, 116, 144, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(186, 230, 253, 0.72));
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -2px 0 rgba(14, 116, 144, 0.16),
    0 12px 24px rgba(14, 116, 144, 0.13);
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-shop-mode-control {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 14px 34px rgba(15, 75, 75, 0.13);
  backdrop-filter: blur(18px) saturate(1.25);
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-page-titlebar {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(228, 244, 255, 0.60)),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 20px 50px rgba(36, 74, 112, 0.13);
  backdrop-filter: blur(18px) saturate(1.22);
}

.client-scale-control {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(226, 241, 255, 0.66)),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 12px 26px rgba(25, 72, 112, 0.10);
  backdrop-filter: blur(14px) saturate(1.18);
}

.client-scale-label {
  padding-left: 4px;
  color: #31506c;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.client-scale-buttons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.client-scale-button,
.client-scale-readout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(219, 234, 254, 0.82));
  color: #075985;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 7px 16px rgba(25, 72, 112, 0.10);
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.client-scale-button {
  width: 36px;
  padding: 0;
  font-size: 1.25rem;
}

.client-scale-readout {
  min-width: 58px;
  padding: 0 10px;
  font-size: 0.86rem;
}

.client-scale-button:hover:not(:disabled),
.client-scale-readout:hover {
  color: #062d4d;
  border-color: rgba(14, 116, 144, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(186, 230, 253, 0.80));
}

.client-scale-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-page-titlebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-page-titlebar > * {
  position: relative;
  z-index: 1;
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-page-titlebar h1 {
  color: #082f49;
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-page-titlebar .page-subtitle,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-page-titlebar p {
  color: #365b7a;
}

.client-console-glass-page:not(.client-dashboard-glass-page) .page-kicker,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-section-eyebrow {
  color: #00684a;
}

.client-console-glass-page:not(.client-dashboard-glass-page) .card,
.client-console-glass-page:not(.client-dashboard-glass-page) .panel,
.client-console-glass-page:not(.client-dashboard-glass-page) .stat-card,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-order-ticket,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-shop-status-panel,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-settings-disclosure,
.client-console-glass-page:not(.client-dashboard-glass-page) .filter-card,
.client-console-glass-page:not(.client-dashboard-glass-page) .filter-form,
.client-console-glass-page:not(.client-dashboard-glass-page) .meta-row {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(239, 248, 255, 0.58)),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(148, 184, 214, 0.16),
    0 20px 48px rgba(36, 74, 112, 0.13);
  backdrop-filter: blur(18px) saturate(1.20);
}

.client-console-glass-page:not(.client-dashboard-glass-page) .card::before,
.client-console-glass-page:not(.client-dashboard-glass-page) .panel::before,
.client-console-glass-page:not(.client-dashboard-glass-page) .stat-card::before,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-order-ticket::before,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-shop-status-panel::before,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-settings-disclosure::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0));
}

.client-console-glass-page:not(.client-dashboard-glass-page) .card > *,
.client-console-glass-page:not(.client-dashboard-glass-page) .panel > *,
.client-console-glass-page:not(.client-dashboard-glass-page) .stat-card > *,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-order-ticket > *,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-shop-status-panel > *,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-settings-disclosure > * {
  position: relative;
  z-index: 1;
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-shop-status-panel.is-open,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-setup-step.is-done {
  border-color: rgba(34, 197, 94, 0.36);
  background:
    linear-gradient(180deg, rgba(240, 253, 244, 0.92), rgba(255, 255, 255, 0.62)),
    rgba(255, 255, 255, 0.60);
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-shop-status-panel.is-closed {
  border-color: rgba(248, 113, 113, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 241, 242, 0.92), rgba(255, 255, 255, 0.62)),
    rgba(255, 255, 255, 0.60);
}

.client-console-glass-page:not(.client-dashboard-glass-page) .table-wrap {
  overflow: auto;
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 26px rgba(25, 72, 112, 0.08);
  backdrop-filter: blur(10px) saturate(1.1);
}

.client-console-glass-page:not(.client-dashboard-glass-page) table {
  border-collapse: separate;
  border-spacing: 0;
}

.client-console-glass-page:not(.client-dashboard-glass-page) th {
  background:
    linear-gradient(180deg, rgba(249, 252, 255, 0.96), rgba(232, 243, 255, 0.91));
  color: #31506c;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: inset 0 -1px 0 rgba(188, 204, 220, 0.62);
}

.client-console-glass-page:not(.client-dashboard-glass-page) td {
  border-bottom-color: rgba(188, 204, 220, 0.42);
  background: rgba(255, 255, 255, 0.62);
}

.client-console-glass-page:not(.client-dashboard-glass-page) tbody tr:hover td {
  background: rgba(255, 255, 255, 0.92);
}

.client-console-glass-page:not(.client-dashboard-glass-page) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.client-console-glass-page:not(.client-dashboard-glass-page) select,
.client-console-glass-page:not(.client-dashboard-glass-page) textarea {
  border-color: rgba(148, 184, 214, 0.70);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 6px 16px rgba(25, 72, 112, 0.05);
}

.client-console-glass-page:not(.client-dashboard-glass-page) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
.client-console-glass-page:not(.client-dashboard-glass-page) select:focus,
.client-console-glass-page:not(.client-dashboard-glass-page) textarea:focus {
  border-color: rgba(14, 116, 144, 0.54);
  box-shadow:
    0 0 0 3px rgba(14, 165, 233, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.client-console-glass-page:not(.client-dashboard-glass-page) .catalogue-category-tab,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-list-count,
.client-console-glass-page:not(.client-dashboard-glass-page) .badge,
.client-console-glass-page:not(.client-dashboard-glass-page) .status-pill,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-summary-pin,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-slot-mini {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 14px rgba(25, 72, 112, 0.08);
}

.client-console-glass-page:not(.client-dashboard-glass-page) .catalogue-category-tab.is-active,
.client-console-glass-page:not(.client-dashboard-glass-page) .catalogue-category-tab:hover {
  color: #062d4d;
  border-color: rgba(14, 116, 144, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(186, 230, 253, 0.72));
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-order-ticket {
  border-radius: 28px;
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-ticket-main h2,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-section-head h2,
.client-console-glass-page:not(.client-dashboard-glass-page) .card h2,
.client-console-glass-page:not(.client-dashboard-glass-page) .card h3 {
  color: #082f49;
}

.client-console-glass-page:not(.client-dashboard-glass-page) .client-packing-item,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-setup-step,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-weekly-hours-row,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-shop-card-processor-toggle,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-shop-processor-framework-grid span,
.client-console-glass-page:not(.client-dashboard-glass-page) .client-today-action {
  border-color: rgba(255, 255, 255, 0.68);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(240, 248, 255, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 9px 20px rgba(25, 72, 112, 0.07);
}

@media (max-width: 760px) {
  .client-console-glass-page:not(.client-dashboard-glass-page) {
    background-attachment: scroll;
  }

  .client-console-glass-page:not(.client-dashboard-glass-page) .app-shell {
    width: min(100% - 18px, 1360px);
  }

  .client-console-glass-page:not(.client-dashboard-glass-page) .client-topnav {
    top: 7px;
    padding: 10px;
    border-radius: 20px;
  }

  .client-console-glass-page:not(.client-dashboard-glass-page) .client-page-titlebar,
  .client-console-glass-page:not(.client-dashboard-glass-page) .card,
  .client-console-glass-page:not(.client-dashboard-glass-page) .panel,
  .client-console-glass-page:not(.client-dashboard-glass-page) .client-order-ticket,
  .client-console-glass-page:not(.client-dashboard-glass-page) .client-shop-status-panel {
    border-radius: 22px;
  }

  .client-console-glass-page:not(.client-dashboard-glass-page) .table-wrap {
    border-radius: 18px;
  }
}

@media (min-width: 981px) {
  .shop-checkout-layout > .shop-summary-aside {
    position: sticky;
    top: 98px;
    align-self: start;
    max-height: calc(100dvh - 116px);
    overflow: auto;
  }

  .shop-checkout-layout .shop-summary-aside .sticky-side {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 980px) {
  .shop-checkout-layout > .shop-summary-aside,
  .shop-checkout-layout .shop-summary-aside .sticky-side {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 520px) {
  .platform-zones-dialog {
    border-radius: 20px;
  }

  .platform-zones-dialog-head {
    padding: 16px 16px 12px;
  }

  .platform-zones-list {
    padding: 12px;
  }

  .platform-zone-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .platform-zone-row-meta {
    justify-content: flex-start;
    max-width: none;
  }
}

.catalogue-inline-description.is-empty {
  color: var(--muted);
  font-style: italic;
  font-weight: 700;
  opacity: 0.72;
}

.catalogue-inline-textarea {
  width: min(100%, 420px);
  min-height: 86px;
  line-height: 1.35;
  resize: vertical;
  white-space: normal;
}

/* Catalogue: make product images quick edit links without changing row/card sizing. */
a.catalogue-line-thumb,
a.catalogue-product-image {
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.catalogue-line-thumb::after,
a.catalogue-product-image::after {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #fff;
  background: rgba(6, 35, 54, 0.78);
  box-shadow: 0 4px 12px rgba(6, 23, 38, 0.22);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .15s ease, transform .15s ease;
  content: 'Edit photo';
  pointer-events: none;
}

a.catalogue-line-thumb::after {
  right: 2px;
  bottom: 2px;
  min-height: 17px;
  padding: 3px 5px;
  font-size: 0.5rem;
  content: 'Edit';
}

a.catalogue-line-thumb.placeholder::after {
  content: 'Add';
}

a.catalogue-product-image.placeholder::after {
  content: 'Add photo';
}

a.catalogue-line-thumb:hover::after,
a.catalogue-line-thumb:focus-visible::after,
a.catalogue-product-image:hover::after,
a.catalogue-product-image:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

a.catalogue-line-thumb {
  display: block;
}

a.catalogue-line-thumb.placeholder {
  display: flex;
}

a.catalogue-line-thumb:focus-visible,
a.catalogue-product-image:focus-visible {
  outline: 3px solid rgba(14, 116, 144, 0.42);
  outline-offset: 2px;
}

@media (hover: none) {
  a.catalogue-line-thumb::after,
  a.catalogue-product-image::after {
    opacity: 0.68;
    transform: translateY(0);
  }

  .catalogue-line-description.is-empty {
    max-width: 96px;
    margin-left: 6px;
    opacity: 0.52;
    pointer-events: auto;
  }
}

/* Catalogue mobile header compacting - June 2026 */
@media (max-width: 620px) {
  .client-console-glass-page.client-catalogue-page .client-nav-main-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .client-console-glass-page.client-catalogue-page .client-brand {
    grid-column: 1;
    order: 1;
    min-width: 0;
  }

  .client-console-glass-page.client-catalogue-page .client-nav-main-row .client-nav-status-slot {
    grid-column: 2;
    order: 1;
    width: auto;
    justify-content: flex-end;
  }

  .client-console-glass-page.client-catalogue-page .client-nav-main-row .client-nav-scroll {
    grid-column: 1 / -1;
    order: 2;
    width: 100%;
  }

  .client-console-glass-page.client-catalogue-page .client-shop-mode-control {
    width: auto;
  }

  .client-console-glass-page.client-catalogue-page .client-shop-mode-summary {
    width: auto;
    min-width: 132px;
    min-height: 52px;
    padding: 9px 14px 9px 16px;
    border-radius: 19px;
  }

  .client-console-glass-page.client-catalogue-page .client-shop-mode-menu {
    left: auto;
    right: 0;
    min-width: 148px;
  }

  .client-console-glass-page.client-catalogue-page .client-page-titlebar {
    gap: 12px;
    padding: 16px;
  }

  .client-console-glass-page.client-catalogue-page .client-page-titlebar h1 {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .client-console-glass-page.client-catalogue-page .client-page-titlebar .page-subtitle {
    margin-top: 6px;
    line-height: 1.38;
  }

  .client-console-glass-page.client-catalogue-page .client-page-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 7px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .client-console-glass-page.client-catalogue-page .client-page-actions .button,
  .client-console-glass-page.client-catalogue-page .client-page-actions button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 13px;
    font-size: 0.84rem;
    line-height: 1.1;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .client-console-glass-page.client-catalogue-page .client-shop-mode-summary {
    min-width: 116px;
    padding-inline: 12px;
  }

  .client-console-glass-page.client-catalogue-page .client-page-actions {
    gap: 6px;
  }

  .client-console-glass-page.client-catalogue-page .client-page-actions .button,
  .client-console-glass-page.client-catalogue-page .client-page-actions button {
    min-height: 36px;
    padding: 8px 8px;
    font-size: 0.78rem;
  }
}

/* Client mobile/tablet browser performance guardrails - June 2026
   Phone landscape can be wider than the normal mobile breakpoint, so do not rely
   on max-width alone. Keep client navigation in the normal document flow on
   touch/landscape mobile layouts to avoid sticky/floating repaint jank. */
@media (max-width: 760px),
       ((hover: none) and (pointer: coarse) and (max-width: 1100px)),
       ((max-width: 1100px) and (max-height: 560px)) {
  .client-topnav,
  .client-dashboard-glass-page .client-topnav,
  .client-console-glass-page:not(.client-dashboard-glass-page) .client-topnav {
    position: static;
    top: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .client-dashboard-glass-page,
  .client-console-glass-page:not(.client-dashboard-glass-page) {
    background-attachment: scroll;
  }

  .client-dashboard-glass-main::before {
    display: none;
  }
}

/* Compact client photo intake page - June 2026 */
.client-photo-intake-compact-main {
  max-width: 680px;
  margin: 0 auto;
  gap: 10px;
}

.client-photo-intake-compact-card {
  padding: clamp(14px, 2.4vw, 22px);
}

.client-photo-capture-box-compact {
  gap: 10px;
  padding: clamp(14px, 3vw, 18px);
  border-radius: 20px;
}

.client-photo-capture-box-compact strong {
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  letter-spacing: -0.025em;
}

.client-photo-capture-box-compact small {
  line-height: 1.32;
}

.client-photo-save-button {
  min-height: 48px;
}

.client-photo-intake-status {
  min-height: 1.35em;
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 620px), (max-height: 760px) and (max-width: 920px) {
  .client-photo-intake-page .client-page-titlebar {
    gap: 8px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: 20px;
  }

  .client-photo-intake-page .client-page-titlebar h1 {
    font-size: clamp(1.55rem, 8vw, 2rem);
    line-height: 1;
  }

  .client-photo-intake-page .client-page-titlebar .page-kicker {
    margin-bottom: 4px;
    font-size: 0.72rem;
  }

  .client-photo-intake-page .client-page-titlebar .page-subtitle {
    margin-top: 5px;
    font-size: 0.9rem;
    line-height: 1.28;
  }

  .client-photo-intake-page .client-page-actions {
    gap: 6px;
  }

  .client-photo-intake-page .client-page-actions .button {
    min-height: 38px;
    padding: 8px 11px;
    border-radius: 13px;
    font-size: 0.86rem;
  }

  .client-photo-intake-compact-card {
    padding: 12px;
    border-radius: 20px;
  }

  .client-photo-intake-form {
    gap: 9px;
  }

  .client-photo-capture-box-compact {
    gap: 8px;
    padding: 11px 12px;
    border-radius: 16px;
  }

  .client-photo-capture-box-compact span {
    gap: 3px;
  }

  .client-photo-capture-box-compact strong {
    font-size: 1rem;
  }

  .client-photo-capture-box-compact small {
    font-size: 0.82rem;
    line-height: 1.25;
  }

  .client-photo-capture-box-compact input[type="file"] {
    font-size: 0.88rem;
  }

  .client-photo-save-button {
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 14px;
  }

  .client-photo-intake-status {
    font-size: 0.84rem;
  }
}

/* Live camera capture for compact photo intake - June 2026 */
.client-camera-capture {
  display: grid;
  gap: 10px;
}

.client-camera-preview {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: min(44vh, 360px);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(234, 246, 255, 0.86), rgba(255, 255, 255, 0.92));
}

.client-camera-preview video,
.client-camera-preview canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-camera-preview video[hidden],
.client-camera-preview canvas[hidden] {
  display: none;
}

.client-camera-placeholder {
  max-width: 22rem;
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.client-camera-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 8px;
}

.client-camera-actions .button {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
}

.client-camera-message {
  min-height: 1.25em;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.3;
}


.client-photo-upload-fallback {
  display: grid;
  gap: 8px;
  margin-top: 0;
}

.client-photo-upload-fallback > summary {
  width: fit-content;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.client-photo-upload-fallback > summary::-webkit-details-marker {
  display: none;
}

.client-photo-upload-fallback[open] > summary {
  margin-bottom: 2px;
}

.client-photo-upload-toggle {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
}

.client-photo-file-fallback {
  padding: 10px 12px;
}

.client-photo-file-fallback strong {
  font-size: 0.94rem;
}

.client-photo-file-fallback small {
  font-size: 0.8rem;
}

@media (max-width: 620px), (max-height: 760px) and (max-width: 920px) {
  .client-camera-capture {
    gap: 7px;
  }

  .client-camera-preview {
    max-height: 34vh;
    border-radius: 15px;
  }

  .client-camera-placeholder {
    padding: 10px;
    font-size: 0.86rem;
  }

  .client-camera-actions {
    gap: 7px;
  }

  .client-camera-actions .button {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 0.9rem;
  }

  .client-camera-message {
    font-size: 0.8rem;
  }

  .client-photo-upload-fallback {
    gap: 6px;
  }

  .client-photo-upload-toggle {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 0.82rem;
  }

  .client-photo-file-fallback {
    gap: 6px;
    padding: 8px 10px;
  }

  .client-photo-file-fallback strong {
    font-size: 0.88rem;
  }

  .client-photo-file-fallback small {
    display: none;
  }

  .client-photo-file-fallback input[type="file"] {
    padding: 8px 9px;
    font-size: 0.82rem;
  }
}

/* Extra compact Take photos layout - June 2026 */
.client-photo-intake-page .client-page-titlebar {
  display: none;
}

.client-photo-intake-page .client-photo-intake-compact-main {
  max-width: 560px;
  margin-top: clamp(8px, 2vh, 14px);
}

.client-photo-intake-page .client-photo-intake-compact-card {
  padding: clamp(10px, 2.4vw, 16px);
}

.client-photo-intake-page .client-photo-intake-form {
  gap: 8px;
}

.client-photo-intake-page .client-camera-capture {
  gap: 7px;
}

.client-photo-intake-page .client-camera-preview {
  max-height: min(40svh, 300px);
  border-radius: 15px;
}

.client-photo-intake-page .client-camera-actions {
  gap: 7px;
}

.client-photo-intake-page .client-camera-actions .button,
.client-photo-intake-page .client-photo-save-button {
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 13px;
  font-size: 0.9rem;
}

.client-photo-intake-page .client-photo-save-button {
  margin-top: 0;
}

.client-photo-intake-page .client-camera-message,
.client-photo-intake-page .client-photo-intake-status {
  min-height: 0;
  font-size: 0.78rem;
  line-height: 1.2;
}

.client-photo-intake-page .client-photo-upload-fallback {
  gap: 5px;
  justify-items: start;
}

.client-photo-intake-page .client-photo-upload-toggle {
  min-height: 30px;
  padding: 6px 11px;
  font-size: 0.78rem;
}

@media (max-width: 620px), (max-height: 760px) and (max-width: 920px) {
  .client-photo-intake-page .client-photo-intake-compact-main {
    margin-top: 8px;
  }

  .client-photo-intake-page .client-photo-intake-compact-card {
    padding: 9px;
    border-radius: 17px;
  }

  .client-photo-intake-page .client-photo-intake-form {
    gap: 6px;
  }

  .client-photo-intake-page .client-camera-preview {
    aspect-ratio: 4 / 3;
    max-height: min(36svh, 250px);
    border-radius: 13px;
  }

  .client-photo-intake-page .client-camera-placeholder {
    padding: 8px;
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .client-photo-intake-page .client-camera-actions .button,
  .client-photo-intake-page .client-photo-save-button {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 12px;
    font-size: 0.84rem;
  }

  .client-photo-intake-page .client-camera-message {
    font-size: 0.74rem;
  }

  .client-photo-intake-page .client-photo-upload-toggle {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 0.74rem;
  }

  .client-photo-intake-page .client-photo-file-fallback {
    padding: 7px 8px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .client-photo-intake-page .client-photo-intake-compact-main {
    max-width: min(760px, calc(100vw - 20px));
  }

  .client-photo-intake-page .client-photo-intake-form {
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.52fr);
    align-items: start;
  }

  .client-photo-intake-page .client-camera-capture {
    grid-column: 1;
  }

  .client-photo-intake-page .client-photo-save-button,
  .client-photo-intake-page .client-photo-upload-fallback,
  .client-photo-intake-page .client-photo-intake-status {
    grid-column: 2;
  }

  .client-photo-intake-page .client-camera-preview {
    max-height: calc(100svh - 190px);
  }
}

/* Catalogue photo intake modal - June 2026 */
.photo-intake-dialog {
  padding: 12px;
}

.photo-intake-panel {
  width: min(560px, 100%);
  max-height: calc(100svh - 24px);
  display: grid;
  overflow: hidden;
}

.photo-intake-dialog-head {
  padding: 16px 16px 8px;
}

.photo-intake-dialog-head p {
  max-width: 34rem;
  margin: 5px 0 0;
  font-size: 0.9rem;
  line-height: 1.3;
}

.client-photo-intake-modal-form {
  display: grid;
  gap: 7px;
  min-height: 0;
  padding: 0 16px 16px;
  overflow: auto;
}

.photo-intake-dialog .client-camera-capture {
  gap: 7px;
}

.photo-intake-dialog .client-camera-preview {
  max-height: min(38svh, 260px);
  border-radius: 14px;
}

.photo-intake-dialog .client-camera-actions {
  gap: 7px;
}

.photo-intake-dialog .client-camera-actions .button,
.photo-intake-dialog .client-photo-save-button {
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 0.86rem;
}

.photo-intake-dialog .client-camera-message,
.photo-intake-dialog .client-photo-intake-status {
  min-height: 0;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.2;
}

.photo-intake-dialog .client-photo-upload-fallback {
  gap: 5px;
  justify-items: start;
}

.photo-intake-dialog .client-photo-upload-toggle {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 0.74rem;
}

.photo-intake-dialog .client-photo-file-fallback {
  padding: 7px 8px;
}

.photo-intake-dialog .client-photo-file-fallback small {
  display: none;
}

@media (max-width: 560px), (max-height: 660px) {
  .photo-intake-dialog {
    align-items: start;
    padding: 8px;
  }

  .photo-intake-panel {
    width: 100%;
    max-height: calc(100svh - 16px);
    border-radius: 20px;
  }

  .photo-intake-dialog-head {
    align-items: center;
    padding: 10px 10px 6px;
  }

  .photo-intake-dialog-head h2 {
    font-size: clamp(1.1rem, 6vw, 1.35rem);
    line-height: 1;
  }

  .photo-intake-dialog-head span {
    margin-bottom: 3px;
    font-size: 0.66rem;
  }

  .photo-intake-dialog-head p {
    display: none;
  }

  .client-photo-intake-modal-form {
    gap: 5px;
    padding: 0 10px 10px;
  }

  .photo-intake-dialog .client-camera-preview {
    aspect-ratio: 4 / 3;
    max-height: min(34svh, 230px);
    border-radius: 12px;
  }

  .photo-intake-dialog .client-camera-placeholder {
    padding: 8px;
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .photo-intake-dialog .client-camera-actions .button,
  .photo-intake-dialog .client-photo-save-button {
    min-height: 32px;
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  .photo-intake-dialog .client-camera-message,
  .photo-intake-dialog .client-photo-intake-status {
    font-size: 0.72rem;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .client-photo-intake-modal-form {
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.54fr);
    align-items: start;
  }

  .photo-intake-dialog .client-camera-capture {
    grid-column: 1;
  }

  .photo-intake-dialog .client-photo-save-button,
  .photo-intake-dialog .client-photo-upload-fallback,
  .photo-intake-dialog .client-photo-intake-status {
    grid-column: 2;
  }

  .photo-intake-dialog .client-camera-preview {
    max-height: calc(100svh - 122px);
  }
}

/* Client mobile header: keep shop mode button top-right on every client page.
   Earlier compacting was scoped to the catalogue page only, so Orders/Riders/
   Settings/Money still stretched the Open/Closed control full-width on phones. */
@media (max-width: 620px) {
  .client-nav-main-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .client-nav-main-row .client-brand {
    grid-column: 1;
    order: 1;
    min-width: 0;
  }

  .client-nav-main-row .client-nav-status-slot {
    grid-column: 2;
    order: 1;
    width: auto;
    justify-content: flex-end;
  }

  .client-nav-main-row .client-nav-scroll {
    grid-column: 1 / -1;
    order: 2;
    width: 100%;
  }

  .client-shop-mode-control {
    width: auto;
  }

  .client-shop-mode-summary {
    width: auto;
    min-width: 132px;
    min-height: 52px;
    padding: 9px 14px 9px 16px;
    border-radius: 19px;
  }

  .client-shop-mode-menu {
    left: auto;
    right: 0;
    min-width: 148px;
  }
}

@media (max-width: 420px) {
  .client-shop-mode-summary {
    min-width: 116px;
    padding-inline: 12px;
  }
}

/* Client dashboard delivery slot grouping - June 2026 */
.client-order-slot-groups {
  display: grid;
  gap: 16px;
}

.client-order-slot-group {
  padding: clamp(12px, 1.6vw, 16px);
  border: 1px solid rgba(188, 204, 220, 0.74);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.client-order-slot-group.tone-rush {
  border-color: rgba(31, 146, 84, 0.28);
  background: linear-gradient(180deg, #f0fff6, #ffffff 58%);
}

.client-order-slot-group.tone-soon,
.client-order-slot-group.tone-active {
  border-color: rgba(31, 146, 84, 0.28);
  background: linear-gradient(180deg, #f0fff6, #ffffff 58%);
}

.client-order-slot-group.tone-collection {
  border-color: rgba(24, 111, 175, 0.24);
  background: linear-gradient(180deg, #eef7ff, #ffffff 58%);
}

.client-order-slot-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: -2px -2px 12px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  background: #ffffff;
}

.client-order-slot-group-head .client-section-eyebrow {
  color: #00684a;
  opacity: 1;
}

.client-order-slot-group.tone-rush .client-order-slot-group-head {
  border-color: #b7e4c6;
  background: #f6fff9;
}

.client-order-slot-group.tone-rush .client-order-slot-group-head .client-section-eyebrow {
  color: #00684a;
  opacity: 1;
}

.client-order-slot-group.tone-rush .client-order-slot-group-head h3 {
  color: #082f49;
  opacity: 1;
}

.client-order-slot-group.tone-rush .client-order-slot-group-head p {
  color: #2f4a64;
  opacity: 1;
}

.client-order-slot-group.tone-collection .client-order-slot-group-head .client-section-eyebrow {
  color: #075985;
}

.client-order-slot-group-head h3 {
  margin: 3px 0 0;
  color: #0b3048;
  opacity: 1;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.client-order-slot-group-head p {
  margin: 5px 0 0;
  color: #36556f;
  opacity: 1;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.35;
}

.client-order-slot-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: #e8f1fa;
  color: #214260;
  opacity: 1;
  font-weight: 900;
  font-size: 0.86rem;
  white-space: nowrap;
}

.client-order-slot-group .table-wrap {
  margin-top: 0;
}

@media (max-width: 720px) {
  .client-order-slot-groups {
    gap: 12px;
  }

  .client-order-slot-group {
    padding: 10px;
    border-radius: 18px;
  }

  .client-order-slot-group-head {
    align-items: flex-start;
    gap: 10px;
  }

  .client-order-slot-group-head p {
    font-size: 0.86rem;
  }

  .client-order-slot-count {
    padding: 6px 9px;
    font-size: 0.78rem;
  }
}

/* Client dashboard delivery slot title final contrast fix - June 2026
   Keep the slot title itself fully opaque even inside tinted/rush groups. */
.client-order-slot-group .client-order-slot-group-head h3,
.client-order-slot-group.tone-rush .client-order-slot-group-head h3,
.client-dashboard-glass-page .client-order-slot-group .client-order-slot-group-head h3 {
  color: #061f33 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
  font-weight: 950 !important;
}

.client-order-slot-group.tone-rush .client-order-slot-group-head h3 {
  color: #071f33 !important;
}

/* Client dashboard slot group de-ghosting - June 2026
   The dashboard card has a decorative ::before sheen across the top section.
   Keep grouped slot headers above that overlay so Rush / ASAP does not look
   washed out compared with normal queue section headers. */
.client-dashboard-glass-page .client-order-slot-groups,
.client-dashboard-glass-page .client-order-slot-group,
.client-dashboard-glass-page .client-order-slot-group-head {
  position: relative;
  z-index: 2;
}

.client-dashboard-glass-page .client-order-slot-group .table-wrap {
  position: relative;
  z-index: 2;
}

.client-dashboard-glass-page .client-order-slot-group-head {
  isolation: isolate;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 8px 18px rgba(15, 23, 42, 0.045);
}

.client-dashboard-glass-page .client-order-slot-group.tone-rush {
  background: linear-gradient(180deg, #f0fff6 0%, #ffffff 62%) !important;
  border-color: rgba(31, 146, 84, 0.28) !important;
}

.client-dashboard-glass-page .client-order-slot-group.tone-rush .client-order-slot-group-head {
  background: #f6fff9 !important;
  border-color: #b7e4c6 !important;
}

.client-dashboard-glass-page .client-order-slot-group.tone-rush .client-section-eyebrow,
.client-dashboard-glass-page .client-order-slot-group.tone-rush .client-order-slot-group-head h3,
.client-dashboard-glass-page .client-order-slot-group.tone-rush .client-order-slot-group-head p,
.client-dashboard-glass-page .client-order-slot-group.tone-rush .client-order-slot-count {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.client-dashboard-glass-page .client-order-slot-group.tone-rush .client-section-eyebrow {
  color: #00684a !important;
}

.client-dashboard-glass-page .client-order-slot-group.tone-rush .client-order-slot-group-head h3 {
  color: #082f49 !important;
}

.client-dashboard-glass-page .client-order-slot-group.tone-rush .client-order-slot-group-head p {
  color: #244a66 !important;
}

.client-dashboard-glass-page .client-order-slot-group.tone-rush .client-order-slot-count {
  background: #e7f7ee !important;
  color: #0f5132 !important;
}

/* Client dashboard: make the pickup PIN the main progress cue once an order is ready. */
.client-progress-summary-pin-only {
  min-width: 0;
  gap: 8px;
}

.client-pickup-pin-focus {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 112px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #583500;
  box-shadow: none;
}

.client-pickup-pin-focus-code {
  display: block;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 0.95;
  font-weight: 1000;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.client-pickup-pin-focus-help,
.client-pickup-pin-focus-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: #7a4d00;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.client-pickup-pin-focus-state {
  background: #fff1f1;
  color: #8a1f1f;
}

.client-pickup-pin-focus.is-locked {
  background: transparent;
  color: #7f1d1d;
}

@media (max-width: 760px) {
  .client-pickup-pin-focus {
    min-width: 96px;
    padding: 0;
  }

  .client-pickup-pin-focus-code {
    font-size: 2rem;
  }
}

/* Client dashboard: style pickup PIN like the order number tile - June 2026 */
.client-dashboard-glass-page .client-pickup-pin-focus {
  min-width: 116px;
  padding: 10px 14px 8px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(219, 234, 254, 0.92));
  color: #075985;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 rgba(14, 116, 144, 0.14),
    0 13px 27px rgba(7, 89, 133, 0.14);
}

.client-dashboard-glass-page .client-pickup-pin-focus-code {
  color: #075985;
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  letter-spacing: 0.11em;
  text-shadow: none;
}

.client-dashboard-glass-page .client-pickup-pin-focus-help {
  margin-top: 2px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.92);
  color: #0f4f75;
  border: 1px solid rgba(186, 230, 253, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}

.client-dashboard-glass-page .client-pickup-pin-focus-state {
  margin-top: 2px;
  background: #fff1f1;
  color: #8a1f1f;
  border: 1px solid rgba(248, 113, 113, 0.22);
}

.client-dashboard-glass-page .client-pickup-pin-focus.is-locked {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(254, 226, 226, 0.92));
  color: #7f1d1d;
  border-color: rgba(254, 202, 202, 0.85);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 rgba(127, 29, 29, 0.12),
    0 13px 27px rgba(127, 29, 29, 0.10);
}

.client-dashboard-glass-page .client-pickup-pin-focus.is-locked .client-pickup-pin-focus-code {
  color: #7f1d1d;
}

@media (max-width: 760px) {
  .client-dashboard-glass-page .client-pickup-pin-focus {
    min-width: 104px;
    padding: 9px 12px 7px;
    border-radius: 16px;
  }

  .client-dashboard-glass-page .client-pickup-pin-focus-code {
    font-size: 2rem;
  }
}

/* Client dashboard pickup PIN: number tile with separate helper pill - June 2026 */
.client-dashboard-glass-page .client-pickup-pin-focus {
  min-width: 116px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #075985;
  box-shadow: none;
  gap: 7px;
}

.client-dashboard-glass-page .client-pickup-pin-focus-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 116px;
  padding: 10px 16px 9px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(219, 234, 254, 0.92));
  color: #075985;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 rgba(14, 116, 144, 0.14),
    0 13px 27px rgba(7, 89, 133, 0.14);
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  letter-spacing: 0.11em;
  text-shadow: none;
}

.client-dashboard-glass-page .client-pickup-pin-focus-help {
  margin-top: 0;
  padding: 5px 12px;
  background: #e7f7ee;
  color: #0f5132;
  border: 1px solid rgba(34, 197, 94, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 14px rgba(15, 81, 50, 0.08);
}

.client-dashboard-glass-page .client-pickup-pin-focus-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 5px 12px;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 999px;
  background: #eef6ff;
  color: #075985;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 6px 14px rgba(7, 89, 133, 0.07);
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
}

.client-dashboard-glass-page .client-pickup-pin-focus-state {
  margin-top: 0;
}

.client-dashboard-glass-page .client-pickup-pin-focus.is-locked {
  background: transparent;
  color: #7f1d1d;
  border: 0;
  box-shadow: none;
}

.client-dashboard-glass-page .client-pickup-pin-focus.is-locked .client-pickup-pin-focus-code {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(254, 226, 226, 0.92));
  color: #7f1d1d;
  border-color: rgba(254, 202, 202, 0.85);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 rgba(127, 29, 29, 0.12),
    0 13px 27px rgba(127, 29, 29, 0.10);
}

@media (max-width: 760px) {
  .client-dashboard-glass-page .client-pickup-pin-focus {
    min-width: 104px;
    padding: 0;
  }

  .client-dashboard-glass-page .client-pickup-pin-focus-code {
    min-width: 104px;
    padding: 9px 14px 8px;
    border-radius: 16px;
    font-size: 2rem;
  }
}

@media (max-width: 680px) {
  .client-items-summary {
    min-width: 0;
    column-gap: 6px;
  }

  .client-items-badges {
    max-width: 132px;
    gap: 3px;
  }

  .client-payment-pill,
  .client-substitution-pill {
    padding: 2px 6px;
    font-size: 0.64rem;
  }
}

/* Client dashboard progress pills: keep Rush/assignment context compact in top-right. */
.client-dashboard-glass-page .client-progress-summary {
  position: relative;
  padding-right: clamp(116px, 28%, 220px);
}

.client-dashboard-glass-page .client-progress-summary-pin-only {
  align-items: flex-start;
  min-height: 106px;
}

.client-dashboard-glass-page .client-progress-top-pills {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 5px;
  max-width: min(58%, 280px);
  pointer-events: none;
}

.client-dashboard-glass-page .client-progress-top-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(14, 116, 144, 0.20);
  background: #eef6ff;
  color: #075985;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 6px 14px rgba(7, 89, 133, 0.07);
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
}

.client-dashboard-glass-page .client-progress-top-pill.is-rush {
  border-color: rgba(217, 119, 6, 0.24);
  background: #fff7ed;
  color: #9a3412;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 14px rgba(154, 52, 18, 0.08);
}

.client-dashboard-glass-page .client-progress-top-pill.is-assignment {
  border-color: rgba(34, 197, 94, 0.24);
  background: #e7f7ee;
  color: #0f5132;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 14px rgba(15, 81, 50, 0.08);
}

.client-dashboard-glass-page .client-progress-summary-pin-only .client-pickup-pin-focus {
  margin-top: 6px;
}

.client-dashboard-glass-page .client-progress-summary-pin-only .client-pickup-pin-focus-status {
  display: none;
}

@media (max-width: 820px) {
  .client-dashboard-glass-page .client-progress-summary {
    padding-right: 0;
  }

  .client-dashboard-glass-page .client-progress-top-pills {
    position: static;
    max-width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    order: -1;
    margin-bottom: 2px;
  }

  .client-dashboard-glass-page .client-progress-summary-pin-only {
    min-height: 0;
  }
}

/* Client dashboard pickup PIN row height trim - June 2026
   The large PIN tile should not make the whole order row taller than normal rows. */
.client-dashboard-glass-page .client-progress-summary-pin-only {
  min-height: 0;
  align-items: flex-start;
}

.client-dashboard-glass-page .client-progress-summary-pin-only .client-pickup-pin-focus {
  margin-top: 0;
}

.client-dashboard-glass-page .client-progress-summary-pin-only .client-pickup-pin-focus-code {
  min-width: 108px;
  padding: 7px 14px 6px;
  border-radius: 16px;
  font-size: clamp(1.75rem, 2.7vw, 2.18rem);
  line-height: 0.92;
}

@media (max-width: 760px) {
  .client-dashboard-glass-page .client-progress-summary-pin-only .client-pickup-pin-focus-code {
    min-width: 96px;
    padding: 7px 12px 6px;
    font-size: 1.85rem;
  }
}


/* Client dashboard: Rush belongs with item/payment context, not Progress. */
.client-rush-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(217, 119, 6, 0.24);
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 14px rgba(154, 52, 18, 0.08);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.client-dashboard-glass-page .client-progress-summary {
  padding-right: 0;
}

.client-dashboard-glass-page .client-progress-summary.has-context-pills {
  padding-right: clamp(116px, 28%, 220px);
}

@media (max-width: 680px) {
  .client-rush-pill {
    padding: 2px 6px;
    font-size: 0.64rem;
  }
}

@media (max-width: 820px) {
  .client-dashboard-glass-page .client-progress-summary.has-context-pills {
    padding-right: 0;
  }
}


/* Product entry guardrails */
.quick-entry-form-status {
  margin: -2px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

.quick-entry-form-status.is-ready {
  border-color: rgba(22, 163, 74, 0.24);
  background: rgba(240, 253, 244, 0.94);
  color: #166534;
}

.quick-entry-form-status.is-warning {
  border-color: rgba(217, 119, 6, 0.24);
  background: rgba(255, 251, 235, 0.96);
  color: #92400e;
}

.quick-entry-action-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: right;
}

.quick-entry-action-note strong {
  color: var(--text);
}

.product-editor-basics-check {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 13px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.94);
}

.product-editor-basics-check > strong {
  margin-right: 2px;
  color: var(--text);
  font-size: 0.82rem;
}

.product-editor-basics-check > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.product-editor-basics-check > span::before {
  content: '○';
  font-size: 0.86rem;
  line-height: 1;
}

.product-editor-basics-check > span.is-complete {
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(240, 253, 244, 0.95);
  color: #166534;
}

.product-editor-basics-check > span.is-complete::before {
  content: '✓';
}

.product-editor-basics-check > small {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.product-editor-basics-check.is-ready {
  border-color: rgba(22, 163, 74, 0.24);
  background: rgba(240, 253, 244, 0.88);
}

.product-editor-basics-check.is-ready > small {
  color: #166534;
  font-weight: 800;
}

.product-editor-basics-check.is-warning {
  border-color: rgba(217, 119, 6, 0.22);
  background: rgba(255, 251, 235, 0.90);
}

.product-editor-basics-check.is-warning > small {
  color: #92400e;
}

@media (max-width: 560px) {
  .quick-entry-action-note {
    text-align: left;
  }

  .product-editor-basics-check {
    align-items: flex-start;
  }
}

/* Shop recruitment landing page */
.for-shops-page {
  background:
    radial-gradient(circle at 12% 4%, rgba(115, 191, 67, 0.18), transparent 28rem),
    radial-gradient(circle at 90% 8%, rgba(24, 111, 175, 0.14), transparent 30rem),
    linear-gradient(180deg, #eef8f1 0%, #f4f7fb 360px);
}

.for-shops-main {
  display: grid;
  gap: 20px;
}

.for-shops-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.75fr);
  gap: 20px;
  padding: clamp(24px, 5vw, 54px);
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.for-shops-hero-copy h1 {
  max-width: 15ch;
  margin: 0;
  color: #0f2f46;
  font-size: clamp(2.45rem, 6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.for-shops-lead {
  max-width: 62ch;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.65;
}

.for-shops-tagline {
  margin: 14px 0 0;
  color: #277247;
  font-weight: 800;
}

.for-shops-actions {
  margin-top: 24px;
}

.for-shops-approval-card,
.for-shops-feature-card,
.for-shops-section,
.for-shops-final-cta {
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.for-shops-approval-card {
  align-self: stretch;
  padding: 24px;
  background: linear-gradient(145deg, #effbea, #fff);
}

.for-shops-approval-card h2,
.for-shops-section h2,
.for-shops-feature-card h2,
.for-shops-final-cta h2 {
  margin: 0;
  color: #0f2f46;
}

.for-shops-approval-card p:last-child,
.for-shops-feature-card p,
.for-shops-final-cta p {
  color: var(--muted);
  line-height: 1.6;
}

.for-shops-section {
  padding: clamp(22px, 4vw, 38px);
}

.for-shops-section-heading {
  margin-bottom: 20px;
}

.for-shops-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.for-shops-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-soft);
}

.for-shops-steps li > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #277247;
  color: #fff;
  font-weight: 800;
}

.for-shops-steps h3 {
  margin: 4px 0 7px;
  font-size: 1rem;
}

.for-shops-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.for-shops-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.for-shops-feature-card {
  padding: clamp(22px, 4vw, 34px);
}

.for-shops-bestsellers {
  background: linear-gradient(135deg, #eef8ff, #fff);
}

.for-shops-pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr);
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, #0f2f46, #185c78);
  color: #fff;
}

.for-shops-pricing h2,
.for-shops-pricing .page-kicker {
  color: #fff;
}

.for-shops-cost-note {
  color: #dcebf2;
  line-height: 1.55;
}

.for-shops-price-card {
  display: grid;
  gap: 5px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  text-align: center;
}

.for-shops-price-card strong {
  font-size: 3.5rem;
  line-height: 1;
}

.for-shops-price-card span {
  font-weight: 800;
}

.for-shops-price-card small {
  color: #dcebf2;
}

.for-shops-payment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.for-shops-payment-grid article {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-soft);
}

.for-shops-payment-grid h3 {
  margin-top: 0;
}

.for-shops-payment-grid p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.for-shops-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.for-shops-faq details {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
}

.for-shops-faq summary {
  cursor: pointer;
  font-weight: 800;
}

.for-shops-faq details p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.for-shops-final-cta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 4vw, 36px);
}

.shop-registration-info-links {
  margin-top: 14px;
}

@media (max-width: 980px) {
  .for-shops-hero,
  .for-shops-pricing {
    grid-template-columns: 1fr;
  }

  .for-shops-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .for-shops-page .app-shell {
    width: min(100% - 16px, 1220px);
    padding-top: 8px;
  }

  .for-shops-main {
    gap: 12px;
  }

  .for-shops-hero,
  .for-shops-section,
  .for-shops-feature-card,
  .for-shops-final-cta {
    padding: 18px;
    border-radius: 22px;
  }

  .for-shops-hero-copy h1 {
    font-size: clamp(2.25rem, 12vw, 3.5rem);
  }

  .for-shops-actions,
  .for-shops-final-cta {
    display: grid;
  }

  .for-shops-actions .button,
  .for-shops-final-cta .button {
    width: 100%;
  }

  .for-shops-feature-grid,
  .for-shops-payment-grid,
  .for-shops-faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .for-shops-steps {
    grid-template-columns: 1fr;
  }
}

/* Shop registration page */
.shop-registration-page {
  background:
    radial-gradient(circle at 12% 4%, rgba(115, 191, 67, 0.18), transparent 28rem),
    radial-gradient(circle at 90% 8%, rgba(24, 111, 175, 0.14), transparent 30rem),
    linear-gradient(180deg, #eef8f1 0%, #f4f7fb 360px);
}

.shop-registration-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 20px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.shop-registration-hero-copy h1 {
  margin: 0;
  color: #0f2f46;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.shop-registration-hero-copy > p:not(.page-kicker) {
  max-width: 62ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.shop-registration-hero-points {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.shop-registration-hero-points span {
  padding: 8px 11px;
  border: 1px solid rgba(39, 114, 71, 0.18);
  border-radius: 999px;
  background: #effbea;
  color: #277247;
  font-size: 0.82rem;
  font-weight: 800;
}

.shop-registration-approval {
  padding: 22px;
  border: 1px solid rgba(39, 114, 71, 0.18);
  border-radius: 24px;
  background: linear-gradient(145deg, #effbea, #fff);
}

.shop-registration-approval h2 {
  margin: 0;
  color: #0f2f46;
}

.shop-registration-approval p:last-child {
  color: var(--muted);
  line-height: 1.6;
}

.shop-registration-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.65fr);
  gap: 20px;
  align-items: start;
}

.shop-registration-form-panel,
.shop-registration-guidance-card {
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow);
}

.shop-registration-form-panel {
  padding: clamp(20px, 3vw, 32px);
}

.shop-registration-panel-heading h2 {
  margin: 0;
  color: #0f2f46;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.shop-registration-panel-heading > p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

.shop-registration-form {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.shop-registration-form-section {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel-soft);
}

.shop-registration-form-section legend {
  padding: 0 8px;
  color: #0f2f46;
  font-size: 1.08rem;
  font-weight: 900;
}

.shop-registration-section-note {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.45;
}

.shop-registration-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.shop-registration-field-grid label {
  display: grid;
  align-content: start;
  gap: 7px;
  color: #0f2f46;
  font-weight: 800;
}

.shop-registration-field-grid label small {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
}

.shop-registration-field-wide {
  grid-column: 1 / -1;
}

.shop-registration-login-email {
  grid-column: 1 / -1;
}

.shop-registration-slug-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: #fff;
}

.shop-registration-slug-input > span {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--border);
  background: #eef4f8;
  color: var(--muted);
  font-weight: 800;
}

.shop-registration-slug-input input {
  border: 0;
  border-radius: 0;
}

.shop-registration-slug-input:focus-within {
  outline: 3px solid rgba(24, 111, 175, 0.15);
  border-color: var(--accent);
}

.shop-registration-slug-input input:focus {
  outline: 0;
}

.shop-registration-terms {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(24, 111, 175, 0.18);
  border-radius: 16px;
  background: #eef7ff;
  line-height: 1.5;
}

.shop-registration-terms input {
  width: auto;
  margin-top: 3px;
}

.shop-registration-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.shop-registration-actions p {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.shop-registration-guidance {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
}

.shop-registration-guidance-card {
  padding: 20px;
}

.shop-registration-next-steps {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-registration-next-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
}

.shop-registration-next-steps li > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #277247;
  color: #fff;
  font-weight: 900;
}

.shop-registration-next-steps strong,
.shop-registration-next-steps small {
  display: block;
}

.shop-registration-next-steps small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.shop-registration-email-guide {
  display: grid;
  gap: 10px;
}

.shop-registration-email-guide > div {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
}

.shop-registration-email-guide strong,
.shop-registration-email-guide span {
  display: block;
}

.shop-registration-email-guide span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.shop-registration-help-card h2 {
  margin: 0;
  color: #0f2f46;
  font-size: 1.15rem;
}

.shop-registration-help-card > p {
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .shop-registration-hero,
  .shop-registration-layout {
    grid-template-columns: 1fr;
  }

  .shop-registration-guidance {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-registration-help-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .shop-registration-page .app-shell {
    width: min(100% - 16px, 1220px);
    padding-top: 8px;
  }

  .shop-registration-hero,
  .shop-registration-form-panel,
  .shop-registration-guidance-card {
    padding: 17px;
    border-radius: 21px;
  }

  .shop-registration-hero-copy h1 {
    font-size: clamp(2.25rem, 12vw, 3.4rem);
  }

  .shop-registration-field-grid,
  .shop-registration-guidance {
    grid-template-columns: 1fr;
  }

  .shop-registration-help-card {
    grid-column: auto;
  }

  .shop-registration-actions {
    display: grid;
  }

  .shop-registration-actions .button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .shop-registration-hero-points {
    display: grid;
  }

  .shop-registration-form-section {
    padding: 15px;
  }

  .shop-registration-slug-input {
    grid-template-columns: 1fr;
  }

  .shop-registration-slug-input > span {
    justify-content: start;
    min-height: 38px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

/* Public search polish */
.global-product-search-page {
  --brand-green: #73bf43;
  --brand-green-deep: #277247;
  --brand-ink: #0f2f46;
  background:
    radial-gradient(circle at 12% 4%, rgba(115, 191, 67, 0.22), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(24, 111, 175, 0.16), transparent 30rem),
    linear-gradient(180deg, #eef8f1 0%, #f5f8fb 310px, #f4f7fb 100%);
}

.global-product-search-page .app-shell {
  padding-bottom: 30px;
}

.platform-product-search-form,
.global-search-form {
  display: grid;
  gap: 10px;
  width: min(100%, 760px);
  margin-top: 24px;
  padding: clamp(13px, 2vw, 17px);
  border: 1px solid rgba(39, 114, 71, 0.20);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 18px 42px rgba(15, 47, 70, 0.12);
}

.platform-product-search-form label,
.global-search-form label {
  color: var(--brand-ink, #0f2f46);
  font-size: 0.94rem;
  font-weight: 950;
}

.platform-product-search-row,
.global-search-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.platform-product-search-row input,
.global-search-input-row input {
  width: 100%;
  min-height: 54px;
  padding: 0 17px;
  border: 1px solid rgba(188, 204, 220, 0.98);
  border-radius: 17px;
  background: #fff;
  color: var(--brand-ink, #0f2f46);
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.platform-product-search-row input:focus,
.global-search-input-row input:focus {
  border-color: rgba(39, 114, 71, 0.42);
  box-shadow: 0 0 0 4px rgba(115, 191, 67, 0.16);
  outline: none;
}

.platform-product-search-row .button,
.global-search-input-row .button {
  min-height: 54px;
  padding-inline: 22px;
  border-radius: 17px;
  background: var(--brand-green-deep, #277247);
  border-color: rgba(39, 114, 71, 0.22);
  color: #fff;
}

.platform-search-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.platform-search-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(39, 114, 71, 0.16);
  border-radius: 999px;
  background: #eef8f1;
  color: #285c3c;
  font-size: 0.8rem;
  font-weight: 900;
  text-decoration: none;
}

.platform-search-chips a:hover,
.platform-search-chips a:focus-visible {
  background: #e1f4e9;
  color: #17492c;
}

.global-search-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  margin-bottom: 18px;
  padding: clamp(24px, 5vw, 44px);
  overflow: hidden;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 30px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.96) 0%, rgba(234, 253, 240, 0.96) 30%, rgba(232, 245, 255, 0.94) 62%, rgba(255, 251, 235, 0.90) 100%);
  background-size: 240% 240%;
  box-shadow: 0 22px 60px rgba(15, 47, 70, 0.13);
  animation: platform-hero-colour-shift 18s ease-in-out infinite;
}

.global-search-hero::after {
  content: "";
  position: absolute;
  left: clamp(-34px, 2vw, 28px);
  top: clamp(12px, 5vw, 56px);
  width: clamp(260px, 34vw, 460px);
  aspect-ratio: 1;
  background: url("img/basildon-delivery-icon.png") center / contain no-repeat;
  opacity: 0.085;
  transform: rotate(-10deg);
  pointer-events: none;
}

.global-search-hero-copy,
.global-search-form {
  position: relative;
  z-index: 1;
}

.global-search-hero-copy .page-kicker,
.global-search-suggestions .page-kicker,
.global-search-results-heading .page-kicker {
  color: var(--brand-green-deep, #277247);
}

.global-search-hero h1 {
  max-width: 720px;
  margin: 0;
  color: var(--brand-ink, #0f2f46);
  font-size: clamp(2.35rem, 6vw, 4.7rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.global-search-hero-copy > p:not(.page-kicker) {
  max-width: 62ch;
  margin: 16px 0 0;
  color: #34516a;
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
  line-height: 1.62;
}

.global-search-form {
  margin-top: 0;
  justify-self: stretch;
}

.global-search-suggestions,
.global-search-results-section {
  margin-top: 18px;
}

.global-search-suggestions {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.82);
}

.global-search-suggestions h2,
.global-search-empty h2,
.global-product-card h3 {
  color: var(--brand-ink, #0f2f46);
}

.global-search-suggestion-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.global-search-suggestion-list .chip,
.global-product-fulfilment .chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(39, 114, 71, 0.16);
  border-radius: 999px;
  background: #eef8f1;
  color: #285c3c;
  font-size: 0.8rem;
  font-weight: 900;
  text-decoration: none;
}

.global-product-fulfilment .chip.delivery {
  border-color: rgba(30, 95, 150, 0.18);
  background: #eef7ff;
  color: #225f92;
}

.global-product-fulfilment .chip.collection {
  border-color: rgba(39, 114, 71, 0.2);
  background: #edf8f1;
  color: #277247;
}

.global-product-fulfilment .chip.browse {
  border-color: rgba(51, 85, 115, 0.18);
  background: #f2f6fa;
  color: #405a70;
}

.global-product-fulfilment .chip.closed {
  border-color: rgba(179, 107, 24, 0.22);
  background: #fff5e8;
  color: #915716;
}

.global-search-results-heading {
  padding: 0 4px;
}

.global-search-results-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.global-product-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid rgba(188, 204, 220, 0.74);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 36px rgba(15, 47, 70, 0.08);
}

.global-product-image {
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 20px;
  background: linear-gradient(135deg, #f0fff6 0%, #eef6ff 100%);
  color: #486581;
  font-weight: 900;
  text-decoration: none;
}

.global-product-image img {
  width: 100%;
  height: 100%;
  min-height: 150px;
  max-height: 180px;
  object-fit: cover;
}

.global-product-body {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.global-product-topline,
.global-product-price-row,
.global-product-fulfilment,
.global-product-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.global-product-topline {
  justify-content: space-between;
}

.global-product-card h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.08;
}

.global-product-card h3 a,
.global-product-shop a {
  color: inherit;
  text-decoration: none;
}

.global-product-card h3 a:hover,
.global-product-shop a:hover {
  text-decoration: underline;
}

.global-product-price-row .price-tag {
  background: #edf8f1;
  border: 1px solid rgba(39, 114, 71, 0.2);
  color: var(--brand-green-deep, #277247);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  font-size: 1.35rem;
  font-weight: 950;
}

.global-product-price-row span:not(.price-tag) {
  color: #607089;
  font-size: 0.88rem;
  font-weight: 850;
}

.global-product-shop,
.global-product-category,
.global-product-card .shop-product-description {
  margin: 0;
  color: #486581;
  line-height: 1.45;
}

.global-product-shop {
  font-weight: 900;
}

.global-product-category {
  font-size: 0.88rem;
  font-weight: 850;
}

.global-product-actions {
  margin-top: 3px;
}

.global-product-actions .button.primary {
  background: var(--brand-green-deep, #277247);
  border-color: rgba(39, 114, 71, 0.22);
}

.global-search-empty {
  padding: clamp(18px, 3vw, 24px);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 900px) {
  .global-search-hero {
    grid-template-columns: 1fr;
  }

  .global-search-form {
    width: 100%;
  }

  .global-search-suggestions {
    display: grid;
    align-items: start;
  }

  .global-search-suggestion-list {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .global-product-search-page .app-shell {
    width: min(100% - 16px, 1220px);
    padding-top: 8px;
  }

  .platform-product-search-form,
  .global-search-form {
    margin-top: 15px;
    padding: 12px;
    border-radius: 20px;
  }

  .platform-product-search-row,
  .global-search-input-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .platform-product-search-row input,
  .global-search-input-row input,
  .platform-product-search-row .button,
  .global-search-input-row .button {
    min-height: 48px;
    border-radius: 15px;
  }

  .global-search-hero {
    gap: 14px;
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 24px;
  }

  .global-search-hero::after {
    left: -52px;
    top: 36px;
    width: 300px;
    opacity: 0.065;
  }

  .global-search-hero h1 {
    font-size: clamp(2.05rem, 11vw, 3.25rem);
  }

  .global-search-hero-copy > p:not(.page-kicker) {
    margin-top: 11px;
    font-size: 0.96rem;
    line-height: 1.48;
  }

  .global-product-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 11px;
    border-radius: 20px;
  }

  .global-product-image,
  .global-product-image img {
    min-height: 112px;
    max-height: 132px;
    border-radius: 16px;
  }

  .global-product-body {
    gap: 7px;
  }

  .global-product-card h3 {
    font-size: 1.14rem;
  }

  .global-product-price-row .price-tag {
    font-size: 1.14rem;
  }

  .global-product-actions .button {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 0.84rem;
  }
}

@media (max-width: 520px) {
  .global-product-card {
    grid-template-columns: 1fr;
  }

  .global-product-image,
  .global-product-image img {
    min-height: 190px;
    max-height: 220px;
  }

  .global-product-topline {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-search-hero {
    animation: none;
  }
}

/* Public marketplace polish: search-first homepage and shop directory cards */
.platform-search-only-hero {
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(390px, 48vw, 560px);
  align-items: center;
}

.platform-search-only-hero::after {
  left: auto;
  right: clamp(-80px, -2vw, -20px);
  top: clamp(10px, 4vw, 42px);
  width: clamp(300px, 36vw, 520px);
  opacity: 0.085;
  transform: rotate(12deg);
}

.platform-search-only-hero .platform-hero-copy {
  max-width: 980px;
}

.platform-search-only-hero .platform-product-search-form {
  width: min(100%, 880px);
  margin-top: 28px;
}

.platform-search-only-hero .platform-hero-copy > p:not(.page-kicker) {
  max-width: 68ch;
}

.platform-marketplace-shop-card {
  align-content: start;
  border-color: rgba(39, 114, 71, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 255, 249, 0.96) 100%);
}

.platform-shop-fulfilment-row .fulfilment-chip,
.shop-directory-fulfilment .chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(39, 114, 71, 0.16);
  border-radius: 999px;
  background: #eef8f1;
  color: #285c3c;
  font-size: 0.8rem;
  font-weight: 900;
  text-decoration: none;
}

.platform-shop-fulfilment-row .fulfilment-chip.delivery,
.shop-directory-fulfilment .chip.delivery {
  border-color: rgba(30, 95, 150, 0.18);
  background: #eef7ff;
  color: #225f92;
}

.platform-shop-fulfilment-row .fulfilment-chip.collection,
.shop-directory-fulfilment .chip.collection {
  border-color: rgba(39, 114, 71, 0.20);
  background: #edf8f1;
  color: #277247;
}

.platform-shop-fulfilment-row .fulfilment-chip.browse,
.shop-directory-fulfilment .chip.browse {
  border-color: rgba(51, 85, 115, 0.18);
  background: #f2f6fa;
  color: #405a70;
}

.platform-shop-fulfilment-row .fulfilment-chip.closed,
.shop-directory-fulfilment .chip.closed {
  border-color: rgba(179, 107, 24, 0.22);
  background: #fff5e8;
  color: #915716;
}

.shop-directory-market-card {
  grid-template-rows: auto auto auto auto 1fr;
  border-color: rgba(39, 114, 71, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 255, 249, 0.94) 100%);
}

.shop-directory-market-card .shop-directory-card-title {
  align-items: flex-start;
}

.shop-directory-market-card .shop-directory-card-title p {
  margin-top: 5px;
  color: #607089;
  font-size: 0.84rem;
  font-weight: 850;
}

.shop-directory-fulfilment {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.shop-directory-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.shop-directory-detail-grid div {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 64px;
  padding: 10px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 15px;
  background: #f5fbff;
}

.shop-directory-detail-grid span {
  color: #607089;
  font-size: 0.74rem;
  font-weight: 850;
}

.shop-directory-detail-grid strong {
  color: #0f2f46;
  font-size: 0.92rem;
  line-height: 1.18;
}

.shop-directory-market-card .shop-directory-actions {
  align-self: end;
}

@media (max-width: 760px) {
  .platform-search-only-hero {
    min-height: 0;
  }

  .platform-search-only-hero::after {
    right: -110px;
    top: 10px;
    width: 330px;
    opacity: 0.06;
  }

  .platform-search-only-hero .platform-product-search-form {
    margin-top: 18px;
  }

  .shop-directory-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Platform updates noticeboard */
.platform-updates-editor-card,
.platform-updates-list-card,
.platform-updates-empty-card {
  margin-bottom: 18px;
}

.platform-update-form {
  display: grid;
  gap: 16px;
}

.platform-update-body-field {
  display: grid;
  gap: 7px;
}

.platform-update-body-field textarea {
  min-height: 190px;
  resize: vertical;
}

.platform-update-pin-row {
  align-self: end;
}

.platform-update-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 9px;
}

.platform-update-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid rgba(72, 101, 129, 0.18);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.platform-update-chip.tone-green {
  border-color: rgba(31, 146, 84, 0.22);
  background: var(--success-soft);
  color: var(--success);
}

.platform-update-chip.tone-blue {
  border-color: rgba(24, 111, 175, 0.22);
  background: var(--accent-soft);
  color: var(--accent);
}

.platform-update-chip.tone-amber {
  border-color: rgba(173, 106, 0, 0.24);
  background: var(--warning-soft);
  color: var(--warning);
}

.platform-update-chip.tone-red {
  border-color: rgba(201, 60, 55, 0.22);
  background: var(--danger-soft);
  color: var(--danger);
}

.platform-update-chip.tone-purple {
  border-color: rgba(124, 58, 237, 0.22);
  background: #f3efff;
  color: #6d28d9;
}

.platform-update-chip.tone-muted {
  border-color: rgba(72, 101, 129, 0.18);
  background: #f3f6f9;
  color: var(--muted);
}

.platform-updates-feed,
.platform-update-admin-list {
  display: grid;
  gap: 12px;
}

.platform-update-card,
.platform-update-admin-row,
.platform-update-latest-card {
  border: 1px solid rgba(188, 204, 220, 0.75);
  border-left: 5px solid var(--accent);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.platform-update-card,
.platform-update-admin-row {
  padding: 15px;
  border-radius: 18px;
}

.platform-update-card.is-pinned {
  border-left-color: #7c3aed;
  background: linear-gradient(180deg, #ffffff 0%, #f8f5ff 100%);
}

.platform-update-card-head,
.platform-update-latest-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.platform-update-card h2,
.platform-update-latest-card h2 {
  margin: 0;
  line-height: 1.2;
}

.platform-update-card-head .muted,
.platform-update-latest-card p {
  margin: 6px 0 0;
}

.platform-update-body {
  margin-top: 12px;
  line-height: 1.55;
}

.platform-update-latest-card {
  align-items: center;
  margin-bottom: 16px;
  padding: 15px;
  border-radius: 18px;
}

.platform-update-latest-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.platform-update-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.platform-update-admin-main {
  min-width: 0;
}

.platform-update-admin-main h3 {
  margin: 0 0 8px;
  font-size: 1.12rem;
  line-height: 1.25;
}

.platform-update-admin-main p {
  margin: 0 0 10px;
  line-height: 1.45;
}

.platform-update-admin-main p:last-child {
  margin-bottom: 0;
}

.platform-update-admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  min-width: 230px;
}

.platform-update-admin-actions form {
  display: inline-flex;
  margin: 0;
}

.platform-update-admin-actions .button,
.platform-update-admin-actions button {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 11px;
}

@media (max-width: 760px) {
  .platform-update-admin-row {
    grid-template-columns: 1fr;
  }

  .platform-update-admin-actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .platform-update-latest-card {
    align-items: flex-start;
  }
}


/* Support tickets */
.support-ticket-panel,
.support-ticket-compose-panel,
.support-ticket-detail-panel,
.support-ticket-cta-panel {
    margin-bottom: 18px;
}

.support-filter-tabs,
.support-ticket-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.support-ticket-list {
    display: grid;
    gap: 12px;
}

.support-ticket-card {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.support-ticket-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.support-ticket-card.is-serious {
    border-color: rgba(220, 38, 38, 0.38);
}

.support-ticket-kicker,
.support-ticket-meta {
    color: var(--muted, #64748b);
    font-size: 0.88rem;
}

.support-ticket-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.support-ticket-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.support-message-thread {
    display: grid;
    gap: 12px;
    margin: 16px 0;
}

.support-message {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(248, 250, 252, 0.95);
}

.support-message.is-customer {
    background: rgba(239, 246, 255, 0.95);
}

.support-message.is-shop {
    background: rgba(240, 253, 244, 0.95);
}

.support-message.is-admin,
.support-message.is-platform {
    background: rgba(250, 245, 255, 0.95);
}

.support-message.is-internal {
    border-style: dashed;
}

.support-message-meta {
    color: var(--muted, #64748b);
    font-size: 0.86rem;
    margin-bottom: 6px;
}

.support-message-body {
    white-space: normal;
    line-height: 1.5;
}

.support-ticket-form,
.support-ticket-reply-form {
    display: grid;
    gap: 14px;
}

.support-ticket-form label,
.support-ticket-reply-form label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.support-ticket-form select,
.support-ticket-form textarea,
.support-ticket-reply-form textarea {
    width: 100%;
}

.support-serious-check {
    display: flex !important;
    align-items: flex-start;
    gap: 8px !important;
    font-weight: 600 !important;
}

@media (max-width: 720px) {
    .support-ticket-detail-head {
        display: grid;
    }
}

/* Messaging v1 */
.messaging-ajax-page {
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.messaging-ajax-page.is-updating {
    opacity: 0.66;
    pointer-events: none;
}

.messaging-ajax-page.is-updating .messaging-workspace-panel {
    transform: translateY(1px);
}

.messaging-ajax-page [aria-current="page"] {
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .messaging-ajax-page {
        transition: none;
    }
}

.messaging-workspace-panel {
    overflow: visible;
}

.messaging-workspace {
    display: grid;
    grid-template-columns: minmax(270px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.messaging-conversation-picker,
.messaging-thread-pane {
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.messaging-conversation-picker {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
}

.messaging-thread-pane {
    padding: 18px;
}

.messaging-picker-head,
.message-thread-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.messaging-picker-head h2 {
    margin: 0;
}

.messaging-picker-head .button.compact {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
}

.messaging-thread-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 1px 6px;
    scrollbar-width: thin;
}

.messaging-thread-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: inherit;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.88rem;
    white-space: nowrap;
}

.messaging-thread-tab:hover,
.messaging-thread-tab.is-active {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(219, 234, 254, 0.9);
    color: #1d4ed8;
}

.messaging-tab-count {
    min-width: 1.55rem;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: var(--muted, #64748b);
    text-align: center;
    font-size: 0.76rem;
}

.messaging-thread-tab.is-active .messaging-tab-count {
    background: rgba(37, 99, 235, 0.14);
    color: #1d4ed8;
}

.messaging-thread-list {
    align-content: start;
    gap: 10px;
}

.message-thread-card {
    gap: 7px;
    padding: 12px 13px;
    border-radius: 18px;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.72);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.message-thread-card:hover {
    background: rgba(255, 255, 255, 0.98);
}

.message-thread-card.is-selected {
    border-color: rgba(37, 99, 235, 0.44);
    background: rgba(239, 246, 255, 0.95);
    box-shadow: inset 4px 0 0 rgba(37, 99, 235, 0.5), 0 12px 28px rgba(37, 99, 235, 0.12);
}

.message-thread-card.has-unread {
    border-color: rgba(59, 130, 246, 0.55);
    background: rgba(239, 246, 255, 0.84);
}

.message-thread-card.has-unread strong::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 7px;
    border-radius: 999px;
    background: #2563eb;
    vertical-align: middle;
}

.message-thread-card-head strong {
    min-width: 0;
    line-height: 1.25;
}

.message-thread-time {
    flex: 0 0 auto;
    color: var(--muted, #64748b);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.message-thread-preview {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.messaging-picker-empty,
.messaging-thread-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 24px;
    border: 1px dashed rgba(15, 23, 42, 0.16);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.8);
    text-align: center;
}

.messaging-picker-empty h3,
.messaging-thread-empty h2 {
    margin: 0 0 6px;
}

.messaging-panel .support-message-thread,
.messaging-message-thread {
    margin-top: 1rem;
}

.messaging-message-thread {
    max-height: 58vh;
    overflow: auto;
    padding-right: 4px;
}

.message-bubble {
    max-width: min(680px, 92%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.message-bubble.is-own-message {
    margin-left: auto;
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(240, 253, 244, 0.95);
}

.message-bubble.is-own-message .support-message-meta {
    text-align: right;
}

.messaging-reply-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.messaging-start-panel {
    scroll-margin-top: 90px;
}

.messaging-start-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.messaging-start-grid .support-ticket-reply-form {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.72);
}

.messaging-page-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1rem;
}

@media (max-width: 980px) {
    .messaging-workspace {
        grid-template-columns: 1fr;
    }

    .messaging-message-thread {
        max-height: none;
    }
}

@media (max-width: 760px) {
    .messaging-thread-pane,
    .messaging-conversation-picker {
        border-radius: 18px;
        padding: 12px;
    }

    .messaging-start-grid {
        grid-template-columns: 1fr;
    }

    .message-bubble,
    .message-bubble.is-own-message {
        max-width: 100%;
        margin-left: 0;
    }
}

.platform-updates-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.platform-updates-section {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.platform-updates-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.platform-updates-section-head h2,
.platform-updates-section-head .eyebrow {
  margin: 0;
}

.platform-updates-section-archived {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.platform-updates-section-archived .platform-update-card {
  border-left-color: rgba(100, 116, 139, 0.55);
  background: rgba(248, 250, 252, 0.94);
}

@media (max-width: 720px) {
  .platform-updates-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Client interface performance patch - July 2026 */
.client-dashboard-glass-page,
.client-console-glass-page:not(.client-dashboard-glass-page) {
  background: #f4f7fb !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

.client-dashboard-glass-main::before {
  display: none !important;
}

.configurable-inline-options {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  margin-top: 4px;
  padding: 15px;
  border: 1px dashed rgba(24, 111, 175, 0.35);
  border-radius: 18px;
  background: rgba(239, 247, 255, 0.86);
}

.configurable-inline-options[hidden] {
  display: none !important;
}

.configurable-inline-options-head {
  display: grid;
  gap: 4px;
}

.configurable-inline-options-head h4 {
  margin: 0;
  color: var(--text);
}

.configurable-inline-options-head p {
  margin: 0;
}

.configurable-inline-options > .primary,
.configurable-inline-options > .button {
  justify-self: start;
}

.product-option-group-detached-form {
  display: none;
}

@media (max-width: 760px) {
  .configurable-inline-options {
    padding: 13px;
    border-radius: 16px;
  }

  .configurable-inline-options > .primary,
  .configurable-inline-options > .button {
    width: 100%;
  }
}

/* Friendlier configurable product choice builder - July 2026 */
.option-builder {
  display: grid;
  gap: 16px;
}

.option-builder .full {
  grid-column: 1 / -1;
}

.option-builder-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid rgba(188, 204, 220, 0.62);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
}

.option-builder-presets > span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
}

.option-builder-preset {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.84rem;
}

.option-builder-name-field,
.option-builder-limit label,
.option-builder-choice-row label,
.option-group-friendly-edit > label:not(.checkbox-row) {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 900;
}

.option-builder-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.option-builder-mode legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--text);
  font-weight: 950;
}

.option-builder-mode label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 74px;
  padding: 12px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.option-builder-mode input {
  width: auto;
  margin-top: 3px;
}

.option-builder-mode span {
  display: grid;
  gap: 3px;
}

.option-builder-mode strong {
  color: var(--text);
  font-size: 0.94rem;
}

.option-builder-mode small {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.3;
}

.option-builder-mode label:has(input:checked) {
  border-color: rgba(24, 111, 175, 0.45);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(24, 111, 175, 0.10);
}

.option-builder-limit {
  max-width: 260px;
}

.option-builder-limit[hidden] {
  display: none !important;
}

.option-builder-choices {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(188, 204, 220, 0.62);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.70);
}

.option-builder-choices-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.option-builder-choices-head strong {
  color: var(--text);
  font-weight: 950;
}

.option-builder-choices-head p {
  margin: 3px 0 0;
}

.option-builder-choice-list {
  display: grid;
  gap: 8px;
}

.option-builder-choice-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(110px, 150px) auto;
  gap: 8px;
  align-items: end;
}

.option-builder-choice-row .button {
  min-height: 42px;
}

.option-builder-preview {
  display: grid;
  grid-template-columns: minmax(180px, 0.6fr) minmax(220px, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px;
  border: 1px solid rgba(24, 111, 175, 0.20);
  border-radius: 18px;
  background: #ffffff;
}

.option-builder-preview strong {
  color: var(--text);
  font-weight: 950;
}

.option-builder-preview p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.option-builder-preview-box {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(188, 204, 220, 0.70);
  border-radius: 16px;
  background: #f8fbff;
}

.option-builder-preview-box h5 {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
}

.option-builder-preview-box > div {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.option-builder-preview-choice {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 850;
}

.option-builder-advanced {
  padding: 10px 12px;
  border: 1px solid rgba(188, 204, 220, 0.60);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.64);
}

.option-builder-advanced summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 900;
}

.option-builder-advanced .form-grid {
  margin-top: 10px;
}

.option-group-friendly-edit {
  display: grid;
  gap: 12px;
}

.option-group-friendly-edit .option-builder-mode {
  padding-top: 2px;
}

@media (max-width: 760px) {
  .option-builder-mode,
  .option-builder-preview,
  .option-builder-choice-row {
    grid-template-columns: 1fr;
  }

  .option-builder-presets {
    align-items: stretch;
  }

  .option-builder-presets > span {
    flex: 1 0 100%;
  }

  .option-builder-preset,
  .option-builder-choices-head .button,
  .option-builder-choice-row .button {
    width: 100%;
  }
}

/* Product type button selector - July 2026 */
.product-type-buttons {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.product-type-buttons legend {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: var(--text);
  font-weight: 950;
}

.product-type-button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 88px;
  padding: 13px;
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.product-type-button:hover {
  transform: translateY(-1px);
  border-color: rgba(24, 111, 175, 0.34);
  background: #ffffff;
}

.product-type-button input {
  width: auto;
  margin-top: 3px;
  accent-color: var(--primary);
}

.product-type-button span {
  display: grid;
  gap: 4px;
}

.product-type-button strong {
  color: var(--text);
  font-size: 0.96rem;
}

.product-type-button small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.35;
}

.product-type-button.is-selected {
  border-color: rgba(24, 111, 175, 0.48);
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(24, 111, 175, 0.11);
}

.product-restriction-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 17px;
  background: rgba(255, 251, 235, 0.76);
}

.product-restriction-panel[hidden] {
  display: none !important;
}

.product-restriction-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 900;
}

.product-restriction-panel p {
  margin: 0;
}

@media (max-width: 760px) {
  .product-type-buttons {
    grid-template-columns: 1fr;
  }

  .product-type-button {
    min-height: auto;
  }
}

/* Products Wizard */
.product-wizard-main {
  width: min(100%, 1480px);
  max-width: calc(100vw - 32px);
  margin: 0 auto;
}

.product-wizard-form {
  gap: 16px;
}

.product-wizard-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
  row-gap: 18px;
  padding: 28px 32px;
}

.product-wizard-card > :not(.product-wizard-step-label):not(.product-wizard-step-copy) {
  grid-column: 1 / -1;
}

.product-wizard-step-label {
  display: inline-grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}

.product-wizard-step-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.product-wizard-step-copy h2 {
  margin: 0 0 5px;
  font-size: 1.2rem;
}

.product-wizard-step-copy .live-note {
  max-width: 920px;
}

.product-wizard-template-grid,
.product-wizard-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.product-wizard-template-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-wizard-template-card,
.product-wizard-preset-card,
.product-wizard-pill-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-content: start;
  align-items: start;
  column-gap: 12px;
  row-gap: 8px;
  min-height: 104px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(248, 251, 255, 0.88);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.product-wizard-pill-choice {
  min-height: 76px;
  align-content: center;
}

.product-wizard-template-card:hover,
.product-wizard-preset-card:hover,
.product-wizard-pill-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(24, 111, 175, 0.42);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.product-wizard-template-card.is-selected,
.product-wizard-preset-card.is-selected,
.product-wizard-pill-choice.is-selected {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(24, 111, 175, 0.12);
}

.product-wizard-template-card input,
.product-wizard-preset-card input,
.product-wizard-pill-choice input {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

.product-wizard-template-card span,
.product-wizard-preset-card span,
.product-wizard-pill-choice span {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding-right: 4px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--text);
}

.product-wizard-template-card small,
.product-wizard-preset-card small {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  color: var(--muted);
  line-height: 1.35;
}

.product-wizard-card label {
  display: grid;
  gap: 7px;
}

.product-wizard-card textarea {
  resize: vertical;
}

.product-wizard-card input[type="file"] {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.78);
}

.product-wizard-card input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.product-wizard-photo-picker {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(178, 207, 235, 0.78);
  border-radius: 16px;
  background: rgba(248, 251, 255, 0.78);
}

.product-wizard-photo-copy {
  display: grid;
  gap: 4px;
}

.product-wizard-photo-copy strong {
  color: var(--text);
}

.product-wizard-photo-copy span,
.product-wizard-photo-status {
  color: var(--muted);
  font-weight: 700;
}

.product-wizard-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.product-wizard-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.product-wizard-camera-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(24, 111, 175, 0.34);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.product-wizard-camera-panel[hidden] {
  display: none !important;
}

.product-wizard-camera-frame {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #0f172a;
}

.product-wizard-camera-frame video {
  display: block;
  width: 100%;
  max-height: 360px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #0f172a;
}


.product-wizard-camera-controls {
  display: grid;
  gap: 8px;
}

.product-wizard-camera-controls[hidden] {
  display: none !important;
}

.product-wizard-camera-controls label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.product-wizard-camera-controls select {
  width: 100%;
}

.product-wizard-camera-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-wizard-camera-message {
  color: var(--muted);
  font-weight: 700;
}

.product-wizard-camera-message.is-error {
  color: #b42318;
}

.product-wizard-camera-message.is-success {
  color: #137333;
}

.product-wizard-photo-preview {
  display: grid;
  grid-template-columns: minmax(120px, 180px) auto;
  align-items: end;
  gap: 12px;
}

.product-wizard-photo-preview[hidden] {
  display: none !important;
}

.product-wizard-photo-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.product-wizard-choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.product-wizard-choices-card[hidden],
.product-wizard-restricted-card[hidden],
.product-wizard-limit-field[hidden] {
  display: none !important;
}

.product-wizard-selected-groups {
  display: grid;
  gap: 13px;
}

.product-wizard-selected-groups[hidden] {
  display: none !important;
}

.product-wizard-selected-groups h3 {
  margin: 0;
  font-size: 1rem;
}

.product-wizard-custom-group {
  display: grid;
  gap: 15px;
  padding: 18px;
  border: 1px dashed rgba(24, 111, 175, 0.38);
  border-radius: 18px;
  background: rgba(232, 241, 251, 0.54);
}

.product-wizard-custom-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.product-wizard-remove-group {
  justify-self: start;
}

.product-wizard-options-builder {
  display: grid;
  gap: 12px;
}

.product-wizard-options-builder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.product-wizard-options-builder-head strong {
  display: block;
  color: var(--text);
}

.product-wizard-options-builder-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 700;
}

.product-wizard-option-list {
  display: grid;
  gap: 9px;
}

.product-wizard-option-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(130px, 170px) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(178, 207, 235, 0.78);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.product-wizard-option-name-field,
.product-wizard-option-price-field {
  margin: 0;
}

.product-wizard-option-price-field input {
  text-align: right;
}

.product-wizard-remove-choice {
  margin-bottom: 1px;
  white-space: nowrap;
}

.product-wizard-preview {
  display: grid;
  gap: 7px;
  width: min(100%, 520px);
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: rgba(248, 251, 255, 0.92);
}

.product-wizard-preview strong {
  font-size: 1.15rem;
}

.product-wizard-preview span {
  font-weight: 900;
  color: var(--accent);
}

.product-wizard-preview p {
  margin: 0;
  color: var(--muted);
}

.product-wizard-advanced {
  padding: 22px 28px;
}

.product-wizard-advanced summary {
  display: grid;
  gap: 4px;
  cursor: pointer;
  font-weight: 900;
}

.product-wizard-advanced summary small {
  color: var(--muted);
  font-weight: 700;
}

.product-wizard-actions {
  position: sticky;
  bottom: 0;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
}

@media (max-width: 1180px) {
  .product-wizard-template-grid,
  .product-wizard-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .product-wizard-main {
    max-width: calc(100vw - 18px);
  }

  .product-wizard-card {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px;
    padding: 20px 16px;
  }

  .product-wizard-step-label {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }

  .product-wizard-template-grid,
  .product-wizard-preset-grid,
  .product-wizard-choice-row {
    grid-template-columns: 1fr;
  }

  .product-wizard-template-card,
  .product-wizard-preset-card,
  .product-wizard-pill-choice {
    min-height: auto;
  }

  .product-wizard-option-row,
  .product-wizard-photo-preview {
    grid-template-columns: 1fr;
  }

  .product-wizard-option-price-field input {
    text-align: left;
  }

  .product-wizard-options-builder-head {
    display: grid;
  }

  .product-wizard-remove-choice {
    justify-self: start;
  }

  .product-wizard-actions {
    border-radius: 16px 16px 0 0;
  }
}

/* Product image editor */
.client-product-image-editor-page .client-page-content {
  max-width: 1280px;
}

.product-image-editor-main {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.product-image-editor-card {
  display: grid;
  gap: 1.25rem;
  overflow: hidden;
}

.product-image-editor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}

.product-image-editor-head h2 {
  margin: 0.15rem 0 0.35rem;
}

.product-image-editor-form {
  display: block;
}

.product-image-editor-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, 360px);
  gap: 1.25rem;
  align-items: start;
}

.product-image-editor-stage-wrap {
  display: grid;
  gap: 0.65rem;
  justify-items: center;
}

.product-image-editor-stage {
  width: min(100%, 620px);
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 22px 60px rgba(15, 23, 42, 0.14);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.12));
}

.product-image-editor-stage::after {
  font-size: 0.92rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
}

.product-image-editor-drag-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}

.product-image-editor-controls {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
}

.product-image-editor-control-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.image-editor-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.8rem;
  height: 2.8rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(18, 119, 201, 0.25);
  border-radius: 999px;
  background: linear-gradient(135deg, #1277c9, var(--brand-green, #73bf43));
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
  cursor: pointer;
}

.image-editor-icon-button.is-wide {
  min-width: 4.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.image-editor-icon-button:hover,
.image-editor-icon-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.2);
}

.product-image-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.product-image-editor-empty {
  text-align: left;
}

@media (max-width: 860px) {
  .product-image-editor-head,
  .product-image-editor-workspace {
    grid-template-columns: 1fr;
  }

  .product-image-editor-head > .button {
    justify-self: start;
  }

  .product-image-editor-stage {
    border-radius: 22px;
  }

  .product-image-editor-controls {
    padding: 0.85rem;
  }
}

@media (max-width: 520px) {
  .product-image-editor-stage {
    width: min(100%, 92vw);
  }

  .image-editor-icon-button {
    min-width: 2.55rem;
    height: 2.55rem;
  }

  .product-image-editor-actions .button,
  .product-image-editor-actions a.button {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* 2026-07-09: Product image editor frame containment fix */
.product-image-editor-stage.product-image-preview-frame {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}

.product-image-editor-stage.product-image-preview-frame img,
.product-image-editor-stage.product-image-preview-frame [data-image-fit-preview-img] {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  position: relative;
  z-index: 1;
}

.product-image-editor-stage.product-image-preview-frame::after {
  z-index: 2;
}

/* 2026-07-09: item editor now delegates image positioning to the dedicated image editor */
.item-image-editor-compact .product-image-preview-frame[data-image-fit-preview-frame] {
  cursor: default;
}

.item-image-controls-simple {
  align-content: start;
}

.product-image-editor-launch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(14, 116, 144, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(230, 244, 255, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 22px rgba(25, 72, 112, 0.08);
}

.product-image-editor-launch-card strong {
  display: block;
  color: #082f49;
  font-size: 1rem;
  margin-bottom: 4px;
}

.product-image-editor-launch-card p {
  margin: 0;
}

.product-image-editor-launch-card .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.product-image-editor-launch-card.muted-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.86));
  border-color: rgba(188, 204, 220, 0.72);
  box-shadow: none;
}

.product-image-remove-row {
  width: fit-content;
}

@media (max-width: 720px) {
  .product-image-editor-launch-card {
    display: grid;
    align-items: start;
  }

  .product-image-editor-launch-card .button {
    width: 100%;
    justify-content: center;
  }
}

/* 2026-07-09: keep client catalogue card photos in the same crop frame as the customer shop cards. */
.catalogue-product-card .catalogue-product-image {
  aspect-ratio: 1 / 1;
}

@media (max-width: 640px) {
  .catalogue-product-card .catalogue-product-image {
    aspect-ratio: 4 / 3;
  }
}

/* 2026-07-09: keep product image crops consistent across cart and client tools. */
:root {
  --bd-product-card-image-aspect: 1 / 1;
  --bd-product-thumb-image-size: 64px;
  --bd-product-thumb-image-size-small: 48px;
}

.catalogue-product-card .catalogue-product-image,
.product-editor-shop-card-preview.shop-product-card .shop-product-image.product-image-storefront-preview,
.product-preview-card .product-snapshot-image,
.product-image-storefront-preview,
.product-snapshot-image,
.item-image-preview.large,
.product-image-cart-preview {
  aspect-ratio: var(--bd-product-card-image-aspect);
}

.shop-cart-line-image,
.client-item-image,
.order-line-image {
  width: var(--bd-product-thumb-image-size);
  height: var(--bd-product-thumb-image-size);
  aspect-ratio: var(--bd-product-card-image-aspect);
}

.shop-cart-line-image.small {
  width: var(--bd-product-thumb-image-size-small);
  height: var(--bd-product-thumb-image-size-small);
  aspect-ratio: var(--bd-product-card-image-aspect);
}

@media (max-width: 720px) {
  .catalogue-product-card .catalogue-product-image,
  .product-editor-shop-card-preview.shop-product-card .shop-product-image.product-image-storefront-preview,
  .product-preview-card .product-snapshot-image,
  .product-image-storefront-preview,
  .product-snapshot-image,
  .item-image-preview.large,
  .product-image-cart-preview,
  .shop-cart-line-image,
  .client-item-image,
  .order-line-image {
    aspect-ratio: var(--bd-product-card-image-aspect);
  }

  .shop-cart-line-image,
  .client-item-image,
  .order-line-image {
    width: var(--bd-product-thumb-image-size);
    height: var(--bd-product-thumb-image-size);
  }

  .shop-cart-line-image.small {
    width: var(--bd-product-thumb-image-size-small);
    height: var(--bd-product-thumb-image-size-small);
  }
}

@media (max-width: 430px) {
  .shop-cart-line-image {
    width: var(--bd-product-thumb-image-size);
    height: var(--bd-product-thumb-image-size);
    aspect-ratio: var(--bd-product-card-image-aspect);
  }
}

/* 2026-07-10: keep Cards view at three columns on wide client layouts.
   Target the live catalogue region rather than a body class, because client-side
   navigation replaces the region without always replacing body classes. */
@media (min-width: 1420px) {
  .client-catalogue-main .catalogue-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}



/* 2026-07-10: compact, tablet-friendly icon actions on catalogue cards. */
.catalogue-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  align-items: center;
  gap: 8px;
  width: 100%;
}

.catalogue-card-actions form {
  display: flex;
  min-width: 0;
  margin: 0;
}

.catalogue-card-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: #123a5a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 5px 12px rgba(15, 23, 42, 0.035);
  text-decoration: none;
}

.catalogue-card-icon-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.catalogue-card-icon-button:hover,
.catalogue-card-icon-button:focus-visible {
  border-color: rgba(53, 145, 190, 0.48);
  background: rgba(240, 249, 255, 0.92);
  color: #075985;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.catalogue-card-icon-button.is-danger {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(255, 247, 247, 0.68);
}

.catalogue-card-icon-button.is-danger:hover,
.catalogue-card-icon-button.is-danger:focus-visible {
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.42);
  background: rgba(254, 242, 242, 0.96);
}

.catalogue-card-icon-button:disabled,
.catalogue-card-icon-button.is-loading {
  transform: none;
}

/* Product editor deep-link target: keep section 5 clear of the client header. */
.product-image-editor-section {
    scroll-margin-top: 110px;
}

.product-image-editor-section:focus {
    outline: none;
}

@media (max-width: 900px) {
    .product-image-editor-section {
        scroll-margin-top: 24px;
    }
}


/* Client navigation More menu and storefront statistics - July 2026 */
.client-nav-more {
  position: relative;
  flex: 0 0 auto;
}

.client-nav-more > summary {
  list-style: none;
  cursor: pointer;
}

.client-nav-more > summary::-webkit-details-marker {
  display: none;
}

.client-nav-more > summary::after {
  content: "▾";
  margin-left: 3px;
  color: #64748b;
  font-size: 0.7rem;
}

.client-nav-more[open] > summary::after {
  content: "▴";
}

.client-nav-more-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  gap: 5px;
  width: min(300px, calc(100vw - 28px));
  padding: 9px;
  border: 1px solid rgba(188, 204, 220, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(18px);
}

.client-nav-more-link {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 54px;
  padding: 10px 42px 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
}

.client-nav-more-link:hover,
.client-nav-more-link.is-active {
  border-color: rgba(24, 111, 175, 0.18);
  background: var(--accent-soft);
  text-decoration: none;
}

.client-nav-more-link span {
  font-weight: 900;
}

.client-nav-more-link small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}

.client-nav-more-link .shop-nav-count {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

@media (min-width: 901px) {
  .client-nav-main-row .client-nav-scroll {
    overflow: visible;
  }
}

@media (max-width: 900px) {
  .client-nav-more-menu {
    position: static;
    margin-top: 6px;
  }
}

/* Dashboard: equal Riders and Stats bars */
.client-orders-utility-row .client-rider-availability-card.client-rider-availability-collapsed,
.client-orders-utility-row .client-website-stats-card.client-rider-availability-collapsed {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(188, 204, 220, 0.74);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.client-orders-utility-row .client-website-stats-card .client-rider-availability-summary {
  min-height: 44px;
  padding: 8px 12px;
  gap: 10px;
}

.client-orders-utility-row .client-website-stats-card .client-rider-availability-summary-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.client-orders-utility-row .client-website-stats-card .client-rider-availability-summary-text strong,
.client-orders-utility-row .client-website-stats-card .client-rider-availability-summary-text small {
  white-space: nowrap;
}

.client-orders-utility-row .client-website-stats-card .client-rider-availability-summary-text small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-orders-utility-row .client-website-stats-card .client-rider-availability-status {
  flex: 0 0 auto;
  gap: 6px;
}

.client-website-stats-card[open] .client-details-chevron {
  background: #fff;
  color: var(--text);
}

.client-website-stats-card.is-uninstalled {
  border-color: rgba(173, 106, 0, 0.28);
}

.client-website-stats-grid {
  grid-template-columns: repeat(4, minmax(90px, 1fr));
}

.client-dashboard-stats-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(24px, 1fr));
  gap: 6px;
  height: 82px;
  padding: 8px 8px 0;
  border: 1px solid rgba(188, 204, 220, 0.58);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.54);
}

.client-dashboard-stats-week > span {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: 4px;
  min-width: 0;
}

.client-dashboard-stats-week i {
  display: block;
  width: min(18px, 75%);
  min-height: 4px;
  margin: 0 auto;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, #2aa86b, #186faf);
}

.client-dashboard-stats-week small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
}

.client-website-stats-actions {
  display: flex;
  justify-content: flex-end;
}

.client-dashboard-glass-page .client-orders-utility-row .client-website-stats-card.client-rider-availability-collapsed {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(238, 255, 247, 0.58)),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(148, 184, 214, 0.18),
    0 22px 56px rgba(36, 74, 112, 0.16);
  backdrop-filter: blur(20px) saturate(1.28);
}

@media (max-width: 1080px) {
  .client-orders-utility-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
}

@media (max-width: 780px) {
  .client-orders-utility-row {
    grid-template-columns: 1fr;
  }

  .client-orders-utility-row .client-website-stats-card .client-rider-availability-summary,
  .client-orders-utility-row .client-website-stats-card .client-rider-availability-summary-text {
    display: grid;
    align-items: start;
    gap: 2px;
  }

  .client-orders-utility-row .client-website-stats-card .client-rider-availability-summary-text strong,
  .client-orders-utility-row .client-website-stats-card .client-rider-availability-summary-text small {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .client-website-stats-grid {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }
}

/* Full client website statistics page */
.client-stats-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(188, 204, 220, 0.76);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
}

.client-stats-period-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.client-stats-period-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(188, 204, 220, 0.76);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #3f5871;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.client-stats-period-tab:hover,
.client-stats-period-tab.is-active {
  border-color: rgba(24, 111, 175, 0.32);
  background: #eaf6ff;
  color: #0c436a;
  text-decoration: none;
}

.client-stats-custom-range {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.client-stats-custom-range label {
  display: grid;
  gap: 4px;
  color: #526b84;
  font-size: 0.74rem;
  font-weight: 850;
}

.client-stats-custom-range input {
  min-height: 40px;
  padding: 7px 9px;
}

.client-stats-range-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 14px;
  color: #526b84;
  font-weight: 800;
}

.client-stats-range-label small {
  font-weight: 650;
  text-align: right;
}

.client-stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.client-stats-summary-card {
  display: grid;
  gap: 5px;
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(188, 204, 220, 0.78);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.8));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.client-stats-summary-card.tone-blue { background: linear-gradient(150deg, #fff, #eaf6ff); }
.client-stats-summary-card.tone-green { background: linear-gradient(150deg, #fff, #eafbf2); }
.client-stats-summary-card.tone-purple { background: linear-gradient(150deg, #fff, #f4edff); }
.client-stats-summary-card.tone-amber { background: linear-gradient(150deg, #fff, #fff5df); }

.client-stats-summary-card span {
  color: #48627d;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.client-stats-summary-card strong {
  align-self: end;
  color: #082d4b;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 0.95;
}

.client-stats-summary-card small {
  color: #526b84;
  font-weight: 700;
}

.client-stats-chart-card,
.client-stats-products-card,
.client-stats-funnel-grid,
.client-stats-lower-grid {
  margin-bottom: 16px;
}

.client-stats-section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.client-stats-section-head h2,
.client-stats-section-head p {
  margin-top: 0;
}

.client-stats-section-head p:last-child {
  margin-bottom: 0;
  color: #526b84;
}

.client-stats-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #526b84;
  font-size: 0.78rem;
  font-weight: 850;
}

.client-stats-chart-legend span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 999px;
}

.client-stats-chart-legend .visitors::before { background: #186faf; }
.client-stats-chart-legend .views::before { background: #b5d9ef; }
.client-stats-chart-legend .orders::before { background: #25a063; }

.client-stats-chart-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

.client-stats-chart-frame {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  min-width: max(100%, calc(var(--stats-chart-columns) * 34px + 42px));
}

.client-stats-chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  height: 270px;
  padding: 9px 0 28px;
  color: #64748b;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}

.client-stats-chart {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--stats-chart-columns), minmax(28px, 1fr));
  gap: 5px;
  min-width: 0;
  height: 270px;
  padding: 12px 8px 0;
}

.client-stats-chart::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 12px;
  right: 8px;
  bottom: 28px;
  left: 8px;
  border-top: 1px solid rgba(188, 204, 220, 0.56);
  border-bottom: 1px solid rgba(188, 204, 220, 0.34);
  background: repeating-linear-gradient(
    to bottom,
    rgba(188, 204, 220, 0.22) 0 1px,
    transparent 1px calc(100% / var(--stats-chart-grid-steps))
  );
  pointer-events: none;
}

.client-stats-chart-day {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr 24px;
  gap: 4px;
  min-width: 0;
}

.client-stats-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-height: 0;
}

.client-stats-chart-bars span {
  display: block;
  width: 28%;
  min-height: 0;
  border-radius: 6px 6px 2px 2px;
}

.client-stats-chart-bars .views { background: #b5d9ef; }
.client-stats-chart-bars .visitors { background: #186faf; }
.client-stats-chart-bars .orders { background: #25a063; }

.client-stats-chart-day small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
}

.client-stats-funnel-grid,
.client-stats-lower-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.client-stats-funnel-list {
  display: grid;
  gap: 13px;
  margin-top: 16px;
}

.client-stats-funnel-row {
  display: grid;
  gap: 6px;
}

.client-stats-funnel-row > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #3f5871;
  font-weight: 800;
}

.client-stats-funnel-row > div strong {
  color: #082d4b;
}

.client-stats-funnel-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eff6;
}

.client-stats-funnel-track i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #186faf, #25a063);
}

.client-stats-explainer-card ul {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding-left: 20px;
  color: #48627d;
}

.client-stats-table-wrap table {
  min-width: 820px;
}

.client-stats-products-table td:first-child a {
  color: #082d4b;
  font-weight: 850;
}

.client-stats-rate-pill {
  display: inline-flex;
  min-width: 58px;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef3f8;
  color: #526b84;
  font-size: 0.78rem;
  font-weight: 900;
}

.client-stats-rate-pill.is-good {
  background: #e5f7ed;
  color: #137143;
}

.client-stats-ranking-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.client-stats-ranking-list > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(188, 204, 220, 0.62);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.8);
}

.client-stats-ranking-list .rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #eaf6ff;
  color: #155c8f;
  font-size: 0.75rem;
  font-weight: 950;
}

.client-stats-ranking-list strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-stats-ranking-list > div > span:last-child {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 750;
  text-align: right;
}

.client-stats-install-card {
  border-color: rgba(173, 106, 0, 0.28);
  background: #fffaf0;
}


.client-stats-discovery-install {
  margin-bottom: 16px;
}

.client-stats-discovery-heading {
  margin: 24px 2px 12px;
}

.client-stats-discovery-heading h2,
.client-stats-discovery-heading p {
  margin-top: 0;
}

.client-stats-discovery-heading p:last-child {
  max-width: 820px;
  margin-bottom: 0;
  color: #526b84;
}

.client-stats-discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.client-stats-discovery-card {
  min-width: 0;
}

.client-stats-source-list {
  display: grid;
  gap: 8px;
}

.client-stats-source-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(188, 204, 220, 0.62);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.8);
}

.client-stats-source-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.client-stats-source-row strong {
  overflow: hidden;
  color: #082d4b;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-stats-source-row small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-stats-source-row > span {
  color: #526b84;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.client-stats-campaign-empty {
  padding: 14px;
  border: 1px dashed rgba(188, 204, 220, 0.78);
  border-radius: 15px;
  background: rgba(248, 251, 255, 0.72);
}

.client-stats-campaign-empty p,
.client-stats-campaign-empty small {
  margin: 0;
}

.client-stats-campaign-empty small {
  display: block;
  margin-top: 7px;
  color: #64748b;
}

@media (max-width: 820px) {
  .client-stats-discovery-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .client-stats-source-row {
    grid-template-columns: 1fr;
  }

  .client-stats-source-row > span {
    text-align: left;
    white-space: normal;
  }

  .client-stats-source-row strong,
  .client-stats-source-row small {
    white-space: normal;
  }
}

@media (max-width: 1200px) {
  .client-stats-summary-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (max-width: 820px) {
  .client-stats-toolbar,
  .client-stats-range-label,
  .client-stats-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .client-stats-custom-range {
    flex-wrap: wrap;
  }

  .client-stats-range-label small {
    text-align: left;
  }

  .client-stats-funnel-grid,
  .client-stats-lower-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .client-stats-summary-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .client-stats-summary-card {
    min-height: 112px;
    padding: 14px;
  }

  .client-stats-custom-range label {
    flex: 1 1 130px;
  }

  .client-stats-custom-range input {
    width: 100%;
  }

  .client-stats-ranking-list > div {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .client-stats-ranking-list > div > span:last-child {
    grid-column: 2;
    text-align: left;
  }
}

.policy-analytics-preference-form {
  display: grid;
  gap: 9px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(188, 204, 220, 0.72);
  border-radius: 16px;
  background: rgba(244, 249, 253, 0.78);
}

.policy-analytics-preference-form p,
.policy-analytics-preference-form small {
  margin: 0;
}

.policy-analytics-preference-form .button {
  justify-self: start;
}

.policy-analytics-preference-form small {
  color: #64748b;
  line-height: 1.45;
}

/* 2026-07-10: keep phone-width storefronts to one compact product card per row. */
@media (max-width: 640px) {
  .shop-product-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .shop-product-card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: start;
    padding: 11px;
    border-radius: 16px;
  }

  .shop-product-card .shop-product-image {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 84px;
    aspect-ratio: 1 / 1;
    border-radius: 13px;
  }

  .shop-product-card .shop-product-card-top {
    grid-column: 2;
    grid-row: 1;
  }

  .shop-product-card .shop-product-description {
    grid-column: 2;
    grid-row: 2;
    -webkit-line-clamp: 2;
  }

  .shop-product-card .shop-product-badges {
    grid-column: 2;
    grid-row: 3;
  }

  .shop-product-card .shop-product-config-form,
  .shop-product-card .shop-product-basket-state,
  .shop-product-card .shop-product-actions {
    grid-column: 1 / -1;
  }

  .shop-product-card .shop-product-actions {
    align-items: stretch;
  }
}

/* 2026-07-10: prevent the mobile category navigation setting the page width. */
@media (max-width: 640px) {
  .shop-catalogue-layout,
  .shop-catalogue-layout > *,
  .shop-sidebar,
  .shop-panel.shop-categories-panel,
  .shop-product-area[data-shop-product-area] {
    min-width: 0;
    max-width: 100%;
  }

  .shop-panel.shop-categories-panel {
    overflow: hidden;
  }

  .shop-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .shop-category-link {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    scroll-snap-align: none;
  }
}

@media (max-width: 380px) {
  .shop-category-link {
    flex-basis: 100%;
  }
}

/* 2026-07-12: client self-service Getting Started journey */
.client-getting-started-main {
    display: grid;
    gap: 18px;
}

.client-onboarding-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    gap: 24px;
    align-items: center;
    padding: 24px;
    overflow: hidden;
}

.client-onboarding-title-row,
.client-onboarding-step-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.client-onboarding-hero-copy > p {
    max-width: 760px;
    margin-bottom: 16px;
}

.client-onboarding-admin-note {
    margin: 14px 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(168, 112, 18, .28);
    border-radius: 14px;
    background: rgba(255, 244, 213, .58);
}

.client-onboarding-admin-note p {
    margin: 6px 0 0;
}

.client-onboarding-progress {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(27, 79, 65, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .56);
}

.client-onboarding-progress strong {
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: .95;
}

.client-onboarding-progress span {
    color: var(--muted, #5c6b66);
    font-size: .9rem;
}

.client-onboarding-progress-track,
.client-onboarding-mini-progress {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(24, 60, 50, .11);
}

.client-onboarding-progress-track span,
.client-onboarding-mini-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-green, #17845b), var(--brand-blue, #287bc1));
}

.client-onboarding-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 18px;
    align-items: start;
}

.client-onboarding-step-list {
    display: grid;
    gap: 12px;
}

.client-onboarding-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(22, 62, 50, .12);
    border-radius: 17px;
    background: rgba(255, 255, 255, .66);
    box-shadow: 0 10px 30px rgba(26, 55, 46, .06);
}

.client-onboarding-step.is-done {
    border-color: rgba(25, 132, 91, .28);
    background: rgba(239, 252, 246, .72);
}

.client-onboarding-step.is-blocked {
    opacity: .76;
}

.client-onboarding-step-marker {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(44, 92, 78, .1);
    font-weight: 800;
}

.client-onboarding-step.is-done .client-onboarding-step-marker {
    background: rgba(25, 132, 91, .15);
    color: #126842;
}

.client-onboarding-step-copy h3,
.client-onboarding-submit-card h2 {
    margin: 0;
}

.client-onboarding-step-copy p {
    margin: 5px 0 0;
    color: var(--muted, #5c6b66);
}

.client-onboarding-mini-progress {
    max-width: 280px;
    height: 6px;
    margin-top: 10px;
}

.client-onboarding-step-action {
    display: flex;
    justify-content: flex-end;
}

.client-onboarding-submit-card {
    display: grid;
    gap: 14px;
    padding: 20px;
    position: sticky;
    top: 18px;
}

.client-onboarding-submit-state {
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(34, 72, 61, .13);
    background: rgba(255, 255, 255, .58);
}

.client-onboarding-submit-state.success {
    border-color: rgba(25, 132, 91, .25);
    background: rgba(236, 251, 244, .72);
}

.client-onboarding-submit-state.warning {
    border-color: rgba(168, 112, 18, .24);
    background: rgba(255, 246, 222, .72);
}

.client-onboarding-submit-state.info {
    border-color: rgba(40, 123, 193, .22);
    background: rgba(235, 246, 255, .72);
}

.client-onboarding-submit-state.danger {
    border-color: rgba(164, 47, 47, .22);
    background: rgba(255, 238, 238, .72);
}

.client-onboarding-submit-state p,
.client-onboarding-privacy-note p {
    margin: 5px 0 0;
}

.client-onboarding-submit-form {
    display: grid;
    gap: 14px;
}

.client-onboarding-submit-form .choice-row {
    align-items: flex-start;
}

.client-onboarding-submit-form .choice-row small {
    display: block;
    margin-top: 3px;
}

.client-onboarding-submit-form button {
    min-height: 46px;
}

.client-onboarding-privacy-note {
    padding-top: 14px;
    border-top: 1px solid rgba(34, 72, 61, .12);
    color: var(--muted, #5c6b66);
    font-size: .9rem;
}

.client-storefront-preview-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 2px dashed rgba(40, 123, 193, .36);
    background: rgba(232, 246, 255, .92);
}

.client-storefront-preview-banner p {
    margin: 4px 0 0;
}

@media (max-width: 900px) {
    .client-onboarding-layout,
    .client-onboarding-hero {
        grid-template-columns: 1fr;
    }

    .client-onboarding-submit-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .client-onboarding-hero {
        padding: 18px;
    }

    .client-onboarding-step {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .client-onboarding-step-marker {
        width: 38px;
        height: 38px;
    }

    .client-onboarding-step-action {
        grid-column: 1 / -1;
    }

    .client-onboarding-step-action .button {
        width: 100%;
    }

    .client-storefront-preview-banner {
        align-items: stretch;
        flex-direction: column;
    }
}

/* 2026-07-12: launch-ready online payment provider guidance */
.client-onboarding-step.has-guidance {
    align-items: start;
}

.client-onboarding-payment-note {
    display: grid;
    gap: 3px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(168, 112, 18, .25);
    border-radius: 12px;
    background: rgba(255, 246, 222, .72);
    color: #6d4b0f;
    font-size: .88rem;
}

.client-onboarding-payment-note span {
    color: inherit;
}

.client-onboarding-provider-grid,
.client-payment-provider-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.client-onboarding-provider,
.client-payment-provider-option {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(34, 72, 61, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .64);
}

.client-onboarding-provider.is-selected,
.client-payment-provider-option.is-selected {
    border-color: rgba(40, 123, 193, .38);
    background: rgba(237, 247, 255, .78);
}

.client-onboarding-provider.is-ready,
.client-payment-provider-option.is-ready {
    border-color: rgba(25, 132, 91, .34);
    background: rgba(236, 251, 244, .78);
}

.client-payment-provider-option.is-focused {
    outline: 3px solid rgba(40, 123, 193, .16);
    outline-offset: 2px;
}

.client-onboarding-provider-heading,
.client-payment-provider-option-head,
.client-payment-provider-guide-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.client-onboarding-provider p,
.client-payment-provider-option p {
    margin: 0;
    font-size: .88rem;
}

.client-onboarding-provider .button {
    justify-self: start;
}

.client-onboarding-provider-help {
    font-size: .86rem;
}

.client-payment-provider-guide {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.client-payment-provider-guide h3,
.client-payment-provider-option h4 {
    margin: 0;
}

.client-payment-provider-points {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
    color: var(--muted, #5c6b66);
    font-size: .86rem;
}

.client-payment-provider-option .button {
    justify-self: start;
    margin-top: auto;
}

@media (max-width: 760px) {
    .client-onboarding-provider-grid,
    .client-payment-provider-options {
        grid-template-columns: 1fr;
    }

    .client-payment-provider-guide-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Self-service shop web addresses */
.client-onboarding-domain-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.client-onboarding-domain-options > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(16, 108, 83, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .7);
}

.client-onboarding-domain-options strong {
    color: var(--ink, #082f49);
}

.client-onboarding-domain-options span {
    color: var(--muted, #5c6b66);
    font-size: .86rem;
    line-height: 1.45;
}

.client-domain-page {
    display: grid;
    gap: 18px;
}

.client-domain-current-card,
.client-domain-connection-head,
.client-domain-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.client-domain-current-card h2,
.client-domain-choice-card h2,
.client-domain-section-head h2,
.client-domain-explainer h2 {
    margin: 0;
}

.client-domain-current-card p,
.client-domain-choice-card p,
.client-domain-explainer p {
    color: var(--muted, #5c6b66);
}

.client-domain-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.client-domain-choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.client-domain-choice-card.is-recommended {
    border-color: rgba(15, 145, 91, .32);
    box-shadow: 0 18px 44px rgba(15, 145, 91, .08);
}

.client-domain-choice-card > .badge {
    align-self: flex-start;
}

.client-domain-included-form,
.client-domain-choice-card .detail-stack {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.client-domain-suffix-input {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) auto;
    align-items: stretch;
}

.client-domain-suffix-input input {
    min-width: 0;
    border-radius: 12px 0 0 12px;
}

.client-domain-suffix-input span {
    display: flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(8, 47, 73, .14);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    background: rgba(8, 47, 73, .045);
    color: var(--ink, #082f49);
    font-weight: 700;
    white-space: nowrap;
}

.client-domain-buy-help,
.client-domain-inline-state {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border-radius: 13px;
    background: rgba(8, 47, 73, .045);
}

.client-domain-inline-state.warning {
    background: rgba(245, 158, 11, .09);
    border: 1px solid rgba(245, 158, 11, .2);
}

.client-domain-inline-state.info {
    background: rgba(14, 116, 144, .08);
    border: 1px solid rgba(14, 116, 144, .18);
}

.client-domain-buy-help p,
.client-domain-inline-state span {
    margin: 0;
    font-size: .88rem;
    line-height: 1.45;
}

.client-domain-connections {
    display: grid;
    gap: 14px;
}

.client-domain-connection {
    display: grid;
    gap: 14px;
}

.client-domain-connection.is-primary {
    border-color: rgba(15, 145, 91, .34);
}

.client-domain-connection-head h3 {
    margin: 8px 0 2px;
    overflow-wrap: anywhere;
}

.client-domain-connection-head p {
    margin: 0;
    color: var(--muted, #5c6b66);
}

.client-domain-instruction {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(8, 47, 73, .1);
    border-radius: 15px;
    background: rgba(255, 255, 255, .58);
}

.client-domain-instruction-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(15, 145, 91, .12);
    color: #087449;
    font-weight: 800;
}

.client-domain-instruction h4 {
    margin: 0 0 6px;
}

.client-domain-instruction p {
    margin: 0 0 9px;
    color: var(--muted, #5c6b66);
}

.client-domain-records {
    display: grid;
    gap: 7px;
    margin: 0;
}

.client-domain-records > div {
    display: grid;
    grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.client-domain-records dt {
    color: var(--muted, #5c6b66);
    font-size: .82rem;
    font-weight: 700;
}

.client-domain-records dd {
    min-width: 0;
    margin: 0;
}

.client-domain-records code {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.client-domain-connection-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.client-domain-explainer ol {
    display: grid;
    gap: 8px;
    margin: 12px 0;
    padding-left: 22px;
}

@media (max-width: 820px) {
    .client-domain-choice-grid,
    .client-onboarding-domain-options {
        grid-template-columns: 1fr;
    }

    .client-domain-current-card,
    .client-domain-connection-head,
    .client-domain-section-head {
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .client-domain-suffix-input {
        grid-template-columns: 1fr;
    }

    .client-domain-suffix-input input {
        border-radius: 12px 12px 0 0;
    }

    .client-domain-suffix-input span {
        min-height: 42px;
        border-left: 1px solid rgba(8, 47, 73, .14);
        border-top: 0;
        border-radius: 0 0 12px 12px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .client-domain-records > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

.client-settings-web-address-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(8, 47, 73, .1);
    border-radius: 14px;
    background: rgba(8, 47, 73, .035);
}

.client-settings-web-address-link > div {
    display: grid;
    gap: 3px;
}

.client-settings-web-address-link span {
    color: var(--muted, #5c6b66);
    font-size: .86rem;
}

@media (max-width: 620px) {
    .client-settings-web-address-link {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Self-service domain actions: AJAX feedback and cooldown state. */
.client-domain-action-status:not([hidden]) {
    display: block;
    padding: 11px 13px;
    border: 1px solid rgba(14, 116, 144, .18);
    border-radius: 13px;
    background: rgba(14, 116, 144, .08);
    color: var(--ink, #082f49);
    font-weight: 700;
}

.client-domain-action-status.success-text:not([hidden]) {
    border-color: rgba(15, 145, 91, .22);
    background: rgba(15, 145, 91, .09);
    color: #087449;
}

.client-domain-action-status.danger-text:not([hidden]) {
    border-color: rgba(190, 24, 93, .22);
    background: rgba(190, 24, 93, .08);
    color: #9f1239;
}

.client-domain-connection-actions button[disabled][data-domain-check-button] {
    cursor: wait;
    opacity: .72;
}