/* Design tokens ------------------------------------------------------------------------
   The palette and corner radii shared by the store and the workspaces. Change a value here
   and every component that uses it follows. */
:root {
  --color-white: #ffffff;
  --color-cream: #faf6ef;
  --color-surface: #fffdf9;
  --color-cream-2: #f3ebdf;
  --color-cream-3: #f6efe4;
  --color-line: #e7dccb;
  --color-line-soft: #efe6d8;
  --color-field-line: #e0d4c2;
  --color-ink: #2a2421;
  --color-muted: #6f655d;
  --color-muted-2: #7d7166;
  --color-slate: #3e4d68;
  --color-slate-deep: #2c384e;
  --color-clay: #8a4a2d;
  --color-clay-deep: #6e3a22;
  --color-clay-soft: #f2e4d8;
  --color-success: #24613e;
  --color-success-soft: #e3f0e6;
  --color-danger: #b0413a;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
}

/* Typography uses the system font stack, as in the WordPress admin. */
:root {
  color-scheme: light;
  background: var(--bg);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
a {
  text-decoration: none;
}
button {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--forest);
  color: var(--color-white);
  padding: 10px 16px;
  font-weight: 600;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  transition: background 0.16s,
    box-shadow 0.16s;
}
button:hover:not(:disabled) {
  filter: brightness(0.96);
}
button.secondary {
  background: var(--color-white);
  border: 1px solid var(--line);
  color: var(--ink);
}
button.danger {
  color: var(--color-white);
}
button.icon-button {
  min-width: 36px;
}
button svg,
a svg {
  flex-shrink: 0;
}
svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  stroke-width: 1.65;
}
input,
select,
textarea {
  width: 100%;
  min-width: 0;
  outline: none;
}
input::placeholder {
  color: #99a094;
}
label {
  display: block;
  margin-bottom: 8px;
}
.field {
  margin-bottom: 20px;
}
.field small {
  display: block;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 7px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, system-ui, sans-serif;
}
h2 {
  margin-bottom: 6px;
}
h3 {
  margin-bottom: 10px;
}
p {
  line-height: 1.65;
}
.small {
  font-size: 12px;
}
.eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.65px;
  font-weight: 700;
  color: var(--muted);
}
.money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: capitalize;
  white-space: nowrap;
}
.badge:before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.badge.pending,
.badge.processing {
  background: #faf1d9;
  color: #9b7831;
}
.brand {
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.7px;
}
.brand small {
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, sans-serif;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--muted);
  display: block;
  margin-top: 1px;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 230px;
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.nav-group .eyebrow {
  margin: 0 12px 10px;
}
.nav-link {
  display: flex;
  align-items: center;
}
.user-card {
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
}
.avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  width: 33px;
  height: 33px;
  font-size: 11px;
  font-weight: 700;
}
.user-card strong {
  max-width: 125px;
}
.main-shell {
  margin-left: 230px;
  min-height: 100vh;
}
.topbar-right {
  display: flex;
  gap: 18px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}
.topbar-right .pill {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
main {
  padding: 37px 40px 50px;
  max-width: 1640px;
  margin: auto;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.page-head p {
  margin: 0;
}
.actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.panel {
  background: #ffffffc9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 3px #23342102;
  min-width: 0;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(115deg, #fffffff5, #fdfef6);
  margin-bottom: 28px;
}
.stat {
  padding: 23px 25px;
  border-right: 1px solid var(--line);
}
.stat:last-child {
  border: 0;
}
.stat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.stat-label svg {
  width: 16px;
  height: 16px;
  color: #9ca594;
}
.stat-value {
  font: 750 26px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif,
    sans-serif;
}
.stat-foot {
  margin-top: 8px;
}
.section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 0;
  gap: 12px;
}
.section-top h2 {
  font-size: 15px;
}
.tabs {
  display: flex;
  overflow: auto;
  margin-top: 10px;
}
.tab {
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab[aria-selected='true'] {
  border-bottom-color: var(--forest);
}
.tab-count {
  font-size: 10px;
  background: #eff1e9;
  border-radius: 4px;
  padding: 2px 6px;
}
.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
}
.search {
  position: relative;
  flex: 1;
  max-width: 430px;
}
.search svg {
  position: absolute;
  left: 12px;
  width: 16px;
}
.toolbar select {
  width: auto;
  font-size: 12px;
  min-height: 40px;
}
.table-wrap {
  width: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
}
th {
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}
td {
  padding: 17px 20px;
  vertical-align: middle;
}
tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: #f8faf5;
}
td small {
  display: block;
  color: #939d8b;
  margin-top: 5px;
  font-size: 10px;
}
td strong {
  font-weight: 600;
}
.order-ref {
  background: none;
  padding: 0;
  min-height: 24px;
}
.table-footer {
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pager {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pager button {
  padding: 5px 10px;
  font-size: 11px;
  min-height: 29px;
}
.empty {
  text-align: center;
  padding: 65px 20px;
  color: var(--muted);
}
.empty-icon {
  margin: 0 auto 16px;
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
}
.empty h3 {
  color: var(--ink);
  font-size: 15px;
}
.empty p {
  max-width: 380px;
  margin: 8px auto 20px;
  font-size: 13px;
}
.notice {
  padding: 13px 16px;
  font-size: 12px;
  line-height: 1.6;
  margin: 16px 0;
}
.notice.error {
  border-color: #efd6cc;
}
.notice.warning {
  border-color: #eee3bd;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #b8c1ad;
  border-top-color: var(--forest);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.loading {
  padding: 80px;
  text-align: center;
  color: var(--muted);
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
  background: white;
  padding: 12px;
}
.skip:focus {
  top: 10px;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 13px 22px;
  max-width: 90vw;
}
dialog {
  padding: 0;
  color: var(--ink);
  width: min(780px, calc(100vw - 48px));
  max-height: 88dvh;
  overflow: hidden;
}
dialog::backdrop {
  background: #19271d55;
  backdrop-filter: blur(5px);
}
dialog.compact {
  width: min(480px, calc(100vw - 40px));
}
.dialog-layout {
  display: flex;
  flex-direction: column;
  max-height: 86dvh;
}
.dialog-head {
  padding: 23px 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: #ffffffc9;
  flex-shrink: 0;
}
.dialog-head h2 {
  margin: 7px 0;
}
.dialog-body {
  padding: 26px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dialog-footer {
  padding: 17px 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--color-white);
  flex-shrink: 0;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 30px;
}
.detail-section {
  margin-bottom: 26px;
}
.detail-section h3 {
  margin-bottom: 17px;
}
.key-values {
  margin: 0;
}
.key-values > div,
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  font-size: 12px;
  padding: 8px 0;
}
.key-values dt {
  color: var(--muted);
}
.key-values dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
  max-width: 65%;
}
.summary-total {
  border-top: 1px solid var(--line);
  padding-top: 17px;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
}
.item-line {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 15px;
  background: white;
  margin-bottom: 12px;
}
.product-mark {
  background: var(--accent);
  border-radius: 9px;
  padding: 10px;
  color: #596237;
}
.item-line strong {
  font-size: 12px;
}
.item-line small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted);
}
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline li {
  position: relative;
  padding: 0 0 23px 23px;
  border-left: 1px solid #dfe6d6;
  margin-left: 5px;
  font-size: 12px;
  line-height: 1.5;
}
.timeline li:last-child {
  border-color: transparent;
  padding-bottom: 0;
}
.timeline li:before {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border: 3px solid #fafbf7;
  box-sizing: content-box;
  border-radius: 50%;
  left: -7px;
  top: 2px;
}
.timeline small {
  display: block;
  color: #8a9681;
  font-size: 10px;
  margin-top: 5px;
}
.overflow-menu {
  position: relative;
}
.overflow-menu summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line);
  background: white;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 12px;
}
.overflow-menu summary::-webkit-details-marker {
  display: none;
}
.menu-items {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 175px;
  padding: 5px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 9px;
  box-shadow: 0 8px 30px #1d2f191c;
  z-index: 5;
}
.menu-items button {
  width: 100%;
  justify-content: flex-start;
  background: none;
  color: var(--ink);
  border: 0;
  font-size: 12px;
  padding: 9px 11px;
}
.menu-items button.destructive {
  color: var(--danger);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .field {
  margin-bottom: 4px;
}
.step-number {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 23px;
}
.product-card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  color: var(--ink);
  padding: 18px;
  min-height: 145px;
  position: relative;
}
.product-card[aria-pressed='true'] {
  border-color: #6c8653;
  background: #f7faef;
  box-shadow: 0 0 0 1px #6c8653;
}
.product-card .product-mark {
  padding: 7px;
  border-radius: 7px;
  margin-bottom: 17px;
}
.product-card strong {
  font: 700 15px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif,
    sans-serif;
}
.product-card .product-price {
  font-size: 13px;
  margin-top: 8px;
  color: #647651;
}
.product-card small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 5px;
}
.quantity {
  display: flex;
  align-items: center;
  gap: 14px;
}
.quantity button {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  background: #f4f6ee;
  color: var(--ink);
  border: 1px solid var(--line);
}
.quantity span {
  font-size: 13px;
  font-weight: 650;
  min-width: 16px;
  text-align: center;
}
.checkout-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.success-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: #eaf2e3;
  border: 1px solid #dae7cd;
  border-radius: 50%;
  margin-bottom: 22px;
  color: #668548;
}
.success-mark svg {
  width: 26px;
  height: 26px;
}
.profile-panel {
  max-width: 780px;
}
.profile-header .avatar {
  width: 58px;
  height: 58px;
  font-size: 19px;
}
.entity-list table td:last-child {
  text-align: right;
}
.entity-list .toolbar {
  border-bottom: 1px solid var(--line);
}
.auth-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.public-header {
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6vw;
  border-bottom: 1px solid #e7ebdf;
}
.public-header a {
  font-size: 12px;
  color: var(--muted);
}
.auth-main {
  max-width: 1260px;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12%;
  align-items: center;
  padding: 75px 60px;
}
.auth-story h1 {
  font-size: clamp(38px, 4.3vw, 60px);
  line-height: 1.12;
  margin: 25px 0;
}
.auth-story h1 em {
  font-style: normal;
}
.auth-story > p {
  max-width: 340px;
  font-size: 15px;
  line-height: 1.85;
}
.auth-story .eyebrow {
  display: flex;
  gap: 8px;
  align-items: center;
}
.auth-story .eyebrow:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.signal-art {
  position: relative;
  margin-top: 38px;
  width: 310px;
  height: 110px;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  overflow: hidden;
  border-bottom: 1px solid #dfe6ce;
}
.signal-art i {
  display: block;
  width: 35px;
  border-radius: 8px 8px 0 0;
  border: 1px solid #d5dfbf;
  height: 35%;
}
.signal-art i:nth-child(2) {
  height: 48%;
}
.signal-art i:nth-child(3) {
  height: 63%;
}
.signal-art i:nth-child(4) {
  height: 78%;
}
.signal-art i:nth-child(5) {
  height: 92%;
  background: linear-gradient(0deg, #d3b96a, #f6de8e);
  border-color: #e2cf93;
}
.signal-art i:nth-child(6) {
  height: 100%;
  background: linear-gradient(0deg, #7d8c64, #a8b88c);
  border-color: #9bab81;
}
.auth-card {
  backdrop-filter: blur(18px);
  padding: 38px;
}
.auth-card h2 {
  font-size: 25px;
  letter-spacing: -0.9px;
}
.auth-card > p {
  font-size: 12px;
  margin-bottom: 30px;
}
.auth-card button[type='submit'] {
  width: 100%;
  margin-top: 7px;
}
.public-footer {
  padding: 24px 6vw;
  display: flex;
  justify-content: space-between;
  color: #8b9681;
  font-size: 10px;
  letter-spacing: 0.2px;
}
@media (min-width: 1600px) {
  main {
    padding-top: 45px;
  }
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1200px) {
  .sidebar {
    width: 205px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .main-shell {
    margin-left: 205px;
  }
  main {
    padding: 30px 25px;
  }
  .stat {
    padding: 20px;
  }
  td,
  th {
    padding-left: 14px;
    padding-right: 14px;
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .topbar-right .date {
    display: none;
  }
  .auth-main {
    gap: 8%;
    padding: 60px 40px;
  }
}
@media (max-width: 980px) {
  .sidebar {
    width: 180px;
  }
  .main-shell {
    margin-left: 180px;
  }
  main {
    padding: 25px 20px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat:nth-child(2) {
    border-right: 0;
  }
  .stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-head {
    align-items: flex-start;
  }
  .page-head .actions {
    justify-content: flex-end;
  }
  .auth-main {
    gap: 5%;
    padding: 50px 30px;
  }
  .auth-card {
    padding: 28px;
  }
  .auth-story h1 {
    font-size: 42px;
  }
  .detail-grid {
    gap: 24px;
  }
}
@media (max-width: 700px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
    width: 250px;
    box-shadow: 15px 0 60px #1d351515;
  }
  .nav-open .sidebar {
    transform: translateX(0);
  }
  .sidebar .nav-link {
    min-height: 44px;
  }
  .main-shell {
    margin-left: 0;
  }
  .topbar-right {
    gap: 7px;
  }
  .topbar-right .pill {
    display: none;
  }
  main {
    padding: 25px 16px 40px;
  }
  .page-head {
    gap: 14px;
  }
  .page-head p {
    max-width: 240px;
  }
  .page-head button {
    padding: 10px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
  .stats {
    margin-bottom: 24px;
  }
  .stat {
    padding: 17px;
  }
  .section-top {
    padding: 18px 16px 0;
  }
  .toolbar {
    padding: 14px 16px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .search {
    max-width: none;
    width: 100%;
    flex-basis: 100%;
  }
  .toolbar select {
    font-size: 13px;
  }
  .orders-table thead,
  .orders-table tfoot {
    display: none;
  }
  .orders-table tbody,
  .orders-table tr,
  .orders-table td {
    display: block;
  }
  .orders-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 12px;
    padding: 17px 16px;
    border-bottom: 1px solid var(--line);
  }
  .orders-table td {
    padding: 0;
    border: 0;
  }
  .orders-table td:nth-child(1) {
    grid-column: 1;
  }
  .orders-table td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .orders-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }
  .orders-table td:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }
  .orders-table td:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
  }
  .orders-table td:nth-child(6) {
    display: none;
  }
  .orders-table td:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
    text-align: right;
  }
  .orders-table .order-ref {
    min-height: 28px;
    font-size: 13px;
  }
  .table-footer {
    padding: 15px;
    gap: 10px;
  }
  .table-footer .pager {
    gap: 4px;
  }
  .table-footer .pager button {
    min-height: 36px;
  }
  .table-footer .pager span {
    display: none;
  }
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  dialog {
    width: 100%;
    max-width: 100%;
    max-height: 94dvh;
    margin: auto 0 0;
    border-bottom: 0;
  }
  .dialog-layout {
    max-height: 92dvh;
  }
  .dialog-head {
    padding: 20px;
  }
  .dialog-body {
    padding: 22px 20px;
  }
  .dialog-footer {
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  dialog.compact {
    width: calc(100% - 28px);
    margin: auto;
    border-radius: 14px;
    max-width: 480px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .step-number {
    width: 21px;
    height: 21px;
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .product-card {
    padding: 16px;
    min-height: 140px;
  }
  .checkout-bottom {
    gap: 10px;
  }
  .checkout-bottom button {
    font-size: 12px;
  }
  .entity-list table thead,
  .entity-list table tfoot {
    display: none;
  }
  .entity-list tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 16px;
    gap: 10px;
    border-bottom: 1px solid var(--line);
  }
  .entity-list tbody td {
    border: 0;
    padding: 0;
    flex-basis: calc(50% - 5px);
    font-size: 12px;
    overflow-wrap: anywhere;
  }
  .entity-list tbody td:before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .entity-list tbody td:last-child {
    margin-left: auto;
    text-align: right;
  }
  .auth-main {
    display: block;
    padding: 40px 22px;
    max-width: 480px;
  }
  .auth-story h1 {
    font-size: 36px;
    margin: 17px 0 12px;
  }
  .auth-story > p {
    font-size: 13px;
    max-width: none;
    margin-bottom: 25px;
  }
  .signal-art {
    display: none;
  }
  .auth-story .eyebrow {
    font-size: 9px;
  }
  .auth-card {
    padding: 26px;
    margin-top: 30px;
  }
  .auth-card h2 {
    font-size: 23px;
  }
  .public-header {
    height: 80px;
    padding: 0 23px;
  }
  .public-header a {
    font-size: 11px;
  }
  .public-footer {
    padding: 23px;
    gap: 15px;
    font-size: 9px;
  }
  button {
    min-height: 44px;
  }
  .toast {
    bottom: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Role-specific commerce and lifecycle interfaces */
.order-status {
  position: relative;
  gap: 7px;
  outline-offset: 4px;
}
.order-status:before {
  content: '';
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.order-status.pending {
  color: #b29442;
}
.order-status.cancelled,
.order-status.trash {
  color: #9b827a;
}
.order-status.archived {
  color: #86937e;
}
.check-cell {
  width: 38px;
  padding-right: 4px;
  padding-left: 20px;
}
.check-cell input {
  margin: 0;
  display: block;
  cursor: pointer;
}
.lifecycle-table .order-cell {
  white-space: nowrap;
}
.detail-identity {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 25px;
}
.detail-identity p {
  font-size: 12px;
  margin-top: 9px;
}
.detail-identity strong {
  font-size: 13px;
}
.lifecycle-table th {
  font-size: 11px;
}
.pos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 405px;
  gap: 30px;
  align-items: start;
}
.catalog-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.catalog-tools h2 {
  font-size: 15px;
  white-space: nowrap;
}
.catalog-tools .search {
  max-width: 230px;
}
.catalog-tools input {
  font-size: 12px;
}
.pos-products {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pos-product {
  min-height: 210px;
  cursor: default;
  padding: 18px;
  display: block;
  background: #ffffffe0;
}
.product-image {
  height: 64px;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.product-image img {
  height: 64px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 7px;
}
.pos-product .product-mark {
  display: inline-flex;
  margin: 0;
  padding: 12px;
  background: #efe2a8;
}
.pos-product strong {
  display: block;
  font-size: 16px;
}
.pos-product > small {
  display: block;
  font-size: 11px;
  margin-top: 7px;
  line-height: 1.5;
  min-height: 16px;
}
.order-basket {
  position: sticky;
  top: 22px;
  background: #ffffffdb;
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.basket-head {
  padding: 21px 23px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.basket-head h2 {
  font-size: 16px;
  margin: 0;
}
.basket-items {
  max-height: 290px;
  overflow-y: auto;
  padding: 0 23px;
}
.basket-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.basket-item:last-child {
  border-bottom: 0;
}
.basket-item > div > strong {
  font-size: 13px;
}
.basket-item small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
}
.basket-item .quantity {
  margin-top: 11px;
  gap: 12px;
}
.basket-item .quantity button {
  min-width: 27px;
  min-height: 27px;
  width: 27px;
  height: 27px;
  font-size: 13px;
}
.quantity .remove-item {
  margin-left: 3px;
  border: 0;
  background: none;
  color: #a1aa98;
}
.remove-item svg {
  width: 13px;
}
.basket-section {
  padding: 21px 23px;
  border-top: 1px solid var(--line);
}
.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}
.section-label h3 {
  margin: 0;
  font-size: 13px;
}
.section-label > button {
  margin-left: auto;
  font-size: 11px;
}
.section-label .step-number {
  font-size: 10px;
  background: #edf2e5;
  border: 0;
  color: #6f8355;
}
.basket-section input {
  font-size: 12px;
}
.compact-payments {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.compact-payments label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 5px;
  font-size: 11px;
  margin: 0;
  font-weight: 500;
}
.compact-payments label svg {
  width: 15px;
}
.compact-payments label:has(input:checked) {
  border-color: #86976d;
  background: #f0f4e7;
  color: #456038;
  box-shadow: 0 0 0 1px #86976d;
}
.compact-payments input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.compact-payments label:has(input:focus-visible) {
  outline: 3px solid #b8a357;
  outline-offset: 3px;
}
.payment-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.75;
  margin: 13px 0 0;
}
.payment-note svg {
  width: 14px;
}
.wallet-preview {
  margin-top: 11px !important;
}
.wallet-preview > div {
  font-size: 11px;
  padding: 6px 0;
}
.basket-total .summary-line {
  font-size: 12px;
  padding: 0;
}
.basket-total .summary-total {
  font-size: 17px;
  padding-top: 17px;
  margin-top: 17px;
  margin-bottom: 23px;
}
.full-width {
  width: 100%;
}
.wallet-modal-balance {
  margin: 22px 0 24px;
  padding: 22px;
  background: #f0f4e7;
  border: 1px solid #e4eada;
  border-radius: 9px;
}
.wallet-modal-balance strong {
  display: block;
  font: 700 28px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif,
    sans-serif;
  letter-spacing: -0.8px;
  margin-top: 10px;
}
.balance-preview {
  margin: 20px 0 24px;
  background: #f7f9f1;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 17px;
}
.balance-preview .summary-total dt {
  color: var(--ink);
}
.file-upload {
  padding: 20px;
  border: 1px dashed #cad6bb;
  border-radius: 9px;
  background: #f9fbf4;
  margin: 22px 0;
  display: flex;
  gap: 13px;
  align-items: center;
  flex-wrap: wrap;
}
.file-upload strong {
  font-size: 13px;
}
.file-upload small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 6px;
}
.file-upload input {
  width: 100%;
  font-size: 12px;
  border: 0;
  background: transparent;
  padding: 12px 0 0;
}
.import-counts {
  display: flex;
  gap: 25px;
  margin: 20px 0;
  font-size: 12px;
  color: var(--muted);
}
.import-counts strong {
  color: var(--ink);
  font-size: 20px;
  margin-right: 5px;
}
.import-preview {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.valid-text {
  color: #5b7b42;
}
.invalid-text {
  color: #a36547;
}
.entity-product {
  display: flex;
  align-items: center;
  gap: 12px;
}
.entity-product img {
  width: 35px;
  height: 35px;
  border-radius: 6px;
  object-fit: cover;
}
.entity-product .product-mark {
  padding: 8px;
}
.entity-product .product-mark svg {
  width: 17px;
}
@media (min-width: 1600px) {
  .pos-layout {
    grid-template-columns: minmax(0, 1fr) 430px;
  }
  .pos-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1250px) {
  .pos-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
  }
  .pos-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-tools {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .catalog-tools .search {
    max-width: none;
    width: 100%;
  }
  .basket-section,
  .basket-head {
    padding: 20px;
  }
  .basket-items {
    padding: 0 20px;
  }
}
@media (max-width: 1000px) {
  .pos-layout {
    grid-template-columns: 1fr;
  }
  .order-basket {
    position: static;
  }
  .pos-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .catalog-tools {
    flex-direction: row;
    align-items: center;
  }
  .catalog-tools .search {
    max-width: 260px;
  }
  .basket-items {
    max-height: none;
  }
  .detail-identity {
    grid-template-columns: 1fr 1fr;
  }
  .detail-identity > div:last-child {
    grid-column: 1 / -1;
  }
  .lifecycle-table .check-cell {
    padding-left: 14px;
    padding-right: 4px;
  }
}
@media (max-width: 700px) {
  .pos-layout {
    gap: 22px;
  }
  .pos-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-tools {
    gap: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .catalog-tools .search {
    max-width: none;
  }
  .pos-product {
    padding: 16px;
    min-height: 210px;
  }
  .product-image {
    height: 52px;
  }
  .product-image img {
    height: 52px;
  }
  .pos-product strong {
    font-size: 15px;
  }
  .pos-product > small {
    font-size: 10px;
  }
  .basket-section input {
    font-size: 16px;
  }
  .compact-payments label {
    min-height: 44px;
    font-size: 12px;
  }
  .basket-item .quantity button {
    min-width: 34px;
    min-height: 34px;
    width: 34px;
    height: 34px;
  }
  .basket-item small {
    font-size: 11px;
  }
  .wallet-preview > div {
    font-size: 12px;
  }
  .payment-note {
    font-size: 12px;
  }
  .lifecycle-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }
  .lifecycle-table.has-selection tbody tr {
    grid-template-columns: 23px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .lifecycle-table td.order-cell {
    display: block;
    grid-area: 1 / 1;
    white-space: normal;
  }
  .lifecycle-table td.customer-cell-wrap {
    display: block;
    grid-area: 2 / 1;
    text-align: left;
  }
  .lifecycle-table td.amount-cell {
    display: block;
    grid-area: 1 / 2;
    text-align: right;
  }
  .lifecycle-table td.status-cell {
    display: block;
    grid-area: 3 / 1;
    text-align: left;
  }
  .lifecycle-table td.date-cell {
    display: none;
  }
  .lifecycle-table.has-selection td.check-cell {
    display: block;
    grid-area: 1 / 1 / 4 / 2;
    padding: 5px 0 0;
  }
  .lifecycle-table.has-selection td.order-cell {
    grid-area: 1 / 2;
  }
  .lifecycle-table.has-selection td.customer-cell-wrap {
    grid-area: 2 / 2;
  }
  .lifecycle-table.has-selection td.amount-cell {
    grid-area: 1 / 3;
  }
  .lifecycle-table.has-selection td.status-cell {
    grid-area: 3 / 2;
  }
  .lifecycle-table .order-ref {
    font-size: 11px;
  }
  .lifecycle-table td small {
    font-size: 10px;
  }
  .lifecycle-table td strong {
    font-size: 12px;
  }
  .lifecycle-table td {
    border: 0;
  }
  .detail-identity {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .detail-identity > div:last-child {
    grid-column: auto;
  }
  .detail-identity p {
    font-size: 13px;
  }
  .import-counts {
    gap: 13px;
    font-size: 11px;
  }
  .import-counts strong {
    font-size: 17px;
  }
  .page-head:has(#jumpToOrder) {
    align-items: flex-start;
    flex-direction: column;
  }
  .page-head:has(#jumpToOrder) .actions {
    align-self: stretch;
  }
  .page-head:has(#jumpToOrder) button {
    width: 100%;
  }
}
.lifecycle-table td {
  padding-top: 12px;
  padding-bottom: 12px;
}
@media (min-width: 701px) and (max-width: 900px) {
  .lifecycle-table td,
  .lifecycle-table th {
    padding-left: 9px;
    padding-right: 9px;
  }
  .lifecycle-table .check-cell {
    padding-left: 12px;
    width: 32px;
  }
}
@media (max-width: 700px) {
  .lifecycle-table td {
    padding: 0;
  }
}
.nav-close {
  display: none;
}
@media (max-width: 700px) {
  .nav-close {
    display: flex;
    position: absolute;
    right: 12px;
    top: 12px;
  }
}

/* OSKEC wordmark: keep the full product name together in each navigation width. */
.sidebar .brand {
  margin-left: 0;
  margin-right: 0;
  gap: 8px;
  white-space: nowrap;
}
@media (min-width: 701px) and (max-width: 980px) {
  .sidebar .brand {
    gap: 7px;
  }
}
@media (max-width: 700px) {
  .sidebar .brand {
    padding-right: 25px;
  }
  .public-header {
    gap: 14px;
  }
  .public-header .brand {
    font-size: 17px;
    white-space: nowrap;
    gap: 7px;
  }
  .public-header .brand small {
    font-size: 8px;
    letter-spacing: 0.5px;
  }
  .public-header > a {
    text-align: right;
  }
}
.settings-method {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.settings-method input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.settings-method small {
  display: block;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 7px;
}
.compact-payments {
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
.orders-toolbar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.bulk-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Toolbar and table-footer bulk actions share one size: a 40px select and button. */
.bulk-controls select {
  width: 190px;
  min-height: 40px;
}
.bulk-controls button {
  min-height: 40px;
  padding-left: 14px;
  padding-right: 14px;
}
.order-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}
.order-search-group {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  max-width: 410px;
  min-width: 220px;
}
.order-search-group .search {
  flex: 1;
  min-width: 0;
}
.orders-toolbar select,
.bulk-controls-bottom select {
  font-size: 12px;
}
@media(max-width:1100px) {
  .order-search-group {
    max-width: none;
    flex-basis: 100%;
  }
  .order-filters {
    margin-left: auto;
  }
}
@media(max-width:700px) {
  .orders-toolbar {
    gap: 12px;
  }
  .bulk-controls {
    width: 100%;
  }
  .bulk-controls select {
    flex: 1;
    min-width: 0;
    width: auto;
  }
  .order-filters {
    margin-left: 0;
    width: 100%;
  }
  .order-filters select {
    width: 100%;
  }
  .order-search-group {
    min-width: 0;
    width: 100%;
  }
  .orders-toolbar select,
  .bulk-controls-bottom select {
    font-size: 14px;
  }
  .order-search-group input {
    font-size: 16px;
  }
}

/* Order controls retain desktop density and adapt to touch layouts. */
.sort-heading {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sort-heading:hover {
  background: transparent;
}
/* Sort indicator: two small triangles, faint until the column is sorted; the active
   direction fills in clay. */
.sort-icon {
  flex: none;
  width: 7px;
  height: 11px;
  fill: currentColor;
}
.sort-icon path {
  opacity: .25;
  transition: opacity .15s ease, fill .15s ease;
}
.sort-heading:hover .sort-icon path {
  opacity: .45;
}
th[aria-sort="ascending"] .sort-icon .up,
th[aria-sort="descending"] .sort-icon .down {
  opacity: 1;
  fill: var(--color-clay);
}
#refreshOrders[aria-busy="true"] svg {
  animation: spin .8s linear infinite;
}
#productFilterWrap[hidden] {
  display: none;
}
#orderProduct {
  max-width: 220px;
}
@media(max-width:700px) {
  .order-filters {
    flex-wrap: wrap;
  }
  .order-filters>select {
    flex: 1 1 100%;
  }
  #productFilterWrap {
    display: block;
    flex: 1 1 100%;
    min-width: 0;
  }
  #orderProduct {
    max-width: none;
    width: 100%;
  }
}
@media(prefers-reduced-motion:reduce) {
  #refreshOrders[aria-busy="true"] svg {
    animation: none;
  }
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
  max-width: 1400px;
}
.dashboard-tile {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.76);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s,background .15s;
}
.dashboard-tile>svg {
  width: 16px;
  flex-shrink: 0;
  margin: 7px 0 0 auto;
  color: var(--muted);
}
.tile-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
}
.tile-icon svg {
  width: 20px;
  height: 20px;
}
.dashboard-tile h2,
.method-summary h2 {
  font-size: 16px;
  margin: 2px 0 8px;
}
.dashboard-tile p,
.method-summary p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.method-summary {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.method-summary:last-child {
  border: 0;
}
.method-summary>span:last-child {
  margin-left: auto;
}
@media(max-width:1150px) {
  .dashboard-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media(max-width:700px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dashboard-tile {
    align-items: center;
  }
  .dashboard-tile>svg {
    margin-top: 0;
  }
  .method-summary {
    flex-wrap: wrap;
  }
  .method-summary>div {
    flex: 1;
    min-width: 150px;
  }
}
.address-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}
.address-grid>.empty {
  grid-column: 1/-1;
}
.address-card {
  padding: 24px;
}
.address-card header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.address-card h2 {
  font-size: 17px;
  margin: 0;
}
.address-card p {
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.address-card .actions {
  margin-top: 22px;
}
.check-label input,
.method-summary input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.payment-method-area {
  max-width: 1000px;
}
@media(max-width:1100px) {
  .address-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media(max-width:700px) {
  .address-grid {
    grid-template-columns: 1fr;
  }
  .method-summary .tile-icon {
    display: none;
  }
  .method-summary h2 {
    font-size: 16px;
  }
  .method-summary input {
    min-height: 20px;
  }
}

/* Affiliate purchasing: catalogue → product → checkout. */
.field-label {
  display: block;
  font-weight: 550;
  font-size: 13px;
  margin-bottom: 8px;
}
.text-link {
  font-weight: 600;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.category-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px 0 22px;
}
.chip {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 550;
}
.chip[aria-pressed='true'] {
  border-color: var(--forest);
}
.product-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  cursor: pointer;
  transition: border-color .16s,box-shadow .16s;
}
.product-link .eyebrow {
  margin-bottom: 4px;
}
.verify-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  width: max-content;
}
.verify-tag svg {
  width: 12px;
  height: 12px;
}
.page-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 550;
}
.back-link svg {
  transform: rotate(180deg);
}
.product-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 36px;
}
.product-media img {
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.product-media .product-mark {
  padding: 34px;
  background: #efe2a8;
  border-radius: 20px;
}
.product-media .product-mark svg {
  width: 56px;
  height: 56px;
}
.product-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.product-actions button {
  flex: 1;
  min-width: 170px;
  min-height: 46px;
}
.checkout-steps {
  display: grid;
  gap: 20px;
}
.checkout-steps .section-label {
  margin-bottom: 18px;
}
.recipient-verified {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #cfe0cc;
  margin-bottom: 20px;
}
.recipient-verified > div {
  flex: 1;
  min-width: 0;
}
.recipient-verified small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}
.recipient-verified .tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.checkout-reason {
  margin: 10px 0 0;
  line-height: 1.5;
}
.row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.row-actions button {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
}

/* Staff products, categories. */
.variation-row {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 40px 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.variation-head {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.inline-form {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.inline-form button {
  flex-shrink: 0;
}
.category-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 8px;
}
.category-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.category-list li span {
  white-space: nowrap;
}

/* Revenue analytics. */
.segmented {
  display: inline-flex;
  gap: 2px;
  flex-wrap: wrap;
}
.segmented button {
  padding: 5px 12px;
  font-size: 12px;
}
.revenue-grid {
  display: grid;
  grid-template-columns: minmax(0,1.7fr) minmax(0,1fr);
  gap: 20px;
  margin-bottom: 24px;
  align-items: start;
}
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.chart-head h2 {
  font-size: 15px;
  margin: 0;
}
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 190px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.bar {
  flex: 1;
  min-width: 2px;
  height: var(--h);
  position: relative;
  outline: none;
}
.bar::before {
  content: '';
  position: absolute;
  inset: -190px -1px 0;
}
.bar:hover::after,
.bar:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--color-white);
  font-size: 11px;
  padding: 6px 9px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
.bar:first-child:hover::after,
.bar:first-child:focus-visible::after {
  left: 0;
  transform: none;
}
.bar:last-child:hover::after,
.bar:last-child:focus-visible::after {
  left: auto;
  right: 0;
  transform: none;
}
.bar-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}
.hbar-list {
  display: grid;
  gap: 16px;
}
.hbar-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.hbar-track {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}
.hbar-track span {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 4px;
}
.hbar small {
  font-size: 11px;
}
.top-products li {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.top-products li:last-child {
  border: 0;
}
.top-products small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
}

/* Staff settings. */
.settings-tabs {
  margin: 0 0 22px;
}
a.tab {
  display: inline-flex;
  align-items: center;
}
.settings-form {
  display: grid;
  gap: 20px;
  max-width: 880px;
}
.settings-form h2 {
  font-size: 16px;
  margin-bottom: 6px;
}
.settings-form .panel > p.muted {
  margin-bottom: 18px;
}
.method-order {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.method-order .settings-method {
  align-items: center;
}
.method-order .settings-method > span:nth-child(2) {
  flex: 1;
}
.order-buttons {
  display: flex;
  gap: 2px;
}
.order-buttons .icon-button {
  font-size: 15px;
}
.copy-field {
  display: flex;
  gap: 8px;
}
.copy-field input {
  font-family: ui-monospace,monospace;
  font-size: 12px;
  background: #f7f7f2;
}
.copy-field button {
  flex-shrink: 0;
}
.settings-save {
  display: flex;
  justify-content: flex-end;
}
@media (max-width:1000px) {
  .revenue-grid {
    grid-template-columns: 1fr;
  }
  .product-media {
    min-height: 220px;
  }
}
@media (max-width:700px) {
  .product-actions button {
    min-width: 0;
  }
  .page-top {
    flex-wrap: wrap;
  }
  .variation-row {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 40px 36px;
  }
  .variation-row > input:first-child {
    grid-column: 1 / -1;
  }
  .variation-head {
    display: none;
  }
  .copy-field {
    flex-direction: column;
  }
  .row-actions {
    justify-content: flex-start;
  }
  .settings-save button {
    width: 100%;
  }
  .page-head .segmented {
    width: 100%;
  }
  .page-head .segmented button {
    flex: 1;
  }
}
@media (max-width:700px) {
  .entity-list tbody td.check-cell {
    flex-basis: 100%;
  }
  .entity-list tbody td.check-cell:before {
    content: none;
  }
}
.settings-form .form-grid {
  margin-bottom: 20px;
}

/* Staff orders: Screen Options (WooCommerce style) and counted status views. */
.screen-options-bar {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 12px;
}
.screen-options-bar button {
  min-height: 32px;
  padding: 5px 12px;
}
.screen-options-bar svg {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
  transition: transform .16s;
}
.screen-options-bar button[aria-expanded='true'] svg {
  transform: rotate(-90deg);
}
.screen-options {
  margin-bottom: 22px;
  display: grid;
  gap: 18px;
}
.screen-options fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.screen-options legend {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
  padding: 0;
}
.screen-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  margin: 0;
  cursor: pointer;
}
.screen-per-page {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.screen-per-page label {
  margin: 0;
}
.screen-per-page input {
  width: 90px;
}
.tab .tab-count {
  margin-left: 4px;
}
.tab[aria-selected='true'] .tab-count {
  background: var(--soft);
  color: var(--forest);
}

/* Affiliate orders: in-progress cards, compact history. */
.orders-subhead {
  font-size: 15px;
  margin: 6px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.order-cards {
  display: grid;
}
.order-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  text-align: left;
  background: var(--color-white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-weight: 400;
}
.order-card:hover {
  border-color: #c9d2bf;
  box-shadow: 0 6px 18px #2028200d;
  filter: none;
}
.order-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.order-card-top small {
  color: var(--muted);
  font-size: 11px;
}
.order-card strong {
  font-size: 15px;
}
.order-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.order-card-foot .money {
  font-weight: 650;
}
.orders-none {
  margin: 0 0 32px;
}
.order-history ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.order-history li + li {
  border-top: 1px solid var(--line);
}
.history-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: none;
  color: var(--ink);
  border-radius: 0;
  padding: 12px 18px;
  text-align: left;
  font-weight: 400;
  min-height: 56px;
}
.history-row:hover {
  background: #fafbf6;
  filter: none;
}
.history-row strong {
  font-weight: 600;
}
.history-row small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}
.history-end {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.history-end .money {
  font-size: 13px;
}
.order-history .show-more {
  margin: 10px 18px 14px;
}
.order-history .orders-none {
  margin: 0;
  padding: 18px;
}
@media (max-width:700px) {
  .history-end {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .history-row {
    padding: 12px 14px;
  }
  .screen-options-bar {
    margin-top: 0;
  }
}
.show-all-cards {
  grid-column: 1 / -1;
  justify-self: start;
}

/* Orders: explicit View / Edit actions; rows are not clickable. */
.order-row {
  cursor: default;
}
strong.order-ref {
  display: block;
  line-height: 24px;
}
.orders-table .row-actions {
  flex-wrap: nowrap;
}
.pen-field {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.pen-field span {
  font-weight: 600;
}
.pen-field input {
  flex: 1;
}
.pen-field .icon-button {
  color: var(--forest);
}

/* Revenue: period comparisons. Direction is carried by the arrow and text, not colour alone. */
.change {
  font-size: 11px;
  font-weight: 650;
  padding: 3px 7px;
  white-space: nowrap;
}
.change.flat {
  color: var(--muted);
  background: #f0f1ea;
}
.orders-table .row-actions button {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
  gap: 6px;
}
.orders-table .row-actions svg {
  width: 15px;
  height: 15px;
}
.orders-table .date-cell {
  white-space: nowrap;
}
@media (max-width:1250px) {
  .orders-table .row-actions button {
    padding: 5px 8px;
  }
}
@media (max-width:980px) {
  .orders-table .row-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
}

/* Profile photos. */
.avatar {
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar.large {
  width: 84px;
  height: 84px;
  font-size: 24px;
}
.avatar-edit {
  position: relative;
  flex-shrink: 0;
}
.avatar-pen {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 50%;
  background: var(--forest);
  color: var(--color-white);
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 3px solid var(--color-white);
  box-shadow: 0 2px 8px #2028201f;
}
.avatar-pen svg {
  width: 14px;
  height: 14px;
}
.avatar-edit:focus-within .avatar-pen {
  outline: 3px solid #b8a357;
  outline-offset: 2px;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}
.profile-header h2 {
  margin-bottom: 4px;
}
.profile-header .text {
  margin-top: 6px;
}

/* Product dialog: two columns, clear sections, real image picker. */
dialog.product-dialog {
  width: min(980px, calc(100vw - 32px));
}
.product-form {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(0,1fr);
  gap: 22px;
  align-items: start;
}
.product-form-main,
.product-form-side {
  display: grid;
  gap: 18px;
}
.form-section {
  background: var(--color-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.form-section h3 {
  font-size: 14px;
  margin: 0 0 14px;
}
.form-section .field:last-child {
  margin-bottom: 0;
}
.product-form-error {
  grid-column: 1 / -1;
}
.product-form-error:empty {
  display: none;
}
.type-choice {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.type-choice label {
  margin: 0;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fafbf7;
}
.type-choice label:has(input:checked) {
  border-color: var(--forest);
  box-shadow: inset 0 0 0 1px var(--forest);
  background: var(--soft);
}
.type-choice label:has(input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}
.type-choice input {
  margin-top: 2px;
}
.type-choice small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.4;
}
.variation-table {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.variation-table .variation-row {
  margin: 0;
}
.add-option {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
}
.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
}
.switch-row strong {
  display: block;
  font-weight: 600;
  font-size: 13px;
}
.switch-row small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.45;
}
input.switch {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .16s;
}
input.switch::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 1px 3px #0000002e;
  transition: transform .16s;
}
input.switch:checked::after {
  transform: translateX(16px);
}
input.switch:focus-visible {
  outline: 3px solid #b8a357;
  outline-offset: 2px;
}
@media (max-width:760px) {
  .product-form {
    grid-template-columns: 1fr;
  }
  .type-choice {
    grid-template-columns: 1fr;
  }
}

/* Revenue: compare periods as two lines. The previous period is dashed so it never relies on colour. */
.compare-panel {
  margin-bottom: 30px;
}
.compare-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.compare-controls select {
  width: auto;
  min-height: 40px;
  font-size: 12px;
}
.compare-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin: 4px 0 18px;
}
.legend-item {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 8px;
  font-size: 12px;
  color: var(--muted);
}
.legend-item strong {
  grid-column: 2;
  color: var(--ink);
  font: 750 20px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif,sans-serif;
}
.legend-item small {
  grid-column: 2;
  font-size: 11px;
}
.swatch {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px solid var(--green);
  vertical-align: middle;
}
.swatch.previous {
  border-top: 2px dashed #8f998a;
}
.line-chart {
  position: relative;
  min-height: 260px;
  outline: none;
  border-radius: var(--radius-sm);
}
.line-chart:focus-visible {
  outline: 3px solid #b8a357;
  outline-offset: 4px;
}
.line-chart svg {
  display: block;
  overflow: visible;
  touch-action: pan-y;
}
.line-chart .grid {
  stroke-width: 1;
}
.line-chart .axis {
  font-size: 11px;
}
.line-chart .line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.line-chart .line.previous {
  stroke-dasharray: 5 4;
}
.line-chart .crosshair {
  stroke: #c8cfbf;
  stroke-width: 1;
}
.line-chart .dot {
  stroke: var(--color-white);
  stroke-width: 2;
}
.line-chart .dot.previous {
  fill: #8f998a;
}
.chart-tip {
  position: absolute;
  top: 0;
  color: var(--color-white);
  padding: 8px 10px;
  font-size: 11px;
  display: grid;
  gap: 4px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px #20282033;
}
.chart-tip .swatch {
  width: 12px;
  margin-right: 6px;
}
.chart-tip .swatch.previous {
  border-top-color: #c9d0c2;
}
@media (max-width:700px) {
  .compare-controls,
  .compare-controls .segmented {
    width: 100%;
  }
  .compare-controls .segmented button {
    flex: 1 1 45%;
  }
  .compare-controls select {
    width: 100%;
  }
}
.line-chart .hit {
  fill: transparent;
  pointer-events: all;
}
.line-chart .hover[hidden],
.chart-tip[hidden] {
  display: none;
}
.line-chart .hover {
  pointer-events: none;
}
.line-chart > svg {
  width: 100%;
  height: 260px;
}

/* Product photo galleries: editing (staff) and viewing (buyers). */
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.section-title h3 {
  margin: 0;
}
.gallery-editor {
  display: grid;
  gap: 10px;
  border-radius: var(--radius-lg);
  transition: background .16s,box-shadow .16s;
}
.gallery-editor.dragging {
  background: var(--soft);
  box-shadow: 0 0 0 2px var(--green);
}
.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 9px;
  overflow: hidden;
  background: #f0f2ea;
  border: 1px solid var(--line);
}
.gallery-item.cover {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover-badge {
  position: absolute;
  color: var(--color-white);
  font-weight: 650;
}
.gallery-tools {
  position: absolute;
  display: flex;
}
.gallery-tools .icon-button {
  padding: 0;
  border-radius: 50%;
  background: #ffffffeb;
  color: var(--ink);
  box-shadow: 0 1px 4px #0000002b;
}
.move-photo svg {
  transform: rotate(180deg);
}
.gallery-grid > li:not(.gallery-item) {
  aspect-ratio: 1;
}
.gallery-add {
  height: 100%;
  margin: 0;
  border: 1.5px dashed #cfd6c5;
  border-radius: 9px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  color: var(--forest);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: #fafbf7;
  text-align: center;
  padding: 6px;
}
.gallery-add:hover {
  border-color: var(--green);
  background: var(--soft);
}
.gallery-editor:focus-within .gallery-add {
  outline: 3px solid #b8a357;
  outline-offset: 2px;
}
.gallery-grid:has(> li:only-child) {
  grid-template-columns: 1fr;
}
.gallery-editor small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.photo-count {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #ffffffe6;
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  color: var(--muted);
}
.product-image {
  position: relative;
}
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.gallery-nav.prev {
  left: 12px;
}
.gallery-nav.prev svg {
  transform: rotate(180deg);
}
.gallery-nav.next {
  right: 12px;
}
.gallery-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 11px;
}
.gallery-thumbs {
  display: flex;
  gap: 8px;
  padding: 0 18px 18px;
  overflow-x: auto;
}
.gallery-thumbs button {
  flex: 0 0 64px;
  height: 64px;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-white);
  border: 2px solid transparent;
  min-height: 0;
}
.gallery-thumbs button[aria-current='true'] {
  border-color: var(--forest);
}
.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-thumbs[hidden] {
  display: none;
}

/* Checkout delivery step. */
.delivery-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--soft);
}
.delivery-summary > div {
  flex: 1;
  min-width: 0;
}
.delivery-summary strong {
  display: block;
  font-size: 13px;
}
.delivery-summary small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.delivery-summary-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--forest);
  border: 1px solid var(--line);
}
.delivery-summary-icon svg {
  width: 16px;
  height: 16px;
}
.delivery-summary button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 14px;
}
.delivery-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.new-address {
  margin-top: 16px;
}
.new-address .check-label {
  font-size: 13px;
}

/* Product dialog photos: a strip of equal, fixed-size thumbnails in the main column. */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gallery-grid:has(> li:only-child) {
  display: flex;
}
.gallery-item,
.gallery-item.cover,
.gallery-slot {
  width: 92px;
  height: 92px;
  aspect-ratio: auto;
  flex: 0 0 92px;
  grid-column: auto;
  grid-row: auto;
}
.gallery-item img {
  position: absolute;
  inset: 0;
}
.cover-badge {
  left: 4px;
  top: auto;
  bottom: 4px;
  font-size: 9px;
  padding: 1px 6px;
}
.gallery-tools {
  right: 3px;
  top: 3px;
  gap: 3px;
}
.gallery-tools .icon-button {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}
.gallery-tools svg {
  width: 12px;
  height: 12px;
}
.gallery-slot.empty {
  flex: 1 1 100%;
  width: auto;
  height: 84px;
}
.gallery-grid:has(> li:only-child) .gallery-add {
  aspect-ratio: auto;
  font-size: 12px;
}
.gallery-slot.empty .gallery-add {
  grid-auto-flow: column;
  gap: 8px;
}
.switch-row + .switch-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Links that act as buttons. */
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--forest);
  color: var(--color-white);
  font-weight: 600;
}
a.button:hover {
  filter: brightness(.96);
}
a.button.secondary {
  background: var(--color-white);
  border-color: var(--line);
  color: var(--ink);
}
a.button.full-width {
  width: 100%;
}

/* Cart: sidebar count, top-bar button, and the cart page. */
.nav-count {
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
}
.nav-count[hidden] {
  display: none;
}
.topbar-cart {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.topbar-cart:hover {
  border-color: #c9d2bf;
}
.topbar-cart .cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-white);
}
.topbar-cart .cart-count[hidden] {
  display: none;
}
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap: 24px;
  align-items: start;
}
.cart-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-line {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) auto 96px 36px;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
}
.cart-line + .cart-line {
  border-top: 1px solid var(--line);
}
.cart-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #f1f2ea;
  display: grid;
  place-items: center;
}
.cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-thumb .product-mark {
  padding: 14px;
  background: #efe2a8;
  border-radius: var(--radius-md);
}
.cart-info {
  min-width: 0;
}
.cart-info a {
  color: var(--ink);
}
.cart-info strong {
  font-size: 14px;
}
.cart-info small {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  color: var(--muted);
}
.cart-line .quantity {
  gap: 12px;
}
.cart-line .quantity button {
  min-width: 32px;
  width: 32px;
  min-height: 32px;
  padding: 0;
}
.cart-line-total {
  text-align: right;
}
.cart-summary {
  position: sticky;
  top: 22px;
  display: grid;
  gap: 12px;
}
.cart-summary h2 {
  font-size: 16px;
  margin: 0 0 4px;
}
.continue-shopping {
  justify-self: center;
  font-size: 13px;
}
@media (max-width:1000px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .cart-summary {
    position: static;
  }
}
@media (max-width:700px) {
  .cart-line {
    grid-template-areas: 'thumb info remove' 'thumb qty total';
    gap: 10px 12px;
    padding: 14px 16px;
  }
  .cart-thumb {
    grid-area: thumb;
    width: 56px;
    height: 56px;
  }
  .cart-info {
    grid-area: info;
  }
  .cart-line .quantity {
    grid-area: qty;
  }
  .cart-line-total {
    grid-area: total;
  }
  .remove-line {
    grid-area: remove;
  }
  .topbar-right .pill {
    display: none;
  }
}
@media (max-width:700px) {
  .cart-line {
    grid-template-columns: 56px minmax(0,1fr) auto;
  }
  .cart-line-total {
    grid-column: auto;
  }
}

/* ==========================================================================
   Theme: WordPress admin. System font at 13px, charcoal navigation with the
   current item in WordPress blue, #f0f0f1 canvas, square white list tables,
   and WooCommerce's order-status colours.
   ========================================================================== */
:root {
  --bg: #f0f0f1;
  --paper: var(--color-white);
  --forest: #2271b1;
  --primary: #2271b1;
  --primary-hover: #135e96;
  --link: #2271b1;
  --green: #00a32a;
  --soft: #f0f6fc;
  --danger: #d63638;
  --accent: #72aee6;
  --radius: 4px;
  font-size: 13px;
  line-height: 1.4em;
  color: var(--ink);
}
body {
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
}
h1,
h2,
h3,
.stat-value,
.brand,
.legend-item strong {
  font-family: inherit;
}
h1 {
  font-size: 23px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 4px;
  color: var(--ink);
}
h2 {
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: 0;
}
h3 {
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0;
}
.page-head p {
  font-size: 13px;
  color: var(--muted);
}
.eyebrow,
.dialog-head .eyebrow {
  color: #646970;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: 11px;
}
a {
  color: var(--link);
}
.text-link {
  color: var(--link);
}
::selection {
  background: #c5d9ed;
}

/* Form controls */
input,
select,
textarea {
  border: 1px solid #8c8f94;
  border-radius: 4px;
  background: var(--color-white);
  color: #2c3338;
  font-size: 14px;
  min-height: 30px;
  padding: 0 8px;
  box-shadow: none;
}
textarea {
  padding: 6px 8px;
  line-height: 1.5;
}
select {
  padding-right: 24px;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
  outline: 2px solid transparent;
}
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--primary);
  min-height: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  box-shadow: none;
}
.search input {
  padding-left: 32px;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 32px;
  font-size: 14px;
}
.search svg {
  color: #8c8f94;
  top: 8px;
}
label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.field small,
small.muted {
  color: var(--muted);
}

/* Buttons: WordPress primary and secondary. */
button,
a.button {
  background: var(--primary);
  color: var(--color-white);
  border: 1px solid var(--primary);
  border-radius: 3px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 2.15384615;
  box-shadow: none;
  letter-spacing: 0;
}
button:hover:not(:disabled),
a.button:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--color-white);
  filter: none;
}
button.secondary,
a.button.secondary {
  background: #f6f7f7;
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: none;
}
button.secondary:hover:not(:disabled),
a.button.secondary:hover {
  background: #f0f0f1;
  border-color: var(--primary-hover);
  color: var(--primary-hover);
}
button.text {
  background: none;
  border: 0;
  color: var(--link);
  min-height: 0;
  padding: 0;
}
button.text:hover:not(:disabled) {
  background: none;
  color: var(--primary-hover);
  text-decoration: underline;
}
button.icon-button {
  background: transparent;
  border-color: transparent;
  color: #50575e;
  padding: 6px;
  min-height: 32px;
}
button.icon-button:hover:not(:disabled) {
  background: #f0f0f1;
  color: var(--primary);
}
button.danger {
  background: var(--danger);
  border-color: var(--danger);
}
button.danger:hover:not(:disabled) {
  background: #b32d2e;
  border-color: #b32d2e;
}
button:disabled {
  opacity: 1;
  background: #f6f7f7;
  color: #a7aaad;
  border-color: #dcdcde;
}

/* Navigation: WordPress admin menu. */
.sidebar {
  background: #1d2327;
  border-right: 0;
  color: #f0f0f1;
  padding: 20px 0 16px;
}
.sidebar .brand {
  color: var(--color-white);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
}
.sidebar .brand div {
  color: var(--color-white);
}
.sidebar .brand small {
  color: #a7aaad;
  letter-spacing: 0.04em;
  font-size: 9px;
}
.nav-group {
  margin-bottom: 6px;
}
.sidebar .eyebrow {
  color: #8c8f94;
  padding: 10px 16px 4px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
}
.nav-link {
  position: relative;
  margin: 0;
  padding: 8px 16px;
  border-radius: 0;
  color: #f0f0f1;
  font-size: 14px;
  font-weight: 400;
  gap: 10px;
}
.nav-link svg {
  color: #a7aaad;
  width: 18px;
  height: 18px;
}
.nav-link:hover {
  background: #2c3338;
  color: #72aee6;
}
.nav-link:hover svg {
  color: #72aee6;
}
.nav-link[aria-current='page'] {
  background: var(--primary);
  color: var(--color-white);
  font-weight: 400;
  box-shadow: none;
}
.nav-link[aria-current='page'] svg {
  color: var(--color-white);
}

/* The notch that points at the page, as in wp-admin. */
.nav-link[aria-current='page']:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right-color: var(--bg);
}
.nav-count {
  background: #d63638;
  color: var(--color-white);
  min-width: 18px;
  height: 18px;
  font-size: 9px;
  font-weight: 600;
  border-radius: 9px;
  margin-left: 4px;
}
.sidebar .nav-close {
  color: #c3c4c7;
}
.user-card {
  display: block;
  padding: 10px;
  background: #2c3338;
  border: 0;
  border-radius: 3px;
}
.account-id {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f0f0f1;
  padding: 2px;
  border-radius: 3px;
}
.account-id:hover {
  background: #3c434a;
}
.account-id > span {
  min-width: 0;
}
.user-card strong {
  display: block;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-card small {
  display: block;
  color: #a7aaad;
  font-size: 12px;
}
.user-card .avatar {
  width: 32px;
  height: 32px;
  background: #50575e;
  border: 0;
  color: var(--color-white);
}

/* Top bar */
.pill {
  background: #f6f7f7;
  border: 1px solid var(--line-soft);
  color: #50575e;
  border-radius: 3px;
  font-size: 12px;
}
.avatar {
  background: #dcdcde;
  border: 0;
  color: #1d2327;
}
.topbar-cart {
  border: 1px solid var(--line-soft);
  color: #50575e;
  background: var(--color-white);
}
.topbar-cart .cart-count {
  background: #d63638;
  color: var(--color-white);
  border-color: var(--color-white);
}

/* Page layout and boxes: square, bordered, no shadows. */
.page-head {
  margin-bottom: 16px;
}
.page-head .actions {
  gap: 8px;
}
.panel,
.form-section,
.cart-summary,
.stats,
.dashboard-tile,
.product-card,
.product-link,
.address-card,
.order-card {
  background: var(--color-white);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.panel-pad {
  padding: 16px 20px;
}
dialog {
  background: var(--color-white);
  border-radius: 4px;
  border: 1px solid var(--line);
  box-shadow: 0 5px 40px rgba(0, 0, 0, 0.3);
}
.dialog-head,
.dialog-footer {
  background: var(--color-white);
  border-color: var(--line-soft);
}
.dialog-head h2 {
  font-size: 20px;
  font-weight: 400;
}
.notice {
  background: var(--color-white);
  border: 1px solid var(--line);
  border-left: 4px solid #72aee6;
  border-radius: 0;
  color: var(--ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.notice.warning {
  border-left-color: #dba617;
  background: var(--color-white);
  color: var(--ink);
}
.notice.error {
  border-left-color: #d63638;
  background: var(--color-white);
  color: var(--ink);
}
.toast {
  background: #1d2327;
  color: #f0f0f1;
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  font-size: 13px;
}
.empty-icon {
  background: #f0f0f1;
  color: #787c82;
  border-radius: 4px;
}
.step-number {
  background: #50575e;
  color: var(--color-white);
  border: 0;
}
.screen-options {
  background: var(--color-white);
  border-color: var(--line);
}
.screen-options-bar button {
  border-radius: 0 0 3px 3px;
  border-top: 0;
  background: var(--color-white);
  color: #50575e;
  border-color: var(--line);
  font-size: 13px;
}
.screen-options-bar button:hover:not(:disabled) {
  color: var(--primary);
  background: var(--color-white);
}

/* List tables */
.table-wrap {
  overflow-x: auto;
}
table {
  font-size: 13px;
}
th {
  background: var(--color-white);
  color: #2c3338;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--line);
  padding-top: 8px;
  padding-bottom: 8px;
}
td {
  font-size: 13px;
  color: #50575e;
  border-bottom: 0;
}
td strong {
  color: #1d2327;
}
tbody tr:nth-child(odd) td {
  background: #f6f7f7;
}
tbody tr:hover td {
  background: #f0f6fc;
}
.sort-heading {
  color: var(--link);
  font-size: 14px;
  font-weight: 400;
}
.sort-heading:hover {
  color: var(--primary-hover);
}
.order-ref {
  color: var(--link);
  font-weight: 600;
  font-size: 14px;
}
.order-cell small,
.amount-cell small {
  color: #787c82;
}
.table-footer {
  color: #50575e;
  font-size: 13px;
  border-top: 1px solid var(--line-soft);
}
.timeline li:before {
  background: #8c8f94;
  box-shadow: none;
}

/* Status views as WordPress "All (n) | Processing (n)" links. */
.tabs {
  border-bottom: 0;
  gap: 0;
  padding: 12px 16px 6px;
  flex-wrap: wrap;
}
.tab {
  background: none;
  border: 0;
  border-radius: 0;
  min-height: 0;
  padding: 2px 0;
  color: var(--link);
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
}
.tab:hover:not(:disabled) {
  background: none;
  color: var(--primary-hover);
}
#orderTabs .tab + .tab {
  margin-left: 8px;
  padding-left: 9px;
  border-left: 1px solid #a7aaad;
  line-height: 1;
}
.tab[aria-selected='true'] {
  color: #1d2327;
  font-weight: 600;
  border: 0;
}
.tab .tab-count,
.tab[aria-selected='true'] .tab-count {
  background: none;
  color: #50575e;
  font-weight: 400;
  font-size: 13px;
  padding: 0;
  margin-left: 3px;
}
.tab .tab-count:before {
  content: '(';
}
.tab .tab-count:after {
  content: ')';
}

/* Choice controls */
.chip {
  border-radius: 3px;
  border: 1px solid var(--primary);
  color: var(--primary);
  background: #f6f7f7;
  min-height: 28px;
  box-shadow: none;
}
.chip[aria-pressed='true'] {
  background: var(--primary);
  color: var(--color-white);
}
.segmented {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--color-white);
  padding: 2px;
}
.segmented button {
  background: transparent;
  border: 0;
  color: var(--link);
  min-height: 28px;
  border-radius: 2px;
}
.segmented button:hover:not(:disabled) {
  background: #f0f0f1;
  color: var(--primary-hover);
}
.segmented button[aria-pressed='true'] {
  background: var(--primary);
  color: var(--color-white);
}
input.switch {
  width: 36px;
  height: 20px;
  min-height: 20px;
  border: 0;
  border-radius: var(--radius-md);
  background: #8c8f94;
}
input.switch::after {
  width: 14px;
  height: 14px;
  top: 3px;
  left: 3px;
}
input.switch:checked {
  background: var(--primary);
}
.type-choice label,
.compact-payments label {
  border-radius: 3px;
  background: var(--color-white);
  border-color: var(--line);
}
.type-choice label:has(input:checked),
.compact-payments label:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
  background: #f0f6fc;
  color: var(--ink);
}

/* WooCommerce order-status marks. */
.order-status {
  display: inline-flex;
  align-items: center;
  line-height: 2.5em;
  padding: 0 1em;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  background: #e5e5e5;
  color: #777;
  white-space: nowrap;
}
.order-status:before {
  display: none;
}
.order-status.processing {
  background: #c6e1c6;
  color: #131c06;
}
.order-status.completed {
  background: #c8d7e1;
  color: #2e4453;
}
.order-status.on_hold {
  background: #f8dda7;
  color: #94660c;
}
.order-status.failed {
  background: #eba3a3;
  color: #761919;
}
.order-status.pending,
.order-status.cancelled,
.order-status.trash,
.order-status.archived {
  background: #e5e5e5;
  color: #777;
}
@media (max-width: 980px) {
  .order-status {
    padding: 0 0.7em;
    font-size: 12px;
  }
}
.badge {
  border-radius: 4px;
  background: #e5e5e5;
  color: #50575e;
  font-weight: 400;
  font-size: 12px;
  padding: 3px 8px;
}
.badge:before {
  display: none;
}
.badge.paid,
.badge.active,
.badge.success {
  background: #c6e1c6;
  color: #3d5a11;
}
.badge.pending {
  background: #f8dda7;
  color: #7a5307;
}
.badge.processing {
  background: #c8d7e1;
  color: #2e4453;
}
.badge.failed,
.badge.suspended,
.badge.inactive,
.badge.cancelled {
  background: #eba3a3;
  color: #761919;
}
.change {
  border-radius: 3px;
}
.change.up {
  background: #c6e1c6;
  color: #3d5a11;
}
.change.down {
  background: #eba3a3;
  color: #761919;
}

/* Stats and tiles */
.stats {
  overflow: hidden;
}
.stat-label {
  color: var(--muted);
  font-size: 13px;
}
.stat-value {
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
}
.stat-foot {
  color: #787c82;
  font-size: 12px;
}
.stat.emphasis {
  background: var(--color-white);
  border-radius: 0;
}
.dashboard-tile {
  min-height: 120px;
  padding: 20px;
}
.dashboard-tile:hover {
  border-color: #8c8f94;
  background: var(--color-white);
  transform: none;
}
.dashboard-tile h2 {
  font-size: 15px;
  color: var(--link);
}
.tile-icon {
  background: #f0f6fc;
  color: var(--primary);
  border-radius: 4px;
}
.recipient-verified {
  border-radius: 3px;
  border-color: #c6e1c6;
  background: #f3f9f0;
}
.recipient-verified .tile-icon {
  background: #00a32a;
  color: var(--color-white);
}

/* Products and cart */
.product-link:hover {
  border-color: #8c8f94;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  transform: none;
}
.product-mark,
.pos-product .product-mark,
.cart-thumb .product-mark,
.product-media .product-mark {
  background: #f0f6fc;
  color: var(--primary);
}
.product-price {
  color: #1d2327;
  font-weight: 600;
}
.product-media {
  background: #f6f7f7;
}
.verify-tag {
  background: #f0f6fc;
  color: #135e96;
  border-radius: 3px;
}
.cover-badge {
  background: var(--primary);
  border-radius: 3px;
}
.gallery-item,
.gallery-add,
.cart-thumb {
  border-radius: 3px;
}
.gallery-item.cover {
  box-shadow: 0 0 0 2px var(--primary);
}
.gallery-add,
.file-upload {
  border-color: #8c8f94;
  color: var(--primary);
  background: #f6f7f7;
}
.photo-count {
  border-radius: 3px;
}

/* Charts in WordPress blue; the previous period stays grey and dashed. */
.bar {
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}
.bar:hover,
.bar:focus-visible {
  background: var(--primary-hover);
}
.hbar-track {
  background: #f0f0f1;
}
.hbar-track span {
  background: var(--primary);
}
.line-chart .line.current {
  stroke: var(--primary);
  stroke-width: 2;
}
.line-chart .line.previous {
  stroke: #a7aaad;
}
.line-chart .dot.current {
  fill: var(--primary);
}
.line-chart .grid {
  stroke: #f0f0f1;
}
.line-chart .axis {
  fill: #787c82;
}
.swatch {
  border-top-color: var(--primary);
}
.swatch.previous {
  border-top-color: #a7aaad;
}
.chart-tip {
  background: #1d2327;
  border-radius: 3px;
}
.chart-tip .swatch {
  border-top-color: #72aee6;
}
table.sr-only {
  display: block;
}

/* Revenue: top products in their own panel. */
.top-products-panel {
  margin-bottom: 8px;
}
.top-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-products li {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 8px 0 14px;
}
.top-products li + li {
  border-top: 0;
}
.top-products .rank {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  background: #f0f0f1;
  color: #50575e;
}
.top-products li:first-child .rank {
  background: var(--primary);
  color: var(--color-white);
}
.top-name small {
  display: block;
}
.top-bar {
  position: absolute;
  left: 36px;
  right: 0;
  bottom: 4px;
  height: 4px;
  border-radius: 2px;
  background: #f0f0f1;
}
.top-bar:after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 2px;
  background: var(--primary);
}

/* Sign-in: the WordPress login look. */
.auth-page {
  background: #f0f0f1;
}
.public-header {
  border-bottom-color: var(--line-soft);
  background: var(--color-white);
}
.auth-story h1 {
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #1d2327;
}
.auth-story h1 em {
  color: var(--primary);
}
.auth-story > p {
  color: var(--muted);
}
.auth-story .eyebrow:before {
  background: var(--primary);
}
.signal-art {
  border-bottom-color: var(--line);
}
.signal-art i {
  background: #c5d9ed;
  border-color: #72aee6;
}
.signal-art i:nth-child(even) {
  background: #2271b1;
  border-color: #135e96;
}
.auth-card {
  background: var(--color-white);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.tab {
  gap: 0;
  display: inline;
}
.tabs {
  align-items: baseline;
}
.settings-tabs {
  gap: 4px;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.settings-tabs .tab {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: -1px;
  background: #dcdcde;
  border: 1px solid var(--line);
  color: #50575e;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}
.settings-tabs .tab:hover:not(:disabled) {
  background: var(--color-white);
  color: #3c434a;
}
.settings-tabs .tab[aria-selected='true'] {
  background: var(--bg);
  border-bottom-color: var(--bg);
  color: #000;
}

/* Affiliate commerce surfaces: quiet interactive states, independent of primary buttons. */
.affiliate-order-workspace {
  --surface-border: #d9dfe2;
  --surface-muted: #626d76;
}
.affiliate-order-workspace .orders-subhead {
  font-size: 16px;
  font-weight: 600;
  margin: 4px 0 16px;
}
.order-cards {
  grid-template-columns: repeat(auto-fill,minmax(270px,1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.affiliate-order-workspace button.order-card {
  background: var(--color-white);
  color: #202b33;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  line-height: 1.5;
  box-shadow: 0 1px 2px #1d232704;
  transition: border-color .15s,box-shadow .15s;
}
.affiliate-order-workspace button.order-card:hover:not(:disabled) {
  background: var(--color-white);
  color: #202b33;
  border-color: #9facb6;
  box-shadow: 0 3px 12px #2638450a;
  filter: none;
}
.affiliate-order-workspace button.order-card:focus-visible {
  background: var(--color-white);
  color: #202b33;
  outline: 2px solid var(--color-slate);
  outline-offset: 3px;
}
.affiliate-order-workspace .order-card strong {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.order-card-top {
  margin-bottom: 2px;
}
.affiliate-order-workspace .order-card-top small,
.affiliate-order-workspace .muted {
  color: var(--surface-muted);
}
.affiliate-order-workspace .order-card-foot {
  gap: 10px;
  border-top: 1px solid #edf0f2;
}
.order-card-foot .money {
  color: #202b33;
  font-size: 16px;
  white-space: nowrap;
}
.order-card-foot .small {
  margin-left: auto;
  overflow-wrap: anywhere;
}
.order-card-arrow {
  display: flex;
  color: #7b8993;
}
.order-card-arrow svg,
.history-arrow svg {
  width: 16px;
  height: 16px;
}
.affiliate-order-workspace .order-status {
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 5px;
}
.affiliate-order-workspace .order-status.processing {
  color: #315c3e;
  background: #e9f2eb;
}
.affiliate-order-workspace .order-status.completed {
  color: #315d78;
  background: #eaf1f6;
}
.affiliate-order-workspace .order-status.on_hold {
  color: #795b20;
  background: #faf1da;
}
.affiliate-order-workspace .order-status.failed {
  color: #8a3936;
  background: #fae9e7;
}
.affiliate-order-workspace .order-status.pending,
.affiliate-order-workspace .order-status.cancelled,
.affiliate-order-workspace .order-status.archived,
.affiliate-order-workspace .order-status.trash {
  color: #58616a;
  background: #edf0f2;
}
.affiliate-order-workspace .order-history {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: none;
}
.affiliate-order-workspace .order-history li+li {
  border-color: #e9edef;
}
.affiliate-order-workspace button.history-row {
  background: var(--color-white);
  color: #202b33;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 16px;
  gap: 22px;
  line-height: 1.5;
  box-shadow: none;
}
.affiliate-order-workspace button.history-row:hover:not(:disabled) {
  background: #f5f7f8;
  color: #202b33;
  border-color: transparent;
  filter: none;
}
.affiliate-order-workspace button.history-row:focus-visible {
  outline: 2px solid var(--color-slate);
  outline-offset: -3px;
  background: #f5f7f8;
}
.history-row strong {
  display: block;
  font-size: 14px;
  color: #202b33;
  overflow-wrap: anywhere;
}
.affiliate-order-workspace .history-row small {
  color: var(--surface-muted);
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.5;
}
.affiliate-order-workspace .history-end {
  display: grid;
  grid-template-columns: 110px 110px;
  align-items: center;
  gap: 20px;
  text-align: right;
}
.affiliate-order-workspace .history-end .money {
  font-size: 14px;
  color: #202b33;
  font-weight: 600;
}
.history-end .order-status {
  justify-self: end;
}
.history-arrow {
  display: flex;
  color: #7b8993;
}

/* Product catalogue: media, identity, then price and a clear next step. */
#productCatalog {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
  gap: 22px;
}
#productCatalog>.empty {
  grid-column: 1/-1;
}
#productCatalog .product-link {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
  background: var(--color-white);
  border: 1px solid #d9dfe2;
  border-radius: var(--radius-md);
  overflow: hidden;
  color: #202b33;
  text-decoration: none;
  box-shadow: 0 1px 2px #1d232704;
}
#productCatalog .product-link:hover {
  background: var(--color-white);
  border-color: #9facb6;
  box-shadow: 0 4px 16px #2638450c;
  color: #202b33;
  transform: none;
}
#productCatalog .product-link:focus-visible {
  outline: 2px solid var(--color-slate);
  outline-offset: 3px;
}
#productCatalog .product-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  height: auto;
  aspect-ratio: 16/10;
  width: 100%;
  margin: 0;
  padding: 22px;
  background: #f5f7f8;
  border-bottom: 1px solid #edf0f2;
}
#productCatalog .product-image img {
  border-radius: 0;
}
#productCatalog .product-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  background: #e8edf0;
  color: #516777;
  border: 1px solid #dce4e9;
  border-radius: var(--radius-xl);
}
#productCatalog .product-mark svg {
  width: 30px;
  height: 30px;
}
#productCatalog .photo-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  background: #fffffff2;
  color: #50616d;
  border: 1px solid #e2e7ea;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 4px;
}
#productCatalog .photo-count svg {
  width: 12px;
  height: 12px;
}
.catalog-card-content {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  padding: 20px;
  min-width: 0;
}
#productCatalog .eyebrow {
  margin: 0;
  color: #65727c;
  font-size: 10px;
  letter-spacing: .08em;
}
#productCatalog .catalog-card-title {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.4;
  color: #202b33;
  overflow-wrap: anywhere;
}
#productCatalog .verify-tag {
  margin: 0;
  padding: 0;
  background: none;
  color: #4d6272;
  font-size: 11px;
  font-weight: 400;
  white-space: normal;
  width: auto;
  line-height: 1.5;
}
#productCatalog .verify-tag svg {
  flex-shrink: 0;
}
#productCatalog .product-price {
  display: block;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.2px;
  color: #202b33;
}
@media(min-width:1500px) {
  #productCatalog {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}
@media(max-width:1100px) {
  #productCatalog {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .affiliate-order-workspace .history-end {
    grid-template-columns: auto;
    gap: 5px;
  }
}
@media(max-width:700px) {
  .order-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .affiliate-order-workspace button.history-row {
    gap: 12px;
    grid-template-columns: minmax(0,1fr) auto 14px;
  }
  .affiliate-order-workspace .history-row small {
    font-size: 12px;
  }
  .affiliate-order-workspace .history-end {
    gap: 6px;
  }
  .catalog-card-content {
    padding: 16px;
  }
}
@media(max-width:480px) {
  #productCatalog {
    grid-template-columns: 1fr;
  }
  #productCatalog .product-link {
    display: grid;
    grid-template-columns: 108px minmax(0,1fr);
  }
  #productCatalog .product-image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 170px;
    border-bottom: 0;
    border-right: 1px solid #edf0f2;
    padding: 12px;
  }
  #productCatalog .product-mark {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-lg);
  }
  #productCatalog .product-mark svg {
    width: 24px;
    height: 24px;
  }
  #productCatalog .photo-count {
    right: 6px;
    bottom: 8px;
    font-size: 10px;
  }
  #productCatalog .catalog-card-title {
    font-size: 16px;
  }
  .catalog-card-content {
    padding: 16px;
    gap: 7px;
  }
}
@media(min-width:1101px) and (max-width:1499px) {
  #productCatalog {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}
#productCatalog .product-price {
  white-space: nowrap;
}
#productCatalog .catalog-card-content {
  width: 100%;
}
@media(min-width:481px) {
  #productCatalog .product-image {
    height: 164px;
    aspect-ratio: auto;
  }
}

/* OSKEC identity and focused commerce refinements. */
.brand {
  gap: 12px;
  align-items: center;
}
.brand-emblem {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-wordmark {
  font-size: 29px;
  font-weight: 650;
  letter-spacing: -1.2px;
  line-height: 1;
}
.brand-wordmark>span {
  display: inline-block;
  margin-left: 5px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .2px;
}
.brand .brand-wordmark small {
  margin-top: 8px;
  font-size: 8px;
  letter-spacing: 2px;
  font-weight: 500;
  color: inherit;
  opacity: .65;
}
.sidebar .brand {
  padding: 27px 19px 25px;
  margin: 0 0 14px;
  border-bottom: 1px solid #ffffff18;
}
.sidebar .brand-emblem {
  background: var(--color-white);
  padding: 5px;
  border-radius: var(--radius-lg);
}
.sidebar .brand-wordmark {
  color: #f5f7fa;
}
#toast {
  position: fixed;
  inset: auto 24px 24px auto;
  margin: 0;
  transform: none;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(440px,calc(100vw - 32px));
  padding: 13px 14px;
  border: 1px solid #b8ddc7;
  border-radius: var(--radius-md);
  background: #ecf8f0;
  color: #17643b;
  box-shadow: 0 8px 30px #152f2026;
  font-size: 13px;
  line-height: 1.5;
}
#toast[hidden] {
  display: none;
}
#toast[data-kind=error] {
  background: #fff1f0;
  border-color: #edc6c3;
  color: #963832;
}
#toast .toast-symbol {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #19834b;
  color: white;
  width: 25px;
  height: 25px;
}
#toast[data-kind=error] .toast-symbol {
  background: #b44740;
}
#toast svg {
  width: 16px;
  height: 16px;
}
#toast .toast-close {
  color: inherit;
  background: transparent;
  border: 0;
  padding: 5px;
  min-height: 30px;
  box-shadow: none;
  margin-left: auto;
}
.affiliate-order-workspace .order-cards {
  gap: 12px;
  margin-bottom: 24px;
}
.affiliate-order-workspace button.order-card {
  padding: 16px;
  gap: 7px;
}
.order-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}
.affiliate-order-workspace .order-card-heading strong {
  font-size: 14px;
}
.order-card-heading .money {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
}
.order-card-recipient {
  color: #576571;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.order-card-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  color: #737d85;
}
.order-card-meta small {
  font-size: inherit;
}
.affiliate-order-workspace .order-card-foot {
  margin-top: 3px;
  padding-top: 10px;
  width: 100%;
}
.order-card-view {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #526b7c;
}
.order-card-view svg {
  width: 14px;
  height: 14px;
}
.affiliate-order-workspace button.history-row {
  min-height: 68px;
  padding: 13px 16px;
}
#productCatalog .product-image:not(.product-image-empty) {
  padding: 0;
  overflow: hidden;
}
#productCatalog .product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.product-dialog .dialog-body {
  position: relative;
  z-index: 1;
}
.product-dialog .dialog-footer {
  position: relative;
  z-index: 2;
}
.product-dialog .dialog-footer .menu-items {
  left: 0;
  right: auto;
  bottom: calc(100% + 8px);
  min-width: 190px;
  box-shadow: 0 8px 28px #17253526;
}
.product-dialog .gallery-grid .gallery-slot {
  width: 92px;
  height: 92px;
  min-height: 92px;
  aspect-ratio: auto;
}
.product-dialog .gallery-grid .gallery-slot.empty {
  width: 100%;
  height: auto;
  min-height: 112px;
  flex: 1 1 100%;
  aspect-ratio: auto;
}
.product-dialog .gallery-add {
  width: 100%;
  height: 100%;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  border: 1px dashed #9fb2c0;
  border-radius: var(--radius-sm);
  background: #f7f9fb;
  color: #356488;
  cursor: pointer;
}
.product-dialog .gallery-slot.empty .gallery-add {
  min-height: 112px;
}
.product-dialog .gallery-add:hover {
  background: #edf3f8;
  border-color: #2271b1;
}
.product-dialog .gallery-add svg {
  width: 22px;
  height: 22px;
}
.product-dialog .gallery-add small {
  font-size: 11px;
  color: #6b7780;
  font-weight: 400;
}
.wallet-identity {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}
.wallet-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf2f6;
  color: #496579;
  font-weight: 600;
  flex-shrink: 0;
}
.wallet-identity strong,
.wallet-identity span:not(.wallet-avatar),
.wallet-identity small {
  display: block;
}
.wallet-identity strong {
  font-size: 14px;
}
.wallet-identity div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.wallet-identity div span,
.wallet-identity small {
  color: #687580;
  font-size: 12px;
  margin-top: 3px;
}
.wallet-detail-dialog .wallet-modal-balance {
  background: #f3f7fa;
  padding: 24px;
  border: 1px solid #dde7ef;
  border-radius: var(--radius-md);
  margin: 0 0 20px;
  text-align: left;
}
.wallet-modal-balance>span,
.wallet-modal-balance>small {
  display: block;
  color: #62717d;
  font-size: 12px;
}
.wallet-detail-dialog .wallet-modal-balance strong {
  margin: 8px 0;
  font-size: 30px;
  letter-spacing: -.7px;
}
.wallet-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wallet-action-grid button {
  justify-content: center;
}
.wallet-audit-note {
  text-align: center;
  font-size: 11px;
  color: #78838c;
  margin: 18px 0 0;
}
.wallet-adjust-dialog .dialog-body {
  padding: 24px;
}
.wallet-adjust-dialog .dialog-footer {
  justify-content: space-between;
}
.wallet-amount-input {
  display: flex;
  align-items: center;
  border: 1px solid #aebac3;
  border-radius: 6px;
  overflow: hidden;
  background: white;
}
.wallet-amount-input:focus-within {
  outline: 2px solid var(--color-slate);
  outline-offset: 2px;
}
.wallet-amount-input>span {
  padding-left: 14px;
  color: #6b7780;
  font-size: 13px;
}
.wallet-amount-input input {
  border: 0;
  box-shadow: none;
  outline: none;
  font-size: 24px;
  padding: 12px;
  min-width: 0;
  width: 100%;
}
.wallet-adjust-dialog .balance-preview {
  background: #f6f8fa;
  border: 1px solid #e1e7eb;
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-top: 20px;
}
.wallet-adjust-dialog .balance-preview .key-values {
  margin: 0;
}
.wallet-adjust-dialog .summary-total {
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid #dce4e9;
}
@media(max-width:700px) {
  #toast {
    inset: auto 16px 16px 16px;
    max-width: none;
  }
  .wallet-adjust-dialog .dialog-body {
    padding: 20px;
  }
}

/* Upload slots must not inherit the page-level empty-state padding. */
.product-dialog .gallery-grid .gallery-slot.empty {
  padding: 0;
  margin: 0;
}
#toast[data-kind=info] {
  background: #eff5fa;
  border-color: #c4d9e9;
  color: #315e7d;
}
#toast[data-kind=info] .toast-symbol {
  background: #457b9f;
}
@media(min-width:701px) and (max-width:980px) {
  .sidebar .brand {
    padding: 20px 10px;
    gap: 8px;
  }
  .sidebar .brand-emblem {
    width: 34px;
    height: 34px;
  }
  .sidebar .brand-wordmark {
    font-size: 23px;
  }
  .sidebar .brand-wordmark>span {
    font-size: 11px;
    margin-left: 3px;
  }
  .sidebar .brand-wordmark small {
    font-size: 7px;
    letter-spacing: 1.3px;
  }
}
.customer-import-dialog .import-progress {
  padding: 24px 8px;
  text-align: center;
}
.import-progress>.spinner {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
}
.import-progress h3,
.import-complete h3 {
  font-size: 19px;
  margin: 8px 0;
}
.import-progress progress {
  width: 100%;
  height: 10px;
  accent-color: var(--primary);
  margin: 20px 0 8px;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
}
.import-progress progress::-webkit-progress-bar {
  background: #e9eef2;
}
.import-progress progress::-webkit-progress-value {
  background: #2271b1;
  border-radius: 6px;
}
.customer-import-dialog .import-counts {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.customer-import-dialog .import-counts>span {
  min-width: 0;
}
.customer-import-dialog .actions {
  flex-wrap: wrap;
}
.import-complete {
  text-align: center;
  padding: 8px 0 18px;
}
.import-complete .success-mark {
  display: grid;
  margin: 0 auto 12px;
  width: 44px;
  height: 44px;
}
.customer-import-dialog .import-preview td {
  max-width: 220px;
  overflow-wrap: anywhere;
  white-space: normal;
}
@media(max-width:700px) {
  .customer-import-dialog .import-counts {
    gap: 8px;
  }
  .customer-import-dialog .import-counts strong {
    font-size: 22px;
  }
  .customer-import-dialog .actions>button {
    flex: 1 1 auto;
  }
}

/* A quiet identity footer, with one deliberate sign-out action. */
.sidebar .user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border-top: 1px solid #ffffff1c;
  border-radius: 0;
}
.sidebar .account-id {
  flex: 1;
  min-width: 0;
  gap: 10px;
  padding: 0;
}
.sidebar .account-id:hover {
  background: transparent;
}
.sidebar .account-id>span:last-child {
  flex: 1;
  min-width: 0;
}
.sidebar .user-card .avatar {
  flex: 0 0 36px;
  background: #dce8ef;
  color: #355d77;
}
.sidebar .user-card strong {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.sidebar .user-card small {
  font-size: 11px;
  color: #a4b0ba;
  margin-top: 2px;
}
.security-log-panel {
  overflow: hidden;
}
.security-log-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.security-log-toolbar h2 {
  font-size: 15px;
  margin: 0 0 5px;
}
.security-log-toolbar p {
  margin: 0;
}
.security-log-toolbar .field {
  margin: 0;
  min-width: 200px;
}
.security-log-toolbar label {
  font-size: 11px;
}
.security-log-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.security-log-entry {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px 24px;
  border-bottom: 1px solid #edf0f2;
}
.security-log-icon {
  display: grid;
  place-items: center;
  height: 34px;
  width: 34px;
  background: #f0f5f8;
  color: #4a6c83;
  border-radius: 50%;
}
.security-log-icon.attention {
  color: #946b1e;
  background: #fcf4e3;
}
.security-log-icon svg {
  width: 17px;
  height: 17px;
}
.security-log-description strong {
  font-size: 13px;
  font-weight: 600;
}
.security-log-description p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.security-log-entry time {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.security-log-footer {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media(max-width:700px) {
  .security-log-toolbar {
    padding: 18px;
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }
  .security-log-entry {
    padding: 16px;
    grid-template-columns: 30px minmax(0,1fr);
    gap: 8px 12px;
  }
  .security-log-entry time {
    grid-column: 2;
    font-size: 11px;
  }
  .security-log-footer {
    padding: 14px;
    flex-wrap: wrap;
  }
  .sidebar .user-card strong {
    font-size: 13px;
  }
}
.sidebar .user-card {
  flex-wrap: wrap;
}
.sidebar .user-card .account-id {
  flex-basis: 100%;
}
.sidebar .user-card #signout {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
  height: 37px;
  border: 1px solid #ffffff24;
  border-radius: 6px;
  background: #ffffff05;
  color: #d6dfe5;
  font-size: 12px;
  letter-spacing: .02em;
  margin-top: 6px;
}
.sidebar .user-card #signout:hover:not(:disabled) {
  background: #ffffff10;
  border-color: #ffffff45;
  color: white;
}
.sidebar .user-card #signout svg {
  width: 15px;
  height: 15px;
}
.settings-tabs {
  flex-wrap: wrap;
}
.access-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.access-grid h2,
.security-settings h2 {
  font-size: 17px;
  margin: 0 0 10px;
}
.access-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid #e7ecef;
  cursor: pointer;
}
.access-toggle small {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 4px;
}
.access-toggle input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.security-settings {
  max-width: 680px;
}
.authenticator-key {
  border: 1px solid #d8e2e9;
  background: #f4f8fb;
  padding: 16px;
  margin: 20px 0;
  border-radius: var(--radius-sm);
}
.authenticator-key code {
  display: block;
  overflow-wrap: anywhere;
  font-size: 16px;
  letter-spacing: 1px;
  margin: 12px 0;
  user-select: all;
}
.recovery-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: #f4f8fb;
  padding: 16px;
  margin: 20px 0;
}
.recovery-codes code {
  font-size: 11px;
  overflow-wrap: anywhere;
  user-select: all;
}
.auth-register {
  font-size: 13px;
  text-align: center;
}
.auth-register button {
  display: inline;
  padding: 0;
  min-height: 0;
}
.security-settings .field {
  max-width: 380px;
}
@media(max-width:850px) {
  .access-grid {
    grid-template-columns: 1fr;
  }
}
@media(max-width:400px) {
  .recovery-codes {
    grid-template-columns: 1fr;
  }
}

/* Account identity: a single trigger, with actions in a dismissible popover. */
.sidebar .user-card {
  padding: 12px 0 2px;
}
.sidebar button.account-id {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 10px 8px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #eef3f6;
  box-shadow: none;
  min-height: 62px;
}
.sidebar button.account-id:hover,
.sidebar button.account-id[aria-expanded=true] {
  background: #ffffff09;
  border-color: #ffffff16;
}
.sidebar button.account-id:focus-visible {
  outline: 2px solid #72aee6;
  outline-offset: 2px;
}
.sidebar .account-id>span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.sidebar .account-id strong,
.sidebar .account-id small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar .account-id>svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #a4b0ba;
  transform: rotate(-90deg);
}
.sidebar .user-card .avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 50%;
  border: 1px solid #ffffff38;
}
.account-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 6px;
  border: 1px solid #dce3e9;
  border-radius: var(--radius-md);
  color: #293943;
  box-shadow: 0 12px 36px #10263526,0 2px 6px #1026350d;
}
.account-popover::backdrop {
  background: transparent;
}
.account-popover a,
.sidebar .user-card .account-popover #signout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 10px 12px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  background: transparent;
  color: #293943;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: normal;
  justify-content: flex-start;
}
.account-popover a:hover,
.sidebar .user-card .account-popover #signout:hover:not(:disabled) {
  background: #f0f4f7;
  color: #153d59;
}
.account-popover a:focus-visible,
.sidebar .user-card .account-popover #signout:focus-visible {
  outline: 2px solid var(--color-slate);
  outline-offset: -2px;
}
.account-popover svg {
  width: 17px;
  height: 17px;
}
.sidebar .user-card .account-popover #signout {
  margin-top: 4px;
  border-top: 1px solid #edf0f2;
  border-radius: 0 0 6px 6px;
}
.account-popover #signout svg {
  margin-left: auto;
}
.profile-header .avatar.large {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  min-width: 84px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #d7e1e8;
  box-shadow: 0 0 0 4px #f4f7f9;
}
.profile-header .avatar-edit {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
}
.profile-header button.avatar-pen {
  min-height: 32px;
  padding: 0;
}
.profile-header button.avatar-pen:hover {
  background: #185b8b;
}
.profile-header button.avatar-pen:focus-visible {
  outline: 2px solid var(--color-slate);
  outline-offset: 3px;
}
.role-pricing {
  margin-top: 24px;
  padding-top: 4px;
  border-top: 1px solid #e3e9ed;
}
.role-pricing .switch-row {
  border: 0;
  padding: 16px 0;
}
.role-price-group {
  margin: 16px 0 0;
  padding: 16px;
  border: 1px solid #e0e7ed;
  border-radius: var(--radius-sm);
  background: #f8fafc;
  min-width: 0;
}
.role-price-group legend {
  padding: 0 6px;
  color: #536573;
  font-size: 12px;
  font-weight: 600;
}
.role-price-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px 16px;
}
.role-price-grid .field {
  margin: 0;
  min-width: 0;
}
.role-price-grid input {
  width: 100%;
  min-width: 0;
  background: var(--color-white);
}
.role-price-grid input::placeholder {
  font-size: 12px;
}
@media(max-width:400px) {
  .role-price-grid {
    grid-template-columns: 1fr;
  }
}

/* The shopping account has its own calm visual language; staff operations keep their existing shell. */
body.buyer-app {
  --ink: #253e43;
  --muted: #748184;
  --line: #e0e4e8;
  --line-soft: #edeff1;
  --forest: #244366;
  --primary: #244366;
  background: #fbfbfc;
  color: var(--ink);
  font-size: 14px;
}
.buyer-app .sidebar {
  background: var(--color-white);
  border-right: 1px solid #e7eaee;
  color: #344e52;
  box-shadow: none;
}
.buyer-app .sidebar .brand {
  border-color: #edeff1;
  padding-top: 27px;
  padding-bottom: 25px;
}
.buyer-app .sidebar .brand-wordmark {
  color: #203e43;
}
.buyer-app .sidebar .brand-emblem {
  background: #f0f3f6;
}
.buyer-app .sidebar .user-card {
  border: 0;
  padding: 0;
}
.buyer-app .sidebar button.account-id {
  padding: 13px 8px;
  color: #253e43;
  border-radius: var(--radius-md);
}
.buyer-app .sidebar button.account-id:hover,
.buyer-app .sidebar button.account-id[aria-expanded=true] {
  background: #f2f4f7;
  border-color: #e5e9ee;
}
.buyer-app .sidebar .user-card .avatar {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  background: #e3e9ef;
  color: #344a64;
  border: 1px solid #d9e0e8;
}
.buyer-app .sidebar .user-card strong {
  font-size: 14px;
}
.buyer-app .sidebar .user-card small {
  color: #7c848d;
  font-size: 12px;
}
.buyer-app .sidebar nav {
  padding: 0 16px;
}
.buyer-app .nav-group {
  margin-bottom: 18px;
}
.buyer-app .nav-group+.nav-group {
  padding-top: 18px;
  border-top: 1px solid #edeff1;
}
.buyer-app .nav-group>.eyebrow {
  display: none;
}
.buyer-app .sidebar .nav-link {
  border-radius: 7px;
  margin: 3px 0;
  padding: 12px;
  color: #617579;
  background: transparent;
  font-weight: 400;
  box-shadow: none;
  font-size: 13px;
}
.buyer-app .sidebar .nav-link svg {
  color: #828992;
}
.buyer-app .sidebar .nav-link:after {
  content: none;
}
.buyer-app .sidebar .nav-link:hover {
  background: #f4f5f7;
  color: #24384f;
}
.buyer-app .sidebar .nav-link[aria-current=page] {
  color: #243f5e;
  font-weight: 600;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.62) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(36, 51, 67, 0.1),
    0 6px 14px -8px rgba(36, 51, 67, 0.28);
}
.buyer-app .sidebar .nav-link[aria-current=page] svg {
  color: #445e7b;
}
.buyer-app .topbar-right .pill {
  display: none;
}
.buyer-app .main-shell {
  background: #fbfbfc;
}
.buyer-app #main {
  max-width: 1500px;
  margin: 0 auto;
  padding: 38px 42px 64px;
}
.buyer-app h1 {
  color: #253e43;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.5px;
}
.buyer-app .page-head p {
  color: #7b8c8e;
  font-size: 14px;
}
.buyer-app .panel {
  border-radius: var(--radius-lg);
}
.buyer-app button.secondary,
.buyer-app .button.secondary {
  border-radius: 7px;
  color: #39516d;
  border-color: #b8c3cf;
}
.buyer-app .account-popover #signout {
  background: transparent !important;
  border-color: #edf0f2 !important;
}
.buyer-app .account-popover #signout:hover {
  background: #f0f2f5 !important;
}
.buyer-app input,
.buyer-app select,
.buyer-app textarea {
  border-radius: 6px;
  border-color: #cdd4db;
}
.buyer-app .nav-close {
  color: #314256;
}
.account-welcome {
  padding: 10px 0 32px;
  max-width: 750px;
}
.account-welcome>.eyebrow {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #7c8793;
}
.account-welcome h1 {
  margin: 14px 0 12px;
  font-size: 32px;
}
.account-welcome p {
  margin: 0;
  line-height: 1.8;
  color: #737b85;
}
.buyer-app .dashboard-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}
.buyer-app .dashboard-tile {
  padding: 22px;
  border: 1px solid #dfe4e9;
  border-radius: var(--radius-md);
  box-shadow: none;
  gap: 15px;
  align-items: center;
}
.buyer-app .dashboard-tile:hover {
  border-color: #98a9bc;
  background: #f7f9fb;
  transform: none;
}
.buyer-app .dashboard-tile h2 {
  font-size: 16px;
  margin-bottom: 8px;
}
.buyer-app .dashboard-tile p {
  line-height: 1.6;
}
.buyer-app .dashboard-tile .tile-icon {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
}
.buyer-app .dashboard-tile>svg {
  display: none;
}
.wallet-card {
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid #dce1e6;
  border-radius: 14px;
  margin-bottom: 24px;
  box-shadow: 0 9px 32px #19304b09;
}
.wallet-card-balance {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--color-white);
}
.wallet-card-balance>strong {
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.wallet-card-balance>svg {
  position: absolute;
  width: 160px;
  height: 160px;
  right: 4%;
  top: 32px;
  stroke-width: 1;
}
.wallet-card-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
}
.buyer-app .wallet-card-actions button {
  border: 0 !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.buyer-app .wallet-card-actions button+button {
  border-left: 1px solid #e1e5e9 !important;
}
.wallet-card-actions svg {
  width: 18px;
  height: 18px;
}
.wallet-totals {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin: 0 0 26px;
}
.wallet-totals>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #e3e6ea;
  border-radius: var(--radius-lg);
}
.wallet-stat-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
}
.wallet-stat-icon svg {
  width: 18px;
  height: 18px;
}
.wallet-totals>div:nth-child(2) .wallet-stat-icon {
  background: #fcf1ed;
  color: #b27960;
}
.wallet-totals>div:nth-child(3) .wallet-stat-icon {
  background: #eff3f9;
  color: #7688a1;
}
.wallet-totals strong {
  font-variant-numeric: tabular-nums;
}
.buyer-app .entity-list .section-top h2 {
  font-size: 17px;
  font-weight: 550;
}
.buyer-app #productCatalog .product-card {
  border-radius: var(--radius-lg);
  border-color: #dde2e7;
  box-shadow: none;
}
.buyer-app #productCatalog .product-card:hover {
  border-color: #abb7c5;
  background: var(--color-white);
  box-shadow: 0 8px 26px #243b5509;
}
.buyer-app .affiliate-order-workspace .order-card {
  border-radius: var(--radius-md);
  border-color: #e1e5e9;
}
.buyer-app .affiliate-order-workspace .order-card:hover {
  background: #f4f6f8;
}
@media(min-width:701px) and (max-width:1100px) {
  .buyer-app #main {
    padding: 28px;
  }
  .buyer-app .dashboard-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .buyer-app .dashboard-tile {
    padding: 18px;
    gap: 12px;
  }
}
@media(max-width:700px) {
  .buyer-app #main {
    padding: 24px 18px 44px;
  }
  .buyer-app .dashboard-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }
  .buyer-app .dashboard-tile {
    padding: 18px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
  }
  .buyer-app .dashboard-tile h2 {
    font-size: 15px;
  }
  .account-welcome {
    padding: 4px 0 26px;
  }
  .account-welcome h1 {
    font-size: 28px;
  }
  .buyer-app h1 {
    font-size: 25px;
  }
  .buyer-app .sidebar nav {
    padding: 0 14px;
  }
  .wallet-totals>div>span:last-child {
    line-height: 1.5;
  }
  .wallet-stat-icon {
    width: 30px;
    height: 30px;
  }
  .wallet-card-actions button {
    min-height: 54px !important;
  }
  .buyer-app .topbar-right {
    gap: 10px;
  }
}
.buyer-app #main button[type=submit],
.buyer-app .button:not(.secondary) {
  background: #244366;
  border-color: #244366;
  border-radius: 7px;
}
.buyer-app #main button[type=submit]:hover,
.buyer-app .button:not(.secondary):hover {
  background: #1b3553;
  border-color: #1b3553;
}
.buyer-app .sidebar .user-card strong {
  color: #253e43;
}
.wallet-transaction-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wallet-transaction-list li {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto 165px;
  gap: 16px;
  align-items: center;
  border-top: 1px solid #edeff1;
}
.wallet-entry-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.wallet-entry-icon svg {
  width: 15px;
  height: 15px;
}
.wallet-entry-copy {
  min-width: 0;
}
.wallet-entry-copy p {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}
.wallet-entry-amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wallet-transaction-list time {
  text-align: right;
}

/* Compact workspace: warm surfaces, clear typography, and a shared navigation bar. */
@font-face {font-family:Inter;src:url('/fonts/InterVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap
}
:root {
  font-family: Inter,'Segoe UI',sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: 'cv11' 1,'calt' 1;
  --ink: #232e3b;
  --muted: #565d66;
  --line: #d8dbdf;
  --line-soft: #e5e8eb;
}
body,
body.buyer-app {
  font-family: Inter,'Segoe UI',sans-serif;
  color: #232e3b;
  font-size: 14px;
  font-weight: 450;
  --ink: #232e3b;
  --muted: #565d66;
  --line: #d8dbdf;
  background: #f5f3ee;
}
button,
input,
select,
textarea {
  font-family: inherit;
}
.muted {
  color: var(--muted);
}
.compact-workspace .main-shell,
.buyer-app.compact-workspace .main-shell {
  margin: 0;
  padding: 0;
  background: transparent;
  min-height: calc(100vh - 130px);
}
.compact-workspace .main-shell:before {
  content: none;
}
.workspace-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #faf9f5f2;
  border-bottom: 1px solid #cfd3d7;
  box-shadow: 0 4px 24px #282f3807;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.workspace-topbar {
  max-width: 1440px;
  min-height: 82px;
  margin: auto;
  padding: 14px 36px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.workspace-brand {
  flex-shrink: 0;
  text-decoration: none;
}
.workspace-brand .brand {
  margin: 0;
  padding: 0;
  gap: 10px;
  color: #22303f;
}
.workspace-brand .brand-emblem {
  width: 40px;
  height: 40px;
  background: transparent;
  padding: 0;
}
.workspace-brand .brand-wordmark {
  font-size: 27px;
  color: #22303f;
}
.workspace-brand .brand small {
  color: #535c67;
  opacity: 1;
  font-size: 7px;
  letter-spacing: 1.5px;
}
.workspace-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid #cfd3d8;
  border-radius: 9px;
  background: #e5e8ec;
}
.workspace-switch a {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #525962;
  white-space: nowrap;
  text-decoration: none;
}
.workspace-switch a[aria-current=page] {
  background: var(--color-surface);
  color: #23303f;
  box-shadow: 0 1px 4px #303e4f20;
}
.workspace-switch a:hover {
  color: #172a3f;
  background: #ffffff8c;
}
.workspace-switch svg {
  width: 15px;
  height: 15px;
}
.workspace-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  min-width: 0;
}
.workspace-tools .topbar-cart {
  width: 40px;
  height: 40px;
  border-color: #c8cdd2;
  color: #28384b;
  background: var(--color-surface);
}
.workspace-tools .user-card {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.workspace-tools button.account-id {
  display: flex;
  align-items: center;
  color: #24303e;
  box-shadow: none;
  text-align: left;
}
.workspace-tools .avatar {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 50%;
  font-weight: 650;
}
.workspace-tools .account-name {
  min-width: 0;
}
.workspace-tools .account-name strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.workspace-tools .account-name small {
  display: block;
}
.workspace-tools .account-id>svg {
  transform: rotate(90deg);
}
.workspace-tools #menuToggle,
.navigation-panel-head {
  display: none;
}
.workspace-navigation {
  max-width: 1440px;
  margin: auto;
  padding: 0 36px;
  position: static;
  transform: none;
}
.workspace-navigation>nav {
  align-items: center;
  gap: 20px;
}
.workspace-navigation .nav-group {
  gap: 5px;
  align-items: center;
  border: 0;
}
.workspace-navigation .nav-group+.nav-group {
  border-left: 1px solid #d2d7dc;
  padding-left: 20px;
}
.workspace-navigation .nav-link {
  position: relative;
  align-items: center;
  background: transparent;
  box-shadow: none;
}
.workspace-navigation .nav-link svg {
  color: inherit;
  stroke-width: 1.7;
}
.workspace-navigation .nav-link:after {
  content: none;
}
.workspace-context {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1368px;
  margin: 0 auto;
  padding: 24px 0 0;
  color: #606770;
  font-size: 12px;
}
.workspace-context strong {
  color: #333f4c;
  font-weight: 600;
}
.compact-workspace #main,
.buyer-app.compact-workspace #main {
  max-width: 1440px;
  padding: 25px 36px 64px;
  margin: auto;
}
.compact-workspace h1,
.buyer-app h1 {
  font-size: 27px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.7px;
  color: #242e39;
}
.compact-workspace h2,
.buyer-app h2 {
  font-weight: 600;
  color: #27313d;
}
.compact-workspace .page-head p,
.buyer-app .page-head p {
  color: #535b65;
  font-size: 14px;
  line-height: 1.7;
}
.buyer-app .panel {
  background: #fffefa;
  border: 1px solid #d4d9df;
  box-shadow: 0 3px 14px #28354405;
}
.buyer-app .account-welcome {
  padding-top: 0;
}
.buyer-app .account-welcome h1 {
  font-size: 28px;
  font-weight: 650;
}
.buyer-app .account-welcome p {
  font-size: 14px;
  color: #525b65;
}
.buyer-app .account-welcome>.eyebrow {
  color: #586370;
  font-weight: 600;
}
.buyer-app .dashboard-tile {
  background: #fffefa;
  border-color: #d0d7df;
  min-height: 118px;
}
.buyer-app .dashboard-tile h2 {
  font-weight: 650;
  color: #313c49;
}
.buyer-app .dashboard-tile p {
  color: #5c646d;
  font-size: 13px;
}
.buyer-app .dashboard-tile .tile-icon {
  background: #dfe6ed;
  color: #405266;
}
.compact-workspace .account-popover #signout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid #dbe0e6;
  border-radius: 0 0 6px 6px;
  background: transparent;
  color: #333a43;
  font-size: 13px;
  font-weight: 550;
  box-shadow: none;
}
.compact-workspace .account-popover #signout:hover {
  background: #e5eaf0 !important;
}
.compact-workspace .account-popover svg {
  width: 17px;
  height: 17px;
}
.account-popover {
  background: #fffefa;
  border-color: #c7ced6;
}
.account-popover a {
  color: #313943;
  font-weight: 550;
}
.workspace-header :is(a,button):focus-visible {
  outline: 2px solid #495b70;
  outline-offset: 3px;
}
.buyer-app .wallet-card {
  border-color: #bbc3cd;
  box-shadow: 0 8px 30px #2d37430c;
}
.wallet-card-balance {
  align-items: flex-start;
  padding: 32px 36px;
  background: linear-gradient(115deg,#192b3f,#344559);
  gap: 13px;
}
.wallet-card-balance>span {
  color: #dce3ea;
  font-weight: 550;
  font-size: 14px;
}
.wallet-card-balance>strong {
  font-size: 40px;
  font-weight: 650;
  line-height: 1.15;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.wallet-card-balance>small {
  color: #cbd5e0;
  font-size: 13px;
}
.wallet-card-balance>svg {
  opacity: .09;
}
.buyer-app .wallet-card-actions button {
  min-height: 54px;
  font-size: 14px;
  font-weight: 600;
}
.buyer-app .wallet-card-actions button+button {
  border-color: #c5ced8 !important;
}
.wallet-totals {
  gap: 16px;
}
.wallet-totals>div {
  background: #fffefa;
  border-color: #d1d8df;
  padding: 22px;
  gap: 13px;
}
.wallet-totals strong {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.wallet-totals>div>span:last-child {
  font-size: 13px;
  color: #4f5a67;
  font-weight: 500;
}
.wallet-stat-icon {
  background: #dde5ee;
  color: #3c4f65;
}
.wallet-entry-copy strong {
  font-weight: 600;
  font-size: 14px;
}
.wallet-entry-copy p {
  color: #586069;
  font-size: 13px;
  line-height: 1.6;
}
.wallet-entry-amount {
  font-weight: 650;
  font-size: 14px;
  color: #2e3843;
}
.wallet-entry-amount.credit {
  color: #2f4966;
}
.wallet-transaction-list time {
  color: #545d67;
  font-size: 12px;
}
.wallet-transaction-list li {
  border-color: #d9e0e7;
  padding: 18px 24px;
}
.wallet-entry-icon {
  color: #566371;
  background: #e7ebf0;
}
.wallet-entry-icon.credit {
  color: #374c63;
  background: #dee6ef;
}
.wallet-activity {
  scroll-margin-top: 145px;
}
.buyer-app .small,
.buyer-app small {
  font-weight: 450;
}
.buyer-app .payment-note,
.buyer-app .catalog-card-content>.eyebrow,
.buyer-app .order-card-recipient,
.buyer-app .order-card-meta,
.buyer-app .order-card-view {
  color: #4f5965;
}
.buyer-app .catalog-card-title {
  font-weight: 650;
}
.buyer-app .product-price {
  font-weight: 650;
  color: #28313c;
}
.public-store .main-shell {
  background: transparent;
}
@media(min-width:901px) and (max-width:1200px) {
  .workspace-navigation>nav {
    gap: 12px;
  }
  .workspace-navigation .nav-group+.nav-group {
    padding-left: 12px;
  }
  .workspace-context {
    padding-left: 36px;
    padding-right: 36px;
  }
}
@media(max-width:1439px) {
  .workspace-context {
    padding-left: 36px;
    padding-right: 36px;
  }
}
@media(max-width:900px) {
  .workspace-header {
    position: sticky;
  }
  .workspace-topbar {
    padding: 12px 24px;
    min-height: 76px;
    gap: 18px;
    flex-wrap: wrap;
  }
  .workspace-tools {
    gap: 12px;
  }
  .workspace-tools #menuToggle {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 44px;
    color: #2c3a49;
  }
  .workspace-tools .account-name {
    display: none;
  }
  .workspace-tools .account-id>svg {
    display: none;
  }
  .workspace-switch a {
    padding: 6px 10px;
  }
  .workspace-navigation {
    display: none;
    margin: 0 16px 14px;
    padding: 12px;
    background: #fffefa;
    border: 1px solid #c4ccd5;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px #2532401a;
    max-height: 65dvh;
    overflow: auto;
  }
  .navigation-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d3dae2;
    color: #3c4957;
    font-size: 13px;
  }
  .workspace-navigation>nav {
    padding-top: 10px;
  }
  .workspace-navigation .nav-group {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
  }
  .workspace-context {
    padding: 22px 24px 0;
  }
  .compact-workspace #main,
  .buyer-app.compact-workspace #main {
    padding: 22px 24px 48px;
  }
  .wallet-transaction-list li {
    grid-template-columns: 32px minmax(0,1fr) auto;
    gap: 8px 12px;
  }
  .wallet-transaction-list time {
    grid-column: 2/4;
    text-align: left;
  }
  .wallet-totals strong {
    font-size: 19px;
  }
  .wallet-totals>div {
    padding: 18px;
  }
  .wallet-activity {
    scroll-margin-top: 90px;
  }
}
@media(max-width:600px) {
  .workspace-topbar {
    padding: 10px 16px;
    gap: 8px;
    min-height: 72px;
  }
  .workspace-brand .brand-wordmark {
    font-size: 23px;
  }
  .workspace-brand .brand-emblem {
    width: 32px;
    height: 32px;
  }
  .workspace-brand .brand {
    gap: 7px;
  }
  .workspace-brand .brand small {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .workspace-tools {
    gap: 5px;
  }
  .workspace-tools .topbar-cart {
    width: 36px;
    height: 40px;
  }
  .workspace-tools #menuToggle {
    min-width: 36px;
    padding: 7px;
  }
  .workspace-switch {
    order: 3;
    flex: 1 1 100%;
    max-width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
  .workspace-switch a {
    flex: 1;
    min-height: 36px;
  }
  .workspace-navigation .nav-group {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .workspace-context {
    padding: 20px 18px 0;
    font-size: 12px;
  }
  .compact-workspace #main,
  .buyer-app.compact-workspace #main {
    padding: 20px 18px 40px;
  }
  .buyer-app h1,
  .compact-workspace h1,
  .buyer-app .account-welcome h1 {
    font-size: 25px;
  }
  .buyer-app .page-head p {
    font-size: 14px;
  }
  .buyer-app .dashboard-tile {
    padding: 18px 14px;
  }
  .buyer-app .dashboard-tile p {
    font-size: 13px;
  }
  .wallet-card-balance {
    padding: 28px 24px;
  }
  .wallet-card-balance>strong {
    font-size: 32px;
  }
  .wallet-card-balance>small {
    font-size: 12px;
  }
  .wallet-totals {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .wallet-totals>div {
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto;
    align-items: center;
    padding: 16px;
    gap: 12px;
  }
  .wallet-totals strong {
    grid-column: 3;
    grid-row: 1;
    font-size: 18px;
    white-space: nowrap;
  }
  .wallet-totals>div>span:last-child {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
  }
  .wallet-totals .wallet-stat-icon {
    grid-column: 1;
    grid-row: 1;
    width: 32px;
    height: 32px;
  }
  .wallet-transaction-list li {
    padding: 16px 14px;
    column-gap: 10px;
  }
  .wallet-entry-copy strong {
    font-size: 13px;
  }
  .wallet-entry-copy p {
    font-size: 12px;
  }
  .wallet-entry-amount {
    font-size: 13px;
  }
  .wallet-transaction-list time {
    font-size: 12px;
  }
  .buyer-app .entity-list .section-top h2 {
    font-size: 16px;
  }
  .buyer-app input,
  .buyer-app select,
  .buyer-app textarea {
    font-size: 16px;
  }
  .workspace-context+main .page-head {
    gap: 14px;
  }
  .wallet-activity {
    scroll-margin-top: 140px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  .workspace-navigation,
  .wallet-card {
    transition: none;
  }
}
.navigation-panel-head .nav-close {
  position: static;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  color: #394757;
}
@media(max-width:600px) {
  .wallet-totals>div>span:last-child {
    overflow-wrap: anywhere;
  }
}

/* Workspace navigation: an operational rail and a content-height account sidebar. */
.workspace-layout {
  min-width: 0;
}
.workspace-navigation>nav {
  display: block;
  min-height: 0;
  padding: 0;
}
.workspace-navigation .nav-group {
  display: block;
  margin: 0;
  padding: 0;
}
.workspace-navigation .nav-group+.nav-group {
  border: 0;
  border-top: 1px solid #d7dce2;
  margin-top: 12px;
  padding: 12px 0 0;
}
.workspace-navigation .eyebrow {
  display: block;
  padding: 8px 12px 6px;
  color: #5e6670;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
}
.workspace-navigation .nav-link {
  display: flex;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 6px;
  color: #414b57;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
}
.workspace-navigation .nav-link svg {
  display: block;
  width: 17px;
  height: 17px;
}
.workspace-navigation .nav-link:hover {
  background: #e3e9f0;
  color: #233141;
}
.workspace-navigation .nav-link[aria-current=page] {
  color: #243243;
  font-weight: 650;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.62) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(36, 51, 67, 0.1),
    0 6px 14px -8px rgba(36, 51, 67, 0.28);
}
.workspace-navigation :is(a,button):focus-visible {
  outline: 2px solid #5f7389;
  outline-offset: 2px;
}
.buyer-app.compact-workspace .workspace-layout {
  display: grid;
  grid-template-columns: 210px minmax(0,1fr);
  align-items: start;
  gap: 32px;
  max-width: 1440px;
  margin: 28px auto 0;
  padding: 0 36px;
}
.account-sidebar {
  position: sticky;
  top: calc(var(--workspace-header-height,82px) + 28px);
  width: 100%;
  height: auto;
  max-height: calc(100dvh - var(--workspace-header-height,82px) - 56px);
  margin: 0;
  padding: 14px 10px;
  overflow: auto;
  background: #fffdf6d9;
  border: 1px solid #ccd3dc;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px #303c4906;
  backdrop-filter: blur(16px);
}
.account-nav-title {
  padding: 7px 12px 13px;
  color: #293542;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.2px;
}
.account-sidebar .nav-group:first-child>.eyebrow {
  display: none;
}
.buyer-app.compact-workspace .workspace-context {
  padding: 2px 0 0;
}
.buyer-app.compact-workspace #main {
  max-width: none;
  padding: 22px 0 56px;
}
.compact-workspace .main-shell {
  min-width: 0;
}
.management-workspace .workspace-header {
  margin-left: 230px;
}
.management-workspace .workspace-topbar {
  max-width: none;
}
.management-workspace .workspace-header .workspace-brand {
  display: none;
}
.management-workspace .workspace-layout {
  margin-left: 230px;
}
.management-workspace .workspace-context {
  padding: 24px 36px 0;
}
.management-workspace .workspace-navigation.sidebar {
  position: fixed;
  display: block;
  inset: 0 auto 0 0;
  z-index: 60;
  width: 230px;
  height: 100dvh;
  max-height: none;
  max-width: none;
  margin: 0;
  padding: 0 12px 24px;
  overflow: auto;
  transform: none;
  border: 0;
  border-radius: 0;
  background: #1d272b;
  color: #eaedf0;
  box-shadow: none;
}
.management-workspace .sidebar .brand {
  margin: 0 -12px 18px;
  padding: 26px 20px;
}
.management-workspace .sidebar .brand-emblem {
  width: 40px;
  height: 40px;
}
.management-workspace .sidebar .brand-wordmark {
  font-size: 27px;
}
.management-workspace .sidebar .brand small {
  font-size: 7px;
}
.management-workspace .sidebar .nav-group+.nav-group {
  border-color: #ffffff16;
}
.management-workspace .sidebar .eyebrow {
  color: #a9b0b8;
}
.management-workspace .sidebar .nav-link {
  color: #d4d9de;
}
.management-workspace .sidebar .nav-link:hover {
  color: var(--color-white);
  background: #ffffff0d;
}
.management-workspace .sidebar .nav-link[aria-current=page] {
  color: var(--color-white);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 8px 18px -10px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
.navigation-backdrop {
  display: none;
}
@media(max-width:1100px) and (min-width:901px) {
  .buyer-app.compact-workspace .workspace-layout {
    grid-template-columns: 190px minmax(0,1fr);
    gap: 24px;
    padding: 0 24px;
  }
  .management-workspace .workspace-topbar {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media(max-width:900px) {
  .buyer-app.compact-workspace .workspace-layout {
    display: block;
    margin: 0;
    padding: 0 24px;
  }
  .buyer-app.compact-workspace .workspace-context {
    padding-top: 22px;
  }
  .buyer-app.compact-workspace #main {
    padding-top: 22px;
  }
  .management-workspace .workspace-header,
  .management-workspace .workspace-layout {
    margin-left: 0;
  }
  .management-workspace .workspace-header .workspace-brand {
    display: block;
  }
  .management-workspace .workspace-context {
    padding: 22px 24px 0;
  }
  .workspace-navigation .nav-group {
    display: block;
  }
  .workspace-navigation .nav-link {
    min-height: 44px;
  }
  .navigation-panel-head {
    margin-bottom: 12px;
    padding: 0 6px 8px;
  }
  .account-nav-title {
    display: none;
  }
  .account-sidebar {
    display: none;
    position: fixed;
    z-index: 60;
    left: 16px;
    top: calc(var(--workspace-header-height,76px) + 12px);
    width: min(260px,calc(100vw - 32px));
    max-height: calc(100dvh - var(--workspace-header-height,76px) - 28px);
    margin: 0;
    padding: 12px;
    background: #fffdf8;
    box-shadow: 0 12px 36px #24303e26;
  }
  .management-workspace .workspace-navigation.sidebar {
    display: none;
    width: min(280px,calc(100vw - 32px));
    padding: 0 12px 24px;
  }
  .nav-open .workspace-navigation {
    display: block;
  }
  .management-workspace.nav-open .workspace-navigation.sidebar {
    display: block;
  }
  .management-workspace .navigation-panel-head {
    color: #d8dee4;
    border-color: #ffffff20;
  }
  .management-workspace .navigation-panel-head .nav-close {
    color: #d8dee4;
  }
  .nav-open .navigation-backdrop {
    display: block;
    position: fixed;
    inset: var(--workspace-header-height,76px) 0 0;
    z-index: 50;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #232f3c3b;
    cursor: default;
  }
  .management-workspace.nav-open .navigation-backdrop {
    top: 0;
  }
  /* Scroll is locked on <html> (see html:has(body.nav-open)). Locking <body> too made
     it a scroll container, so the sticky header jumped off screen when the menu opened. */
}
@media(max-width:600px) {
  .buyer-app.compact-workspace .workspace-layout {
    padding: 0 18px;
  }
  .buyer-app.compact-workspace #main {
    padding: 20px 0 40px;
  }
  .management-workspace .workspace-context {
    padding: 20px 18px 0;
  }
}

/* Keep absolutely positioned table labels inside their scrolling region. */
.table-wrap {
  position: relative;
}
@media(min-width:901px) and (max-width:1200px) {
  .management-workspace .lifecycle-table :is(td,th) {
    padding-left: 9px;
    padding-right: 9px;
  }
  .management-workspace .orders-table .row-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
}

/* Customer sign-in stays in the shopping context; Management uses /admin. */
dialog.buyer-signin-dialog {
  width: min(440px,calc(100vw - 32px));
  border: 1px solid #c8cfd8;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px #142e3540;
}
.buyer-signin-dialog::backdrop {
  background: #172c3659;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.buyer-signin-dialog .dialog-head {
  padding: 26px 28px 0;
  border: 0;
  background: transparent;
  align-items: flex-start;
}
.buyer-signin-dialog .dialog-head .eyebrow {
  color: #56606c;
  font-size: 10px;
  letter-spacing: .09em;
  margin-bottom: 9px;
}
.buyer-signin-dialog .dialog-head h2 {
  color: #23303e;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.6px;
}
.buyer-signin-dialog .dialog-body {
  padding: 14px 28px 28px;
}
.buyer-signin-dialog label {
  color: #333f4c;
  font-size: 13px;
}
.buyer-signin-dialog input {
  min-height: 46px;
  border-color: #c6cdd5;
  border-radius: 7px;
  background: var(--color-white);
  font-size: 16px;
}
.buyer-signin-dialog #loginForm>button[type=submit] {
  width: 100%;
  min-height: 46px;
  background: #2d4055;
  color: var(--color-white);
  border: 0;
  border-radius: 7px;
  font-size: 14px;
  justify-content: space-between;
  padding: 12px 16px;
}
.buyer-signin-dialog .auth-register {
  font-size: 13px;
  line-height: 1.6;
  color: #4f5a67;
  margin: 20px 0 0;
}
@media(max-width:600px) {
  dialog.buyer-signin-dialog {
    max-height: calc(100dvh - 32px);
  }
  .buyer-signin-dialog .dialog-head {
    padding: 22px 22px 0;
  }
  .buyer-signin-dialog .dialog-body {
    padding: 14px 22px 24px;
  }
}

/* OSKEC blue: calm controls and stable geometry across page states. */
:root,
body,
body.buyer-app {
  --primary: #285b98;
  --primary-hover: #204b80;
  --link: #285b98;
  --forest: #285b98;
  --green: #285b98;
  --soft: #eaf1f8;
  --ink: #24374b;
  --muted: #596c7c;
  --line: #d7e0e8;
}
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
html:has(dialog[open]),
html:has(body.nav-open) {
  overflow-y: hidden;
}
#main {
  min-height: calc(100dvh - 160px);
}
#main>.loading {
  min-height: 360px;
}
button,
input,
select,
a {
  transition-property: background-color,border-color,color,box-shadow;
}
input[type=checkbox],
input[type=radio] {
  accent-color: var(--primary);
}
.workspace-tools button.account-id {
  min-height: 52px;
  padding: 5px 10px 5px 5px;
  gap: 10px;
  border: 1px solid #d4dfea;
  border-radius: 30px;
  background: #ffffffaa;
}
.workspace-tools button.account-id:hover,
.workspace-tools button.account-id[aria-expanded=true] {
  border-color: #9ab4d1;
  background: #edf3f9;
  color: #23446a;
}
.workspace-tools .avatar {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px #c7d5e4;
  background: #e6eef8;
  color: #285b98;
  overflow: hidden;
}
.workspace-tools .avatar img,
.account-menu-heading .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.workspace-tools .account-name strong {
  max-width: 150px;
  font-size: 13px;
  line-height: 1.35;
  color: #253f5a;
}
.workspace-tools .account-name small {
  color: #5a7084;
  font-size: 11px;
  line-height: 1.3;
  margin-top: 3px;
}
.workspace-tools .account-id>svg {
  color: #547393;
  width: 14px;
  height: 14px;
  margin-left: 8px;
}
.compact-workspace .account-popover {
  padding: 8px;
  background: #fffefa;
  border: 1px solid #ccd9e6;
  border-radius: 13px;
  box-shadow: 0 12px 38px #19314d26;
  max-height: calc(100dvh - 24px);
  overflow: auto;
}
.account-menu-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 10px 18px;
  margin-bottom: 7px;
  border-bottom: 1px solid #dde5ed;
}
.account-menu-heading>div {
  min-width: 0;
}
.account-menu-heading strong {
  display: block;
  color: #253f5a;
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.account-menu-heading>div>span {
  display: block;
  color: #617489;
  font-size: 12px;
  margin-top: 5px;
}
.account-menu-heading .avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: #e8eff7;
  color: #285b98;
  font-weight: 650;
}
.compact-workspace .account-popover a,
.compact-workspace .account-popover #signout {
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 550;
  color: #344e68;
}
.compact-workspace .account-popover a {
  display: flex;
  gap: 12px;
  align-items: center;
}
.compact-workspace .account-popover #signout {
  margin: 3px 0 0;
  justify-content: space-between;
}
.compact-workspace .account-popover a:hover,
.compact-workspace .account-popover #signout:hover {
  background: #edf3f9 !important;
  color: #234f83;
}
.workspace-switch a:focus-visible,
.account-popover :is(a,button):focus-visible {
  outline: 2px solid #3c71ad;
  outline-offset: 2px;
}
button.sort-heading:hover:not(:disabled),
button.sort-heading:focus-visible {
  background: #eaf1f8;
  border-color: transparent;
  color: #244f82;
  box-shadow: none;
}
button.sort-heading {
  border-radius: 4px;
}
.buyer-app .wallet-card-balance {
  background: linear-gradient(115deg,#193d6a,#326496);
}
.buyer-app .wallet-card-balance>span,
.buyer-app .wallet-card-balance>small {
  color: #e0ebf7;
}
.buyer-app .wallet-card-actions button {
  background: #eaf0f7 !important;
  color: #315a89;
}
.buyer-app .wallet-card-actions button:hover {
  background: #dce7f3 !important;
}

/* Add funds, Statement and Withdraw share one row; labels tighten on narrow phones. */
.buyer-app .wallet-card-actions button {
  min-width: 0;
  padding-inline: 8px;
  white-space: nowrap;
}
@media(max-width:420px) {
  .buyer-app .wallet-card-actions button {
    gap: 6px;
    font-size: 12px;
    padding-inline: 4px;
  }
  .wallet-card-actions svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }
}

/* Each wallet action reads differently: Add funds keeps the light blue, Statement is neutral, Withdraw is money going out. */
.buyer-app .wallet-card-actions #addFunds {
  background: #eaf0f7 !important;
  color: #315a89;
}
.buyer-app .wallet-card-actions #addFunds:hover {
  background: #dce7f3 !important;
}
.buyer-app .wallet-card-actions #viewStatement {
  background: #f4f6f9 !important;
  color: #3d4d5f;
}
.buyer-app .wallet-card-actions #viewStatement:hover {
  background: #e8edf2 !important;
}
.buyer-app .wallet-card-actions #withdrawFunds {
  background: #e6f4ec !important;
  color: #1d6a45;
}
.buyer-app .wallet-card-actions #withdrawFunds:hover {
  background: #d4ecdf !important;
}
.buyer-app .wallet-card-actions button:focus-visible {
  outline: 2px solid #2f6299;
  outline-offset: -4px;
}
.quantity #qtyValue {
  min-width: 34px;
  font-variant-numeric: tabular-nums;
}
.variation-option {
  border-bottom: 1px solid #dce4ed;
  padding: 8px 0 14px;
}
.variation-option:last-child {
  border-bottom: 0;
}
.variation-photo {
  position: relative;
  width: 40px;
  height: 40px;
}
.variation-photo-label {
  position: relative;
  margin: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px dashed #b9c9da;
  border-radius: 6px;
  background: #f5f8fb;
  color: #285b98;
  cursor: pointer;
  overflow: hidden;
}
.variation-photo-label:hover {
  background: #eaf1f8;
  border-color: #7f9fc2;
}
.variation-photo-label:focus-within {
  outline: 2px solid #3c71ad;
  outline-offset: 2px;
}
.variation-photo-label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.variation-photo-label:has(img) {
  border-style: solid;
  border-color: #d5e0ec;
}
.variation-photo-label svg {
  width: 16px;
  height: 16px;
}
.remove-variation-photo {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #c9d4df;
  border-radius: 50%;
  background: var(--color-white);
  color: #7a2430;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.remove-variation-photo svg {
  width: 10px;
  height: 10px;
}
.remove-variation-photo:hover {
  background: #fce4e7;
}
.wallet-activity {
  margin-bottom: 24px;
}
.wallet-history-page {
  min-height: 450px;
}
.wallet-history-page .empty {
  min-height: 260px;
}
.wallet-funding .wallet-history-page {
  min-height: 390px;
}
.wallet-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #dce5ee;
  padding: 14px 20px;
  font-size: 12px;
  color: #576e83;
}
.wallet-pagination nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wallet-pagination button {
  min-width: 36px;
  min-height: 36px;
  padding: 7px;
  border-color: #cfdae6;
  color: #315e91;
  background: #f7f9fc;
  border-radius: 6px;
}
.wallet-pagination .history-prev svg {
  transform: rotate(180deg);
}
.wallet-pagination span {
  font-variant-numeric: tabular-nums;
}
.wallet-funding td {
  overflow-wrap: anywhere;
}
.funding-reference {
  display: block;
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.authenticator-qr {
  display: grid;
  place-items: center;
  width: 224px;
  height: 224px;
  margin: 20px auto;
  border: 1px solid #d9e1eb;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: white;
}
.authenticator-qr img {
  width: 224px;
  height: 224px;
}
.authenticator-dialog .authenticator-key {
  padding: 12px;
}
.authenticator-dialog .authenticator-key code {
  overflow-wrap: anywhere;
}
@media(max-width:600px) {
  .workspace-tools button.account-id {
    min-height: 44px;
    padding: 4px;
    border-radius: 50%;
  }
  .workspace-tools .avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .wallet-pagination {
    padding: 14px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .wallet-pagination nav {
    gap: 7px;
  }
  .wallet-history-page {
    min-height: 630px;
  }
  .wallet-funding .wallet-history-page {
    min-height: 640px;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto !important;
  }
}

/* Every transaction page reserves the same six-row footprint. */
#walletTransactionsBody .wallet-history-page {
  min-height: 576px;
}
#walletTransactionsBody .wallet-transaction-list>li {
  height: 96px;
  min-height: 96px;
}
#walletTransactionsBody .wallet-entry-copy p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media(max-width:900px) {
  #walletTransactionsBody .wallet-history-page {
    min-height: 672px;
  }
  #walletTransactionsBody .wallet-transaction-list>li {
    height: 112px;
    min-height: 112px;
  }
}

/* Product gallery: a framed image and a quiet, bounded contact sheet. */
.gallery-nav {
  background: #ffffffec;
  color: #223d5c;
  box-shadow: 0 2px 12px #172a4220;
  border: 1px solid #ffffffc9;
}
.gallery-counter {
  background: #152b47d9;
  color: var(--color-white);
  border-radius: 20px;
  padding: 5px 10px;
  font-variant-numeric: tabular-nums;
}
.guest-receipt {
  max-width: 800px;
  margin: 0 auto;
}
.receipt-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}
.receipt-heading h2 {
  margin: 4px 0;
  overflow-wrap: anywhere;
}
.receipt-items {
  border-block: 1px solid var(--border);
  padding: 16px 0;
  margin: 16px 0;
}
.receipt-items>div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
}
.receipt-items strong {
  white-space: nowrap;
}
.sidebar-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 24px;
  padding: 12px;
  background: #ffffff0a;
  border: 1px solid #ffffff1c;
  color: #d4d9de;
  font-size: 12px;
}
.sidebar-collapse:hover {
  background: #ffffff16;
  color: var(--color-white);
}
.sidebar-collapse svg {
  transform: rotate(180deg);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
@media(min-width:901px) {
  .management-workspace.sidebar-collapsed .workspace-navigation.sidebar {
    width: 76px;
    padding-inline: 10px;
  }
  .management-workspace.sidebar-collapsed .workspace-header,
  .management-workspace.sidebar-collapsed .workspace-layout {
    margin-left: 76px;
  }
  .management-workspace.sidebar-collapsed .sidebar .brand {
    margin: 0 -10px 18px;
    padding: 26px 18px;
  }
  .management-workspace.sidebar-collapsed .sidebar :is(.brand-wordmark,.brand small,.eyebrow,.nav-link span,.sidebar-collapse span) {
    display: none;
  }
  .management-workspace.sidebar-collapsed .sidebar .nav-link {
    justify-content: center;
    min-height: 44px;
    padding: 12px;
  }
  .management-workspace.sidebar-collapsed .sidebar-collapse {
    justify-content: center;
  }
  .management-workspace.sidebar-collapsed .sidebar-collapse svg {
    transform: none;
  }
}
@media(max-width:900px) {
  .sidebar-collapse {
    display: none;
  }
}
@media(max-width:600px) {
  .guest-receipt .actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .receipt-heading {
    gap: 10px;
  }
  .receipt-heading h2 {
    font-size: 19px;
  }
}
.product-media .gallery-nav,
.product-media .gallery-nav:hover {
  background: #ffffffec;
  color: #223d5c;
  opacity: 1;
}

/* Contextual order actions and dependent product filters. */
.orders-table .row-actions .delete-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 8px;
  color: #b42332;
  background: #fff5f5;
  border: 1px solid #eabcc2;
  border-radius: 6px;
}
.orders-table .row-actions .delete-order:hover {
  color: #8f1725;
  background: #fce4e7;
  border-color: #d9919c;
}
.orders-table .row-actions .delete-order:focus-visible {
  outline: 2px solid #b42332;
  outline-offset: 3px;
}
.orders-toolbar .order-filters {
  flex-wrap: wrap;
  min-width: 0;
}
#productFilterWrap,
#variationFilterWrap {
  min-width: 0;
  max-width: 240px;
}
#orderProduct,
#orderVariation {
  width: 100%;
  max-width: 240px;
  text-overflow: ellipsis;
}
@media(max-width:600px) {
  #productFilterWrap,
  #variationFilterWrap {
    flex: 1 1 140px;
    max-width: none;
  }
  #orderProduct,
  #orderVariation {
    max-width: none;
  }
}

/* Quiet order register: selection is isolated from row editing, and view is an icon-only action. */
.management-workspace .orders-table .check-cell {
  width: 38px;
  padding-right: 0;
}
.management-workspace .orders-table .selection-gap {
  padding: 0;
  user-select: none;
}
.management-workspace .orders-table .view-cell {
  width: 48px;
  padding-inline: 6px;
  white-space: nowrap;
}
.management-workspace .orders-table .view-cell .icon-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 7px;
  border: 0;
  background: transparent;
  color: #315d8f;
}
.management-workspace .orders-table .view-cell .icon-button:hover {
  background: #edf3f9;
  color: #214f84;
}
.management-workspace .orders-table .view-cell .delete-order {
  color: #b42332;
}
.management-workspace .orders-table .view-cell .delete-order:hover {
  background: #fce4e7;
  color: #8f1725;
}
.management-workspace .orders-table .order-row {
  cursor: pointer;
}
.management-workspace .orders-table .order-row .check-cell,
.management-workspace .orders-table .order-row .selection-gap,
.management-workspace .orders-table .order-row .view-cell {
  cursor: default;
}
.management-workspace .orders-table .order-cell small,
.management-workspace .orders-table .amount-cell small {
  display: none;
}
.management-workspace button.sort-heading,
.management-workspace button.sort-heading:hover:not(:disabled),
.management-workspace button.sort-heading:focus-visible {
  min-height: 0;
  line-height: 1.3;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.management-workspace button.sort-heading:focus-visible {
  outline: 2px solid #4b78a8;
  outline-offset: 4px;
}
.security-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
}
dialog.affiliate-order-dialog {
  width: min(560px,calc(100vw - 28px));
}
.affiliate-order-dialog .dialog-body {
  padding-top: 18px;
}
.affiliate-order-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding-bottom: 18px;
}
.affiliate-order-summary strong,
.affiliate-order-summary small {
  display: block;
  margin-top: 5px;
}
.compact-order-items {
  border-block: 1px solid var(--line);
  padding: 10px 0;
}
.compact-order-items>div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 0;
}
.compact-order-items strong {
  white-space: nowrap;
}
.compact-order-facts {
  margin-top: 12px;
}
@media(max-width:700px) {
  .management-workspace .orders-table tbody {
    display: grid;
  }
  .management-workspace .orders-table tr.order-row {
    display: grid;
    align-items: center;
    border: 1px solid #d7e0e8;
    background: var(--color-white);
  }
  .management-workspace .orders-table tr.order-row td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .management-workspace .orders-table tr.order-row td:before {
    content: none;
  }
  .management-workspace .orders-table .check-cell {
    grid-column: 1;
    grid-row: 1;
  }
  .management-workspace .orders-table .selection-gap {
    grid-column: 2;
    grid-row: 1;
  }
  .management-workspace .orders-table .order-cell {
    grid-column: 3;
    grid-row: 1;
  }
  .management-workspace .orders-table .view-cell {
    grid-column: 4;
    grid-row: 1;
    display: flex;
  }
  .management-workspace .orders-table .customer-cell-wrap {
    grid-column: 3;
    grid-row: 2;
    color: #53677a;
    font-size: 12px;
  }
  .management-workspace .orders-table .amount-cell {
    grid-column: 4;
    grid-row: 2;
    text-align: right;
    font-size: 13px;
  }
  .management-workspace .orders-table .status-cell {
    grid-column: 3;
    grid-row: 3;
  }
  .management-workspace .orders-table .date-cell {
    grid-column: 4;
    grid-row: 3;
    text-align: right;
    color: #65778a;
    font-size: 11px;
  }
  .affiliate-order-summary {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Orders keep selection controls available at both ends without crowding phone layouts. */
.management-workspace .orders-table .selection-gap {
  width: 23px;
  min-width: 23px;
}
.management-workspace .orders-table .order-ref {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}
.management-workspace .orders-table .order-number {
  flex: 0 0 auto;
}
.management-workspace .orders-table .order-buyer-name {
  min-width: 0;
  overflow: hidden;
  color: #596c7c;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
}
.management-workspace .orders-table .date-compact {
  display: none;
}
.management-workspace #orderResults .table-footer {
  display: grid;
  grid-template-columns: auto minmax(150px,1fr) auto;
  gap: 14px;
}
.management-workspace #orderResults .table-footer .bulk-controls-bottom {
  justify-self: start;
}
.management-workspace #orderResults .table-footer .pager {
  justify-self: end;
}
.management-workspace .orders-table tfoot th {
  border-bottom: 0;
  border-top: 1px solid var(--line);
}
@media(max-width:700px) {
  .management-workspace .orders-toolbar .order-search-group {
    order: 1;
  }
  .management-workspace .orders-toolbar .bulk-controls-top {
    display: flex;
    order: 2;
  }
  .management-workspace .orders-toolbar .order-filters {
    order: 3;
  }
  .management-workspace .orders-table thead,
  .management-workspace .orders-table tfoot {
    display: block;
    border-bottom: 1px solid #d7e0e8;
    background: #f7f9fb;
  }
  .management-workspace .orders-table tfoot {
    border-bottom: 0;
    border-top: 1px solid #d7e0e8;
  }
  .management-workspace .orders-table thead tr,
  .management-workspace .orders-table tfoot tr {
    display: grid;
    grid-template-columns: 26px 17px minmax(72px,1fr) auto auto auto;
    gap: 0 4px;
    align-items: center;
    padding: 8px 16px;
  }
  .management-workspace .orders-table thead th,
  .management-workspace .orders-table tfoot th {
    display: none;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .management-workspace .orders-table thead th.check-cell,
  .management-workspace .orders-table tfoot th.check-cell {
    display: flex;
    grid-column: 1;
    width: 26px;
  }
  .management-workspace .orders-table thead th.order-heading,
  .management-workspace .orders-table tfoot th.order-heading {
    display: block;
    grid-column: 3;
  }
  .management-workspace .orders-table thead th.order-heading .sort-heading,
  .management-workspace .orders-table tfoot th.order-heading .sort-heading {
    font-size: 11px;
    font-weight: 650;
  }
  .management-workspace .orders-table tbody {
    gap: 6px;
    padding: 8px;
  }
  .management-workspace .orders-table tr.order-row {
    grid-template-columns: 26px 17px minmax(72px,1fr) auto auto auto;
    gap: 0 4px;
    min-height: 48px;
    border-radius: 6px;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.check-cell {
    grid-column: 1;
    grid-row: 1;
    width: 26px;
    padding: 0;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.selection-gap {
    grid-column: 2;
    grid-row: 1;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.order-cell {
    grid-column: 3;
    grid-row: 1;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.date-cell {
    display: block;
    grid-column: 4;
    grid-row: 1;
    color: #65778a;
    text-align: right;
    white-space: nowrap;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.status-cell {
    display: block;
    grid-column: 5;
    grid-row: 1;
    white-space: nowrap;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.view-cell {
    grid-column: 6;
    grid-row: 1;
    display: flex;
    width: auto;
    padding: 0;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.amount-cell,
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.customer-cell-wrap {
    display: none;
  }
  .management-workspace .orders-table .order-ref {
    min-height: 0;
  }
  .management-workspace .orders-table .date-wide {
    display: none;
  }
  .management-workspace .orders-table .date-compact {
    display: inline;
  }
  .management-workspace .orders-table .order-status {
    line-height: 1.1;
  }
  .management-workspace .orders-table .view-cell .icon-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 6px;
  }
  .management-workspace #orderResults .table-footer {
    display: grid;
    gap: 10px;
    padding: 14px 16px; /* the toolbar's padding, so both bulk bars line up */
  }
  .management-workspace #orderResults .table-footer .table-count {
    align-self: center;
    font-size: 10px;
  }
  .management-workspace #orderResults .table-footer .pager {
    justify-self: end;
    gap: 4px;
  }
  .management-workspace #orderResults .table-footer .pager button {
    min-width: 32px;
    min-height: 32px;
    padding: 5px 7px;
    font-size: 10px;
  }
  /* The footer's bulk actions match the toolbar's: full width, same select and button. */
  .management-workspace #orderResults .table-footer .bulk-controls-bottom {
    justify-self: stretch;
  }
}

/* Product operations: compact bulk tools and explicit inventory states. */
.product-admin-toolbar {
  align-items: center;
}
.product-admin-toolbar .actions {
  display: flex;
  gap: 8px;
}
#productCategoryFilter {
  max-width: 220px;
  text-overflow: ellipsis;
}
.product-bulk-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.product-bulk-controls select {
  width: auto;
  max-width: 210px;
}
.product-bulk-controls button {
  padding-inline: 13px;
}
.stock-state,
.stock-tag {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
}
.stock-state.in,
.stock-tag.in {
  background: #e8f0fa;
  color: #245d9b;
}
.stock-state.quantity,
.stock-tag.quantity {
  background: #edf2f8;
  color: #315f8f;
}
.stock-state.out,
.stock-tag.out {
  background: #f6e5e6;
  color: #9a2836;
}
#productStockQuantityField small {
  display: block;
  margin-top: 6px;
}
#productResults th:first-child,
#productResults td:first-child {
  width: 40px;
  padding-right: 0;
}

/* Buyer gallery: small square thumbnails float at the image's upper left. */
@media(max-width:700px) {
  .product-admin-toolbar {
    align-items: stretch;
  }
  .product-bulk-controls {
    width: 100%;
    flex-wrap: nowrap;
  }
  .product-bulk-controls select {
    min-width: 0;
    flex: 1;
    font-size: 12px;
  }
  .product-admin-toolbar .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .product-admin-toolbar .actions select,
  #productCategoryFilter {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
}

/* iOS Safari zooms the page when a focused field's text is under 16px.
   Scoped to iOS (-webkit-touch-callout is Apple-only) so desktop/Android keep
   the compact sizes above; !important beats the many component-level rules. */
@supports (-webkit-touch-callout: none) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea {
    font-size: 16px !important;
  }
  .wallet-amount-input input {
    font-size: 24px !important;
  }
}

/* Branded fallback for invalid public URLs and routes. */
.not-found-page {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  gap: 28px;
  padding: 32px;
  background: radial-gradient(circle at 18% 10%,#e6eef8 0,transparent 34%),#f7f5ef;
  color: #253548;
}
.not-found-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  color: #203b5c;
  text-decoration: none;
}
.not-found-brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.not-found-brand span {
  display: grid;
}
.not-found-brand strong {
  font-size: 22px;
  letter-spacing: .08em;
}
.not-found-brand small {
  font-size: 8px;
  letter-spacing: .18em;
  color: #586879;
}
.not-found-card {
  width: min(620px,calc(100vw - 40px));
  padding: clamp(28px,6vw,58px);
  border: 1px solid #ccd6e1;
  border-radius: 18px;
  background: #fffdf8e8;
  box-shadow: 0 24px 70px #22364b18;
  backdrop-filter: blur(14px);
}
.not-found-card h1 {
  margin: 10px 0 12px;
  font-size: clamp(34px,6vw,58px);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #1f3146;
}
.not-found-card p {
  max-width: 480px;
  margin: 0 0 28px;
  color: #536274;
  font-size: 15px;
  line-height: 1.7;
}
@media(max-width:540px) {
  .not-found-page {
    place-content: start center;
    padding: 28px 20px;
  }
  .not-found-card {
    padding: 32px 24px;
  }
  .not-found-card .actions {
    display: grid;
  }
  .not-found-card .button {
    width: 100%;
  }
}
.reset-code-entry {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.reset-code-entry>button {
  display: block;
  margin: auto;
}
.reset-request-list {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.reset-request-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.reset-request-list li:first-child {
  border-top: 0;
}
.reset-request-list strong,
.reset-request-list small {
  display: block;
}
.reset-request-list small {
  margin-top: 3px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Orders badge stays visible on the collapsed management rail, pinned to the icon. */
.management-workspace .sidebar .nav-link[data-page="orders"] {
  position: relative;
}
.management-workspace.sidebar-collapsed .sidebar .nav-link .nav-count:not([hidden]) {
  display: inline-grid;
  position: absolute;
  top: 4px;
  right: 4px;
  margin: 0;
}

/* Phone order rows, arranged like WooCommerce's list: checkbox, "#number Buyer" as
   one wrapping link, the relative date, the status, and a toggle stacked over View.
   The toggle shows the total and recipient beneath the row. Rows are flat, divided
   by hairlines; the header and footer rows hold the select-all box and Order sort. */
.orders-table .row-toggle {
  display: none;
}
@media(max-width:700px) {
  .management-workspace .orders-table thead tr,
  .management-workspace .orders-table tfoot tr,
  .management-workspace .orders-table tr.order-row {
    grid-template-columns: 26px minmax(0,1fr) 64px auto 28px;
    column-gap: 8px;
  }
  .management-workspace .orders-table thead,
  .management-workspace .orders-table tfoot {
    background: var(--color-surface);
    border-color: var(--line);
  }
  .management-workspace .orders-table thead tr,
  .management-workspace .orders-table tfoot tr {
    padding: 14px 12px;
  }
  .management-workspace .orders-table :is(thead, tfoot) th {
    grid-row: 1;
    background: none;
  }
  .management-workspace .orders-table :is(thead, tfoot) th.view-cell {
    display: none;
  }
  .management-workspace .orders-table thead th.order-heading,
  .management-workspace .orders-table tfoot th.order-heading {
    grid-column: 2/-1;
  }
  .management-workspace .orders-table thead th.order-heading .sort-heading,
  .management-workspace .orders-table tfoot th.order-heading .sort-heading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0;
    background: none;
    color: var(--color-slate);
    font-size: 15px;
    font-weight: 400;
  }
  .management-workspace .orders-table tbody {
    display: block;
    gap: 0;
    padding: 0;
  }
  .management-workspace .orders-table tr.order-row {
    align-items: center;
    row-gap: 10px;
    min-height: 0;
    margin: 0;
    padding: 16px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--color-surface);
    box-shadow: none;
  }
  .management-workspace .orders-table tr.order-row:last-child {
    border-bottom: 0;
  }
  .management-workspace .orders-table tr.order-row:hover,
  .management-workspace .orders-table tr.order-row.is-expanded {
    background: var(--color-cream);
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.check-cell {
    grid-area: 1/1/2/2;
    align-self: center;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.selection-gap {
    display: none;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.order-cell {
    grid-area: 1/2/2/3;
    overflow: visible;
    text-align: left;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.date-cell {
    display: block;
    grid-area: 1/3/2/4;
    justify-self: start;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
  }
  .management-workspace .orders-table .date-wide {
    display: inline;
  }
  .management-workspace .orders-table .date-compact {
    display: none;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.status-cell {
    grid-area: 1/4/2/5;
    justify-self: end;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td.view-cell {
    grid-area: 1/5/2/6;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0;
  }
  .management-workspace .orders-table .view-cell .row-toggle {
    display: grid;
    place-items: center;
  }
  .management-workspace .orders-table .view-cell .icon-button {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 4px;
  }
  .management-workspace .orders-table .row-toggle svg {
    transition: transform 0.2s ease;
  }
  .management-workspace .orders-table tr.is-expanded .row-toggle svg {
    transform: rotate(180deg);
  }
  .management-workspace .orders-table .order-ref {
    display: block;
    color: var(--color-slate);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;
  }
  .management-workspace .orders-table .order-number {
    margin-right: 4px;
  }
  .management-workspace .orders-table .order-buyer-name {
    display: inline;
    overflow: visible;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    overflow-wrap: break-word;
  }
  .management-workspace .orders-table .order-status {
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.2;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row td {
    background: transparent;
  }
  /* Expanded: total and recipient on their own lines under the order. */
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row.is-expanded :is(td.amount-cell, td.customer-cell-wrap) {
    display: flex;
    grid-column: 2/-1;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    font-size: 13.5px;
    text-align: right;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row.is-expanded td.amount-cell {
    grid-row: 2;
  }
  .management-workspace .orders-table.lifecycle-table.has-selection tr.order-row.is-expanded td.customer-cell-wrap {
    grid-row: 3;
  }
  .management-workspace .orders-table tr.order-row.is-expanded td.amount-cell::before {
    content: 'Total';
    color: var(--muted);
  }
  .management-workspace .orders-table tr.order-row.is-expanded td.customer-cell-wrap::before {
    content: 'Recipient';
    color: var(--muted);
  }
  /* Footer: bulk actions first, then the count and pager beneath. */
  .management-workspace #orderResults .table-footer {
    grid-template-columns: minmax(0,1fr) auto;
    row-gap: 12px;
  }
  .management-workspace #orderResults .table-footer .bulk-controls-bottom {
    grid-column: 1/-1;
    grid-row: 1;
  }
  .management-workspace #orderResults .table-footer .table-count {
    grid-column: 1;
    grid-row: 2;
  }
  .management-workspace #orderResults .table-footer .pager {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Phone management lists: checkbox, primary name and row menu share the top line;
   labelled details sit beneath in an even two-column grid. */
@media(max-width:700px) {
  .management-workspace .entity-list tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 16px;
    padding: 14px 16px;
  }
  .management-workspace .entity-list tbody td {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    background: transparent;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
  }
  .management-workspace .entity-list tbody td:before {
    margin-bottom: 3px;
    font-size: 11px;
  }
  .management-workspace .entity-list tbody td:has(> input[type=checkbox]:only-child) {
    order: -3;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding-top: 2px;
  }
  .management-workspace .entity-list tbody td:has(> input[type=checkbox]:only-child):before {
    content: none;
  }
  .management-workspace .entity-list tbody td:first-child:not(:has(> input[type=checkbox]:only-child)),
  .management-workspace .entity-list tbody td:has(> input[type=checkbox]:only-child) + td {
    order: -2;
    flex: 1 1 calc(100% - 140px);
    font-size: 14px;
  }
  .management-workspace .entity-list tbody td:first-child:not(:has(> input[type=checkbox]:only-child)):before,
  .management-workspace .entity-list tbody td:has(> input[type=checkbox]:only-child) + td:before {
    content: none;
  }
  .management-workspace .entity-list tbody td:last-child:has(> .icon-button:only-child) {
    order: -1;
    flex: 0 0 auto;
    margin: -6px -6px 0 auto;
  }
  .management-workspace .entity-list tbody td:last-child:has(> .icon-button:only-child):before {
    content: none;
  }
}

/* Sign-in cards: title, two fields, one button. */
.auth-card h2 {
  margin-bottom: 22px;
}
.buyer-signin-dialog .dialog-head .eyebrow:empty {
  display: none;
}
.buyer-signin-dialog #loginForm {
  margin-top: 10px;
}

/* Phone dialogs: full sheets span the screen; later per-dialog widths
   (product, affiliate order) must not leave them offset to the left. */
@media(max-width:700px) {
  dialog:not(.compact) {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
  }
}

/* Gallery dots are the phone's position indicator; desktop keeps the counter. */
.gallery-dots {
  display: none;
}

/* Phone product page: compact photo with swipe, price + quantity on one line,
   and an action bar that stays in reach so no scrolling is needed to buy. */

/* Phone catalogue: two-column cards — image, category, name, price. */
@media(max-width:700px) {
  #productCatalog {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
  }
  #productCatalog .product-link {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border-color: #e1e6ea;
  }
  #productCatalog .product-image {
    aspect-ratio: 1/1;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: 0;
    border-right: 0;
    border-bottom: 1px solid #eef1f3;
    background: #f3f5f7;
  }
  #productCatalog .product-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
  #productCatalog .product-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
  }
  #productCatalog .product-mark svg {
    width: 22px;
    height: 22px;
  }
  #productCatalog :is(.product-placeholder-label, .photo-count, .catalog-card-description, .verify-tag, .catalog-card-action, .stock-tag.in, .stock-tag.quantity, .product-buy small) {
    display: none;
  }
  #productCatalog .stock-tag.out {
    position: absolute;
    top: 8px;
    left: 8px;
    margin: 0;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    border: 1px solid #f0c9c5;
    color: #a5362c;
    font-size: 10px;
    font-weight: 600;
  }
  #productCatalog .catalog-card-content {
    gap: 4px;
    padding: 10px 12px 12px;
  }
  #productCatalog .eyebrow {
    overflow: hidden;
    color: #6a7782;
    font-size: 10px;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #productCatalog .catalog-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
  }
  #productCatalog .product-price {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.1px;
  }
}

/* Slide-in cart drawer shown after Add to cart */
dialog.cart-drawer {
  position: fixed;
  margin: 0;
  max-width: 100vw;
  padding: 0;
  border-left: 1px solid var(--line);
  color: var(--ink);
}
dialog.cart-drawer::backdrop {
  animation: cart-backdrop-in .28s ease;
}
dialog.cart-drawer.closing::backdrop {
  animation: cart-backdrop-in .22s ease reverse forwards;
}
@keyframes cart-drawer-in { from { transform:translateX(100%); } to { transform:none; }
}
@keyframes cart-drawer-out { from { transform:none; } to { transform:translateX(100%); }
}
@keyframes cart-backdrop-in { from { opacity:0; } to { opacity:1; }
}
.cart-drawer-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cart-drawer-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--line);
}
.cart-drawer-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.2px;
}
.cart-drawer-head p {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.cart-drawer-status {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e3f1e7;
  color: #1f6b3a;
}
.cart-drawer-status.exists {
  background: #e6edf5;
  color: #244366;
}
.cart-drawer-status.removed {
  background: #f4ecea;
  color: #8a3b2e;
}
.cart-drawer-status svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  display: grid;
  align-content: start;
  gap: 22px;
}
.cart-drawer-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbfbfa;
}
.cart-drawer-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f1f2ef;
}
.cart-drawer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-drawer-item-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.cart-drawer-item-info strong {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.cart-drawer-item-info small {
  color: var(--muted);
  font-size: 12px;
}
.cart-drawer-item-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.cart-drawer-item-controls .quantity button {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
}
.cart-drawer-item-controls button.text {
  font-size: 13px;
  color: var(--muted);
}
.cart-drawer-item > .money {
  font-size: 14px;
  white-space: nowrap;
}
.cart-drawer-undo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.cart-drawer-others h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.cart-drawer-others ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-drawer-others li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft,#edeff1);
  font-size: 13px;
}
.cart-drawer-others small {
  color: var(--muted);
}
.cart-drawer-empty {
  color: var(--muted);
  text-align: center;
  margin: 40px 0;
}
.cart-drawer-foot {
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  background: var(--color-white);
}
.cart-drawer-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}
.cart-drawer-total strong {
  font-size: 17px;
  color: var(--ink);
}
.cart-drawer-foot .drawer-checkout {
  width: 100%;
  min-height: 46px;
  justify-content: space-between;
  background: #2d4055;
  color: var(--color-white);
  border-radius: 7px;
}
.cart-drawer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cart-drawer-links > * {
  width: 100%;
  justify-content: center;
}
.product-actions #addToCart.in-cart {
  border-color: #1f6b3a;
  color: #1f6b3a;
}
@media (prefers-reduced-motion: reduce) {
  dialog.cart-drawer,
  dialog.cart-drawer::backdrop {
    animation: none;
  }
}
@media (max-width:480px) {
  dialog.cart-drawer {
    border-left: 0;
  }
  .cart-drawer-links {
    grid-template-columns: 1fr;
  }
}

/* Forgot password sits beside the Password label as a quiet link */
.label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.label-row button.forgot-password {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--link,#2271b1);
  font-size: 12.5px;
  font-weight: 500;
}
.label-row button.forgot-password:hover {
  background: none;
  text-decoration: underline;
}
.stock-state.private {
  background: #eef0f7;
  color: #3d4a7a;
  margin-left: 6px;
}
.cart-drawer-thumb .product-mark {
  padding: 14px;
  border-radius: var(--radius-sm);
}

/* Order email preferences and public tracking share the workspace form layout. */
.email-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  margin: 16px 0;
}
.tracking-form {
  max-width: 640px;
  margin-bottom: 24px;
}
.detail-identity p,
.key-values dd {
  overflow-wrap: anywhere;
}
.cart-drawer-others li > span:first-child {
  flex: 1;
  min-width: 0;
}
.cart-drawer-others .drawer-remove {
  flex-shrink: 0;
}

/* ==========================================================================
   Public store & landing page — quiet editorial layout on warm cream.
   Brand: clay #8a4a2d (actions, accents) and slate #3e4d68 (structure, text).
   Glass is reserved for the header, product cards and the Support panel.
   Scoped to body.public-store so the signed-in workspaces are untouched.
   ========================================================================== */
body.public-store {
  --lp-clay: var(--color-clay);
  --lp-clay-deep: var(--color-clay-deep);
  --lp-clay-soft: var(--color-clay-soft);
  --lp-slate: var(--color-slate);
  --lp-slate-deep: var(--color-slate-deep);
  --lp-cream: var(--color-cream);
  --lp-cream-2: var(--color-cream-2);
  --lp-ink: var(--color-ink);
  --lp-muted: var(--color-muted);
  --lp-line: var(--color-line);
  --lp-glass: rgba(255, 252, 247, 0.72);
  --lp-glass-edge: rgba(255, 255, 255, 0.8);
  --lp-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --bg: var(--lp-cream);
  background: var(--lp-cream);
  color: var(--lp-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Header ------------------------------------------------------------------- */

/* At the top of the page the header is a compact floating glass pill. Once the
   page scrolls it opens into the full-width bar, and it stays visible in both
   directions (see syncLandingHeader). */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0;
  border-bottom: 1px solid var(--lp-line);
  --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  transition: padding 0.45s var(--lp-ease), background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.lp-header-inner {
  max-width: 1200px;
  height: 72px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 36px;
  border: 1px solid transparent;
  border-radius: 0;
  background: rgba(250, 246, 239, 0);
  transition: max-width 0.5s var(--lp-ease), height 0.45s var(--lp-ease), padding 0.45s var(--lp-ease), border-radius 0.45s var(--lp-ease), background-color 0.35s ease, box-shadow 0.45s ease, border-color 0.35s ease;
}

/* The compact pill at the top centres the nav between the logo and the actions, in smaller type. */
.lp-header.is-floating .lp-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
}
.lp-header.is-floating .lp-brand {
  justify-self: start;
}
.lp-header.is-floating .lp-nav {
  justify-self: center;
}
.lp-header.is-floating .lp-actions {
  justify-self: end;
}
.lp-header.is-floating .lp-link,
.lp-header.is-floating .lp-support-trigger {
  font-size: 13px;
}
.lp-header.is-floating .lp-signin {
  height: 36px;
  font-size: 13px;
}
.lp-header.is-floating {
  padding-top: 10px;
  border-bottom-color: transparent;
}
.lp-header.is-floating .lp-header-inner {
  max-width: 1040px;
  height: 58px;
  padding: 0 14px 0 18px;
  border-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-xl);
  background: rgba(255, 252, 247, 0.8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 16px 36px -20px rgba(44, 56, 78, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.lp-header.is-scrolled {
  background: rgba(250, 246, 239, 0.86);
  box-shadow: 0 10px 28px -22px rgba(44, 56, 78, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.lp-brand .brand,
.lp-footer-brand .brand {
  margin: 0;
  padding: 0;
  color: var(--lp-slate);
}
.lp-brand .brand-emblem {
  width: 34px;
  height: 34px;
}
.lp-brand .brand-wordmark {
  font-size: 21px;
  letter-spacing: -0.02em;
}
.lp-brand .brand small {
  font-size: 7px;
  color: var(--lp-muted);
}
.lp-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.lp-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--lp-slate);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  transition: color 0.2s ease;
}
.lp-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 1px;
  background: var(--lp-clay);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--lp-ease, ease);
}
.lp-link:hover::after,
.lp-link[aria-current='page']::after {
  transform: scaleX(1);
}
.lp-link:hover {
  filter: none;
}
.lp-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.lp-support-trigger {
  min-height: 38px;
  padding: 0 12px;
  gap: 7px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--lp-slate);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lp-support-trigger svg {
  width: 18px;
  height: 18px;
  color: var(--lp-clay);
}
.lp-support-trigger:hover,
.lp-support-trigger[aria-expanded='true'] {
  background: rgba(62, 77, 104, 0.07);
  filter: none;
}
.lp-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--lp-slate);
}
.lp-cart:hover {
  background: rgba(62, 77, 104, 0.07);
}
.lp-cart svg {
  width: 20px;
  height: 20px;
}
.lp-cart .cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--lp-clay);
  color: var(--color-white);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.lp-signin {
  display: inline-flex;
  align-items: center;
  height: 38px;
  margin-left: 6px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: var(--lp-slate);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.lp-signin:hover {
  background: var(--lp-slate-deep);
}

/* Page frame and type ----------------------------------------------------------- */
.buyer-app.public-store .main-shell {
  margin: 0;
  min-height: 70vh;
  background: transparent;
}
.buyer-app.public-store #main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 88px;
}
.lp-hero h1,
.lp-section-head h2,
.lp-page-head h1 {
  font-family: var(--lp-serif);
  font-weight: 500;
  color: var(--lp-slate-deep);
  letter-spacing: -0.015em;
}
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  background: var(--lp-clay);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 600;
  transition: background 0.18s;
}
.lp-btn:hover {
  background: var(--lp-clay-deep);
}
.lp-btn svg,
.lp-text-link svg {
  width: 17px;
  height: 17px;
}
.lp-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lp-slate);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(62, 77, 104, 0.3);
  text-underline-offset: 5px;
}
.lp-text-link:hover {
  color: var(--lp-clay);
  text-decoration-color: currentColor;
}
:is(.lp-btn, .lp-text-link, .lp-link, .lp-signin, .lp-cart, .lp-support-trigger):focus-visible {
  outline: 2px solid var(--lp-clay);
  outline-offset: 3px;
}

/* Hero --------------------------------------------------------------------------- */
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: center;
  align-content: center;
  padding: 24px 0 72px;
}
@media (min-width: 761px) {
  /* The hero takes about 70% of the screen, so Featured products peeks in below it. */
  .lp-hero {
    min-height: 70svh;
    box-sizing: border-box;
  }
}
.lp-hero-copy {
  max-width: 520px;
}
.lp-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.14;
  text-wrap: balance;
}
.lp-hero-copy > p {
  max-width: 34ch;
  margin: 0 0 28px;
  color: var(--lp-muted);
  font-size: 16.5px;
  line-height: 1.6;
  text-wrap: balance;
}
.lp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.lp-hero-media {
  display: grid;
  place-items: center;
}
.lp-hero-art {
  display: block;
  width: min(100%, 220px);
  height: auto;
}

/* Section headings ------------------------------------------------------------------ */
.lp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.lp-section-head h2 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 34px);
}
.lp-page-head {
  margin-bottom: 28px;
}
.lp-page-head h1 {
  margin: 0 0 6px;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.1;
}
.lp-page-head p {
  margin: 0;
  color: var(--lp-muted);
}

/* Products: chips, search, sort, cards ----------------------------------------------- */
.public-store .category-chips {
  gap: 8px;
}
.public-store .chip {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--lp-slate);
}
.public-store .chip:hover {
  border-color: var(--lp-slate);
  filter: none;
}
.public-store .chip[aria-pressed='true'] {
  background: var(--lp-slate);
  border-color: var(--lp-slate);
  color: var(--color-white);
}
.public-store .catalog-tools {
  gap: 12px;
}
.public-store .catalog-tools h2 {
  color: var(--lp-slate-deep);
  font-family: var(--lp-serif);
  font-weight: 500;
}
.public-store .search {
  border-radius: var(--radius-md);
  border-color: var(--lp-line);
}

/* Sort sits beside search; the h2 keeps the left edge. Applies to signed-in catalogues too. */
.catalog-tools .search {
  flex: 1 1 220px;
  margin-left: auto;
}
.catalog-sort {
  flex: 0 0 auto;
  width: auto;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: inherit;
}
.public-store .catalog-sort {
  border-color: var(--lp-line);
  color: var(--lp-slate);
}
.public-store.buyer-app #productCatalog .product-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--lp-glass-edge);
  background: var(--lp-glass);
  box-shadow: 0 1px 2px rgba(42, 36, 33, 0.04), 0 14px 32px -24px rgba(62, 77, 104, 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.2s, transform 0.2s;
}
.public-store.buyer-app #productCatalog .product-card:hover {
  transform: translateY(-2px);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(42, 36, 33, 0.05), 0 22px 40px -24px rgba(62, 77, 104, 0.45);
}
.public-store #productCatalog .product-image {
  border-radius: var(--radius-lg);
  background: var(--lp-cream-2);
}
.public-store #productCatalog .catalog-card-title {
  color: var(--lp-slate-deep);
}
.public-store #productCatalog .product-price {
  color: var(--lp-clay);
}
.public-store .product-mark,
.public-store #productCatalog .product-mark {
  background: var(--lp-clay-soft);
  color: var(--lp-clay);
  border-color: rgba(138, 74, 45, 0.12);
}
.public-store :is(.stock-tag, .stock-state).in,
.public-store :is(.stock-tag, .stock-state).quantity {
  background: rgba(62, 77, 104, 0.08);
  color: var(--lp-slate);
}

/* Primary actions on public pages (product, cart, checkout) use the brand clay. */
.public-store.buyer-app #main button[type='submit'],
.public-store.buyer-app #placeOrder,
.public-store.buyer-app #main .button:not(.secondary) {
  background: var(--lp-clay);
  border-color: var(--lp-clay);
  border-radius: var(--radius-md);
}
.public-store.buyer-app #main button[type='submit']:hover,
.public-store.buyer-app #placeOrder:hover,
.public-store.buyer-app #main .button:not(.secondary):hover {
  background: var(--lp-clay-deep);
  border-color: var(--lp-clay-deep);
}
.public-store .panel {
  background: var(--color-surface);
  border-color: var(--lp-line);
  box-shadow: 0 14px 34px -28px rgba(62, 77, 104, 0.4);
}

/* Featured and FAQ --------------------------------------------------------------------- */
.lp-featured {
  padding-top: 8px;
}
.lp-faq-page {
  max-width: 760px;
}
.lp-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.lp-faq-art {
  display: block;
  justify-self: center;
  width: min(100%, 220px);
  height: auto;
}
@media (max-width: 960px) {
  .lp-faq-layout {
    grid-template-columns: 1fr;
  }
  .lp-faq-art {
    display: none;
  }
}
.lp-faq-list {
  border-top: 1px solid var(--lp-line);
}
.lp-faq-item {
  border-bottom: 1px solid var(--lp-line);
}
.lp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  color: var(--lp-slate-deep);
  font-size: 16px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.lp-faq-item summary::-webkit-details-marker {
  display: none;
}
.lp-faq-item summary i {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--lp-clay);
  transition: transform 0.26s cubic-bezier(.2,.7,.2,1);
}
.lp-faq-item summary i svg {
  width: 18px;
  height: 18px;
}
.lp-faq-item[open]:not(.closing) summary i {
  transform: rotate(45deg);
}
.lp-faq-answer {
  overflow: hidden;
}
.lp-faq-item summary:focus-visible {
  outline: 2px solid var(--lp-clay);
  outline-offset: 2px;
}
.lp-faq-item p {
  margin: 0;
  padding: 0 0 22px;
  max-width: 60ch;
  color: var(--lp-muted);
  line-height: 1.65;
}

/* Footer ------------------------------------------------------------------------------- */
.lp-footer {
  border-top: 1px solid var(--lp-line);
}
.lp-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
}
.lp-footer-brand .brand-emblem {
  width: 28px;
  height: 28px;
}
.lp-footer-brand .brand-wordmark {
  font-size: 18px;
}
.lp-footer-brand .brand small {
  display: none;
}
.lp-footer nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.lp-footer nav a,
.lp-footer nav button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lp-muted);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.4;
}
.lp-footer nav a:hover,
.lp-footer nav button:hover {
  color: var(--lp-clay);
  filter: none;
}
.lp-footer-inner > p {
  margin: 0 0 0 auto;
  color: var(--lp-muted);
  font-size: 13px;
}

/* Support panel (opened from the header) ---------------------------------------------------- */
.lp-support {
  position: fixed;
  top: 80px;
  right: max(16px, calc((100vw - 1200px) / 2 + 16px));
  z-index: 50;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 100px);
  overflow: auto;
  border-radius: 18px;
  background: rgba(255, 252, 247, 0.9);
  border: 1px solid var(--lp-glass-edge);
  box-shadow: 0 1px 0 var(--color-white) inset, 0 30px 60px -28px rgba(44, 56, 78, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  color: var(--lp-ink);
  animation: lp-rise 0.22s ease-out;
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(-6px); }
}
.lp-support header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px 14px 16px;
  border-bottom: 1px solid var(--lp-line);
}
.lp-support-badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--lp-clay-soft);
  color: var(--lp-clay);
}
.lp-support-badge svg {
  width: 20px;
  height: 20px;
}
.lp-support h2 {
  margin: 0;
  color: var(--lp-slate-deep);
  font-size: 16px;
}
.lp-support header p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0;
  color: var(--lp-muted);
  font-size: 13px;
}
.lp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b9a999;
}
.lp-dot.on {
  background: #3f9d63;
}
.lp-icon-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  min-height: 0;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--lp-slate);
}
.lp-icon-btn:hover {
  background: rgba(62, 77, 104, 0.08);
  filter: none;
}
.lp-icon-btn svg {
  width: 17px;
  height: 17px;
}
.lp-support-body {
  padding: 12px 14px 16px;
}
.lp-support-note {
  margin: 0 2px 12px;
  color: var(--lp-muted);
  font-size: 13px;
  line-height: 1.5;
}
.lp-channels {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-channels li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.lp-channels li > div:first-of-type {
  display: grid;
  min-width: 0;
}
.lp-channels strong {
  color: var(--lp-slate-deep);
  font-size: 13px;
}
.lp-channel-value {
  overflow: hidden;
  color: var(--lp-ink);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-channels small {
  color: var(--lp-muted);
  font-size: 12px;
}
.lp-channel-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--lp-cream-2);
  color: var(--lp-slate);
}
.lp-channel-icon.whatsapp {
  color: #2f8f55;
}
.lp-channel-icon.phone {
  color: var(--lp-clay);
}
.lp-channel-icon svg {
  width: 19px;
  height: 19px;
}
.lp-channel-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.lp-channel-actions .lp-icon-btn {
  margin-left: 0;
}
.lp-channel-go {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: var(--lp-slate);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.lp-channel-go:hover {
  background: var(--lp-slate-deep);
}
.lp-support-empty {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--lp-cream-2);
  color: var(--lp-muted);
  font-size: 13px;
  line-height: 1.5;
}
.lp-support-links {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.lp-support-links a,
.lp-support-links button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-md);
  background: none;
  color: var(--lp-slate);
  font-size: 13px;
  font-weight: 600;
}
.lp-support-links svg {
  width: 15px;
  height: 15px;
}

/* The workspace's global "button:hover:not(:disabled)" fills buttons with solid
   blue. Public-store buttons restate their own hover with enough specificity to win. */
body.public-store .lp-link:hover:not(:disabled) {
  background: none;
  color: var(--lp-slate-deep);
  border-color: transparent;
}
body.public-store .lp-support-trigger:hover:not(:disabled),
body.public-store .lp-support-trigger[aria-expanded='true'] {
  background: rgba(62, 77, 104, 0.07);
  color: var(--lp-slate-deep);
  border-color: transparent;
}
body.public-store .lp-icon-btn:hover:not(:disabled) {
  background: rgba(62, 77, 104, 0.08);
  color: var(--lp-slate-deep);
  border-color: transparent;
}
body.public-store .lp-support-links button:hover:not(:disabled),
body.public-store .lp-support-links a:hover {
  background: var(--lp-cream-2);
  color: var(--lp-slate-deep);
  border-color: var(--lp-line);
}
body.public-store .lp-footer nav button:hover:not(:disabled) {
  background: none;
  color: var(--lp-clay);
}
body.public-store :is(.lp-link, .lp-support-trigger, .lp-icon-btn, .lp-footer nav button):focus-visible {
  outline: 2px solid var(--lp-clay);
  outline-offset: 3px;
}

/* Secondary buttons and the cart drawer on public pages: warm neutrals, clay for the main action. */
body.public-store button.secondary,
body.public-store a.button.secondary {
  background: var(--color-surface);
  border-color: var(--lp-line);
  color: var(--lp-slate);
}
body.public-store button.secondary:hover:not(:disabled),
body.public-store a.button.secondary:hover {
  background: var(--lp-cream-2);
  border-color: var(--lp-slate);
  color: var(--lp-slate-deep);
}
body.public-store .cart-drawer a.button:not(.secondary),
body.public-store .cart-drawer button:not(.secondary):not(.text):not(.icon-button) {
  background: var(--lp-clay);
  border-color: var(--lp-clay);
  color: var(--color-white);
}
body.public-store .cart-drawer a.button:not(.secondary):hover,
body.public-store .cart-drawer button:not(.secondary):not(.text):not(.icon-button):hover:not(:disabled) {
  background: var(--lp-clay-deep);
  border-color: var(--lp-clay-deep);
}
body.public-store .cart-drawer-panel {
  background: var(--lp-cream);
}
body.public-store .cart-drawer .money,
body.public-store .cart-drawer-item strong {
  color: var(--lp-slate-deep);
}
body.public-store .cart-drawer-status.exists {
  background: rgba(62, 77, 104, 0.1);
  color: var(--lp-slate);
}
body.public-store .product-actions #addToCart.in-cart {
  border-color: #2f6b45;
  color: #2f6b45;
  background: #f1f7f2;
}

/* Settings → Support (staff) */
.support-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.support-days legend {
  margin-bottom: 8px;
  font-weight: 600;
}
.support-days label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.support-hours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: 16px;
}

/* Responsive ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .lp-hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 16px 0 56px;
  }
  .lp-hero-media {
    justify-items: start;
  }
}
@media (max-width: 760px) {
  .lp-header-inner {
    height: 60px;
    gap: 12px;
    padding: 0 12px 0 16px;
  }
  .lp-header.is-floating {
    padding: 8px 8px 0;
  }
  .lp-header.is-floating .lp-header-inner {
    height: 54px;
    padding: 0 8px 0 12px;
  }
  .lp-nav {
    display: none;
  }
  .lp-header.is-floating .lp-header-inner {
    grid-template-columns: 1fr auto;
  }
  .lp-support-trigger span {
    display: none;
  }
  .lp-support-trigger {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
  .lp-signin {
    margin-left: 2px;
    padding: 0 12px;
  }
  .buyer-app.public-store #main {
    padding: 28px 16px 64px;
  }
  .lp-hero h1 {
    font-size: 30px;
  }
  .lp-hero-copy > p {
    font-size: 15.5px;
    margin-bottom: 24px;
  }
  .lp-hero-media {
    display: none;
  }
  .lp-section-head {
    flex-direction: column;
    gap: 8px;
  }
  .lp-footer-inner > p {
    margin-left: 0;
  }
  .lp-support {
    top: auto;
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    max-height: calc(100vh - 80px);
    animation-name: lp-sheet;
  }
  @keyframes lp-sheet { from { opacity: 0; transform: translateY(12px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-header,
  .lp-header-inner {
    transition: none;
  }
  .lp-support {
    animation: none;
  }
  .public-store.buyer-app #productCatalog .product-card {
    transition: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-header.is-floating .lp-header-inner {
    background: var(--color-surface);
  }
  .lp-header.is-scrolled {
    background: var(--color-cream);
  }
  .lp-support,
  .public-store.buyer-app #productCatalog .product-card {
    background: var(--color-surface);
  }
}

/* Affiliate earnings, sharing and Invite & Earn (referral_program.md).
   Uses the workspace's existing panels and tokens; no new visual language. */
.earn-tag {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: #edf5ee;
  color: #2f6b45;
  font-size: 11px;
  font-weight: 650;
}
.earn-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #f7faf7;
}
.earn-panel > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.earn-panel strong {
  color: #2f6b45;
  font-size: 20px;
}
.earn-panel small {
  color: var(--muted);
}
.earn-panel button {
  flex: none;
  min-height: 44px;
}
.share-intro {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
}
.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.share-actions > * {
  min-height: 46px;
}
.share-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  background: #25803f;
  color: var(--color-white);
  font-weight: 600;
}
.share-whatsapp:hover {
  background: #1e6b34;
}
.share-whatsapp svg,
.share-actions svg {
  width: 18px;
  height: 18px;
}
.referral-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.referral-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 12px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}
.referral-code strong {
  font-size: 22px;
  letter-spacing: 0.04em;
}
.referral-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-weight: 600;
}
.referral-more svg {
  width: 16px;
  height: 16px;
}
.referral-footnote {
  margin-top: 14px;
}
.product-affiliate {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.product-affiliate legend {
  padding: 0 6px;
  font-weight: 650;
}
.earning-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 140px);
  gap: 12px;
}
@media (max-width: 900px) {
  .referral-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .earn-panel {
    flex-direction: column;
    align-items: stretch;
  }
  .share-actions > * {
    flex: 1 1 100%;
    justify-content: center;
  }
  .earning-row {
    grid-template-columns: 1fr;
  }
}

/* Dashboard cards: the title link covers the whole card; a secondary link
   (e.g. "Share a product") sits above it so both stay clickable. */
.dashboard-tile {
  position: relative;
}
.dashboard-tile:focus-within {
  border-color: var(--forest);
}
.dashboard-tile-body {
  min-width: 0;
}
.dashboard-tile-link {
  color: inherit;
  text-decoration: none;
}
.dashboard-tile-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.dashboard-tile-link:focus-visible {
  outline: none;
}
.dashboard-tile-extra {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
}
.dashboard-tile-extra:hover {
  text-decoration: underline;
}
.dashboard-tile-extra svg {
  width: 15px;
  height: 15px;
}

/* Withdrawal request status */
.withdrawal-status {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 650;
  background: #fff4dc;
  color: #8a5a00;
}
.withdrawal-status.paid {
  background: #e3f1e7;
  color: #1f6b3a;
}
.withdrawal-status.rejected {
  background: #eef0f3;
  color: #4c5a6a;
}

/* Quantity: at 1, the decrease button becomes Remove (bin icon). */
.quantity .qty-remove {
  color: #a23c2d;
}
.quantity .qty-remove svg {
  width: 15px;
  height: 15px;
}
.quantity button.qty-remove:hover:not(:disabled) {
  background: #fbeeea;
  border-color: #e4b9b0;
  color: #8a2f22;
}
.qty-hint {
  display: block;
  min-height: 1.3em;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* Affiliate menu: Log out is the last item, styled like the links above it. */
.nav-signout {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.workspace-navigation button.nav-logout {
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.workspace-navigation button.nav-logout:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
  color: #a23c2d;
}

/* Read-only profile fields read as locked, not broken. */
.field input:disabled {
  background: #f1f4f7;
  color: #5d6b79;
  border-color: #d9e0e7;
  cursor: not-allowed;
  -webkit-text-fill-color: #5d6b79;
  opacity: 1;
}

/* Calm page changes on the public store: content fades up gently, in-page scrolling is smooth. */
html:has(body.public-store) {
  scroll-behavior: smooth;
}
.public-store #main > * {
  animation: lp-page-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.public-store .lp-cart {
  transition: background-color 0.2s ease;
}
@keyframes lp-page-in { from { opacity: 0; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.public-store) {
    scroll-behavior: auto;
  }
  .public-store #main > * {
    animation: none;
  }
}

/* Digital products: delivery settings, content managers, library and course player ------- */
.delivery-choice {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.switch-row.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}
.delivery-settings {
  margin-top: 4px;
}
.manage-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.manage-content svg,
.manage-content-link svg {
  width: 16px;
  height: 16px;
}
.manage-content-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: var(--color-slate);
  font-weight: 550;
}
.delivery-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}
.delivery-note svg {
  width: 15px;
  height: 15px;
  color: #8a6a1f;
  flex: none;
}
dialog.content-dialog {
  width: min(760px,calc(100vw - 28px));
}
.content-dialog .dialog-footer {
  align-items: center;
}
.content-manager {
  display: grid;
  gap: 16px;
}
.content-empty {
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--color-field-line);
  border-radius: var(--radius-md);
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}
.content-subhead {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 650;
}
.upload-drop {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0;
  padding: 26px 18px;
  border: 1.5px dashed #d9c9b2;
  border-radius: var(--radius-lg);
  background: #fbf7f0;
  color: var(--color-slate);
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.upload-drop:hover,
.upload-drop.dragging {
  background: var(--color-cream-2);
  border-color: var(--color-clay);
}
.upload-drop:focus-within {
  outline: 2px solid var(--color-slate);
  outline-offset: 2px;
}
.upload-drop svg {
  width: 26px;
  height: 26px;
}
.upload-drop small {
  color: var(--muted);
}
.file-list,
.library-files,
.code-pool,
.code-delivered,
.library-codes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.file-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.file-row.uploading {
  grid-template-columns: auto minmax(0,1fr);
}
.file-badge {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--color-cream-2);
  color: #5d4a3c;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
}
.file-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.file-main input {
  min-height: 34px;
  padding: 6px 8px;
  font-weight: 550;
}
.file-main small {
  color: var(--muted);
  font-size: 11.5px;
}
.file-option {
  width: auto;
  max-width: 170px;
  min-height: 34px;
  font-size: 12.5px;
}
.file-actions,
.row-tools {
  display: flex;
  gap: 2px;
}
.file-actions .icon-button,
.row-tools .icon-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 6px;
}
.move-file svg,
.module-up svg,
.lesson-up svg {
  transform: rotate(-90deg);
}
.module-down svg,
.lesson-down svg {
  transform: rotate(90deg);
}
.delete-file,
.module-delete,
.lesson-delete {
  color: #a33b3b;
}
.upload-progress {
  height: 6px;
  border-radius: 99px;
  background: var(--color-line-soft);
  overflow: hidden;
}
.upload-progress span {
  display: block;
  height: 100%;
  background: var(--color-slate);
  transition: width .2s ease;
}
.course-summary {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}
.course-module {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}
.module-head {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--color-cream);
  border-bottom: 1px solid var(--line);
}
.module-index {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.module-title {
  min-height: 36px;
  font-weight: 650;
}
.lesson-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: grid;
  gap: 4px;
}
.lesson-row {
  border-radius: 9px;
}
.lesson-row.open {
  background: #fdfaf5;
  box-shadow: inset 0 0 0 1px var(--color-line);
}
.lesson-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lesson-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  box-shadow: none;
}
.lesson-toggle:hover:not(:disabled) {
  background: var(--color-cream-3);
  color: inherit;
}
.lesson-toggle strong {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lesson-toggle small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
}
.lesson-toggle > span:last-child {
  min-width: 0;
}
.lesson-kind {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--color-cream-2);
  color: var(--color-slate);
}
.lesson-kind svg {
  width: 16px;
  height: 16px;
}
.lesson-editor {
  display: grid;
  gap: 12px;
  padding: 4px 12px 14px 48px;
}
.lesson-kinds {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lesson-kinds button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12.5px;
}
.lesson-kinds button svg {
  width: 15px;
  height: 15px;
}
.lesson-kinds button[aria-pressed="true"] {
  background: var(--color-slate);
  border-color: var(--color-slate);
  color: var(--color-white);
}
.field-help {
  margin-top: -6px;
}
.file-pick {
  display: flex;
  gap: 8px;
}
.file-pick select {
  flex: 1;
  min-width: 0;
}
.upload-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
  cursor: pointer;
}
.upload-inline svg {
  width: 15px;
  height: 15px;
}
.add-lesson {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 12px;
  padding: 6px 4px;
  color: var(--color-slate);
  font-weight: 550;
}
.add-module {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
}
.add-lesson svg,
.add-module svg {
  width: 15px;
  height: 15px;
}
.code-stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.code-stats div {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-cream);
}
.code-stats strong {
  display: block;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.code-stats span {
  color: var(--muted);
  font-size: 12px;
}
.code-pool {
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  max-height: 260px;
  overflow: auto;
}
.code-pool li,
.code-delivered li,
.library-codes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.code-delivered li {
  padding: 8px 12px;
  flex-wrap: wrap;
}
.code-pool code,
.code-delivered code,
.library-codes code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.code-pool .icon-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 6px;
}
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(100%,340px),1fr));
  gap: 16px;
}
.library-grid.compact {
  grid-template-columns: 1fr;
  gap: 10px;
}
.library-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-white);
  box-shadow: 0 8px 24px -20px rgba(25,48,75,.35);
}
.library-grid.compact .library-card {
  padding: 14px;
  box-shadow: none;
}
.library-card.expired {
  opacity: .7;
}
.library-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.library-head h3 {
  margin: 4px 0 3px;
  font-size: 15px;
  line-height: 1.35;
}
.library-head small {
  font-size: 11.5px;
}
.library-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-cream-2);
  color: var(--color-slate);
}
.library-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-thumb svg {
  width: 24px;
  height: 24px;
}
.library-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-slate);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.library-kind svg {
  width: 13px;
  height: 13px;
}
.kind-course .library-kind {
  color: var(--color-clay);
}
.kind-code .library-kind {
  color: #1d6a45;
}
.library-files li {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.library-files strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.library-files small {
  color: var(--muted);
  font-size: 11.5px;
}
.library-files button,
.open-course {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
}
.library-files button svg,
.open-course svg {
  width: 16px;
  height: 16px;
}
.library-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.library-note svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.course-progress {
  display: grid;
  gap: 6px;
}
.course-progress small {
  color: var(--muted);
  font-size: 12px;
}
.progress-track {
  height: 8px;
  border-radius: 99px;
  background: var(--color-line-soft);
  overflow: hidden;
}
.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--color-slate),#6b7d9c);
  transition: width .4s cubic-bezier(.22,1,.36,1);
}
.open-course {
  justify-self: start;
}
.purchase-block {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  border-radius: 14px;
  background: #f4f8f5;
  border: 1px solid #d6e6dc;
}
.purchase-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.purchase-block-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  color: #1d5a3c;
}
.purchase-block-head h3 svg {
  width: 18px;
  height: 18px;
}
.copy-access {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: var(--color-slate);
  font-weight: 550;
}
.copy-access svg {
  width: 15px;
  height: 15px;
}
.access-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.access-note svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.staff-delivery ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.staff-delivery li {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.course-player {
  display: grid;
  grid-template-columns: minmax(260px,320px) minmax(0,1fr);
  gap: 24px;
  align-items: start;
}
.course-outline {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-white);
}
.course-outline-head h1 {
  margin: 4px 0 12px;
  font-size: 18px;
  line-height: 1.3;
}
.outline-section {
  margin-top: 16px;
}
.outline-title {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.outline-section ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.outline-section button {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  text-align: left;
  font-weight: 450;
  box-shadow: none;
}
.outline-section button:hover:not(:disabled) {
  background: var(--color-cream-3);
  color: inherit;
}
.outline-section button[aria-current="true"] {
  background: var(--color-cream-2);
  color: var(--color-slate-deep);
  font-weight: 600;
}
.outline-section button small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.outline-check {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid #c3cfdb;
  border-radius: 50%;
}
.outline-check.done {
  border-color: #1d6a45;
  background: #1d6a45;
  color: var(--color-white);
}
.outline-check svg {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}
.course-lesson {
  min-width: 0;
  padding: 26px 28px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-white);
  outline: none;
}
.course-lesson h2 {
  margin: 6px 0 6px;
  font-size: 24px;
  line-height: 1.25;
}
.course-lesson > .muted {
  display: flex;
  align-items: center;
  gap: 6px;
}
.course-lesson > .muted svg {
  width: 14px;
  height: 14px;
}
.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  margin: 18px 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0f1722;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.watch-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}
.watch-link svg {
  width: 16px;
  height: 16px;
}
.lesson-text {
  max-width: 70ch;
  margin-top: 16px;
  color: #2c3540;
  font-size: 15px;
  line-height: 1.75;
}
.lesson-text p {
  margin: 0 0 14px;
}
.lesson-text a {
  color: var(--color-slate);
  overflow-wrap: anywhere;
}
.lesson-resource {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
}
.lesson-resource strong {
  display: block;
  overflow-wrap: anywhere;
}
.lesson-resource small {
  color: var(--muted);
}
.lesson-resource button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lesson-resource svg {
  width: 16px;
  height: 16px;
}
.lesson-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.lesson-nav button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lesson-nav button svg {
  width: 16px;
  height: 16px;
}
#prevLesson svg {
  transform: rotate(180deg);
}
.product-includes {
  margin: 18px 0 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fdfaf5;
}
.product-includes h2 {
  margin: 0 0 10px;
  font-size: 14px;
}
.includes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.includes-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.includes-list svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--color-slate);
}
.curriculum {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.curriculum summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.curriculum-section {
  margin-top: 12px;
}
.curriculum-section strong {
  font-size: 13px;
}
.curriculum-section ol {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.curriculum-section li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3d4b5a;
  font-size: 12.5px;
}
.curriculum-section li svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex: none;
}
.curriculum-section li small {
  margin-left: auto;
  color: var(--muted);
}
@media (max-width:900px) {
  .course-player {
    grid-template-columns: 1fr;
  }
  .course-outline {
    position: static;
    max-height: none;
  }
  .course-lesson {
    padding: 20px 18px;
  }
}
@media (max-width:600px) {
  .delivery-choice {
    grid-template-columns: 1fr;
  }
  .file-row {
    grid-template-columns: auto minmax(0,1fr) auto;
  }
  .file-option {
    grid-column: 2 / -1;
    max-width: none;
    width: 100%;
  }
  .lesson-editor {
    padding-left: 12px;
  }
  .module-head {
    grid-template-columns: minmax(0,1fr) auto;
  }
  .module-index {
    grid-column: 1 / -1;
  }
  .library-files li {
    grid-template-columns: auto minmax(0,1fr);
  }
  .library-files button {
    grid-column: 1 / -1;
  }
  .lesson-nav {
    flex-direction: column-reverse;
  }
  .lesson-nav button {
    justify-content: center;
  }
  .course-lesson h2 {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .progress-track span,
  .upload-progress span {
    transition: none;
  }
}

/* Catalogue cards ---------------------------------------------------------------------
   One fixed size everywhere. The image fills ~80% of the card; a fixed strip below holds
   category, name and price. Status badges sit on the image. Hovering only zooms the image.
   Placed last so it settles the earlier layered card rules. */
#productCatalog {
  align-items: start;
}
#productCatalog .catalog-card.product-link.product-card {
  --card-height: 360px;
  --card-info: 78px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--card-height);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e1e6eb;
  border-radius: 14px;
  background: var(--color-white);
  box-shadow: none;
  transform: none;
  transition: none;
  color: inherit;
}
.public-store #productCatalog .catalog-card.product-link.product-card {
  border-color: var(--lp-line);
  background: var(--color-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#productCatalog .catalog-card.product-link.product-card:hover {
  border-color: #e1e6eb;
  background: var(--color-white);
  box-shadow: none;
  transform: none;
}
.public-store #productCatalog .catalog-card.product-link.product-card:hover {
  border-color: var(--lp-line);
  background: var(--color-surface);
}
#productCatalog .catalog-card.product-link.product-card:focus-visible {
  outline: 2px solid var(--color-slate);
  outline-offset: 3px;
}
#productCatalog .catalog-card.product-link .product-image {
  position: relative;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: #f1f4f7;
}
.public-store #productCatalog .catalog-card.product-link .product-image {
  background: var(--lp-cream-2);
}
#productCatalog .catalog-card.product-link .product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
#productCatalog .catalog-card.product-link .product-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
#productCatalog .catalog-card.product-link .product-mark svg {
  width: 26px;
  height: 26px;
}
#productCatalog .catalog-card.product-link:hover .product-image img,
#productCatalog .catalog-card.product-link:focus-visible .product-image img {
  transform: scale(1.06);
}
#productCatalog .catalog-card.product-link:hover .product-mark {
  transform: scale(1.08);
}
#productCatalog .catalog-card.is-out .product-image img {
  filter: grayscale(.35);
  opacity: .85;
}
#productCatalog .catalog-card .card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
#productCatalog .catalog-card .card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.92);
  color: #33404e;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(20,30,45,.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#productCatalog .catalog-card .card-badge svg {
  width: 12px;
  height: 12px;
}
#productCatalog .catalog-card .card-badge.out {
  color: #a5362c;
}
#productCatalog .catalog-card .card-badge.low {
  color: #8a5a12;
}
#productCatalog .catalog-card .card-badge.earn {
  color: #1d6a45;
}
#productCatalog .catalog-card .photo-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(20,28,38,.62);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 600;
}
#productCatalog .catalog-card .photo-count svg {
  width: 12px;
  height: 12px;
}
#productCatalog .catalog-card .catalog-card-content {
  flex: 0 0 var(--card-info);
  height: var(--card-info);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 14px;
  min-width: 0;
}
#productCatalog .catalog-card .catalog-card-content > .eyebrow {
  margin: 0;
  overflow: hidden;
  color: #6d7884;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#productCatalog .catalog-card .catalog-card-title {
  display: block;
  overflow: hidden;
  color: #1f2a35;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 0;
}
.public-store #productCatalog .catalog-card .catalog-card-title {
  color: var(--lp-slate-deep);
}
#productCatalog .catalog-card .card-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
#productCatalog .catalog-card .card-price .product-price {
  overflow: hidden;
  color: #1f2a35;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.public-store #productCatalog .catalog-card .card-price .product-price {
  color: var(--lp-clay);
}
#productCatalog .catalog-card .card-price small {
  color: #6d7884;
  font-size: 11px;
  font-weight: 500;
}
#productCatalog .catalog-card .card-price s {
  margin-left: 4px;
  color: #8a949e;
  font-size: 12px;
  font-weight: 500;
}
#productCatalog .catalog-card .card-price > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: #9aa5b1;
  transition: transform .3s ease, color .3s ease;
}
#productCatalog .catalog-card:hover .card-price > svg {
  color: var(--color-slate);
  transform: translateX(2px);
}
@media (max-width:700px) {
  #productCatalog .catalog-card.product-link.product-card {
    --card-height: 272px;
    --card-info: 62px;
    border-radius: var(--radius-lg);
  }
  #productCatalog .catalog-card .catalog-card-content {
    padding: 8px 10px;
  }
  #productCatalog .catalog-card .catalog-card-content > .eyebrow {
    display: none;
  }
  #productCatalog .catalog-card .catalog-card-title {
    font-size: 13.5px;
  }
  #productCatalog .catalog-card .card-price .product-price {
    font-size: 14px;
  }
  #productCatalog .catalog-card .card-badges {
    top: 8px;
    left: 8px;
    right: 8px;
    gap: 4px;
  }
  #productCatalog .catalog-card .card-badge {
    padding: 3px 7px;
    font-size: 10px;
  }
  #productCatalog .catalog-card .card-price > svg {
    display: none;
  }
  /* The toolbar stacks on phones; a 220px flex basis would otherwise become the search box's height. */
  .catalog-tools .search {
    flex: 0 0 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  #productCatalog .catalog-card .product-image img,
  #productCatalog .catalog-card .product-mark,
  #productCatalog .catalog-card .card-price > svg {
    transition: none;
  }
}

/* Workspace theme ----------------------------------------------------------------------
   The signed-in workspaces (Affiliate app and Management) wear the public store's palette:
   warm cream surfaces, slate actions, clay accents and frosted-glass panels. Colours, radii,
   shadows and type only; no layout or spacing changes. Placed last so it settles earlier layers. */
body.compact-workspace {
  --bg: #f7f3ec;
  --paper: var(--color-surface);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --line-soft: var(--color-line-soft);
  --forest: var(--color-slate);
  --primary: var(--color-slate);
  --primary-hover: var(--color-slate-deep);
  --link: var(--color-slate);
  --soft: var(--color-cream-2);
  --accent: var(--color-clay);
  --green: #2f7a52;
  --danger: var(--color-danger);
  --ws-slate: var(--color-slate);
  --ws-slate-deep: var(--color-slate-deep);
  --ws-clay: var(--color-clay);
  --ws-clay-soft: var(--color-clay-soft);
  --ws-cream-2: var(--color-cream-2);
  --ws-glass: rgba(255, 253, 249, 0.78);
  --ws-glass-strong: rgba(255, 253, 249, 0.92);
  --ws-edge: rgba(231, 220, 203, 0.9);
  --ws-shadow: 0 1px 2px rgba(42, 36, 33, 0.04), 0 14px 32px -24px rgba(62, 77, 104, 0.35);
  --ws-shadow-lift: 0 1px 2px rgba(42, 36, 33, 0.05), 0 20px 40px -26px rgba(62, 77, 104, 0.45);
  --ws-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  color: var(--ink);
  background: radial-gradient(1100px 520px at 0% -8%, rgba(242, 228, 216, 0.85), transparent 62%),
    radial-gradient(900px 480px at 105% 0%, rgba(226, 232, 241, 0.7), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}
body.compact-workspace ::selection {
  background: var(--ws-clay-soft);
  color: var(--ink);
}
body.compact-workspace a {
  color: var(--link);
}
/* The link colour above must not reach filled link-buttons (Proceed to checkout, Checkout):
   slate text on a slate fill was unreadable until hovered. */
body.compact-workspace a.button:not(.secondary),
body.compact-workspace a.button:not(.secondary):hover {
  color: var(--color-white);
}
body.compact-workspace .eyebrow {
  color: var(--color-muted-2);
}

/* Page titles take the store's serif. */
body.compact-workspace #main h1,
body.compact-workspace .page-head h1 {
  font-family: var(--ws-serif);
  font-weight: 500;
  color: var(--ws-slate-deep);
  letter-spacing: -0.01em;
}
body.compact-workspace #main h2,
body.compact-workspace dialog h2 {
  color: var(--ws-slate-deep);
}

/* Header: frosted cream bar. */
body.compact-workspace .workspace-header {
  background: rgba(250, 246, 239, 0.74);
  border-bottom: 1px solid var(--ws-edge);
  box-shadow: 0 10px 30px -26px rgba(44, 56, 78, 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
body.compact-workspace .workspace-switch {
  background: rgba(243, 235, 223, 0.7);
  border-color: var(--ws-edge);
}
body.compact-workspace .workspace-switch a {
  color: var(--color-muted);
}
body.compact-workspace .workspace-switch a[aria-current='page'] {
  background: var(--color-surface);
  color: var(--ws-slate-deep);
  box-shadow: 0 1px 2px rgba(42, 36, 33, 0.08);
}
body.compact-workspace .account-id {
  background: var(--ws-glass-strong);
  border-color: var(--ws-edge);
}
body.compact-workspace .account-id:hover:not(:disabled) {
  background: var(--color-surface);
  border-color: #dccfba;
}
body.compact-workspace .avatar {
  background: var(--ws-clay-soft);
  color: var(--ws-clay);
}
body.compact-workspace .topbar-cart {
  background: var(--ws-glass-strong);
  border-color: var(--ws-edge);
  color: var(--ws-slate);
}
body.compact-workspace .cart-count,
body.compact-workspace .nav-count {
  background: var(--ws-clay);
  color: var(--color-white);
}

/* Surfaces: frosted cream glass with a soft lift. */
body.compact-workspace :is(.panel, .form-section, .cart-summary, .stats, .dashboard-tile, .address-card, .order-card, .compare-card, .library-card, .course-outline, .course-lesson) {
  background: var(--ws-glass);
  border: 1px solid var(--ws-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--ws-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
body.compact-workspace .dashboard-tile {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
body.compact-workspace .dashboard-tile:hover {
  border-color: #dccfba;
  box-shadow: var(--ws-shadow-lift);
  transform: none;
}
body.compact-workspace :is(.dashboard-tile, .method-summary, .receipt-heading, .panel) .tile-icon,
body.compact-workspace .tile-icon {
  background: var(--ws-clay-soft);
  color: var(--ws-clay);
  border-radius: var(--radius-lg);
}

/* Navigation. Management keeps a dark rail, now deep slate; the Affiliate menu is a glass card. */
body.compact-workspace.management-workspace .sidebar {
  background: linear-gradient(180deg, var(--color-slate-deep) 0%, #243045 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
body.compact-workspace.management-workspace .sidebar .nav-link {
  color: rgba(236, 232, 225, 0.78);
}
body.compact-workspace.management-workspace .sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-white);
}
/* Active item: a glass pane (sheen, top highlight, hairline edge, soft lift), no accent bar. */
body.compact-workspace.management-workspace .sidebar .nav-link[aria-current=page] {
  color: var(--color-white);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 8px 18px -10px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
body.compact-workspace.management-workspace .sidebar .eyebrow {
  color: rgba(236, 232, 225, 0.5);
}
body.compact-workspace.management-workspace .sidebar .brand-emblem {
  background: var(--color-surface);
}
body.compact-workspace .account-sidebar {
  background: var(--ws-glass);
  border: 1px solid var(--ws-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--ws-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.compact-workspace .account-sidebar .nav-link {
  color: #4a4440;
}
body.compact-workspace .account-sidebar .nav-link:hover {
  background: rgba(243, 235, 223, 0.8);
  color: var(--ws-slate-deep);
}
body.compact-workspace .account-sidebar .nav-link[aria-current=page] {
  color: var(--ws-slate-deep);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(243, 235, 223, 0.7) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(74, 68, 64, 0.12),
    0 6px 14px -8px rgba(74, 68, 64, 0.3);
}

/* Buttons: slate primary, cream secondary, quiet icon buttons. */

/* Low specificity on purpose: plain buttons get the new shape and colour, while buttons that
   already have their own role (account menu, tiles, navigation) keep it. */
html :where(body.compact-workspace) :where(button, a.button) {
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
body.compact-workspace :is(button.secondary, a.button.secondary) {
  background: var(--color-surface);
  border-color: #dccfba;
  color: var(--ws-slate);
}
body.compact-workspace :is(button.secondary, a.button.secondary):hover:not(:disabled) {
  background: var(--color-cream-3);
  border-color: #cdbda5;
  color: var(--ws-slate-deep);
}
body.compact-workspace button.text {
  color: var(--ws-slate);
}
body.compact-workspace button.text:hover:not(:disabled) {
  color: var(--ws-clay);
}
body.compact-workspace button.icon-button {
  color: var(--color-muted);
}
body.compact-workspace button.icon-button:hover:not(:disabled) {
  background: var(--ws-cream-2);
  color: var(--ws-slate-deep);
}
body.compact-workspace button.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--color-white);
}
body.compact-workspace button.danger:hover:not(:disabled) {
  background: #923530;
  border-color: #923530;
}
body.compact-workspace :is(button, a, summary, input, select, textarea):focus-visible {
  outline: 2px solid rgba(62, 77, 104, 0.55);
  outline-offset: 2px;
}

/* Form controls. */
body.compact-workspace :is(input:not([type=checkbox]):not([type=radio]):not(.switch), select, textarea) {
  background: var(--color-surface);
  border-color: var(--color-field-line);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
body.compact-workspace :is(input:not([type=checkbox]):not([type=radio]):not(.switch), select, textarea):hover {
  border-color: #d3c4ad;
}
body.compact-workspace :is(input:not([type=checkbox]):not([type=radio]):not(.switch), select, textarea):focus {
  border-color: var(--ws-slate);
  box-shadow: 0 0 0 3px rgba(62, 77, 104, 0.14);
}
body.compact-workspace input:disabled,
body.compact-workspace .field input:disabled {
  background: #f3ede4;
  color: var(--color-muted-2);
  -webkit-text-fill-color: var(--color-muted-2);
  border-color: var(--color-line);
}
body.compact-workspace :is(input[type=checkbox], input[type=radio]) {
  accent-color: var(--ws-slate);
}
body.compact-workspace input.switch:checked {
  background: var(--ws-slate);
}
body.compact-workspace .search svg {
  color: #9a8d7f;
}

/* Tabs, chips and sort controls. */
body.compact-workspace .tab {
  color: var(--ws-slate);
}
body.compact-workspace .tab[aria-selected='true'] {
  color: var(--ws-slate-deep);
  font-weight: 650;
}
body.compact-workspace .tab .tab-count {
  color: #8a7f74;
}
body.compact-workspace .chip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ws-slate);
}
body.compact-workspace .chip:hover:not(:disabled) {
  border-color: var(--ws-slate);
  background: rgba(255, 253, 249, 0.8);
}
body.compact-workspace .chip[aria-pressed='true'] {
  background: var(--ws-slate);
  border-color: var(--ws-slate);
  color: var(--color-white);
}
body.compact-workspace button.sort-heading {
  color: inherit;
}
body.compact-workspace button.sort-heading:hover:not(:disabled),
body.compact-workspace button.sort-heading:focus-visible {
  background: rgba(243, 235, 223, 0.7);
  color: var(--ws-slate-deep);
}
body.compact-workspace .segmented button[aria-pressed='true'],
body.compact-workspace .segmented button.active {
  background: var(--ws-slate);
  border-color: var(--ws-slate);
  color: var(--color-white);
}

/* Tables. */
body.compact-workspace :is(table, .table-wrap) {
  background: transparent;
}
body.compact-workspace th {
  background: rgba(243, 235, 223, 0.55);
  color: #5d544c;
  border-bottom-color: var(--line);
}
body.compact-workspace td {
  border-bottom-color: var(--line-soft);
}
body.compact-workspace tbody tr {
  transition: background-color 0.15s ease;
}
body.compact-workspace tbody tr:hover {
  background: rgba(250, 246, 239, 0.9);
}
body.compact-workspace .table-footer {
  border-top-color: var(--line-soft);
  color: var(--color-muted);
}

/* Status tags: soft tints in the warm palette. */
body.compact-workspace .order-status {
  border-radius: var(--radius-pill);
  font-weight: 600;
}
body.compact-workspace .order-status.processing {
  background: #e4ebf4;
  color: #2c4a6e;
}
body.compact-workspace .order-status.completed {
  background: var(--color-success-soft);
  color: var(--color-success);
}
body.compact-workspace .order-status.on_hold {
  background: #f7ead0;
  color: #7a5310;
}
body.compact-workspace .order-status.failed {
  background: #f6e1de;
  color: #8f302a;
}
body.compact-workspace :is(.order-status.pending, .order-status.cancelled, .order-status.trash, .order-status.archived) {
  background: #efe8dd;
  color: var(--color-muted);
}
body.compact-workspace .badge {
  border-radius: var(--radius-pill);
}

/* Wallet: deep slate card with cream actions. */
body.compact-workspace .wallet-card {
  border-color: var(--ws-edge);
  border-radius: 18px;
  box-shadow: var(--ws-shadow-lift);
}
body.compact-workspace .wallet-card-balance {
  background: linear-gradient(120deg, var(--color-slate-deep) 0%, #46577a 100%);
}
body.compact-workspace.buyer-app .wallet-card-actions #addFunds {
  background: var(--color-cream-2) !important;
  color: var(--ws-slate-deep);
}
body.compact-workspace.buyer-app .wallet-card-actions #addFunds:hover {
  background: #ebdfcd !important;
}
body.compact-workspace.buyer-app .wallet-card-actions #viewStatement {
  background: var(--color-cream) !important;
  color: #4a4440;
}
body.compact-workspace.buyer-app .wallet-card-actions #viewStatement:hover {
  background: #f1e9dc !important;
}

/* Dialogs, popovers and toasts. */
body.compact-workspace dialog {
  background: var(--color-surface);
  border: 1px solid var(--ws-edge);
  border-radius: 18px;
  box-shadow: 0 30px 80px -30px rgba(44, 56, 78, 0.55);
  color: var(--ink);
}
body.compact-workspace dialog::backdrop {
  background: rgba(44, 56, 78, 0.32);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
body.compact-workspace dialog :is(.dialog-head, .dialog-footer) {
  border-color: var(--line-soft);
}
body.compact-workspace .account-popover {
  background: var(--ws-glass-strong);
  border: 1px solid var(--ws-edge);
  border-radius: 14px;
  box-shadow: var(--ws-shadow-lift);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
body.compact-workspace .toast {
  background: var(--ws-slate-deep);
  color: var(--color-cream);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -18px rgba(44, 56, 78, 0.6);
}

/* Notices and empty states. */
body.compact-workspace .notice {
  background: #fbf3e6;
  border-color: #ecd9b8;
  color: #6b4e1f;
  border-radius: var(--radius-md);
}
body.compact-workspace .empty {
  color: var(--muted);
}
body.compact-workspace .spinner {
  border-color: rgba(62, 77, 104, 0.18);
  border-top-color: var(--ws-slate);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.compact-workspace :is(.panel, .form-section, .cart-summary, .stats, .dashboard-tile, .address-card, .order-card, .compare-card, .library-card, .account-sidebar, .workspace-header) {
    background: var(--color-surface);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.compact-workspace :is(button, a.button, .dashboard-tile, tbody tr) {
    transition: none;
  }
}
html:has(body.compact-workspace) {
  background: #f7f3ec;
}

/* Wallet stats: funded in slate, spent in clay, refunds in green. */
body.compact-workspace .wallet-stat-icon {
  background: #e8ecf2;
  color: var(--ws-slate);
}
body.compact-workspace .wallet-totals > div:nth-child(2) .wallet-stat-icon {
  background: var(--ws-clay-soft);
  color: var(--ws-clay);
}
body.compact-workspace .wallet-totals > div:nth-child(3) .wallet-stat-icon {
  background: var(--color-success-soft);
  color: var(--color-success);
}
body.compact-workspace .wallet-totals > div,
body.compact-workspace .wallet-activity {
  background: var(--ws-glass);
  border-color: var(--ws-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--ws-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Settings tabs: cream folder tabs that open onto the page. */
body.compact-workspace .settings-tabs {
  border-bottom-color: var(--line);
  overflow: visible;
  scrollbar-width: none;
}
body.compact-workspace .settings-tabs::-webkit-scrollbar {
  display: none;
}
body.compact-workspace .settings-tabs .tab {
  background: rgba(239, 230, 216, 0.75);
  border-color: var(--line);
  border-radius: 10px 10px 0 0;
  color: #5d544c;
}
body.compact-workspace .settings-tabs .tab:hover:not(:disabled) {
  background: rgba(255, 253, 249, 0.9);
  color: var(--ws-slate-deep);
}
/* Selected tab: glass that fades into the page it opens onto (no accent bar). */
body.compact-workspace .settings-tabs .tab[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, var(--bg) 100%);
  border-color: rgba(74, 68, 64, 0.14);
  border-bottom-color: var(--bg);
  color: var(--ws-slate-deep);
  box-shadow:
    inset 0 1px 0 #fff,
    0 -6px 14px -10px rgba(74, 68, 64, 0.35);
}

/* Smooth interactions ------------------------------------------------------------------
   Search fields have one edge; text fields show one focus ring (no outline stacked on top);
   dialogs fade and rise in and out, open near the top so loading content grows downward
   instead of re-centring, and the page behind never shifts when scrolling locks. */
.search {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.search input {
  border: 1px solid var(--color-field-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.public-store .search {
  background: transparent;
  border: 0;
}
.public-store .search input {
  border-color: var(--lp-line);
}
.search input:hover {
  border-color: #d3c4ad;
}
:is(input:not([type=checkbox]):not([type=radio]):not(.switch), select, textarea):focus,
:is(input:not([type=checkbox]):not([type=radio]):not(.switch), select, textarea):focus-visible {
  outline: none;
  border-color: var(--color-slate);
  box-shadow: 0 0 0 3px rgba(62, 77, 104, 0.14);
}
:is(input:not([type=checkbox]):not([type=radio]):not(.switch), select, textarea) {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Dialogs: enter and leave with a short fade and rise (the cart drawer keeps its slide). */
dialog:not(.cart-drawer) {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), overlay 0.28s allow-discrete, display 0.28s allow-discrete;
}
dialog:not(.cart-drawer)[open] {
  opacity: 1;
  transform: none;
}
@starting-style {
  dialog:not(.cart-drawer)[open] {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}
dialog:not(.cart-drawer)::backdrop {
  opacity: 0;
  transition: opacity 0.22s ease, overlay 0.28s allow-discrete, display 0.28s allow-discrete;
}
dialog:not(.cart-drawer)[open]::backdrop {
  opacity: 1;
}
@starting-style {
  dialog:not(.cart-drawer)[open]::backdrop {
    opacity: 0;
  }
}
@media (min-width: 701px) {
  /* Anchored near the top: when content loads in, the dialog grows downward without jumping.
     Not limited to :modal, so the position holds while the dialog fades out too. */
  dialog:not(.cart-drawer) {
    margin: max(6vh, 24px) auto auto;
  }
}
@media (max-width: 700px) {
  dialog:not(.cart-drawer) {
    transform: translateY(24px);
  }
  @starting-style {
    dialog:not(.cart-drawer)[open] {
      transform: translateY(24px);
    }
  }
}

/* Locking the page while a dialog or the menu is open keeps the scrollbar's space. */
html:has(dialog[open]),
html:has(dialog.is-closing),
html:has(body.nav-open) {
  overflow-y: hidden;
  scrollbar-gutter: auto;
  padding-right: var(--scrollbar-width, 0px);
}
@media (prefers-reduced-motion: reduce) {
  dialog:not(.cart-drawer),
  dialog:not(.cart-drawer)::backdrop {
    transition: none;
    transform: none;
  }
  .search input,
  :is(input, select, textarea) {
    transition: none;
  }
}

/* Product detail page ------------------------------------------------------------------
   Gallery on the left with thumbnails beneath; a sticky details column on the right with
   meta, serif title, price, stock, description, option pills, quantity and actions, then
   what happens after payment. Shared by the public store and the signed-in store. */
.pdp {
  --pdp-ink: var(--color-ink);
  --pdp-title: var(--color-slate-deep);
  --pdp-muted: var(--color-muted);
  --pdp-line: var(--color-line);
  --pdp-surface: var(--color-surface);
  --pdp-tint: var(--color-cream-2);
  --pdp-accent: var(--color-clay);
  --pdp-slate: var(--color-slate);
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(0,0.92fr);
  gap: 48px;
  align-items: start;
  margin-top: 8px;
  color: var(--pdp-ink);
}
.pdp-gallery {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.pdp .pdp-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  min-height: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--pdp-tint);
  border: 1px solid var(--pdp-line);
  box-shadow: 0 24px 50px -36px rgba(44,56,78,.45);
}
.pdp .product-media-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--pdp-tint);
  touch-action: pan-y;
}
.pdp .product-media-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
}
.pdp .product-media-stage > .product-mark {
  width: 96px;
  height: 96px;
  border-radius: 24px;
}
.pdp .product-media-stage > .product-mark svg {
  width: 42px;
  height: 42px;
}
@media (hover:hover) and (pointer:fine) {
  .pdp .product-media-stage {
    cursor: zoom-in;
  }
  .pdp .product-media-stage.is-zooming > img {
    transform: scale(1.8);
  }
  .pdp .product-media-stage:has(.gallery-nav:hover) > img {
    transform: none;
  }
}
.pdp .gallery-nav {
  z-index: 3;
  width: 40px;
  height: 40px;
  min-height: 40px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: rgba(255,253,249,.92);
  color: var(--pdp-title);
  box-shadow: 0 6px 18px -8px rgba(44,56,78,.45);
  opacity: 0;
  transition: opacity .2s ease, background-color .2s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pdp .pdp-media:hover .gallery-nav,
.pdp .gallery-nav:focus-visible {
  opacity: 1;
}
.pdp .gallery-nav:hover:not(:disabled) {
  background: var(--color-white);
  color: var(--pdp-title);
}
.pdp .gallery-counter {
  z-index: 3;
  right: 14px;
  bottom: 14px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(44,56,78,.72);
  color: var(--color-white);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pdp .gallery-dots {
  display: none;
}
.pdp .pdp-thumbs {
  position: static;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  width: auto;
  max-height: none;
  padding: 2px;
  overflow-x: auto;
  background: none;
  border: 0;
  box-shadow: none;
  scrollbar-width: none;
}
.pdp .pdp-thumbs::-webkit-scrollbar {
  display: none;
}
.pdp .pdp-thumbs[hidden] {
  display: none !important;
}
.pdp .pdp-thumbs button {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  padding: 0;
  border: 1px solid var(--pdp-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--pdp-tint);
  opacity: .72;
  box-shadow: none;
  transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pdp .pdp-thumbs button:hover:not(:disabled) {
  opacity: 1;
  background: var(--pdp-tint);
}
.pdp .pdp-thumbs button[aria-current=true] {
  opacity: 1;
  border-color: var(--pdp-slate);
  box-shadow: 0 0 0 2px rgba(62,77,104,.18);
}
.pdp .pdp-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp-info {
  position: sticky;
  top: calc(var(--workspace-header-height, 80px) + 20px);
  display: grid;
  gap: 18px;
  min-width: 0;
}
.pdp .pdp-title {
  font-family: 'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  font-size: clamp(30px,3vw,40px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--pdp-title);
  overflow-wrap: anywhere;
}
.pdp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.pdp-price .product-price {
  color: var(--pdp-ink);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.public-store .pdp-price .product-price {
  color: var(--pdp-accent);
}
.pdp-price s {
  color: #9a8f84;
  font-size: 16px;
}
.pdp-save {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: 12px;
  font-weight: 700;
}
.pdp-price small {
  flex-basis: 100%;
  color: var(--pdp-muted);
  font-size: 12.5px;
}
.pdp-stock {
  margin-top: -8px;
}
.pdp-stock .stock-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
}
.pdp-stock .stock-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.pdp-stock .stock-tag.in {
  color: #2f7a52;
  background: none;
}
.pdp-stock .stock-tag.quantity {
  color: #8a5a12;
  background: none;
}
.pdp-stock .stock-tag.out {
  color: #a5362c;
  background: none;
}
.pdp-description {
  margin: 0;
  max-width: 60ch;
  color: #4f4741;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-line;
}
.pdp .quantity {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 48px;
  padding: 3px;
  border: 1px solid var(--pdp-line);
  border-radius: var(--radius-lg);
  background: var(--pdp-surface);
}
.pdp .quantity button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pdp-title);
  font-size: 18px;
  box-shadow: none;
}
.pdp .quantity button:hover:not(:disabled) {
  background: var(--pdp-tint);
  color: var(--pdp-title);
}
.pdp .quantity button:disabled {
  opacity: .35;
}
.pdp .quantity #qtyValue {
  min-width: 34px;
  text-align: center;
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.pdp .qty-hint {
  margin-top: -10px;
}
.pdp .product-includes {
  margin: 0;
  border-color: var(--pdp-line);
  background: var(--pdp-surface);
  border-radius: 14px;
}
.pdp .earn-panel {
  margin: 0;
}

/* Details column, store-style: breadcrumb, title, short rule, price, label-and-field rows,
   actions, then facts in thin-ruled rows. */
.pdp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--pdp-muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pdp-crumbs a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.pdp-crumbs a:hover {
  color: var(--pdp-title);
}
.pdp-crumbs span[aria-hidden] {
  color: #c9b9a2;
}
.pdp .pdp-title {
  margin: -10px 0 0;
}
.pdp-rule {
  display: block;
  width: 40px;
  height: 3px;
  margin-top: -6px;
  border-radius: 2px;
  background: #e3d8c6;
}
.pdp-form {
  display: grid;
  gap: 12px;
}
.pdp-row {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 16px;
  align-items: center;
}
.pdp-row > label,
.pdp-row > .field-label {
  margin: 0;
  color: var(--pdp-ink);
  font-size: 13.5px;
  font-weight: 650;
}
.pdp-row select {
  width: 100%;
  max-width: 360px;
  height: 46px;
  min-height: 46px;
  padding: 0 44px 0 14px;
  border: 1px solid var(--pdp-line);
  border-radius: var(--radius-lg);
  background: var(--pdp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e4d68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 18px;
  color: var(--pdp-ink);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pdp-row select:hover {
  border-color: #cdbda5;
}
.pdp-row.needs-choice select {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(176,65,58,.12);
}
.pdp-qty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pdp .qty-hint {
  color: var(--pdp-muted);
  font-size: 12px;
}
.pdp .qty-hint:empty,
.pdp #productError:empty {
  display: none;
}
.pdp .pdp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
}
.pdp .pdp-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 170px;
  height: 48px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
}
.pdp .pdp-actions button svg {
  width: 17px;
  height: 17px;
}
.pdp #addToCart {
  background: var(--pdp-slate);
  border-color: var(--pdp-slate);
  color: var(--color-white);
  box-shadow: 0 10px 22px -14px rgba(44,56,78,.8);
}
.pdp #addToCart:hover:not(:disabled) {
  background: var(--color-slate-deep);
  border-color: var(--color-slate-deep);
}
.public-store .pdp #addToCart {
  background: var(--pdp-accent);
  border-color: var(--pdp-accent);
}
.public-store .pdp #addToCart:hover:not(:disabled) {
  background: var(--color-clay-deep);
  border-color: var(--color-clay-deep);
}
.pdp #addToCart.in-cart {
  background: #f2f8f3;
  border-color: #bcd9c6;
  color: var(--color-success);
  box-shadow: none;
}
.pdp #buyNow {
  background: var(--pdp-surface);
  border-color: #d8c9b3;
  color: var(--pdp-title);
}
.pdp #buyNow:hover:not(:disabled) {
  background: var(--color-cream-3);
  border-color: #c6b49a;
}
.pdp-facts {
  margin: 6px 0 0;
  padding: 0;
  max-width: 520px;
}
.pdp-facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 0;
  border-top: 1px solid #ece3d5;
  font-size: 13.5px;
  line-height: 1.5;
}
.pdp-facts > div:last-child {
  border-bottom: 1px solid #ece3d5;
}
.pdp-facts dt {
  margin: 0;
  color: var(--pdp-muted);
}
.pdp-facts dd {
  margin: 0;
  color: var(--pdp-ink);
}
.pdp-facts a,
.pdp-facts button.text {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pdp-slate);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(62,77,104,.35);
  text-underline-offset: 3px;
}
.pdp-facts a:hover,
.pdp-facts button.text:hover {
  color: var(--pdp-accent);
}
@media (max-width:600px) {
  .pdp-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .pdp-row select {
    max-width: none;
  }
  .pdp .pdp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .pdp .pdp-actions button {
    min-width: 0;
    padding: 0 12px;
  }
}
@media (max-width:960px) {
  .pdp {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pdp-info {
    position: static;
  }
  .pdp .pdp-media {
    aspect-ratio: 4/3;
  }
}
@media (max-width:600px) {
  .pdp {
    margin-top: 0;
    gap: 18px;
  }
  .pdp .pdp-media {
    aspect-ratio: 1/1;
    border-radius: var(--radius-xl);
  }
  .pdp .gallery-nav {
    display: none;
  }
  .pdp .pdp-thumbs button {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    border-radius: var(--radius-md);
  }
  .pdp-info {
    gap: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pdp .product-media-stage > img,
  .pdp .gallery-nav,
  .pdp .pdp-thumbs button {
    transition: none;
  }
}

/* Mini cart -----------------------------------------------------------------------------
   A compact card that drops from the header's cart instead of a full-height side panel.
   It fits its content; on phones it is a short bottom sheet. Behaviour is unchanged. */
dialog.cart-drawer {
  inset: calc(var(--workspace-header-height, 76px) + 10px) max(16px, calc((100vw - 1200px) / 2 + 24px)) auto auto;
  width: min(380px, calc(100vw - 32px));
  height: auto;
  max-height: min(560px, calc(100dvh - var(--workspace-header-height, 76px) - 26px));
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.97);
  box-shadow: 0 1px 2px rgba(42, 36, 33, 0.06), 0 30px 60px -28px rgba(44, 56, 78, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  transform-origin: top right;
  animation: cart-pop-in 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
dialog.cart-drawer.closing {
  animation: cart-pop-out 0.18s ease-in forwards;
}
dialog.cart-drawer::backdrop {
  background: rgba(44, 56, 78, 0.16);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@keyframes cart-pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.97); }
}
@keyframes cart-pop-out { to { opacity: 0; transform: translateY(-6px) scale(0.98); }
}
dialog.cart-drawer .cart-drawer-panel {
  height: auto;
  max-height: inherit;
  min-height: 0;
}
dialog.cart-drawer .cart-drawer-head {
  gap: 10px;
  padding: 16px 16px 12px 18px;
  border-bottom-color: var(--color-line-soft);
}
dialog.cart-drawer .cart-drawer-head h2 {
  font-size: 15.5px;
  color: var(--color-slate-deep);
}
dialog.cart-drawer .cart-drawer-head p {
  font-size: 12px;
  color: var(--color-muted-2);
}
dialog.cart-drawer .cart-drawer-status {
  width: 28px;
  height: 28px;
}
dialog.cart-drawer .cart-drawer-status svg {
  width: 15px;
  height: 15px;
}
dialog.cart-drawer .close-drawer {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 6px;
}
dialog.cart-drawer .cart-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 18px;
  gap: 14px;
}
dialog.cart-drawer .cart-drawer-item {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px;
  border-color: var(--color-line-soft);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
dialog.cart-drawer .cart-drawer-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-cream-2);
}
dialog.cart-drawer .cart-drawer-thumb .product-mark {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
}
dialog.cart-drawer .cart-drawer-item-info strong {
  font-size: 13.5px;
}
dialog.cart-drawer .cart-drawer-item-info small {
  font-size: 11.5px;
}
dialog.cart-drawer .cart-drawer-item-controls {
  gap: 12px;
  margin-top: 6px;
}
dialog.cart-drawer .cart-drawer-item-controls .quantity {
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
dialog.cart-drawer .cart-drawer-item-controls .quantity button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-slate-deep);
  box-shadow: none;
}
dialog.cart-drawer .cart-drawer-item-controls .quantity button:hover:not(:disabled) {
  background: var(--color-cream-2);
}
dialog.cart-drawer .cart-drawer-item-controls .quantity span {
  min-width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
dialog.cart-drawer .cart-drawer-item-controls button.text {
  font-size: 12px;
}
dialog.cart-drawer .cart-drawer-item > .money {
  font-size: 13.5px;
}
dialog.cart-drawer .cart-drawer-others h3 {
  font-size: 11px;
}
dialog.cart-drawer .cart-drawer-others li {
  padding: 7px 0;
  font-size: 12.5px;
  align-items: center;
}
dialog.cart-drawer .cart-drawer-others li .money {
  margin-left: auto;
}
dialog.cart-drawer .cart-drawer-others li button.text {
  font-size: 11.5px;
}
dialog.cart-drawer .cart-drawer-empty {
  margin: 18px 0;
}
dialog.cart-drawer .cart-drawer-foot {
  gap: 8px;
  padding: 12px 18px 16px;
  border-top-color: var(--color-line-soft);
  background: transparent;
}
dialog.cart-drawer .cart-drawer-total {
  margin-bottom: 2px;
  font-size: 12.5px;
}
dialog.cart-drawer .cart-drawer-total strong {
  font-size: 16px;
  color: var(--color-slate-deep);
}
dialog.cart-drawer .drawer-checkout {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 11px;
  background: var(--color-slate);
  border-color: var(--color-slate);
  color: var(--color-white);
  font-weight: 650;
}
dialog.cart-drawer .drawer-checkout:hover {
  background: var(--color-slate-deep);
  border-color: var(--color-slate-deep);
}
.public-store dialog.cart-drawer .drawer-checkout {
  background: var(--color-clay);
  border-color: var(--color-clay);
}
.public-store dialog.cart-drawer .drawer-checkout:hover {
  background: var(--color-clay-deep);
  border-color: var(--color-clay-deep);
}
dialog.cart-drawer .cart-drawer-links {
  gap: 8px;
}
dialog.cart-drawer .cart-drawer-links > * {
  min-height: 36px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  background: var(--color-surface);
  border-color: var(--color-field-line);
  color: var(--color-slate);
}
@media (max-width: 600px) {
  dialog.cart-drawer {
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 82dvh;
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    transform-origin: bottom center;
    animation: cart-sheet-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  dialog.cart-drawer.closing {
    animation: cart-sheet-out 0.2s ease-in forwards;
  }
  dialog.cart-drawer .cart-drawer-foot {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  dialog.cart-drawer .cart-drawer-links {
    grid-template-columns: 1fr 1fr;
  }
}
@keyframes cart-sheet-in { from { transform: translateY(100%); }
}
@keyframes cart-sheet-out { to { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  dialog.cart-drawer,
  dialog.cart-drawer.closing {
    animation: none;
  }
}

/* Public store consistency ------------------------------------------------------------
   The store uses the landing palette everywhere: slate actions, clay accents, warm lines.
   Shared variables (radios, checkboxes, toggles, links, focus rings) follow it, every page
   title uses the store serif, and the sign-in dialog's fields match the rest. */
body.public-store {
  --primary: var(--color-slate);
  --primary-hover: var(--color-slate-deep);
  --link: var(--color-slate);
  --forest: var(--color-slate);
  --soft: var(--color-cream-2);
  --green: #2f7a52;
  --line: var(--color-line);
  --line-soft: var(--color-line-soft);
  --muted: var(--color-muted);
  --ink: var(--color-ink);
}
body.public-store ::selection {
  background: var(--color-clay-soft);
  color: var(--color-ink);
}
body.public-store :is(input[type=checkbox], input[type=radio]) {
  accent-color: var(--color-slate);
}
body.public-store input.switch:checked {
  background: var(--color-slate);
}
body.public-store #main .page-head h1 {
  font-family: var(--lp-serif);
  font-weight: 500;
  color: var(--lp-slate-deep);
  letter-spacing: -0.015em;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.12;
}
body.public-store #main .page-head p {
  color: var(--lp-muted);
}
dialog.buyer-signin-dialog {
  background: var(--color-surface);
  border-color: var(--color-line);
}
dialog.buyer-signin-dialog input {
  border-color: var(--color-field-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
dialog.buyer-signin-dialog input:hover {
  border-color: #d3c4ad;
}
dialog.buyer-signin-dialog input:focus {
  border-color: var(--color-slate);
  box-shadow: 0 0 0 3px rgba(62, 77, 104, 0.14);
  outline: none;
}
dialog.buyer-signin-dialog::backdrop {
  background: rgba(44, 56, 78, 0.32);
}

/* Stacked panels on a page (wallets, withdrawals, statements) keep a clear gap between them. */
#main > .panel ~ .panel {
  margin-top: 24px;
}
#viewStatement.active {
  box-shadow: inset 0 0 0 2px currentColor;
}

/* Order statuses: one distinct hue each, so a list can be scanned at a glance.
   Processing is green, Completed blue, Pending violet, On Hold amber, Failed red,
   Cancelled grey, Trash brown, Archived teal. Wins over the per-theme tints above. */
.order-status.processing,
.affiliate-order-workspace .order-status.processing,
body.compact-workspace .order-status.processing {
  background: #dcefdc;
  color: #1d5a2b;
}
.order-status.completed,
.affiliate-order-workspace .order-status.completed,
body.compact-workspace .order-status.completed {
  background: #dbe6f5;
  color: #1f4a7d;
}
.order-status.pending,
.affiliate-order-workspace .order-status.pending,
body.compact-workspace .order-status.pending {
  background: #ebe3f6;
  color: #5a3a87;
}
.order-status.on_hold,
.affiliate-order-workspace .order-status.on_hold,
body.compact-workspace .order-status.on_hold {
  background: #fbe6c4;
  color: #875008;
}
.order-status.failed,
.affiliate-order-workspace .order-status.failed,
body.compact-workspace .order-status.failed {
  background: #f8d9d6;
  color: #982a22;
}
.order-status.cancelled,
.affiliate-order-workspace .order-status.cancelled,
body.compact-workspace .order-status.cancelled {
  background: #e7e9ec;
  color: #4a5361;
}
.order-status.trash,
.affiliate-order-workspace .order-status.trash,
body.compact-workspace .order-status.trash {
  background: #efe2dc;
  color: #7a4636;
}
.order-status.archived,
.affiliate-order-workspace .order-status.archived,
body.compact-workspace .order-status.archived {
  background: #d9eeeb;
  color: #1f5f58;
}

/* Management sidebar foot: notifications bell beside the collapse control, pushed to the bottom. */
@media (min-width: 901px) {
  .management-workspace .workspace-navigation.sidebar {
    display: flex;
    flex-direction: column;
  }
}
.sidebar-footer {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding: 24px 0 0;
}
.sidebar-footer .sidebar-collapse {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}
.sidebar-bell {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  padding: 0;
  background: #ffffff0a;
  border: 1px solid #ffffff1c;
  color: #d4d9de;
}
.sidebar-bell:hover {
  background: #ffffff16;
  color: var(--color-white);
}
.sidebar-bell svg {
  width: 18px;
  height: 18px;
}
.sidebar-bell.has-notices svg {
  color: #f3c08f;
}
.sidebar-bell .bell-count {
  position: absolute;
  top: -6px;
  right: -6px;
  margin: 0;
}
@media (min-width: 901px) {
  .management-workspace.sidebar-collapsed .sidebar-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .management-workspace.sidebar-collapsed .sidebar-bell {
    width: 100%;
    height: 42px;
  }
}
.notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.notice-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.notice-list a:hover {
  background: #00000006;
}
.notice-list a > svg {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: none;
  opacity: 0.6;
}
.notice-list .notice-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f7ead0;
  color: #7a5310;
  flex: none;
}
.notice-list .notice-icon svg {
  width: 17px;
  height: 17px;
}

/* ==========================================================================
   iOS focus rings. #main, dialogs and some headings take focus only so screen
   readers land in the right place (tabindex="-1"). iOS Safari focuses them on
   any tap and draws its default blue ring around the whole page; they never need
   a visible ring. Elements made focusable with tabindex="0" get the brand ring.
   ========================================================================== */
html {
  -webkit-tap-highlight-color: transparent;
}
:is(main, dialog, [tabindex='-1']):focus {
  outline: none;
}
[tabindex='0']:focus:not(:focus-visible) {
  outline: none;
}
[tabindex='0']:focus-visible {
  outline: 2px solid var(--color-slate);
  outline-offset: 2px;
}

/* ==========================================================================
   Phone layout for the public store and workspaces (≤760px).
   Editorial and flat: type, hairline rules and the two brand colours do the
   work, with no shadows, gradients or glass.
   The account (profile) button is hidden from the workspace navbar; Settings and
   Log out live in the menu instead. Desktop is unchanged.
   ========================================================================== */
.lp-highlights,
.lp-earn,
.app-tabbar {
  display: none;
}
@media (min-width: 761px) {
  .management-workspace .nav-signout {
    display: none;
  }
}
@media (max-width: 760px) {
  /* 16px fields stop iOS from zooming the page when a field is tapped. */
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea {
    font-size: 16px;
  }

  /* Workspace navbar: no profile button on phones. */
  .workspace-tools .user-card {
    display: none;
  }

  /* Header: a plain full-width bar with a hairline, never a floating pill. */
  .lp-header,
  .lp-header.is-floating,
  .lp-header.is-scrolled {
    padding: 0;
    border-bottom: 1px solid var(--lp-line);
    background: var(--lp-cream);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lp-header .lp-header-inner,
  .lp-header.is-floating .lp-header-inner {
    display: flex;
    max-width: none;
    height: 56px;
    padding: 0 8px 0 16px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lp-brand .brand small {
    display: none;
  }
  .lp-brand .brand-emblem {
    width: 28px;
    height: 28px;
  }
  .lp-brand .brand-wordmark {
    font-size: 19px;
  }
  .lp-header.is-floating .lp-signin,
  .lp-signin {
    height: 34px;
    margin-left: 4px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
  }

  .buyer-app.public-store #main {
    padding: 0 20px 56px;
  }

  /* Hero: type first. A large serif headline, quiet copy, one decisive action. */
  .lp-hero {
    gap: 0;
    padding: 44px 0 36px;
    border-bottom: 1px solid var(--lp-line);
  }
  .lp-hero-media {
    display: none;
  }
  .lp-hero-copy {
    max-width: none;
  }
  .lp-hero h1 {
    margin: 0 0 16px;
    font-size: 38px;
    line-height: 1.06;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .lp-hero-copy > p {
    max-width: 32ch;
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.55;
  }
  .lp-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .lp-hero .lp-btn,
  .lp-earn .lp-btn {
    justify-content: space-between;
    height: 54px;
    padding: 0 20px;
    border-radius: var(--radius-sm);
    font-size: 16px;
  }
  .lp-hero .lp-text-link {
    align-self: center;
    font-size: 15px;
  }

  /* Highlights: three plain rows divided by hairlines. */
  .lp-highlights {
    display: grid;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
  }
  .lp-highlights li {
    display: grid;
    gap: 2px;
    padding: 16px 0;
    border-bottom: 1px solid var(--lp-line);
  }
  .lp-highlights strong {
    color: var(--lp-slate-deep);
    font-size: 15px;
    font-weight: 600;
  }
  .lp-highlights small {
    color: var(--lp-muted);
    font-size: 14px;
  }

  /* Section headings stay on one line: title left, link right. */
  .lp-section-head {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
  }
  .lp-section-head h2 {
    font-size: 26px;
  }
  .lp-section-head .lp-text-link {
    flex: none;
    font-size: 14px;
  }
  .lp-section-head .lp-wide {
    display: none;
  }
  .lp-page-head {
    padding-top: 28px;
  }
  .lp-page-head h1 {
    font-size: 32px;
  }

  /* Product cards: flat, a hairline edge, no lift or glass. */
  .public-store.buyer-app #productCatalog .product-card,
  .public-store.buyer-app #productCatalog .product-card:hover {
    border: 1px solid var(--lp-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: none;
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .public-store .panel {
    box-shadow: none;
  }

  /* Earn band: one flat block of slate, serif heading, plain white action. */
  .lp-earn {
    display: grid;
    margin-top: 48px;
    padding: 32px 24px 24px;
    border-radius: var(--radius-lg);
    background: var(--lp-slate-deep);
    color: var(--color-white);
  }
  .lp-earn-eyebrow {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .lp-earn h2 {
    margin: 12px 0 10px;
    color: var(--color-white);
    font-family: var(--lp-serif);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .lp-earn p {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.55;
  }
  .lp-earn .lp-btn {
    background: var(--color-white);
    color: var(--lp-slate-deep);
  }
  .lp-earn .lp-btn:hover {
    background: var(--lp-cream);
  }

  /* Footer: left-aligned, compact. */
  .lp-footer-inner {
    gap: 16px;
    padding: 28px 20px 32px;
  }
  .lp-footer nav {
    gap: 8px 20px;
  }
  .lp-footer-inner > p {
    flex-basis: 100%;
  }

}

/* Affiliate tab bar (shell.js): Products, Earn and More on phones. Hairline top,
   solid cream, the active tab in clay. More opens the menu as a sheet above it. */
@media (max-width: 760px) {
  body.has-tabbar {
    padding-bottom: calc(57px + env(safe-area-inset-bottom));
  }
  .app-tabbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    inset: auto 0 0 0;
    z-index: 55;
    padding: 0 12px env(safe-area-inset-bottom);
    border-top: 1px solid var(--color-line);
    background: var(--color-cream);
  }
  .app-tabbar :is(a, button) {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: 0;
    padding: 9px 0 8px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
  }
  .app-tabbar button:hover:not(:disabled) {
    background: none;
    color: var(--color-slate-deep);
    border-color: transparent;
  }
  .app-tabbar svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.6;
  }
  .app-tabbar :is(a[aria-current='page'], button[aria-expanded='true']) {
    color: var(--color-clay);
  }
  .app-tabbar :is(a[aria-current='page'], button[aria-expanded='true'])::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 30%;
    right: 30%;
    height: 2px;
    background: var(--color-clay);
  }
  .app-tabbar :is(a, button):focus-visible {
    outline: 2px solid var(--color-clay);
    outline-offset: -2px;
  }
  @media (prefers-reduced-motion: reduce) {
    body.has-tabbar :is(.account-sidebar, .navigation-backdrop) {
      transition: none !important;
    }
  }
  /* More opens the menu as a compact panel above it: at most half the screen wide,
     sliding up and fading in (and back out), with the bar still tappable to close it.
     While it is open the page scrollbar is hidden, so fixed parts add its width
     (--scrollbar-width) only then: the scrollbar returns the moment it closes, and
     an offset kept through the fade-out made the panel slide sideways. */
  body.has-tabbar .account-sidebar {
    display: block;
    top: auto;
    left: auto;
    right: 12px;
    bottom: calc(57px + 8px + env(safe-area-inset-bottom));
    width: min(50vw, 260px);
    min-width: 0;
    max-height: calc(100dvh - var(--workspace-header-height, 76px) - 88px);
    padding: 8px;
    border-radius: 14px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.26s;
  }
  body.has-tabbar.nav-open .account-sidebar {
    right: calc(12px + var(--scrollbar-width, 0px));
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  body.has-tabbar .account-sidebar .navigation-panel-head {
    display: none;
  }
  body.has-tabbar .account-sidebar > nav {
    padding-top: 0;
  }
  body.has-tabbar .account-sidebar .nav-link {
    min-height: 42px;
    padding-inline: 10px;
    white-space: nowrap;
  }
  body.has-tabbar .navigation-backdrop {
    display: block;
    position: fixed;
    inset: 0 0 calc(57px + env(safe-area-inset-bottom));
    z-index: 50;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(35, 47, 60, 0.18);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  body.has-tabbar.nav-open .navigation-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s;
  }
  body.has-tabbar.nav-open .app-tabbar {
    padding-right: calc(12px + var(--scrollbar-width, 0px));
  }
  body.has-tabbar #toast {
    inset: auto 16px calc(69px + env(safe-area-inset-bottom)) 16px;
  }
}

/* ==========================================================================
   Promotion popup (store.js openPromo) and its live preview in Settings.
   Flat cream card, serif headline, clay action. With an image: side by side on
   wide screens, image on top elsewhere. On phones it is a bottom sheet.
   ========================================================================== */
dialog.promo-dialog {
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  max-height: min(88dvh, 640px);
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-ink);
  animation: promo-in 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
dialog.promo-dialog::backdrop {
  background: rgba(30, 34, 42, 0.56);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: promo-fade 0.3s ease-out;
}
dialog.promo-dialog.closing {
  animation: promo-out 0.2s ease-in forwards;
}
dialog.promo-dialog.closing::backdrop {
  animation: promo-fade 0.2s ease-in reverse forwards;
}
@keyframes promo-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes promo-out { to { opacity: 0; transform: translateY(8px) scale(0.99); } }
@keyframes promo-fade { from { opacity: 0; } }

.promo-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: var(--color-surface);
  color: var(--color-ink);
}
:is(.promo-dialog, .promo-preview) {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
:is(.promo-dialog, .promo-preview) .promo-media {
  aspect-ratio: 16 / 10;
  background: var(--color-cream-2);
}
:is(.promo-dialog, .promo-preview) .promo-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:is(.promo-dialog, .promo-preview) .promo-body {
  padding: 36px 32px 24px;
}
/* Without an image a thin clay rule carries the brand. */
:is(.promo-dialog, .promo-preview):not(.has-image) .promo-body {
  border-top: 3px solid var(--color-clay);
  padding-top: 44px;
}
:is(.promo-dialog, .promo-preview) .promo-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
}
:is(.promo-dialog, .promo-preview) .promo-close:hover:not(:disabled) {
  background: var(--color-cream-2);
  color: var(--color-slate-deep);
  border-color: transparent;
}
:is(.promo-dialog, .promo-preview).has-image .promo-close {
  background: rgba(255, 253, 249, 0.92);
  color: var(--color-slate-deep);
}
:is(.promo-dialog, .promo-preview) .promo-close svg {
  width: 18px;
  height: 18px;
}
:is(.promo-dialog, .promo-preview) .promo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 14px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
:is(.promo-dialog, .promo-preview) .promo-label {
  color: var(--color-clay);
}
:is(.promo-dialog, .promo-preview) .promo-label + span::before {
  content: '·';
  margin-right: 12px;
  color: var(--color-line);
}
:is(.promo-dialog, .promo-preview) h2 {
  margin: 0;
  padding-right: 24px;
  color: var(--color-slate-deep);
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
:is(.promo-dialog, .promo-preview) .promo-message {
  margin: 14px 0 0;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.6;
}
:is(.promo-dialog, .promo-preview) .promo-actions {
  display: grid;
  gap: 6px;
  margin-top: 28px;
}
:is(.promo-dialog, .promo-preview) .promo-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--color-clay);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
:is(.promo-dialog, .promo-preview) .promo-cta:hover {
  background: var(--color-clay-deep);
}
:is(.promo-dialog, .promo-preview) .promo-cta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
:is(.promo-dialog, .promo-preview) .promo-cta:hover svg {
  transform: translateX(3px);
}
:is(.promo-dialog, .promo-preview) .promo-dismiss {
  height: 44px;
  min-height: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font-size: 14.5px;
  font-weight: 500;
}
:is(.promo-dialog, .promo-preview) .promo-dismiss:hover:not(:disabled) {
  background: none;
  color: var(--color-slate-deep);
  border-color: transparent;
}
:is(.promo-dialog, .promo-preview) :is(.promo-cta, .promo-dismiss, .promo-close):focus-visible {
  outline: 2px solid var(--color-clay);
  outline-offset: 2px;
}

/* Wide screens: centred, with image and copy side by side. */
@media (min-width: 761px) {
  dialog.promo-dialog:not(.cart-drawer) {
    margin: auto;
  }
  dialog.promo-dialog.has-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(820px, calc(100vw - 48px));
  }
  dialog.promo-dialog.has-image[open] {
    display: grid;
  }
  dialog.promo-dialog.has-image .promo-media {
    aspect-ratio: auto;
    min-height: 460px;
  }
  dialog.promo-dialog.has-image .promo-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 44px 36px;
  }
  dialog.promo-dialog.has-image .promo-close {
    top: 14px;
    right: 14px;
    background: transparent;
    color: var(--color-muted);
  }
  dialog.promo-dialog.has-image h2 {
    font-size: 36px;
  }
}

/* Phones: a compact card centred on the page, settling in with a gentle scale. The
   backdrop deepens so the card holds focus; long messages stop at four lines. */
@media (max-width: 760px) {
  dialog.promo-dialog:not(.cart-drawer) {
    inset: 0;
    width: min(340px, calc(100vw - 40px));
    max-height: min(86dvh, 620px);
    margin: auto;
    border-radius: 20px;
    animation: promo-pop-in 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
  dialog.promo-dialog::backdrop {
    background: rgba(24, 28, 36, 0.64);
  }
  dialog.promo-dialog.closing {
    animation: promo-pop-out 0.18s ease-in forwards;
  }
  dialog.promo-dialog .promo-media {
    aspect-ratio: 16 / 9;
  }
  dialog.promo-dialog .promo-body {
    padding: 22px 20px 14px;
  }
  dialog.promo-dialog:not(.has-image) .promo-body {
    padding-top: 30px;
  }
  dialog.promo-dialog .promo-close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
  }
  dialog.promo-dialog .promo-close svg {
    width: 16px;
    height: 16px;
  }
  dialog.promo-dialog .promo-meta {
    margin-bottom: 10px;
    font-size: 11px;
  }
  dialog.promo-dialog h2 {
    padding-right: 0;
    font-size: 24px;
    line-height: 1.12;
  }
  dialog.promo-dialog:not(.has-image) h2 {
    padding-right: 28px;
  }
  dialog.promo-dialog .promo-message {
    display: -webkit-box;
    margin-top: 10px;
    overflow: hidden;
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
  dialog.promo-dialog .promo-actions {
    gap: 2px;
    margin-top: 20px;
  }
  dialog.promo-dialog .promo-cta {
    height: 48px;
    padding: 0 18px;
    font-size: 15px;
  }
  dialog.promo-dialog .promo-dismiss {
    height: 40px;
    font-size: 14px;
  }
}
@keyframes promo-pop-in { from { opacity: 0; transform: scale(0.94); } }
@keyframes promo-pop-out { to { opacity: 0; transform: scale(0.97); } }
@media (prefers-reduced-motion: reduce) {
  dialog.promo-dialog,
  dialog.promo-dialog::backdrop {
    animation: none;
  }
}

/* Settings → Promotion: the form beside a sticky live preview. */
.promo-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 28px;
  align-items: start;
}
.promo-settings label small,
.promo-settings .field-label small {
  display: inline;
  margin-left: 4px;
  font-weight: 400;
}
.promo-settings .field-hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.promo-settings .field-label {
  display: block;
  margin-bottom: 6px;
}
.promo-preview-pane {
  position: sticky;
  top: calc(var(--workspace-header-height, 0px) + 24px);
  display: grid;
  gap: 12px;
}
.promo-preview h2 {
  font-size: 26px;
}
.promo-preview .promo-body {
  padding: 28px 24px 18px;
}
.promo-preview:not(.has-image) .promo-body {
  padding-top: 36px;
}
.promo-preview .promo-message {
  font-size: 14.5px;
}
.promo-preview .promo-cta {
  height: 48px;
  font-size: 15px;
}
.promo-status {
  display: grid;
  gap: 18px;
}
.promo-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}
.promo-stats > div {
  padding: 14px 0 0;
}
.promo-stats > div + div {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.promo-stats dt {
  color: var(--muted);
  font-size: 12px;
}
.promo-stats dd {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.promo-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.promo-state::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b9b0a6;
}
.promo-state.live::before {
  background: var(--color-success);
}
.promo-state.ended::before {
  background: var(--color-clay);
}
.promo-image-field {
  display: flex;
  align-items: center;
  gap: 16px;
}
.promo-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 112px;
  height: 70px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--color-cream-2);
  color: var(--muted);
}
.promo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-thumb svg {
  width: 20px;
  height: 20px;
}
.promo-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.promo-image-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.promo-image-actions svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 1100px) {
  .promo-settings {
    grid-template-columns: 1fr;
  }
  .promo-preview-pane {
    position: static;
    max-width: 420px;
  }
}
@media (max-width: 600px) {
  .promo-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .promo-stats > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

/* The menu backdrop is a <button>; keep its tint instead of the global button hover fill. */
button.navigation-backdrop:hover:not(:disabled) {
  background: #232f3c3b;
  border-color: transparent;
  filter: none;
}
@media (max-width: 760px) {
  body.has-tabbar button.navigation-backdrop:hover:not(:disabled) {
    background: rgba(35, 47, 60, 0.18);
  }
}

/* ==========================================================================
   Settings → Promotion → Email affiliates (settings.js renderBroadcastSection):
   the composer beside a live email preview, then recent sends with progress.
   ========================================================================== */
.broadcast {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.broadcast-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.broadcast-head h2 {
  margin: 0 0 4px;
}
.broadcast-head p {
  margin: 0;
  color: var(--muted);
}
.broadcast-audience {
  display: grid;
  justify-items: end;
  text-align: right;
}
.broadcast-audience strong {
  font-size: 28px;
  font-weight: 650;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.broadcast-audience span {
  color: var(--muted);
  font-size: 13px;
}
.broadcast-audience small {
  color: var(--muted);
  font-size: 12px;
}
.broadcast-notice {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-clay);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.broadcast-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 28px;
  align-items: start;
}
.broadcast .field-hint {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.broadcast .field-hint code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-cream-2);
  font-size: 11.5px;
}
.broadcast textarea {
  min-height: 200px;
  line-height: 1.6;
  resize: vertical;
}
.broadcast-button-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.broadcast .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.broadcast .actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.broadcast .actions svg {
  width: 16px;
  height: 16px;
}
.broadcast-preview-pane {
  position: sticky;
  top: calc(var(--workspace-header-height, 0px) + 24px);
  display: grid;
  gap: 12px;
}

/* The preview mirrors the sent email's layout and colours. */
.email-preview {
  padding: 22px 18px 18px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-cream);
}
.email-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 2px 14px;
  color: var(--color-slate);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.email-brand img {
  width: 22px;
  height: 22px;
}
.email-card {
  padding: 26px 22px 20px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-surface);
  overflow-wrap: break-word;
}
.email-card h4 {
  margin: 0 0 14px;
  color: var(--color-slate-deep);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
}
.email-card p {
  margin: 0 0 12px;
  color: var(--color-ink);
  font-size: 14px;
  line-height: 1.65;
}
.email-preview a.email-button {
  display: inline-block;
  margin-top: 8px;
  padding: 11px 18px;
  border-radius: 9px;
  background: var(--color-clay);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.email-preview a.email-button:hover {
  color: var(--color-white);
}
.email-footer {
  margin: 14px 2px 0;
  color: #8a7f75;
  font-size: 11.5px;
  line-height: 1.55;
}

/* Recent sends. */
.broadcast-history {
  margin-top: 28px;
  padding: 20px 20px 8px;
}
.broadcast-history h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.broadcast-history ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.broadcast-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.broadcast-item:first-child {
  border-top: 0;
}
.broadcast-item-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.broadcast-item-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.broadcast-item-main small,
.broadcast-counts {
  color: var(--muted);
  font-size: 12.5px;
}
.broadcast-counts {
  grid-column: 1;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.broadcast-item .broadcast-cancel {
  grid-column: 2;
  grid-row: 3;
  min-height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
}
.broadcast-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
}
.broadcast-state::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b9b0a6;
}
.broadcast-state.sending {
  color: var(--color-clay);
}
.broadcast-state.sending::before {
  background: var(--color-clay);
  animation: broadcast-pulse 1.4s ease-in-out infinite;
}
.broadcast-state.sent {
  color: var(--color-success);
}
.broadcast-state.sent::before {
  background: var(--color-success);
}
.broadcast-state.cancelled {
  color: var(--muted);
}
@keyframes broadcast-pulse { 50% { opacity: 0.35; } }
.broadcast-progress {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-cream-2);
}
.broadcast-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-clay);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.broadcast-empty {
  padding: 10px 0 14px;
  color: var(--muted);
  font-size: 13.5px;
}
@media (max-width: 1100px) {
  .broadcast-grid {
    grid-template-columns: 1fr;
  }
  .broadcast-preview-pane {
    position: static;
    max-width: 480px;
  }
}
@media (max-width: 600px) {
  .broadcast-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .broadcast-audience {
    justify-items: start;
    text-align: left;
  }
  .broadcast-button-fields {
    grid-template-columns: 1fr;
  }
  .broadcast .actions button {
    flex: 1 1 100%;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .broadcast-state.sending::before {
    animation: none;
  }
  .broadcast-progress span {
    transition: none;
  }
}

/* Permanent-delete confirmation (core.js confirmPermanentDelete). */
.delete-summary h3 {
  margin: 18px 0 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.delete-summary ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}
.delete-summary li + li {
  margin-top: 4px;
}
.delete-lead {
  margin: 0;
  color: var(--color-danger);
  font-weight: 600;
}
.delete-typed {
  margin: 20px 0 0;
}
.delete-typed input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

/* Guest checkout: the registered-number check's answer under the phone field. */
.recipient-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -10px 0 16px;
  color: var(--color-success);
  font-size: 13px;
  font-weight: 600;
}
.recipient-ok svg {
  width: 15px;
  height: 15px;
}
#recipientArea #recipientStatus .notice {
  margin: -8px 0 16px;
}

/* Admin wallet adjustment: the ₵ sign and the amount read as one field, with the
   workspace's own focus ring on the outer edge only. The workspace input rules are
   very specific, so the inner input is addressed by its id to stay borderless. */
.wallet-amount-input {
  border: 1px solid var(--color-field-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wallet-amount-input:hover {
  border-color: #d3c4ad;
}
.wallet-amount-input:focus-within {
  outline: none;
  border-color: var(--color-slate);
  box-shadow: 0 0 0 3px rgba(62, 77, 104, 0.14);
}
.wallet-amount-input > span {
  padding-left: 16px;
  color: var(--muted);
  font-size: 20px;
  font-weight: 600;
}
#adjustAmount,
#adjustAmount:hover,
#adjustAmount:focus {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
#adjustAmount::-webkit-inner-spin-button,
#adjustAmount::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* Admin Wallets list: each affiliate's balance. */
.wallet-balance-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wallet-balance-cell.negative {
  color: var(--color-danger);
}

/* The promotion popup has its own entrance (promo-in / promo-pop-in); opt out of the
   generic dialog transition so the two never run together. */
dialog.promo-dialog:not(.cart-drawer),
dialog.promo-dialog:not(.cart-drawer)[open] {
  opacity: 1;
  transform: none;
  transition: none;
}
dialog.promo-dialog:not(.cart-drawer)::backdrop,
dialog.promo-dialog:not(.cart-drawer)[open]::backdrop {
  opacity: 1;
  transition: none;
}

/* Premium Affiliate badge: a soft gold pill with a star, used wherever the tier's name appears. */
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border: 1px solid #e3c47e;
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(135deg, #fbf0d2 0%, #f3dca0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(122, 83, 7, 0.12);
  color: #6b4a0e;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}
.premium-badge svg {
  flex: none;
  width: 11px;
  height: 11px;
  fill: #b8860b;
}
/* In the account menu the badge sits under the name in place of the plain role text. */
.account-name small .premium-badge,
#menuAccountRole .premium-badge {
  margin-top: 2px;
  font-size: 10.5px;
  padding: 2px 7px 2px 5px;
}

/* Premium upgrade rules (Settings → Referrals) and the affiliate's progress card (Invite & Earn). */
.premium-rules {
  margin-top: 28px;
}
.premium-rules h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.field-note {
  margin: -12px 0 0;
}
.premium-card {
  margin-bottom: 16px;
  border-color: #ecd9a8;
  background: linear-gradient(135deg, #fffaf0 0%, var(--color-surface) 60%);
}
.premium-card.earned {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.premium-card p {
  margin: 0;
}
.premium-card-head {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.premium-goals {
  display: grid;
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.premium-goal-text {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13.5px;
}
.premium-goal-text strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.premium-goal-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-line-soft);
  overflow: hidden;
}
.premium-goal-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e3c47e, #b8860b);
}
.premium-goals li.done .premium-goal-text strong {
  color: var(--color-success);
}