/* Buyer-only shell and commerce surfaces. Root tokens come from whop-theme.css. */

body.buyer-page.buyer-shell-active,
body.dashboard-page.buyer-mode {
  --buyer-ink: var(--whop-ink, #202020);
  --buyer-muted: var(--whop-muted, #838383);
  --buyer-line: var(--whop-border, #e8e8e8);
  --buyer-soft: var(--whop-gray, #f0f0f0);
  --buyer-blue: var(--whop-blue, #1754d8);
  --buyer-blue-hover: #0543c7;
  --buyer-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fino-canvas: #fff;
  --fino-canvas-sunken: #f9f9f9;
  --fino-surface: #fff;
  --fino-surface-raised: #fff;
  --fino-surface-sunken: #f0f0f0;
  --fino-hairline: var(--buyer-line);
  --fino-hairline-soft: #f0f0f0;
  --fino-hairline-strong: #d9d9d9;
  --fino-ink: var(--buyer-ink);
  --fino-ink-secondary: #646464;
  --fino-ink-muted: var(--buyer-muted);
  --fino-ink-faint: #8d8d8d;
  --fino-accent: var(--buyer-blue);
  --fino-accent-hover: var(--buyer-blue-hover);
  --fino-accent-press: var(--buyer-blue-hover);
  --fino-accent-rgb: 23, 84, 216;
  --fino-accent-soft: #ebf2ff;
  --fino-focus-ring: #7ea7f5;
  min-height: 100dvh;
  background: #fff;
  color: var(--buyer-ink);
  font-family: var(--buyer-font);
  -webkit-font-smoothing: antialiased;
}

body.buyer-page.buyer-shell-active :is(.fino-card, .form-block, .drop-folder, .hat-card, .od-card, .od-box, .account-card, .account-balance-card, .account-section-card),
body.dashboard-page.buyer-mode :is(.wholesaler-mobile-drop, .wholesaler-mobile-order-card, .wholesaler-mobile-state, .wholesaler-mobile-recent__list) {
  border-color: var(--buyer-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

body.buyer-page.buyer-shell-active :is(.channel-btn, .fino-btn--primary, #submit-btn, .auth-submit),
body.dashboard-page.buyer-mode :is(.channel-btn, .fino-btn--primary) {
  border-color: var(--buyer-blue);
  background: var(--buyer-blue);
  color: #fff;
  box-shadow: none;
}

body.buyer-page.buyer-shell-active :is(.channel-btn, .fino-btn--primary, #submit-btn, .auth-submit):hover:not(:disabled),
body.dashboard-page.buyer-mode :is(.channel-btn, .fino-btn--primary):hover:not(:disabled) {
  border-color: var(--buyer-blue-hover);
  background: var(--buyer-blue-hover);
  color: #fff;
}

body.buyer-page.buyer-shell-active :is(.channel-btn, .fino-btn--primary, #submit-btn, .auth-submit):is(:disabled, [aria-disabled="true"]),
body.dashboard-page.buyer-mode :is(.channel-btn, .fino-btn--primary):is(:disabled, [aria-disabled="true"]) {
  border-color: var(--buyer-line);
  background: var(--buyer-soft);
  color: var(--buyer-muted);
  cursor: not-allowed;
}

body.buyer-page.buyer-shell-active :is(.channel-btn, .fino-btn--primary, #submit-btn, .auth-submit)[aria-disabled="true"]:hover,
body.dashboard-page.buyer-mode :is(.channel-btn, .fino-btn--primary)[aria-disabled="true"]:hover {
  border-color: var(--buyer-line);
  background: var(--buyer-soft);
  color: var(--buyer-muted);
}

body.buyer-page.buyer-shell-active :is(.fino-btn--secondary, .fino-btn--tertiary, .secondary-action, .orders-filter, .od-back) {
  border-color: #d9d9d9;
  border-radius: 8px;
  background: #fff;
  color: var(--buyer-ink);
  box-shadow: none;
}

body.buyer-page.buyer-shell-active :is(.fino-btn--secondary, .fino-btn--tertiary, .secondary-action, .orders-filter, .od-back):hover {
  background: var(--buyer-soft);
  color: var(--buyer-ink);
}

body.buyer-page.buyer-shell-active :is(button, a, input, select, textarea),
body.dashboard-page.buyer-mode :is(button, a, input, select, textarea) {
  font-family: var(--buyer-font);
}

body.buyer-page.buyer-shell-active :is(button, a):focus-visible,
body.dashboard-page.buyer-mode :is(button, a):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--buyer-blue) 28%, transparent);
  outline-offset: 2px;
}

body.buyer-page.buyer-shell-active :is(.admin-table, .fino-table) {
  border: 1px solid var(--buyer-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.buyer-page.buyer-shell-active :is(.admin-table, .fino-table) thead th {
  height: auto;
  padding: 12px 16px;
  border-bottom: 1px solid var(--buyer-line);
  background: #fff;
  color: var(--buyer-muted);
  font: 400 14px/20px var(--buyer-font);
  letter-spacing: 0;
  text-transform: none;
}

body.buyer-page.buyer-shell-active :is(.admin-table, .fino-table) tbody td {
  height: auto;
  padding: 12px 16px;
  border-bottom-color: var(--buyer-line);
  background: #fff;
  color: var(--buyer-ink);
  font: 400 14px/20px var(--buyer-font);
}

body.buyer-page.buyer-shell-active :is(.admin-table, .fino-table) tbody tr:hover td {
  background: #f9f9f9;
}

body.buyer-page.buyer-shell-active .admin-table .badge {
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 4px;
  font: 400 12px/16px var(--buyer-font);
  letter-spacing: 0;
  text-transform: none;
}

body.buyer-page.buyer-shell-active .admin-table .badge::before {
  display: none;
}

body.buyer-page.buyer-shell-active .admin-table td.order-id,
body.buyer-page.buyer-shell-active .admin-table td.order-id a {
  color: var(--buyer-ink);
  font: 400 14px/20px var(--buyer-font);
  text-decoration: none;
}

body.buyer-page.buyer-shell-active .admin-table td.order-id a:hover {
  color: var(--buyer-ink);
  text-decoration: underline;
}

body.buyer-page--account.buyer-shell-active .account-heading {
  padding: 0;
}

body.buyer-page--account.buyer-shell-active .account-heading > p:last-child,
body.buyer-page--account.buyer-shell-active .account-card__label,
body.buyer-page--account.buyer-shell-active .account-statement-badge,
body.buyer-page--account.buyer-shell-active .account-section-heading p {
  display: none;
}

body.buyer-page--account.buyer-shell-active .account-balance-card__head {
  display: block;
}

body.buyer-page--account.buyer-shell-active .account-balance-card h2,
body.buyer-page--account.buyer-shell-active .account-card h2,
body.buyer-page--account.buyer-shell-active .account-section-heading h2 {
  color: var(--buyer-ink);
  font: 600 16px/22px var(--buyer-font);
  letter-spacing: -.015em;
}

body.buyer-page--account.buyer-shell-active .account-balance-amount {
  margin-top: 12px;
  color: var(--buyer-ink);
  font: 600 40px/48px var(--buyer-font);
  letter-spacing: -.04em;
}

body.buyer-page--account.buyer-shell-active .account-section-heading {
  align-items: flex-start;
  padding: 8px 0 0;
}

body.buyer-page--account.buyer-shell-active .account-security-state {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--buyer-muted);
  font: 400 12px/16px var(--buyer-font);
}

@media (min-width: 681px) {
  body.buyer-page.buyer-shell-active {
    padding-left: 280px;
  }

  body.buyer-page.buyer-shell-active > .topbar {
    display: none !important;
  }

  body.buyer-page.buyer-shell-active > .buyer-shell {
    display: contents;
  }

  .whop-buyer-sidebar {
    position: fixed;
    z-index: 180;
    inset: 0 auto 0 0;
    display: flex;
    width: 280px;
    flex-direction: column;
    box-sizing: border-box;
    border-right: 1px solid var(--buyer-line);
    background: #fff;
  }

  .whop-buyer-sidebar__brand {
    display: flex;
    height: 56px;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    border-bottom: 1px solid var(--buyer-line);
    color: var(--buyer-ink);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
  }

  .whop-buyer-sidebar__mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
  }

  .whop-buyer-sidebar__mark img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .whop-buyer-sidebar__nav {
    display: grid;
    gap: 2px;
    padding: 8px;
  }

  .whop-buyer-sidebar__workspace {
    display: flex;
    height: 96px;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 0 20px;
    border-bottom: 1px solid var(--buyer-line);
    color: var(--buyer-ink);
  }

  .whop-buyer-sidebar__workspace-avatar {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 1px solid var(--buyer-ink);
    border-radius: 14px;
    outline: 2px solid #fff;
    background: #fff;
    box-shadow: 0 0 0 3px var(--buyer-ink);
    overflow: hidden;
  }

  .whop-buyer-sidebar__workspace-avatar img {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
  }

  .whop-buyer-sidebar__workspace-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  .whop-buyer-sidebar__link {
    display: flex;
    height: 40px;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--buyer-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    text-decoration: none;
    transition: background-color 150ms var(--whop-ease, ease), color 150ms var(--whop-ease, ease);
  }

  .whop-buyer-sidebar__link:hover,
  .whop-buyer-sidebar__link.is-active {
    background: var(--buyer-soft);
    color: var(--buyer-ink);
  }

  .whop-buyer-sidebar__link svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
  }

  .whop-buyer-sidebar__footer {
    margin-top: auto;
    padding: 8px;
    border-top: 1px solid var(--buyer-line);
  }

  .whop-buyer-sidebar__footer button,
  .whop-buyer-topbar__logout {
    min-height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--buyer-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
  }

  .whop-buyer-sidebar__footer button {
    width: 100%;
    padding: 0 12px;
    text-align: left;
  }

  .whop-buyer-sidebar__footer button:hover,
  .whop-buyer-topbar__logout:hover {
    background: var(--buyer-soft);
    color: var(--buyer-ink);
  }

  .whop-buyer-topbar {
    position: fixed;
    z-index: 170;
    top: 0;
    right: 0;
    left: 280px;
    display: flex;
    height: 56px;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 0 24px;
    border-bottom: 1px solid var(--buyer-line);
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .whop-buyer-topbar__title {
    display: none;
  }

  .whop-buyer-topbar__logout {
    padding: 0 10px;
  }

  .buyer-shell .wholesaler-mobile-header,
  .buyer-shell .wholesaler-mobile-menu,
  .buyer-shell .wholesaler-mobile-bottom-nav {
    display: none !important;
  }

  body.buyer-page.buyer-shell-active > main {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: 88px 32px 48px;
    background: #fff;
  }

  body.buyer-page.buyer-shell-active :is(.catalog-main, .orders-main, .account-main, .od-wrap) {
    width: min(100%, 1200px);
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
  }

  body.buyer-page.buyer-shell-active .od-wrap {
    max-width: 760px;
  }

  body.buyer-page.buyer-shell-active :is(.catalog-intro, .orders-header, .account-heading) {
    margin-bottom: 28px;
  }

  body.buyer-page.buyer-shell-active :is(.catalog-intro .eyebrow, .account-heading .eyebrow) {
    display: none;
  }

  body.buyer-page.buyer-shell-active :is(.catalog-intro h1, .orders-h1, .od-h1, .account-heading h1) {
    margin-top: 0;
    color: var(--buyer-ink);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 36px;
  }

  body.buyer-page.buyer-shell-active :is(.catalog-intro p, .orders-meta, .account-heading > p:last-child) {
    color: var(--buyer-muted);
    font-size: 14px;
    line-height: 20px;
  }

  body.buyer-page.buyer-shell-active :is(.drop-folder, .hat-card, .form-block, .od-card, .od-box, .account-card, .account-balance-card, .account-section-card) {
    box-shadow: none !important;
  }

  body.buyer-page.buyer-shell-active .drop-folder.is-upcoming,
  body.buyer-page.buyer-shell-active .drop-header:hover {
    background: #f9f9f9;
  }

  body.buyer-page.buyer-shell-active .orders-filter.is-active {
    border-color: #cbdcff;
    background: #ebf2ff;
    color: var(--buyer-blue);
  }

  body.buyer-page.buyer-shell-active .account-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body.buyer-page.buyer-shell-active .account-main > :is(.account-heading, .account-section-heading) {
    margin: 12px 0 4px;
  }

  body.buyer-page.buyer-shell-active .account-main > :is(.account-card, .account-balance-card) {
    padding: 20px;
  }

  body.buyer-page.buyer-shell-active .account-balance-facts {
    gap: 16px;
  }
}

@media (max-width: 680px) {
  body.buyer-page.buyer-shell-active,
  body.dashboard-page.buyer-mode {
    background: #fff;
    overflow-x: hidden;
  }

  body.buyer-page.buyer-shell-active > .topbar,
  body.dashboard-page.buyer-mode > .fino-topbar,
  .whop-buyer-sidebar,
  .whop-buyer-topbar {
    display: none !important;
  }

  body.buyer-page.buyer-shell-active > .buyer-shell {
    display: block;
  }

  body.buyer-page.buyer-shell-active .buyer-shell .wholesaler-mobile-header,
  body.dashboard-page.buyer-mode .wholesaler-mobile-header {
    position: fixed;
    z-index: 180;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    align-items: center;
    box-sizing: border-box;
    padding: env(safe-area-inset-top, 0px) 12px 0;
    border-bottom: 1px solid var(--buyer-line);
    background: rgba(255, 255, 255, .96);
    box-shadow: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  body.buyer-page.buyer-shell-active .wholesaler-mobile-brand,
  body.dashboard-page.buyer-mode .wholesaler-mobile-brand {
    min-height: 56px;
    gap: 8px;
    color: var(--buyer-ink);
    font-size: 14px;
    font-weight: 600;
  }

  body.buyer-page.buyer-shell-active .wholesaler-mobile-brand__mark,
  body.dashboard-page.buyer-mode .wholesaler-mobile-brand__mark {
    width: 28px;
    height: 28px;
  }

  body.buyer-page.buyer-shell-active .wholesaler-mobile-brand__mark img,
  body.dashboard-page.buyer-mode .wholesaler-mobile-brand__mark img {
    width: 24px;
    height: 24px;
  }

  body.buyer-page.buyer-shell-active .wholesaler-mobile-menu-button,
  body.dashboard-page.buyer-mode .wholesaler-mobile-menu-button {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: var(--buyer-ink);
  }

  body.buyer-page.buyer-shell-active .wholesaler-mobile-menu,
  body.dashboard-page.buyer-mode .wholesaler-mobile-menu {
    top: calc(64px + env(safe-area-inset-top, 0px));
    right: 8px;
    left: 8px;
    z-index: 190;
    padding: 6px;
    border-color: var(--buyer-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
  }

  body.buyer-page.buyer-shell-active .wholesaler-mobile-menu :is(a, button),
  body.dashboard-page.buyer-mode .wholesaler-mobile-menu :is(a, button) {
    min-height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--buyer-ink);
    font-size: 14px;
    font-weight: 500;
  }

  body.buyer-page.buyer-shell-active .wholesaler-mobile-menu button,
  body.dashboard-page.buyer-mode .wholesaler-mobile-menu button {
    color: var(--buyer-muted);
  }

  body.buyer-page.buyer-shell-active > main {
    box-sizing: border-box;
    width: min(100%, 680px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(80px + env(safe-area-inset-top, 0px)) 16px calc(80px + env(safe-area-inset-bottom, 0px));
    background: #fff;
  }

  body.buyer-page.buyer-shell-active :is(.catalog-intro .eyebrow, .account-heading .eyebrow) {
    display: none;
  }

  body.buyer-page.buyer-shell-active :is(.catalog-intro h1, .orders-h1, .od-h1, .account-heading h1) {
    color: var(--buyer-ink);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 30px;
  }

  body.buyer-page.buyer-shell-active :is(.catalog-intro p, .orders-meta, .account-heading > p:last-child) {
    color: var(--buyer-muted);
    font-size: 14px;
    line-height: 20px;
  }

  body.buyer-page.buyer-shell-active :is(.drop-folder, .hat-card, .form-block, .od-card, .od-box, .account-card, .account-balance-card, .account-section-card) {
    border-radius: 16px;
    box-shadow: none !important;
  }

  body.buyer-page.buyer-shell-active :is(.fino-input, .fino-select, .fino-textarea, input, select, textarea) {
    border-color: #d9d9d9;
    border-radius: 8px;
    box-shadow: none;
  }

  body.buyer-page.buyer-shell-active .account-main {
    gap: 16px;
  }

  body.buyer-page.buyer-shell-active .account-main > :is(.account-card, .account-balance-card) {
    padding: 16px;
  }

  body.buyer-page.buyer-shell-active .account-card__head,
  body.buyer-page.buyer-shell-active .account-identity,
  body.buyer-page.buyer-shell-active .account-help {
    gap: 10px;
  }

  body.buyer-page.buyer-shell-active .od-wrap {
    max-width: none;
  }

  body.buyer-page.buyer-shell-active .orders-empty-card,
  body.buyer-page.buyer-shell-active .empty-state {
    min-height: 160px;
    padding: 20px;
    border: 1px solid var(--buyer-line);
    border-radius: 16px;
    background: #fff;
    color: var(--buyer-muted);
    box-shadow: none;
  }

  body.buyer-page.buyer-shell-active .wholesaler-mobile-bottom-nav,
  body.dashboard-page.buyer-mode .wholesaler-mobile-bottom-nav {
    position: fixed;
    z-index: 180;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    min-height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--buyer-line);
    background: rgba(255, 255, 255, .96);
    box-shadow: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  body.buyer-page.buyer-shell-active .wholesaler-mobile-bottom-nav a,
  body.dashboard-page.buyer-mode .wholesaler-mobile-bottom-nav a {
    min-height: 48px;
    gap: 2px;
    border-radius: 8px;
    color: var(--buyer-muted);
    font-size: 11px;
    font-weight: 500;
  }

  body.buyer-page.buyer-shell-active .wholesaler-mobile-bottom-nav a.is-active,
  body.dashboard-page.buyer-mode .wholesaler-mobile-bottom-nav a.is-active {
    color: var(--buyer-ink);
    background: var(--buyer-soft);
  }

  body.buyer-page.buyer-shell-active .wholesaler-mobile-bottom-nav svg,
  body.dashboard-page.buyer-mode .wholesaler-mobile-bottom-nav svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.7;
  }

  body.dashboard-page.buyer-mode .dashboard-main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    background: #fff;
  }

  body.dashboard-page.buyer-mode .wholesaler-mobile-home:not([hidden]) {
    min-height: 100dvh;
    background: #fff;
  }

  body.dashboard-page.buyer-mode .wholesaler-mobile-content {
    width: min(100% - 32px, 560px);
    padding-top: 80px;
  }

  body.dashboard-page.buyer-mode .wholesaler-mobile-intro > p:first-child,
  body.dashboard-page.buyer-mode .wholesaler-mobile-kicker {
    display: none;
  }

  body.dashboard-page.buyer-mode .wholesaler-mobile-intro h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 30px;
  }

  body.dashboard-page.buyer-mode :is(.wholesaler-mobile-drop, .wholesaler-mobile-order-card, .wholesaler-mobile-state, .wholesaler-mobile-recent__list, .wholesaler-mobile-support) {
    border-color: var(--buyer-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
  }

  body.dashboard-page.buyer-mode .wholesaler-mobile-drop {
    margin-top: 20px;
    padding: 16px;
  }

  body.dashboard-page.buyer-mode .wholesaler-mobile-primary {
    min-height: 40px;
    border-radius: 8px;
    background: var(--buyer-blue);
    font-size: 14px;
    font-weight: 500;
  }

  body.dashboard-page.buyer-mode .wholesaler-mobile-support {
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    min-height: 64px;
    padding: 12px;
  }

  body.dashboard-page.buyer-mode .wholesaler-mobile-support__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--buyer-soft);
    color: var(--buyer-ink);
  }

  body.dashboard-page.buyer-mode .wholesaler-mobile-support small {
    color: var(--buyer-muted);
  }

  body.buyer-page--catalog.buyer-shell-active.buyer-form-focused #moq-bar,
  body.buyer-page--catalog.buyer-shell-active.buyer-form-focused .buyer-shell .wholesaler-mobile-bottom-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.buyer-page.buyer-shell-active .empty-state-cta {
    border-radius: 8px;
  }
}

@media (max-width: 640px) {
  body.buyer-page--orders.buyer-shell-active main > #orders-table.admin-table {
    border: 0;
    background: transparent;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody {
    display: grid;
    gap: 12px;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "order date"
      "quantity total"
      "status support"
      "invoice invoice";
    align-items: start;
    align-content: space-between;
    gap: 12px 6px;
    min-height: 180px;
    margin: 0;
    padding: 14px 16px;
    border-color: var(--buyer-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td {
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border: 0;
    color: var(--buyer-ink);
    font: 400 14px/20px var(--buyer-font);
    text-align: left;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td.admin-only-col {
    display: none;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td::before {
    color: var(--buyer-muted);
    font: 400 11px/14px var(--buyer-font);
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td.order-id {
    grid-area: order;
    display: block;
    overflow: hidden;
    font: 500 14px/20px var(--buyer-font);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td.order-id::before,
  body.buyer-page--orders.buyer-shell-active #orders-table tbody td[data-label="Date"]::before,
  body.buyer-page--orders.buyer-shell-active #orders-table tbody td[data-label="Status"]::before,
  body.buyer-page--orders.buyer-shell-active #orders-table tbody td[data-label="Support"]::before {
    display: none;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td[data-label="Date"] {
    grid-area: date;
    align-items: flex-end;
    color: var(--buyer-muted);
    font-size: 12px;
    line-height: 20px;
    text-align: right;
    white-space: nowrap;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td[data-label="Quantity"] {
    grid-area: quantity;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td[data-label="Total"] {
    grid-area: total;
    align-items: flex-end;
    text-align: right;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td[data-label="Status"] {
    grid-area: status;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td[data-label="Support"] {
    grid-area: support;
    align-items: flex-end;
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td[data-label="Support"] a {
    min-height: 32px;
    color: var(--buyer-blue);
    font: 500 13px/20px var(--buyer-font);
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td[data-label="Invoice"] {
    grid-area: invoice;
    width: fit-content;
    padding-top: 10px;
    border-top: 1px solid var(--buyer-line);
  }

  body.buyer-page--orders.buyer-shell-active #orders-table tbody td.is-empty-invoice {
    display: none;
  }
}

/* The catalog's fixed checkout bar belongs to the content column. Its measured
 * footprint includes the mobile navigation gap and growing credit notices. */
body.catalog.buyer-shell-active {
  padding-bottom: 0;
}

body.buyer-page--catalog.buyer-shell-active > main {
  padding-bottom: calc(var(--catalog-checkout-space, 360px) + 24px);
}

@media (min-width: 681px) {
  body.buyer-page--catalog.buyer-shell-active #moq-bar {
    left: 280px;
  }

  body.buyer-page--catalog.buyer-shell-active .moq-bar-inner {
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  body.buyer-page--catalog.buyer-shell-active .moq-stats {
    flex: 1 1 280px;
  }

  body.buyer-page--catalog.buyer-shell-active .checkout-credit {
    box-sizing: border-box;
    flex: 1 1 240px;
    min-width: 0;
    max-width: 380px;
  }

  body.buyer-page--catalog.buyer-shell-active #submit-btn {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whop-buyer-sidebar__link,
  .whop-buyer-topbar,
  .buyer-shell *,
  body.buyer-page.buyer-shell-active * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 767px) {
  body.buyer-page--orders.buyer-shell-active #orders-table tbody td { justify-content:flex-start;align-items:center;gap:6px }
  body.buyer-page--orders.buyer-shell-active #orders-table tbody td::before { flex:0 0 auto;width:auto }
  body.buyer-page--orders.buyer-shell-active #orders-table tbody td:is([data-label="Date"],[data-label="Total"],[data-label="Support"]) { justify-content:flex-end;align-items:center }
}

/* Preserve a reliable touch target for the buyer's order-specific WhatsApp
   handoff through phone and tablet layouts. Desktop keeps its compact link. */
@media (max-width: 1024px) {
  body.buyer-page--orders.buyer-shell-active #orders-table tbody td[data-label="Support"] > a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Buyer sign-in, access, and confirmation pages use the same calm light
   surface as the authenticated workspace. These selectors are intentionally
   limited to the buyer/auth body classes so operator routes retain their UI. */
body.login {
  --buyer-auth-ink: var(--whop-ink, #202020);
  --buyer-auth-muted: var(--whop-muted, #737373);
  --buyer-auth-line: var(--whop-border, #e8e8e8);
  --buyer-auth-soft: var(--whop-gray, #f0f0f0);
  --buyer-auth-blue: var(--whop-blue, #1754d8);
  --buyer-auth-blue-hover: #0543c7;
  min-height: 100dvh;
  background: #f9f9f9;
  color: var(--buyer-auth-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.login .login-card {
  width: min(calc(100% - 32px), 480px);
  box-sizing: border-box;
  margin: max(32px, 6dvh) auto;
  padding: 28px;
  border: 1px solid var(--buyer-auth-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

body.login .login-head {
  gap: 10px;
  margin-bottom: 24px;
}

body.login .login-head h1,
body.login :is(.reset-headline, .pending-title, .thanks-title) {
  color: var(--buyer-auth-ink);
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 30px;
}

body.login .login-card :is(input, select, textarea) {
  box-sizing: border-box;
  border-color: #d9d9d9;
  border-radius: 8px;
  color: var(--buyer-auth-ink);
  background: #fff;
  font-family: inherit;
}

body.login .login-card :is(input, select, button, .channel-btn) {
  min-height: 40px;
}

body.login .login-card textarea {
  min-height: 104px;
  resize: vertical;
}

body.login .login-card :is(input, select, textarea):focus-visible,
body.login .login-card :is(button, a):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--buyer-auth-blue) 28%, transparent);
  outline-offset: 2px;
}

body.login .login-card :is(input, select, textarea):focus {
  border-color: var(--buyer-auth-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--buyer-auth-blue) 14%, transparent);
}

body.login .login-card :is(#submit-btn, #lead-submit, #continue-btn, #signup-btn, .primary-action, .auth-submit) {
  border-color: var(--buyer-auth-blue);
  border-radius: 8px;
  background: var(--buyer-auth-blue);
  color: #fff;
  box-shadow: none;
}

body.login .login-card :is(#submit-btn, #lead-submit, #continue-btn, #signup-btn, .primary-action, .auth-submit):hover:not(:disabled) {
  border-color: var(--buyer-auth-blue-hover);
  background: var(--buyer-auth-blue-hover);
}

body.login .login-card :is(button, .channel-btn):disabled {
  border-color: var(--buyer-auth-line);
  background: var(--buyer-auth-soft);
  color: var(--buyer-auth-muted);
  cursor: not-allowed;
}

body.login .login-card :is(.error, .form-error) {
  box-sizing: border-box;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #f2c7c7;
  border-radius: 8px;
  background: #fff7f7;
  color: #a52f2f;
  font-size: 13px;
  line-height: 18px;
}

body.login .login-card :is(.reset-success, .review-note) {
  border: 1px solid var(--buyer-auth-line);
  border-radius: 12px;
  background: #fafafa;
  color: var(--buyer-auth-muted);
}

body.login .login-card :is(.login-foot, .apply-foot-links, .signup-foot-links, .pending-help, .thanks-help) {
  gap: 6px 14px;
  overflow-wrap: anywhere;
}

body.login .login-card :is(.apply-intro, .reset-sub, .pending-body, .thanks-body, .reset-success, .review-note) {
  color: var(--buyer-auth-muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body.fino-page {
  min-height: 100dvh;
  background: #f9f9f9;
  color: var(--whop-ink, #202020);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.fino-page .topbar {
  min-height: 56px;
  border-bottom: 1px solid var(--whop-border, #e8e8e8);
  background: #fff;
  box-shadow: none;
}

body.fino-page .fino-card {
  border-color: var(--whop-border, #e8e8e8);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

body.fino-page .fino-empty {
  min-height: 192px;
  color: var(--whop-muted, #737373);
}

body.fino-page .fino-empty__title {
  color: var(--whop-ink, #202020);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
}

body.fino-page .fino-empty__body {
  max-width: 42ch;
  overflow-wrap: anywhere;
}

body.fino-page .fino-btn {
  min-height: 40px;
  border-radius: 8px;
}

body.buyer-page.buyer-shell-active :is(.orders-loading, .od-loading) {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--buyer-muted);
  font: 400 14px/20px var(--buyer-font);
}

body.buyer-page.buyer-shell-active :is(.orders-loading, .od-loading)::before {
  width: 16px;
  height: 16px;
  border: 2px solid var(--buyer-line);
  border-top-color: var(--buyer-blue);
  border-radius: 50%;
  content: "";
  animation: buyer-load-spin 800ms linear infinite;
}

body.buyer-page.buyer-shell-active .od-err {
  display: grid;
  gap: 12px;
  max-width: 560px;
  padding: 18px;
  border: 1px solid #f2c7c7;
  border-radius: 12px;
  background: #fff7f7;
  color: #8f2929;
}

body.buyer-page.buyer-shell-active .od-err p {
  margin: 0;
  line-height: 20px;
}

body.buyer-page.buyer-shell-active .od-err .od-secondary-btn {
  width: fit-content;
  min-height: 40px;
}

body.buyer-page.buyer-shell-active .empty-state-detail {
  max-width: 38ch;
  color: var(--buyer-muted);
  line-height: 20px;
}

body.buyer-page.buyer-shell-active .account-transaction :is(.account-transaction__copy, .account-transaction__meta),
body.buyer-page.buyer-shell-active .account-transaction :is(strong, span, a),
body.buyer-page.buyer-shell-active .od-support-message-body,
body.buyer-page.buyer-shell-active .od-support-message-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.buyer-page.buyer-shell-active .od-support-card :is(.od-support-open, .od-support-close, .od-support-send) {
  min-height: 44px !important;
}

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

@media (max-width: 640px) {
  body.login .login-card {
    width: min(calc(100% - 24px), 480px);
    margin: 12px auto;
    padding: 22px 18px;
  }

  body.login .login-head h1,
  body.login :is(.reset-headline, .pending-title, .thanks-title) {
    font-size: 22px;
    line-height: 28px;
  }
}

/* iOS Safari magnifies focused text controls below 16px. Keep the auth and
 * application forms readable at that threshold, while `manipulation` prevents
 * accidental double-tap zoom on direct actions without disabling pinch zoom. */
@media (max-width: 680px) {
  body.login :is(.login-card, .auth-card) :is(input, select, textarea) {
    font-size: 16px;
  }

  body.login :is(.login-card, .auth-card) :is(button, a) {
    touch-action: manipulation;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.login *,
  body.fino-page *,
  body.buyer-page.buyer-shell-active :is(.orders-loading, .od-loading)::before {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}