:root {
  --black: #fffdf8;
  --black-soft: #f7f2eb;
  --surface: #ffffff;
  --surface-raised: #f8f2e9;
  --surface-border: #d7c2a3;
  --input-surface: #ffffff;
  --input-border: #b99b72;
  --input-border-hover: #8b6b45;
  --white: #151311;
  --muted: #62584c;
  --muted-dark: #7b6b58;
  --link: #1f78a8;
  --link-hover: #145b82;
  --lime: #b58249;
  --lime-light: #8a5d2c;
  --lime-dark: #69431f;
  --danger: #ff6b6b;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow: 0 24px 80px rgb(67 49 30 / 12%);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Customer pallet hold checkout */
.customer-purchase-pallets {
  display: grid;
  gap: 10px;
}

.customer-purchase-pallet {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: rgb(0 0 0 / 24%);
}

.customer-purchase-pallet-removable {
  grid-template-columns: 108px minmax(0, 1fr) auto 88px;
}

.customer-purchase-photo {
  position: relative;
  display: grid;
  width: 108px;
  height: 82px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(217 224 213 / 18%);
  border-radius: 10px;
  color: var(--muted);
  background: #ffffff;
}

.customer-purchase-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-purchase-photo-empty svg {
  width: 31px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.customer-purchase-remove-form {
  align-self: stretch;
  min-width: 0;
}

.customer-purchase-remove-button {
  width: 100%;
  height: 100%;
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgb(255 122 122 / 58%);
  border-radius: 10px;
  color: #fff;
  background: rgb(105 21 21 / 42%);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.customer-purchase-remove-button:hover,
.customer-purchase-remove-button:focus-visible {
  border-color: #ff9a9a;
  background: rgb(142 29 29 / 64%);
  outline: 3px solid rgb(255 104 104 / 18%);
}

.customer-purchase-pallet-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.customer-purchase-pallet-copy > span {
  color: var(--lime);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.customer-purchase-pallet-copy > strong {
  overflow-wrap: anywhere;
  font-size: clamp(1.55rem, 6vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.customer-purchase-pallet-copy > small {
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-purchase-pallet-price {
  color: var(--lime-light);
  font-size: 0.86rem;
  white-space: nowrap;
}

.invoice-card-summary {
  min-width: 0;
}

.invoice-pallet-lines {
  margin-top: 13px;
}

.invoice-pallet-lines .customer-purchase-pallet {
  grid-template-columns: 76px minmax(0, 1fr) auto;
}

.invoice-pallet-lines .customer-purchase-photo {
  width: 76px;
  height: 59px;
}

.invoice-pallet-lines .customer-purchase-pallet-copy > strong {
  font-size: 1.35rem;
}

.fulfillment-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fulfillment-choice legend {
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 1px;
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 760;
}

.fulfillment-choice label {
  position: relative;
}

.fulfillment-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fulfillment-choice label > span {
  display: grid;
  min-height: 50px;
  place-items: center;
  border: 1px solid var(--input-border);
  border-radius: 11px;
  color: var(--muted);
  background: var(--input-surface);
  cursor: pointer;
  font-size: 0.73rem;
  font-weight: 820;
}

.fulfillment-choice input:checked + span {
  border-color: var(--lime);
  color: #050805;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.fulfillment-choice input:focus-visible + span {
  outline: 3px solid rgb(214 185 140 / 20%);
  outline-offset: 2px;
}

.pickup-fulfillment-fields {
  display: grid;
  gap: 10px;
}

.pickup-fulfillment-fields[hidden],
.delivery-request-notice[hidden] {
  display: none;
}

.delivery-request-notice {
  padding: 13px;
  border: 1px solid rgb(214 185 140 / 34%);
  border-radius: 11px;
  background: rgb(214 185 140 / 8%);
}

.delivery-request-notice strong {
  color: var(--lime-light);
  font-size: 0.73rem;
}

.delivery-request-notice p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.5;
}

.lock-order-dialog {
  width: min(92vw, 520px);
  max-width: none;
  padding: 0;
  border: 1px solid rgb(214 185 140 / 44%);
  border-radius: 20px;
  color: var(--white);
  background: #ffffff;
  box-shadow: 0 28px 90px rgb(0 0 0 / 70%);
}

.lock-order-dialog::backdrop {
  background: rgb(0 0 0 / 78%);
  backdrop-filter: blur(4px);
}

.lock-order-dialog-card {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.lock-order-dialog-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  background: rgb(214 185 140 / 12%);
  font-size: 1.35rem;
}

.lock-order-dialog .eyebrow {
  margin: 2px 0 -5px;
}

.lock-order-dialog h2 {
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  letter-spacing: -0.04em;
}

.lock-order-dialog-card > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

.lock-order-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 4px;
}

.lock-order-dialog-actions .button {
  width: 100%;
}

.invoice-fulfillment-label {
  display: block;
  margin-top: 5px;
  color: var(--lime-light);
  font-size: 0.64rem;
}

.sold-ready-status {
  margin: 12px 17px 0;
  padding: 11px 13px;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: 11px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 7%);
  font-size: 0.68rem;
  font-weight: 760;
}

@media (max-width: 560px) {
  .customer-purchase-pallet {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .customer-purchase-pallet-removable {
    grid-template-columns: 92px minmax(0, 1fr) 78px;
    column-gap: 10px;
  }

  .customer-purchase-photo {
    width: 92px;
    height: 74px;
  }

  .customer-purchase-pallet-removable .customer-purchase-photo {
    grid-row: 1 / span 2;
  }

  .customer-purchase-pallet-price {
    grid-column: 2;
    justify-self: start;
    margin-top: -18px;
  }

  .customer-purchase-pallet-removable .customer-purchase-pallet-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .customer-purchase-pallet-removable .customer-purchase-pallet-price {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: -16px;
  }

  .customer-purchase-pallet-removable .customer-purchase-remove-form {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .invoice-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .invoice-card-payment {
    width: 100%;
    justify-items: stretch;
  }

  .invoice-card-actions {
    justify-content: stretch;
  }

  .invoice-card-actions > *,
  .invoice-card-actions .button {
    flex: 1 1 auto;
  }
}

/* Compact, readable seller customer profile */
.customer-detail-page .customer-detail-heading p {
  color: #62584c;
  font-size: 0.86rem;
  line-height: 1.5;
}

.customer-detail-page .customer-detail-summary span {
  color: #62584c;
  font-size: 0.74rem;
}

.customer-detail-page .customer-detail-summary strong {
  color: #f8fbf6;
  font-size: 1.32rem;
}

.customer-detail-sections {
  display: grid;
  gap: 11px;
  margin-top: 16px;
}

.customer-detail-accordion {
  overflow: hidden;
  border: 1px solid #344034;
  border-radius: 19px;
  background:
    linear-gradient(145deg, rgb(214 185 140 / 3%), transparent 42%),
    #ffffff;
  box-shadow: 0 12px 28px rgb(0 0 0 / 12%);
}

.customer-detail-accordion[open] {
  border-color: rgb(214 185 140 / 46%);
  background:
    linear-gradient(145deg, rgb(214 185 140 / 5%), transparent 42%),
    #ffffff;
}

.customer-detail-accordion-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 13px;
  min-height: 96px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.customer-detail-accordion-summary::-webkit-details-marker {
  display: none;
}

.customer-detail-accordion-summary::marker {
  content: "";
}

.customer-detail-accordion-summary:hover {
  background: rgb(214 185 140 / 4%);
}

.customer-detail-accordion-summary:focus-visible {
  outline: 3px solid rgb(214 185 140 / 35%);
  outline-offset: -3px;
}

.customer-detail-accordion-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 42%);
  border-radius: 14px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
}

.customer-detail-accordion-icon.is-gold {
  border-color: rgb(255 201 87 / 42%);
  color: #ffd77f;
  background: rgb(255 201 87 / 8%);
}

.customer-detail-accordion-icon svg,
.customer-detail-accordion-toggle svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.customer-detail-accordion-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.customer-detail-accordion-copy > small {
  color: #62584c;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-detail-accordion-copy > strong {
  color: var(--white);
  font-size: 1.08rem;
  line-height: 1.2;
}

.customer-detail-accordion-copy > span {
  overflow: hidden;
  color: #62584c;
  font-size: 0.82rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-detail-summary-state {
  padding: 7px 9px;
  border: 1px solid #596359;
  border-radius: 999px;
  color: #62584c;
  background: #ffffff;
  font-size: 0.68rem;
  font-weight: 850;
  white-space: nowrap;
}

.customer-detail-summary-state.is-enabled {
  border-color: rgb(214 185 140 / 48%);
  color: var(--lime-light);
  background: rgb(214 185 140 / 9%);
}

.customer-detail-accordion-toggle {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #465146;
  border-radius: 50%;
  color: #62584c;
  background: #ffffff;
}

.customer-detail-accordion-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 160ms ease;
}

.customer-detail-accordion[open]
  > .customer-detail-accordion-summary
  .customer-detail-accordion-toggle {
  border-color: rgb(214 185 140 / 45%);
  color: var(--lime-light);
}

.customer-detail-accordion[open]
  > .customer-detail-accordion-summary
  .customer-detail-accordion-toggle svg {
  transform: rotate(180deg);
}

.customer-detail-accordion-content {
  padding: 6px 18px 19px;
  border-top: 1px solid #344034;
  background: rgb(255 255 255 / 28%);
}

.customer-detail-accordion-content .customer-info-list {
  margin: 0;
}

.customer-detail-accordion-content .customer-info-list > div {
  grid-template-columns: minmax(140px, 0.72fr) minmax(0, 1.28fr);
  gap: 20px;
  padding: 16px 2px;
  border-top-color: #303a30;
}

.customer-detail-accordion-content .customer-info-list > div:first-child {
  border-top: 0;
}

.customer-detail-accordion-content .customer-info-list dt {
  color: #62584c;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.customer-detail-accordion-content .customer-info-list dd {
  color: var(--white);
  font-size: 0.94rem;
  line-height: 1.58;
}

.customer-detail-accordion-content .customer-info-list dd strong {
  color: var(--white);
}

.customer-detail-accordion-content .customer-info-list a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.customer-detail-accordion-content .customer-info-empty {
  margin: 13px 0 0;
  color: #62584c;
  font-size: 0.86rem;
}

.customer-detail-permission-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-top: 18px;
}

.customer-detail-permission-content > p {
  margin: 0;
  color: #62584c;
  font-size: 0.86rem;
  line-height: 1.62;
}

.customer-detail-permission-content form,
.customer-detail-permission-content form .button {
  min-width: 220px;
}

.customer-detail-accordion-content.customer-notes-card {
  padding-top: 18px;
}

.customer-detail-accordion-content.customer-notes-card form {
  margin-top: 0;
}

.customer-detail-accordion-content.customer-notes-card label {
  color: #62584c;
  font-size: 0.78rem;
}

.customer-detail-accordion-content.customer-notes-card textarea {
  font-size: 0.9rem;
}

.customer-detail-accordion-content.customer-notes-card form small {
  color: #62584c;
  font-size: 0.72rem;
}

.customer-detail-accordion-content.customer-invoice-history {
  margin-top: 0;
  padding-top: 18px;
}

.customer-detail-accordion-content .customer-invoice-list {
  margin-top: 0;
}

.customer-detail-accordion-content .customer-invoice-list article {
  padding: 14px 15px;
}

.customer-detail-accordion-content .customer-invoice-list article strong {
  font-size: 0.86rem;
}

.customer-detail-accordion-content
  .customer-invoice-list
  article
  > div
  > span {
  color: #62584c;
  font-size: 0.72rem;
}

@media (max-width: 600px) {
  .customer-detail-accordion-summary {
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    gap: 11px;
    min-height: 91px;
    padding: 13px 14px;
  }

  .customer-detail-accordion-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .customer-detail-summary-state {
    grid-column: 2;
    justify-self: start;
    margin-top: 3px;
  }

  .customer-detail-permission .customer-detail-accordion-icon {
    grid-row: 1 / span 2;
  }

  .customer-detail-permission .customer-detail-accordion-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .customer-detail-accordion-toggle {
    grid-column: 3;
    grid-row: 1;
  }

  .customer-detail-accordion-copy > strong {
    font-size: 1rem;
  }

  .customer-detail-accordion-copy > span {
    font-size: 0.8rem;
  }

  .customer-detail-accordion-content {
    padding: 5px 15px 17px;
  }

  .customer-detail-accordion-content .customer-info-list > div {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 15px 1px;
  }

  .customer-detail-accordion-content .customer-info-list dt {
    font-size: 0.76rem;
  }

  .customer-detail-accordion-content .customer-info-list dd {
    font-size: 0.94rem;
  }

  .customer-detail-permission-content {
    grid-template-columns: 1fr;
  }

  .customer-detail-permission-content form,
  .customer-detail-permission-content form .button {
    width: 100%;
    min-width: 0;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  background: var(--black);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--white);
  background:
    radial-gradient(circle at 82% 14%, rgb(214 185 140 / 17%), transparent 28rem),
    radial-gradient(circle at 8% 88%, rgb(120 200 240 / 8%), transparent 32rem),
    var(--black);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

.landing-shell {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  padding:
    calc(18px + var(--safe-top))
    20px
    calc(20px + var(--safe-bottom));
  overflow: hidden;
}

.public-nav,
.portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.public-nav {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.mini-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-pulse,
.status-dot {
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 18px rgb(214 185 140 / 72%);
}

.brand-pulse {
  width: 9px;
  height: 9px;
}

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 760;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.button:active {
  transform: scale(0.98);
}

.button-small {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.84rem;
}

.button-wide {
  width: 100%;
  min-height: 56px;
  padding: 0 24px;
}

/*
 * Page action rule: one primary action fills its row. Add
 * .page-action-row-paired only when two related actions belong side by side.
 */
.page-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  gap: 12px;
}

.page-action-row-paired {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-action-row > *,
.page-action-row > .button,
.page-action-row > form,
.page-action-row > form > .button {
  width: 100%;
  min-width: 0;
}

.button-ghost,
.button-secondary {
  border-color: #dce3d8;
  color: #10150f;
  background: #dce3d8;
  box-shadow: 0 10px 26px rgb(0 0 0 / 18%);
}

.button-ghost:hover,
.button-secondary:hover {
  border-color: #eff5eb;
  background: #eff5eb;
  transform: translateY(-1px);
}

.button-primary {
  color: #071006;
  background: linear-gradient(135deg, var(--lime-light), var(--lime));
  box-shadow: 0 16px 36px rgb(128 96 64 / 22%);
}

.button-primary:hover {
  background: linear-gradient(135deg, #f4dfbd, #caa77a);
  transform: translateY(-1px);
}

.button-primary span {
  font-size: 1.25rem;
}

.button-danger {
  border-color: rgb(255 107 107 / 58%);
  color: #fff;
  background: linear-gradient(135deg, #d83b3b, #a91f1f);
  box-shadow: 0 14px 32px rgb(145 24 24 / 25%);
}

.button-danger:hover {
  border-color: #ff9a9a;
  background: linear-gradient(135deg, #eb4b4b, #bc2929);
  transform: translateY(-1px);
}

.hero {
  display: grid;
  width: 100%;
  max-width: 1180px;
  flex: 1;
  align-items: center;
  gap: 28px;
  margin: 0 auto;
  padding: 42px 0 30px;
}

.hero > *,
.hero-copy,
.auth-card,
.auth-form,
.field,
.password-control {
  min-width: 0;
}

.hero-logo-frame {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 230px;
  place-items: center;
  padding: 22px 12px;
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgb(255 255 255 / 2%), rgb(255 255 255 / 0%)),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 31px,
      rgb(255 255 255 / 2.2%) 32px
    );
  overflow: hidden;
}

.hero-logo-frame::after {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--lime);
  content: "";
  filter: blur(100px);
  opacity: 0.14;
}

.hero-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 430px);
  max-width: 100%;
  height: auto;
}

.frame-corner {
  position: absolute;
  z-index: 0;
  width: 36px;
  height: 36px;
  pointer-events: none;
}

.frame-corner-top {
  top: 14px;
  left: 14px;
  border-top: 2px solid var(--lime);
  border-left: 2px solid var(--lime);
}

.frame-corner-bottom {
  right: 14px;
  bottom: 14px;
  border-right: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
}

.hero-copy {
  max-width: 590px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--lime);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow span {
  width: 24px;
  height: 2px;
  background: currentColor;
}

.hero-copy h1,
.welcome-block h1 {
  margin: 0;
  font-size: clamp(2.3rem, 12vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}

.hero-summary,
.welcome-block > p:last-child {
  max-width: 38rem;
  margin: 22px 0 28px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.private-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px 0 0;
  color: var(--muted-dark);
  font-size: 0.76rem;
}

.status-dot {
  width: 7px;
  height: 7px;
}

.landing-footer {
  display: flex;
  width: 100%;
  max-width: 1180px;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  color: var(--muted-dark);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.footer-rule {
  width: 34px;
  height: 1px;
  background: var(--surface-border);
}

.storefront-visit {
  display: grid;
  width: 100%;
  max-width: 1180px;
  flex: 1;
  align-items: center;
  gap: 26px;
  margin: 0 auto;
  padding: 54px 0;
}

.storefront-visit-logo {
  display: grid;
  min-height: 260px;
  place-items: center;
  padding: 28px;
  border: 1px solid rgb(214 185 140 / 24%);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle, rgb(214 185 140 / 11%), transparent 65%),
    rgb(255 255 255 / 2%);
}

.storefront-visit-logo img {
  width: min(100%, 430px);
  height: auto;
}

.storefront-visit-copy {
  min-width: 0;
}

.storefront-visit-copy h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(2.65rem, 11vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.storefront-visit-summary {
  max-width: 640px;
  margin: 22px 0 0;
  color: #62584c;
  font-size: 1.08rem;
  line-height: 1.65;
}

.storefront-address {
  display: grid;
  max-width: 620px;
  gap: 4px;
  margin-top: 26px;
  padding: 20px;
  border: 1px solid rgb(214 185 140 / 35%);
  border-radius: var(--radius-md);
  color: #62584c;
  background: rgb(214 185 140 / 7%);
  font-style: normal;
  line-height: 1.5;
}

.storefront-address strong {
  margin-bottom: 4px;
  color: var(--lime-light);
  font-size: 1.05rem;
}

.storefront-return-time {
  display: flex;
  max-width: 620px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  margin-top: 14px;
  padding: 16px 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.storefront-return-time span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.storefront-return-time strong {
  color: var(--white);
}

.public-inventory {
  width: 100%;
  max-width: 1180px;
  margin: 16px auto 62px;
}

.public-inventory-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--surface-border);
}

.public-inventory-heading .eyebrow {
  margin-bottom: 9px;
}

.public-inventory-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3.7rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.public-inventory-count {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgb(214 185 140 / 32%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
  font-size: 0.74rem;
  font-weight: 820;
}

.public-pallet-grid {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.public-pallet-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 18px 44px rgb(0 0 0 / 22%);
}

.public-pallet-photo {
  position: relative;
  min-height: 240px;
  background: #ffffff;
  overflow: hidden;
}

.public-pallet-photo > img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.public-pallet-photo > a {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 11px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  color: #62584c;
  background: rgb(255 255 255 / 84%);
  backdrop-filter: blur(10px);
  font-size: 0.68rem;
  font-weight: 760;
}

.public-pallet-photo > a:hover {
  border-color: var(--lime);
  color: var(--lime-light);
}

.public-pallet-photo-empty {
  display: grid;
  min-height: 280px;
  place-content: center;
  gap: 9px;
  color: var(--muted-dark);
  text-align: center;
}

.public-pallet-photo-empty span {
  color: rgb(214 185 140 / 42%);
  font-size: 3.2rem;
  font-weight: 920;
  letter-spacing: -0.08em;
}

.public-pallet-card-body {
  padding: 18px;
}

.public-pallet-card-body > p {
  margin: 0;
  color: var(--lime);
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.public-pallet-card-body h3 {
  margin: 8px 0 18px;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
}

.public-pallet-price {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid var(--surface-border);
}

.public-pallet-price span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
  text-transform: uppercase;
}

.public-pallet-price strong {
  color: var(--lime-light);
  font-size: 1.45rem;
}

.public-inventory-empty {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  padding: 34px 20px;
  border: 1px dashed var(--surface-border);
  border-radius: var(--radius-lg);
  color: var(--muted);
  text-align: center;
}

.public-inventory-empty strong {
  color: var(--white);
  font-size: 1.15rem;
}

.auth-page {
  display: grid;
  place-items: center;
}

.auth-shell {
  width: 100%;
  max-width: 520px;
  min-height: 100svh;
  padding:
    calc(22px + var(--safe-top))
    20px
    calc(28px + var(--safe-bottom));
}

.back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.auth-card {
  margin-top: 24px;
  padding: 26px 22px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 92%);
  box-shadow: var(--shadow);
}

.auth-header {
  margin-bottom: 24px;
}

.auth-logo {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  margin: -22px 0 18px;
}

.auth-header h1 {
  margin: 0;
  font-size: 2.25rem;
  letter-spacing: -0.045em;
}

.auth-header > p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.alert span {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
}

.alert p {
  margin: 1px 0 0;
  line-height: 1.45;
}

.alert-error {
  border: 1px solid rgb(255 107 107 / 28%);
  color: #ffd0d0;
  background: rgb(255 107 107 / 8%);
}

.alert-error span {
  color: var(--black);
  background: var(--danger);
}

.auth-form {
  display: grid;
  gap: 18px;
}

.field {
  display: grid;
  gap: 8px;
}

.field > span:first-child {
  color: #62584c;
  font-size: 0.78rem;
  font-weight: 740;
}

.field input {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--white);
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  cursor: text;
  padding: 0 15px;
}

.field input:hover {
  border-color: var(--input-border-hover);
}

.field input:focus {
  border-color: var(--lime);
  outline: 0;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 13%);
}

.password-control {
  position: relative;
  display: block;
}

.password-control input {
  padding-right: 68px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  min-width: 54px;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  color: var(--lime);
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 800;
  transform: translateY(-50%);
}

.auth-help {
  margin: 22px 0 0;
  color: var(--muted-dark);
  font-size: 0.76rem;
  text-align: center;
}

.portal-page {
  background:
    linear-gradient(180deg, rgb(214 185 140 / 4%), transparent 260px),
    var(--black);
}

.portal-shell {
  width: 100%;
  min-height: 100svh;
  padding-bottom: var(--safe-bottom);
}

.portal-header {
  min-height: calc(72px + var(--safe-top));
  padding: calc(10px + var(--safe-top)) 18px 10px;
  border-bottom: 1px solid var(--surface-border);
  background: rgb(255 255 255 / 88%);
  backdrop-filter: blur(16px);
}

.portal-brand {
  display: flex;
  width: 84px;
  height: 52px;
  align-items: center;
  overflow: visible;
}

.portal-brand img {
  display: block;
  width: 84px;
  height: auto;
}

.portal-menu {
  position: relative;
  z-index: 30;
}

.menu-button {
  display: grid;
  width: 44px;
  height: 44px;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--white);
  background: transparent;
  cursor: pointer;
}

.menu-button:hover,
.menu-button[aria-expanded="true"] {
  color: var(--lime);
  background: transparent;
}

.menu-button span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

.menu-button[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-button[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.portal-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(290px, calc(100vw - 36px));
  padding: 10px;
  border: 1px solid rgb(214 185 140 / 24%);
  border-radius: 18px;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 24px 70px rgb(0 0 0 / 58%);
}

.portal-menu-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid var(--surface-border);
}

.portal-menu-heading span {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portal-menu-heading small {
  max-width: 150px;
  color: var(--muted);
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-menu-links {
  display: grid;
  gap: 4px;
  padding: 8px 0;
}

.portal-menu-links-admin > a:not(.portal-menu-pinned-link) {
  display: none;
}

.portal-menu-pinned-link {
  border: 1px solid transparent !important;
}

.portal-menu-pinned-link.active {
  border-color: rgb(214 185 140 / 22%) !important;
}

.portal-menu-groups {
  display: grid;
  gap: 7px;
  margin: 2px 0 5px;
  padding: 7px 0;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}

.portal-menu-group {
  overflow: hidden;
  border: 1px solid rgb(214 185 140 / 14%);
  border-radius: 13px;
  background: rgb(255 255 255 / 2%);
}

.portal-menu-group > summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: #62584c;
  list-style: none;
  cursor: pointer;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.portal-menu-group > summary::-webkit-details-marker {
  display: none;
}

.portal-menu-group > summary:hover,
.portal-menu-group[open] > summary {
  color: var(--white);
  background: rgb(214 185 140 / 7%);
}

.portal-menu-group-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 10px;
  color: var(--lime);
  background: rgb(214 185 140 / 8%);
}

.portal-menu-group-icon svg {
  width: 18px;
  height: 18px;
}

.portal-menu-group-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.portal-menu-group-copy strong {
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.15;
}

.portal-menu-group-copy small {
  color: #899485;
  font-size: 0.61rem;
  line-height: 1.2;
}

.portal-menu-chevron {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  color: #8d9889;
  transition: transform 160ms ease;
}

.portal-menu-group[open] .portal-menu-chevron {
  transform: rotate(180deg);
}

.portal-menu-group-links {
  display: grid;
  gap: 2px;
  padding: 3px 6px 7px 14px;
  border-top: 1px solid rgb(214 185 140 / 10%);
}

.portal-menu-group-links a {
  min-height: 42px;
  padding-right: 9px;
  padding-left: 9px;
  font-size: 0.75rem;
}

.portal-menu-group-links a::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: #536050;
  content: "";
}

.portal-menu-group-links a.active::before {
  background: var(--lime);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.portal-menu-group-links a > svg {
  display: none;
}

.portal-menu-links a,
.portal-menu-logout button {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  color: var(--link);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 740;
  text-align: left;
  cursor: pointer;
}

.portal-menu-links a:hover,
.portal-menu-links a.active,
.portal-menu-logout button:hover {
  color: var(--white);
  background: rgb(214 185 140 / 8%);
}

.portal-menu-links a.active {
  color: var(--lime-light);
}

.portal-menu-links svg,
.portal-menu-logout svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.portal-menu-logout {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--surface-border);
}

.icon-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--surface-border);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--lime-dark);
  color: var(--lime);
}

.icon-button svg,
.portal-nav-link svg,
.coming-soon-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.portal-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--surface-border);
  background: rgb(255 255 255 / 90%);
  overflow-x: auto;
  backdrop-filter: blur(16px);
}

.portal-nav-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
  white-space: nowrap;
}

.portal-nav-link.active {
  border-color: rgb(214 185 140 / 28%);
  color: #62584c;
  background: rgb(214 185 140 / 11%);
}

.portal-nav-link.disabled {
  color: #5e675c;
}

.portal-main {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 18px 54px;
}

.portal-main-actions {
  padding-top: 18px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.dashboard-lookup {
  margin-bottom: 16px;
  padding: 17px;
  border: 1px solid rgb(214 185 140 / 36%);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 10%), transparent 58%),
    var(--surface);
  box-shadow: 0 12px 30px rgb(0 0 0 / 20%);
}

.dashboard-lookup-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.dashboard-lookup-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--lime);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dashboard-lookup-heading h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.3rem, 6vw, 1.8rem);
  line-height: 1.08;
}

.dashboard-lookup-form {
  display: grid;
  gap: 10px;
}

.dashboard-lookup-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.dashboard-lookup-modes label {
  position: relative;
  cursor: pointer;
}

.dashboard-lookup-modes input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.dashboard-lookup-modes span {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 8px 12px;
  border: 1px solid #4d574c;
  border-radius: 12px;
  color: #62584c;
  background: #ffffff;
  font-size: 0.82rem;
  font-weight: 850;
}

.dashboard-lookup-modes input:checked + span {
  border-color: var(--lime);
  color: #102000;
  background: var(--lime-light);
}

.dashboard-lookup-modes input:focus-visible + span {
  outline: 3px solid rgb(166 255 98 / 35%);
  outline-offset: 2px;
}

.dashboard-lookup-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px auto;
  gap: 8px;
}

.dashboard-lookup-entry input,
.dashboard-sale-form select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #697368;
  border-radius: 12px;
  color: var(--white);
  background: #ffffff;
  font: inherit;
  font-size: 0.9rem;
}

.dashboard-lookup-entry input::placeholder {
  color: #62584c;
}

.dashboard-lookup-entry input:focus,
.dashboard-sale-form select:focus {
  border-color: var(--lime);
  outline: 3px solid rgb(214 185 140 / 14%);
}

.dashboard-lookup-entry button,
.dashboard-primary-action,
.dashboard-secondary-action {
  display: inline-grid;
  min-height: 46px;
  place-items: center;
  padding: 0 17px;
  border: 1px solid var(--lime);
  border-radius: 12px;
  color: #102000;
  background: var(--lime-light);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}

.dashboard-lookup-entry .dashboard-scan-button {
  width: 48px;
  padding: 0;
  border-color: rgb(214 185 140 / 70%);
  color: var(--lime-light);
  background: #ffffff;
}

.dashboard-scan-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-scan-button:hover,
.dashboard-scan-button:focus-visible {
  border-color: var(--lime-light);
  color: #102000;
  background: var(--lime-light);
}

.dashboard-scan-button:focus-visible,
.dashboard-camera-cancel:focus-visible {
  outline: 3px solid rgb(166 255 98 / 35%);
  outline-offset: 2px;
}

.dashboard-scan-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.dashboard-lookup-camera {
  padding: 10px;
  border: 1px solid rgb(214 185 140 / 42%);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%);
}

.dashboard-camera-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: #000;
}

.dashboard-camera-viewport video {
  display: block;
  width: 100%;
  min-height: 190px;
  max-height: 48svh;
  object-fit: cover;
}

.dashboard-camera-frame {
  position: absolute;
  top: 32%;
  right: 10%;
  left: 10%;
  height: 36%;
  border: 2px solid var(--lime-light);
  border-radius: 10px;
  box-shadow: 0 0 0 999px rgb(0 0 0 / 38%);
  pointer-events: none;
}

.dashboard-camera-frame::after {
  position: absolute;
  right: 8px;
  left: 8px;
  height: 2px;
  border-radius: 99px;
  background: var(--lime-light);
  box-shadow: 0 0 12px rgb(166 255 98 / 90%);
  content: "";
  animation: dashboard-barcode-scan 1.6s ease-in-out infinite alternate;
}

@keyframes dashboard-barcode-scan {
  from {
    top: 10%;
  }

  to {
    top: calc(90% - 2px);
  }
}

.dashboard-lookup-camera.is-camera-error .dashboard-camera-viewport {
  display: none;
}

.dashboard-lookup-camera p {
  margin: 10px 2px;
  color: #62584c;
  font-size: 0.75rem;
  line-height: 1.4;
}

.dashboard-camera-cancel {
  width: 100%;
  min-height: 44px;
  border: 1px solid #657064;
  border-radius: 11px;
  color: var(--white);
  background: #ffffff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 850;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-camera-frame::after {
    animation: none;
    top: 50%;
  }
}

.dashboard-secondary-action {
  border-color: #cfd6cd;
  color: #101510;
  background: #dfe5dc;
}

.dashboard-lookup-notice {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid #4d594b;
  border-radius: 11px;
  color: #62584c;
  background: #ffffff;
  font-size: 0.78rem;
  line-height: 1.45;
}

.dashboard-lookup-notice.is-success {
  border-color: rgb(214 185 140 / 56%);
  color: #62584c;
  background: rgb(60 117 18 / 24%);
}

.dashboard-lookup-notice.is-error {
  border-color: rgb(255 107 107 / 58%);
  color: #ffdada;
  background: rgb(164 29 29 / 24%);
}

.dashboard-search-results {
  display: grid;
  gap: 11px;
  margin-top: 13px;
}

.dashboard-pallet-result,
.dashboard-customer-result {
  overflow: hidden;
  padding: 13px;
  border: 1px solid #344033;
  border-radius: 15px;
  background: #ffffff;
}

.dashboard-result-summary {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.dashboard-result-summary > img,
.dashboard-result-placeholder {
  width: 58px;
  height: 58px;
  border: 1px solid #3e4c3c;
  border-radius: 12px;
  object-fit: cover;
}

.dashboard-result-placeholder {
  display: grid;
  place-items: center;
  color: var(--lime);
  background: rgb(214 185 140 / 9%);
  font-size: 1.15rem;
  font-weight: 900;
}

.dashboard-result-copy {
  min-width: 0;
}

.dashboard-result-copy h2,
.dashboard-customer-heading h2 {
  margin: 3px 0 2px;
  color: var(--white);
  font-size: 1rem;
  line-height: 1.15;
}

.dashboard-result-copy p,
.dashboard-customer-heading p {
  overflow: hidden;
  margin: 0;
  color: #62584c;
  font-size: 0.72rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-result-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid rgb(214 185 140 / 44%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 10%);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-result-status.is-sold {
  border-color: rgb(255 92 92 / 66%);
  color: #ffd0d0;
  background: rgb(181 28 28 / 28%);
}

.dashboard-result-status.is-paid {
  border-color: rgb(124 185 255 / 42%);
  color: #1f78a8;
  background: rgb(55 121 193 / 14%);
}

.dashboard-result-status.is-unpaid {
  border-color: rgb(255 194 83 / 46%);
  color: #ffe5af;
  background: rgb(159 99 3 / 17%);
}

.dashboard-result-price {
  color: var(--lime-light);
  font-size: 1.05rem;
  white-space: nowrap;
}

.dashboard-pallet-result.is-sold {
  border-color: rgb(255 92 92 / 62%);
  background:
    linear-gradient(135deg, rgb(181 28 28 / 20%), transparent 62%),
    #ffffff;
}

.dashboard-pallet-result.is-sold .dashboard-result-placeholder {
  border-color: rgb(255 92 92 / 45%);
  color: #ff8f8f;
  background: rgb(181 28 28 / 20%);
}

.dashboard-pallet-result.is-sold .dashboard-result-price {
  color: #ff8f8f;
}

.dashboard-sale-form {
  display: grid;
  gap: 8px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid #2f392e;
}

.dashboard-sale-form label {
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 800;
}

.dashboard-sale-form label span,
.dashboard-sale-form small {
  color: #62584c;
  font-weight: 500;
}

.dashboard-sale-form small {
  font-size: 0.67rem;
  line-height: 1.4;
}

.dashboard-assignment {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  margin-top: 13px;
  padding: 11px;
  border-radius: 11px;
  background: #ffffff;
}

.dashboard-assignment span {
  color: #62584c;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.dashboard-assignment strong {
  color: var(--white);
  font-size: 0.84rem;
}

.dashboard-assignment a {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--lime-light);
  font-size: 0.72rem;
  font-weight: 800;
}

.dashboard-assignment small {
  grid-column: 1;
  color: #62584c;
  font-size: 0.66rem;
}

.dashboard-sold-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid rgb(255 92 92 / 50%);
  border-radius: 12px;
  background: rgb(181 28 28 / 20%);
}

.dashboard-sold-record > span:first-child {
  color: #ff9d9d;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dashboard-sold-record > strong {
  grid-column: 1;
  color: var(--white);
  font-size: 0.86rem;
}

.dashboard-sold-record > small {
  grid-column: 1;
  color: #d9bcbc;
  font-size: 0.66rem;
}

.dashboard-sold-record > a {
  grid-row: 1 / span 3;
  grid-column: 2;
  align-self: center;
  color: #ffd0d0;
  font-size: 0.72rem;
  font-weight: 850;
}

.dashboard-square-sale-status {
  grid-column: 1 / -1;
  margin-top: 5px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 255 255 / 12%);
  color: #62584c;
  font-size: 0.66rem;
  font-weight: 780;
  text-transform: none;
}

.dashboard-square-sale-status::before {
  content: "\2713";
  margin-right: 6px;
}

.dashboard-square-sale-status.needs-attention {
  color: #ffd08a;
}

.dashboard-square-sale-status.needs-attention::before {
  content: "!";
}

.dashboard-invoice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.dashboard-invoice-actions > span {
  min-width: 0;
  flex: 1 1 150px;
  color: #62584c;
  font-size: 0.7rem;
}

.dashboard-invoice-actions form {
  display: contents;
}

.dashboard-complete-status {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 10px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 10%);
  font-size: 0.76rem;
}

.dashboard-empty-result {
  display: grid;
  gap: 4px;
  place-items: center;
  padding: 22px 15px;
  border: 1px dashed #40503e;
  border-radius: 13px;
  color: #62584c;
  text-align: center;
}

.dashboard-empty-result strong {
  color: var(--white);
}

.dashboard-empty-result span {
  font-size: 0.76rem;
}

.dashboard-empty-result.is-compact {
  padding: 14px;
}

.dashboard-customer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-customer-heading > div {
  min-width: 0;
}

.dashboard-customer-heading > div > span {
  color: var(--lime);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-customer-heading > a {
  flex: 0 0 auto;
  color: var(--lime-light);
  font-size: 0.72rem;
  font-weight: 850;
}

.dashboard-invoice-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.dashboard-invoice-row {
  padding: 11px;
  border: 1px solid #354133;
  border-radius: 12px;
  background: #ffffff;
}

.dashboard-invoice-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-invoice-summary > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.dashboard-invoice-summary > div > strong {
  overflow: hidden;
  color: var(--white);
  font-size: 0.82rem;
  text-overflow: ellipsis;
}

.dashboard-invoice-summary small,
.dashboard-square-note {
  color: #62584c;
  font-size: 0.68rem;
  line-height: 1.4;
}

.dashboard-invoice-summary > strong {
  color: var(--lime-light);
  font-size: 0.95rem;
  white-space: nowrap;
}

.admin-actions {
  display: grid;
  grid-template-areas:
    "sold"
    "delivery"
    "merchandise"
    "freight"
    "pallets"
    "finalize"
    "storage"
    "inventory"
    "customers"
    "settings";
  gap: 14px;
}

.admin-workflow {
  margin-bottom: 16px;
  padding: 15px;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 10%), transparent 52%),
    #ffffff;
  box-shadow: 0 14px 34px rgb(0 0 0 / 22%);
}

.admin-workflow-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0 2px;
}

.admin-workflow-heading > div {
  display: grid;
  gap: 3px;
}

.admin-workflow-heading span {
  color: var(--lime);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-workflow-heading h2 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.08;
}

.admin-workflow-heading p {
  margin: 0 0 1px;
  color: #62584c;
  font-size: 0.67rem;
  line-height: 1.25;
  text-align: right;
}

.admin-workflow-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-workflow-step {
  display: grid;
  min-height: 68px;
  grid-template-columns: 28px 38px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgb(214 185 140 / 18%);
  border-radius: 13px;
  color: var(--white);
  background: rgb(255 255 255 / 76%);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.admin-workflow-step:hover {
  border-color: rgb(214 185 140 / 58%);
  background: rgb(214 185 140 / 8%);
  transform: translateY(-1px);
}

.admin-workflow-step:focus-visible {
  border-color: var(--lime-light);
  outline: 3px solid rgb(214 185 140 / 20%);
  outline-offset: 2px;
}

.admin-workflow-number {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgb(166 255 98 / 65%);
  border-radius: 50%;
  color: #071005;
  background: var(--lime-light);
  font-size: 0.76rem;
  font-weight: 950;
}

.admin-workflow-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 26%);
  border-radius: 11px;
  color: var(--lime);
  background: rgb(214 185 140 / 8%);
}

.admin-workflow-step.is-freight .admin-workflow-icon {
  border-color: rgb(100 174 255 / 34%);
  color: #1f78a8;
  background: rgb(63 127 194 / 12%);
}

.admin-workflow-icon svg,
.admin-workflow-arrow {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.admin-workflow-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-workflow-copy strong {
  overflow: hidden;
  font-size: 0.85rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-workflow-copy small {
  color: #62584c;
  font-size: 0.62rem;
  line-height: 1.2;
}

.admin-workflow-count {
  display: grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  padding: 0 7px;
  border: 1px solid rgb(100 174 255 / 38%);
  border-radius: 999px;
  color: #1f78a8;
  background: rgb(63 127 194 / 13%);
  font-size: 0.69rem;
  font-weight: 900;
}

.admin-workflow-arrow {
  width: 17px;
  height: 17px;
  color: #71806d;
}

@media (max-width: 420px) {
  .admin-workflow-heading p {
    display: none;
  }

  .admin-workflow-step {
    grid-template-columns: 27px 36px minmax(0, 1fr) auto 16px;
    gap: 8px;
    padding-right: 9px;
    padding-left: 9px;
  }
}

@media (min-width: 760px) {
  .admin-workflow {
    padding: 18px;
  }

  .admin-workflow-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-workflow-step {
    min-height: 82px;
    grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  }

  .admin-workflow-arrow {
    display: none;
  }
}

/* Compact dashboard processing queues */
.admin-priority-action {
  margin-bottom: 16px;
}

.portal-main-actions .admin-priority-action .admin-action {
  min-height: 92px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px;
}

.portal-main-actions .admin-priority-action .admin-action-copy {
  width: 100%;
}

.admin-workflow {
  padding: 12px;
}

.admin-workflow-step {
  min-height: 62px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 8px 11px;
}

.admin-workflow-copy {
  display: block;
}

.admin-workflow-copy strong {
  font-size: 0.89rem;
}

.admin-workflow-count {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border-color: rgb(166 255 98 / 38%);
  color: var(--lime-light);
  background: rgb(214 185 140 / 10%);
  font-size: 0.8rem;
}

.admin-workflow-step.is-freight .admin-workflow-count {
  border-color: rgb(100 174 255 / 38%);
  color: #1f78a8;
  background: rgb(63 127 194 / 13%);
}

@media (max-width: 420px) {
  .admin-workflow-step {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
  }
}

@media (min-width: 760px) {
  .admin-workflow {
    padding: 14px;
  }

  .admin-workflow-step {
    min-height: 72px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }
}

.admin-action-sold {
  grid-area: sold;
}

.admin-action-delivery {
  grid-area: delivery;
  border-color: rgb(100 174 255 / 34%);
  background:
    linear-gradient(135deg, rgb(63 127 194 / 16%), transparent 58%),
    var(--surface);
}

.admin-action-delivery .admin-action-icon,
.admin-action-delivery .admin-action-copy > strong {
  border-color: rgb(100 174 255 / 38%);
  color: #1f78a8;
  background: rgb(63 127 194 / 14%);
}

.admin-action-bol {
  grid-area: bol;
}

.admin-action-merchandise {
  grid-area: merchandise;
}

.admin-action-freight {
  grid-area: freight;
  border-color: rgb(100 174 255 / 30%);
  background:
    linear-gradient(135deg, rgb(63 127 194 / 13%), transparent 55%),
    var(--surface);
}

.admin-action-freight .admin-action-icon {
  border-color: rgb(100 174 255 / 38%);
  color: #1f78a8;
  background: rgb(63 127 194 / 13%);
}

.admin-action-freight .admin-action-copy > strong {
  border-color: rgb(100 174 255 / 38%);
  color: #1f78a8;
  background: rgb(63 127 194 / 13%);
}

.admin-action-pallets {
  grid-area: pallets;
}

.admin-action-finalize {
  grid-area: finalize;
}

.admin-action-storage {
  grid-area: storage;
}

.admin-action-inventory {
  grid-area: inventory;
}

.admin-action-customers {
  grid-area: customers;
}

.admin-action-settings {
  grid-area: settings;
}

.admin-action-alert-count {
  border-color: rgb(255 107 107 / 65%) !important;
  color: #fff !important;
  background: rgb(164 29 29 / 42%) !important;
}

.square-dashboard-warning {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  padding: 15px;
  border: 1px solid rgb(255 107 107 / 62%);
  border-radius: var(--radius-md);
  color: #6f1d1d;
  background:
    linear-gradient(135deg, rgb(210 48 48 / 26%), transparent 65%),
    #ffffff;
  box-shadow: 0 14px 34px rgb(109 16 16 / 22%);
}

.square-dashboard-warning-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid rgb(255 152 152 / 66%);
  border-radius: 50%;
  color: #fff;
  background: #b72c2c;
  font-weight: 900;
}

.square-dashboard-warning-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

.square-dashboard-warning-copy strong {
  font-size: 0.95rem;
}

.square-dashboard-warning-copy span {
  color: #f4caca;
  font-size: 0.78rem;
  line-height: 1.45;
}

.square-dashboard-warning form {
  display: contents;
}

.square-dashboard-warning-button {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 0 15px;
  border: 1px solid #ffd4d4;
  border-radius: 999px;
  color: #350707;
  background: #ffd4d4;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.admin-action {
  display: flex;
  width: 100%;
  min-height: 104px;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgb(214 185 140 / 24%);
  border-radius: var(--radius-md);
  color: var(--white);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 12%), transparent 55%),
    var(--surface);
  box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.admin-action:hover {
  border-color: rgb(214 185 140 / 55%);
  background-color: rgb(214 185 140 / 5%);
  transform: translateY(-2px);
}

.admin-action:active {
  transform: translateY(0);
}

.admin-action-icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 32%);
  border-radius: 16px;
  color: var(--lime);
  background: rgb(214 185 140 / 10%);
}

.admin-action-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.admin-action-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-action-copy > span {
  min-width: 0;
}

.admin-action-copy > strong {
  display: grid;
  min-width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgb(166 255 98 / 38%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 10%);
  font-size: 0.9rem;
  line-height: 1;
}

.settings-page {
  max-width: 900px;
}

.settings-heading {
  margin-top: 30px;
}

.settings-heading .section-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  color: var(--lime);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.settings-heading .section-kicker span {
  width: 34px;
  height: 2px;
  background: var(--lime);
}

.settings-heading h1 {
  margin: 12px 0 0;
  font-size: clamp(2.7rem, 12vw, 5rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.settings-heading > p:last-child {
  max-width: 620px;
  margin: 15px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.settings-flash {
  margin: 24px 0 0;
  padding: 13px 15px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: var(--radius-sm);
  color: #62584c;
  background: var(--input-surface);
  line-height: 1.45;
}

.settings-flash-success {
  border-color: rgb(214 185 140 / 42%);
  color: #62584c;
  background: rgb(128 96 64 / 18%);
}

.settings-flash-error {
  border-color: rgb(255 107 107 / 54%);
  color: #ffd6d6;
  background: rgb(174 38 38 / 18%);
}

.connection-card {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgb(214 185 140 / 8%), transparent 44%),
    var(--surface);
  box-shadow: 0 20px 54px rgb(0 0 0 / 28%);
}

.feature-settings-card {
  padding: 0;
  overflow: hidden;
}

.feature-settings-disclosure > summary {
  list-style: none;
}

.feature-settings-disclosure > summary::-webkit-details-marker {
  display: none;
}

.feature-settings-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 18px 20px;
  cursor: pointer;
  transition: background 160ms ease;
}

.feature-settings-summary:hover,
.feature-settings-disclosure[open] > .feature-settings-summary {
  background: rgb(214 185 140 / 6%);
}

.feature-settings-disclosure[open] > .feature-settings-summary {
  border-bottom: 1px solid var(--surface-border);
}

.feature-settings-summary-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.feature-settings-summary-copy > strong {
  color: var(--white);
  font-size: 1.55rem;
  letter-spacing: -0.025em;
}

.feature-settings-summary-copy > small {
  color: var(--muted);
  font-size: 0.74rem;
}

.feature-settings-summary .connection-status {
  grid-column: auto;
}

.feature-settings-chevron {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.feature-settings-disclosure[open] .feature-settings-chevron {
  transform: rotate(180deg);
}

.feature-settings-content {
  padding: 20px;
}

.feature-settings-content > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.feature-settings-form {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.feature-setting-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 84px;
  padding: 15px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--input-surface);
  cursor: pointer;
}

.feature-setting-toggle > span:first-child {
  display: grid;
  gap: 4px;
}

.feature-setting-toggle strong {
  color: var(--white);
  font-size: 0.84rem;
}

.feature-setting-toggle small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.feature-setting-control {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.feature-setting-control > span {
  color: var(--lime-light);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.feature-setting-control input {
  position: relative;
  width: 48px;
  height: 28px;
  margin: 0;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  appearance: none;
  cursor: pointer;
  background: rgb(255 255 255 / 9%);
  transition: border-color 160ms ease, background 160ms ease;
}

.feature-setting-control input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #b8c1b5;
  transition: transform 160ms ease, background 160ms ease;
}

.feature-setting-control input:checked {
  border-color: rgb(214 185 140 / 65%);
  background: rgb(214 185 140 / 26%);
}

.feature-setting-control input:checked::after {
  background: var(--lime-light);
  transform: translateX(20px);
}

.feature-setting-control input:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

.feature-settings-form .page-action-row {
  margin-top: 6px;
}

.feature-settings-form .button {
  min-height: 56px;
  padding: 0 24px;
}

.reservation-deposit-feature {
  display: grid;
  gap: 10px;
}

.reservation-deposit-settings {
  min-width: 0;
  margin: 0;
  padding: 17px;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 7%), transparent 58%),
    #ffffff;
  transition: border-color 160ms ease, opacity 160ms ease;
}

.reservation-deposit-settings.is-disabled {
  border-color: var(--surface-border);
  opacity: 0.72;
}

.reservation-deposit-settings > legend {
  padding: 0 8px;
  color: var(--lime-light);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reservation-deposit-settings > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.55;
}

.reservation-deposit-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.reservation-deposit-field-grid > label {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.reservation-deposit-field-grid > label > span:first-child {
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 780;
}

.reservation-deposit-field-grid small,
.reservation-nonrefundable-option small {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.4;
}

.reservation-money-input,
.reservation-number-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 12px;
  color: var(--white);
  background: #ffffff;
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.reservation-number-input {
  grid-template-columns: minmax(0, 1fr) auto;
}

.reservation-money-input:focus-within,
.reservation-number-input:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 10%);
}

.reservation-money-input > b,
.reservation-number-input > b {
  padding: 0 12px;
  color: var(--lime);
  font-size: 0.8rem;
}

.reservation-number-input > b {
  color: var(--muted);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.reservation-money-input input,
.reservation-number-input input {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 12px;
  border: 0;
  outline: 0;
  color: var(--white);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
}

.reservation-money-input input {
  padding-left: 0;
}

.reservation-nonrefundable-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: flex-start;
  margin-top: 15px;
  padding: 13px;
  border: 1px solid rgb(255 189 79 / 34%);
  border-radius: 12px;
  background: rgb(255 189 79 / 7%);
  cursor: pointer;
}

.reservation-nonrefundable-option input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--lime);
}

.reservation-nonrefundable-option > span {
  display: grid;
  gap: 4px;
}

.reservation-nonrefundable-option strong {
  color: #ffcf7c;
  font-size: 0.72rem;
}

.reservation-refund-warning {
  margin-top: 10px;
  color: var(--muted-dark);
  font-size: 0.61rem;
  line-height: 1.45;
}

.reservation-deposit-notice {
  display: grid;
  gap: 0.4rem;
  width: 100%;
  padding: 1rem;
  border: 1px solid rgb(156 255 87 / 50%);
  border-radius: 1rem;
  background: #ffffff;
  color: #62584c;
}

.reservation-deposit-notice > span,
.reservation-status-badge {
  color: #e8cda5;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reservation-deposit-notice > strong {
  color: #e8cda5;
  font-size: clamp(1.65rem, 8vw, 2.35rem);
  line-height: 1;
}

.reservation-deposit-notice p,
.reservation-deposit-notice small {
  margin: 0;
  color: #62584c;
  line-height: 1.45;
}

.reservation-deposit-notice small,
.reservation-nonrefundable {
  color: #ffb36b;
  font-weight: 800;
}

.storefront-reservation-notice {
  margin: 0.8rem 0 1rem;
}

.reservation-status-badge {
  display: inline-flex;
  width: fit-content;
  padding: 0.35rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.reservation-status-pending {
  color: #ffb36b;
}

.reservation-status-locked {
  color: #e8cda5;
}

.connection-card-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.connection-card-logo {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 16px;
  color: var(--lime);
  background: rgb(214 185 140 / 10%);
}

.connection-card-logo svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.connection-card-label {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.connection-card-heading h2 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -0.025em;
}

.connection-status {
  grid-column: 1 / -1;
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 10%);
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.connection-status-warning,
.connection-status-error,
.connection-status-expired {
  border-color: rgb(255 107 107 / 58%);
  color: #ffd0d0;
  background: rgb(174 38 38 / 18%);
}

.connection-status-not_connected {
  border-color: rgb(255 255 255 / 20%);
  color: var(--muted);
  background: rgb(255 255 255 / 5%);
}

.connection-status-legacy {
  border-color: rgb(100 174 255 / 38%);
  color: #1f78a8;
  background: rgb(63 127 194 / 13%);
}

.connection-details {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
}

.connection-details > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-surface);
}

.connection-details dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.connection-details dd {
  margin: 6px 0 0;
  color: var(--white);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.connection-alert,
.connection-legacy-note,
.connection-empty,
.connection-setup-note {
  margin: 22px 0 0;
  padding: 15px;
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.connection-alert {
  border: 1px solid rgb(255 107 107 / 52%);
  color: #ffd4d4;
  background: rgb(174 38 38 / 16%);
}

.connection-legacy-note {
  border: 1px solid rgb(100 174 255 / 34%);
  color: #1f78a8;
  background: rgb(63 127 194 / 10%);
}

.connection-empty {
  border: 1px solid var(--input-border);
  color: var(--muted);
  background: var(--input-surface);
}

.connection-setup-note {
  display: grid;
  gap: 5px;
  border: 1px solid rgb(255 199 79 / 38%);
  color: #ffe6ad;
  background: rgb(130 86 9 / 16%);
}

.connection-setup-note span {
  color: #d9cba9;
  font-size: 0.86rem;
}

.connection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.connection-actions form {
  display: contents;
}

.connection-disconnect {
  width: 100%;
}

.connection-disconnect summary {
  display: flex;
  justify-content: center;
  list-style: none;
  cursor: pointer;
}

.connection-disconnect summary::-webkit-details-marker {
  display: none;
}

.connection-disconnect-confirmation {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid rgb(255 107 107 / 45%);
  border-radius: var(--radius-sm);
  color: #ffd4d4;
  background: rgb(174 38 38 / 16%);
}

.connection-disconnect-confirmation span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.connection-actions .button {
  width: 100%;
  padding: 0 22px;
}

.connection-security-note {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--surface-border);
  color: var(--muted-dark);
  font-size: 0.78rem;
  line-height: 1.5;
}

.legal-settings-explainer {
  margin: 22px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.legal-settings-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.legal-settings-actions .button {
  width: 100%;
  min-height: 54px;
  padding: 8px 24px;
  text-align: center;
  white-space: normal;
}

.legal-editor-page {
  padding-bottom: 54px;
}

.legal-preview-button {
  min-height: 44px;
  padding: 0 18px;
}

.legal-editor-form {
  display: grid;
  gap: 20px;
  margin-top: 28px;
  padding: 20px;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.legal-editor-form > label {
  display: grid;
  gap: 9px;
}

.legal-editor-form > label > span {
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 800;
}

.legal-editor-form textarea {
  width: 100%;
  min-height: 480px;
  padding: 16px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--white);
  background: var(--input-surface);
  font: inherit;
  line-height: 1.65;
  resize: vertical;
}

.legal-editor-form textarea:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.legal-editor-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--surface-border);
}

.legal-editor-save p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.legal-editor-save p a {
  color: var(--lime-light);
}

.legal-editor-save .button {
  min-width: 210px;
}

.storefront-settings-explainer {
  max-width: 720px;
  margin: 22px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.storefront-settings-form {
  display: grid;
  gap: 14px;
  margin-top: 25px;
}

.storefront-settings-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 2%);
}

.storefront-settings-section-toggle {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease;
}

.storefront-settings-section-toggle::-webkit-details-marker {
  display: none;
}

.storefront-settings-section-toggle::marker {
  content: "";
}

.storefront-settings-section-toggle:hover {
  background: rgb(214 185 140 / 6%);
}

.storefront-settings-section-toggle:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -3px;
}

.storefront-settings-section-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 42%);
  border-radius: 12px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 10%);
  font-size: 0.8rem;
  font-weight: 900;
}

.storefront-settings-section-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.storefront-settings-section-copy strong {
  color: var(--white);
  font-size: 1rem;
  line-height: 1.2;
}

.storefront-settings-section-copy small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.storefront-settings-section-chevron {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.storefront-settings-section[open] {
  border-color: rgb(214 185 140 / 34%);
}

.storefront-settings-section[open] > .storefront-settings-section-toggle {
  border-bottom: 1px solid var(--surface-border);
  background: rgb(214 185 140 / 7%);
}

.storefront-settings-section[open] .storefront-settings-section-chevron {
  transform: rotate(180deg);
}

.storefront-settings-section-content {
  padding: 18px;
}

.storefront-address-fields,
.storefront-hours-fields {
  display: grid;
  min-width: 0;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

.storefront-address-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storefront-fields-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.storefront-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.storefront-field-wide {
  grid-column: 1 / -1;
}

.storefront-field > span,
.storefront-time-field > span {
  color: #62584c;
  font-size: 0.75rem;
  font-weight: 760;
}

.storefront-field small {
  margin-left: 4px;
  color: var(--muted-dark);
  font-weight: 650;
}

.storefront-field input,
.storefront-time-field input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--white);
  background: var(--input-surface);
  color-scheme: dark;
}

.storefront-field input:hover,
.storefront-time-field input:hover {
  border-color: var(--input-border-hover);
}

.storefront-field input:focus,
.storefront-time-field input:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.storefront-hours-fields {
  padding-top: 0;
  border-top: 0;
}

.storefront-hours-fields > p {
  margin: -3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.storefront-hours-list {
  display: grid;
  gap: 9px;
}

.storefront-hours-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 2%);
}

.storefront-day-toggle {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: 0.86rem;
  font-weight: 790;
  cursor: pointer;
}

.storefront-day-toggle input {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--lime);
}

.storefront-time-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.storefront-settings-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--surface-border);
}

.storefront-settings-save > div {
  display: grid;
  max-width: 520px;
  gap: 4px;
}

.storefront-settings-save > div span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.storefront-settings-save .button {
  min-width: 230px;
  padding: 0 22px;
}

@media (max-width: 619px) {
  .feature-settings-summary {
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    min-height: 82px;
    padding: 15px;
  }

  .feature-settings-summary .connection-card-logo {
    width: 48px;
    height: 48px;
  }

  .feature-settings-summary .connection-status {
    display: none;
  }

  .feature-settings-summary-copy > strong {
    font-size: 1.25rem;
  }

  .feature-settings-content {
    padding: 15px;
  }

  .feature-setting-toggle {
    gap: 12px;
    padding: 14px;
  }

  .reservation-deposit-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .reservation-deposit-settings {
    padding: 14px;
  }

  .legal-settings-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-preview-button,
  .legal-editor-save .button {
    width: 100%;
  }

  .legal-editor-form textarea {
    min-height: 380px;
  }

  .storefront-settings-section-toggle {
    grid-template-columns: 38px minmax(0, 1fr) 26px;
    gap: 11px;
    min-height: 68px;
    padding: 13px;
  }

  .storefront-settings-section-number {
    width: 38px;
    height: 38px;
  }

  .storefront-settings-section-content {
    padding: 14px;
  }

  .storefront-address-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .storefront-field-wide {
    grid-column: auto;
  }

  .storefront-hours-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storefront-day-toggle {
    grid-column: 1 / -1;
    min-height: 34px;
  }

  .storefront-settings-save .button {
    width: 100%;
    min-width: 0;
  }
}

.bol-upload-panel {
  grid-area: panel;
  padding: 22px 18px;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgb(214 185 140 / 9%), transparent 48%),
    #ffffff;
  box-shadow: 0 18px 50px rgb(0 0 0 / 28%);
}

.bol-upload-heading,
.section-heading,
.bol-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.bol-upload-heading .eyebrow,
.section-heading .eyebrow {
  margin-bottom: 12px;
}

.bol-upload-heading h1 {
  font-size: clamp(1.55rem, 7vw, 2.35rem);
}

.panel-close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid var(--surface-border);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
}

.panel-close:hover {
  border-color: var(--lime-dark);
  color: var(--lime);
}

.panel-close svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.form-alert {
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid rgb(255 109 109 / 32%);
  border-radius: 12px;
  color: #ffd4d4;
  background: rgb(156 32 32 / 18%);
  font-size: 0.86rem;
  line-height: 1.45;
}

.form-alert-warning {
  margin: 20px 0 0;
  border-color: rgb(255 201 87 / 28%);
  color: #ffe8b8;
  background: rgb(129 82 0 / 17%);
}

.bol-upload-form {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.file-drop {
  position: relative;
  display: flex;
  min-height: 118px;
  align-items: center;
  gap: 15px;
  padding: 18px;
  border: 1px dashed var(--input-border);
  border-radius: var(--radius-md);
  color: var(--white);
  background: var(--input-surface);
  cursor: pointer;
}

.file-drop:hover,
.file-drop:focus-within {
  border-color: var(--lime);
  background: #ffffff;
}

.file-drop-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 14px;
  color: var(--lime);
  background: rgb(214 185 140 / 11%);
}

.file-drop-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.file-drop strong,
.file-drop small {
  display: block;
}

.file-drop strong {
  font-size: 0.95rem;
}

.file-drop small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.76rem;
}

.file-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.field-group {
  display: grid;
  gap: 8px;
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 720;
}

.field-group select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--white);
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  cursor: pointer;
  font: inherit;
}

.field-group select:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.bol-submit {
  width: 100%;
  min-height: 54px;
}

.recent-bols {
  margin-top: 34px;
}

.section-heading {
  display: block;
  margin-bottom: 15px;
}

.section-heading h2 {
  font-size: 1.45rem;
}

.bol-record-list {
  display: grid;
  gap: 10px;
}

.bol-record {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  color: var(--white);
  background: rgb(255 255 255 / 1.8%);
}

.bol-record:hover {
  border-color: rgb(214 185 140 / 36%);
  background: rgb(214 185 140 / 4%);
}

.bol-record-main,
.bol-record-side {
  display: grid;
  gap: 5px;
}

.bol-record-main {
  min-width: 0;
}

.bol-record-main strong {
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bol-record-main small {
  color: var(--muted);
  font-size: 0.73rem;
}

.bol-record-side {
  flex: 0 0 auto;
  justify-items: end;
  font-size: 0.78rem;
}

.record-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgb(214 185 140 / 22%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 7%);
  font-size: 0.6rem;
  font-weight: 820;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.record-status-needs_review {
  border-color: rgb(255 201 87 / 25%);
  color: #ffe1a0;
  background: rgb(255 201 87 / 7%);
}

.record-status-receiving {
  border-color: rgb(100 174 255 / 28%);
  color: #1f78a8;
  background: rgb(63 127 194 / 10%);
}

.record-status-staging {
  border-color: rgb(214 185 140 / 28%);
  color: var(--lime-light);
  background: rgb(214 185 140 / 9%);
}

.record-status-labeled,
.record-status-ready,
.record-status-stored,
.stage-pill-ready {
  border-color: rgb(166 255 98 / 42%);
  color: #62584c;
  background: rgb(214 185 140 / 14%);
}

.bol-detail {
  max-width: 1040px;
}

.back-link {
  display: inline-flex;
  width: fit-content;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid #dce3d8;
  border-radius: 999px;
  color: #10150f;
  background: #dce3d8;
  box-shadow: 0 10px 24px rgb(0 0 0 / 17%);
  font-size: 0.82rem;
  font-weight: 790;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.back-link:hover {
  border-color: var(--lime-light);
  color: #071006;
  background: var(--lime-light);
  transform: translateY(-1px);
}

.bol-detail-heading {
  flex-direction: column;
  margin-top: 28px;
}

.bol-detail-heading h1 {
  margin-top: 14px;
  font-size: clamp(2rem, 10vw, 4.2rem);
}

.bol-detail-heading p {
  margin-top: 9px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.bol-detail-heading .button {
  width: 100%;
}

.bol-summary-grid {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.bol-stage-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid rgb(214 185 140 / 26%);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 8%), transparent 58%),
    var(--surface);
}

.bol-stage-copy {
  display: grid;
  gap: 6px;
}

.bol-stage-copy span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bol-stage-action strong {
  font-size: 0.98rem;
}

.bol-stage-action .button {
  padding: 0 18px;
}

.bol-stage-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.bol-stage-buttons .button {
  width: 100%;
  font-size: 0.76rem;
}

.bol-summary-card {
  display: grid;
  min-height: 102px;
  align-content: space-between;
  gap: 18px;
  padding: 17px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface);
}

.bol-summary-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.bol-summary-card strong {
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.bol-summary-card-money {
  border-color: rgb(214 185 140 / 24%);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 9%), transparent 60%),
    var(--surface);
}

.bol-summary-card-money strong {
  color: var(--lime-light);
  font-size: 1.55rem;
}

.bol-merchandise-cost-card {
  align-content: start;
  gap: 12px;
}

.bol-cost-update-form {
  margin-top: 2px;
}

.bol-cost-update-form label {
  display: grid;
  gap: 7px;
}

.bol-cost-update-form label > span:first-child {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bol-cost-update-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.bol-cost-update-row b {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 11px;
  color: var(--lime);
  font-size: 0.82rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.bol-cost-update-row input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px 0 27px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  color: var(--white);
  background: var(--input-surface);
  font: inherit;
  font-size: 0.78rem;
}

.bol-cost-update-row input:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.bol-cost-update-row .button {
  min-width: 52px;
  min-height: 44px;
  padding: 0 13px;
}

.extracted-text {
  margin-top: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.extracted-text summary {
  padding: 17px;
  color: var(--white);
  font-size: 0.86rem;
  font-weight: 760;
  cursor: pointer;
}

.extracted-text pre {
  max-height: 560px;
  margin: 0;
  padding: 18px;
  border-top: 1px solid var(--surface-border);
  color: #62584c;
  background: #ffffff;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.73rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow: auto;
}

.bol-archive {
  max-width: 1040px;
}

.archive-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.archive-heading .eyebrow {
  margin-bottom: 14px;
}

.archive-heading h1 {
  font-size: clamp(2.15rem, 11vw, 4.5rem);
}

.archive-heading p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
}

.archive-upload-button {
  width: 100%;
  padding: 0 20px;
}

.archive-list {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}

.archive-metrics {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.archive-metrics article {
  display: grid;
  min-height: 100px;
  align-content: space-between;
  gap: 15px;
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  background: var(--surface);
}

.archive-metrics span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.archive-metrics strong {
  font-size: 1.55rem;
}

.archive-metrics .archive-profit-metric {
  border-color: rgb(214 185 140 / 26%);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 9%), transparent 65%),
    var(--surface);
}

.archive-profit-metric strong {
  color: var(--lime-light);
}

.archive-record {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon content arrow"
    "icon value arrow";
  align-items: center;
  gap: 8px 12px;
  padding: 15px 14px;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  color: var(--white);
  background:
    linear-gradient(125deg, rgb(214 185 140 / 4%), transparent 38%),
    rgb(255 255 255 / 1.8%);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.archive-record:hover {
  border-color: rgb(214 185 140 / 42%);
  background-color: rgb(214 185 140 / 4%);
  transform: translateY(-1px);
}

.archive-record-icon {
  grid-area: icon;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  align-self: start;
  border: 1px solid rgb(214 185 140 / 22%);
  border-radius: 12px;
  color: var(--lime);
  background: rgb(214 185 140 / 8%);
}

.archive-record-icon svg,
.archive-empty-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.archive-record-content {
  grid-area: content;
  min-width: 0;
}

.archive-record-topline {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.archive-record-topline > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-record-topline .record-status {
  display: none;
}

.archive-record-filename,
.archive-record-meta,
.archive-record-pallets {
  display: block;
  color: var(--muted);
  font-size: 0.69rem;
}

.archive-record-filename {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.archive-record-pallets {
  margin-top: 7px;
  color: #62584c;
}

.archive-record-value {
  grid-area: value;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.archive-record-value strong {
  color: var(--lime-light);
  font-size: 0.86rem;
}

.archive-record-value small {
  color: var(--muted-dark);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.archive-record-arrow {
  grid-area: arrow;
  color: var(--lime);
  font-size: 1.15rem;
}

.archive-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 0.75rem;
}

.archive-pagination a {
  color: var(--lime-light);
  font-weight: 740;
}

.archive-pagination a:last-child {
  text-align: right;
}

.archive-empty {
  display: grid;
  justify-items: center;
  margin-top: 30px;
  padding: 48px 22px;
  border: 1px dashed var(--surface-border);
  border-radius: var(--radius-lg);
  text-align: center;
  background: rgb(255 255 255 / 1.5%);
}

.archive-empty-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: 17px;
  color: var(--lime);
  background: rgb(214 185 140 / 8%);
}

.archive-empty h2 {
  margin: 20px 0 8px;
  font-size: 1.35rem;
}

.archive-empty p {
  max-width: 430px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.archive-empty .button {
  width: 100%;
  padding: 0 20px;
}

.pallet-workflow {
  max-width: 1040px;
}

.workflow-heading {
  margin-top: 24px;
}

.workflow-heading .eyebrow {
  margin-bottom: 14px;
}

.workflow-heading h1 {
  font-size: clamp(2.1rem, 10vw, 4.25rem);
}

.workflow-heading > p:last-child {
  max-width: 650px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.receiving-list {
  display: grid;
  gap: 11px;
  margin-top: 28px;
}

.receiving-record {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background:
    linear-gradient(130deg, rgb(70 142 214 / 6%), transparent 46%),
    var(--surface);
}

.receiving-record:hover {
  border-color: rgb(100 174 255 / 42%);
}

.receiving-record-status,
.stage-pill {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid rgb(100 174 255 / 25%);
  border-radius: 999px;
  color: #1f78a8;
  background: rgb(63 127 194 / 9%);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.receiving-record > strong {
  font-size: 1rem;
}

.receiving-record > span:not(.receiving-record-status, .receiving-record-details, .receiving-record-action) {
  color: var(--muted);
  font-size: 0.78rem;
}

.receiving-record-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 5px;
  color: #62584c;
  font-size: 0.75rem;
}

.receiving-record-action {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 0 13px;
  border: 1px solid var(--lime-light);
  border-radius: 999px;
  color: #071006;
  background: var(--lime-light);
  font-size: 0.72rem;
  font-weight: 820;
  box-shadow: 0 10px 24px rgb(128 96 64 / 18%);
}

.finalization-filters {
  display: grid;
  gap: 13px;
  margin-top: 28px;
  padding: 17px;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: 18px;
  background:
    linear-gradient(140deg, rgb(214 185 140 / 8%), transparent 48%),
    var(--surface);
}

.finalization-filter-field {
  display: grid;
  gap: 8px;
}

.finalization-filter-field > span:first-child {
  color: #62584c;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.finalization-filter-field select,
.finalization-search-input {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--white);
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.finalization-filter-field select {
  padding: 0 42px 0 14px;
  font: inherit;
  font-size: 0.86rem;
}

.finalization-search-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
}

.finalization-search-input:focus-within,
.finalization-filter-field select:focus {
  border-color: var(--lime);
  outline: 0;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.finalization-search-input svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.finalization-search-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--white);
  background: transparent;
  font-size: 0.83rem;
}

.finalization-search-input input::placeholder {
  color: #899486;
}

.finalization-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  margin-top: 18px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.finalization-list-heading strong {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 11%);
  font-size: 0.76rem;
}

.finalization-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.finalization-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy action";
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 7%), transparent 48%),
    var(--surface);
  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.finalization-record:hover {
  border-color: rgb(214 185 140 / 46%);
  transform: translateY(-1px);
}

.finalization-record-copy {
  grid-area: copy;
  display: grid;
  min-width: 0;
  gap: 4px;
}

.finalization-record-badges {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.finalization-record-copy > strong {
  font-size: 0.95rem;
}

.finalization-record-copy > small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.program-pill {
  display: inline-flex;
  max-width: 170px;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #4b5749;
  border-radius: 999px;
  color: #62584c;
  background: #ffffff;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finalization-record-action {
  grid-area: action;
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  color: #071006;
  background: var(--lime-light);
  font-size: 0.7rem;
  font-weight: 820;
}

.finalization-empty {
  margin-top: 28px;
}

.finalization-no-results {
  margin-top: 12px;
  padding: 28px 18px;
  border: 1px dashed var(--surface-border);
  border-radius: 16px;
  text-align: center;
}

.finalization-no-results strong {
  font-size: 0.95rem;
}

.finalization-no-results p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.pallet-photo-workflow {
  max-width: 920px;
}

.photo-workflow-heading {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 24px;
}

.photo-title-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.photo-title-row h1 {
  min-width: 0;
  margin: 0;
  font-size: clamp(2.15rem, 9vw, 4.25rem);
}

.print-finalize-label {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.pallet-photo-form {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.finalize-program-panel {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.finalize-program-field {
  display: grid;
  gap: 8px;
}

.finalize-program-field > span {
  color: #62584c;
  font-size: 0.71rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.finalize-program-field select {
  width: 100%;
  min-height: 50px;
  padding: 0 40px 0 13px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  outline: 0;
  color: var(--white);
  background-color: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.finalize-program-field select:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.finalize-program-panel > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.final-pallet-details {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.final-details-copy h2 {
  margin-top: 8px;
  font-size: 1.35rem;
}

.final-details-copy > p:last-child {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.5;
}

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

.final-detail-field {
  display: grid;
  gap: 8px;
}

.final-detail-field > span:first-child {
  display: flex;
  min-height: 34px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
  color: #62584c;
  font-size: 0.71rem;
  font-weight: 760;
}

.final-detail-field > span:first-child small {
  color: var(--muted-dark);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.suffix-input {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--muted);
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.suffix-input:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.suffix-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--white);
  background: transparent;
}

.suffix-input > span {
  font-size: 0.74rem;
  font-weight: 760;
  text-transform: uppercase;
}

.photo-capture-panel {
  padding: 18px;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgb(214 185 140 / 8%), transparent 44%),
    var(--surface);
}

.photo-capture-copy h2 {
  margin-top: 8px;
  font-size: 1.45rem;
}

.photo-capture-copy > p:last-child {
  max-width: 570px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.camera-capture-control {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgb(214 185 140 / 32%);
  border-radius: 14px;
  background: rgb(214 185 140 / 7%);
}

.camera-capture-button {
  width: 100%;
  min-height: 52px;
  gap: 9px;
  border: 1px solid var(--lime);
  color: #071006;
  background: var(--lime-light);
  font-weight: 900;
}

.camera-capture-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.camera-capture-button:disabled {
  cursor: wait;
  opacity: 0.82;
}

.camera-capture-control.is-error .camera-capture-button {
  color: var(--white);
  border-color: rgb(255 112 112 / 62%);
  background: rgb(255 112 112 / 13%);
}

.camera-capture-status {
  display: grid;
  gap: 9px;
}

.camera-capture-status[hidden] {
  display: none;
}

.camera-capture-status > strong {
  color: var(--white);
  font-size: 0.76rem;
}

.camera-capture-stations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.camera-capture-stations span {
  padding: 7px 9px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  color: var(--muted);
  background: #ffffff;
  font-size: 0.64rem;
  font-weight: 780;
  text-align: center;
}

.camera-capture-stations span.is-waiting {
  color: var(--white);
  border-color: rgb(255 255 255 / 25%);
}

.camera-capture-stations span.is-captured {
  color: #071006;
  border-color: var(--lime-light);
  background: var(--lime-light);
}

.camera-capture-stations span.is-error {
  color: #ffb2b2;
  border-color: rgb(255 112 112 / 48%);
}

.has-camera-preview-modal {
  overflow: hidden;
}

.camera-preview-modal {
  position: fixed;
  z-index: 240;
  inset: 0;
  display: grid;
  padding: 0;
  place-items: center;
  background: rgb(0 0 0 / 86%);
  backdrop-filter: blur(10px);
}

.camera-preview-modal[hidden] {
  display: none;
}

.camera-preview-dialog {
  display: grid;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at top left, rgb(214 185 140 / 12%), transparent 32%),
    #ffffff;
}

.camera-preview-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: max(18px, env(safe-area-inset-top)) 18px 15px;
  border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.camera-preview-header .eyebrow {
  margin: 0;
}

.camera-preview-header h3 {
  margin-top: 8px;
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1;
}

.camera-preview-header > div > p:last-child {
  max-width: 620px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.camera-preview-close {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  place-items: center;
  color: var(--white);
  background: #ffffff;
  cursor: pointer;
}

.camera-preview-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.camera-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 8px;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
}

.camera-preview-tile {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 12px;
  background: #ffffff;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.camera-preview-tile.is-live {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgb(214 185 140 / 11%);
}

.camera-preview-tile.is-error {
  border-color: rgb(255 112 112 / 62%);
}

.camera-preview-tile.is-captured {
  border-color: var(--lime-light);
  box-shadow: 0 0 22px rgb(214 185 140 / 18%);
}

.camera-preview-tile > header {
  display: flex;
  min-height: 35px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 7px 9px;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.camera-preview-tile > header strong {
  font-size: 0.68rem;
}

.camera-preview-tile > header span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.55rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-preview-tile.is-live > header span,
.camera-preview-tile.is-captured > header span {
  color: var(--lime-light);
}

.camera-preview-tile.is-error > header span {
  color: #ffb2b2;
}

.camera-preview-viewport {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 4%), transparent),
    #ffffff;
}

.camera-preview-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #ffffff;
}

.camera-preview-viewport > div {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 10px;
  color: var(--muted);
  background: #ffffff;
  text-align: center;
}

.camera-preview-viewport > div[hidden] {
  display: none;
}

.camera-preview-viewport > div svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.camera-preview-viewport > div span {
  max-width: 130px;
  font-size: 0.58rem;
  font-weight: 760;
  line-height: 1.25;
}

.camera-preview-tile.is-connecting .camera-preview-viewport > div svg {
  color: var(--lime-light);
  animation: camera-preview-pulse 1.2s ease-in-out infinite;
}

@keyframes camera-preview-pulse {
  50% {
    opacity: 0.42;
    transform: scale(0.92);
  }
}

.camera-preview-footer {
  display: grid;
  gap: 10px;
  padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(255 255 255 / 14%);
  background: #ffffff;
}

.camera-preview-footer > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.35;
  text-align: center;
}

.camera-preview-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 8px;
}

.camera-preview-actions .button {
  min-height: 50px;
  padding: 10px 12px;
  font-size: 0.72rem;
}

.camera-preview-capture {
  border-color: var(--lime-light);
  color: #071006;
  background: var(--lime-light);
}

.camera-preview-capture:disabled {
  cursor: wait;
  opacity: 0.58;
}

@media (min-width: 760px) {
  .camera-preview-modal {
    padding: 28px;
  }

  .camera-preview-dialog {
    width: min(1080px, 100%);
    height: min(760px, calc(100dvh - 56px));
    border: 1px solid rgb(214 185 140 / 35%);
    border-radius: 22px;
    box-shadow: 0 28px 90px rgb(0 0 0 / 62%);
  }

  .camera-preview-header {
    padding: 22px 24px 18px;
  }

  .camera-preview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px;
  }

  .camera-preview-tile > header {
    min-height: 42px;
    padding: 9px 11px;
  }

  .camera-preview-tile > header strong {
    font-size: 0.78rem;
  }

  .camera-preview-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 14px 20px 18px;
  }

  .camera-preview-footer > p {
    text-align: left;
  }

  .camera-preview-actions {
    width: 410px;
  }
}

.captured-camera-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 18px;
}

.captured-camera-photo {
  position: relative;
  min-height: 116px;
  overflow: hidden;
  border: 1px solid rgb(214 185 140 / 44%);
  border-radius: 12px;
  background: #ffffff;
}

.captured-camera-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.captured-camera-photo span {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #071006;
  background: var(--lime-light);
  font-size: 0.61rem;
  font-weight: 900;
}

.photo-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.photo-slot {
  position: relative;
  display: grid;
  min-height: 154px;
  align-content: space-between;
  gap: 14px;
  padding: 13px;
  border: 1px dashed var(--input-border);
  border-radius: 15px;
  background: var(--input-surface);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 160ms ease,
    background 160ms ease;
}

.photo-slot:first-child {
  grid-column: 1 / -1;
}

.photo-slot:hover,
.photo-slot.has-photo {
  border-color: var(--lime);
  background: #ffffff;
}

.photo-slot.is-loading {
  border-color: rgb(214 185 140 / 52%);
}

.photo-slot-preview {
  position: relative;
  display: grid;
  min-height: 75px;
  place-items: center;
  border-radius: 10px;
  color: var(--lime);
  background: rgb(214 185 140 / 8%);
  overflow: hidden;
}

.photo-slot-preview svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.photo-slot-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-slot.is-loading .photo-slot-preview::after {
  position: relative;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--white);
  background: rgb(255 255 255 / 72%);
  content: "Loading preview...";
  font-size: 0.61rem;
  font-weight: 760;
}

.photo-slot.preview-error .photo-slot-preview::after {
  position: relative;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--lime);
  background: rgb(255 255 255 / 82%);
  content: "Photo selected";
  font-size: 0.61rem;
  font-weight: 760;
}

.photo-slot-copy {
  display: grid;
  gap: 3px;
}

.photo-slot-copy strong {
  overflow: hidden;
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-slot-copy small {
  color: var(--muted);
  font-size: 0.66rem;
}

.photo-slot.has-photo .photo-slot-copy small {
  color: #62584c;
}

.photo-slot input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.photo-selection-status {
  width: fit-content;
  margin: 12px 0 0;
  color: var(--lime);
  font-size: 0.72rem;
  font-weight: 760;
}

.photo-format-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 13px;
  color: var(--muted);
  background: rgb(255 255 255 / 2%);
  font-size: 0.74rem;
  line-height: 1.5;
}

.photo-format-note svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.photo-submit {
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
}

.photo-upload-progress {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgb(214 185 140 / 34%);
  border-radius: 12px;
  color: #62584c;
  background: rgb(214 185 140 / 9%);
}

.photo-upload-progress[hidden] {
  display: none;
}

.photo-progress-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.photo-progress-heading strong {
  color: var(--white);
  font-size: 0.8rem;
}

.photo-progress-heading span {
  color: var(--lime);
  font-size: 0.72rem;
  font-weight: 800;
}

.photo-progress-track {
  height: 10px;
  border: 1px solid rgb(214 185 140 / 24%);
  border-radius: 999px;
  background: rgb(255 255 255 / 68%);
  overflow: hidden;
}

.photo-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #62c60f, var(--lime));
  box-shadow: 0 0 13px rgb(214 185 140 / 38%);
  transition: width 180ms ease;
}

.photo-upload-progress.is-processing .photo-progress-track > span {
  width: 38%;
  animation: photo-progress-processing 1.15s ease-in-out infinite;
}

.photo-upload-progress.is-complete .photo-progress-track > span {
  width: 100%;
}

.photo-upload-progress.is-error {
  border-color: rgb(255 109 109 / 45%);
  color: #ffd4d4;
  background: rgb(156 32 32 / 15%);
}

.photo-upload-progress.is-error .photo-progress-heading span {
  color: #ff9f9f;
}

.photo-upload-progress.is-error .photo-progress-track > span {
  background: #ff6d6d;
  box-shadow: none;
}

.photo-upload-progress > p {
  margin: 0;
  color: currentColor;
  font-size: 0.72rem;
  line-height: 1.45;
}

@keyframes photo-progress-processing {
  from {
    transform: translateX(-115%);
  }
  to {
    transform: translateX(285%);
  }
}

.photo-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

.pallet-complete-workflow {
  max-width: 760px;
}

.pallet-ready-card {
  display: grid;
  justify-items: center;
  margin-top: 20px;
  padding: 30px 18px;
  border: 1px solid rgb(214 185 140 / 34%);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0, rgb(214 185 140 / 13%), transparent 18rem),
    var(--surface);
  text-align: center;
}

.pallet-ready-icon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  margin-bottom: 20px;
  border: 1px solid rgb(166 255 98 / 45%);
  border-radius: 50%;
  color: #071006;
  background: var(--lime-light);
  box-shadow: 0 16px 44px rgb(214 185 140 / 22%);
}

.pallet-ready-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.pallet-ready-card h1 {
  margin-top: 13px;
  font-size: clamp(2.25rem, 10vw, 4.25rem);
}

.pallet-ready-program {
  margin: 8px 0 15px;
  color: var(--muted);
  line-height: 1.5;
}

.pallet-ready-summary {
  display: grid;
  width: 100%;
  gap: 9px;
  margin-top: 26px;
}

.pallet-ready-summary article {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 13px;
  background: rgb(255 255 255 / 58%);
  text-align: left;
}

.pallet-ready-summary article span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pallet-ready-summary article strong {
  font-size: 0.9rem;
  text-align: right;
}

.pallet-ready-storage {
  display: grid;
  width: 100%;
  gap: 16px;
  margin-top: 20px;
  padding: 17px;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: 16px;
  background: rgb(255 255 255 / 74%);
  text-align: left;
}

.pallet-ready-storage-heading {
  display: grid;
  gap: 7px;
}

.pallet-ready-storage-heading .eyebrow {
  margin: 0;
}

.pallet-ready-storage-heading h2 {
  font-size: clamp(1.25rem, 6vw, 1.65rem);
}

.pallet-ready-storage-heading > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.pallet-ready-storage-form {
  display: grid;
  gap: 13px;
}

.pallet-ready-storage-form .storage-picker-select {
  margin-top: 0;
}

.pallet-ready-storage-form .button {
  width: 100%;
}

.pallet-ready-storage-empty {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px dashed var(--surface-border);
  border-radius: 12px;
  color: var(--muted);
  background: rgb(255 255 255 / 2%);
  font-size: 0.72rem;
  line-height: 1.5;
}

.pallet-ready-storage-empty[hidden] {
  display: none;
}

.pallet-ready-storage-empty strong {
  color: var(--white);
  font-size: 0.78rem;
}

.pallet-ready-storage-empty a {
  width: fit-content;
  margin-top: 3px;
  color: var(--lime-light);
  font-weight: 800;
}

.pallet-ready-actions {
  display: grid;
  width: 100%;
  gap: 10px;
  margin-top: 20px;
}

.pallet-ready-actions .button {
  width: 100%;
  padding: 0 18px;
}

.registration-source-grid,
.registration-metrics {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.registration-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
  margin-top: 18px;
}

.registration-source-grid article,
.registration-metrics article {
  display: grid;
  min-height: 92px;
  align-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface);
}

.registration-metrics article {
  min-height: 72px;
  gap: 8px;
  padding: 12px;
}

.registration-source-grid span,
.registration-metrics article > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.registration-source-grid strong,
.registration-metrics strong {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.registration-metrics strong {
  font-size: 0.94rem;
}

.registration-form {
  margin-top: 18px;
}

.pallet-register-compact .registration-form {
  margin-top: 24px;
}

.compact-load-header {
  padding: 20px 0 6px;
}

.compact-load-header .eyebrow {
  margin-bottom: 13px;
}

.compact-load-header h1 {
  font-size: clamp(2rem, 10vw, 4.1rem);
  overflow-wrap: anywhere;
}

.compact-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 10px;
}

.compact-costs > span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: var(--muted-dark);
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compact-costs strong {
  color: #62584c;
  font-size: 0.76rem;
  letter-spacing: 0;
  text-transform: none;
}

.load-assignment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(112px, 0.7fr);
  gap: 10px;
  margin-top: 20px;
}

.compact-assignment-field {
  display: grid;
  gap: 7px;
}

.compact-assignment-field > span {
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 760;
}

.compact-assignment-field select,
.compact-assignment-field input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: 11px;
  color: var(--white);
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  font: inherit;
  font-size: 0.82rem;
}

.compact-assignment-field select {
  cursor: pointer;
}

.compact-assignment-field input {
  cursor: text;
}

.compact-assignment-field select:hover,
.compact-assignment-field input:hover {
  border-color: var(--input-border-hover);
}

.compact-assignment-field select:focus,
.compact-assignment-field input:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.custom-program-field {
  margin-top: 10px;
}

.registration-pricing-fields {
  margin-top: 12px;
}

.registration-fields {
  display: grid;
  gap: 12px;
}

.registration-field {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface);
}

.registration-field > span:first-child,
.pallet-price-input > span:first-child {
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 760;
}

.registration-field > input,
.money-input {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--input-border);
  border-radius: 11px;
  color: var(--white);
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.registration-field > input {
  padding: 0 13px;
  cursor: text;
}

.money-input {
  display: flex;
  align-items: center;
  padding-left: 13px;
  cursor: text;
}

.money-input > span {
  flex: 0 0 auto;
  color: var(--lime);
  font-weight: 800;
}

.money-input input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px 0 6px;
  border: 0;
  color: var(--white);
  background: transparent;
  outline: none;
  cursor: text;
}

.registration-field > input:hover,
.money-input:hover {
  border-color: var(--input-border-hover);
}

.registration-field > input:focus,
.money-input:focus-within {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.final-detail-field .suffix-input,
.final-detail-field .money-input {
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.final-detail-field.is-saving .suffix-input,
.final-detail-field.is-saving .money-input {
  border-color: rgb(214 185 140 / 38%);
}

.final-detail-field.is-saved .suffix-input,
.final-detail-field.is-saved .money-input {
  border-color: rgb(214 185 140 / 62%);
  background:
    linear-gradient(rgb(214 185 140 / 13%), rgb(214 185 140 / 13%)),
    var(--input-surface);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    0 0 0 1px rgb(214 185 140 / 5%);
}

.final-detail-field.is-error .suffix-input,
.final-detail-field.is-error .money-input {
  border-color: rgb(255 109 109 / 70%);
  box-shadow: 0 0 0 3px rgb(255 109 109 / 10%);
}

.autosave-status {
  display: inline-flex;
  min-height: 14px;
  align-items: center;
  gap: 4px;
  transition: color 160ms ease;
}

.autosave-status.is-saving {
  color: #62584c;
}

.autosave-status.is-saved {
  color: var(--lime);
}

.autosave-status.is-saved::before {
  content: "\2713";
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.autosave-status.is-error {
  color: #ff9f9f;
}

.registration-field small {
  color: var(--muted-dark);
  font-size: 0.69rem;
  line-height: 1.45;
}

.pricing-preview {
  display: grid;
  gap: 1px;
  margin-top: 14px;
  border: 1px solid rgb(214 185 140 / 23%);
  border-radius: 16px;
  background: var(--surface-border);
  overflow: hidden;
}

.pricing-preview div {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
}

.pricing-preview span {
  color: var(--muted);
  font-size: 0.72rem;
}

.pricing-preview span small,
.bulk-final-price small {
  display: block;
  margin-top: 3px;
  color: var(--muted-dark);
  font-size: 0.6rem;
  font-weight: 650;
}

.pricing-preview strong {
  color: var(--lime-light);
  font-size: 1.05rem;
}

.pricing-preview .pricing-final-price {
  background:
    linear-gradient(125deg, rgb(214 185 140 / 13%), transparent 68%),
    #ffffff;
}

.pricing-final-price strong {
  font-size: 1.3rem;
}

.registration-submit {
  width: 100%;
  padding: 0 20px;
}

.registration-form-actions {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr);
  gap: 10px;
  margin-top: 14px;
}

.registration-form-actions .button {
  width: 100%;
  padding: 0 16px;
}

body.has-registration-processing {
  overflow: hidden;
}

.registration-processing-overlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    calc(20px + var(--safe-top))
    20px
    calc(20px + var(--safe-bottom));
  background: rgb(255 255 255 / 84%);
  backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.registration-processing-overlay[hidden] {
  display: none;
}

.registration-processing-overlay.is-visible {
  opacity: 1;
}

.registration-processing-card {
  display: grid;
  width: min(430px, 100%);
  justify-items: center;
  padding: 30px 24px 26px;
  border: 1px solid rgb(166 255 98 / 44%);
  border-radius: 22px;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 0%, rgb(214 185 140 / 16%), transparent 58%),
    #ffffff;
  box-shadow:
    0 30px 90px rgb(0 0 0 / 66%),
    0 0 0 1px rgb(0 0 0 / 45%);
  text-align: center;
  transform: translateY(10px) scale(0.98);
  transition: transform 180ms ease;
}

.registration-processing-overlay.is-visible .registration-processing-card {
  transform: translateY(0) scale(1);
}

.registration-processing-spinner {
  width: 54px;
  height: 54px;
  margin-bottom: 21px;
  border: 5px solid rgb(214 185 140 / 17%);
  border-top-color: var(--lime-light);
  border-radius: 50%;
  box-shadow: 0 0 26px rgb(214 185 140 / 15%);
  animation: registration-processing-spin 850ms linear infinite;
}

.registration-processing-card .eyebrow {
  margin-bottom: 10px;
}

.registration-processing-card h2 {
  margin: 0;
  font-size: clamp(1.8rem, 8vw, 2.45rem);
  letter-spacing: -0.04em;
}

.registration-processing-card > p:not(.eyebrow) {
  max-width: 340px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.registration-processing-track {
  width: 100%;
  height: 7px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgb(214 185 140 / 22%);
  border-radius: 999px;
  background: rgb(255 255 255 / 72%);
}

.registration-processing-track > span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lime-dark), var(--lime-light));
  box-shadow: 0 0 14px rgb(214 185 140 / 40%);
  animation: registration-processing-progress 1.2s ease-in-out infinite;
}

.registration-processing-card > small {
  margin-top: 13px;
  color: var(--muted-dark);
  font-size: 0.67rem;
  line-height: 1.4;
}

.registration-form[aria-busy="true"] .registration-submit {
  cursor: wait;
  opacity: 0.72;
}

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

@keyframes registration-processing-progress {
  from {
    transform: translateX(-115%);
  }
  to {
    transform: translateX(285%);
  }
}

.registration-detail-heading {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin-top: 28px;
}

.registration-detail-heading h1 {
  margin-top: 12px;
  font-size: clamp(2rem, 9vw, 4rem);
  overflow-wrap: anywhere;
}

.registration-detail-heading p {
  margin: 8px 0 0;
  color: var(--muted);
}

.stage-pill {
  border-color: rgb(214 185 140 / 27%);
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
}

.registration-detail-heading .button {
  width: 100%;
  padding: 0 20px;
}

.form-success {
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 12px;
  color: #62584c;
  background: rgb(214 185 140 / 8%);
  font-size: 0.82rem;
}

.registration-metrics .registration-profit-card {
  border-color: rgb(214 185 140 / 26%);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 9%), transparent 64%),
    var(--surface);
}

.registration-profit-card strong {
  color: var(--lime-light);
}

@media (min-width: 540px) {
  .registration-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.program-pricing-disclosure {
  margin-top: 18px;
  scroll-margin-top: 22px;
}

.program-pricing-toggle {
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  list-style: none;
  cursor: pointer;
}

.program-pricing-toggle::-webkit-details-marker {
  display: none;
}

.program-pricing-toggle::marker {
  content: "";
}

.program-pricing-toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.program-pricing-toggle-arrow {
  font-size: 1rem;
  transition: transform 160ms ease;
}

.program-pricing-disclosure[open] .program-pricing-toggle-arrow {
  transform: rotate(180deg);
}

.program-pricing-panel {
  display: grid;
  gap: 18px;
  margin-top: 10px;
  padding: 18px;
  border: 1px solid rgb(214 185 140 / 32%);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 8%), transparent 54%),
    var(--surface);
}

.program-pricing-copy .eyebrow {
  margin-bottom: 10px;
}

.program-pricing-copy h2 {
  font-size: 1.25rem;
}

.program-pricing-copy > p:last-child {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.program-pricing-list {
  display: grid;
  gap: 12px;
}

.program-pricing-card {
  display: grid;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: #ffffff;
}

.program-pricing-card.is-loss {
  border-color: rgb(255 102 102 / 48%);
  background: rgb(255 102 102 / 5%);
}

.program-pricing-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.program-pricing-card-heading > div {
  min-width: 0;
}

.program-pricing-card-heading span,
.program-pricing-card-heading > strong {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.program-pricing-card-heading h3 {
  margin-top: 5px;
  font-size: 1.05rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.program-pricing-card-heading > strong {
  flex: 0 0 auto;
  color: var(--lime-light);
}

.program-pricing-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.program-pricing-fields > *,
.program-selling-price-field .money-input,
.program-selling-price-field input {
  min-width: 0;
}

.program-pricing-cost {
  display: grid;
  min-height: 76px;
  align-content: space-between;
  gap: 7px;
  padding: 10px 13px;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  background: var(--surface-raised);
}

.program-pricing-cost span,
.program-selling-price-field > span:first-child {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 760;
}

.program-pricing-cost strong {
  font-size: 1.05rem;
}

.program-selling-price-field {
  display: grid;
  gap: 7px;
}

.program-pricing-profit {
  display: flex;
  grid-column: 1 / -1;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 13px;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: 11px;
  background: rgb(214 185 140 / 7%);
}

.program-pricing-card.is-loss .program-pricing-profit {
  border-color: rgb(255 102 102 / 38%);
  background: rgb(255 102 102 / 8%);
}

.program-pricing-profit > span {
  color: var(--muted);
  font-size: 0.7rem;
}

.program-pricing-profit small {
  display: block;
  margin-top: 2px;
}

.program-pricing-profit strong {
  color: var(--lime-light);
  font-size: 1.15rem;
  white-space: nowrap;
}

.program-pricing-card.is-loss .program-pricing-profit strong {
  color: #ff9090;
}

.program-pricing-card .button {
  width: 100%;
  min-height: 50px;
  padding: 0 17px;
  line-height: 1.15;
  white-space: normal;
}

.pallet-price-form {
  margin-top: 34px;
}

.pallet-list-heading {
  display: grid;
  gap: 9px;
  margin-bottom: 15px;
}

.pallet-list-heading .eyebrow {
  margin-bottom: 9px;
}

.pallet-list-heading h2 {
  font-size: 1.45rem;
}

.pallet-price-list {
  display: grid;
  gap: 14px;
}

.pallet-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "identity label cost"
    "price update profit";
  gap: 14px;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 15px;
  background: var(--surface);
}

.pallet-identity {
  grid-area: identity;
  display: grid;
  gap: 4px;
}

.pallet-identity-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pallet-identity span,
.pallet-cost span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 730;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pallet-identity .pallet-status {
  padding: 3px 6px;
  border: 1px solid rgb(100 174 255 / 27%);
  border-radius: 999px;
  color: #1f78a8;
  background: rgb(63 127 194 / 9%);
  font-size: 0.52rem;
  line-height: 1;
}

.pallet-identity .pallet-status-ready {
  border-color: rgb(214 185 140 / 34%);
  color: var(--lime-light);
  background: rgb(214 185 140 / 10%);
}

.pallet-identity .pallet-display-number {
  color: var(--white);
  font-size: 1.18rem;
  font-weight: 880;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.pallet-identity small {
  color: var(--white);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.65rem;
}

.pallet-cost {
  grid-area: cost;
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 5px;
}

.pallet-cost strong {
  color: var(--white);
  font-size: 0.86rem;
}

.pallet-price-input {
  grid-area: price;
  display: grid;
  gap: 8px;
}

.pallet-price-update {
  display: inline-flex;
  grid-area: update;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  align-self: end;
  gap: 7px;
  padding: 0 16px;
  border: 1px solid rgb(214 185 140 / 42%);
  border-radius: 10px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 850;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.pallet-price-update:hover {
  border-color: var(--lime-light);
  background: rgb(214 185 140 / 14%);
}

.pallet-price-update:focus-visible {
  outline: 3px solid rgb(214 185 140 / 24%);
  outline-offset: 2px;
}

.pallet-price-update.is-updated {
  border-color: var(--lime-light);
  color: #071006;
  background: var(--lime-light);
  box-shadow: 0 8px 22px rgb(214 185 140 / 18%);
}

.pallet-price-update-check {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: var(--lime-light);
  background: #ffffff;
  font-size: 0.69rem;
  line-height: 1;
}

.pallet-price-update-check[hidden] {
  display: none;
}

.pallet-profit {
  display: grid;
  grid-area: profit;
  min-width: 94px;
  align-content: center;
  justify-items: end;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgb(214 185 140 / 24%);
  border-radius: 11px;
  background: rgb(214 185 140 / 7%);
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.pallet-profit span,
.pallet-profit small {
  color: var(--white);
  font-size: 0.59rem;
  font-weight: 730;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pallet-profit strong {
  color: var(--lime-light);
  font-size: 0.86rem;
  white-space: nowrap;
}

.pallet-price-row.is-loss .pallet-profit {
  border-color: rgb(255 107 107 / 48%);
  background: rgb(255 107 107 / 10%);
}

.pallet-price-row.is-loss .pallet-profit span,
.pallet-price-row.is-loss .pallet-profit strong {
  color: #ff9292;
}

.pallet-workflow .registration-detail-heading p,
.pallet-workflow .registration-metrics article > span,
.pallet-workflow .program-pricing-copy > p:last-child,
.pallet-workflow .program-pricing-cost span,
.pallet-workflow .program-pricing-profit > span,
.pallet-workflow .program-pricing-profit small,
.pallet-workflow .pallet-cost span {
  color: var(--white);
}

.single-label-link {
  display: inline-flex;
  grid-area: label;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  align-self: start;
  padding: 0 12px;
  border: 1px solid #c8d2c5;
  border-radius: 10px;
  color: #071006;
  background: #dce5d9;
  box-shadow: 0 7px 18px rgb(0 0 0 / 20%);
  font-size: 0.7rem;
  font-weight: 820;
  white-space: nowrap;
}

.single-label-link:hover {
  border-color: var(--lime-light);
  background: var(--lime-light);
}

.camera-menu-workspace {
  max-width: 780px;
}

.camera-menu-heading {
  margin-top: 28px;
}

.camera-menu-heading h1 {
  margin-top: 10px;
  font-size: clamp(2.5rem, 12vw, 4.8rem);
}

.camera-menu-heading > p:last-child {
  margin: 10px 0 0;
  color: var(--white);
}

.camera-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.camera-choice-card {
  display: grid;
  min-height: 170px;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 18px;
  color: var(--white);
  background:
    linear-gradient(145deg, rgb(214 185 140 / 10%), transparent 55%),
    var(--surface);
  text-align: center;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.camera-choice-card:hover {
  border-color: var(--lime-light);
  transform: translateY(-2px);
}

.camera-choice-card.is-unavailable,
.camera-choice-card.is-unavailable:hover {
  border-color: rgb(255 255 255 / 14%);
  color: #7d847b;
  background: #ffffff;
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.58;
  pointer-events: none;
  transform: none;
}

.camera-choice-card.is-unavailable svg {
  stroke: #7d847b;
}

.camera-choice-card.is-unavailable small {
  color: #62584c;
}

.camera-choice-card svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--lime-light);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.camera-choice-card span {
  font-size: 1.18rem;
  font-weight: 900;
}

.camera-choice-card small {
  color: var(--white);
  font-size: 0.7rem;
}

.camera-station-page {
  min-height: 100dvh;
  overflow: hidden;
  background: #000;
}

.camera-station {
  display: grid;
  width: 100%;
  height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--white);
  background: #000;
}

.camera-station-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: max(16px, env(safe-area-inset-top)) 18px 14px;
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  background: #ffffff;
}

.camera-station-header h1 {
  font-size: 1.28rem;
}

.camera-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5b5b;
  box-shadow: 0 0 16px rgb(255 91 91 / 50%);
}

.camera-station.is-ready .camera-live-dot {
  background: var(--lime-light);
  box-shadow: 0 0 16px rgb(214 185 140 / 46%);
}

.camera-station-status {
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 780;
  text-align: right;
}

.camera-viewport {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
}

.camera-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-viewport-message {
  position: absolute;
  z-index: 2;
  width: min(320px, calc(100% - 40px));
  padding: 14px 16px;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 12px;
  background: rgb(0 0 0 / 72%);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}

.camera-capture-flash {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: #fff;
  opacity: 0;
  transition: opacity 150ms ease;
}

.camera-capture-flash.is-visible {
  opacity: 0.92;
  transition-duration: 40ms;
}

.camera-station-footer {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 12px;
  padding: 14px 18px max(18px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(255 255 255 / 18%);
  background: #ffffff;
}

.camera-station-footer p {
  margin: 0;
  color: var(--white);
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: center;
}

.camera-close-button {
  min-height: 54px;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #071006;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 950;
}

.camera-close-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.program-admin-workspace {
  max-width: 940px;
}

.program-admin-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}

.program-admin-topbar .back-button {
  flex: 0 0 auto;
  margin: 0;
}

.program-admin-topbar h1 {
  min-width: 0;
  color: var(--white);
  font-size: clamp(2rem, 9vw, 3.6rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.program-admin-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgb(214 185 140 / 48%);
  border-radius: 14px;
  color: var(--white);
  background: rgb(214 185 140 / 10%);
}

.program-admin-notice > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #071006;
  background: var(--lime-light);
  font-weight: 950;
}

.program-admin-notice p {
  margin: 0;
  line-height: 1.45;
}

.program-create-panel,
.program-admin-card {
  padding: 20px;
  border: 1px solid var(--surface-border);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgb(214 185 140 / 7%), transparent 42%),
    var(--surface);
}

.program-create-panel {
  display: grid;
  gap: 22px;
}

.program-create-panel h2,
.program-list-section h2 {
  margin-top: 8px;
  font-size: clamp(1.65rem, 7vw, 2.5rem);
}

.program-create-panel > div > p:last-child {
  margin: 8px 0 0;
  color: var(--white);
  line-height: 1.5;
}

.program-admin-form {
  display: grid;
  gap: 16px;
}

.program-admin-form label,
.program-remove-panel label {
  display: grid;
  gap: 7px;
}

.program-admin-form label > span,
.program-remove-panel label > span {
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 850;
}

.program-admin-form label > small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.program-admin-form input,
.program-admin-form textarea,
.program-remove-panel select {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  outline: none;
  color: var(--white);
  background: var(--input-surface);
  font: inherit;
}

.program-admin-form input,
.program-remove-panel select {
  min-height: 48px;
  padding: 0 13px;
}

.program-admin-form textarea {
  min-height: 94px;
  padding: 12px 13px;
  line-height: 1.5;
  resize: vertical;
}

.program-admin-form input:focus,
.program-admin-form textarea:focus,
.program-remove-panel select:focus {
  border-color: var(--lime-light);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.program-admin-form > .button {
  width: 100%;
  min-height: 50px;
}

.program-form-error {
  padding: 11px 13px;
  border: 1px solid rgb(255 107 107 / 55%);
  border-radius: 10px;
  color: #ffd1d1;
  background: rgb(255 107 107 / 10%);
  font-size: 0.75rem;
  line-height: 1.45;
}

.program-list-section {
  display: grid;
  gap: 16px;
  margin-top: 34px;
}

.program-list-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.program-list-section > header > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgb(214 185 140 / 34%);
  border-radius: 999px;
  color: var(--lime-light);
  font-size: 0.68rem;
  font-weight: 850;
}

.program-admin-list {
  display: grid;
  gap: 16px;
}

.program-admin-card {
  display: grid;
  gap: 20px;
}

.program-admin-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.program-admin-card > header span {
  color: var(--lime-light);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.program-admin-card > header h3 {
  margin-top: 5px;
  color: var(--white);
  font-size: 1.45rem;
  overflow-wrap: anywhere;
}

.program-admin-card > header > strong {
  flex: 0 0 auto;
  color: var(--white);
  font-size: 0.72rem;
}

.program-remove-panel {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.program-remove-panel > div:first-child > strong {
  color: #ffb2b2;
  font-size: 0.78rem;
}

.program-remove-panel p {
  margin: 4px 0 0;
  color: var(--white);
  font-size: 0.72rem;
  line-height: 1.5;
}

.program-remove-panel form {
  display: grid;
  gap: 12px;
}

.program-remove-button {
  width: 100%;
  min-height: 46px;
  border-color: rgb(255 107 107 / 48%);
  color: #ffd1d1;
  background: rgb(255 107 107 / 9%);
}

.program-remove-button:hover {
  border-color: var(--danger);
  color: var(--white);
  background: rgb(255 107 107 / 18%);
}

.program-admin-empty {
  display: grid;
  gap: 6px;
  padding: 30px 20px;
  border: 1px dashed var(--surface-border);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}

.program-admin-empty strong {
  color: var(--white);
}

@media (min-width: 760px) {
  .program-create-panel {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    padding: 26px;
  }

  .program-admin-card {
    padding: 26px;
  }

  .program-admin-card > .program-admin-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-admin-card > .program-admin-form label:first-of-type,
  .program-admin-card > .program-admin-form label:last-of-type,
  .program-admin-card > .program-admin-form .program-form-error,
  .program-admin-card > .program-admin-form > .button {
    grid-column: 1 / -1;
  }

  .program-remove-panel form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .program-remove-panel form > input[type="hidden"] + .program-remove-button {
    grid-column: 1 / -1;
  }

  .program-remove-button {
    width: auto;
    padding-right: 22px;
    padding-left: 22px;
  }
}

.pallet-price-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.pallet-price-actions .button {
  width: 100%;
  padding: 0 18px;
}

.welcome-block {
  margin-bottom: 30px;
}

.welcome-block h1 {
  max-width: 780px;
  font-size: clamp(2.15rem, 10vw, 4.8rem);
}

.coming-soon-card {
  position: relative;
  display: grid;
  gap: 22px;
  padding: 24px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 8%), transparent 42%),
    var(--surface);
  overflow: hidden;
}

.coming-soon-card::after {
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border: 1px solid rgb(214 185 140 / 20%);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 28px rgb(214 185 140 / 3%),
    0 0 0 58px rgb(214 185 140 / 2%);
}

.coming-soon-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 24%);
  border-radius: 16px;
  color: var(--lime);
  background: rgb(214 185 140 / 8%);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
  font-size: 0.65rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.coming-soon-card h2 {
  max-width: 660px;
  margin: 14px 0 10px;
  font-size: clamp(1.55rem, 7vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.coming-soon-card p,
.foundation-grid p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.foundation-grid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.foundation-grid article {
  padding: 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 1.8%);
}

.foundation-number {
  color: var(--lime);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
}

.foundation-grid h3 {
  margin: 22px 0 8px;
  font-size: 1rem;
}

.foundation-grid p {
  font-size: 0.86rem;
}

@media (min-width: 720px) {
  .landing-shell {
    padding-right: 36px;
    padding-left: 36px;
  }

  .hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 7vw;
    padding: 64px 0;
  }

  .storefront-visit {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 7vw;
    padding: 72px 0;
  }

  .storefront-visit-logo {
    min-height: 430px;
  }

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

  .hero-logo-frame {
    min-height: 430px;
  }

  .hero-copy h1 {
    font-size: clamp(3.3rem, 6.1vw, 5.8rem);
  }

  .button-wide {
    width: auto;
    min-width: 180px;
  }

  .private-note {
    justify-content: flex-start;
  }

  .auth-shell {
    min-height: auto;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .auth-card {
    padding: 36px;
  }

  .portal-header {
    padding-right: 32px;
    padding-left: 32px;
  }

  .portal-nav {
    padding-right: 32px;
    padding-left: 32px;
  }

  .portal-main {
    padding: 58px 32px 72px;
  }

  .portal-main-actions {
    padding-top: 28px;
  }

  .admin-actions {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "sold sold sold delivery delivery delivery"
      "merchandise merchandise freight freight pallets pallets"
      "finalize finalize finalize storage storage storage"
      "inventory inventory inventory customers customers customers"
      "settings settings settings settings settings settings";
  }

  .admin-action {
    min-height: 156px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px;
    font-size: 1.08rem;
  }

  .admin-action-copy {
    width: 100%;
  }

  .square-dashboard-warning {
    padding: 18px 20px;
  }

  .connection-card {
    padding: 30px;
  }

  .connection-card-heading {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .connection-status {
    grid-column: auto;
  }

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

  .connection-actions .button {
    width: auto;
  }

  .bol-upload-panel {
    padding: 30px;
  }

  .bol-upload-form {
    grid-template-columns: minmax(0, 1.4fr) minmax(230px, 0.6fr);
    align-items: end;
  }

  .file-drop {
    grid-row: span 2;
    min-height: 134px;
  }

  .bol-submit {
    width: auto;
  }

  .bol-detail-heading {
    flex-direction: row;
    align-items: flex-end;
  }

  .bol-detail-heading .button {
    width: auto;
    flex: 0 0 auto;
  }

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

  .bol-stage-action {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .bol-stage-buttons {
    display: flex;
    flex: 0 0 auto;
  }

  .bol-stage-buttons .button {
    width: auto;
  }

  .archive-heading {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .archive-upload-button {
    width: auto;
    flex: 0 0 auto;
  }

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

  .archive-record {
    grid-template-columns: 48px minmax(0, 1fr) 120px 24px;
    grid-template-areas: "icon content value arrow";
    gap: 16px;
    padding: 18px;
  }

  .archive-record-icon {
    width: 48px;
    height: 48px;
    align-self: center;
  }

  .archive-record-topline .record-status {
    display: inline-flex;
  }

  .archive-record-topline > strong {
    font-size: 0.96rem;
  }

  .archive-record-value {
    display: grid;
    justify-items: end;
    gap: 3px;
  }

  .archive-record-value strong {
    font-size: 1rem;
  }

  .archive-empty .button {
    width: auto;
  }

  .finalization-record {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: "copy action";
    align-items: center;
    padding: 15px 16px;
  }

  .finalization-filters {
    grid-template-columns: minmax(200px, 0.75fr) minmax(0, 1.25fr);
    align-items: end;
    padding: 20px;
  }

  .finalization-record-action {
    align-self: center;
  }

  .final-pallet-details {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: end;
    padding: 22px;
  }

  .final-details-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-capture-panel {
    padding: 24px;
  }

  .photo-slot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .captured-camera-grid,
  .camera-capture-stations,
  .camera-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .photo-slot:first-child {
    grid-column: auto;
  }

  .photo-submit {
    width: auto;
    justify-self: end;
    padding-right: 28px;
    padding-left: 28px;
  }

  .pallet-ready-card {
    padding: 42px;
  }

  .pallet-ready-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pallet-ready-summary article {
    min-height: 92px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .pallet-ready-summary article strong {
    text-align: left;
  }

  .pallet-ready-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .registration-source-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .pricing-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .registration-submit {
    width: auto;
  }

  .registration-detail-heading {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .registration-detail-heading .button {
    width: auto;
    flex: 0 0 auto;
  }

  .registration-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .program-pricing-panel {
    padding: 22px;
  }

  .program-pricing-fields {
    grid-template-columns:
      minmax(130px, 0.7fr)
      minmax(175px, 0.9fr)
      minmax(190px, 1fr);
  }

  .program-pricing-profit {
    grid-column: auto;
  }

  .pallet-price-row {
    align-items: center;
  }

  .single-label-link {
    align-self: center;
  }

  .pallet-price-actions {
    grid-template-columns: repeat(2, max-content);
    justify-content: end;
  }

  .coming-soon-card {
    grid-template-columns: auto 1fr;
    padding: 34px;
  }

  .foundation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .pallet-price-row {
    grid-template-columns:
      minmax(190px, 1fr)
      max-content
      100px
      minmax(150px, 0.65fr)
      max-content
      120px;
    grid-template-areas: "identity label cost price update profit";
  }
}

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

.storage-workspace {
  max-width: 1040px;
}

.storage-heading,
.storage-location-hero {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.storage-heading h1,
.storage-location-hero h1 {
  font-size: clamp(2.4rem, 12vw, 4.8rem);
}

.storage-heading > div:first-child > p:last-child,
.storage-location-hero > div:first-child > p:last-child {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.storage-awaiting-card,
.storage-location-code {
  display: grid;
  width: 100%;
  min-height: 106px;
  align-content: center;
  gap: 3px;
  padding: 16px;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 11%), transparent 72%),
    var(--surface);
}

.storage-awaiting-card span,
.storage-location-code span {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 780;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.storage-awaiting-card strong,
.storage-location-code strong {
  color: var(--lime-light);
  font-size: 2rem;
  line-height: 1;
}

.storage-awaiting-card small {
  color: var(--muted-dark);
  font-size: 0.66rem;
}

.storage-search {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background: var(--surface);
}

.storage-search label,
.storage-create-panel label,
.storage-assign-form label {
  display: grid;
  gap: 7px;
}

.storage-search label > span,
.storage-create-panel label > span,
.storage-assign-form label > span {
  color: #62584c;
  font-size: 0.7rem;
  font-weight: 760;
}

.storage-search input,
.storage-search select,
.storage-create-panel input,
.storage-create-panel select,
.storage-assign-form input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid var(--input-border);
  border-radius: 11px;
  color: var(--white);
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  font: inherit;
  font-size: 0.82rem;
}

.storage-search select,
.storage-create-panel select {
  cursor: pointer;
}

.storage-search input:hover,
.storage-search select:hover,
.storage-create-panel input:hover,
.storage-create-panel select:hover,
.storage-assign-form input:hover {
  border-color: var(--input-border-hover);
}

.storage-search input:focus,
.storage-search select:focus,
.storage-create-panel input:focus,
.storage-create-panel select:focus,
.storage-assign-form input:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.storage-search .button {
  width: 100%;
}

.storage-section,
.storage-create-panel,
.storage-scan-panel {
  margin-top: 28px;
}

.storage-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.storage-section-heading .eyebrow {
  margin-bottom: 8px;
}

.storage-section-heading h2,
.storage-create-panel h2,
.storage-scan-heading h2 {
  font-size: 1.35rem;
}

.storage-section-heading > span {
  color: var(--muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.storage-location-grid {
  display: grid;
  gap: 11px;
}

.storage-location-card {
  border: 1px solid var(--surface-border);
  border-radius: 17px;
  background:
    linear-gradient(140deg, rgb(214 185 140 / 5%), transparent 58%),
    var(--surface);
  overflow: hidden;
}

.storage-location-card > a:first-child {
  position: relative;
  display: grid;
  min-height: 158px;
  align-content: end;
  padding: 18px;
}

.storage-location-card:hover {
  border-color: rgb(214 185 140 / 44%);
}

.storage-location-main {
  border-color: rgb(214 185 140 / 32%);
  background:
    linear-gradient(140deg, rgb(214 185 140 / 13%), transparent 62%),
    var(--surface);
}

.storage-location-kind {
  position: absolute;
  top: 17px;
  left: 18px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.storage-location-number {
  position: absolute;
  top: 12px;
  right: 17px;
  color: rgb(166 255 98 / 34%);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 2.3rem;
  font-weight: 850;
  line-height: 1;
}

.storage-location-card h3 {
  max-width: calc(100% - 60px);
  font-size: 1.12rem;
}

.storage-location-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.storage-location-card p strong {
  color: var(--white);
}

.storage-card-add {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-top: 1px solid var(--surface-border);
  color: var(--lime-light);
  background: rgb(214 185 140 / 5%);
  font-size: 0.73rem;
  font-weight: 790;
}

.storage-card-add:hover {
  background: rgb(214 185 140 / 10%);
}

.storage-create-panel,
.storage-scan-panel {
  padding: 18px;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgb(214 185 140 / 8%), transparent 54%),
    var(--surface);
}

.storage-create-panel > div:first-child > p:last-child,
.storage-scan-heading > div > p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.storage-create-panel form,
.storage-assign-form {
  display: grid;
  gap: 11px;
  margin-top: 17px;
}

.storage-create-panel .form-alert,
.storage-scan-panel .form-alert {
  margin-top: 16px;
}

.storage-inventory-list {
  display: grid;
  gap: 9px;
}

.storage-inventory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "identity date"
    "program program"
    "location location";
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface);
}

.storage-pallet-identity {
  display: grid;
  grid-area: identity;
  gap: 3px;
}

.storage-pallet-program {
  grid-area: program;
}

.storage-pallet-location {
  grid-area: location;
}

.storage-pallet-price {
  grid-area: price;
}

.storage-pallet-date {
  grid-area: date;
  text-align: right;
}

.storage-pallet-program,
.storage-pallet-location,
.storage-pallet-price,
.storage-pallet-date {
  display: grid;
  align-content: start;
  gap: 4px;
}

.storage-pallet-identity span,
.storage-pallet-program span,
.storage-pallet-location span,
.storage-pallet-price span,
.storage-pallet-date span {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.storage-pallet-identity strong {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.9rem;
}

.storage-pallet-identity small {
  color: var(--muted-dark);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.62rem;
}

.storage-pallet-program strong,
.storage-pallet-location strong,
.storage-pallet-location a,
.storage-pallet-price strong,
.storage-pallet-date strong {
  color: #62584c;
  font-size: 0.76rem;
}

.storage-content-row {
  grid-template-columns: 78px minmax(0, 1fr) auto;
  grid-template-areas:
    "photo identity price"
    "photo program program"
    "photo date date";
  align-items: center;
}

.storage-content-photo {
  display: grid;
  grid-area: photo;
  width: 78px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(113, 255, 36, 0.24);
  border-radius: 11px;
  background: #ffffff;
  color: var(--muted);
  place-items: center;
}

.storage-content-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storage-content-photo-empty {
  align-content: center;
  gap: 4px;
}

.storage-content-photo-empty svg {
  width: 24px;
  fill: none;
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.storage-content-photo-empty small {
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 720;
}

.storage-content-row .storage-pallet-identity strong {
  font-family: inherit;
  font-size: 0.88rem;
}

.storage-pallet-location a {
  color: var(--lime-light);
  font-weight: 760;
}

.storage-pallet-location .storage-unassigned {
  color: #ffd08a;
}

.storage-empty {
  padding: 34px 18px;
  border: 1px dashed var(--surface-border);
  border-radius: 16px;
  text-align: center;
  background: rgb(255 255 255 / 1.5%);
}

.storage-empty h3 {
  font-size: 1rem;
}

.storage-empty p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.storage-location-code {
  justify-items: end;
}

.storage-scan-heading {
  display: grid;
  gap: 15px;
}

.storage-scan-button {
  width: 100%;
}

.storage-camera {
  position: relative;
  margin-top: 16px;
  padding: 10px;
  border: 1px solid rgb(214 185 140 / 32%);
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

.storage-camera video {
  display: block;
  width: 100%;
  min-height: 220px;
  max-height: 55svh;
  border-radius: 10px;
  background: #000;
  object-fit: cover;
}

.storage-camera-frame {
  position: absolute;
  top: 32%;
  right: 12%;
  left: 12%;
  height: 34%;
  border: 2px solid var(--lime-light);
  border-radius: 10px;
  box-shadow: 0 0 0 999px rgb(0 0 0 / 32%);
  pointer-events: none;
}

.storage-camera p {
  position: relative;
  z-index: 2;
  margin: 10px 2px;
  color: #62584c;
  font-size: 0.72rem;
}

.storage-camera .button {
  position: relative;
  z-index: 2;
  width: 100%;
}

@media (min-width: 720px) {
  .storage-heading,
  .storage-location-hero {
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: end;
  }

  .storage-search {
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 0.8fr) max-content max-content;
    align-items: end;
  }

  .storage-search .button {
    width: auto;
  }

  .storage-location-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .storage-create-panel {
    padding: 22px;
  }

  .storage-create-panel form {
    grid-template-columns: 180px minmax(220px, 1fr) max-content;
    align-items: end;
  }

  .storage-inventory-row {
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) 110px;
    grid-template-areas: "identity program location date";
    align-items: center;
  }

  .storage-content-row {
    grid-template-columns: 88px minmax(140px, 0.8fr) minmax(150px, 1fr) minmax(95px, 0.65fr) 120px;
    grid-template-areas: "photo identity program price date";
  }

  .storage-content-photo {
    width: 88px;
  }

  .storage-scan-heading {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end;
  }

  .storage-scan-button {
    width: auto;
  }

  .storage-assign-form {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end;
  }
}

/* Compact storage destination workflow */
.storage-workspace {
  padding-top: 20px;
}

.storage-workspace > .back-button {
  min-height: 42px;
  padding: 0 15px;
}

.storage-heading {
  display: block;
  margin-top: 17px;
}

.storage-title-block > .eyebrow {
  margin-bottom: 12px;
}

.storage-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.storage-heading .storage-title-row h1 {
  font-size: clamp(2.7rem, 13vw, 4.8rem);
  line-height: 0.92;
}

.storage-awaiting-card {
  width: auto;
  min-width: 104px;
  min-height: 72px;
  grid-template-columns: auto auto;
  grid-template-areas:
    "label label"
    "count unit";
  align-content: center;
  align-items: baseline;
  gap: 2px 6px;
  padding: 10px 13px;
  border-radius: 14px;
}

.storage-awaiting-card span {
  grid-area: label;
  font-size: 0.57rem;
}

.storage-awaiting-card strong {
  grid-area: count;
  font-size: 1.55rem;
}

.storage-awaiting-card small {
  grid-area: unit;
  font-size: 0.6rem;
}

.storage-search {
  margin-top: 17px;
}

.storage-destination-picker {
  margin-top: 22px;
  padding: 17px;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgb(214 185 140 / 8%), transparent 56%),
    var(--surface);
}

.storage-picker-heading {
  margin-bottom: 15px;
}

.storage-picker-heading h2 {
  font-size: 1.3rem;
}

.storage-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.storage-type-button {
  display: flex;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--input-border);
  border-radius: 13px;
  color: #62584c;
  background: var(--input-surface);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.storage-type-button:hover {
  border-color: var(--input-border-hover);
}

.storage-type-button.active {
  border-color: var(--lime);
  color: #62584c;
  background: rgb(214 185 140 / 13%);
  box-shadow: inset 0 0 0 1px rgb(214 185 140 / 8%);
}

.storage-type-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: 10px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 7%);
}

.storage-type-icon svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.storage-picker-select {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}

.storage-picker-select > span {
  color: #62584c;
  font-size: 0.7rem;
  font-weight: 760;
}

.storage-picker-select select {
  width: 100%;
  min-height: 52px;
  padding: 0 13px;
  border: 1px solid var(--input-border);
  border-radius: 11px;
  color: var(--white);
  background: var(--input-surface);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.storage-picker-select select:hover {
  border-color: var(--input-border-hover);
}

.storage-picker-select select:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.storage-picker-summary {
  display: grid;
  gap: 14px;
  margin-top: 13px;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: rgb(255 255 255 / 48%);
}

.storage-picker-summary > div:first-child {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.storage-picker-summary > div:first-child > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 12px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 850;
}

.storage-picker-summary > div:first-child > div {
  display: grid;
  gap: 4px;
}

.storage-picker-summary strong {
  font-size: 0.9rem;
}

.storage-picker-summary small {
  color: var(--muted);
  font-size: 0.68rem;
}

.storage-picker-summary small b {
  color: var(--white);
}

.storage-picker-actions {
  display: grid;
  gap: 8px;
}

.storage-picker-actions .button {
  width: 100%;
  min-height: 48px;
}

.storage-picker-empty {
  display: grid;
  gap: 4px;
  margin-top: 13px;
  padding: 16px;
  border: 1px dashed var(--surface-border);
  border-radius: 13px;
  color: var(--muted);
  background: rgb(255 255 255 / 1.5%);
  font-size: 0.72rem;
}

.storage-picker-empty strong {
  color: var(--white);
  font-size: 0.82rem;
}

.storage-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  align-items: end;
  padding: 0;
}

.storage-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(0 0 0 / 76%);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.storage-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 92svh;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  border: 1px solid rgb(214 185 140 / 31%);
  border-radius: 22px 22px 0 0;
  background:
    linear-gradient(145deg, rgb(214 185 140 / 9%), transparent 45%),
    #ffffff;
  box-shadow: 0 -24px 70px rgb(0 0 0 / 52%);
  overflow-y: auto;
}

.storage-modal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}

.storage-modal-heading .eyebrow {
  margin-bottom: 8px;
}

.storage-modal-heading h2 {
  font-size: 1.3rem;
}

.storage-modal-close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--surface-border);
  border-radius: 50%;
  color: var(--white);
  background: var(--input-surface);
  font: inherit;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

.storage-modal .storage-scan-button {
  width: 100%;
}

.storage-modal .storage-assign-form {
  margin-top: 13px;
}

.has-storage-modal {
  overflow: hidden;
}

@media (min-width: 720px) {
  .storage-workspace {
    padding-top: 32px;
  }

  .storage-title-row {
    align-items: flex-end;
  }

  .storage-awaiting-card {
    min-width: 132px;
  }

  .storage-destination-picker {
    padding: 22px;
  }

  .storage-type-options {
    max-width: 430px;
  }

  .storage-picker-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .storage-picker-actions {
    grid-template-columns: max-content max-content;
  }

  .storage-picker-actions .button {
    width: auto;
  }

  .storage-modal {
    align-items: center;
    justify-items: center;
    padding: 24px;
  }

  .storage-modal-card {
    max-width: 620px;
    border-radius: 22px;
  }
}

.storage-picker-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: end;
  gap: 9px;
  margin-top: 13px;
}

.storage-picker-control-row.is-empty {
  grid-template-columns: 1fr;
}

.storage-picker-control-row .storage-picker-select {
  min-width: 0;
  margin-top: 0;
}

.storage-create-trigger {
  min-height: 52px;
  gap: 6px;
  padding: 0 14px;
  white-space: nowrap;
}

.storage-create-trigger > span:first-child {
  color: var(--lime);
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1;
}

.storage-picker-control-row.is-empty .storage-create-trigger {
  width: 100%;
}

.storage-create-modal-card {
  max-width: 520px;
}

.storage-create-modal-copy {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.storage-create-modal-card .form-alert {
  margin-top: 14px;
}

.storage-create-modal-form {
  display: grid;
  gap: 13px;
  margin-top: 17px;
}

.storage-create-modal-form label {
  display: grid;
  gap: 7px;
}

.storage-create-modal-form label > span {
  color: #62584c;
  font-size: 0.7rem;
  font-weight: 760;
}

.storage-create-modal-form input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 0 13px;
  border: 1px solid var(--input-border);
  border-radius: 11px;
  color: var(--white);
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  font: inherit;
  font-size: 0.82rem;
}

.storage-create-modal-form input[type="text"]:hover {
  border-color: var(--input-border-hover);
}

.storage-create-modal-form input[type="text"]:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.storage-create-modal-form .button {
  width: 100%;
}

@media (max-width: 390px) {
  .storage-create-trigger {
    padding: 0 11px;
    font-size: 0.72rem;
  }
}

/* Dedicated BOL intake and expected-arrival workflow */
.record-status-in_transit {
  border-color: rgb(255 201 87 / 30%);
  color: #ffe3a4;
  background: rgb(255 201 87 / 9%);
}

.bol-upload-page {
  max-width: 860px;
}

.bol-upload-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.bol-upload-page-heading .eyebrow {
  margin-bottom: 12px;
}

.bol-upload-page-heading h1 {
  font-size: clamp(2.35rem, 12vw, 4.5rem);
  line-height: 0.95;
}

.bol-upload-page-heading p:last-child {
  max-width: 580px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.bol-upload-page-heading > .record-status {
  flex: 0 0 auto;
}

.bol-upload-page-panel {
  grid-area: auto;
  margin-top: 22px;
}

.bol-upload-page-panel .bol-upload-form {
  grid-template-columns: 1fr;
  align-items: stretch;
}

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

.bol-source-option {
  display: flex;
  min-width: 0;
  min-height: 86px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--input-border);
  border-radius: 14px;
  color: var(--white);
  text-align: left;
  background: var(--input-surface);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.bol-source-option:hover,
.bol-source-option:focus-visible,
.bol-source-option.is-active {
  border-color: var(--lime);
  outline: none;
  background: #ffffff;
}

.bol-source-option.is-active {
  box-shadow:
    inset 0 0 0 1px rgb(214 185 140 / 20%),
    0 0 0 3px rgb(214 185 140 / 8%);
}

.bol-source-option:disabled {
  cursor: wait;
  opacity: 0.72;
}

.bol-source-option-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  color: var(--lime);
  background: rgb(214 185 140 / 11%);
}

.bol-source-option-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.bol-source-option strong,
.bol-source-option small {
  display: block;
}

.bol-source-option strong {
  font-size: 0.82rem;
}

.bol-source-option small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.35;
}

.selected-pdf-file {
  position: relative;
}

.bol-source-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.selected-pdf-file > p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.65rem;
  align-items: center;
  margin: 0;
  padding: 0.8rem 0.9rem;
  background: rgb(214 185 140 / 8%);
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: 0.8rem;
}

.selected-pdf-file > p[hidden] {
  display: none;
}

.selected-pdf-file span {
  grid-row: 1 / 3;
  color: var(--lime);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.selected-pdf-file strong {
  overflow: hidden;
  color: var(--white);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-pdf-file small {
  color: var(--muted);
  font-size: 0.64rem;
}

.bol-photo-intake {
  padding: 18px;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgb(214 185 140 / 8%), transparent 44%),
    var(--surface);
}

.bol-photo-intake-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.bol-photo-intake-heading .eyebrow {
  margin: 0 0 8px;
}

.bol-photo-intake-heading h2 {
  font-size: 1.3rem;
}

.bol-photo-intake-heading > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: 999px;
  color: var(--lime);
  background: rgb(214 185 140 / 8%);
  font-size: 0.64rem;
  font-weight: 780;
  text-transform: uppercase;
}

.bol-photo-intake > p {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.bol-photo-slot-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bol-photo-slot-grid .photo-slot:first-child {
  grid-column: 1 / -1;
}

.bol-photo-slot-grid .photo-slot[hidden] {
  display: none;
}

.bol-photo-slot-grid .photo-slot-preview img {
  object-fit: contain;
  background: #f3f3ef;
}

.bol-photo-intake .photo-format-note {
  margin-top: 12px;
}

.bol-add-photo-page {
  min-height: 46px;
  margin-top: 12px;
}

.bol-upload-form[aria-busy="true"] .file-drop,
.bol-upload-form[aria-busy="true"] .photo-slot {
  cursor: wait;
}

.bol-upload-fields {
  display: grid;
  gap: 13px;
}

.field-group input[type="date"],
.field-group input[type="number"],
.archive-arrival-form input[type="date"],
.bol-arrival-summary input[type="date"] {
  width: 100%;
  min-height: 52px;
  padding: 0 13px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--white);
  color-scheme: dark;
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  font: inherit;
}

.field-group input[type="date"]:focus,
.field-group input[type="number"]:focus,
.archive-arrival-form input[type="date"]:focus,
.bol-arrival-summary input[type="date"]:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.field-group > small {
  color: var(--muted-dark);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.4;
}

.archive-record-shell {
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background:
    linear-gradient(125deg, rgb(214 185 140 / 4%), transparent 38%),
    rgb(255 255 255 / 1.8%);
  overflow: hidden;
}

.archive-record-shell:target {
  border-color: rgb(214 185 140 / 55%);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 9%);
}

.archive-record-shell .archive-record {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.archive-record-shell .archive-record:hover {
  transform: none;
}

.archive-record-arrival {
  display: block;
  margin-top: 6px;
  color: #ffe0a0;
  font-size: 0.7rem;
  font-weight: 720;
}

.archive-arrival-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: end;
  gap: 9px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--surface-border);
  background: rgb(0 0 0 / 13%);
}

.archive-arrival-form label {
  display: grid;
  gap: 6px;
}

.archive-arrival-form label > span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.archive-arrival-form input[type="date"] {
  min-height: 44px;
}

.archive-arrival-form .button {
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
}

.archive-arrival-form > small {
  grid-column: 1 / -1;
  color: var(--lime-light);
  font-size: 0.68rem;
}

.bol-arrival-summary {
  gap: 9px;
}

.bol-arrival-summary form {
  display: grid;
  gap: 8px;
}

.bol-arrival-summary input[type="date"] {
  min-height: 43px;
  font-size: 0.74rem;
}

.bol-arrival-summary .button {
  width: 100%;
  min-height: 41px;
}

.bol-arrival-summary > small {
  color: var(--lime-light);
  font-size: 0.65rem;
}

@media (min-width: 720px) {
  .bol-upload-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .bol-upload-page-panel .bol-submit {
    justify-self: end;
    min-width: 220px;
  }

  .archive-arrival-form {
    grid-template-columns: minmax(220px, 320px) max-content;
    justify-content: end;
    padding-right: 18px;
    padding-left: 18px;
  }
}

@media (max-width: 430px) {
  .bol-upload-page-heading {
    align-items: flex-start;
  }

  .bol-upload-page-heading > .record-status {
    margin-top: 28px;
  }

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

  .archive-arrival-form .button {
    width: 100%;
  }

  .bol-source-switch {
    grid-template-columns: 1fr;
  }

  .bol-source-option {
    min-height: 76px;
  }

  .bol-photo-intake {
    padding: 14px;
  }

  .bol-photo-intake-heading {
    display: grid;
  }

  .bol-photo-intake-heading > span {
    justify-self: start;
  }

  .bol-photo-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bol-photo-slot-grid .photo-slot:first-child {
    grid-column: 1 / -1;
  }

  .bol-add-photo-page {
    width: 100%;
  }
}

/* Wholesale product builder */
.wholesale-page-bar {
  margin-bottom: 10px;
}

.wholesale-save-message {
  margin: 0 0 10px;
}

.wholesale-compact-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 16px;
  background: var(--surface);
}

.wholesale-compact-toolbar > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.wholesale-compact-toolbar span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wholesale-compact-toolbar strong {
  color: var(--lime-light);
  font-size: 1.65rem;
}

.wholesale-compact-toolbar .button {
  width: auto;
  min-height: 46px;
  margin: 0;
  padding: 10px 18px;
}

.wholesale-admin-catalog {
  margin-top: 10px;
}

.wholesale-product-admin-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.wholesale-admin-product-card {
  overflow: hidden;
  border: 1px solid rgb(214 185 140 / 23%);
  border-radius: 17px;
  background: rgb(0 0 0 / 22%);
}

.wholesale-admin-product-photos,
.wholesale-customer-product-photos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  min-height: 150px;
  overflow: hidden;
  background: #ffffff;
}

.wholesale-admin-product-photos img,
.wholesale-customer-product-photos img {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
}

.wholesale-admin-product-photos > span {
  display: grid;
  min-height: 120px;
  place-items: center;
  color: var(--muted-dark);
  font-size: 0.7rem;
}

.wholesale-admin-product-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

.wholesale-admin-product-heading small,
.wholesale-admin-product-heading p {
  color: var(--muted);
  font-size: 0.66rem;
}

.wholesale-admin-product-heading h3 {
  margin-top: 4px;
  font-size: 1.1rem;
}

.wholesale-admin-product-heading p {
  margin: 7px 0 0;
  line-height: 1.45;
}

.wholesale-admin-product-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--surface-border);
}

.wholesale-admin-product-metrics > div {
  display: grid;
  gap: 5px;
  padding: 13px;
  border-right: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}

.wholesale-admin-product-metrics > div:nth-child(4n) {
  border-right: 0;
}

.wholesale-admin-product-metrics span {
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 780;
  text-transform: uppercase;
}

.wholesale-admin-product-metrics strong {
  color: var(--lime-light);
  font-size: 0.84rem;
}

.wholesale-admin-product-metrics .is-loss strong,
.wholesale-live-financials .is-loss {
  color: var(--danger);
}

.wholesale-empty-compact {
  padding: 26px 18px;
}

.wholesale-empty-compact .button {
  width: auto;
  min-height: 44px;
  margin-top: 13px;
}

body.wholesale-dialog-open {
  overflow: hidden;
}

.wholesale-product-dialog {
  width: min(720px, calc(100% - 22px));
  max-width: 720px;
  max-height: calc(100dvh - 22px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 22px;
  color: var(--white);
  background: #ffffff;
  box-shadow: 0 28px 90px rgb(0 0 0 / 78%);
}

.wholesale-product-dialog::backdrop {
  background: rgb(0 0 0 / 78%);
  backdrop-filter: blur(3px);
}

.wholesale-product-form {
  max-height: calc(100dvh - 24px);
  padding: 20px;
  overflow-y: auto;
}

.wholesale-product-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.wholesale-product-form-header h2 {
  margin-top: 6px;
  font-size: clamp(1.6rem, 6vw, 2.25rem);
}

.wholesale-product-form-header > button {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid var(--surface-border);
  border-radius: 50%;
  color: var(--white);
  background: var(--surface);
  font-size: 1.5rem;
  cursor: pointer;
}

.wholesale-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.wholesale-field {
  display: grid;
  gap: 7px;
}

.wholesale-field-wide {
  grid-column: 1 / -1;
}

.wholesale-field > span:first-child {
  font-size: 0.67rem;
  font-weight: 780;
}

.wholesale-field > span small {
  color: var(--muted);
  font-weight: 500;
}

.wholesale-field input,
.wholesale-field textarea {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--white);
  background: var(--input-surface);
  font: inherit;
}

.wholesale-field input {
  min-height: 50px;
  padding: 11px 13px;
}

.wholesale-field textarea {
  min-height: 105px;
  padding: 13px;
  resize: vertical;
}

.wholesale-field input:focus,
.wholesale-field textarea:focus {
  border-color: var(--lime);
  outline: 2px solid rgb(214 185 140 / 15%);
}

.wholesale-field .money-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  background: var(--input-surface);
}

.wholesale-field .money-input:focus-within {
  border-color: var(--lime);
  outline: 2px solid rgb(214 185 140 / 15%);
}

.wholesale-field .money-input b {
  padding-left: 13px;
  color: var(--lime);
}

.wholesale-field .money-input input {
  border: 0;
  outline: 0;
}

.wholesale-live-financials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.wholesale-live-financials > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgb(214 185 140 / 22%);
  border-radius: 12px;
  background: rgb(214 185 140 / 6%);
}

.wholesale-live-financials span {
  color: var(--muted);
  font-size: 0.55rem;
  text-transform: uppercase;
}

.wholesale-live-financials strong {
  color: var(--lime-light);
  font-size: 0.82rem;
}

.wholesale-photo-builder {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  background: var(--surface);
}

.wholesale-photo-builder h3 {
  font-size: 0.95rem;
}

.wholesale-photo-builder p,
.wholesale-photo-count {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.45;
}

.wholesale-photo-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.wholesale-photo-actions .button {
  width: 100%;
  min-height: 43px;
  margin: 0;
  cursor: pointer;
}

.wholesale-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.wholesale-photo-count.is-error {
  color: var(--danger);
  font-weight: 750;
}

.wholesale-photo-previews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.wholesale-photo-previews:empty {
  display: none;
}

.wholesale-photo-previews img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  object-fit: cover;
}

.wholesale-availability-toggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: 13px;
  background: rgb(214 185 140 / 6%);
}

.wholesale-availability-toggle input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  accent-color: var(--lime);
}

.wholesale-availability-toggle span {
  display: grid;
  gap: 4px;
}

.wholesale-availability-toggle strong {
  font-size: 0.72rem;
}

.wholesale-availability-toggle small {
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.4;
}

.wholesale-product-form-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 9px;
  margin-top: 14px;
}

.wholesale-product-form-actions .button {
  width: 100%;
  margin: 0;
}

.wholesale-customer-product-photos {
  grid-column: 1 / -1;
  min-height: 130px;
  border-radius: 12px;
}

@media (max-width: 700px) {
  .wholesale-admin-product-metrics,
  .wholesale-live-financials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wholesale-admin-product-metrics > div:nth-child(4n) {
    border-right: 1px solid var(--surface-border);
  }

  .wholesale-admin-product-metrics > div:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 520px) {
  .wholesale-compact-toolbar {
    padding: 11px 12px;
  }

  .wholesale-compact-toolbar .button {
    min-height: 43px;
    padding: 8px 13px;
    font-size: 0.72rem;
  }

  .wholesale-admin-catalog {
    padding: 14px;
  }

  .wholesale-admin-product-heading {
    flex-direction: column;
  }

  .wholesale-admin-product-photos,
  .wholesale-admin-product-photos img {
    min-height: 125px;
  }

  .wholesale-product-form {
    padding: 16px;
  }

  .wholesale-form-fields,
  .wholesale-photo-actions,
  .wholesale-product-form-actions {
    grid-template-columns: 1fr;
  }

  .wholesale-field-wide {
    grid-column: auto;
  }
}

/* Wholesale product form: photo slots, categories, and grouped totals */
.wholesale-photo-builder-top {
  margin-top: 0;
  padding: 14px;
  border-color: rgb(214 185 140 / 28%);
  background: rgb(214 185 140 / 5%);
}

.wholesale-builder-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wholesale-builder-section-heading > span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 800;
}

.wholesale-builder-section-heading > span.is-error {
  color: var(--muted);
}

.wholesale-photo-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.wholesale-photo-slot {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  place-items: center;
  padding: 8px;
  border: 1px dashed rgb(214 185 140 / 45%);
  border-radius: 13px;
  color: var(--white);
  background: #ffffff;
  cursor: pointer;
}

.wholesale-photo-slot:hover,
.wholesale-photo-slot:focus-visible {
  border-color: var(--lime);
  outline: 2px solid rgb(214 185 140 / 15%);
}

.wholesale-photo-slot.is-filled {
  border-style: solid;
}

.wholesale-photo-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wholesale-photo-slot-number {
  position: relative;
  z-index: 2;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 42%);
  border-radius: 50%;
  color: var(--lime-light);
  background: rgb(0 0 0 / 72%);
  font-size: 0.72rem;
  font-weight: 850;
}

.wholesale-photo-slot strong {
  position: absolute;
  z-index: 2;
  right: 7px;
  bottom: 7px;
  left: 7px;
  padding: 5px;
  border-radius: 7px;
  color: var(--white);
  background: rgb(0 0 0 / 72%);
  font-size: 0.57rem;
  text-align: center;
}

.wholesale-product-basics {
  margin-top: 14px;
}

.wholesale-field select {
  width: 100%;
  min-height: 50px;
  padding: 11px 38px 11px 13px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--white);
  background: var(--input-surface);
  font: inherit;
}

.wholesale-field select:focus {
  border-color: var(--lime);
  outline: 2px solid rgb(214 185 140 / 15%);
}

.wholesale-category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.wholesale-category-row .button {
  width: auto;
  min-height: 50px;
  margin: 0;
  padding: 10px 14px;
  white-space: nowrap;
}

.wholesale-entry-section {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  background: var(--surface);
}

.wholesale-entry-section > h3 {
  margin-bottom: 11px;
  color: var(--lime-light);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wholesale-entry-pair,
.wholesale-calculation-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.wholesale-calculation-pair {
  margin-top: 9px;
}

.wholesale-calculation-pair > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgb(214 185 140 / 22%);
  border-radius: 11px;
  background: rgb(214 185 140 / 6%);
}

.wholesale-calculation-pair span {
  color: var(--muted);
  font-size: 0.55rem;
  font-weight: 760;
  line-height: 1.25;
  text-transform: uppercase;
}

.wholesale-calculation-pair strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--lime-light);
  font-size: clamp(0.82rem, 3.6vw, 1rem);
}

.wholesale-calculation-pair strong.is-loss {
  color: var(--danger);
}

.wholesale-secondary-dialog {
  width: min(430px, calc(100% - 24px));
  max-width: 430px;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 20px;
  color: var(--white);
  background: #ffffff;
  box-shadow: 0 28px 90px rgb(0 0 0 / 84%);
}

.wholesale-secondary-dialog::backdrop {
  background: rgb(0 0 0 / 76%);
  backdrop-filter: blur(3px);
}

.wholesale-secondary-dialog-body {
  padding: 18px;
}

.wholesale-photo-choice-preview {
  display: grid;
  min-height: 185px;
  overflow: hidden;
  place-items: center;
  border: 1px dashed var(--surface-border);
  border-radius: 14px;
  color: var(--muted);
  background: #ffffff;
  font-size: 0.69rem;
  text-align: center;
}

.wholesale-photo-choice-preview img {
  width: 100%;
  height: min(42vh, 290px);
  object-fit: contain;
}

.wholesale-photo-choice-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.wholesale-photo-choice-panel[hidden] {
  display: none;
}

.wholesale-photo-choice-panel .button {
  width: 100%;
  min-height: 50px;
  margin: 0;
  cursor: pointer;
}

.wholesale-remove-photo {
  display: block;
  margin: 12px auto 0;
  border: 0;
  color: var(--danger);
  background: transparent;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 760;
  text-decoration: underline;
  cursor: pointer;
}

.wholesale-remove-photo[hidden] {
  display: none;
}

.wholesale-category-error,
.wholesale-photo-validation {
  min-height: 0;
  margin-top: 9px;
  color: var(--danger);
  font-size: 0.66rem;
  font-weight: 750;
}

.wholesale-category-error:empty,
.wholesale-photo-validation:empty {
  display: none;
}

@media (max-width: 430px) {
  .wholesale-product-dialog {
    width: calc(100% - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 17px;
  }

  .wholesale-product-form {
    max-height: calc(100dvh - 14px);
    padding: 13px;
  }

  .wholesale-photo-builder-top,
  .wholesale-entry-section {
    padding: 11px;
  }

  .wholesale-photo-slot-grid {
    gap: 6px;
  }

  .wholesale-category-row .button {
    padding: 8px 10px;
    font-size: 0.62rem;
  }

  .wholesale-entry-pair,
  .wholesale-calculation-pair {
    gap: 6px;
  }

  .wholesale-calculation-pair > div {
    padding: 9px 8px;
  }

  .wholesale-secondary-dialog {
    width: calc(100% - 16px);
  }
}

/* Customer registration and purchase portal */

.public-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.public-login-link,
.hero-login-prompt a,
.signup-nav a,
.auth-help a,
.check-row a {
  color: var(--lime);
  font-weight: 780;
  text-decoration: underline;
  text-decoration-color: rgb(214 185 140 / 36%);
  text-underline-offset: 4px;
}

.public-login-link {
  color: #62584c;
  font-size: 0.82rem;
  text-decoration: none;
}

.hero-login-prompt {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.signup-page,
.legal-page {
  background:
    radial-gradient(circle at 78% 7%, rgb(214 185 140 / 12%), transparent 30rem),
    linear-gradient(180deg, #ffffff, var(--black) 42rem);
}

.signup-shell {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding:
    calc(20px + var(--safe-top))
    18px
    calc(48px + var(--safe-bottom));
}

.signup-nav {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.signup-nav > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.signup-intro {
  max-width: 760px;
  margin: 64px 0 34px;
}

.signup-intro h1 {
  margin: 0;
  font-size: clamp(2.7rem, 9vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.065em;
}

.signup-intro > p:last-child {
  max-width: 650px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.signup-alert {
  max-width: 760px;
  margin: 0 0 24px;
}

.signup-form {
  display: grid;
  gap: 18px;
}

.signup-section {
  padding: 24px 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 2.5%), transparent 42%),
    rgb(255 255 255 / 92%);
  box-shadow: 0 20px 50px rgb(0 0 0 / 18%);
}

.signup-section-optional {
  border-style: dashed;
}

.signup-section > header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}

.signup-section > header > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 50%;
  color: var(--lime);
  background: rgb(214 185 140 / 7%);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.signup-section h2 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
}

.signup-section header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.form-grid {
  display: grid;
  gap: 18px;
  padding-top: 22px;
}

.field > span:first-child small {
  margin-left: 5px;
  color: var(--muted-dark);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.field-help {
  color: var(--muted-dark);
  font-size: 0.7rem;
  line-height: 1.4;
}

.consent-list {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.consent-list legend {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 820;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.check-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: flex-start;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 13px;
  background: rgb(255 255 255 / 42%);
  cursor: pointer;
}

.check-row:hover {
  border-color: rgb(214 185 140 / 36%);
}

.check-row input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--lime);
}

.check-row > span {
  display: grid;
  gap: 5px;
}

.check-row strong {
  color: #62584c;
  font-size: 0.8rem;
  line-height: 1.45;
}

.check-row strong em {
  color: var(--lime);
  font-size: 0.64rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.check-row small {
  color: var(--muted);
  font-size: 0.71rem;
  line-height: 1.5;
}

.check-row-optional {
  border-style: dashed;
}

.signup-submit {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgb(214 185 140 / 26%);
  border-radius: var(--radius-lg);
  background: rgb(214 185 140 / 5%);
}

.signup-submit > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.signup-submit p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.signup-submit p strong {
  font-size: 0.8rem;
}

.signup-submit p small {
  color: var(--muted);
  font-size: 0.68rem;
}

.signup-secure-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--lime);
  background: rgb(214 185 140 / 12%);
}

.signup-secure-mark svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.signup-submit .button {
  min-height: 56px;
  padding: 0 25px;
}

.signup-submit .button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.legal-shell {
  width: min(100%, 760px);
  min-height: 100svh;
  margin: 0 auto;
  padding:
    calc(24px + var(--safe-top))
    20px
    calc(44px + var(--safe-bottom));
}

.legal-card {
  margin-top: 32px;
  padding: 28px 24px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 94%);
  box-shadow: var(--shadow);
}

.legal-card h1 {
  margin: 0 0 24px;
  font-size: clamp(2.2rem, 8vw, 4rem);
  letter-spacing: -0.055em;
}

.legal-card > p:last-child,
.legal-placeholder p {
  color: var(--muted);
  line-height: 1.7;
}

.legal-placeholder {
  padding: 18px;
  border: 1px dashed rgb(214 185 140 / 40%);
  border-radius: var(--radius-md);
  background: rgb(214 185 140 / 5%);
}

.legal-placeholder span {
  color: var(--lime);
  font-size: 0.69rem;
  font-weight: 840;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-placeholder p {
  margin: 10px 0 0;
}

.legal-content {
  color: #62584c;
  line-height: 1.75;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.customer-main {
  width: min(100%, 980px);
  margin: 0 auto;
  padding-top: 30px;
}

.customer-welcome {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid rgb(214 185 140 / 26%);
  border-radius: 14px;
  color: #62584c;
  background: rgb(214 185 140 / 8%);
}

.customer-welcome > span {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--black);
  background: var(--lime);
  font-size: 0.8rem;
  font-weight: 900;
}

.customer-welcome p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

.customer-welcome strong {
  margin-right: 4px;
}

.customer-page-header {
  padding: 18px 0 26px;
}

.customer-page-header h1 {
  margin: 0;
  font-size: clamp(2.35rem, 10vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.customer-page-header > p:last-child {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.invoice-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background: #ffffff;
}

.invoice-tab {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 780;
}

.invoice-tab strong {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--muted);
  background: rgb(255 255 255 / 6%);
  font-size: 0.68rem;
}

.invoice-tab.active {
  color: #0b1308;
  background: var(--lime);
  box-shadow: 0 8px 24px rgb(128 96 64 / 18%);
}

.invoice-tab.active strong {
  color: #0b1308;
  background: rgb(255 255 255 / 12%);
}

.invoice-panel {
  padding-top: 18px;
}

.invoice-list {
  display: grid;
  gap: 10px;
}

.invoice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.invoice-card p {
  margin: 0 0 3px;
  color: var(--muted-dark);
  font-size: 0.64rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.invoice-card h2 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.invoice-card div > span {
  color: var(--muted);
  font-size: 0.72rem;
}

.invoice-card > strong {
  color: var(--lime-light);
  font-size: 1.05rem;
  white-space: nowrap;
}

.invoice-empty {
  display: grid;
  min-height: 270px;
  place-items: center;
  align-content: center;
  padding: 32px 20px;
  border: 1px dashed var(--surface-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0%, rgb(214 185 140 / 7%), transparent 12rem),
    rgb(255 255 255 / 68%);
  text-align: center;
}

.invoice-empty-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 26%);
  border-radius: 50%;
  color: var(--lime);
  background: rgb(214 185 140 / 7%);
}

.invoice-empty-icon svg {
  width: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.invoice-empty h2 {
  margin: 18px 0 7px;
  font-size: 1.05rem;
}

.invoice-empty p {
  max-width: 330px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

@media (min-width: 720px) {
  .signup-shell {
    padding-right: 30px;
    padding-left: 30px;
  }

  .signup-section {
    padding: 30px;
  }

  .form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .form-grid-wide {
    grid-column: 1 / -1;
  }

  .signup-submit {
    grid-template-columns: 1fr auto;
    padding: 22px 24px;
  }

  .signup-submit .button {
    min-width: 240px;
  }

  .customer-main {
    padding-top: 44px;
  }

  .customer-page-header {
    padding-top: 26px;
  }

  .invoice-card {
    padding: 21px 24px;
  }
}

@media (max-width: 480px) {
  .public-nav-actions {
    gap: 10px;
  }

  .public-login-link {
    display: none;
  }

  .signup-nav > p {
    max-width: 150px;
    text-align: right;
  }

  .signup-intro {
    margin-top: 46px;
  }

  .signup-section {
    padding: 22px 16px;
  }

  .signup-submit > div {
    align-items: flex-start;
  }
}

.form-alert-success {
  border-color: rgb(214 185 140 / 30%);
  color: #62584c;
  background: rgb(67 139 17 / 17%);
}

.program-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

.program-select-row select {
  min-width: 0;
}

.program-field-group > select {
  width: 100%;
}

.program-management-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}

.program-management-actions > span {
  color: #62584c;
  font-size: 0.7rem;
  font-weight: 760;
}

.program-management-actions > small {
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.4;
}

.program-select-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.program-select-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
}

.program-select-actions .button:disabled {
  border-color: var(--surface-border);
  color: var(--muted-dark);
  background: rgb(255 255 255 / 2%);
  cursor: not-allowed;
  opacity: 0.65;
}

.program-modal-card {
  max-width: 500px;
}

.program-create-form {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.program-create-form label {
  display: grid;
  gap: 7px;
}

.program-create-form label > span {
  color: #62584c;
  font-size: 0.7rem;
  font-weight: 760;
}

.program-create-form input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 0 13px;
  border: 1px solid var(--input-border);
  border-radius: 11px;
  color: var(--white);
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  font: inherit;
  font-size: 0.82rem;
}

.program-create-form input[type="text"]:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.program-create-form .button {
  width: 100%;
}

.program-reassign-message {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.program-reassign-message strong,
.program-reassign-message b {
  color: var(--white);
}

.program-reassign-form {
  display: grid;
  gap: 15px;
}

.program-reassign-form label {
  display: grid;
  gap: 7px;
}

.program-reassign-form label > span {
  color: #62584c;
  font-size: 0.7rem;
  font-weight: 760;
}

.program-reassign-form select {
  width: 100%;
  min-height: 52px;
}

.program-reassign-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.program-reassign-buttons .button {
  width: 100%;
}

@media (max-width: 430px) {
  .program-select-actions .button {
    min-width: 78px;
    min-height: 36px;
    font-size: 0.68rem;
  }
}

@media (min-width: 520px) {
  .program-reassign-buttons {
    grid-template-columns: 1fr 1fr;
  }
}

.inventory-workspace {
  max-width: 1060px;
}

.inventory-heading,
.inventory-program-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

.inventory-heading h1,
.inventory-program-heading h1 {
  margin-top: 12px;
  font-size: clamp(2.5rem, 12vw, 4.9rem);
  overflow-wrap: anywhere;
}

.inventory-program-heading > div > p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.inventory-total-pill {
  display: grid;
  min-width: 78px;
  justify-items: center;
  gap: 2px;
  padding: 11px 13px;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 15px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 9%);
}

.inventory-total-pill strong {
  font-size: 1.65rem;
  line-height: 1;
}

.inventory-total-pill span {
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 780;
  text-transform: uppercase;
}

.inventory-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 24px;
}

.inventory-metrics article {
  display: grid;
  min-height: 98px;
  align-content: space-between;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  background: var(--surface);
}

.inventory-metrics article > span {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 780;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.inventory-metrics article > strong {
  font-size: clamp(1.2rem, 5vw, 1.65rem);
  overflow-wrap: anywhere;
}

.inventory-metrics .inventory-profit-metric {
  border-color: rgb(214 185 140 / 31%);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 9%), transparent 70%),
    var(--surface);
}

.inventory-profit-metric > strong {
  color: var(--lime-light);
}

.inventory-programs,
.inventory-loads,
.program-load-progress,
.inventory-pallets {
  margin-top: 34px;
}

.inventory-section-heading {
  margin-bottom: 15px;
}

.inventory-section-heading .eyebrow {
  margin-bottom: 10px;
}

.inventory-section-heading h2 {
  font-size: clamp(1.35rem, 6vw, 1.85rem);
}

.inventory-program-grid,
.inventory-load-list,
.inventory-pallet-grid {
  display: grid;
  gap: 10px;
}

.inventory-program-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 90px;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  color: var(--white);
  background:
    linear-gradient(130deg, rgb(214 185 140 / 7%), transparent 55%),
    var(--surface);
  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.inventory-program-card:hover {
  border-color: rgb(214 185 140 / 48%);
  transform: translateY(-1px);
}

.inventory-program-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 12px;
  color: var(--lime);
  background: rgb(214 185 140 / 8%);
}

.inventory-program-icon svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.inventory-program-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.inventory-program-copy strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-program-copy small {
  color: var(--muted);
  font-size: 0.67rem;
}

.inventory-program-count {
  display: grid;
  min-width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  color: #071006;
  background: var(--lime-light);
  font-size: 0.88rem;
  font-weight: 900;
}

.inventory-program-arrow,
.inventory-load-arrow {
  color: var(--lime);
  font-size: 1.05rem;
}

.inventory-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 34px 18px;
  border: 1px dashed var(--surface-border);
  border-radius: 16px;
  text-align: center;
}

.inventory-empty p {
  max-width: 390px;
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.inventory-load-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas:
    "check copy arrow"
    "check position arrow";
  align-items: center;
  gap: 7px 11px;
  padding: 14px;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  color: var(--white);
  background: var(--surface);
}

.inventory-load-card.is-profitable {
  border-color: rgb(214 185 140 / 42%);
  background:
    linear-gradient(130deg, rgb(214 185 140 / 10%), transparent 62%),
    var(--surface);
}

.inventory-load-check {
  grid-area: check;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgb(255 201 87 / 32%);
  border-radius: 50%;
  color: #ffe4a3;
  background: rgb(138 91 0 / 18%);
  font-size: 1rem;
  font-weight: 900;
}

.inventory-load-card.is-profitable .inventory-load-check {
  border-color: rgb(214 185 140 / 44%);
  color: #071006;
  background: var(--lime-light);
}

.inventory-load-copy {
  grid-area: copy;
  display: grid;
  min-width: 0;
  gap: 4px;
}

.inventory-load-copy strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-load-copy small,
.inventory-load-position small {
  color: var(--muted);
  font-size: 0.65rem;
}

.inventory-load-position {
  grid-area: position;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.inventory-load-position strong {
  color: #ffe4a3;
  font-size: 0.74rem;
}

.inventory-load-card.is-profitable .inventory-load-position strong {
  color: var(--lime-light);
}

.inventory-load-arrow {
  grid-area: arrow;
}

.inventory-pallet-card {
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}

.inventory-pallet-card:target {
  border-color: rgb(214 185 140 / 58%);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 10%);
}

.inventory-pallet-card.is-loss {
  border-color: rgb(255 125 125 / 34%);
}

.inventory-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 210px;
  gap: 2px;
  background: #ffffff;
}

.inventory-photo-item {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.inventory-photo-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.inventory-photo-item:hover img {
  transform: scale(1.025);
}

.inventory-photo-item:only-child {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
}

.inventory-high-resolution {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 999px;
  color: var(--link);
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 5px 18px rgb(0 0 0 / 35%);
  backdrop-filter: blur(8px);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.inventory-high-resolution:hover {
  border-color: var(--lime);
  color: var(--lime-light);
  background: rgb(255 255 255 / 92%);
}

.inventory-high-resolution svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.inventory-photo-grid.is-empty {
  display: grid;
  height: 150px;
  place-items: center;
  color: var(--muted-dark);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 5%), transparent),
    #ffffff;
  font-size: 0.72rem;
}

.inventory-pallet-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 0;
}

.inventory-status {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgb(214 185 140 / 32%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inventory-status-sold {
  border-color: rgb(113 181 255 / 34%);
  color: #1f78a8;
  background: rgb(42 112 187 / 13%);
}

.inventory-status-staging {
  border-color: rgb(255 201 87 / 30%);
  color: #ffe2a0;
  background: rgb(141 92 0 / 13%);
}

.inventory-pallet-heading h3 {
  margin-top: 9px;
  font-size: 1.35rem;
}

.inventory-pallet-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.66rem;
}

.inventory-pallet-location {
  display: grid;
  max-width: 44%;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.inventory-pallet-location span {
  color: var(--muted-dark);
  font-size: 0.58rem;
  font-weight: 760;
  text-transform: uppercase;
}

.inventory-pallet-location strong {
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

.inventory-pallet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 12px 16px 15px;
  border-bottom: 1px solid var(--surface-border);
  color: var(--muted);
  font-size: 0.65rem;
}

.inventory-pallet-meta a {
  color: var(--lime-light);
  font-weight: 760;
}

.inventory-price-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.72fr);
  grid-template-areas:
    "price profit"
    "button button";
  gap: 10px;
  padding: 15px 16px;
}

.inventory-price-form > label {
  grid-area: price;
  display: grid;
  gap: 7px;
}

.inventory-price-form > label > span:first-child,
.inventory-profit-preview > span,
.inventory-sold-price > span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.inventory-price-form .money-input {
  min-height: 55px;
  border-color: rgb(255 255 255 / 27%);
  background: #ffffff;
}

.inventory-price-form .money-input:focus-within {
  border-color: var(--lime);
  background: #ffffff;
}

.inventory-price-form .money-input input {
  font-size: 1rem;
  font-weight: 820;
}

.inventory-profit-preview {
  grid-area: profit;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 12px;
  background: rgb(214 185 140 / 7%);
}

.inventory-profit-preview strong {
  color: var(--lime-light);
  font-size: 1rem;
}

.inventory-profit-preview small {
  color: var(--muted);
  font-size: 0.61rem;
}

.inventory-pallet-card.is-loss .inventory-profit-preview {
  border-color: rgb(255 125 125 / 33%);
  background: rgb(151 40 40 / 11%);
}

.inventory-pallet-card.is-loss .inventory-profit-preview strong {
  color: #ffb3b3;
}

.inventory-price-form > .button {
  grid-area: button;
  width: 100%;
}

.inventory-price-saved {
  margin: 0 16px 14px;
  padding: 10px 12px;
  border: 1px solid rgb(214 185 140 / 27%);
  border-radius: 10px;
  color: #62584c;
  background: rgb(214 185 140 / 8%);
  font-size: 0.69rem;
  font-weight: 760;
}

.inventory-sold-price {
  display: grid;
  gap: 5px;
  padding: 16px;
}

.inventory-sold-price strong {
  color: var(--lime-light);
  font-size: 1.65rem;
}

.inventory-sold-price small {
  color: var(--muted);
  font-size: 0.68rem;
}

.inventory-pallet-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 0 16px 16px;
}

.inventory-pallet-actions .button {
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  font-size: 0.69rem;
}

.archive-profit-state {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  color: #ffe0a0;
  font-weight: 760;
}

.archive-profit-state.is-profitable {
  color: var(--lime-light);
}

.bol-profit-progress {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgb(255 201 87 / 28%);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgb(255 201 87 / 7%), transparent 65%),
    var(--surface);
}

.bol-profit-progress.is-profitable {
  border-color: rgb(214 185 140 / 37%);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 10%), transparent 65%),
    var(--surface);
}

.bol-profit-progress-state {
  display: flex;
  align-items: center;
  gap: 11px;
}

.bol-profit-check {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  color: #291b00;
  background: #ffe0a0;
  font-weight: 900;
}

.bol-profit-progress.is-profitable .bol-profit-check {
  color: #071006;
  background: var(--lime-light);
}

.bol-profit-progress-state > div {
  display: grid;
  gap: 4px;
}

.bol-profit-progress-state span,
.bol-profit-progress-numbers span {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 750;
  text-transform: uppercase;
}

.bol-profit-progress-state strong {
  font-size: 1rem;
}

.bol-profit-progress.is-profitable .bol-profit-progress-state strong {
  color: var(--lime-light);
}

.bol-profit-progress-numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bol-profit-progress-numbers span {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  background: rgb(0 0 0 / 12%);
}

.bol-profit-progress-numbers strong {
  color: var(--white);
  font-size: 0.78rem;
}

.bol-pallet-overview {
  margin-top: 28px;
}

.invoice-delete-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid rgb(255 107 107 / 38%);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgb(255 107 107 / 10%), transparent 62%),
    var(--surface);
}

.invoice-delete-panel .eyebrow {
  margin-bottom: 9px;
  color: #ff9a9a;
}

.invoice-delete-panel .eyebrow span {
  background: var(--danger);
}

.invoice-delete-panel h2 {
  font-size: 1.2rem;
}

.invoice-delete-panel p:last-child {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.invoice-delete-panel .button {
  flex: 0 0 auto;
  padding: 0 19px;
}

.invoice-delete-confirmation {
  max-width: 760px;
}

.invoice-delete-confirmation-card {
  margin-top: 26px;
  padding: 22px 18px;
  border: 1px solid rgb(255 107 107 / 42%);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgb(255 107 107 / 10%), transparent 50%),
    #ffffff;
  box-shadow: 0 28px 80px rgb(0 0 0 / 32%);
}

.invoice-delete-confirmation-card .eyebrow {
  margin-bottom: 15px;
  color: #ff9a9a;
}

.invoice-delete-confirmation-card .eyebrow span {
  background: var(--danger);
}

.invoice-delete-confirmation-card h1 {
  font-size: clamp(2rem, 10vw, 3.8rem);
}

.invoice-delete-lead {
  max-width: 620px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.invoice-delete-lead strong {
  color: var(--white);
}

.invoice-delete-impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 22px;
}

.invoice-delete-impact article {
  display: grid;
  min-height: 92px;
  align-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(255 107 107 / 24%);
  border-radius: 13px;
  background: rgb(255 107 107 / 5%);
}

.invoice-delete-impact span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.invoice-delete-impact strong {
  color: #ff9a9a;
  font-size: 1.45rem;
}

.invoice-delete-warning {
  margin-top: 18px;
  padding: 16px;
  border-left: 3px solid var(--danger);
  border-radius: 0 12px 12px 0;
  background: rgb(255 107 107 / 7%);
}

.invoice-delete-warning strong {
  color: #ffd1d1;
}

.invoice-delete-warning p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.55;
}

.invoice-delete-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.invoice-delete-actions .button {
  width: 100%;
  padding: 0 18px;
  text-align: center;
}

.invoice-delete-final-form {
  display: grid;
  gap: 0;
  margin-top: 20px;
}

.invoice-delete-final-form .field > span:first-child {
  color: #ffd1d1;
}

.invoice-delete-final-form input {
  border-color: rgb(255 107 107 / 42%);
}

.invoice-delete-final-form input:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgb(255 107 107 / 14%);
}

.bol-pallet-overview-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.bol-pallet-overview-heading .eyebrow {
  margin-bottom: 9px;
}

.bol-pallet-overview-heading h2 {
  font-size: 1.45rem;
}

.bol-pallet-overview-heading .button {
  min-height: 42px;
  padding: 0 13px;
  font-size: 0.68rem;
}

.bol-pallet-list {
  display: grid;
  gap: 8px;
}

.bol-pallet-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface);
}

.bol-pallet-thumbnail {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 11px;
  color: var(--muted);
  background: #ffffff;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 800;
}

.bol-pallet-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bol-pallet-row-copy {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 4px;
}

.bol-pallet-row-copy .inventory-status {
  min-height: 20px;
  padding: 0 7px;
  font-size: 0.52rem;
}

.bol-pallet-row-copy > strong {
  font-size: 0.78rem;
}

.bol-pallet-row-copy > small {
  color: var(--muted);
  font-size: 0.6rem;
}

.bol-pallet-row-money {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.bol-pallet-row-money > strong {
  color: var(--lime-light);
  font-size: 0.9rem;
}

.bol-pallet-row-money > small {
  color: var(--muted);
  font-size: 0.58rem;
}

@media (min-width: 720px) {
  .inventory-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .inventory-program-grid,
  .inventory-pallet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-load-card {
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    grid-template-areas: "check copy position arrow";
  }

  .inventory-load-position {
    display: grid;
    justify-items: end;
    gap: 3px;
    text-align: right;
  }

  .inventory-photo-grid {
    height: 250px;
  }

  .bol-profit-progress {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
    align-items: center;
  }

  .bol-pallet-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-delete-panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 22px;
  }

  .invoice-delete-confirmation-card {
    padding: 32px;
  }

  .invoice-delete-impact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .invoice-delete-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .inventory-heading {
    align-items: center;
  }

  .inventory-heading h1 {
    font-size: 2.75rem;
  }

  .inventory-program-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .inventory-program-arrow {
    display: none;
  }

  .inventory-price-form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "price"
      "profit"
      "button";
  }

  .inventory-pallet-actions {
    grid-template-columns: 1fr;
  }

  .inventory-high-resolution span {
    display: none;
  }

  .inventory-high-resolution {
    width: 32px;
    justify-content: center;
    padding: 0;
  }

  .bol-pallet-overview-heading {
    align-items: flex-start;
  }
}

/* Compact inventory program picker, pallet list, and pallet detail */
.inventory-program-picker,
.inventory-pallet-search-section,
.inventory-pallet-list-section,
.inventory-detail-photos,
.inventory-detail-editor {
  margin-top: 34px;
}

.inventory-program-filter {
  padding: 17px;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 7%), transparent 64%),
    var(--surface);
}

.inventory-program-filter > label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inventory-program-select-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.inventory-program-select-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: 13px;
  color: var(--lime);
  background: rgb(214 185 140 / 9%);
}

.inventory-program-select-icon svg,
.inventory-list-thumbnail svg,
.inventory-label-action svg,
.inventory-detail-print svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.inventory-program-select-row select,
.inventory-detail-form select,
.inventory-detail-form input {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 13px;
  outline: none;
  color: var(--white);
  background: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.inventory-program-select-row select {
  padding: 0 42px 0 15px;
}

.inventory-program-select-row select:focus,
.inventory-detail-form select:focus,
.inventory-detail-form input:focus {
  border-color: var(--lime);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.inventory-program-submit {
  min-height: 52px;
  padding: 0 18px;
}

.inventory-pallet-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  padding: 17px;
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  background: var(--surface);
}

.inventory-pallet-search > label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.inventory-pallet-search > label > span:first-child {
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 820;
}

.inventory-pallet-search-control {
  position: relative;
  display: block;
}

.inventory-pallet-search-control svg {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 20px;
  fill: none;
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-width: 1.8;
  transform: translateY(-50%);
  pointer-events: none;
}

.inventory-pallet-search-control input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px 0 46px;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 13px;
  outline: none;
  color: var(--white);
  background: #ffffff;
  font: inherit;
  font-size: 0.78rem;
}

.inventory-pallet-search-control input:focus {
  border-color: var(--lime);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.inventory-pallet-search > .button {
  min-height: 52px;
}

.inventory-pallet-search-clear {
  align-self: center;
  padding: 10px 2px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inventory-list-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}

.inventory-list-heading .eyebrow {
  margin-bottom: 10px;
}

.inventory-list-heading h2 {
  font-size: clamp(1.35rem, 6vw, 1.85rem);
}

.inventory-list-count {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.62rem;
  font-weight: 780;
  text-transform: uppercase;
}

.inventory-list {
  display: grid;
  gap: 9px;
}

.inventory-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  transition:
    border-color 150ms ease,
    transform 150ms ease;
}

.inventory-list-row:hover {
  border-color: rgb(214 185 140 / 43%);
  transform: translateY(-1px);
}

.inventory-list-main {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 11px 14px 11px 11px;
  color: var(--white);
}

.inventory-list-thumbnail {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border-radius: 12px;
  color: var(--lime);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 10%), transparent),
    #ffffff;
  overflow: hidden;
}

.inventory-list-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inventory-list-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.inventory-list-title-line {
  display: flex;
  align-items: center;
  gap: 7px;
}

.inventory-list-title-line > strong {
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-list-title-line .inventory-status {
  min-height: 20px;
  padding: 0 7px;
  font-size: 0.51rem;
}

.inventory-list-copy > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-list-location {
  color: #62584c;
  font-size: 0.62rem;
  font-weight: 720;
}

.inventory-list-price {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.inventory-list-price small {
  color: var(--muted-dark);
  font-size: 0.56rem;
  font-weight: 760;
  text-transform: uppercase;
}

.inventory-list-price strong {
  color: var(--lime-light);
  font-size: 1.02rem;
}

.inventory-list-actions {
  display: grid;
  grid-template-columns: minmax(118px, 1fr) 34px;
  align-items: end;
  gap: 9px;
  padding: 10px;
  border-left: 1px solid var(--surface-border);
}

.inventory-list-actions.has-photo-action {
  grid-template-columns: minmax(112px, 1fr) minmax(112px, 1fr) 34px;
}

.inventory-label-action {
  min-width: 0;
  min-height: 44px;
  gap: 8px;
  padding: 0 16px;
  color: #10150f;
  text-align: center;
  background: #dce3d8;
  box-shadow: 0 8px 18px rgb(0 0 0 / 18%);
  transition:
    color 150ms ease,
    background 150ms ease;
}

.inventory-label-action:hover {
  color: #10150f;
  background: #eff5eb;
}

.inventory-label-action svg {
  width: 20px;
}

.inventory-label-action span {
  font-size: 0.58rem;
  font-weight: 780;
  line-height: 1.1;
}

.inventory-truck-state {
  display: grid;
  width: 34px;
  height: 34px;
  align-self: end;
  place-items: center;
  padding: 0;
  color: #ff6f6f;
  text-align: center;
  background: transparent;
}

.inventory-truck-state > span {
  border: 0;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
}

.inventory-truck-state.is-covered {
  color: var(--lime-light);
  background: transparent;
}

.inventory-detail-heading {
  margin-top: 27px;
}

.inventory-detail-title-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.inventory-detail-title-line h1 {
  font-size: clamp(2.4rem, 10vw, 4.5rem);
  line-height: 0.96;
}

.inventory-detail-print {
  min-height: 44px;
  gap: 7px;
  padding: 0 14px;
  white-space: nowrap;
}

.inventory-detail-print svg {
  width: 18px;
}

.inventory-detail-subline {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  color: var(--muted);
  font-size: 0.67rem;
}

.inventory-detail-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 25px;
}

.inventory-detail-overview article {
  display: grid;
  min-height: 118px;
  align-content: space-between;
  gap: 8px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  background: var(--surface);
}

.inventory-detail-overview article.is-covered {
  border-color: rgb(214 185 140 / 34%);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 9%), transparent),
    var(--surface);
}

.inventory-detail-overview article > span {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inventory-detail-overview article > strong {
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.inventory-detail-overview article.is-covered > strong,
.inventory-detail-overview article.is-covered > strong b {
  color: var(--lime-light);
}

.inventory-detail-overview article > strong b {
  color: #ffb0b0;
}

.inventory-detail-overview article > a,
.inventory-detail-overview article > small {
  color: var(--muted);
  font-size: 0.62rem;
}

.inventory-detail-overview article > a {
  color: var(--lime-light);
  font-weight: 730;
}

.inventory-detail-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.inventory-detail-photo-grid a {
  position: relative;
  min-height: 180px;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  background: var(--surface);
  overflow: hidden;
}

.inventory-detail-photo-grid img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  transition: transform 180ms ease;
}

.inventory-detail-photo-grid a:hover img {
  transform: scale(1.025);
}

.inventory-detail-photo-grid span {
  position: absolute;
  right: 9px;
  bottom: 9px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--white);
  background: rgb(0 0 0 / 70%);
  font-size: 0.58rem;
  font-weight: 760;
}

.inventory-detail-editor {
  margin-bottom: 35px;
  padding: 18px;
  border: 1px solid rgb(214 185 140 / 27%);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 6%), transparent 58%),
    var(--surface);
}

.inventory-detail-saved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  padding: 11px 13px;
  border: 1px solid rgb(214 185 140 / 33%);
  border-radius: 11px;
  color: #62584c;
  background: rgb(214 185 140 / 9%);
  font-size: 0.7rem;
  font-weight: 760;
}

.inventory-detail-saved > span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  color: #071006;
  background: var(--lime-light);
  font-weight: 900;
}

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

.inventory-detail-form > label {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.inventory-detail-form > label > span:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.69rem;
  font-weight: 760;
}

.inventory-detail-form > label > span:first-child small,
.inventory-detail-form > label > small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 650;
}

.inventory-detail-form select {
  padding: 0 42px 0 14px;
}

.inventory-detail-form input {
  padding: 0 13px;
}

.inventory-detail-input-unit {
  position: relative;
}

.inventory-detail-input-unit input {
  padding-right: 49px;
}

.inventory-detail-input-unit.has-prefix input {
  padding-right: 13px;
  padding-left: 39px;
}

.inventory-detail-input-unit > b {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--muted);
  font-size: 0.7rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.inventory-detail-input-unit.has-prefix > b {
  right: auto;
  left: 14px;
  color: var(--lime);
  font-size: 1rem;
}

.inventory-detail-form > .button {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 3px;
}

@media (max-width: 760px) {
  .inventory-list-row {
    grid-template-columns: 1fr;
  }

  .inventory-list-actions {
    grid-template-columns: minmax(0, 1fr) 34px;
    border-top: 1px solid var(--surface-border);
    border-left: 0;
  }

  .inventory-list-actions.has-photo-action {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
  }

  .inventory-label-action {
    min-height: 44px;
  }

  .inventory-truck-state {
    width: 34px;
    height: 34px;
  }

  .inventory-detail-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 500px) {
  .inventory-pallet-search {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .inventory-pallet-search > label {
    grid-column: 1 / -1;
  }

  .inventory-pallet-search > .button {
    width: 100%;
  }

  .inventory-program-select-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .inventory-program-select-icon {
    width: 42px;
    height: 52px;
  }

  .inventory-program-submit {
    grid-column: 1 / -1;
  }

  .inventory-list-main {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px;
  }

  .inventory-list-thumbnail {
    width: 62px;
    height: 62px;
  }

  .inventory-list-price strong {
    font-size: 0.86rem;
  }

  .inventory-list-title-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .inventory-detail-title-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .inventory-detail-title-line h1 {
    font-size: 2.7rem;
  }

  .inventory-detail-photo-grid,
  .inventory-detail-form {
    grid-template-columns: 1fr;
  }

  .inventory-detail-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .inventory-detail-overview article {
    min-width: 0;
    min-height: 112px;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 12px;
  }

  .inventory-detail-overview article > span {
    font-size: 0.48rem;
    letter-spacing: 0.04em;
  }

  .inventory-detail-overview article > strong {
    font-size: 0.76rem;
  }

  .inventory-detail-overview article > a,
  .inventory-detail-overview article > small {
    font-size: 0.52rem;
  }

  .inventory-detail-photo-grid a,
  .inventory-detail-photo-grid img {
    min-height: 220px;
  }
}

/* Admin customer directory and customer account management */
.customer-directory-page,
.customer-detail-page {
  max-width: 940px;
}

.customer-directory-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
}

.customer-directory-heading h1,
.customer-detail-heading h1 {
  font-size: clamp(2.6rem, 11vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.customer-directory-heading > div:first-child > p:last-child {
  max-width: 560px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.customer-total-card {
  display: grid;
  min-width: 152px;
  gap: 4px;
  padding: 17px 19px;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 11%), transparent),
    var(--surface);
}

.customer-total-card span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-total-card strong {
  color: var(--lime);
  font-size: 2rem;
  line-height: 1;
}

.customer-square-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 10%), transparent 62%),
    #ffffff;
}

.customer-square-sync-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.customer-square-sync-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 36%);
  border-radius: 14px;
  color: var(--lime);
  background: rgb(214 185 140 / 8%);
}

.customer-square-sync-icon svg {
  width: 25px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.customer-square-sync h2 {
  margin: 4px 0 3px;
  color: var(--white);
  font-size: 1.05rem;
}

.customer-square-sync-copy > div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.48;
}

.customer-square-sync-action,
.customer-square-sync-action form,
.customer-square-sync-action .button {
  flex: 0 0 auto;
}

.customer-square-sync-action form {
  margin: 0;
}

.customer-square-sync-notice {
  margin-top: 12px;
}

@media (max-width: 700px) {
  .customer-square-sync {
    display: grid;
  }

  .customer-square-sync-action,
  .customer-square-sync-action form,
  .customer-square-sync-action .button {
    width: 100%;
  }
}

.customer-directory-panel {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgb(214 185 140 / 4%), transparent 30%),
    #ffffff;
}

.customer-search-form {
  display: grid;
  gap: 8px;
}

.customer-search-form > label {
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-search-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #4b574b;
  border-radius: 14px;
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.customer-search-shell:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.customer-search-shell svg {
  width: 23px;
  fill: none;
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-width: 1.8;
}

.customer-search-shell input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--white);
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
}

.customer-search-shell input::placeholder {
  color: #62584c;
}

.customer-search-shell button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgb(255 255 255 / 6%);
  cursor: pointer;
  font-size: 1.25rem;
}

.customer-result-status {
  margin: 0;
  color: var(--muted-dark);
  font-size: 0.69rem;
}

.customer-directory-list {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.customer-directory-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 13px;
  min-height: 82px;
  padding: 13px 15px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  color: var(--white);
  background: var(--input-surface);
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.customer-directory-row:hover,
.customer-directory-row:focus-visible {
  border-color: rgb(214 185 140 / 58%);
  outline: none;
  background: #ffffff;
  transform: translateY(-1px);
}

.customer-directory-avatar,
.customer-detail-avatar {
  display: grid;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 35%);
  border-radius: 14px;
  color: var(--lime);
  background: rgb(214 185 140 / 10%);
  font-weight: 860;
  letter-spacing: 0.03em;
}

.customer-directory-avatar {
  width: 48px;
  height: 48px;
  font-size: 0.78rem;
}

.customer-directory-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.customer-directory-copy strong,
.customer-directory-copy small,
.customer-directory-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-directory-copy strong {
  font-size: 0.88rem;
}

.customer-directory-copy small {
  color: var(--muted);
  font-size: 0.69rem;
}

.customer-directory-copy > span {
  color: #62584c;
  font-size: 0.66rem;
}

.customer-directory-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.customer-directory-status > small {
  padding: 5px 8px;
  border-radius: 999px;
  color: #62584c;
  background: rgb(255 255 255 / 5%);
  font-size: 0.58rem;
  font-weight: 820;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.customer-directory-status > .is-active {
  color: var(--lime);
  background: rgb(214 185 140 / 9%);
}

.customer-directory-status > .is-inactive {
  color: #ffb0b0;
  background: rgb(255 98 98 / 9%);
}

.customer-directory-status > .customer-pay-later-badge {
  color: #ffe3a4;
  background: rgb(255 201 87 / 10%);
}

.customer-directory-arrow {
  color: var(--lime);
  font-size: 1rem;
}

.customer-directory-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  padding: 28px;
  border: 1px dashed var(--surface-border);
  border-radius: 15px;
  text-align: center;
}

.customer-directory-empty > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  color: var(--lime);
  background: rgb(214 185 140 / 9%);
}

.customer-directory-empty svg {
  width: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.customer-directory-empty h2 {
  margin-top: 15px;
  font-size: 1.05rem;
}

.customer-directory-empty p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.customer-directory-sentinel {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.7rem;
}

.customer-directory-sentinel[hidden] {
  display: none;
}

.customer-directory-sentinel > span {
  width: 17px;
  height: 17px;
  border: 2px solid rgb(214 185 140 / 20%);
  border-top-color: var(--lime);
  border-radius: 50%;
  animation: customer-directory-spin 800ms linear infinite;
}

.customer-directory-sentinel p {
  margin: 0;
}

.customer-load-retry {
  width: 100%;
  margin-top: 12px;
}

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

.customer-detail-page > .form-alert {
  margin-top: 18px;
}

.customer-detail-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
}

.customer-detail-avatar {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 20px;
  font-size: 1.15rem;
}

.customer-detail-heading h1 {
  margin-top: 8px;
}

.customer-detail-heading p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.customer-detail-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.customer-pay-later-enabled {
  border-color: rgb(255 201 87 / 30%);
  color: #ffe3a4;
  background: rgb(255 201 87 / 9%);
}

.customer-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.customer-detail-summary article {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface);
}

.customer-detail-summary span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 770;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-detail-summary strong {
  font-size: 1.2rem;
}

.customer-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.customer-info-card,
.customer-admin-card {
  padding: 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgb(214 185 140 / 4%), transparent 38%),
    var(--surface);
}

.customer-info-card h2,
.customer-admin-card h2 {
  margin-top: 8px;
  font-size: 1.35rem;
}

.customer-info-list {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
}

.customer-info-list > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--surface-border);
}

.customer-info-list dt {
  color: var(--muted-dark);
  font-size: 0.65rem;
  font-weight: 780;
  text-transform: uppercase;
}

.customer-info-list dd {
  margin: 0;
  color: #62584c;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.customer-info-list a {
  color: var(--lime-light);
}

.customer-info-empty {
  margin-top: 18px;
  padding: 18px;
  border: 1px dashed var(--surface-border);
  border-radius: 13px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.customer-info-empty p {
  margin: 0;
}

.customer-admin-card {
  margin-top: 12px;
}

.customer-pay-later-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  border-color: rgb(255 201 87 / 22%);
  background:
    linear-gradient(130deg, rgb(255 201 87 / 7%), transparent 42%),
    var(--surface);
}

.customer-pay-later-card > div:first-child > p:last-child {
  max-width: 590px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.customer-pay-later-state {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.7rem;
}

.customer-pay-later-state > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6b746b;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 3%);
}

.customer-pay-later-state.is-enabled {
  color: var(--lime);
}

.customer-pay-later-state.is-enabled > span {
  background: var(--lime);
  box-shadow: 0 0 0 4px rgb(214 185 140 / 12%);
}

.customer-notes-card header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.customer-notes-card header > span {
  color: #ffe3a4;
  font-size: 0.65rem;
}

.customer-notes-card form {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.customer-notes-card label {
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 780;
}

.customer-notes-card textarea {
  width: 100%;
  min-height: 164px;
  resize: vertical;
  padding: 14px;
  border: 1px solid #4b574b;
  border-radius: 13px;
  outline: none;
  color: var(--white);
  background: var(--input-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.55;
}

.customer-notes-card textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.customer-notes-card form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customer-notes-card form small {
  color: var(--muted-dark);
  font-size: 0.65rem;
}

.customer-invoice-history {
  margin-top: 12px;
}

.customer-invoice-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.customer-invoice-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--input-surface);
}

.customer-invoice-list article > div {
  display: grid;
  gap: 3px;
}

.customer-invoice-list article > div > span {
  color: var(--muted);
  font-size: 0.66rem;
}

@media (max-width: 700px) {
  .customer-directory-heading {
    align-items: flex-start;
  }

  .customer-total-card {
    min-width: 124px;
    padding: 13px;
  }

  .customer-directory-row {
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    padding: 12px;
  }

  .customer-directory-avatar {
    width: 44px;
    height: 44px;
  }

  .customer-directory-status {
    display: none;
  }

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

  .customer-pay-later-card {
    grid-template-columns: 1fr auto;
  }

  .customer-pay-later-card > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .customer-directory-heading {
    display: grid;
  }

  .customer-total-card {
    min-width: 0;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .customer-total-card strong {
    font-size: 1.55rem;
  }

  .customer-directory-panel {
    padding: 13px;
  }

  .customer-search-shell {
    min-height: 55px;
  }

  .customer-directory-row {
    min-height: 76px;
  }

  .customer-detail-heading {
    align-items: flex-start;
  }

  .customer-detail-avatar {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-radius: 16px;
  }

  .customer-detail-heading h1 {
    font-size: 2.55rem;
  }

  .customer-detail-summary {
    grid-template-columns: 1fr 1fr;
  }

  .customer-detail-summary article:last-child {
    grid-column: 1 / -1;
  }

  .customer-info-card,
  .customer-admin-card {
    padding: 16px;
  }

  .customer-info-list > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .customer-pay-later-card {
    grid-template-columns: 1fr;
  }

  .customer-pay-later-card > div:first-child {
    grid-column: auto;
  }

  .customer-pay-later-card form .button,
  .customer-notes-card form .button {
    width: 100%;
  }

  .customer-notes-card header,
  .customer-notes-card form > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-invoice-list article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .customer-invoice-list article > .record-status {
    display: none;
  }
}

.customer-account-actions {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.customer-account-actions .customer-welcome {
  margin-bottom: 0;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}

.customer-account-actions .customer-welcome.is-hiding {
  opacity: 0;
  transform: translateY(-8px);
}

.family-card-action {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 13px 15px;
  border: 1px solid rgb(214 185 140 / 34%);
  border-radius: 15px;
  color: var(--white);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 12%), transparent 62%),
    var(--surface);
  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.family-card-action:hover {
  border-color: rgb(214 185 140 / 62%);
  transform: translateY(-1px);
}

.family-card-action-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 32%);
  border-radius: 12px;
  color: var(--lime);
  background: rgb(214 185 140 / 9%);
}

.family-card-action-icon svg {
  width: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.family-card-action > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.family-card-action strong {
  font-size: 0.86rem;
}

.family-card-action small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-card-action > span:last-child {
  color: var(--lime);
  font-size: 1.05rem;
}

.claim-pallet-action {
  border-color: rgb(217 224 213 / 30%);
  background:
    linear-gradient(135deg, rgb(217 224 213 / 8%), transparent 62%),
    var(--surface);
}

.customer-invoice-notice {
  margin-bottom: 14px;
}

.customer-claim-bundle {
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
  padding: 18px;
  border: 1px solid rgb(214 185 140 / 34%);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 10%), transparent 56%),
    var(--surface);
}

.customer-claim-bundle > header,
.customer-claim-checkout > div,
.customer-claim-list > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.customer-claim-bundle > header p {
  margin: 0 0 4px;
  color: var(--lime);
  font-size: 0.61rem;
  font-weight: 830;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.customer-claim-bundle > header h2 {
  margin: 0;
  font-size: 1rem;
}

.customer-claim-bundle > header > strong {
  color: var(--lime-light);
  font-size: 1.08rem;
}

.customer-claim-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.customer-claim-pills span {
  padding: 6px 9px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  color: var(--muted);
  background: rgb(0 0 0 / 20%);
  font-size: 0.64rem;
}

.customer-claim-bundle .button {
  width: 100%;
}

.invoice-card-payment {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.invoice-card-payment > strong {
  color: var(--lime-light);
  font-size: 1.05rem;
  white-space: nowrap;
}

.invoice-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.invoice-card-actions > .button,
.invoice-card-actions > form {
  flex: 1 1 0;
  min-width: 132px;
}

.invoice-card-actions > form .button {
  width: 100%;
}

.invoice-card-payment .button {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 0.68rem;
}

.invoice-card-payment .invoice-remove-button {
  border-color: rgb(255 107 107 / 56%);
  color: #ff9a9a;
  background: rgb(121 22 22 / 12%);
  box-shadow: none;
}

.invoice-card-payment .invoice-remove-button:hover {
  border-color: #ff9a9a;
  color: #fff;
  background: rgb(164 35 35 / 46%);
}

.invoice-card-payment small {
  color: var(--muted-dark);
  font-size: 0.61rem;
}

.family-card-workspace {
  max-width: 760px;
}

.family-card-heading {
  margin-top: 24px;
}

.family-card-heading h1 {
  margin-top: 12px;
  font-size: clamp(2.35rem, 11vw, 4.5rem);
}

.family-card-heading > p:last-child {
  max-width: 520px;
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.palletfinds-family-card {
  position: relative;
  display: grid;
  gap: 20px;
  width: 100%;
  margin-top: 25px;
  padding: 20px;
  border: 1px solid rgb(214 185 140 / 48%);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 8%, rgb(214 185 140 / 17%), transparent 34%),
    linear-gradient(145deg, #ffffff, #ffffff 62%);
  box-shadow:
    0 24px 70px rgb(0 0 0 / 36%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
  overflow: hidden;
}

.palletfinds-family-card::after {
  position: absolute;
  right: -62px;
  bottom: -78px;
  width: 190px;
  height: 190px;
  border: 1px solid rgb(214 185 140 / 13%);
  border-radius: 50%;
  content: "";
}

.palletfinds-family-card-header,
.palletfinds-family-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.palletfinds-family-card-header img {
  width: 132px;
  height: 61px;
  object-fit: contain;
  object-position: left center;
}

.palletfinds-family-card-header > span {
  padding: 7px 10px;
  border: 1px solid rgb(214 185 140 / 35%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.palletfinds-family-card-member {
  position: relative;
  z-index: 1;
}

.palletfinds-family-card-member > span,
.palletfinds-family-card-footer > span {
  color: var(--muted);
  font-size: 0.59rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.palletfinds-family-card-member h2 {
  margin-top: 6px;
  font-size: clamp(1.45rem, 7vw, 2.35rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.palletfinds-family-card-member p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.palletfinds-family-card-barcode {
  position: relative;
  z-index: 1;
  padding: 12px 12px 8px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 22px rgb(0 0 0 / 26%);
}

.palletfinds-family-card-barcode img {
  display: block;
  width: 100%;
  height: auto;
}

.palletfinds-family-card-footer {
  align-items: baseline;
}

.palletfinds-family-card-footer strong {
  color: var(--white);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
}

.family-card-help {
  max-width: 560px;
  margin: 17px auto 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.55;
  text-align: center;
}

.claim-pallet-workspace {
  max-width: 820px;
}

.claim-pallet-heading {
  padding-bottom: 18px;
}

.customer-claim-scanner {
  margin-top: 14px;
}

.customer-claim-locked {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
  padding: 19px;
  border: 1px solid rgb(255 201 87 / 28%);
  border-radius: var(--radius-md);
  background: rgb(255 201 87 / 6%);
}

.customer-claim-locked > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 13px;
  background: rgb(255 201 87 / 10%);
}

.customer-claim-locked h2 {
  margin: 1px 0 7px;
  font-size: 1rem;
}

.customer-claim-locked p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.customer-claim-list {
  margin-top: 18px;
}

.customer-claim-list > header {
  margin-bottom: 12px;
}

.customer-claim-list > header h2 {
  margin-top: 7px;
  font-size: 1.3rem;
}

.customer-claim-list > header > span {
  padding: 7px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.65rem;
}

.customer-claim-rows {
  display: grid;
  gap: 8px;
}

.customer-claim-rows article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface);
}

.customer-claim-number {
  display: grid;
  min-width: 57px;
  gap: 2px;
  padding: 8px;
  border-radius: 10px;
  color: var(--lime);
  background: rgb(214 185 140 / 8%);
  text-align: center;
}

.customer-claim-number span,
.customer-claim-price span {
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.customer-claim-number strong {
  font-size: 1rem;
}

.customer-claim-rows article > div:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.customer-claim-rows article > div:nth-child(2) > strong {
  overflow: hidden;
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-claim-rows article > div:nth-child(2) > span {
  color: var(--muted-dark);
  font-size: 0.6rem;
}

.customer-claim-price {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.customer-claim-price strong {
  color: var(--lime-light);
  font-size: 0.84rem;
}

.customer-claim-rows article > form button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgb(255 104 104 / 32%);
  border-radius: 50%;
  color: #ff8d8d;
  background: rgb(255 104 104 / 7%);
  cursor: pointer;
  font-size: 1rem;
}

.customer-claim-checkout {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 17px;
  border: 1px solid rgb(214 185 140 / 34%);
  border-radius: 15px;
  background: rgb(214 185 140 / 6%);
}

.customer-claim-checkout > div span {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 750;
  text-transform: uppercase;
}

.customer-claim-checkout > div strong {
  color: var(--lime-light);
  font-size: 1.35rem;
}

.customer-claim-checkout .button {
  width: 100%;
}

.customer-claim-checkout > small {
  color: var(--muted-dark);
  font-size: 0.63rem;
  line-height: 1.45;
  text-align: center;
}

.customer-claim-empty {
  min-height: 190px;
}

.customer-claim-empty h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

@media (max-width: 719px) {
  .customer-account-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .family-card-action {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    min-height: 88px;
    padding: 11px;
  }

  .family-card-action-icon {
    width: 36px;
    height: 36px;
  }

  .family-card-action-icon svg {
    width: 20px;
  }

  .family-card-action strong {
    font-size: 0.73rem;
    line-height: 1.2;
  }

  .family-card-action small {
    font-size: 0.57rem;
  }

  .family-card-action > span:last-child {
    display: none;
  }

  .invoice-card {
    align-items: flex-start;
  }

  .invoice-card-payment .button {
    white-space: nowrap;
  }
}

@media (max-width: 470px) {
  .customer-claim-rows article {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .customer-claim-price {
    grid-column: 2;
    justify-items: start;
  }

  .customer-claim-rows article > form {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (min-width: 720px) {
  .customer-account-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .customer-account-actions .family-card-action:only-child {
    grid-column: 1 / -1;
    max-width: 460px;
  }

  .palletfinds-family-card {
    gap: 24px;
    padding: 28px;
    border-radius: 26px;
  }

  .palletfinds-family-card-header img {
    width: 158px;
    height: 70px;
  }

  .palletfinds-family-card-barcode {
    padding: 16px 18px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-account-actions .customer-welcome {
    transition: none;
  }
}

/* Two-invoice receiving intake */
.invoice-type-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.invoice-type-option {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.1rem 0.65rem;
  align-items: center;
  min-width: 0;
  padding: 0.9rem;
  color: var(--muted);
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #465046;
  border-radius: 1rem;
}

.invoice-type-option > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: #050805;
  font-weight: 900;
  background: #dfe5dc;
  border-radius: 999px;
}

.invoice-type-option strong,
.invoice-type-option small {
  min-width: 0;
}

.invoice-type-option strong {
  color: #f7faf6;
  font-size: 0.9rem;
  line-height: 1.1;
}

.invoice-type-option small {
  font-size: 0.72rem;
  line-height: 1.2;
}

.invoice-type-option.is-active {
  color: #62584c;
  background: #ffffff;
  border-color: var(--lime);
  box-shadow: 0 0 0 1px rgb(121 255 31 / 18%);
}

.invoice-type-option.is-active > span {
  background: var(--lime);
}

.invoice-workflow-note {
  margin-bottom: 1rem;
  padding: 1rem;
  background: #ffffff;
  border-left: 3px solid var(--lime);
  border-radius: 0 0.85rem 0.85rem 0;
}

.invoice-workflow-note strong {
  display: block;
  margin-bottom: 0.3rem;
  color: #f8fbf7;
}

.invoice-workflow-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.shipping-correction-grid {
  display: grid;
  gap: 0.8rem;
}

.bol-upload-fields .field-group > span small {
  color: var(--muted);
  font-weight: 600;
}

.pending-receiving-panel {
  margin-top: 1.25rem;
  padding: 1.15rem;
  background: #ffffff;
  border: 1px solid #2c5620;
  border-radius: 1.4rem;
}

.invoice-pending-total {
  display: grid;
  min-width: 4.3rem;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.65rem 0.8rem;
  color: var(--muted);
  background: rgb(214 185 140 / 8%);
  border: 1px solid rgb(214 185 140 / 32%);
  border-radius: 1rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.invoice-pending-total strong {
  color: var(--lime-light);
  font-size: 1.45rem;
  line-height: 1;
}

.invoice-page-alert {
  margin-top: 1.1rem;
}

.freight-selection-panel {
  margin-top: 1.5rem;
}

.pending-receiving-heading {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.pending-receiving-heading h2 {
  margin: 0.35rem 0 0;
  color: #f8fbf7;
  font-size: clamp(1.35rem, 7vw, 2rem);
  line-height: 1.05;
}

.pending-receiving-heading > strong {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  color: #050805;
  font-size: 1.2rem;
  background: var(--lime-light);
  border-radius: 999px;
}

.pending-receiving-list {
  display: grid;
  gap: 0.8rem;
}

.pending-receiving-list article {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #354235;
  border-radius: 1rem;
}

.pending-receiving-list article.is-selected {
  border-color: rgb(214 185 140 / 58%);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 10%), transparent 62%),
    #ffffff;
  box-shadow: 0 0 0 2px rgb(214 185 140 / 8%);
}

.pending-receiving-list article > div:first-child {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.pending-receiving-list span,
.pending-receiving-list small {
  color: var(--muted);
}

.pending-receiving-list article > div:first-child > span {
  color: var(--lime);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pending-receiving-list article > div:first-child > strong {
  overflow-wrap: anywhere;
  color: #f8fbf7;
}

.pending-receiving-value {
  display: grid;
  gap: 0.65rem;
}

.pending-receiving-value > strong {
  color: #f8fbf7;
  font-size: 1.15rem;
}

.pending-receiving-value .button {
  width: 100%;
}

.freight-selected-state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--lime-light) !important;
  font-size: 0.82rem !important;
}

.freight-selected-state > span {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  color: #071006;
  background: var(--lime-light);
  border-radius: 999px;
  font-weight: 900;
}

.pending-receiving-empty {
  padding: 1rem;
  color: var(--muted);
  text-align: center;
  background: #ffffff;
  border: 1px dashed #3b493b;
  border-radius: 1rem;
}

.pending-receiving-empty strong {
  color: #f8fbf7;
}

.pending-receiving-empty p {
  margin: 0.35rem 0 0;
}

.pending-receiving-empty .button {
  width: 100%;
  margin-top: 0.9rem;
}

.record-status-pending_shipping {
  color: #11150f;
  background: #dfe5dc;
  border-color: #dfe5dc;
}

.invoice-document-buttons {
  display: grid;
  gap: 0.65rem;
  width: 100%;
}

.invoice-document-buttons .button {
  width: 100%;
}

/* Site-wide save confirmation */
.site-save-toast {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(390px, calc(100vw - 32px));
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 16px;
  overflow: hidden;
  border: 1px solid rgb(166 255 98 / 45%);
  border-radius: 15px;
  color: var(--white);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 13%), transparent 70%),
    #ffffff;
  box-shadow:
    0 18px 55px rgb(0 0 0 / 55%),
    0 0 0 1px rgb(0 0 0 / 35%);
  opacity: 1;
  transform: translate(-50%, -50%);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.site-save-toast.is-hiding {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 12px));
}

.site-save-toast-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #071006;
  background: var(--lime-light);
  box-shadow: 0 0 22px rgb(214 185 140 / 22%);
  font-size: 1rem;
  font-weight: 950;
}

.site-save-toast-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.site-save-toast-copy strong {
  font-size: 0.82rem;
}

.site-save-toast-copy small {
  overflow: hidden;
  color: #62584c;
  font-size: 0.65rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-save-toast button {
  display: grid;
  width: 31px;
  height: 31px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 1.25rem;
}

.site-save-toast button:hover {
  color: var(--white);
  background: rgb(255 255 255 / 7%);
}

.site-save-toast-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--lime);
  transform-origin: left;
  animation: site-save-toast-countdown 5s linear forwards;
}

@keyframes site-save-toast-countdown {
  to {
    transform: scaleX(0);
  }
}

@media (max-width: 500px) {
  .site-save-toast {
    width: calc(100vw - 24px);
  }
}

@media (min-width: 1040px) {
  .public-pallet-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-save-toast {
    transition: none;
  }

  .site-save-toast-progress {
    animation: none;
  }
}

@media (min-width: 720px) {
  .invoice-type-option {
    padding: 1rem 1.15rem;
  }

  .shipping-correction-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pending-receiving-panel {
    padding: 1.5rem;
  }

  .pending-receiving-list article {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .pending-receiving-value {
    min-width: 13rem;
    justify-items: end;
  }

  .invoice-document-buttons {
    width: auto;
    grid-template-columns: auto auto;
  }
}

/* Customer storefront */
.storefront-page {
  background:
    radial-gradient(circle at 85% 0%, rgb(214 185 140 / 9%), transparent 30rem),
    var(--black);
}

.storefront-shell {
  overflow: visible;
}

.storefront-header {
  position: relative;
  z-index: 40;
  display: flex;
  width: 100%;
  max-width: 1180px;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--surface-border);
}

.storefront-brand {
  display: flex;
  width: 112px;
  min-height: 56px;
  align-items: center;
}

.storefront-brand img {
  display: block;
  width: 112px;
  height: auto;
}

.storefront-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.storefront-header-in-store {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px 14px;
}

.storefront-header-in-store .storefront-brand {
  grid-row: 1;
  grid-column: 1;
}

.storefront-header-in-store .storefront-header-actions {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
}

.storefront-open-status {
  display: grid;
  grid-row: 2;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgb(146 255 70 / 52%);
  border-radius: 16px;
  background:
    radial-gradient(circle at 10% 50%, rgb(214 185 140 / 19%), transparent 38%),
    linear-gradient(115deg, #ffffff, #ffffff 68%);
  box-shadow:
    inset 0 0 18px rgb(214 185 140 / 7%),
    0 0 22px rgb(214 185 140 / 12%);
}

.storefront-open-state {
  display: grid;
  align-content: center;
  line-height: 1;
}

.storefront-open-state strong {
  color: #e5c79a;
  font-size: clamp(1.8rem, 9vw, 3rem);
  font-weight: 950;
  letter-spacing: -0.055em;
  text-shadow:
    0 0 9px rgb(214 185 140 / 72%),
    0 0 22px rgb(214 185 140 / 42%);
}

.storefront-open-state span {
  margin-top: 2px;
  color: #62584c;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.storefront-open-details {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.storefront-open-details address {
  overflow-wrap: anywhere;
  color: var(--white);
  font-size: 0.69rem;
  font-style: normal;
  font-weight: 780;
  line-height: 1.35;
}

.storefront-open-details small {
  color: #62584c;
  font-size: 0.64rem;
  line-height: 1.35;
}

.storefront-cart {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 50%;
  color: var(--white);
  background: #ffffff;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    background 150ms ease;
}

.storefront-cart:hover {
  border-color: rgb(214 185 140 / 55%);
  color: var(--lime-light);
  background: #ffffff;
}

.storefront-cart svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.storefront-cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid var(--black);
  border-radius: 999px;
  color: #071006;
  background: var(--lime-light);
  font-size: 0.65rem;
  font-weight: 900;
}

.storefront-header .menu-button {
  width: 46px;
  height: 46px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 50%;
  background: #ffffff;
}

.storefront-header .menu-button:hover,
.storefront-header .menu-button[aria-expanded="true"] {
  border-color: rgb(214 185 140 / 55%);
  background: #ffffff;
}

.storefront-menu-panel {
  right: 0;
}

.storefront-main {
  width: 100%;
  max-width: 1180px;
  flex: 1;
  margin: 0 auto;
}

.shopping-window {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 18px 0 30px;
  padding: 14px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 4%), transparent),
    #ffffff;
}

.shopping-window-online {
  border-color: rgb(214 185 140 / 34%);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 11%), transparent 62%),
    #ffffff;
}

.shopping-window-state {
  color: var(--lime-light);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-shadow: 0 0 14px rgb(214 185 140 / 52%);
}

.shopping-window-copy,
.shopping-window-hours {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.shopping-window-copy strong {
  color: var(--white);
  font-size: 0.88rem;
}

.shopping-window-copy small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.shopping-window-hours {
  grid-column: 1 / -1;
  padding: 12px 0 0 54px;
  border-top: 1px solid var(--surface-border);
}

.shopping-window-hours small {
  color: var(--muted-dark);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.shopping-window-hours strong {
  color: var(--white);
  font-size: 0.76rem;
}

.storefront-reopen-hero {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: hidden;
  margin: 16px 0 28px;
  padding: 20px;
  border: 1px solid rgb(214 185 140 / 44%);
  border-radius: 23px;
  background:
    radial-gradient(circle at 82% 18%, rgb(214 185 140 / 20%), transparent 32%),
    linear-gradient(140deg, #ffffff, #ffffff 66%);
  box-shadow:
    inset 0 0 26px rgb(214 185 140 / 6%),
    0 16px 38px rgb(0 0 0 / 28%),
    0 0 26px rgb(214 185 140 / 8%);
}

.storefront-reopen-hero::after {
  position: absolute;
  right: -68px;
  bottom: -88px;
  width: 190px;
  height: 190px;
  border: 1px solid rgb(214 185 140 / 15%);
  border-radius: 50%;
  box-shadow: 0 0 58px rgb(214 185 140 / 14%);
  content: "";
  pointer-events: none;
}

.storefront-reopen-copy,
.storefront-reopen-time {
  position: relative;
  z-index: 1;
}

.storefront-reopen-copy .eyebrow {
  margin: 0 0 8px;
  font-size: 0.62rem;
}

.storefront-reopen-copy h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.85rem, 9vw, 3.25rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.storefront-reopen-copy > p:last-child {
  max-width: 480px;
  margin: 10px 0 0;
  color: #62584c;
  font-size: 0.77rem;
  line-height: 1.5;
}

.storefront-reopen-time {
  display: grid;
  gap: 4px;
  padding: 17px 18px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 18px;
  background: rgb(255 255 255 / 72%);
  box-shadow: inset 0 0 20px rgb(214 185 140 / 5%);
}

.storefront-reopen-time small {
  color: #62584c;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.storefront-reopen-time strong {
  color: #e5c79a;
  font-size: clamp(2rem, 10.5vw, 4rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.055em;
  text-shadow:
    0 0 11px rgb(214 185 140 / 62%),
    0 0 27px rgb(214 185 140 / 30%);
}

.storefront-reopen-time span {
  color: #62584c;
  font-size: 0.63rem;
  font-weight: 750;
}

.storefront-public-hours {
  margin: 26px 0 50px;
}

.storefront-public-hours-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 0 2px;
}

.storefront-public-hours-heading small {
  display: block;
  margin-bottom: 4px;
  color: var(--lime-light);
  font-size: 0.55rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.storefront-public-hours-heading h2 {
  margin: 0;
  font-size: clamp(1.25rem, 5vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.storefront-public-hours-heading > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 750;
}

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

.storefront-public-hours-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 17px;
  background: #ffffff;
}

.storefront-public-hours-online {
  border-color: rgb(214 185 140 / 30%);
  background:
    linear-gradient(145deg, rgb(214 185 140 / 8%), transparent 50%),
    #ffffff;
}

.storefront-public-hours-card > header {
  min-height: 62px;
  padding: 12px;
  border-bottom: 1px solid var(--surface-border);
}

.storefront-public-hours-card > header small {
  display: block;
  margin-bottom: 5px;
  color: var(--lime-light);
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.storefront-public-hours-card > header h3 {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.1;
}

.storefront-public-hours-card dl {
  margin: 0;
}

.storefront-public-hours-card dl > div {
  display: grid;
  gap: 3px;
  min-height: 56px;
  align-content: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgb(215 194 163 / 48%);
}

.storefront-public-hours-card dl > div:last-child {
  border-bottom: 0;
}

.storefront-public-hours-card dl > div.is-today {
  background: rgb(214 185 140 / 9%);
  box-shadow: inset 3px 0 var(--lime-light);
}

.storefront-public-hours-card dt {
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.storefront-public-hours-card dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--white);
  font-size: 0.67rem;
  font-weight: 730;
  line-height: 1.35;
}

.storefront-website-hours {
  display: grid;
  gap: 3px;
}

.storefront-website-hours span:last-child:not(:first-child) {
  color: var(--white);
}

.storefront-public-hours-card .is-closed dd {
  color: var(--muted);
}

.storefront-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  padding: 15px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  color: #62584c;
  background: #ffffff;
  font-size: 0.82rem;
  line-height: 1.45;
}

.storefront-notice-success {
  border-color: rgb(214 185 140 / 43%);
  background: rgb(214 185 140 / 9%);
}

.storefront-notice-error {
  border-color: rgb(255 107 107 / 42%);
  background: rgb(255 107 107 / 8%);
}

.storefront-notice > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #071006;
  background: var(--lime-light);
  font-weight: 900;
}

.storefront-notice p {
  flex: 1;
  margin: 0;
}

.storefront-notice p strong {
  display: block;
}

.storefront-notice a {
  flex: 0 0 auto;
  color: var(--lime-light);
  font-weight: 800;
}

.storefront-catalog {
  margin-bottom: 64px;
}

.storefront-catalog-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 22px;
  border-bottom: 1px solid var(--surface-border);
}

.storefront-catalog-header .eyebrow {
  margin-bottom: 9px;
}

.storefront-catalog-header h1,
.storefront-catalog-header h2 {
  margin: 0;
  font-size: clamp(2.7rem, 14vw, 5.8rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.storefront-program-filter {
  display: grid;
  gap: 12px;
  margin: 20px 0 34px;
  padding: 18px;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 5%), transparent 60%),
    #ffffff;
}

.storefront-program-filter label {
  display: grid;
  gap: 3px;
}

.storefront-program-filter label > span {
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.storefront-program-filter label > small {
  color: var(--muted);
  font-size: 0.7rem;
}

.storefront-select-wrap {
  position: relative;
}

.storefront-select-wrap::after {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--lime-light);
  border-bottom: 2px solid var(--lime-light);
  content: "";
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.storefront-program-filter select {
  width: 100%;
  min-height: 56px;
  padding: 0 48px 0 16px;
  border: 1px solid var(--input-border);
  border-radius: 14px;
  color: var(--white);
  background: var(--input-surface);
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.storefront-program-filter select:hover {
  border-color: var(--input-border-hover);
  background: #ffffff;
}

.storefront-program-filter select:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 13%);
  outline: none;
}

.storefront-filter-submit {
  min-height: 54px;
  padding: 0 22px;
}

.storefront-programs {
  display: grid;
  gap: 26px;
}

.storefront-program-shelf {
  min-width: 0;
  padding: 18px 0 20px;
  border-top: 1px solid rgb(255 255 255 / 9%);
}

.storefront-program-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.storefront-program-heading p {
  margin: 0 0 5px;
  color: var(--lime);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.storefront-program-heading h2 {
  margin: 0;
  font-size: clamp(1.7rem, 7vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.storefront-program-heading > a {
  flex: 0 0 auto;
  padding: 9px 0;
  color: var(--lime-light);
  font-size: 0.76rem;
  font-weight: 800;
}

.storefront-carousel-shell {
  position: relative;
  min-width: 0;
}

.storefront-carousel {
  display: grid;
  grid-auto-columns: min(82vw, 330px);
  grid-auto-flow: column;
  gap: 14px;
  padding: 2px 2px 15px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-color: rgb(214 185 140 / 38%) transparent;
  scrollbar-width: thin;
}

.storefront-carousel .storefront-product-card {
  scroll-snap-align: start;
}

.storefront-carousel-button {
  position: absolute;
  z-index: 3;
  top: 42%;
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 45%);
  border-radius: 50%;
  color: var(--white);
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 12px 30px rgb(0 0 0 / 42%);
  cursor: pointer;
  transform: translateY(-50%);
}

.storefront-carousel-button:hover {
  color: #071006;
  background: var(--lime-light);
}

.storefront-carousel-button:disabled {
  border-color: rgb(255 255 255 / 10%);
  color: rgb(255 255 255 / 28%);
  background: rgb(255 255 255 / 78%);
  cursor: default;
}

.storefront-carousel-previous {
  left: -18px;
}

.storefront-carousel-next {
  right: -18px;
}

.storefront-program-more {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding: 0 14px;
  border: 1px solid var(--surface-border);
  border-radius: 13px;
  color: #62584c;
  background: #ffffff;
  font-size: 0.76rem;
  font-weight: 780;
}

.storefront-program-more:hover {
  border-color: rgb(214 185 140 / 45%);
  color: var(--lime-light);
}

.storefront-product-card {
  display: block;
  min-width: 0;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.storefront-product-card:hover {
  border-color: rgb(214 185 140 / 48%);
  box-shadow: 0 20px 55px rgb(0 0 0 / 38%);
  transform: translateY(-3px);
}

.storefront-product-card .public-pallet-photo {
  min-height: 210px;
}

.storefront-product-card .public-pallet-photo > img {
  height: 230px;
  transition: transform 240ms ease;
}

.storefront-product-card:hover .public-pallet-photo > img {
  transform: scale(1.025);
}

.storefront-photo-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  color: var(--white);
  background: rgb(255 255 255 / 82%);
  font-size: 0.64rem;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.storefront-product-card .public-pallet-card-body {
  padding: 16px;
}

.storefront-product-card .public-pallet-card-body h3 {
  margin: 7px 0 15px;
}

.storefront-product-card .public-pallet-price {
  align-items: center;
}

.storefront-product-card .public-pallet-price > span {
  color: var(--lime-light);
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.storefront-product-card .public-pallet-price > .public-pallet-price-locked {
  color: var(--link);
  font-size: 0.76rem;
  letter-spacing: 0;
}

.storefront-product-card .public-pallet-price > strong {
  color: #62584c;
  font-size: 0.72rem;
}

.storefront-product-card .public-pallet-price > strong span {
  color: var(--lime);
}

.storefront-back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  color: #62584c;
  font-size: 0.8rem;
  font-weight: 800;
}

.storefront-back-link:hover {
  color: var(--lime-light);
}

.storefront-program-page .storefront-catalog-header h1 {
  font-size: clamp(2.5rem, 12vw, 5rem);
  overflow-wrap: anywhere;
}

.storefront-program-description,
.storefront-pallet-program-info {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgb(214 185 140 / 8%), transparent 58%),
    #ffffff;
}

.storefront-program-description {
  margin: 0 0 22px;
}

.storefront-program-description h2,
.storefront-pallet-program-info h2 {
  color: var(--white);
  font-size: clamp(1.55rem, 7vw, 2.35rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.storefront-program-description-lead {
  margin: 2px 0 0;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.6;
  white-space: pre-line;
}

.storefront-program-description-details {
  padding-top: 11px;
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: #62584c;
  font-size: 0.78rem;
  line-height: 1.7;
  white-space: pre-line;
}

.storefront-program-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.storefront-product {
  display: grid;
  gap: 24px;
  margin: 0 0 64px;
}

.storefront-gallery,
.storefront-product-details {
  min-width: 0;
}

.storefront-main-photo {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: 22px;
  background: #ffffff;
}

.storefront-main-photo > img {
  display: block;
  width: 100%;
  min-height: 330px;
  max-height: 680px;
  object-fit: contain;
  background: #ffffff;
  transition:
    opacity 160ms ease,
    filter 160ms ease;
}

.storefront-main-photo[aria-busy="true"] > img {
  opacity: 0.28;
  filter: blur(2px);
}

.storefront-high-resolution-button {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  padding: 8px 11px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  color: var(--white);
  background: rgb(255 255 255 / 82%);
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.storefront-high-resolution-button:hover {
  border-color: var(--lime);
  color: var(--lime-light);
  background: rgb(255 255 255 / 94%);
}

.storefront-high-resolution-button:disabled {
  color: rgb(255 255 255 / 45%);
  cursor: wait;
}

.storefront-photo-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--white);
  background: rgb(255 255 255 / 74%);
  text-align: center;
  backdrop-filter: blur(7px);
}

.storefront-photo-loading strong,
.storefront-resolution-loading strong,
.storefront-resolution-error strong {
  font-size: 0.86rem;
}

.storefront-photo-loading small,
.storefront-resolution-loading small,
.storefront-resolution-error small {
  color: #62584c;
  font-size: 0.7rem;
}

.storefront-loading-spinner {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 3px;
  border: 3px solid rgb(255 255 255 / 16%);
  border-top-color: var(--lime-light);
  border-radius: 50%;
  animation: storefront-photo-spin 700ms linear infinite;
}

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

.storefront-main-photo-empty {
  display: grid;
  min-height: 360px;
  place-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.storefront-main-photo-empty > span {
  color: rgb(214 185 140 / 44%);
  font-size: 4.5rem;
  font-weight: 950;
  letter-spacing: -0.09em;
}

.storefront-thumbnails {
  display: grid;
  grid-auto-columns: 84px;
  grid-auto-flow: column;
  gap: 10px;
  margin-top: 11px;
  padding: 2px;
  overflow-x: auto;
}

.storefront-thumbnail {
  width: 84px;
  height: 74px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--surface-border);
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}

.storefront-thumbnail.is-active {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgb(214 185 140 / 15%);
}

.storefront-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.has-resolution-viewer {
  overflow: hidden;
}

.storefront-resolution-viewer {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    calc(12px + var(--safe-top))
    12px
    calc(12px + var(--safe-bottom));
}

.storefront-resolution-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgb(0 0 0 / 90%);
  cursor: zoom-out;
  backdrop-filter: blur(10px);
}

.storefront-resolution-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1380px, 100%);
  height: min(900px, 100%);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 30px 100px rgb(0 0 0 / 70%);
}

.storefront-resolution-panel > header {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 12px 11px 18px;
  border-bottom: 1px solid var(--surface-border);
  background: #ffffff;
}

.storefront-resolution-panel > header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.storefront-resolution-panel > header small {
  color: var(--lime);
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.storefront-resolution-panel > header strong {
  overflow: hidden;
  color: var(--white);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storefront-resolution-close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 50%;
  color: var(--white);
  background: #ffffff;
  cursor: pointer;
}

.storefront-resolution-close:hover {
  border-color: var(--lime);
  color: var(--lime-light);
}

.storefront-resolution-close span {
  margin-top: -2px;
  font-size: 1.6rem;
  line-height: 1;
}

.storefront-resolution-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: auto;
  background:
    radial-gradient(circle, rgb(214 185 140 / 7%), transparent 46%),
    #ffffff;
}

.storefront-resolution-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.storefront-resolution-loading,
.storefront-resolution-error {
  display: grid;
  max-width: 320px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
}

.storefront-resolution-error {
  color: var(--danger);
}

.storefront-product-details {
  align-self: start;
  padding: 22px;
  border: 1px solid var(--surface-border);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 5%), transparent 55%),
    #ffffff;
}

.storefront-program-pill {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.storefront-product-details h1 {
  margin: 18px 0 26px;
  font-size: clamp(2.8rem, 14vw, 5.25rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.storefront-product-price {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}

.storefront-product-price span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.storefront-product-price strong {
  color: var(--lime-light);
  font-size: clamp(2.1rem, 10vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.storefront-product-price-locked strong {
  color: var(--link);
  font-size: clamp(1.15rem, 5vw, 1.55rem);
  letter-spacing: -0.01em;
}

.storefront-product-facts {
  display: grid;
  gap: 0;
  margin: 10px 0 24px;
}

.storefront-product-facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
}

.storefront-product-facts dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
}

.storefront-product-facts dd {
  margin: 0;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: right;
}

.storefront-pallet-program-info {
  margin: 0 0 24px;
}

.storefront-buy-button {
  width: 100%;
  min-height: 58px;
  padding: 0 22px;
}

.storefront-buy-disabled,
.storefront-buy-disabled:disabled {
  border-color: var(--surface-border);
  color: #62584c;
  background: #ffffff;
  cursor: not-allowed;
  opacity: 1;
}

.storefront-buy-help {
  margin: 12px 3px 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: center;
}

.storefront-page .landing-footer {
  padding-top: 10px;
}

@media (min-width: 620px) {
  .storefront-header-in-store {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
  }

  .storefront-header-in-store .storefront-brand {
    grid-row: 1;
    grid-column: 1;
  }

  .storefront-header-in-store .storefront-open-status {
    grid-row: 1;
    grid-column: 2;
  }

  .storefront-header-in-store .storefront-header-actions {
    grid-row: 1;
    grid-column: 3;
  }

  .storefront-open-status {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 10px 14px;
  }

  .storefront-reopen-hero {
    grid-template-columns: minmax(0, 0.8fr) minmax(260px, 0.55fr);
    align-items: center;
    gap: 28px;
    padding: 25px 28px;
  }

  .storefront-reopen-time {
    justify-items: end;
    text-align: right;
  }

  .shopping-window {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 15px 18px;
  }

  .shopping-window-hours {
    grid-column: auto;
    padding: 0 0 0 20px;
    border-top: 0;
    border-left: 1px solid var(--surface-border);
    text-align: right;
  }

  .storefront-program-filter {
    grid-template-columns: minmax(150px, 0.65fr) minmax(240px, 1fr) auto;
    align-items: end;
  }

  .storefront-filter-submit {
    min-width: 150px;
  }

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

  .storefront-public-hours-grid {
    gap: 14px;
  }

  .storefront-public-hours-card dl > div {
    grid-template-columns: minmax(72px, 0.35fr) minmax(0, 1fr);
    align-items: center;
    min-height: 48px;
    gap: 12px;
  }

  .storefront-public-hours-card dd {
    text-align: right;
  }
}

@media (min-width: 860px) {
  .storefront-brand {
    width: 132px;
  }

  .storefront-brand img {
    width: 132px;
  }

  .storefront-carousel {
    grid-auto-columns: min(31vw, 340px);
    padding-right: 3px;
    padding-left: 3px;
  }

  .storefront-carousel-button {
    display: grid;
  }

  .storefront-program-more {
    display: none;
  }

  .storefront-product {
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
    gap: 34px;
    align-items: start;
  }

  .storefront-product-details {
    position: sticky;
    top: 24px;
    padding: 30px;
  }
}

@media (min-width: 1040px) {
  .storefront-program-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .storefront-notice {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .storefront-notice a {
    width: 100%;
    padding-left: 42px;
  }

  .storefront-catalog-header {
    align-items: start;
  }

  .storefront-catalog-header .public-inventory-count {
    margin-top: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storefront-carousel {
    scroll-behavior: auto;
  }

  .storefront-product-card,
  .storefront-product-card .public-pallet-photo > img,
  .storefront-main-photo > img {
    transition: none;
  }

  .storefront-loading-spinner {
    animation-duration: 1400ms;
  }
}

/* Pickup policy and sold-pallet fulfillment */
.storage-policy-form {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.storage-policy-toggle {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--input-surface);
}

.storage-policy-toggle > span {
  display: grid;
  gap: 4px;
}

.storage-policy-toggle strong,
.storage-policy-fields label > span {
  color: var(--white);
  font-size: 0.76rem;
}

.storage-policy-toggle small {
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.4;
}

.storage-policy-toggle input {
  width: 23px;
  height: 23px;
  accent-color: var(--lime);
}

.storage-policy-fields {
  display: grid;
  gap: 10px;
}

.storage-policy-fields > label {
  display: grid;
  gap: 7px;
}

.storage-policy-input {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--lime);
  background: var(--input-surface);
}

.storage-policy-input:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.storage-policy-input input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--white);
  background: transparent;
  font: inherit;
}

.storage-policy-input > span {
  color: var(--muted);
  font-size: 0.72rem;
}

.storage-policy-form > .button {
  width: 100%;
}

.pickup-invoice-form {
  display: grid;
  gap: 10px;
}

.pickup-date-field {
  display: grid;
  gap: 7px;
}

.pickup-date-field > span {
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 760;
}

.pickup-date-field input {
  width: 100%;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid var(--input-border);
  border-radius: 11px;
  color: var(--white);
  color-scheme: dark;
  background: var(--input-surface);
  font: inherit;
}

.pickup-date-field input:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.pickup-date-field small,
.pickup-free-window {
  margin: 0;
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.45;
}

.storage-fee-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(255 201 87 / 36%);
  border-radius: 11px;
  color: #fff1c9;
  background: rgb(255 201 87 / 8%);
  font-size: 0.68rem;
  line-height: 1.45;
}

.storage-fee-consent[hidden] {
  display: none;
}

.storage-fee-consent input {
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  accent-color: var(--lime);
}

.storage-fee-consent strong {
  color: var(--white);
}

.invoice-storage-fee {
  display: block;
  margin-top: 5px;
  color: #ffd475;
  font-size: 0.62rem;
}

.sold-pallets-workspace {
  max-width: 1040px;
}

.sold-pallets-heading {
  display: grid;
  gap: 20px;
  margin-top: 22px;
}

.sold-pallets-heading h1 {
  margin-top: 12px;
  font-size: clamp(2.65rem, 13vw, 5rem);
  letter-spacing: -0.055em;
}

.sold-pallets-heading > div:first-child > p:last-child {
  max-width: 620px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

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

.sold-summary article {
  display: grid;
  min-height: 90px;
  align-content: center;
  gap: 5px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  background: var(--surface);
}

.sold-summary article:first-child {
  border-color: rgb(214 185 140 / 35%);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 9%), transparent 70%),
    var(--surface);
}

.sold-summary strong {
  color: var(--lime-light);
  font-size: 1.7rem;
  line-height: 1;
}

.sold-summary span {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 760;
  text-transform: uppercase;
}

.sold-result-message {
  margin-top: 18px;
}

.sold-section {
  margin-top: 36px;
}

.sold-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.sold-section-heading h2 {
  margin-top: 7px;
  font-size: clamp(1.35rem, 6vw, 1.9rem);
}

.sold-section-heading > span {
  padding: 7px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.63rem;
  white-space: nowrap;
}

.sold-customer-list {
  display: grid;
  gap: 13px;
}

.sold-customer-card {
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  background: var(--surface);
}

.sold-customer-card-paid {
  border-color: rgb(214 185 140 / 31%);
}

.sold-customer-card-unpaid {
  border-color: rgb(255 107 107 / 35%);
}

.sold-customer-card-canceled {
  border-color: rgb(255 74 74 / 58%);
  box-shadow: 0 0 0 3px rgb(255 74 74 / 5%);
}

.sold-customer-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 15px;
  padding: 17px;
  border-bottom: 1px solid var(--surface-border);
  background:
    linear-gradient(130deg, rgb(214 185 140 / 7%), transparent 60%);
}

.sold-customer-card-unpaid .sold-customer-heading {
  background:
    linear-gradient(130deg, rgb(255 107 107 / 9%), transparent 60%);
}

.sold-customer-card-canceled .sold-customer-heading {
  background:
    linear-gradient(130deg, rgb(255 74 74 / 15%), transparent 64%);
}

.sold-customer-heading h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.sold-customer-heading p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.sold-customer-heading a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgb(214 185 140 / 45%);
  text-underline-offset: 3px;
}

.sold-customer-total {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.sold-customer-total > strong {
  color: var(--lime-light);
  font-size: 1.05rem;
  white-space: nowrap;
}

.sold-payment-status {
  padding: 5px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.57rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.sold-payment-status-paid {
  border-color: rgb(214 185 140 / 38%);
  color: var(--lime-light);
  background: rgb(214 185 140 / 9%);
}

.sold-payment-status-unpaid {
  border-color: rgb(255 107 107 / 65%);
  color: #ff9a9a;
  background: rgb(151 25 25 / 26%);
  box-shadow: 0 0 0 3px rgb(255 107 107 / 7%);
}

.sold-payment-status-canceled {
  border-color: rgb(255 74 74 / 70%);
  color: #ffb0b0;
  background: rgb(173 25 25 / 34%);
  box-shadow: 0 0 0 3px rgb(255 74 74 / 8%);
}

.sold-payment-status-waiting {
  border-color: rgb(255 201 87 / 45%);
  color: #ffd475;
  background: rgb(255 201 87 / 9%);
}

.sold-order-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-border);
}

.sold-order-details > div {
  display: grid;
  gap: 4px;
  padding: 12px 15px;
  background: #ffffff;
}

.sold-order-details dt {
  color: var(--muted-dark);
  font-size: 0.56rem;
  font-weight: 780;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sold-order-details dd {
  margin: 0;
  color: var(--white);
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

.sold-pallet-list {
  display: grid;
}

.sold-pallet-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--surface-border);
}

.sold-pallet-row:last-child {
  border-bottom: 0;
}

.sold-pallet-photo {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: 11px;
  color: var(--lime);
  background: #ffffff;
}

.sold-pallet-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sold-pallet-photo svg {
  width: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.sold-pallet-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.sold-pallet-copy > div {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sold-pallet-copy strong {
  font-size: 0.8rem;
}

.sold-pallet-copy > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.63rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sold-pallet-copy small {
  color: var(--muted-dark);
}

.sold-square-status {
  padding: 4px 6px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.5rem;
  font-weight: 790;
  text-transform: uppercase;
}

.sold-square-status-held,
.sold-square-status-sold {
  border-color: rgb(214 185 140 / 28%);
  color: var(--lime-light);
  background: rgb(214 185 140 / 7%);
}

.sold-square-status-error {
  border-color: rgb(255 107 107 / 32%);
  color: #ff9a9a;
}

.sold-pallet-price {
  color: var(--lime-light);
  font-size: 0.84rem;
  white-space: nowrap;
}

.sold-canceled-available {
  padding: 4px 6px;
  border: 1px solid rgb(214 185 140 / 35%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
  font-size: 0.5rem;
  font-weight: 790;
  text-transform: uppercase;
}

.sold-pallet-meta {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.sold-pallet-row > form {
  grid-column: 2 / -1;
}

.sold-release-button {
  min-height: 38px;
  border-color: rgb(255 107 107 / 42%);
  color: #ff9a9a;
  background: rgb(121 22 22 / 11%);
  box-shadow: none;
}

.sold-order-action {
  padding: 13px 15px 15px;
  border-top: 1px solid var(--surface-border);
}

.sold-order-action .button {
  width: 100%;
}

.sold-uninvoiced-note,
.picked-up-date {
  margin: 0;
  padding: 12px 15px;
  border-bottom: 1px solid var(--surface-border);
  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.5;
}

.sold-empty {
  padding: 28px 20px;
  border: 1px dashed var(--surface-border);
  border-radius: 17px;
  background: rgb(255 255 255 / 64%);
  text-align: center;
}

.sold-empty h3 {
  margin: 0 0 7px;
  font-size: 1rem;
}

.sold-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.sold-canceled-instructions {
  margin-bottom: 13px;
  padding: 14px 15px;
  border: 1px solid rgb(255 74 74 / 42%);
  border-radius: 15px;
  color: #ffc2c2;
  background:
    linear-gradient(135deg, rgb(177 22 22 / 24%), transparent 74%),
    var(--surface);
  font-size: 0.7rem;
  line-height: 1.5;
}

.sold-sticker-cleanup-form {
  display: grid;
  gap: 11px;
  padding: 14px 15px 15px;
  border-top: 1px solid rgb(255 74 74 / 28%);
  background: rgb(71 9 9 / 18%);
}

.sold-sticker-cleanup-form p {
  margin: 0;
  color: #ffc2c2;
  font-size: 0.66rem;
  line-height: 1.45;
}

.sold-sticker-cleanup-form .button {
  width: 100%;
}

.picked-up-history {
  margin-top: 34px;
  border: 1px solid var(--surface-border);
  border-radius: 17px;
  background: var(--surface);
}

.picked-up-history > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 780;
}

.picked-up-history > summary span {
  display: grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: rgb(255 255 255 / 6%);
}

.picked-up-history > .sold-customer-list {
  padding: 0 12px 12px;
}

@media (min-width: 640px) {
  .storage-policy-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storage-policy-form > .button {
    width: auto;
    justify-self: end;
    min-width: 230px;
  }

  .sold-pallets-heading {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: end;
  }

  .sold-order-details {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sold-pallet-row {
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    padding: 14px 18px;
  }

  .sold-pallet-photo {
    width: 64px;
    height: 64px;
  }

  .sold-pallet-row > form {
    grid-column: auto;
  }

  .sold-order-action {
    display: flex;
    justify-content: flex-end;
  }

  .sold-order-action .button {
    width: auto;
    min-width: 240px;
  }
}

/* Seller customer-signup approval center */
.portal-brand-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.customer-approval-alert {
  position: relative;
  z-index: 5;
}

.customer-approval-bell {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: 50%;
  color: #62584c;
  background: #ffffff;
  cursor: pointer;
}

.customer-approval-bell:hover,
.customer-approval-bell[aria-expanded="true"] {
  border-color: var(--lime);
  color: var(--lime-light);
  background: #ffffff;
}

.customer-approval-bell svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.customer-approval-bell strong {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #0e0d0c;
  border-radius: 999px;
  color: #081006;
  background: var(--lime-light);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
}

.customer-approval-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: -94px;
  width: min(340px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid rgb(214 185 140 / 34%);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgb(0 0 0 / 58%);
}

.customer-approval-panel > header {
  padding: 16px 17px 13px;
  border-bottom: 1px solid var(--surface-border);
}

.customer-approval-panel > header div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.customer-approval-panel > header span {
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 850;
}

.customer-approval-panel > header small {
  color: var(--lime-light);
  font-size: 0.69rem;
  font-weight: 800;
}

.customer-approval-list {
  display: grid;
  max-height: min(420px, 58dvh);
  overflow-y: auto;
}

.customer-approval-list > button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  min-height: 70px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--surface-border);
  color: var(--white);
  background: #ffffff;
  cursor: pointer;
  text-align: left;
}

.customer-approval-list > button:hover,
.customer-approval-list > button:focus-visible {
  background: #ffffff;
}

.customer-approval-list > button > span:first-child {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 45%);
  border-radius: 50%;
  color: var(--lime-light);
  background: rgb(214 185 140 / 9%);
  font-size: 0.78rem;
  font-weight: 900;
}

.customer-approval-list > button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.customer-approval-list strong,
.customer-approval-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-approval-list strong {
  font-size: 0.83rem;
}

.customer-approval-list small {
  color: var(--muted);
  font-size: 0.68rem;
}

.customer-approval-list svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--lime);
  stroke-width: 2;
}

.customer-approval-view-all {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  color: var(--lime-light);
  font-size: 0.72rem;
  font-weight: 850;
}

.customer-approval-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 25px 18px;
  text-align: center;
}

.customer-approval-empty > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #081006;
  background: var(--lime-light);
  font-weight: 950;
}

.customer-approval-empty strong {
  margin-top: 5px;
  font-size: 0.82rem;
}

.customer-approval-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.customer-approval-result {
  width: min(680px, calc(100% - 36px));
  margin: 14px auto 0;
  padding: 13px 15px;
  border: 1px solid rgb(214 185 140 / 40%);
  border-radius: 14px;
  color: #62584c;
  background: #ffffff;
  font-size: 0.75rem;
  line-height: 1.5;
}

.customer-approval-dialog {
  width: min(640px, calc(100vw - 24px));
  max-width: none;
  max-height: min(900px, calc(100dvh - 24px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 24px;
  color: var(--white);
  background: #ffffff;
  box-shadow: 0 30px 100px rgb(0 0 0 / 72%);
}

.customer-approval-dialog::backdrop {
  background: rgb(0 0 0 / 78%);
  backdrop-filter: blur(4px);
}

.customer-approval-review {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(900px, calc(100dvh - 24px));
}

.customer-approval-review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--surface-border);
  background: #ffffff;
}

.customer-approval-review-header .eyebrow {
  margin: 0 0 7px;
}

.customer-approval-review-header h2 {
  margin: 0;
  font-size: clamp(1.45rem, 6vw, 2rem);
  line-height: 1.05;
}

.customer-approval-review-header p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.customer-approval-close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--surface-border);
  border-radius: 50%;
  color: var(--white);
  background: #ffffff;
  cursor: pointer;
  font-size: 1.55rem;
  line-height: 1;
}

.customer-approval-scroll {
  display: grid;
  gap: 13px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.customer-approval-status-card,
.customer-approval-section,
.customer-approval-email-note {
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background: #ffffff;
}

.customer-approval-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
}

.customer-approval-status-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
  text-align: right;
}

.customer-approval-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgb(255 196 73 / 48%);
  border-radius: 999px;
  color: #ffd477;
  background: rgb(255 196 73 / 10%);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.customer-approval-status.is-approved {
  border-color: rgb(214 185 140 / 48%);
  color: var(--lime-light);
  background: rgb(214 185 140 / 9%);
}

.customer-approval-status.is-denied {
  border-color: rgb(255 107 107 / 48%);
  color: #ff9c9c;
  background: rgb(255 107 107 / 9%);
}

.customer-approval-section {
  overflow: hidden;
}

.customer-approval-section h3 {
  margin: 0;
  padding: 13px 14px;
  border-bottom: 1px solid var(--surface-border);
  color: #62584c;
  font-size: 0.8rem;
}

.customer-approval-details {
  margin: 0;
}

.customer-approval-details > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid rgb(255 255 255 / 6%);
}

.customer-approval-details > div:last-child {
  border-bottom: 0;
}

.customer-approval-details dt {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.customer-approval-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--white);
  font-size: 0.72rem;
  line-height: 1.5;
}

.customer-approval-email-note {
  padding: 14px;
  border-color: rgb(255 196 73 / 32%);
  background: rgb(255 196 73 / 7%);
}

.customer-approval-email-note strong {
  color: #ffd477;
  font-size: 0.76rem;
}

.customer-approval-email-note p {
  margin: 6px 0 0;
  color: #62584c;
  font-size: 0.69rem;
  line-height: 1.55;
}

.customer-approval-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 14px 16px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--surface-border);
  background: #ffffff;
}

.customer-approval-actions form,
.customer-approval-actions button {
  width: 100%;
  min-width: 0;
}

.customer-approval-actions-single {
  grid-template-columns: 1fr;
}

.customer-approval-deny {
  border-color: rgb(255 107 107 / 52%);
  color: #ffaaaa;
  background: rgb(255 107 107 / 8%);
}

.customer-approval-loading,
.customer-approval-load-error {
  display: grid;
  min-height: 300px;
  place-content: center;
  justify-items: center;
  gap: 13px;
  padding: 28px;
  text-align: center;
}

.customer-approval-loading > span {
  width: 38px;
  height: 38px;
  border: 3px solid rgb(214 185 140 / 20%);
  border-top-color: var(--lime);
  border-radius: 50%;
  animation: customer-approval-spin 700ms linear infinite;
}

.customer-approval-load-error p {
  margin: -5px 0 6px;
  color: var(--muted);
  font-size: 0.72rem;
}

.customer-directory-status > .is-pending {
  border-color: rgb(255 196 73 / 42%);
  color: #ffd477;
  background: rgb(255 196 73 / 8%);
}

.customer-directory-status > .is-denied {
  border-color: rgb(255 107 107 / 42%);
  color: #ff9c9c;
  background: rgb(255 107 107 / 8%);
}

.alert-success {
  border-color: rgb(214 185 140 / 38%);
  color: #62584c;
  background: rgb(214 185 140 / 9%);
}

.alert-success span {
  color: #081006;
  background: var(--lime-light);
}

.record-status-error {
  border-color: rgb(255 107 107 / 48%);
  color: #ff9c9c;
  background: rgb(255 107 107 / 9%);
}

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

@media (max-width: 380px) {
  .customer-approval-details > div,
  .customer-approval-actions {
    grid-template-columns: 1fr;
  }

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

  .customer-approval-status-card p {
    text-align: left;
  }
}

/* Compact page titles and sold-order processing */
.portal-page .eyebrow > span,
.portal-page .section-kicker > span {
  display: none;
}

.compact-page-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin: 0 0 18px;
}

.compact-page-bar .back-button {
  min-height: 42px;
  margin: 0;
  padding: 9px 14px;
  white-space: nowrap;
}

.compact-page-bar h1 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(1.45rem, 7.4vw, 2.55rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.fulfillment-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.fulfillment-choice legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 760;
}

.fulfillment-choice label {
  position: relative;
  display: grid;
  min-height: 46px;
  place-items: center;
  border: 1px solid var(--input-border);
  border-radius: 11px;
  color: var(--muted);
  background: var(--input-surface);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 760;
}

.fulfillment-choice input {
  position: absolute;
  opacity: 0;
}

.fulfillment-choice label:has(input:checked) {
  border-color: var(--lime);
  color: var(--white);
  background: rgb(214 185 140 / 10%);
}

[data-pickup-fields] {
  display: grid;
  gap: 10px;
}

[data-pickup-fields][hidden],
.delivery-request-notice[hidden] {
  display: none;
}

.delivery-request-notice {
  padding: 12px;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: 11px;
  color: var(--muted);
  background: rgb(214 185 140 / 7%);
  font-size: 0.66rem;
}

.delivery-request-notice p {
  margin: 4px 0 0;
}

.invoice-fulfillment-label {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 5px 8px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.58rem;
}

.invoice-fulfillment-ready {
  border-color: rgb(214 185 140 / 38%);
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
}

.sold-pallets-workspace,
.sold-process-workspace {
  max-width: 900px;
  padding-top: 22px;
}

.sold-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.sold-view-tabs a {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 15px;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  color: var(--muted);
  background: var(--surface);
  text-decoration: none;
}

.sold-view-tabs a.active {
  border-color: rgb(214 185 140 / 52%);
  color: var(--white);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 12%), transparent 72%),
    var(--surface);
}

.sold-view-tabs span {
  font-size: 0.7rem;
  font-weight: 780;
}

.sold-view-tabs strong {
  display: grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 33%);
  border-radius: 999px;
  color: var(--lime-light);
}

.sold-view-tabs .sold-view-tab-canceled {
  grid-column: 1 / -1;
  min-height: 78px;
  border-color: rgb(255 74 74 / 58%);
  color: #ffd0d0;
  background:
    linear-gradient(135deg, rgb(177 22 22 / 30%), transparent 76%),
    var(--surface);
  box-shadow: 0 0 0 3px rgb(255 74 74 / 6%);
}

.sold-view-tabs .sold-view-tab-canceled:hover,
.sold-view-tabs .sold-view-tab-canceled.active {
  border-color: #ff6b6b;
  color: #7d2020;
  background:
    linear-gradient(135deg, rgb(206 34 34 / 42%), transparent 76%),
    var(--surface);
}

.sold-view-tab-canceled > span {
  display: grid;
  gap: 4px;
}

.sold-view-tab-canceled small {
  color: #ffaaaa;
  font-size: 0.56rem;
  font-weight: 650;
}

.sold-view-tabs .sold-view-tab-canceled strong {
  border-color: rgb(255 107 107 / 60%);
  color: #ffb0b0;
  background: rgb(145 20 20 / 32%);
}

.sold-section-active {
  margin-top: 22px;
}

.sold-section-heading {
  align-items: center;
}

.sold-section-heading h2 {
  margin: 0;
}

.sold-order-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 13px 15px 15px;
  border-top: 1px solid var(--surface-border);
}

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

.sold-order-actions form {
  display: flex;
}

.sold-print-labels-button {
  border-color: rgb(214 185 140 / 42%);
  color: var(--white);
  background: rgb(214 185 140 / 8%);
}

.sold-label-print-form {
  display: grid;
  gap: 11px;
  padding: 14px 15px;
  border-top: 1px solid var(--surface-border);
  background: #ffffff;
}

.sold-label-print-form label {
  display: grid;
  gap: 7px;
}

.sold-label-print-form label > span {
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 800;
}

.sold-label-print-form input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgb(152 176 146 / 46%);
  border-radius: 12px;
  color: var(--white);
  background: #ffffff;
  font: inherit;
}

.sold-label-print-form input:focus {
  border-color: var(--lime);
  outline: 2px solid rgb(214 185 140 / 20%);
  outline-offset: 1px;
}

.sold-label-print-form small {
  color: var(--muted);
  font-size: 0.59rem;
  line-height: 1.45;
}

.sold-label-print-form .button {
  width: 100%;
}

@media (max-width: 520px) {
  .sold-order-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .sold-order-details > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.sold-process-customer,
.sold-process-form,
.sold-process-pallets article {
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  background: var(--surface);
}

.sold-process-customer {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-color: rgb(214 185 140 / 32%);
}

.sold-process-status {
  color: var(--lime);
  font-size: 0.6rem;
  font-weight: 820;
  text-transform: uppercase;
}

.sold-process-customer h2 {
  margin: 5px 0;
}

.sold-process-customer a,
.sold-process-form small,
.sold-process-help {
  color: var(--muted);
  font-size: 0.64rem;
}

.sold-process-customer dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.sold-process-customer dl > div {
  padding: 9px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
}

.sold-process-customer dt {
  color: var(--muted-dark);
  font-size: 0.5rem;
  text-transform: uppercase;
}

.sold-process-customer dd {
  margin: 4px 0 0;
  font-size: 0.66rem;
}

.sold-process-form {
  display: grid;
  gap: 13px;
  margin-top: 13px;
  padding: 17px;
}

.sold-process-form label,
.sold-process-form label > span {
  display: grid;
  gap: 7px;
  font-size: 0.68rem;
  font-weight: 760;
}

.sold-process-form input {
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgb(255 255 255 / 29%);
  border-radius: 12px;
  color: var(--white);
  background: #ffffff;
  font: inherit;
  font-size: 1rem;
}

.sold-process-help {
  padding: 13px;
  border: 1px dashed var(--surface-border);
  border-radius: 12px;
}

.sold-label-actions {
  margin-top: 20px;
}

.sold-label-actions > header {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.sold-label-actions h2 {
  margin: 3px 0 0;
}

.sold-process-pallets {
  display: grid;
  gap: 9px;
}

.sold-process-pallets article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px;
}

.sold-process-pallets article > div:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.sold-process-pallets article > div:nth-child(2) span {
  color: var(--muted);
  font-size: 0.62rem;
}

.sold-process-pallets .button {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .sold-process-customer {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.9fr);
    align-items: center;
  }

  .sold-process-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .sold-label-actions > header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .sold-process-pallets article {
    grid-template-columns: 64px minmax(0, 1fr) auto;
  }

  .sold-process-pallets .button {
    grid-column: auto;
  }
}

/* Customer fulfillment choices stay full-width and easy to tap on mobile. */
.fulfillment-choice {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.fulfillment-choice label,
.fulfillment-choice label:has(input:checked) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.fulfillment-choice label > span {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 0 18px;
  box-sizing: border-box;
  font-size: 0.9rem;
}

.unlocked-pallet-cutoff-notice {
  display: grid;
  gap: 5px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgb(255 91 91 / 70%);
  border-radius: 12px;
  color: #ffd6d6;
  background: rgb(151 22 22 / 24%);
  box-shadow: inset 4px 0 0 #ff5b5b;
}

.unlocked-pallet-cutoff-notice strong {
  color: #ff8f8f;
  font-size: 0.82rem;
  line-height: 1.3;
}

.unlocked-pallet-cutoff-notice p {
  margin: 0;
  color: #ffd6d6;
  font-size: 0.7rem;
  line-height: 1.45;
}

.invoice-tabs-has-loans .invoice-tab-loans {
  grid-column: 1 / -1;
}

.customer-loan-intro {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid rgb(255 201 87 / 34%);
  border-radius: 14px;
  background: rgb(255 201 87 / 7%);
}

.customer-loan-intro > span,
.customer-loan-payment > span {
  color: #ffd475;
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.customer-loan-intro p {
  margin: 0;
  color: var(--white);
  font-size: 0.68rem;
  line-height: 1.5;
}

.invoice-card-loan {
  border-color: rgb(255 201 87 / 32%);
  background:
    linear-gradient(135deg, rgb(255 201 87 / 6%), transparent 48%),
    var(--surface);
}

.customer-loan-payment > strong {
  color: #ffd475;
}

.customer-loan-payment > small {
  color: var(--white);
}

.loan-transfer-button {
  border-color: rgb(255 201 87 / 48%);
  color: #ffd475;
  background: rgb(255 201 87 / 8%);
  box-shadow: none;
}

.loan-transfer-button:hover {
  border-color: #ffd475;
  color: #111;
  background: #ffd475;
}

.loans-workspace {
  max-width: 1040px;
  padding-top: 22px;
}

.loans-result-message {
  margin-bottom: 14px;
}

.loans-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 18px;
}

.loans-summary article {
  display: grid;
  min-height: 88px;
  align-content: center;
  gap: 6px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  background: var(--surface);
}

.loans-summary .loans-summary-balance {
  grid-column: 1 / -1;
  border-color: rgb(255 201 87 / 42%);
  background:
    linear-gradient(135deg, rgb(255 201 87 / 10%), transparent 70%),
    var(--surface);
}

.loans-summary span,
.loan-customer-heading > div:first-child > span,
.loan-invoice-card > header span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.loans-summary strong {
  color: var(--white);
  font-size: 1.55rem;
  line-height: 1;
}

.loans-summary-balance strong {
  color: #ffd475;
}

.loan-customer-list {
  display: grid;
  gap: 15px;
}

.loan-customer-card {
  overflow: hidden;
  border: 1px solid rgb(255 201 87 / 32%);
  border-radius: 18px;
  background: var(--surface);
}

.loan-customer-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 17px;
  border-bottom: 1px solid var(--surface-border);
  background:
    linear-gradient(130deg, rgb(255 201 87 / 10%), transparent 62%);
}

.loan-customer-heading h2 {
  margin: 5px 0 7px;
  font-size: clamp(1.2rem, 6vw, 1.75rem);
}

.loan-customer-heading p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.loan-customer-heading a {
  color: var(--white);
  text-underline-offset: 3px;
}

.loan-customer-balance {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.loan-customer-balance span,
.loan-customer-balance small {
  color: var(--muted);
  font-size: 0.58rem;
}

.loan-customer-balance strong {
  color: #ffd475;
  font-size: 1.12rem;
  white-space: nowrap;
}

.loan-invoice-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.loan-invoice-card {
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  background: #ffffff;
}

.loan-invoice-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--surface-border);
}

.loan-invoice-card > header h3 {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.loan-invoice-card > header > strong {
  color: #ffd475;
  font-size: 1rem;
  white-space: nowrap;
}

.loan-invoice-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-border);
}

.loan-invoice-totals > div {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  background: #ffffff;
}

.loan-invoice-totals dt {
  color: var(--muted-dark);
  font-size: 0.54rem;
  font-weight: 780;
  text-transform: uppercase;
}

.loan-invoice-totals dd {
  margin: 0;
  color: var(--white);
  font-size: 0.7rem;
}

.loan-invoice-totals > div:nth-child(3) dd {
  color: #ffd475;
  font-weight: 820;
}

.loan-pallet-list {
  display: grid;
}

.loan-pallet-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--surface-border);
}

.loan-pallet-row:last-child {
  border-bottom: 0;
}

.loan-pallet-row > div:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.loan-pallet-row > div:nth-child(2) strong {
  font-size: 0.78rem;
}

.loan-pallet-row > div:nth-child(2) span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loan-pallet-row > strong {
  color: var(--lime-light);
  font-size: 0.78rem;
  white-space: nowrap;
}

.loan-invoice-card > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--surface-border);
}

.loan-invoice-card > footer .button {
  min-height: 40px;
  padding: 9px 13px;
  font-size: 0.65rem;
}

.loans-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 40px 20px;
  border: 1px dashed rgb(255 201 87 / 38%);
  border-radius: 18px;
  background: rgb(255 201 87 / 4%);
  text-align: center;
}

.loans-empty > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgb(255 201 87 / 45%);
  border-radius: 50%;
  color: #ffd475;
  font-size: 1.4rem;
}

.loans-empty h2,
.loans-empty p {
  margin: 0;
}

.loans-empty p {
  max-width: 460px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .invoice-tabs-has-loans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loans-summary {
    grid-template-columns: 160px 160px minmax(0, 1fr);
  }

  .loans-summary .loans-summary-balance {
    grid-column: auto;
  }

  .loan-invoice-totals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Text messaging alerts */
.text-alerts-page {
  max-width: 760px;
}

.text-alert-setup-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 15px;
  border: 1px solid rgb(255 173 66 / 55%);
  border-radius: var(--radius-md);
  color: #62584c;
  background:
    linear-gradient(135deg, rgb(255 145 31 / 20%), transparent 68%),
    #ffffff;
}

.text-alert-setup-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgb(255 197 120 / 60%);
  border-radius: 50%;
  color: #251200;
  background: #ffb34e;
  font-weight: 950;
}

.text-alert-setup-notice div,
.text-alert-charge div {
  display: grid;
  gap: 4px;
}

.text-alert-setup-notice strong {
  font-size: 0.94rem;
}

.text-alert-setup-notice p {
  margin: 0;
  color: #e4c9a6;
  font-size: 0.78rem;
  line-height: 1.45;
}

.text-alert-compose {
  padding: 18px;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgb(214 185 140 / 8%), transparent 48%),
    var(--surface);
}

.text-alert-compose > header,
.text-alert-compose form {
  display: grid;
  gap: 14px;
}

.text-alert-compose > header {
  gap: 8px;
  margin-bottom: 20px;
}

.text-alert-compose h2 {
  margin: 0;
  font-size: clamp(1.45rem, 7vw, 2.1rem);
  line-height: 1.05;
}

.text-alert-compose > header > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.text-alert-program-field {
  display: grid;
  gap: 7px;
}

.text-alert-program-field > span,
.text-alert-preview > span,
.text-alert-audience > span {
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 800;
}

.text-alert-program-field select {
  width: 100%;
  min-height: 56px;
  padding: 0 44px 0 16px;
  border: 1px solid #586156;
  border-radius: 13px;
  color: var(--white);
  background: var(--input-surface);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 720;
}

.text-alert-program-field select:focus {
  border-color: var(--lime);
  outline: 3px solid rgb(214 185 140 / 17%);
}

.text-alert-audience {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 13px;
  background: rgb(0 0 0 / 22%);
}

.text-alert-audience strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--lime-light);
  font-size: 1.85rem;
  line-height: 1;
}

.text-alert-audience small {
  color: var(--muted);
  font-size: 0.7rem;
}

.text-alert-preview {
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid var(--input-border);
  border-radius: 13px;
  background: #ffffff;
}

.text-alert-preview p {
  margin: 0;
  color: #62584c;
  font-size: 0.86rem;
  line-height: 1.55;
}

.text-alert-charge {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgb(255 173 66 / 38%);
  border-radius: 13px;
  background: rgb(255 145 31 / 7%);
}

.text-alert-charge-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  color: #1d1000;
  background: #ffc26c;
  font-weight: 950;
}

.text-alert-charge strong {
  color: #62584c;
  font-size: 0.8rem;
}

.text-alert-charge p {
  margin: 0;
  color: #d6b98f;
  font-size: 0.73rem;
  line-height: 1.5;
}

.text-alert-cadence {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.text-alert-cadence span {
  color: var(--lime-light);
}

.text-alert-notify-button:disabled {
  border-color: #3d463b;
  color: #8d968a;
  background: #ffffff;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.text-alert-disabled-reason {
  margin-top: -6px;
  color: #7f897d;
  text-align: center;
  font-size: 0.68rem;
}

@media (min-width: 700px) {
  .text-alert-compose {
    padding: 26px;
  }
}

/* Dashboard action grid repair
   Keep every dashboard tool in document order so adding a new tool cannot
   create an implicit narrow grid column. */
.portal-main-actions .admin-actions {
  grid-template-areas: none;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  align-items: stretch;
  gap: 12px;
}

.portal-main-actions .admin-actions > .admin-action {
  grid-area: auto;
  min-width: 0;
  min-height: 92px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px;
}

.portal-main-actions .admin-actions .admin-action-icon {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-radius: 14px;
}

.portal-main-actions .admin-actions .admin-action-copy {
  width: 100%;
}

.portal-main-actions .admin-actions > .admin-action:focus-visible {
  border-color: var(--lime-light);
  outline: 3px solid rgb(214 185 140 / 20%);
  outline-offset: 2px;
}

@media (min-width: 620px) {
  .portal-main-actions .admin-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-main-actions .admin-actions > .admin-action {
    min-height: 110px;
    padding: 18px;
  }
}

@media (min-width: 980px) {
  .portal-main-actions .admin-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .portal-main-actions .admin-actions > .admin-action {
    min-height: 138px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px;
  }
}

/* Sold invoice accordions */
.sold-invoice-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 10px;
  min-height: 94px;
  padding: 15px;
  list-style: none;
  background:
    linear-gradient(130deg, rgb(214 185 140 / 7%), transparent 64%);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.sold-customer-card-unpaid > .sold-invoice-summary {
  background:
    linear-gradient(130deg, rgb(255 107 107 / 9%), transparent 64%);
}

.sold-invoice-summary::-webkit-details-marker,
.sold-options-panel > summary::-webkit-details-marker {
  display: none;
}

.sold-invoice-summary::marker,
.sold-options-panel > summary::marker {
  content: "";
}

.sold-invoice-summary:hover {
  background-color: rgb(255 255 255 / 2%);
}

.sold-invoice-summary:focus-visible {
  outline: 3px solid rgb(214 185 140 / 23%);
  outline-offset: -3px;
}

.sold-invoice-accordion[open] > .sold-invoice-summary {
  border-bottom: 1px solid var(--surface-border);
  box-shadow: inset 0 -1px rgb(255 255 255 / 2%);
}

.sold-invoice-summary .sold-customer-identity {
  min-width: 0;
}

.sold-invoice-summary .sold-customer-identity h3 {
  margin: 0 0 7px;
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.15;
}

.sold-invoice-summary .sold-customer-identity p {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.sold-invoice-summary .sold-customer-total {
  align-self: center;
}

.sold-invoice-summary .sold-payment-status-waiting {
  max-width: 104px;
  text-align: center;
  line-height: 1.2;
}

.sold-invoice-summary-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--surface-border);
  border-radius: 50%;
  color: var(--muted);
  background: rgb(255 255 255 / 4%);
}

.sold-invoice-summary-toggle svg,
.sold-options-panel > summary svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 160ms ease;
}

.sold-invoice-accordion[open] > .sold-invoice-summary .sold-invoice-summary-toggle {
  border-color: rgb(214 185 140 / 35%);
  color: var(--lime-light);
  background: rgb(214 185 140 / 8%);
}

.sold-invoice-accordion[open] > .sold-invoice-summary .sold-invoice-summary-toggle svg,
.sold-options-panel[open] > summary svg {
  transform: rotate(180deg);
}

.sold-invoice-details .sold-order-details a {
  color: var(--white);
  text-decoration-color: rgb(214 185 140 / 45%);
  text-underline-offset: 3px;
}

.sold-options-panel {
  border-top: 1px solid var(--surface-border);
  background: #ffffff;
}

.sold-options-panel > summary {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 13px 15px;
  padding: 11px 16px;
  border: 1px solid #c9d0c6;
  border-radius: 999px;
  color: #080c08;
  background: #dfe5dc;
  box-shadow: 0 7px 18px rgb(0 0 0 / 18%);
  list-style: none;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.sold-options-panel > summary:hover {
  background: #f0f4ee;
  transform: translateY(-1px);
}

.sold-options-panel > summary:focus-visible {
  outline: 3px solid rgb(214 185 140 / 25%);
  outline-offset: 2px;
}

.sold-options-panel[open] > summary {
  border-color: var(--lime-light);
  background: var(--lime-light);
}

.sold-options-content {
  border-top: 1px solid var(--surface-border);
}

.sold-options-content .sold-label-print-form {
  border-top: 0;
}

@media (min-width: 640px) {
  .sold-invoice-summary {
    grid-template-columns: minmax(0, 1fr) auto 38px;
    gap: 16px;
    min-height: 102px;
    padding: 18px 20px;
  }

  .sold-invoice-summary .sold-customer-identity h3 {
    font-size: 1.12rem;
  }

  .sold-invoice-summary .sold-customer-total > strong {
    font-size: 1.15rem;
  }

  .sold-invoice-summary-toggle {
    width: 38px;
    height: 38px;
  }

  .sold-options-panel > summary {
    width: min(260px, calc(100% - 30px));
    margin-left: auto;
  }
}

/* Keep the portal menu above page controls.
   backdrop-filter creates a header stacking context, so the header itself
   must sit above the page instead of relying only on the menu's z-index. */
.portal-header {
  position: relative;
  z-index: 200;
  isolation: isolate;
}

.portal-menu {
  z-index: 1;
}

.portal-menu-panel {
  z-index: 2;
  max-height: calc(100dvh - 96px - var(--safe-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
  scrollbar-gutter: stable;
}

/* Loan customer accordions and cash ledger */
.loan-customer-accordion > .loan-customer-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 11px;
  min-height: 108px;
  border-bottom: 0;
  list-style: none;
  cursor: pointer;
}

.loan-customer-accordion > .loan-customer-heading::-webkit-details-marker,
.loan-payment-panel > summary::-webkit-details-marker {
  display: none;
}

.loan-customer-accordion > .loan-customer-heading::marker,
.loan-payment-panel > summary::marker {
  content: "";
}

.loan-customer-accordion > .loan-customer-heading:hover {
  background-color: rgb(255 201 87 / 3%);
}

.loan-customer-accordion > .loan-customer-heading:focus-visible {
  outline: 3px solid rgb(255 201 87 / 26%);
  outline-offset: -3px;
}

.loan-customer-accordion[open] > .loan-customer-heading {
  border-bottom: 1px solid var(--surface-border);
}

.loan-customer-summary-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgb(255 201 87 / 35%);
  border-radius: 50%;
  color: #ffd475;
  background: rgb(255 201 87 / 8%);
}

.loan-customer-summary-toggle svg,
.loan-payment-panel > summary svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 160ms ease;
}

.loan-customer-accordion[open]
  > .loan-customer-heading
  .loan-customer-summary-toggle
  svg,
.loan-payment-panel[open] > summary svg {
  transform: rotate(180deg);
}

.loan-customer-details {
  background: #ffffff;
}

.loan-payment-history {
  border-top: 1px solid var(--surface-border);
  background: #ffffff;
}

.loan-payment-history > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.loan-payment-history > header strong {
  display: grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgb(255 201 87 / 35%);
  border-radius: 50%;
  color: #ffd475;
}

.loan-payment-history > div {
  display: grid;
  gap: 1px;
  background: var(--surface-border);
}

.loan-payment-history article {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  background: #ffffff;
}

.loan-payment-history article > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.loan-payment-history article strong {
  color: #ffd475;
  font-size: 0.82rem;
}

.loan-payment-history article span,
.loan-payment-history article p {
  color: var(--muted);
  font-size: 0.62rem;
}

.loan-payment-history article p {
  margin: 0;
  line-height: 1.45;
}

.loan-payment-panel {
  border-top: 1px solid var(--surface-border);
  background: #ffffff;
}

.loan-payment-panel > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 13px 14px;
  padding: 10px 15px;
  border: 1px solid #cbd2c8;
  border-radius: 999px;
  color: #080c08;
  background: #e1e7de;
  list-style: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.loan-payment-panel > summary:hover {
  background: #f3f6f1;
  transform: translateY(-1px);
}

.loan-payment-panel > summary:focus-visible {
  outline: 3px solid rgb(214 185 140 / 25%);
  outline-offset: 2px;
}

.loan-payment-panel > summary > span {
  display: grid;
  gap: 2px;
}

.loan-payment-panel > summary strong {
  font-size: 0.8rem;
}

.loan-payment-panel > summary small {
  color: #4f5b4c;
  font-size: 0.58rem;
}

.loan-payment-panel[open] > summary {
  border-color: var(--lime-light);
  background: var(--lime-light);
}

.loan-payment-panel-body {
  padding: 15px;
  border-top: 1px solid var(--surface-border);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 6%), transparent 70%),
    #ffffff;
}

.loan-payment-panel-body form {
  display: grid;
  gap: 12px;
}

.loan-payment-panel-body label {
  display: grid;
  gap: 7px;
}

.loan-payment-panel-body label > span:first-child {
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 800;
}

.loan-payment-panel-body label > span:first-child small {
  color: var(--muted);
  font-weight: 650;
}

.loan-payment-panel-body input {
  width: 100%;
  min-height: 49px;
  padding: 11px 13px;
  border: 1px solid rgb(152 176 146 / 52%);
  border-radius: 12px;
  color: var(--white);
  background: #ffffff;
  font: inherit;
  font-size: 0.9rem;
}

.loan-payment-panel-body input:focus {
  border-color: var(--lime);
  outline: 3px solid rgb(214 185 140 / 16%);
}

.loan-cash-amount {
  position: relative;
  display: block;
}

.loan-cash-amount b {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 14px;
  color: var(--lime-light);
  transform: translateY(-50%);
  pointer-events: none;
}

.loan-cash-amount input {
  padding-left: 32px;
}

.loan-payment-panel-body .button {
  width: 100%;
  min-height: 50px;
}

.loan-square-payment-note {
  margin: 13px 0 0;
  padding: 12px;
  border: 1px solid rgb(255 201 87 / 28%);
  border-radius: 11px;
  color: #d3c39e;
  background: rgb(255 201 87 / 5%);
  font-size: 0.62rem;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .loan-customer-accordion > .loan-customer-heading {
    grid-template-columns: minmax(0, 1fr) auto 38px;
    gap: 16px;
    padding: 19px;
  }

  .loan-customer-summary-toggle {
    width: 38px;
    height: 38px;
  }

  .loan-payment-panel > summary {
    width: min(280px, calc(100% - 28px));
    margin-left: auto;
  }

  .loan-payment-panel-body form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loan-payment-panel-body .button {
    grid-column: 1 / -1;
  }
}

/* Manual merchandise and freight records */
.intake-record-workspace {
  display: grid;
  gap: 16px;
}

.intake-record-create,
.intake-record-directory,
.intake-record-history,
.intake-program-section,
.intake-more-options,
.intake-submit-record,
.freight-program-summary,
.freight-record-form-card {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgb(214 185 140 / 5%), transparent 50%),
    var(--surface);
}

.intake-record-create,
.intake-record-directory,
.intake-program-section,
.intake-submit-record,
.freight-program-summary,
.freight-record-form-card {
  padding: 18px;
}

.intake-record-create {
  display: grid;
  gap: 16px;
}

.intake-record-history {
  overflow: hidden;
}

.intake-record-history > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
}

.intake-record-history > summary::-webkit-details-marker {
  display: none;
}

.intake-record-history > summary h2 {
  margin: 7px 0 0;
  color: var(--white);
  letter-spacing: -0.035em;
}

.intake-record-history-count {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  color: #62584c;
  font-size: 0.7rem;
  font-weight: 800;
}

.intake-record-history-count > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 32%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 7%);
}

.intake-record-history-count > span::before {
  content: "+";
  font-size: 1rem;
  line-height: 1;
}

.intake-record-history[open] .intake-record-history-count > span::before {
  content: "\2212";
}

.intake-record-history-body {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--surface-border);
}

.intake-record-history-copy {
  margin: 0 0 14px;
  color: #62584c;
  font-size: 0.68rem;
  line-height: 1.55;
}

.intake-record-create h2,
.intake-record-directory h2,
.intake-program-section h2,
.freight-record-form-card h2 {
  margin: 7px 0 0;
  color: var(--white);
  letter-spacing: -0.035em;
}

.intake-record-create p:last-child,
.freight-record-form-card > header > p:last-child {
  margin: 8px 0 0;
  color: #62584c;
  font-size: 0.76rem;
  line-height: 1.55;
}

.intake-record-create form,
.intake-record-create button,
.intake-record-create > .button {
  width: 100%;
}

.intake-record-page-bar {
  align-items: center;
}

.intake-record-heading {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.intake-record-heading > span,
.intake-record-number > span {
  color: #1f78a8;
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.intake-record-heading h1 {
  margin: 0;
  font-size: clamp(1.35rem, 7vw, 2.2rem);
}

.intake-record-number {
  display: grid;
  gap: 4px;
  padding: 15px 17px;
  border: 1px solid rgb(100 174 255 / 22%);
  border-radius: 15px;
  background: rgb(255 255 255 / 48%);
}

.intake-record-number strong {
  color: var(--white);
  font-size: clamp(1rem, 5.6vw, 1.45rem);
  overflow-wrap: anywhere;
}

.intake-record-number small {
  color: #62584c;
  font-size: 0.62rem;
}

.intake-record-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.intake-record-totals article {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 13px 7px;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: 13px;
  text-align: center;
  background: rgb(255 255 255 / 72%);
}

.intake-record-totals span {
  color: #62584c;
  font-size: clamp(0.48rem, 2.3vw, 0.62rem);
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.intake-record-totals strong {
  color: var(--lime-light);
  font-size: clamp(1rem, 4vw, 1.45rem);
  overflow-wrap: anywhere;
}

.intake-record-list,
.intake-program-list {
  display: grid;
  gap: 10px;
}

.intake-record-row {
  overflow: hidden;
  border: 1px solid rgb(100 174 255 / 23%);
  border-radius: 15px;
  background: rgb(255 255 255 / 72%);
}

.intake-record-builder {
  display: grid;
  gap: 16px;
}

.intake-program-heading {
  display: block;
}

.intake-program-heading h2 {
  margin-bottom: 0;
}

.intake-program-section > .intake-program-list {
  margin-top: 14px;
}

.intake-record-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 0;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
  background: rgb(255 255 255 / 48%);
}

.intake-record-remove {
  border-top: 1px solid rgb(255 255 255 / 11%);
}

.intake-record-remove summary {
  padding: 11px 15px;
  color: #ffb5b5;
  font-size: 0.66rem;
  font-weight: 850;
  text-align: right;
  cursor: pointer;
  list-style: none;
}

.intake-record-remove summary::-webkit-details-marker {
  display: none;
}

.intake-record-remove > div {
  display: grid;
  gap: 10px;
  padding: 0 15px 15px;
}

.intake-record-remove p {
  margin: 0;
  color: #62584c;
  font-size: 0.66rem;
  line-height: 1.5;
}

.intake-record-remove form,
.intake-record-remove button {
  width: 100%;
}

.intake-record-card h3 {
  margin: 7px 0 3px;
  color: var(--white);
  font-size: 1rem;
}

.intake-record-card p {
  margin: 0;
  color: #62584c;
  font-size: 0.68rem;
}

.intake-record-card-value {
  display: grid;
  gap: 3px;
  text-align: right;
}

.intake-record-card-value strong {
  color: var(--lime-light);
  font-size: 0.82rem;
}

.intake-record-card-value span {
  max-width: 135px;
  color: #62584c;
  font-size: 0.58rem;
}

.record-status-draft_merchandise {
  border-color: rgb(255 194 90 / 38%);
  color: #ffd68e;
  background: rgb(255 180 55 / 8%);
}

.intake-program-card {
  overflow: hidden;
  border: 1px solid rgb(100 174 255 / 24%);
  border-radius: 16px;
  background: rgb(255 255 255 / 52%);
}

.intake-program-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px;
  border-bottom: 1px solid var(--surface-border);
}

.intake-program-total-cost {
  display: grid;
  gap: 2px;
  margin: 9px 0 0;
  color: var(--lime-light);
  font-size: 0.9rem;
  font-weight: 850;
}

.intake-program-total-cost small {
  color: #62584c;
  font-size: 0.55rem;
  font-weight: 700;
}

.intake-program-card > header span {
  color: #1f78a8;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.intake-program-card h3 {
  margin: 5px 0 0;
  color: var(--white);
  font-size: 1.05rem;
}

.intake-program-card > header > strong {
  display: grid;
  gap: 2px;
  color: var(--lime-light);
  font-size: 0.82rem;
  text-align: right;
}

.intake-program-card > header small {
  color: #62584c;
  font-size: 0.55rem;
  font-weight: 700;
}

.intake-program-card > form:not(.intake-program-remove),
.intake-add-program form,
.intake-builder-fields,
.freight-record-form {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.intake-program-card label,
.intake-add-program label,
.intake-builder-fields label,
.freight-record-form label,
.intake-attachment-actions label {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.intake-program-card label > span:first-child,
.intake-add-program label > span:first-child,
.intake-builder-fields label > span:first-child,
.freight-record-form label > span:first-child,
.intake-attachment-actions label > span:first-child {
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 800;
}

.intake-builder-fields label small,
.freight-record-form label small {
  color: #62584c;
  font-size: 0.58rem;
}

.intake-program-card input,
.intake-add-program input,
.intake-add-program select,
.intake-builder-fields input,
.intake-builder-fields select,
.freight-record-form input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--white);
  background: var(--input);
  font: inherit;
}

.intake-program-card .money-input input,
.intake-add-program .money-input input,
.intake-builder-fields .money-input input,
.freight-record-form .money-input input {
  padding-left: 31px;
}

.intake-program-card button,
.intake-add-program button,
.intake-builder-fields button {
  width: 100%;
}

.intake-builder-error {
  margin: 0;
}

.intake-builder-program-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--surface-border);
}

.intake-builder-program-meta span {
  color: #62584c;
  font-size: 0.64rem;
}

.intake-builder-program-meta strong {
  color: var(--white);
  font-size: 0.72rem;
}

.intake-builder-program > button {
  margin: 12px 15px 14px;
  padding: 0;
  border: 0;
  color: #ff9f9f;
  background: transparent;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 750;
  text-decoration: underline;
  cursor: pointer;
}

.intake-program-remove {
  padding: 0 15px 14px;
  text-align: right;
}

.intake-program-remove button {
  width: auto;
  border: 0;
  color: #ff9f9f;
  background: transparent;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 750;
  text-decoration: underline;
  cursor: pointer;
}

.intake-add-program {
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid rgb(214 185 140 / 28%);
  border-radius: 15px;
  background: rgb(214 185 140 / 5%);
}

.intake-add-program > summary,
.intake-more-options > summary {
  display: flex;
  min-height: 55px;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  color: var(--white);
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 850;
}

.intake-add-program > summary::-webkit-details-marker,
.intake-more-options > summary::-webkit-details-marker {
  display: none;
}

.intake-add-program > summary > span {
  color: var(--lime-light);
  font-size: 1.15rem;
}

.intake-add-program[open] > summary,
.intake-more-options[open] > summary {
  border-bottom: 1px solid var(--surface-border);
}

.intake-more-options {
  overflow: hidden;
}

.intake-more-options > summary {
  min-height: 58px;
  margin: 8px;
  border: 1px solid #8f978e;
  border-radius: 12px;
  color: #081008;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 35%), transparent),
    #c9cec7;
  box-shadow: 0 5px 14px rgb(0 0 0 / 22%);
}

.intake-more-options[open] > summary {
  border-bottom: 1px solid #8f978e;
}

.intake-more-options > summary::after {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid #152014;
  border-bottom: 2px solid #152014;
  content: "";
  transform: translateY(-2px) rotate(45deg);
}

.intake-more-options[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.intake-attachment-status {
  display: grid;
  gap: 5px;
  padding: 15px;
}

.intake-attachment-status > span {
  color: #1f78a8;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.intake-attachment-status strong {
  color: var(--white);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.intake-attachment-status strong.is-missing {
  color: #ffd68e;
}

.intake-attachment-status a {
  width: max-content;
  color: var(--lime-light);
  font-size: 0.66rem;
  font-weight: 750;
}

.intake-attachment-actions {
  display: grid;
  gap: 10px;
  padding: 0 15px 15px;
}

.intake-attachment-actions form {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgb(100 174 255 / 20%);
  border-radius: 13px;
  background: rgb(255 255 255 / 48%);
}

.intake-attachment-actions input[type="file"] {
  width: 100%;
  min-width: 0;
  color: #62584c;
  font-size: 0.65rem;
}

.intake-attachment-actions .button {
  width: 100%;
}

.intake-more-options > small {
  display: block;
  padding: 0 15px 15px;
  color: #62584c;
  font-size: 0.58rem;
}

.intake-detail-attachments {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.intake-detail-attachment {
  overflow: hidden;
  border: 1px solid rgb(100 174 255 / 22%);
  border-radius: 14px;
  background: rgb(255 255 255 / 46%);
}

.intake-detail-attachment .intake-attachment-actions {
  padding-top: 0;
}

.intake-submit-record {
  display: grid;
  gap: 14px;
}

.intake-submit-record > div {
  display: grid;
  gap: 4px;
}

.intake-submit-record > div span {
  color: #1f78a8;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.intake-submit-record > div strong {
  color: var(--white);
  font-size: 0.82rem;
}

.intake-submit-record .button {
  width: 100%;
}

.intake-create-record {
  padding: 14px;
}

.freight-program-summary > div {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}

.freight-program-summary article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgb(100 174 255 / 20%);
  border-radius: 12px;
  background: rgb(255 255 255 / 45%);
}

.freight-program-summary article strong {
  color: var(--white);
  font-size: 0.7rem;
}

.freight-program-summary article span {
  color: #62584c;
  font-size: 0.64rem;
}

.freight-record-form-card > header {
  padding-bottom: 4px;
}

.freight-program-counts {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.freight-program-counts legend {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 850;
}

.freight-program-counts legend small {
  color: #62584c;
  font-size: 0.56rem;
  font-weight: 750;
}

.freight-program-counts > p {
  margin: 0;
  color: #62584c;
  font-size: 0.64rem;
  line-height: 1.5;
}

.freight-program-count-list {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.freight-record-form .freight-program-count-row {
  gap: 8px;
  padding: 12px;
  border: 1px solid rgb(100 174 255 / 22%);
  border-radius: 12px;
  background: rgb(255 255 255 / 48%);
}

.freight-record-form .freight-program-count-row > span:first-of-type {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.freight-program-count-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--white);
  font-size: 0.7rem;
}

.freight-program-count-row > small {
  line-height: 1.4;
}

@media (max-width: 620px) {
  .intake-record-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .intake-record-card-value {
    display: none;
  }

  .freight-program-summary article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .freight-program-summary article > span:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 760px) {
  .intake-record-create {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .intake-record-create form,
  .intake-record-create button,
  .intake-record-create > .button {
    width: auto;
  }

  .intake-program-card > form:not(.intake-program-remove),
  .intake-add-program form,
  .freight-record-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .freight-program-count-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intake-program-card > form:not(.intake-program-remove) .button,
  .intake-add-program .button,
  .freight-record-form .button {
    grid-column: 1 / -1;
  }

  .intake-attachment-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intake-detail-attachments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intake-detail-attachment .intake-attachment-actions {
    grid-template-columns: 1fr;
  }

  .intake-submit-record {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .intake-submit-record .button {
    width: auto;
  }

  .intake-create-record {
    grid-template-columns: 1fr;
  }

  .intake-create-record .button {
    width: 100%;
  }
}

.mixed-load-note {
  margin: 9px 0 0;
  color: #62584c;
  font-size: 0.72rem;
  line-height: 1.55;
}

.pallet-intake-page-bar {
  align-items: center;
  margin-bottom: 5px;
}

.pallet-intake-title {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.compact-page-bar .pallet-intake-title h1 {
  font-size: clamp(1.25rem, 5.6vw, 1.85rem);
  line-height: 1.02;
}

.pallet-intake-title > span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #1f78a8;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.045em;
}

.pallet-register-compact .registration-form {
  margin-top: 7px;
}

.pallet-register-compact .mixed-load-header {
  padding-top: 7px;
}

.mixed-program-pricing {
  display: grid;
  gap: 12px;
}

.mixed-program-pricing > article {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(100 174 255 / 24%);
  border-radius: 16px;
  background: rgb(255 255 255 / 48%);
}

.mixed-program-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(116px, 0.72fr);
  align-items: start;
  gap: 10px;
}

.mixed-program-identity {
  min-width: 0;
  padding-top: 4px;
}

.mixed-program-identity > span,
.mixed-program-pricing dt {
  color: #1f78a8;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mixed-program-pricing h2 {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1.14;
}

.mixed-program-metrics {
  display: grid;
  min-width: 0;
  gap: 6px;
  margin: 0;
}

.mixed-program-metrics > div {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid rgb(214 185 140 / 18%);
  border-radius: 10px;
  background: rgb(214 185 140 / 5%);
}

.mixed-program-pricing dd {
  margin: 0;
  color: var(--lime-light);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
}

.mixed-program-profit {
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.mixed-program-profit.is-loss {
  border-color: rgb(255 107 107 / 48%);
  background: rgb(255 107 107 / 10%);
}

.mixed-program-profit.is-loss dt,
.mixed-program-profit.is-loss dd {
  color: #ff9292;
}

.mixed-program-profit.is-profit {
  border-color: rgb(214 185 140 / 36%);
  background: rgb(214 185 140 / 9%);
}

.mixed-program-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.72fr);
  align-items: end;
  gap: 9px;
}

.mixed-program-pricing label {
  display: grid;
  gap: 7px;
}

.mixed-program-pricing label > span:first-child {
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 800;
}

.mixed-program-pricing input[name="allocation_selling_price"],
.mixed-program-pricing input[name="allocation_pallet_count"] {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  color: var(--white);
  background: var(--input);
  font: inherit;
}

.mixed-program-pricing input[name="allocation_selling_price"] {
  padding-left: 32px;
}

.mixed-program-pricing input[name="allocation_pallet_count"] {
  padding: 0 13px;
}

@media (min-width: 760px) {
  .mixed-program-pricing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Standalone inventory pallet workflow */
.inventory-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.inventory-add-pallet {
  min-height: 48px;
  padding: 0 18px;
  white-space: nowrap;
}

.inventory-add-pallet > span {
  font-size: 1.35rem;
  line-height: 1;
}

.manual-pallet-workspace {
  max-width: 760px;
}

.manual-pallet-intro {
  display: grid;
  gap: 9px;
  margin-top: 22px;
  padding: 20px;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% 0, rgb(214 185 140 / 12%), transparent 42%),
    var(--surface);
}

.manual-pallet-intro h2 {
  font-size: clamp(1.55rem, 7vw, 2.35rem);
}

.manual-pallet-intro > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.manual-pallet-form {
  display: grid;
  gap: 17px;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.manual-pallet-form > label,
.manual-pallet-price-grid > label {
  display: grid;
  gap: 8px;
}

.manual-pallet-form label > span:first-child,
.manual-pallet-form label > span:first-child:not(.manual-money-input) {
  color: #62584c;
  font-size: 0.74rem;
  font-weight: 780;
}

.manual-pallet-form label > span:first-child small,
.manual-pallet-form label > small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.45;
}

.manual-pallet-form input,
.manual-pallet-form select,
.manual-pallet-number-field > input {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--input-border);
  border-radius: 13px;
  color: var(--white);
  background: var(--input-surface);
  font: inherit;
  font-size: 0.9rem;
  outline: 0;
}

.manual-pallet-form input,
.manual-pallet-number-field > input {
  padding: 0 14px;
}

.manual-pallet-form select {
  padding: 0 44px 0 14px;
}

.manual-pallet-form input:focus,
.manual-pallet-form select:focus,
.manual-pallet-number-field > input:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgb(214 185 140 / 12%);
}

.manual-pallet-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.manual-money-input {
  position: relative;
  display: block;
}

.manual-money-input > b {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 14px;
  color: var(--lime);
  font-size: 1.05rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.manual-money-input > input {
  padding-left: 38px;
}

.manual-pallet-next {
  padding: 16px;
  border: 1px solid rgb(214 185 140 / 22%);
  border-radius: 13px;
  background: rgb(214 185 140 / 6%);
}

.manual-pallet-next strong {
  color: var(--white);
  font-size: 0.78rem;
}

.manual-pallet-next ol {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.manual-pallet-form > .button,
.manual-label-print-form,
.manual-label-print-form .button {
  width: 100%;
}

.manual-pallet-number-field {
  grid-column: 1 / -1;
}

.inventory-detail-title-line form {
  margin: 0;
}

@media (max-width: 560px) {
  .inventory-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .inventory-heading-actions {
    width: 100%;
    justify-content: space-between;
  }

  .inventory-add-pallet {
    flex: 1;
  }

  .manual-pallet-price-grid {
    grid-template-columns: 1fr;
  }
}

/* Label confirmation lifecycle */
.label-confirmation-page {
  display: grid;
  gap: 22px;
}

.label-lifecycle-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.label-lifecycle-steps > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.label-lifecycle-steps b {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid #566157;
  border-radius: 999px;
  color: var(--white);
  font-size: 0.72rem;
}

.label-lifecycle-steps .is-current,
.label-lifecycle-steps .is-complete {
  border-color: rgb(214 185 140 / 45%);
  color: var(--white);
  background: rgb(214 185 140 / 8%);
}

.label-lifecycle-steps .is-current b,
.label-lifecycle-steps .is-complete b {
  border-color: var(--lime);
  color: #091006;
  background: var(--lime);
}

.label-confirmation-hero h1 {
  max-width: 760px;
  margin: 9px 0 12px;
  color: var(--white);
  font-size: clamp(2.2rem, 8vw, 4.8rem);
  line-height: 0.98;
}

.label-confirmation-hero > p:last-child {
  max-width: 690px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.label-print-card,
.label-website-hold,
.label-activation-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #ffffff;
}

.label-print-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-color: rgb(214 185 140 / 42%);
}

.label-print-card-copy {
  display: flex;
  align-items: center;
  gap: 14px;
}

.label-print-card h2,
.label-activation-card h2 {
  margin: 0;
  color: var(--white);
  font-size: 1.18rem;
}

.label-print-card p,
.label-activation-card p,
.label-website-hold p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.label-print-icon,
.label-website-hold > span,
.label-confirmation-dialog-icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 45%);
  border-radius: 14px;
  color: var(--lime);
  background: rgb(214 185 140 / 9%);
}

.label-print-icon svg,
.label-website-hold svg,
.label-confirmation-dialog-icon svg {
  width: 25px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.label-print-card form,
.label-print-card .button,
.label-confirmation-actions,
.label-confirmation-actions form,
.label-confirmation-actions .button {
  width: 100%;
}

.label-website-hold {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-style: dashed;
}

.label-website-hold strong {
  color: var(--white);
}

.label-activation-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.label-activation-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 20px;
}

.label-activation-card.is-complete {
  border-color: rgb(214 185 140 / 48%);
  background: rgb(214 185 140 / 8%);
}

.label-activation-card.is-pending {
  border-color: rgb(255 190 72 / 48%);
  background: rgb(255 190 72 / 7%);
}

.label-activation-card small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.label-activation-check {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 999px;
  color: #091006;
  background: var(--lime);
  font-size: 1.1rem;
  font-weight: 900;
}

.label-activation-card.is-pending .label-activation-check {
  background: #ffbe48;
}

.label-confirmation-actions {
  display: grid;
  gap: 10px;
}

.registration-label-sync {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgb(214 185 140 / 11%), transparent 60%),
    #ffffff;
  box-shadow: 0 0 28px rgb(214 185 140 / 6%);
  scroll-margin-top: 18px;
}

.registration-label-sync > header h2 {
  margin: 7px 0;
  color: var(--white);
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.08;
}

.registration-label-sync > header > p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.registration-label-sync .label-activation-card h3 {
  margin: 3px 0 2px;
  color: var(--white);
  font-size: 0.93rem;
}

.registration-label-sync .label-activation-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.registration-label-sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.registration-label-sync-actions form {
  margin: 0;
}

@media (max-width: 560px) {
  .registration-label-sync {
    padding: 16px;
  }

  .registration-label-sync-actions,
  .registration-label-sync-actions form,
  .registration-label-sync-actions .button {
    width: 100%;
  }
}

.label-confirmation-dialog {
  width: min(520px, calc(100% - 28px));
  padding: 24px;
  border: 1px solid rgb(214 185 140 / 45%);
  border-radius: 22px;
  color: var(--muted);
  background: #ffffff;
  box-shadow: 0 24px 90px rgb(0 0 0 / 70%);
}

.label-confirmation-dialog::backdrop {
  background: rgb(0 0 0 / 78%);
  backdrop-filter: blur(3px);
}

.label-confirmation-dialog h2 {
  margin: 10px 0;
  color: var(--white);
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  line-height: 1.08;
}

.label-confirmation-dialog-prompt > p:not(.eyebrow) {
  margin: 0;
  line-height: 1.58;
}

.label-confirmation-dialog-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.label-confirmation-dialog-actions form,
.label-confirmation-dialog-actions .button {
  width: 100%;
}

.label-confirmation-processing {
  display: grid;
  justify-items: center;
  padding: 8px 0 4px;
  text-align: center;
}

.label-confirmation-processing[hidden] {
  display: none;
}

.label-confirmation-processing .eyebrow {
  margin-top: 18px;
}

.label-confirmation-processing h2 {
  max-width: 420px;
  margin: 8px 0;
}

.label-confirmation-processing > p:not(.eyebrow) {
  max-width: 420px;
  margin: 0;
  line-height: 1.55;
}

.label-confirmation-processing > small {
  max-width: 390px;
  margin-top: 15px;
  color: #62584c;
  font-size: 0.7rem;
  line-height: 1.45;
}

.label-sync-spinner {
  position: relative;
  width: 78px;
  height: 78px;
  border: 1px solid rgb(214 185 140 / 30%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(214 185 140 / 18%), transparent 58%),
    rgb(214 185 140 / 5%);
  box-shadow:
    0 0 0 9px rgb(214 185 140 / 4%),
    0 0 38px rgb(214 185 140 / 18%);
}

.label-sync-spinner::before {
  position: absolute;
  inset: 7px;
  border: 5px solid rgb(214 185 140 / 16%);
  border-top-color: var(--lime);
  border-right-color: rgb(188 255 126 / 78%);
  border-radius: 50%;
  content: "";
  animation: label-sync-spin 0.9s linear infinite;
}

.label-sync-spinner::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 15px rgb(214 185 140 / 85%);
  content: "";
  transform: translate(-50%, -50%);
}

.label-sync-progress {
  position: relative;
  width: min(100%, 420px);
  height: 8px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgb(214 185 140 / 22%);
  border-radius: 999px;
  background: rgb(214 185 140 / 7%);
}

.label-sync-progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 44%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgb(214 185 140 / 20%),
    var(--lime),
    #baff7b
  );
  box-shadow: 0 0 16px rgb(214 185 140 / 62%);
  animation: label-sync-progress 1.35s ease-in-out infinite;
}

.label-sync-destinations {
  display: grid;
  width: min(100%, 420px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.label-sync-destinations > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgb(214 185 140 / 16%);
  border-radius: 12px;
  color: #62584c;
  background: rgb(214 185 140 / 5%);
  font-size: 0.64rem;
  font-weight: 800;
}

.label-sync-destinations b {
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  place-items: center;
  border-radius: 50%;
  color: #081006;
  background: var(--lime);
  font-size: 0.61rem;
}

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

@keyframes label-sync-progress {
  0% {
    transform: translateX(-120%);
  }

  55%,
  100% {
    transform: translateX(250%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .label-sync-spinner::before,
  .label-sync-progress > span {
    animation: none;
  }

  .label-sync-progress > span {
    left: 28%;
  }
}

.inventory-status-labeled {
  border-color: rgb(255 190 72 / 50%);
  color: #ffd17a;
  background: rgb(255 190 72 / 9%);
}

.form-alert-warning {
  border-color: rgb(255 190 72 / 45%);
  color: #ffe1a3;
  background: rgb(255 190 72 / 8%);
}

@media (max-width: 560px) {
  .label-confirmation-page {
    gap: 18px;
  }

  .label-lifecycle-steps > span {
    justify-content: center;
    padding: 9px 5px;
    font-size: 0.59rem;
  }

  .label-lifecycle-steps b {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    font-size: 0.62rem;
  }

  .label-confirmation-hero h1 {
    font-size: 2.55rem;
  }

  .label-activation-results {
    grid-template-columns: 1fr;
  }

  .label-print-card,
  .label-confirmation-dialog {
    padding: 18px;
  }

  .label-print-card-copy {
    align-items: flex-start;
  }
}

/* Customer account settings accordion */
.customer-settings-page {
  display: grid;
  gap: 18px;
}

.customer-settings-heading {
  margin-bottom: 2px;
}

.customer-settings-heading > p:last-child {
  max-width: 620px;
}

.customer-settings-form {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
}

.customer-settings-disclosure {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(122 145 122 / 28%);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgb(0 0 0 / 18%);
}

.customer-settings-disclosure-priority {
  border-color: rgb(214 185 140 / 48%);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 8%), transparent 46%),
    #ffffff;
}

.customer-settings-disclosure[open] {
  border-color: rgb(214 185 140 / 42%);
}

.customer-settings-summary {
  display: grid;
  min-width: 0;
  min-height: 86px;
  grid-template-columns: 40px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  color: var(--white);
  background: #ffffff;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.customer-settings-summary::-webkit-details-marker {
  display: none;
}

.customer-settings-summary::marker {
  display: none;
  content: "";
}

.customer-settings-summary:hover,
.customer-settings-summary:focus-visible,
.customer-settings-disclosure[open] > .customer-settings-summary {
  background: #ffffff;
}

.customer-settings-summary:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}

.customer-settings-number {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 42%);
  border-radius: 50%;
  color: var(--lime);
  background: rgb(214 185 140 / 8%);
  font-size: 0.68rem;
  font-weight: 880;
  letter-spacing: 0.06em;
}

.customer-settings-summary-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.customer-settings-summary-copy strong {
  color: var(--white);
  font-size: 1rem;
  line-height: 1.2;
}

.customer-settings-summary-copy small {
  overflow: hidden;
  color: #62584c;
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-settings-status {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid rgb(154 169 153 / 35%);
  border-radius: 999px;
  color: #62584c;
  background: #ffffff;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.customer-settings-status.is-on {
  border-color: rgb(214 185 140 / 50%);
  color: var(--lime-light);
  background: rgb(214 185 140 / 10%);
}

.customer-settings-chevron {
  display: block;
  width: 11px;
  height: 11px;
  grid-column: 4;
  border-right: 2px solid #aeb9ac;
  border-bottom: 2px solid #aeb9ac;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}

.customer-settings-disclosure[open] .customer-settings-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

.customer-settings-panel {
  display: grid;
  gap: 18px;
  padding: 18px;
  border-top: 1px solid rgb(255 255 255 / 7%);
  background: #ffffff;
}

.customer-settings-panel .form-grid {
  padding-top: 0;
}

.customer-settings-panel-intro,
.settings-consent-note {
  margin: 0;
  color: #62584c;
  font-size: 0.76rem;
  line-height: 1.55;
}

.customer-settings-page .field input {
  border-color: rgb(159 177 157 / 36%);
  background: #ffffff;
}

.customer-settings-page .field input:hover {
  border-color: rgb(190 205 188 / 52%);
  background: #ffffff;
}

.customer-settings-page .field input:focus {
  border-color: var(--lime);
  background: #ffffff;
}

.customer-settings-form-alert {
  margin: 0;
}

.settings-toggle-row {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgb(159 177 157 / 34%);
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
}

.settings-toggle-row:has(input:checked) {
  border-color: rgb(214 185 140 / 52%);
  background: rgb(64 94 44 / 30%);
}

.settings-toggle-row > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.settings-toggle-row:has(input:focus-visible) {
  outline: 3px solid rgb(214 185 140 / 22%);
  outline-offset: 2px;
}

.settings-toggle-track {
  display: flex;
  width: 48px;
  height: 28px;
  align-items: center;
  padding: 3px;
  border: 1px solid rgb(189 201 187 / 34%);
  border-radius: 999px;
  background: #ffffff;
  transition: background 160ms ease, border-color 160ms ease;
}

.settings-toggle-track > span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dce3da;
  transition: transform 160ms ease, background 160ms ease;
}

.settings-toggle-row > input:checked + .settings-toggle-track {
  border-color: var(--lime);
  background: #4f8e20;
}

.settings-toggle-row > input:checked + .settings-toggle-track > span {
  background: #fff;
  transform: translateX(20px);
}

.settings-toggle-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.settings-toggle-copy strong {
  color: var(--white);
  font-size: 0.9rem;
}

.settings-toggle-copy small {
  color: #62584c;
  font-size: 0.7rem;
  line-height: 1.45;
}

.settings-program-picker,
.settings-choice-section,
.settings-delivery-destination,
.settings-custom-address {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgb(159 177 157 / 28%);
  border-radius: 15px;
  background: #ffffff;
}

.settings-program-picker > header,
.settings-choice-section > header,
.settings-delivery-destination > header,
.settings-custom-address > header {
  display: grid;
  gap: 4px;
}

.settings-program-picker > header > span,
.settings-delivery-destination > header > span,
.settings-custom-address > header > span {
  color: var(--lime);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.settings-program-picker > header > strong,
.settings-choice-section > header > strong,
.settings-delivery-destination > header > strong,
.settings-custom-address > header > strong {
  color: var(--white);
  font-size: 0.92rem;
}

.settings-program-picker > header > small,
.settings-choice-section > header > small {
  color: #62584c;
  font-size: 0.7rem;
  line-height: 1.45;
}

.settings-choice-grid {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.settings-choice-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 74px;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(164 180 162 / 34%);
  border-radius: 13px;
  background: #ffffff;
  cursor: pointer;
}

.settings-choice-card:hover {
  border-color: rgb(214 185 140 / 46%);
  background: #ffffff;
}

.settings-choice-card:has(input:checked) {
  border-color: var(--lime);
  background: rgb(67 104 41 / 34%);
  box-shadow: inset 0 0 0 1px rgb(214 185 140 / 13%);
}

.settings-choice-card:has(input:focus-visible) {
  outline: 3px solid rgb(214 185 140 / 20%);
  outline-offset: 2px;
}

.settings-choice-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.settings-choice-card > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.settings-choice-indicator {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 2px solid #879485;
  border-radius: 50%;
  background: #ffffff;
}

.settings-choice-card > input:checked + .settings-choice-indicator {
  border: 6px solid var(--lime);
  background: #fff;
}

.settings-choice-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.settings-choice-copy strong {
  color: var(--white);
  font-size: 0.82rem;
}

.settings-choice-copy small {
  color: #62584c;
  font-size: 0.68rem;
  line-height: 1.4;
}

.settings-program-list {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.settings-program-list[hidden],
.settings-delivery-destination[hidden],
.settings-custom-address[hidden] {
  display: none;
}

.settings-program-list-label {
  color: #62584c;
  font-size: 0.7rem;
  font-weight: 800;
}

.settings-program-options {
  display: grid;
  gap: 8px;
}

.settings-program-options label {
  position: relative;
  display: grid;
  min-height: 48px;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid rgb(159 177 157 / 30%);
  border-radius: 11px;
  background: #ffffff;
  cursor: pointer;
}

.settings-program-options label:has(input:checked) {
  border-color: rgb(214 185 140 / 60%);
  color: var(--white);
  background: rgb(68 108 40 / 40%);
}

.settings-program-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.settings-program-options label:has(input:focus-visible) {
  outline: 3px solid rgb(214 185 140 / 20%);
  outline-offset: 2px;
}

.settings-program-options span {
  color: #62584c;
  font-size: 0.78rem;
  font-weight: 760;
}

.settings-custom-address .form-grid {
  padding-top: 0;
}

.customer-settings-save {
  display: grid;
  gap: 14px;
  margin-top: 2px;
  padding: 16px;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 16px;
  background: #ffffff;
}

.customer-settings-save > div {
  display: grid;
  gap: 3px;
}

.customer-settings-save > div strong {
  color: var(--white);
  font-size: 0.86rem;
}

.customer-settings-save > div small {
  color: #62584c;
  font-size: 0.7rem;
}

.customer-settings-save .button,
.customer-settings-panel > .button {
  width: 100%;
}

@media (min-width: 680px) {
  .settings-choice-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-program-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-settings-save {
    grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
    align-items: center;
  }
}

@media (max-width: 480px) {
  .customer-settings-summary {
    min-height: 80px;
    grid-template-columns: 34px minmax(0, 1fr) auto 18px;
    gap: 9px;
    padding: 14px 13px;
  }

  .customer-settings-number {
    width: 32px;
    height: 32px;
    font-size: 0.61rem;
  }

  .customer-settings-summary-copy strong {
    font-size: 0.9rem;
  }

  .customer-settings-summary-copy small {
    font-size: 0.64rem;
  }

  .customer-settings-status {
    min-height: 27px;
    padding: 4px 8px;
    font-size: 0.58rem;
  }

  .customer-settings-panel {
    padding: 14px;
  }

  .settings-program-picker,
  .settings-choice-section,
  .settings-delivery-destination,
  .settings-custom-address {
    padding: 13px;
  }

  .settings-toggle-row {
    padding: 14px;
  }
}

/* Storage waiting queue and bottom pallet search */
.storage-awaiting-panel {
  width: 100%;
  scroll-margin-top: 18px;
}

.storage-awaiting-panel > summary {
  list-style: none;
}

.storage-awaiting-panel > summary::-webkit-details-marker {
  display: none;
}

.storage-awaiting-panel .storage-awaiting-card {
  width: 100%;
  grid-template-columns: auto auto minmax(0, 1fr) 20px;
  grid-template-areas:
    "label label label toggle"
    "count unit . toggle";
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.storage-awaiting-panel .storage-awaiting-card:hover,
.storage-awaiting-panel .storage-awaiting-card:focus-visible {
  border-color: rgb(214 185 140 / 68%);
}

.storage-awaiting-panel .storage-awaiting-card:focus-visible {
  outline: 3px solid rgb(214 185 140 / 16%);
  outline-offset: 3px;
}

.storage-awaiting-toggle {
  grid-area: toggle;
  width: 11px;
  height: 11px;
  align-self: center;
  border-right: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.storage-awaiting-panel[open] .storage-awaiting-toggle {
  transform: rotate(225deg);
}

.storage-awaiting-queue {
  display: grid;
  gap: 13px;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: 15px;
  background: var(--surface);
}

.storage-awaiting-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.storage-awaiting-heading > div,
.storage-awaiting-empty {
  display: grid;
  gap: 3px;
}

.storage-awaiting-heading strong,
.storage-awaiting-empty strong {
  color: var(--white);
  font-size: 0.86rem;
}

.storage-awaiting-heading span,
.storage-awaiting-heading small,
.storage-awaiting-empty span {
  color: var(--muted);
  font-size: 0.68rem;
}

.storage-awaiting-list {
  display: grid;
  gap: 9px;
}

.storage-awaiting-row {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--surface-border);
  border-radius: 13px;
  background: var(--input-surface);
}

.storage-awaiting-identity,
.storage-awaiting-row label {
  display: grid;
  gap: 6px;
}

.storage-awaiting-identity span,
.storage-awaiting-row label > span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.storage-awaiting-identity strong {
  color: var(--white);
  font-size: 0.9rem;
}

.storage-awaiting-row select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: 11px;
  color: var(--white);
  background: var(--input-surface);
  font: inherit;
  font-size: 0.78rem;
}

.storage-awaiting-row select:hover {
  border-color: var(--input-border-hover);
}

.storage-awaiting-row select:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow: 0 0 0 3px rgb(214 185 140 / 11%);
}

.storage-awaiting-row .button {
  width: 100%;
}

.storage-pallet-search {
  padding-bottom: 18px;
  scroll-margin-top: 18px;
}

.storage-pallet-search .storage-search {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.storage-search-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.storage-search-actions .button {
  width: 100%;
}

.storage-search-results,
.storage-pallet-search .storage-empty {
  margin-top: 12px;
}

.storage-search-result.storage-inventory-row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "identity"
    "location";
}

@media (min-width: 720px) {
  .storage-awaiting-row {
    grid-template-columns: minmax(140px, 0.65fr) minmax(220px, 1.35fr) max-content;
    align-items: end;
  }

  .storage-awaiting-row .button {
    width: auto;
    min-width: 92px;
  }

  .storage-pallet-search .storage-search {
    grid-template-columns: minmax(260px, 1fr) max-content;
    align-items: end;
  }

  .storage-search-actions {
    grid-template-columns: repeat(2, max-content);
  }

  .storage-search-result.storage-inventory-row {
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr);
    grid-template-areas: "identity location";
  }
}

/* Compact added-program state */
.intake-program-list {
  gap: 8px;
}

.intake-builder-program {
  border-color: rgb(214 185 140 / 46%);
  background:
    linear-gradient(135deg, rgb(214 185 140 / 15%), transparent 68%),
    rgb(255 255 255 / 84%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 4%),
    0 0 24px rgb(214 185 140 / 7%);
}

.intake-builder-program > header {
  display: block;
  padding: 11px 13px 7px;
  border-bottom: 0;
}

.intake-program-added-state {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--lime-light);
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.intake-program-added-state::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px rgb(214 185 140 / 72%);
  content: "";
}

.intake-program-summary {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
}

.intake-builder-program .intake-program-summary h3 {
  min-width: 0;
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.intake-program-price {
  flex: 0 0 auto;
  color: var(--lime-light);
  font-size: 0.88rem;
  font-weight: 900;
  white-space: nowrap;
}

.intake-builder-program-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 13px 11px;
}

.intake-program-quantity {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid rgb(214 185 140 / 25%);
  border-radius: 999px;
  color: #62584c;
  background: rgb(214 185 140 / 8%);
  font-size: 0.66rem;
  font-weight: 850;
  white-space: nowrap;
}

.intake-builder-program .intake-program-remove-button {
  width: auto;
  min-height: 30px;
  margin: 0;
  padding: 4px 11px;
  border: 1px solid rgb(255 104 104 / 48%);
  border-radius: 999px;
  color: #ffb2b2;
  background: rgb(255 74 74 / 12%);
  font: inherit;
  font-size: 0.63rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.intake-builder-program .intake-program-remove-button:hover,
.intake-builder-program .intake-program-remove-button:focus-visible {
  border-color: rgb(255 120 120 / 82%);
  color: #7d2020;
  background: rgb(255 74 74 / 24%);
}

.intake-builder-program .intake-program-remove-button:focus-visible {
  outline: 2px solid rgb(255 104 104 / 25%);
  outline-offset: 2px;
}

/* Private wholesale market framework */
.customer-wholesale-badge {
  border-color: rgb(214 185 140 / 34%) !important;
  color: var(--lime-light) !important;
  background: rgb(214 185 140 / 10%) !important;
}

.customer-pay-later-card.customer-wholesale-card {
  border-color: rgb(214 185 140 / 28%);
  background:
    linear-gradient(130deg, rgb(214 185 140 / 9%), transparent 44%),
    var(--surface);
}

.family-card-action.wholesale-market-action {
  border-color: rgb(214 185 140 / 50%);
  background:
    radial-gradient(circle at 100% 0, rgb(214 185 140 / 18%), transparent 42%),
    var(--surface);
}

.wholesale-workspace {
  max-width: 1060px;
}

.wholesale-admin-entry {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 15px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgb(214 185 140 / 35%);
  border-radius: var(--radius-lg);
  color: var(--white);
  background:
    radial-gradient(circle at 100% 0, rgb(214 185 140 / 13%), transparent 42%),
    var(--surface);
}

.wholesale-admin-entry:hover {
  border-color: rgb(214 185 140 / 65%);
}

.wholesale-admin-entry > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.wholesale-admin-entry > span:nth-child(2) > small {
  color: var(--lime);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wholesale-admin-entry > span:nth-child(2) > span,
.wholesale-product-list small,
.wholesale-product-list span,
.wholesale-product-card p,
.wholesale-product-card small,
.wholesale-product-card span {
  color: var(--muted);
  font-size: 0.65rem;
}

.wholesale-entry-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 15px;
  color: var(--lime);
  background: rgb(214 185 140 / 9%);
}

.wholesale-entry-icon svg,
.wholesale-product-photo svg {
  width: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.wholesale-entry-count {
  display: grid;
  min-width: 70px;
  justify-items: center;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--surface-border);
  border-radius: 13px;
  background: rgb(0 0 0 / 22%);
}

.wholesale-entry-count strong,
.wholesale-summary strong,
.wholesale-product-price strong {
  color: var(--lime-light);
}

.wholesale-entry-count small,
.wholesale-summary span {
  color: var(--muted);
  font-size: 0.6rem;
  text-transform: uppercase;
}

.wholesale-private-banner {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  padding: 21px;
  border: 1px solid rgb(214 185 140 / 33%);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% 0, rgb(214 185 140 / 14%), transparent 42%),
    var(--surface);
}

.wholesale-private-banner h2,
.wholesale-catalog-panel h2 {
  margin-top: 7px;
}

.wholesale-private-banner p:last-child {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

.wholesale-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.wholesale-summary article {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: var(--surface);
}

.wholesale-summary strong {
  font-size: 1.7rem;
}

.wholesale-catalog-panel {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.wholesale-catalog-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.wholesale-access-pill {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid rgb(214 185 140 / 38%);
  border-radius: 999px;
  color: var(--lime-light);
  background: rgb(214 185 140 / 9%);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.wholesale-product-list,
.wholesale-product-grid {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.wholesale-product-list > article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 15px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background: rgb(0 0 0 / 22%);
}

.wholesale-product-list > article > div {
  display: grid;
  gap: 4px;
}

.wholesale-product-list > article > div:last-child {
  justify-items: end;
}

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

.wholesale-product-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgb(214 185 140 / 22%);
  border-radius: 16px;
  background: rgb(0 0 0 / 22%);
}

.wholesale-product-photo {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 14px;
  color: var(--lime);
  background: rgb(214 185 140 / 9%);
}

.wholesale-product-card h3 {
  margin: 4px 0 0;
  font-size: 1rem;
}

.wholesale-product-card p {
  margin: 6px 0 0;
  line-height: 1.45;
}

.wholesale-product-price {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}

.wholesale-product-price strong {
  font-size: 1.25rem;
}

.wholesale-product-price small {
  margin-left: auto;
}

.wholesale-empty {
  display: grid;
  justify-items: center;
  margin-top: 18px;
  padding: 38px 20px;
  border: 1px dashed rgb(214 185 140 / 24%);
  border-radius: 16px;
  text-align: center;
  background: rgb(0 0 0 / 18%);
}

.wholesale-empty > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 14px;
  color: var(--lime);
  background: rgb(214 185 140 / 9%);
  font-weight: 850;
}

.wholesale-empty h3 {
  margin-top: 14px;
}

.wholesale-empty p {
  max-width: 500px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

@media (max-width: 620px) {
  .wholesale-admin-entry {
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }

  .wholesale-entry-count {
    display: none;
  }

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

  .wholesale-summary article:first-child {
    grid-column: 1 / -1;
  }

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

@media (max-width: 430px) {
  .wholesale-private-banner {
    grid-template-columns: 1fr;
    padding: 17px;
  }

  .wholesale-catalog-panel {
    padding: 15px;
  }

  .wholesale-catalog-panel > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .wholesale-product-list > article {
    grid-template-columns: 1fr;
  }

  .wholesale-product-list > article > div:last-child {
    justify-items: start;
    padding-top: 10px;
    border-top: 1px solid var(--surface-border);
  }
}