@layer supplier-legacy {
/* Supplier shell, extracted from base.tmpl. Layout and runtime selectors retained. */
@font-face {
      font-family: "Silka App";
      src: url("/dist/assets/fonts/silka/silka-regular-webfont.woff2") format("woff2"),
           url("/dist/assets/fonts/silka/silka-regular-webfont.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Brandon Text";
      src: url("/fonts/2C5E16_2_0.woff2") format("woff2"),
           url("/fonts/2C5E16_2_0.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Brandon Text";
      src: url("/fonts/2C5E16_0_0.woff2") format("woff2"),
           url("/fonts/2C5E16_0_0.woff") format("woff");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Brandon Text";
      src: url("/fonts/2C5E16_1_0.woff2") format("woff2"),
           url("/fonts/2C5E16_1_0.woff") format("woff");
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --supplier-font-body: "Silka App", "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
      --supplier-font-heading: "Brandon Text", "Avenir Next Condensed", "Montserrat", sans-serif;
    }

    html {
      height: -webkit-fill-available;
    }

    body,
    input,
    select,
    textarea,
    td,
    th {
      font-family: var(--supplier-font-body);
    }

    body {
      overflow-x: hidden;
      min-height: 100vh;
      min-height: 100dvh;
      min-height: -webkit-fill-available;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    button,
    label,
    legend {
      font-family: var(--supplier-font-heading);
    }

    h1,
    h2,
    h3,
    .font-black {
      letter-spacing: -0.025em;
    }

    [data-wysiwyg-editor] ul,
    [data-wysiwyg-editor] ol {
      margin: 0.75rem 0;
      padding-left: 1.5rem;
    }

    [data-wysiwyg-editor] ul {
      list-style: disc;
    }

    [data-wysiwyg-editor] ol {
      list-style: decimal;
    }

    [data-wysiwyg-editor] li {
      margin: 0.25rem 0;
    }

    .shopapp-switch {
      --shopapp-switch-off-bg: color-mix(in srgb, var(--supplier-surface, #ffffff) 84%, var(--supplier-border, #d9ded6) 16%);
      --shopapp-switch-off-border: var(--supplier-border, #d9ded6);
      --shopapp-switch-on-bg: var(--supplier-primary, #345228);
      --shopapp-switch-on-border: var(--supplier-primary, #345228);
      --shopapp-switch-thumb: #ffffff;
      --shopapp-switch-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    }

    .shopapp-switch__control {
      position: relative;
      display: inline-flex;
      height: 1.95rem;
      width: 3.35rem;
      flex: 0 0 auto;
      vertical-align: middle;
    }

    .shopapp-switch__input {
      position: absolute;
      inset: 0;
      z-index: 2;
      margin: 0;
      cursor: pointer;
      opacity: 0;
    }

    .shopapp-switch__track {
      display: block;
      height: 100%;
      width: 100%;
      border-radius: 9999px;
      border: 1px solid var(--shopapp-switch-off-border);
      background: var(--shopapp-switch-off-bg);
      box-sizing: border-box;
      transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .shopapp-switch__thumb {
      position: absolute;
      top: 50%;
      left: 0.2rem;
      height: 1.45rem;
      width: 1.45rem;
      border-radius: 9999px;
      background: var(--shopapp-switch-thumb);
      box-shadow: var(--shopapp-switch-shadow);
      pointer-events: none;
      transform: translate(0, -50%);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .shopapp-switch__input:checked + .shopapp-switch__track {
      border-color: var(--shopapp-switch-on-border);
      background: var(--shopapp-switch-on-bg);
    }

    .shopapp-switch__input:checked + .shopapp-switch__track + .shopapp-switch__thumb {
      transform: translate(1.38rem, -50%);
    }

    .shopapp-switch__input:focus-visible + .shopapp-switch__track {
      outline: 2px solid color-mix(in srgb, var(--supplier-highlight, var(--supplier-primary, #345228)) 72%, #ffffff 28%);
      outline-offset: 2px;
    }

    .shopapp-switch__input:disabled {
      cursor: not-allowed;
    }

    .shopapp-switch__input:disabled + .shopapp-switch__track,
    .shopapp-switch__input:disabled + .shopapp-switch__track + .shopapp-switch__thumb {
      opacity: 0.55;
    }

    .supplier-nav-label-compact,
    .supplier-logout-label-compact,
    .supplier-menu-toggle-icon-collapsed {
      display: none;
    }

    .supplier-menu-toggle {
      display: none;
    }

    .supplier-desktop-header,
    .supplier-desktop-dropdown-shell {
      display: none;
    }

    .supplier-menu-toggle svg {
      display: block;
      height: 1rem;
      width: 1rem;
    }

    .supplier-nav-icon,
    .supplier-logout-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .supplier-nav-icon svg,
    .supplier-logout-icon svg {
      display: block;
      width: 1.1rem;
      height: 1.1rem;
    }

    /* Menu colors/states are owned by supplier-components.css. */

    .supplier-mobile-menu {
      position: relative;
      flex: none;
    }

    .supplier-mobile-menu > summary {
      list-style: none;
    }

    .supplier-mobile-menu > summary::-webkit-details-marker {
      display: none;
    }

    .supplier-mobile-menu-panel {
      position: absolute;
      right: 0;
      bottom: calc(100% + 0.55rem);
      z-index: 30;
      width: min(18rem, calc(100vw - 1.5rem));
      display: grid;
      gap: 0.75rem;
      padding: 0.85rem;
      border: 1px solid var(--supplier-border);
      border-radius: 1.25rem;
      background: var(--supplier-surface);
      box-shadow: var(--supplier-overlay-shadow);
      backdrop-filter: blur(14px);
    }

    .supplier-mobile-menu-section {
      display: grid;
      gap: 0.45rem;
    }

    .supplier-mobile-menu-heading {
      padding: 0 0.25rem;
      font-size: 0.62rem;
      font-weight: 800;
      line-height: 0.9rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--supplier-muted, #667085);
    }

    .supplier-mobile-menu-link {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      width: 100%;
      min-height: 2.85rem;
      padding: 0.75rem 0.9rem;
      border: 1px solid var(--supplier-border);
      border-radius: 1rem;
      background: var(--supplier-surface);
      color: var(--supplier-text);
      text-align: left;
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1.15rem;
      box-shadow: 0 10px 20px color-mix(in srgb, var(--supplier-chrome, var(--supplier-primary)) 12%, transparent 88%);
      transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
    }

    .supplier-mobile-menu-link:hover {
      border-color: var(--supplier-highlight);
      background: var(--supplier-panel-alt);
      transform: translateY(-1px);
    }

    .supplier-mobile-menu-link.is-active {
      border-color: var(--supplier-highlight);
      background: var(--supplier-highlight-soft);
      font-weight: 700;
    }

    .supplier-mobile-menu[open] > summary {
      border: 1px solid var(--supplier-highlight);
      background: var(--supplier-highlight-soft);
      color: var(--supplier-text);
    }

    .supplier-mobile-header-menu {
      position: relative;
    }

    .supplier-mobile-header-menu .supplier-mobile-menu-panel {
      top: calc(100% + 0.55rem);
      bottom: auto;
    }

    .supplier-desktop-dropdown__chevron {
      transition: transform .18s ease;
    }

    .supplier-desktop-dropdown[open] .supplier-desktop-dropdown__chevron {
      transform: rotate(180deg);
    }

    .supplier-nav-accordion {
      display: grid;
      gap: 0.45rem;
    }

    .supplier-nav-accordion > summary {
      list-style: none;
    }

    .supplier-nav-accordion > summary::-webkit-details-marker {
      display: none;
    }

    .supplier-nav-accordion-panel {
      display: grid;
      gap: 0.45rem;
      padding-left: 0.9rem;
    }

    .supplier-nav-button--sidebar-sub {
      min-height: 3rem;
      padding-top: 0.55rem;
      padding-bottom: 0.55rem;
    }

    .supplier-nav-accordion-chevron {
      margin-left: auto;
      transition: transform .18s ease;
    }

    .supplier-nav-accordion[open] .supplier-nav-accordion-chevron {
      transform: rotate(180deg);
    }

    .supplier-mobile-menu-disclosure {
      display: grid;
      gap: 0.45rem;
    }

    .supplier-mobile-menu-disclosure > summary {
      list-style: none;
    }

    .supplier-mobile-menu-disclosure > summary::-webkit-details-marker {
      display: none;
    }

    .supplier-mobile-menu-disclosure-panel {
      display: grid;
      gap: 0.45rem;
      padding-left: 0.75rem;
    }

    .supplier-mobile-menu-disclosure[open] .supplier-nav-accordion-chevron {
      transform: rotate(180deg);
    }

    .supplier-main-content-frame {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 100%;
      background: transparent;
      border: 0;
      box-shadow: none;
      border-radius: 0;
      overflow: visible;
    }

    .supplier-main-content-frame > * {
      min-width: 0;
      flex: 1 1 auto;
    }

    .supplier-focusable:focus-visible,
    .supplier-button:focus-visible,
    .supplier-input:focus-visible,
    .supplier-select:focus-visible,
    .supplier-checkbox:focus-visible,
    .supplier-tabs__button:focus-visible {
      outline: 2px solid var(--supplier-focus-ring);
      outline-offset: 2px;
    }

    .supplier-panel {
      border: 1px solid var(--supplier-border);
      border-radius: 1rem;
      background: var(--supplier-surface);
      color: var(--supplier-text);
      box-shadow: var(--supplier-shadow);
    }

    .supplier-panel--plain {
      box-shadow: none;
    }

    .supplier-panel--alt {
      background: var(--supplier-panel-alt);
    }

    .supplier-filterbar {
      border: 1px solid var(--supplier-border);
      border-radius: 1rem;
      background: var(--supplier-panel);
      box-shadow: 0 12px 28px color-mix(in srgb, var(--supplier-primary, #345228) 12%, transparent 88%);
    }

    .supplier-label {
      display: block;
      color: var(--supplier-text-muted);
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      line-height: 1rem;
      text-transform: uppercase;
    }

    .supplier-input,
    .supplier-select,
    .supplier-textarea {
      width: 100%;
      border: 1px solid var(--supplier-border);
      border-radius: 0.75rem;
      background: var(--supplier-surface);
      color: var(--supplier-text);
      min-height: 2.5rem;
      transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
    }

    .supplier-input:focus,
    .supplier-select:focus,
    .supplier-textarea:focus {
      border-color: var(--supplier-highlight);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--supplier-focus-ring, #ffbd95) 42%, transparent 58%);
      outline: none;
    }

    .supplier-checkbox {
      border-color: var(--supplier-border);
      color: var(--supplier-highlight);
    }

    .supplier-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      border: 1px solid var(--supplier-border);
      border-radius: 0.875rem;
      min-height: 2.5rem;
      padding: 0.625rem 1rem;
      font-weight: 800;
      transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
    }

    .supplier-button:hover {
      transform: translateY(-1px);
    }

    .supplier-button--primary {
      border-color: var(--supplier-primary);
      background: var(--supplier-primary);
      color: var(--supplier-on-primary);
    }

    .supplier-button--secondary,
    .supplier-button--link {
      border-color: var(--supplier-border);
      background: var(--supplier-surface);
      color: var(--supplier-text);
    }

    .supplier-button--secondary:hover,
    .supplier-button--link:hover {
      border-color: var(--supplier-highlight);
      background: var(--supplier-hover);
    }

    .supplier-button--danger {
      border-color: var(--supplier-danger-border);
      background: var(--supplier-surface);
      color: var(--supplier-danger-text);
    }

    .supplier-button--danger:hover {
      background: var(--supplier-danger-bg);
    }

    .supplier-button--success {
      border-color: var(--supplier-success-border);
      background: var(--supplier-success-bg);
      color: var(--supplier-success-text);
    }

    .supplier-button--success:hover {
      background: color-mix(in srgb, var(--supplier-success-bg) 82%, var(--supplier-success-text) 18%);
    }

    .shopapp-button,
    .shopapp-button-secondary,
    .shopapp-button-danger,
    .shopapp-stepper-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      border: 1px solid transparent;
      min-height: 2.5rem;
      transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
    }

    .shopapp-button:hover,
    .shopapp-button-secondary:hover,
    .shopapp-button-danger:hover,
    .shopapp-stepper-button:hover {
      transform: translateY(-1px);
    }

    .shopapp-button {
      border-color: var(--supplier-primary);
      background: var(--supplier-primary);
      color: var(--supplier-on-primary);
    }

    .shopapp-button:hover {
      background: color-mix(in srgb, var(--supplier-primary) 88%, #000 12%);
      border-color: color-mix(in srgb, var(--supplier-primary) 88%, #000 12%);
    }

    .shopapp-button-secondary {
      border-color: var(--supplier-border);
      background: var(--supplier-surface);
      color: var(--supplier-text);
    }

    .shopapp-button-secondary:hover {
      border-color: var(--supplier-highlight);
      background: var(--supplier-hover);
    }

    .shopapp-stepper-button {
      border-color: color-mix(in srgb, var(--supplier-primary) 64%, var(--supplier-border) 36%);
      background: color-mix(in srgb, var(--supplier-primary) 12%, var(--supplier-surface) 88%);
      color: var(--supplier-primary);
    }

    .shopapp-stepper-button:hover {
      background: color-mix(in srgb, var(--supplier-primary) 18%, var(--supplier-surface) 82%);
    }

    .shopapp-button-danger {
      border-color: var(--supplier-danger-border);
      background: var(--supplier-surface);
      color: var(--supplier-danger-text);
    }

    .shopapp-button-danger:hover {
      background: var(--supplier-danger-bg);
    }

    .shopapp-button-icon {
      display: inline-block;
      width: 1.05em;
      height: 1.05em;
      margin-right: 0.5rem;
      vertical-align: -0.16em;
      flex: 0 0 auto;
    }

    .shopapp-button-icon svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .shopapp-button *,
    .shopapp-button-secondary *,
    .shopapp-button-danger *,
    .shopapp-stepper-button * {
      color: inherit;
    }

    .shopapp-button:focus-visible,
    .shopapp-button-secondary:focus-visible,
    .shopapp-button-danger:focus-visible,
    .shopapp-stepper-button:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--supplier-focus-ring, #ffbd95) 72%, #ffffff 28%);
      outline-offset: 2px;
    }

    .shopapp-button[disabled],
    .shopapp-button-secondary[disabled],
    .shopapp-button-danger[disabled],
    .shopapp-stepper-button[disabled] {
      cursor: not-allowed;
      opacity: 0.45;
      transform: none;
    }

    .shopapp-panel,
    .shopapp-form-panel {
      border: 1px solid var(--supplier-border);
      background: var(--supplier-surface);
      color: var(--supplier-text);
      box-shadow: 0 10px 28px color-mix(in srgb, var(--supplier-text) 8%, transparent 92%);
    }

    .shopapp-form-panel {
      border-radius: 1.15rem;
      padding: 0.875rem;
      background: color-mix(in srgb, var(--supplier-panel) 72%, white 28%);
    }

    .shopapp-price {
      font-variant-numeric: tabular-nums;
    }

    .shopapp-price-block {
      font-weight: 650;
      color: var(--supplier-text-muted);
    }

    .supplier-alert,
    .supplier-empty,
    .supplier-loading {
      border-radius: 0.875rem;
      padding: 0.875rem 1rem;
      font-size: 0.875rem;
      font-weight: 650;
    }

    .supplier-alert--success {
      border: 1px solid var(--supplier-success-border);
      background: var(--supplier-success-bg);
      color: var(--supplier-success-text);
    }

    .supplier-alert--danger {
      border: 1px solid var(--supplier-danger-border);
      background: var(--supplier-danger-bg);
      color: var(--supplier-danger-text);
    }

    .supplier-alert--warning {
      border: 1px solid var(--supplier-warning-border);
      background: var(--supplier-warning-bg);
      color: var(--supplier-warning-text);
    }

    .supplier-alert--info,
    .supplier-empty,
    .supplier-loading {
      border: 1px solid var(--supplier-info-border);
      background: var(--supplier-info-bg);
      color: var(--supplier-info-text);
    }

    .supplier-global-loading {
      position: fixed;
      inset: 0;
      z-index: 70;
      display: grid;
      place-items: center;
      pointer-events: none;
      background: transparent;
    }

    .supplier-global-loading[hidden] {
      display: none;
    }

    .supplier-global-loading__spinner {
      position: relative;
      width: 2.5rem;
      height: 2.5rem;
      color: var(--supplier-primary);
      background:
        radial-gradient(circle at 50% 24%, currentColor 0 0.45rem, transparent 0.48rem),
        radial-gradient(circle at 76% 50%, currentColor 0 0.45rem, transparent 0.48rem),
        radial-gradient(circle at 50% 76%, currentColor 0 0.45rem, transparent 0.48rem),
        radial-gradient(circle at 24% 50%, currentColor 0 0.45rem, transparent 0.48rem);
      animation: supplier-global-loading-spin .8s linear infinite;
    }

    .supplier-global-loading__spinner::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 53%;
      width: 0.18rem;
      height: 0.82rem;
      border-radius: 999px;
      background: currentColor;
      transform: translateX(-50%) rotate(-35deg);
      transform-origin: top center;
    }

    @keyframes supplier-global-loading-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .supplier-table-wrap {
      max-width: 100%;
      overflow-x: auto;
      border: 1px solid var(--supplier-border);
      border-radius: 0.75rem;
      background: var(--supplier-surface);
      scrollbar-width: thin;
      scrollbar-color: var(--supplier-highlight) color-mix(in srgb, var(--supplier-border, #d8d2cc) 58%, transparent 42%);
    }

    .supplier-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      color: var(--supplier-text);
      font-variant-numeric: tabular-nums;
    }

    .supplier-table thead tr {
      background: var(--supplier-table-header-bg);
      color: var(--supplier-text-muted);
    }

    .supplier-table th,
    .supplier-table td {
      border-color: var(--supplier-border);
      vertical-align: middle;
    }

    .supplier-table tbody > tr {
      transition: background-color .14s ease;
    }

    .supplier-table tbody > tr:hover {
      background: var(--supplier-table-row-hover);
    }

    .supplier-table-total {
      background: var(--supplier-table-total-bg);
    }

    .supplier-card-gradient {
      background: linear-gradient(135deg, var(--supplier-panel-alt) 0%, var(--supplier-surface) 50%, var(--supplier-panel) 100%);
    }

    .supplier-badge {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--supplier-border);
      border-radius: 9999px;
      background: var(--supplier-panel);
      color: var(--supplier-text);
      padding: 0.25rem 0.75rem;
      font-size: 0.75rem;
      font-weight: 800;
      line-height: 1rem;
    }

    .supplier-badge--success {
      border-color: var(--supplier-success-border);
      background: var(--supplier-success-bg);
      color: var(--supplier-success-text);
    }

    .supplier-badge--warning {
      border-color: var(--supplier-warning-border);
      background: var(--supplier-warning-bg);
      color: var(--supplier-warning-text);
    }

    .supplier-badge--danger {
      border-color: var(--supplier-danger-border);
      background: var(--supplier-danger-bg);
      color: var(--supplier-danger-text);
    }

    .supplier-overlay-backdrop {
      background: var(--supplier-overlay-backdrop);
      backdrop-filter: blur(3px);
    }

    .supplier-overlay-panel {
      border: 1px solid var(--supplier-border);
      background: var(--supplier-panel);
      color: var(--supplier-text);
      box-shadow: var(--supplier-overlay-shadow);
    }

    .supplier-tabs {
      border-bottom: 1px solid var(--supplier-border);
    }

    .supplier-tabs__button {
      border: 1px solid transparent;
      color: var(--supplier-text-muted);
      transition: background-color .16s ease, border-color .16s ease, color .16s ease;
    }

    .supplier-tabs__button[aria-selected="true"],
    .supplier-tabs__button.is-active {
      border-color: var(--supplier-primary);
      background: var(--supplier-primary);
      color: var(--supplier-on-primary);
    }

    .supplier-admin-page {
      --supplier-admin-radius: 1rem;
      --supplier-admin-radius-sm: 0.75rem;
      --supplier-admin-shadow: var(--supplier-shadow);
      --supplier-admin-soft-shadow: 0 12px 28px color-mix(in srgb, var(--supplier-primary, #345228) 12%, transparent 88%);
      --supplier-admin-table-head-bg: var(--supplier-table-header-bg);
      --supplier-admin-row-hover: var(--supplier-table-row-hover);
      --supplier-admin-total-bg: var(--supplier-table-total-bg);
      --supplier-admin-scroll-shadow: color-mix(in srgb, var(--supplier-primary, #345228) 16%, transparent 84%);
      --supplier-admin-focus: var(--supplier-focus-ring);
      --supplier-admin-warning-bg: var(--supplier-warning-bg);
      --supplier-admin-warning-text: var(--supplier-warning-text);
      --supplier-admin-warning-border: var(--supplier-warning-border);
      --supplier-admin-overlay-backdrop: var(--supplier-overlay-backdrop);
      --supplier-admin-overlay-shadow: var(--supplier-overlay-shadow);
      --supplier-admin-button-text: var(--supplier-button-text, #ffffff);
      --supplier-admin-customer-settings-row-light: #ffffff;
      --supplier-admin-customer-settings-row-dark: #f2f2f2;
    }

    .supplier-admin-page > div:first-child {
      border-radius: var(--supplier-admin-radius);
      background:
        linear-gradient(135deg,
          color-mix(in srgb, var(--supplier-panel, #ffffff) 92%, #ffffff 8%) 0%,
          color-mix(in srgb, var(--supplier-panel-alt, #f4f0e8) 90%, var(--supplier-highlight, #ff8735) 10%) 100%);
      box-shadow: var(--supplier-admin-soft-shadow);
    }

    .supplier-admin-customer-settings-frame {
      overflow: hidden;
      box-shadow: var(--supplier-admin-soft-shadow);
    }

    .supplier-admin-customer-settings-frame-header {
      background: var(--supplier-panel);
    }

    .supplier-admin-customer-settings-content {
      background: var(--supplier-surface);
    }

    .supplier-admin-page h1,
    .supplier-admin-page h2,
    .supplier-admin-page h3,
    .supplier-admin-page .font-black {
      letter-spacing: 0;
    }

    .supplier-admin-page button:not(:disabled),
    .supplier-admin-page a[href] {
      transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
    }

    .supplier-admin-page button:focus-visible,
    .supplier-admin-page a:focus-visible,
    .supplier-admin-page input:focus-visible,
    .supplier-admin-page select:focus-visible,
    .supplier-admin-page textarea:focus-visible {
      outline: 2px solid var(--supplier-admin-focus);
      outline-offset: 2px;
    }

    .supplier-admin-filter {
      border-radius: var(--supplier-admin-radius);
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--supplier-panel, #ffffff) 94%, #ffffff 6%) 0%,
          var(--supplier-panel, #ffffff) 100%);
      box-shadow: var(--supplier-admin-soft-shadow);
    }

    .supplier-admin-filter input,
    .supplier-admin-filter select,
    .supplier-admin-filter textarea {
      min-height: 2.5rem;
      border-radius: var(--supplier-admin-radius-sm);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    }

    .supplier-admin-filter button,
    .supplier-admin-filter a {
      min-height: 2.5rem;
    }

    .supplier-admin-filter label {
      letter-spacing: 0.12em;
    }

    .supplier-admin-results {
      border-radius: var(--supplier-admin-radius);
      background: var(--supplier-panel);
      box-shadow: var(--supplier-admin-soft-shadow);
      overflow: hidden;
    }

    .supplier-admin-results > div:first-child {
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--supplier-panel, #ffffff) 88%, var(--supplier-highlight, #ff8735) 12%) 0%,
          var(--supplier-panel, #ffffff) 100%);
    }

    .supplier-admin-results .overflow-x-auto {
      border-radius: var(--supplier-admin-radius-sm);
      scrollbar-width: thin;
      scrollbar-color: var(--supplier-highlight) color-mix(in srgb, var(--supplier-border, #d8d2cc) 58%, transparent 42%);
      box-shadow: inset -16px 0 18px -22px var(--supplier-admin-scroll-shadow);
    }

    .supplier-admin-results table {
      border-collapse: separate;
      border-spacing: 0;
      font-variant-numeric: tabular-nums;
    }

    .supplier-admin-results .supplier-admin-spreadsheet-frame {
      overflow-x: auto;
      overflow-y: hidden;
      padding: 0;
      background: var(--supplier-surface);
    }

    .supplier-admin-results .supplier-admin-spreadsheet-frame table {
      margin: 0 !important;
      border-collapse: collapse;
      border-spacing: 0;
    }

    .supplier-admin-results .supplier-admin-spreadsheet-frame thead,
    .supplier-admin-results .supplier-admin-spreadsheet-frame thead tr,
    .supplier-admin-results .supplier-admin-spreadsheet-frame thead th {
      margin-top: 0 !important;
    }

    .supplier-admin-results caption {
      color: var(--supplier-text-muted);
      font-size: 0.85rem;
      font-weight: 700;
      text-align: left;
    }

    .supplier-admin-results thead tr {
      background: var(--supplier-admin-table-head-bg);
    }

    .supplier-admin-results th {
      color: var(--supplier-text-muted);
      line-height: 1.15;
      vertical-align: bottom;
    }

    .supplier-admin-results td {
      vertical-align: middle;
    }

    .supplier-admin-results tbody > tr {
      transition: background-color .14s ease;
    }

    .supplier-admin-results tbody > tr:hover {
      background: var(--supplier-admin-row-hover);
    }

    .supplier-admin-results tbody > tr[hidden],
    .supplier-admin-results tbody > tr.hidden {
      display: none;
    }

    .supplier-admin-results tfoot tr,
    .supplier-admin-results tbody > tr[class*="border-t-2"] {
      background: var(--supplier-admin-total-bg);
    }

    thead.supplier-themed-table-header,
    thead.supplier-themed-table-header tr,
    thead.supplier-themed-table-header th {
      background: var(--supplier-chrome);
      color: var(--supplier-chrome-text);
    }

    .supplier-admin-results table[data-supplier-admin-order-overview-table="1"] thead tr,
    .supplier-admin-results table[data-supplier-admin-order-overview-table="1"] thead th,
    .supplier-admin-results table[data-supplier-admin-revenue-b2b-table="1"] thead tr,
    .supplier-admin-results table[data-supplier-admin-revenue-b2b-table="1"] thead th,
    .supplier-admin-results table[data-supplier-admin-revenue-b2c-table="1"] thead tr,
    .supplier-admin-results table[data-supplier-admin-revenue-b2c-table="1"] thead th,
    .supplier-admin-results table[data-supplier-admin-credit-invoices-table="1"] thead tr,
    .supplier-admin-results table[data-supplier-admin-credit-invoices-table="1"] thead th,
    .supplier-admin-results table[data-supplier-admin-customer-invoices-table="1"] thead tr,
    .supplier-admin-results table[data-supplier-admin-customer-invoices-table="1"] thead th,
    .supplier-admin-results table[data-supplier-admin-customer-invoice-packing-table="1"] thead tr,
    .supplier-admin-results table[data-supplier-admin-customer-invoice-packing-table="1"] thead th,
    .supplier-admin-results table[data-supplier-admin-customer-settings-table="1"] thead tr,
    .supplier-admin-results table[data-supplier-admin-customer-settings-table="1"] thead th,
    .supplier-admin-results table[data-supplier-admin-customer-settings-suppliers-table="1"] thead tr,
    .supplier-admin-results table[data-supplier-admin-customer-settings-suppliers-table="1"] thead th {
      background: var(--supplier-chrome);
      color: var(--supplier-chrome-text);
    }

    .supplier-admin-results table[data-supplier-admin-marketplace-packing-slips-table="1"] thead tr,
    .supplier-admin-results table[data-supplier-admin-marketplace-packing-slips-table="1"] thead th,
    .supplier-admin-results table[data-supplier-admin-marketplace-packing-slips-detail-table="1"] thead tr,
    .supplier-admin-results table[data-supplier-admin-marketplace-packing-slips-detail-table="1"] thead th,
    .supplier-admin-results table[data-supplier-admin-sales-dashboard-summary-table="1"] thead tr,
    .supplier-admin-results table[data-supplier-admin-sales-dashboard-summary-table="1"] thead th {
      background: var(--supplier-table-header-bg);
      color: var(--supplier-table-header-text);
    }

    .supplier-admin-results table[data-supplier-admin-customer-settings-table="1"] tbody > tr[data-supplier-admin-customer-settings-row-alt="0"] {
      --supplier-admin-customer-settings-row-bg: var(--supplier-admin-customer-settings-row-light);
    }

    .supplier-admin-results table[data-supplier-admin-customer-settings-table="1"] tbody > tr[data-supplier-admin-customer-settings-row-alt="1"] {
      --supplier-admin-customer-settings-row-bg: var(--supplier-admin-customer-settings-row-dark);
    }

    .supplier-admin-results table[data-supplier-admin-customer-settings-table="1"] tbody > tr[data-supplier-admin-customer-settings-name-row="1"] > td,
    .supplier-admin-results table[data-supplier-admin-customer-settings-table="1"] tbody > tr[data-supplier-admin-customer-settings-summary-row="1"] > td {
      background: var(--supplier-admin-customer-settings-row-bg);
    }

    [data-supplier-underbouwing-tabs="1"][data-supplier-underbouwing-tab-theme="header"] [role="tablist"] {
      background: var(--supplier-table-header-bg);
      color: var(--supplier-table-header-text);
    }

    [data-supplier-underbouwing-tabs="1"][data-supplier-underbouwing-tab-theme="header"] [data-supplier-underbouwing-tab] {
      border-color: color-mix(in srgb, var(--supplier-table-header-text, #ffffff) 36%, var(--supplier-table-header-bg, #345228) 64%);
      background: color-mix(in srgb, var(--supplier-table-header-bg, #345228) 84%, var(--supplier-surface, #ffffff) 16%);
      color: var(--supplier-table-header-text);
    }

    [data-supplier-underbouwing-tabs="1"][data-supplier-underbouwing-tab-theme="header"] [data-supplier-underbouwing-tab][aria-selected="true"] {
      border-color: var(--supplier-table-header-text);
      background: var(--supplier-table-header-text);
      color: var(--supplier-table-header-bg);
      box-shadow: 0 8px 20px color-mix(in srgb, var(--supplier-table-header-bg, #345228) 34%, transparent 66%);
    }

    [data-supplier-underbouwing-tabs="1"][data-supplier-underbouwing-tab-theme="header"] [data-supplier-underbouwing-tab]:focus-visible {
      outline: 2px solid var(--supplier-focus-ring);
      outline-offset: 2px;
    }

    .supplier-admin-results [role="status"],
    .supplier-admin-results [role="alert"] {
      border-radius: var(--supplier-admin-radius-sm);
    }

    .supplier-admin-empty {
      border: 1px dashed var(--supplier-border);
      background: color-mix(in srgb, var(--supplier-surface, #ffffff) 82%, var(--supplier-panel-alt, #f4f0e8) 18%);
      color: var(--supplier-text-muted);
    }

    .supplier-admin-alert {
      border: 1px solid color-mix(in srgb, var(--supplier-border, #d8d2cc) 58%, var(--supplier-beet, #b94f45) 42%);
      background: var(--supplier-danger-bg);
      color: var(--supplier-danger-text);
    }

    .supplier-purchase-documents {
      --supplier-purchase-documents-bg: var(--supplier-page-bg, var(--supplier-shell, #e6dfd9));
      --supplier-purchase-documents-surface: var(--supplier-surface, #ffffff);
      --supplier-purchase-documents-panel: var(--supplier-panel, var(--supplier-surface, #ffffff));
      --supplier-purchase-documents-panel-alt: var(--supplier-panel-alt, var(--supplier-surface, #ffffff));
      --supplier-purchase-documents-text: var(--supplier-text, #111111);
      --supplier-purchase-documents-muted: var(--supplier-text-muted, var(--supplier-muted, #6b625c));
      --supplier-purchase-documents-link: var(--supplier-highlight, var(--supplier-accent, var(--supplier-primary, #345228)));
      --supplier-purchase-documents-button: var(--supplier-primary-strong, var(--supplier-primary, #345228));
      --supplier-purchase-documents-button-text: var(--supplier-button-text, var(--supplier-on-primary, #ffffff));
      --supplier-purchase-documents-header-bg: var(--supplier-table-header-bg, var(--supplier-chrome, var(--supplier-primary, #345228)));
      --supplier-purchase-documents-header-text: var(--supplier-table-header-text, var(--supplier-chrome-text, #ffffff));
      --supplier-purchase-documents-border: var(--supplier-border, #d8d2cc);
      --supplier-purchase-documents-shadow: var(--supplier-admin-soft-shadow, var(--supplier-shadow, 0 20px 40px rgba(52,82,40,0.12)));
      display: grid;
      gap: 1rem;
      padding: 0;
      background: var(--supplier-purchase-documents-bg);
      color: var(--supplier-purchase-documents-text);
    }

    @media (min-width: 768px) {
      .supplier-purchase-documents {
        padding: 0;
      }
    }

    .supplier-purchase-documents__header {
      border-radius: var(--supplier-admin-radius, 1rem);
      border: 1px solid var(--supplier-purchase-documents-border);
      background:
        linear-gradient(135deg,
          color-mix(in srgb, var(--supplier-purchase-documents-panel) 92%, #ffffff 8%) 0%,
          color-mix(in srgb, var(--supplier-purchase-documents-panel-alt) 88%, var(--supplier-purchase-documents-link) 12%) 100%);
      box-shadow: var(--supplier-purchase-documents-shadow);
      padding: 1rem;
    }

    .supplier-purchase-documents__header h1 {
      margin: 0;
      color: var(--supplier-purchase-documents-text);
      font-family: var(--supplier-font-heading);
      font-size: 1.25rem;
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .supplier-purchase-documents__header p {
      margin: 0.45rem 0 0;
      max-width: 48rem;
      color: var(--supplier-purchase-documents-muted);
      font-size: 0.9rem;
      line-height: 1.55;
    }

    .supplier-purchase-documents__eyebrow {
      margin: 0 0 0.35rem !important;
      color: var(--supplier-purchase-documents-muted);
      font-size: 0.68rem !important;
      font-weight: 800;
      letter-spacing: 0.16em;
      line-height: 1.2 !important;
      text-transform: uppercase;
    }

    .supplier-purchase-documents__content {
      display: grid;
      gap: 1rem;
      padding: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible !important;
    }

    .supplier-purchase-documents form.sky-form,
    .supplier-purchase-documents .panel,
    .supplier-purchase-documents .tag-box,
    .supplier-purchase-documents > .supplier-purchase-documents__content > table {
      max-width: 100%;
      border-radius: var(--supplier-admin-radius, 1rem);
      border: 1px solid var(--supplier-purchase-documents-border);
      background: var(--supplier-purchase-documents-surface);
      box-shadow: var(--supplier-purchase-documents-shadow);
      overflow: hidden;
    }

    .supplier-purchase-documents form.sky-form,
    .supplier-purchase-documents .panel,
    .supplier-purchase-documents .tag-box {
      box-sizing: border-box;
      padding: 0;
    }

    .supplier-purchase-documents form.sky-form,
    .supplier-purchase-documents .panel {
      display: block;
      overflow-x: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--supplier-purchase-documents-link) color-mix(in srgb, var(--supplier-purchase-documents-border) 58%, transparent 42%);
    }

    .supplier-purchase-documents table {
      width: 100% !important;
      min-width: 54rem;
      margin: 0 !important;
      border-collapse: collapse;
      border-spacing: 0;
      color: var(--supplier-purchase-documents-text);
      font-size: 0.78rem;
      font-variant-numeric: tabular-nums;
    }

    .supplier-purchase-documents .table,
    .supplier-purchase-documents .table-bordered,
    .supplier-purchase-documents .table-striped {
      margin: 0 !important;
      padding: 0;
      border-collapse: collapse;
      border-spacing: 0;
    }

    .supplier-purchase-documents form.sky-form > table,
    .supplier-purchase-documents .panel > table,
    .supplier-purchase-documents .tag-box > table,
    .supplier-purchase-documents > .supplier-purchase-documents__content > table {
      width: 100% !important;
      margin: 0 !important;
      border: 0;
      border-radius: inherit;
    }

    .supplier-purchase-documents form.sky-form > table:first-of-type,
    .supplier-purchase-documents form#crud_form:first-of-type > table:first-of-type {
      min-width: 42rem;
    }

    .supplier-purchase-documents th {
      border-bottom: 1px solid color-mix(in srgb, var(--supplier-purchase-documents-header-text) 28%, var(--supplier-purchase-documents-header-bg) 72%);
      background: var(--supplier-purchase-documents-header-bg);
      color: var(--supplier-purchase-documents-header-text);
      padding: 0;
      text-align: left;
      font-size: 0.68rem;
      font-weight: 900;
      line-height: 1.15;
      text-transform: uppercase;
      vertical-align: bottom;
      white-space: nowrap;
    }

    .supplier-purchase-documents td {
      border-bottom: 1px solid var(--supplier-purchase-documents-border);
      color: var(--supplier-purchase-documents-text);
      padding: 0;
      vertical-align: middle;
    }

    .supplier-purchase-documents tbody tr {
      background: var(--supplier-purchase-documents-surface);
      transition: background-color .14s ease;
    }

    .supplier-purchase-documents tbody tr:nth-child(even) {
      background: color-mix(in srgb, var(--supplier-purchase-documents-panel-alt) 54%, var(--supplier-purchase-documents-surface) 46%);
    }

    .supplier-purchase-documents tbody tr:hover {
      background: var(--supplier-table-row-hover);
    }

    .supplier-purchase-documents a {
      color: var(--supplier-purchase-documents-link);
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .supplier-purchase-documents a:hover {
      color: color-mix(in srgb, var(--supplier-purchase-documents-link) 84%, #000 16%);
    }

    .supplier-purchase-documents input[type="text"],
    .supplier-purchase-documents input[type="number"],
    .supplier-purchase-documents input[type="date"],
    .supplier-purchase-documents select,
    .supplier-purchase-documents textarea {
      min-height: 2.5rem;
      width: 100%;
      min-width: 6.5rem;
      border-radius: var(--supplier-admin-radius-sm, 0.75rem);
      border: 1px solid var(--supplier-purchase-documents-border);
      background: var(--supplier-purchase-documents-panel-alt);
      color: var(--supplier-purchase-documents-text);
      padding: 0.55rem 0.7rem;
      font-size: 0.85rem;
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    }

    .supplier-purchase-documents textarea {
      min-height: 5rem;
    }

    .supplier-purchase-documents input:focus-visible,
    .supplier-purchase-documents select:focus-visible,
    .supplier-purchase-documents textarea:focus-visible {
      outline: 2px solid var(--supplier-focus-ring);
      outline-offset: 2px;
      border-color: var(--supplier-purchase-documents-link);
    }

    .supplier-purchase-documents .btn-u,
    .supplier-purchase-documents button,
    .supplier-purchase-documents input[type="button"],
    .supplier-purchase-documents input[type="submit"] {
      display: inline-flex;
      min-height: 2.35rem;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      border-radius: 0.9rem;
      border: 1px solid var(--supplier-purchase-documents-button);
      background: var(--supplier-purchase-documents-button);
      color: var(--supplier-purchase-documents-button-text);
      padding: 0.55rem 0.85rem;
      font-size: 0.82rem;
      font-weight: 800;
      line-height: 1;
      text-decoration: none;
      transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
      cursor: pointer;
    }

    .supplier-purchase-documents .btn-u:hover,
    .supplier-purchase-documents button:hover,
    .supplier-purchase-documents input[type="button"]:hover,
    .supplier-purchase-documents input[type="submit"]:hover {
      background: color-mix(in srgb, var(--supplier-purchase-documents-button) 88%, #000 12%);
      border-color: color-mix(in srgb, var(--supplier-purchase-documents-button) 88%, #000 12%);
    }

    .supplier-purchase-documents .btn-u-red,
    .supplier-purchase-documents #keur_factuur_af {
      border-color: var(--supplier-danger-border);
      background: var(--supplier-danger-bg);
      color: var(--supplier-danger-text);
    }

    .supplier-purchase-documents .btn-u-green,
    .supplier-purchase-documents #keur_factuur_goed {
      border-color: var(--supplier-success-border);
      background: var(--supplier-success-bg);
      color: var(--supplier-success-text);
    }

    .supplier-purchase-documents .panel-heading,
    .supplier-purchase-documents .invoice-header,
    .supplier-purchase-documents .invoice-info,
    .supplier-purchase-documents .row {
      margin: 0 0 1rem;
    }

    .supplier-purchase-documents .invoice-header,
    .supplier-purchase-documents .invoice-info,
    .supplier-purchase-documents .row {
      display: grid;
      gap: 1rem;
    }

    @media (min-width: 768px) {
      .supplier-purchase-documents .invoice-header,
      .supplier-purchase-documents .invoice-info,
      .supplier-purchase-documents .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .supplier-purchase-documents .panel-heading {
      border-radius: 0.85rem 0.85rem 0 0;
      background: var(--supplier-purchase-documents-header-bg);
      color: var(--supplier-purchase-documents-header-text);
      padding: 0.75rem 1rem;
    }

    .supplier-purchase-documents .panel-title,
    .supplier-purchase-documents .tag-box h2 {
      margin: 0;
      color: inherit;
      font-family: var(--supplier-font-heading);
      font-size: 1rem;
      font-weight: 900;
      letter-spacing: 0;
    }

    .supplier-purchase-documents .tag-box ul,
    .supplier-purchase-documents .invoice-total-info {
      margin: 0.75rem 0 0;
      padding: 0;
      list-style: none;
      color: var(--supplier-purchase-documents-text);
      font-size: 0.9rem;
      line-height: 1.75;
    }

    .supplier-purchase-documents img[src*="/img/goed.gif"],
    .supplier-purchase-documents img[src*="/img/fout.gif"] {
      width: 1.15rem;
      height: 1.15rem;
      border-radius: 999px;
      object-fit: contain;
      vertical-align: middle;
    }

    .supplier-admin-flash {
      border: 1px solid color-mix(in srgb, var(--supplier-border, #d8d2cc) 58%, var(--supplier-primary, #345228) 42%);
      background: var(--supplier-success-bg);
      color: var(--supplier-success-text);
    }

    .supplier-admin-warning {
      border: 1px solid var(--supplier-admin-warning-border);
      background: var(--supplier-admin-warning-bg);
      color: var(--supplier-admin-warning-text);
    }

    .supplier-admin-status-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 9999px;
      border: 1px solid var(--supplier-border);
      padding: 0.25rem 0.75rem;
      font-size: 0.75rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .supplier-admin-status-badge--success {
      border-color: color-mix(in srgb, var(--supplier-border, #d8d2cc) 52%, var(--supplier-primary, #345228) 48%);
      background: var(--supplier-success-bg);
      color: var(--supplier-success-text);
    }

    .supplier-admin-status-badge--warning {
      border-color: var(--supplier-admin-warning-border);
      background: var(--supplier-admin-warning-bg);
      color: var(--supplier-admin-warning-text);
    }

    .supplier-admin-status-badge--error {
      border-color: color-mix(in srgb, var(--supplier-border, #d8d2cc) 52%, var(--supplier-beet, #b94f45) 48%);
      background: var(--supplier-danger-bg);
      color: var(--supplier-danger-text);
    }

    [data-supplier-overlay-root] > button:first-child {
      background: var(--supplier-admin-overlay-backdrop);
    }

    [data-supplier-overlay-root] [role="dialog"] {
      box-shadow: var(--supplier-admin-overlay-shadow);
    }

    .supplier-admin-overlay-backdrop {
      position: absolute;
      inset: 0;
      background: var(--supplier-admin-overlay-backdrop);
      backdrop-filter: blur(3px);
    }

    .supplier-admin-overlay-panel {
      background: var(--supplier-panel);
      border: 1px solid var(--supplier-border);
      box-shadow: var(--supplier-admin-overlay-shadow);
    }

    .supplier-underbouwing-overlay {
      position: fixed;
      inset: 0;
      z-index: 90;
      color: var(--supplier-text);
    }

    .supplier-underbouwing-shell {
      position: relative;
      display: flex;
      min-height: 100%;
      max-width: 96rem;
      align-items: center;
      margin-inline: auto;
      padding: 1.25rem 0.75rem;
    }

    .supplier-underbouwing-shell--fixed {
      height: 100vh;
      min-height: 0;
      align-items: stretch;
    }

    .supplier-underbouwing-panel {
      position: relative;
      display: flex;
      width: 100%;
      max-height: 92vh;
      flex-direction: column;
      overflow: hidden;
      border-radius: 1rem;
      border: 1px solid var(--supplier-border);
      background: var(--supplier-panel);
      box-shadow: var(--supplier-admin-overlay-shadow, var(--supplier-shadow));
    }

    .supplier-underbouwing-panel--fixed {
      height: calc(100vh - 2.5rem);
      max-height: calc(100vh - 2.5rem);
      min-height: 0;
      overflow: hidden;
    }

    .supplier-underbouwing-panel--fixed .supplier-underbouwing-body {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
    }

    .supplier-underbouwing-panel--fixed .supplier-underbouwing-body > .supplier-underbouwing-section {
      flex: 1 1 auto;
      min-height: 0;
    }

    .supplier-underbouwing-header {
      display: flex;
      flex-shrink: 0;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      border-bottom: 1px solid var(--supplier-border);
      background: var(--supplier-table-header-bg);
      color: var(--supplier-table-header-text);
      padding: 1rem 1.25rem;
    }

    .supplier-underbouwing-kicker {
      margin: 0;
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .supplier-underbouwing-heading {
      min-width: 0;
    }

    .supplier-underbouwing-title {
      margin: 0.25rem 0 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 1.25rem;
      font-weight: 900;
      letter-spacing: 0;
      color: var(--supplier-table-header-text);
    }

    .supplier-underbouwing-subtitle {
      margin: 0.25rem 0 0;
      color: var(--supplier-table-header-text);
      font-size: 0.875rem;
      font-weight: 600;
      opacity: 0.9;
    }

    .supplier-underbouwing-close {
      display: inline-flex;
      width: 2.5rem;
      height: 2.5rem;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border-radius: 0.5rem;
      border: 1px solid color-mix(in srgb, var(--supplier-table-header-text, #ffffff) 30%, var(--supplier-border, #d8d2cc) 70%);
      background: color-mix(in srgb, var(--supplier-table-header-bg, #345228) 82%, var(--supplier-surface, #ffffff) 18%);
      color: var(--supplier-table-header-text);
      font-size: 1.25rem;
      line-height: 1;
    }

    .supplier-underbouwing-close:hover,
    .supplier-underbouwing-close:focus-visible {
      border-color: var(--supplier-table-header-text);
      background: var(--supplier-table-header-text);
      color: var(--supplier-table-header-bg);
    }

    .supplier-underbouwing-body {
      min-height: 0;
      overflow-y: auto;
      padding: 1.25rem 1rem 2rem;
      scrollbar-width: thin;
      scrollbar-color: var(--supplier-highlight) color-mix(in srgb, var(--supplier-border, #d8d2cc) 58%, transparent 42%);
    }

    .supplier-underbouwing-body--fixed {
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
    }

    .supplier-underbouwing-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    .supplier-underbouwing-meta-item {
      color: var(--supplier-text-muted);
      font-size: 0.875rem;
      font-weight: 700;
    }

    .supplier-underbouwing-note {
      margin-bottom: 1rem;
      border-radius: 0.5rem;
      padding: 0.75rem 1rem;
      font-size: 0.875rem;
    }

    .supplier-underbouwing-note--neutral {
      border: 1px solid var(--supplier-border);
      background: var(--supplier-surface);
      color: var(--supplier-text);
    }

    .supplier-underbouwing-note-title {
      margin-bottom: 0.25rem;
      font-weight: 900;
    }

    .supplier-underbouwing-note ul {
      margin: 0;
      padding-left: 1.25rem;
    }

    .supplier-underbouwing-summary-grid {
      display: grid;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
    }

    .supplier-underbouwing-metric {
      border-radius: 0.5rem;
      border: 1px solid var(--supplier-border);
      background: var(--supplier-surface);
      padding: 0.75rem 1rem;
    }

    .supplier-underbouwing-metric-label {
      color: var(--supplier-text-muted);
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .supplier-underbouwing-metric-value {
      margin-top: 0.25rem;
      color: var(--supplier-text);
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .supplier-underbouwing-stack {
      display: grid;
      gap: 1.25rem;
      color: var(--supplier-text);
      font-size: 0.75rem;
    }

    .supplier-underbouwing-section {
      overflow: hidden;
      border-radius: 0.5rem;
      border: 1px solid var(--supplier-border);
      background: var(--supplier-surface);
    }

    .supplier-underbouwing-section--scroll {
      display: flex;
      min-height: 0;
      flex: 1 1 auto;
      flex-direction: column;
    }

    .supplier-underbouwing-section-title {
      margin: 0;
      border-bottom: 1px solid var(--supplier-border);
      background: var(--supplier-table-header-bg);
      color: var(--supplier-table-header-text);
      padding: 0.75rem 1rem;
      font-size: 0.875rem;
      font-weight: 900;
    }

    .supplier-underbouwing-table-wrap {
      overflow-x: auto;
      padding: 0.75rem;
      scrollbar-width: thin;
      scrollbar-color: var(--supplier-highlight) color-mix(in srgb, var(--supplier-border, #d8d2cc) 58%, transparent 42%);
    }

    .supplier-underbouwing-section > .supplier-underbouwing-table-wrap {
      padding: 0;
    }

    .supplier-underbouwing-table-wrap--fill {
      min-height: 0;
      flex: 1 1 auto;
      overflow: auto;
      padding: 0;
      -webkit-overflow-scrolling: touch;
    }

    .supplier-underbouwing-table-wrap--compact-scroll {
      max-height: 52vh;
      overflow: auto;
      padding: 0;
    }

    .supplier-underbouwing-table {
      width: 100%;
      border-collapse: collapse;
      color: var(--supplier-text);
      font-size: 0.75rem;
      font-variant-numeric: tabular-nums;
    }

    .supplier-underbouwing-table--matrix {
      min-width: 62rem;
    }

    .supplier-underbouwing-table--margin {
      min-width: 46rem;
    }

    .supplier-underbouwing-table--orders {
      min-width: 78rem;
    }

    .supplier-underbouwing-table--packing {
      min-width: 82rem;
    }

    .supplier-underbouwing-table--order-lines {
      min-width: 70rem;
    }

    .supplier-underbouwing-table--packing-lines {
      min-width: 74rem;
    }

    .supplier-underbouwing-table--invoice-lines {
      min-width: 64rem;
    }

    .supplier-underbouwing-table--reconciliation {
      min-width: 48rem;
    }

    .supplier-underbouwing-table--credit-rules {
      min-width: 60rem;
    }

    .supplier-underbouwing-table--emballage {
      min-width: 36rem;
    }

    .supplier-underbouwing-table--pakbon-rules {
      min-width: 84rem;
    }

    .supplier-underbouwing-table th,
    .supplier-underbouwing-table td {
      border-bottom: 1px solid var(--supplier-border);
      padding: 0.5rem;
      vertical-align: middle;
    }

    .supplier-underbouwing-table th {
      background: var(--supplier-table-header-bg);
      color: var(--supplier-table-header-text);
      text-align: left;
      font-size: 0.6875rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .supplier-underbouwing-table--matrix thead,
    .supplier-underbouwing-table--matrix thead tr,
    .supplier-underbouwing-table--matrix thead th,
    .supplier-underbouwing-table--margin thead,
    .supplier-underbouwing-table--margin thead tr,
    .supplier-underbouwing-table--margin thead th,
    .supplier-underbouwing-table--orders thead,
    .supplier-underbouwing-table--orders thead tr,
    .supplier-underbouwing-table--orders thead th,
    .supplier-underbouwing-table--packing thead,
    .supplier-underbouwing-table--packing thead tr,
    .supplier-underbouwing-table--packing thead th,
    .supplier-underbouwing-table--invoice-lines thead,
    .supplier-underbouwing-table--invoice-lines thead tr,
    .supplier-underbouwing-table--invoice-lines thead th,
    .supplier-underbouwing-table--order-lines thead,
    .supplier-underbouwing-table--order-lines thead tr,
    .supplier-underbouwing-table--order-lines thead th,
    .supplier-underbouwing-table--packing-lines thead,
    .supplier-underbouwing-table--packing-lines thead tr,
    .supplier-underbouwing-table--packing-lines thead th,
    .supplier-underbouwing-table--reconciliation thead,
    .supplier-underbouwing-table--reconciliation thead tr,
    .supplier-underbouwing-table--reconciliation thead th,
    .supplier-underbouwing-table--credit-rules thead,
    .supplier-underbouwing-table--credit-rules thead tr,
    .supplier-underbouwing-table--credit-rules thead th,
    .supplier-underbouwing-table--emballage thead,
    .supplier-underbouwing-table--emballage thead tr,
    .supplier-underbouwing-table--emballage thead th,
    .supplier-underbouwing-table--pakbon-rules thead,
    .supplier-underbouwing-table--pakbon-rules thead tr,
    .supplier-underbouwing-table--pakbon-rules thead th {
      background: var(--supplier-table-header-bg);
      color: var(--supplier-table-header-text);
    }

    .supplier-underbouwing-table--matrix thead th,
    .supplier-underbouwing-table--margin thead th,
    .supplier-underbouwing-table--orders thead th,
    .supplier-underbouwing-table--packing thead th,
    .supplier-underbouwing-table--invoice-lines thead th,
    .supplier-underbouwing-table--order-lines thead th,
    .supplier-underbouwing-table--packing-lines thead th,
    .supplier-underbouwing-table--reconciliation thead th,
    .supplier-underbouwing-table--credit-rules thead th,
    .supplier-underbouwing-table--emballage thead th,
    .supplier-underbouwing-table--pakbon-rules thead th {
      border-bottom-color: color-mix(in srgb, var(--supplier-table-header-text, #ffffff) 28%, var(--supplier-table-header-bg, #345228) 72%);
    }

    .supplier-underbouwing-table td:first-child,
    .supplier-underbouwing-table .supplier-underbouwing-strong {
      font-weight: 700;
    }

    .supplier-underbouwing-table tbody tr:hover {
      background: var(--supplier-table-row-hover);
    }

    .supplier-underbouwing-table .supplier-underbouwing-total-row {
      border-top: 2px solid var(--supplier-border);
      background: var(--supplier-table-total-bg);
      font-weight: 900;
    }

    .supplier-underbouwing-table + .supplier-underbouwing-table {
      margin-top: 1rem;
    }

    .supplier-underbouwing-number {
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .supplier-underbouwing-action-cell {
      width: 1%;
      text-align: center;
      white-space: nowrap;
    }

    .supplier-underbouwing-toggle {
      display: inline-flex;
      width: 1.5rem;
      height: 1.5rem;
      align-items: center;
      justify-content: center;
      border-radius: 0.375rem;
      border: 1px solid var(--supplier-border);
      background: var(--supplier-panel);
      color: var(--supplier-text);
      font-weight: 900;
    }

    .supplier-underbouwing-toggle:hover,
    .supplier-underbouwing-toggle:focus-visible {
      border-color: var(--supplier-highlight);
      background: var(--supplier-panel-alt);
    }

    .supplier-underbouwing-detail-row {
      background: var(--supplier-panel);
    }

    .supplier-underbouwing-detail-cell {
      padding: 0.75rem 1rem;
    }

    .supplier-underbouwing-detail-cell--flush {
      padding: 0;
    }

    .supplier-underbouwing-detail-block + .supplier-underbouwing-detail-block {
      margin-top: 0.75rem;
    }

    .supplier-underbouwing-detail-title {
      margin-bottom: 0.25rem;
      font-weight: 900;
    }

    .supplier-underbouwing-detail-list {
      margin: 0;
      padding-left: 1.25rem;
    }

    .supplier-underbouwing-tab-panel {
      padding: 1rem;
    }

    .supplier-underbouwing-credit-meta-grid {
      display: grid;
      gap: 0.75rem;
      margin-bottom: 1rem;
      font-size: 0.875rem;
    }

    .supplier-underbouwing-warning-list {
      display: grid;
      gap: 0.5rem;
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--supplier-text);
      font-size: 0.875rem;
      font-weight: 700;
    }

    .supplier-underbouwing-warning-item,
    .supplier-underbouwing-empty-card {
      border-radius: 0.5rem;
      border: 1px solid var(--supplier-border);
      background: var(--supplier-panel-alt);
      padding: 0.75rem 1rem;
    }

    .supplier-underbouwing-empty-card {
      border-style: dashed;
      color: var(--supplier-text-muted);
      font-size: 0.875rem;
      font-weight: 700;
    }

    .supplier-underbouwing-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      border-bottom: 1px solid var(--supplier-border);
      background: var(--supplier-table-header-bg);
      color: var(--supplier-table-header-text);
      padding: 0.75rem;
    }

    .supplier-underbouwing-tab {
      border-radius: 0.5rem;
      border: 1px solid color-mix(in srgb, var(--supplier-table-header-text, #ffffff) 36%, var(--supplier-table-header-bg, #345228) 64%);
      background: color-mix(in srgb, var(--supplier-table-header-bg, #345228) 84%, var(--supplier-surface, #ffffff) 16%);
      color: var(--supplier-table-header-text);
      padding: 0.5rem 0.75rem;
      font-size: 0.75rem;
      font-weight: 900;
    }

    .supplier-underbouwing-tab[aria-selected="true"] {
      border-color: var(--supplier-table-header-text);
      background: var(--supplier-table-header-text);
      color: var(--supplier-table-header-bg);
      box-shadow: 0 8px 20px color-mix(in srgb, var(--supplier-table-header-bg, #345228) 34%, transparent 66%);
    }

    .supplier-underbouwing-empty {
      color: var(--supplier-text-muted);
      font-weight: 700;
    }

    .supplier-admin-primary-action {
      color: var(--supplier-admin-button-text);
    }

    @media (max-width: 640px) {
      .supplier-admin-page {
        padding-inline: 0.75rem;
      }

      .supplier-admin-filter {
        gap: 0.85rem;
      }

      .supplier-admin-customer-settings-content {
        padding: 0.85rem;
      }

      .supplier-admin-results > div:first-child,
      .supplier-admin-results > div:last-child {
        padding-inline: 0.85rem;
      }

      .supplier-admin-results .overflow-x-auto {
        margin-inline: -0.35rem;
        padding-bottom: 0.45rem;
      }

      .supplier-admin-results th,
      .supplier-admin-results td {
        white-space: nowrap;
      }

      .supplier-underbouwing-shell {
        align-items: stretch;
        padding: 0.75rem;
      }

      .supplier-underbouwing-panel {
        max-height: calc(100svh - 1.5rem);
      }

      .supplier-underbouwing-panel--fixed {
        height: calc(100svh - 1.5rem);
      }

      .supplier-underbouwing-header {
        padding: 0.875rem;
      }

      .supplier-underbouwing-title {
        font-size: 1rem;
      }

      .supplier-underbouwing-body {
        padding: 1rem 0.75rem 1.25rem;
      }
    }

    @media (min-width: 768px) {
      .supplier-underbouwing-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .supplier-underbouwing-credit-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1280px) {
      .supplier-underbouwing-summary-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      .supplier-underbouwing-credit-meta-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .supplier-admin-page button,
      .supplier-admin-page a,
      .supplier-admin-results tbody > tr,
      .supplier-admin-filter input,
      .supplier-admin-filter select,
      .supplier-admin-filter textarea {
        transition-duration: 0.01ms;
      }

      .supplier-global-loading__spinner {
        animation-duration: 0.01ms;
      }
    }


        .supplier-ai-synonyms-page {
          background:
            radial-gradient(circle at top left, color-mix(in srgb, var(--supplier-highlight-soft, #f4e3d2) 78%, transparent 22%) 0%, transparent 26rem),
            linear-gradient(180deg, color-mix(in srgb, var(--supplier-shell, #ece4dd) 68%, #ffffff 32%) 0%, color-mix(in srgb, var(--supplier-panel, #e5ddd6) 78%, #ffffff 22%) 100%);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-card {
          border-color: color-mix(in srgb, var(--supplier-border, #d8d2cc) 84%, #ffffff 16%);
          background: linear-gradient(180deg, color-mix(in srgb, var(--supplier-surface, #f6f3eb) 92%, #ffffff 8%) 0%, color-mix(in srgb, var(--supplier-panel-alt, #ede7df) 84%, #ffffff 16%) 100%);
          box-shadow: 0 18px 40px rgba(17, 17, 17, 0.06);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-hero {
          border-color: color-mix(in srgb, var(--supplier-primary, #345228) 32%, #ffffff 68%);
          background:
            radial-gradient(circle at top right, color-mix(in srgb, var(--supplier-highlight, #ff8735) 28%, transparent 72%) 0%, transparent 16rem),
            linear-gradient(135deg, color-mix(in srgb, var(--supplier-chrome, #7f9f79) 88%, #0f172a 12%) 0%, color-mix(in srgb, var(--supplier-primary, #345228) 86%, #0f172a 14%) 100%);
          color: var(--supplier-chrome-text, #ffffff);
          box-shadow: 0 20px 48px rgba(17, 17, 17, 0.16);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-hero-muted {
          color: color-mix(in srgb, var(--supplier-chrome-text, #ffffff) 74%, transparent 26%);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-kicker {
          color: color-mix(in srgb, var(--supplier-highlight, #ff8735) 76%, #ffffff 24%);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-metric {
          border-color: color-mix(in srgb, var(--supplier-highlight, #ff8735) 22%, #ffffff 78%);
          background: color-mix(in srgb, var(--supplier-surface, #f6f3eb) 16%, transparent 84%);
          color: var(--supplier-chrome-text, #ffffff);
          backdrop-filter: blur(10px);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-filter input,
        .supplier-ai-synonyms-page .supplier-ai-synonyms-filter select {
          color: var(--supplier-text, #111111);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-filter input::placeholder {
          color: var(--supplier-text-muted, #6b625c);
          opacity: 1;
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-row:hover {
          background: color-mix(in srgb, var(--supplier-highlight-soft, #f4e3d2) 56%, #ffffff 44%);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-canonical {
          border: 1px solid color-mix(in srgb, var(--supplier-highlight, #ff8735) 28%, #ffffff 72%);
          background: color-mix(in srgb, var(--supplier-highlight-soft, #f4e3d2) 84%, #ffffff 16%);
          color: color-mix(in srgb, var(--supplier-highlight, #ff8735) 72%, var(--supplier-primary, #345228) 28%);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-meta-chip {
          border: 1px solid color-mix(in srgb, var(--supplier-border, #d8d2cc) 88%, #ffffff 12%);
          background: color-mix(in srgb, var(--supplier-panel-alt, #ede7df) 76%, #ffffff 24%);
          color: var(--supplier-text-muted, #6b625c);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-product-card {
          border-color: color-mix(in srgb, var(--supplier-border, #d8d2cc) 84%, #ffffff 16%);
          background: linear-gradient(180deg, color-mix(in srgb, var(--supplier-surface, #f6f3eb) 94%, #ffffff 6%) 0%, color-mix(in srgb, var(--supplier-panel-alt, #ede7df) 76%, #ffffff 24%) 100%);
          box-shadow: 0 18px 36px rgba(17, 17, 17, 0.05);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-switch-track {
          position: relative;
          display: inline-flex;
          align-items: center;
          width: 3.35rem;
          height: 1.95rem;
          border-radius: 9999px;
          border: 1px solid color-mix(in srgb, var(--supplier-border, #d8d2cc) 88%, #ffffff 12%);
          background: color-mix(in srgb, var(--supplier-panel-alt, #ede7df) 82%, #ffffff 18%);
          transition: background-color 160ms ease, border-color 160ms ease;
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-switch-input,
        .supplier-ai-synonyms-page .supplier-ai-synonyms-sr-only {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          clip-path: inset(50%);
          white-space: nowrap;
          border: 0;
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-switch-knob {
          position: absolute;
          left: 0.18rem;
          top: 0.16rem;
          width: 1.55rem;
          height: 1.55rem;
          border-radius: 9999px;
          background: #ffffff;
          box-shadow: 0 3px 10px rgba(17, 17, 17, 0.16);
          transition: transform 160ms ease;
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-switch-input:checked + .supplier-ai-synonyms-switch-track {
          border-color: color-mix(in srgb, var(--supplier-highlight, #ff8735) 58%, var(--supplier-primary, #345228) 42%);
          background: color-mix(in srgb, var(--supplier-highlight-soft, #f4e3d2) 72%, var(--supplier-highlight, #ff8735) 28%);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-switch-input:checked + .supplier-ai-synonyms-switch-track .supplier-ai-synonyms-switch-knob {
          transform: translateX(1.38rem);
        }

        .supplier-ai-synonyms-page .supplier-ai-synonyms-bulk-button {
          min-width: 13rem;
        }

    .supplier-mobile-nav {
      pointer-events: none;
    }

    .supplier-mobile-nav-shell {
      pointer-events: auto;
      border: 1px solid color-mix(in srgb, var(--supplier-border, #d8d2cc) 78%, #ffffff 22%);
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--supplier-surface, #f6f3eb) 88%, #ffffff 12%) 0%,
          color-mix(in srgb, var(--supplier-panel-alt, #ede7df) 80%, #ffffff 20%) 100%);
      box-shadow:
        0 18px 40px rgba(17, 17, 17, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
      backdrop-filter: blur(14px);
    }

    .supplier-mobile-nav-track {
      scrollbar-width: none;
      -ms-overflow-style: none;
      scroll-snap-type: none;
    }

    .supplier-mobile-nav-track::-webkit-scrollbar {
      display: none;
    }

    .supplier-mobile-nav-button {
      scroll-snap-align: none;
    }

    .supplier-desktop-sidebar {
      min-width: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }

    .supplier-main-shell {
      width: 100%;
      min-width: 0;
      min-height: 0;
    }

    .supplier-main-stage {
      padding: 0.375rem;
      padding-bottom: calc(6.35rem + env(safe-area-inset-bottom, 0px));
    }

    .supplier-page-shell {
      width: 100%;
      min-width: 0;
      padding: clamp(0.75rem, 1vw + 0.45rem, 1.5rem);
    }

    .shopapp-settings-screen,
    .shopapp-theme-screen {
      width: 100%;
      min-width: 0;
    }

    .shopapp-settings-page-scope,
    .shopapp-settings-screen .shopapp-theme-page-scope {
      min-height: 100%;
    }

    .shopapp-settings-screen > .shopapp-theme-page-scope > .shopapp-page-section > form.shopapp-form-panel {
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
    }

    .shopapp-settings-screen .shopapp-theme-page-scope > .shopapp-page-section > form.shopapp-form-panel {
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
    }

    .supplier-page-shell > *,
    .supplier-page-shell .grid > *,
    .supplier-page-shell .flex > * {
      min-width: 0;
    }

    @media (min-width: 640px) {
      .supplier-main-stage {
        padding: 0.625rem;
        padding-bottom: calc(6.8rem + env(safe-area-inset-bottom, 0px));
      }

      .supplier-page-shell {
        padding: clamp(0.9rem, 0.8vw + 0.6rem, 1.4rem);
      }
    }

    @media (min-width: 768px) {

      .supplier-main-stage {
        padding: 0.85rem;
        padding-bottom: 0.85rem;
      }
    }

    @media (min-width: 1024px) {
      .supplier-main-stage {
        padding: 1rem;
      }

      .supplier-page-shell {
        padding: clamp(1rem, 0.7vw + 0.7rem, 1.35rem);
      }
    }

    @media (min-width: 1280px) {
      .supplier-main-stage {
        padding: 1.1rem;
      }

      .supplier-page-shell {
        padding: clamp(1.1rem, 0.65vw + 0.75rem, 1.5rem);
      }
    }

    @media (min-width: 1536px) {
      .supplier-main-stage {
        padding: 1.25rem;
      }

      .supplier-page-shell {
        padding: clamp(1.2rem, 0.55vw + 0.85rem, 1.65rem);
      }
    }

    @media (max-width: 767px) {
      .supplier-desktop-sidebar {
        padding: 0.85rem 0.45rem 1rem;
      }

      .supplier-sidebar-brand {
        flex-direction: column;
        gap: 0.35rem;
      }

      .supplier-sidebar-brand-wordmark {
        display: none;
      }

      .supplier-sidebar-logo-card {
        margin-top: 0.5rem;
        border-radius: 1rem;
        padding: 0.55rem 0.45rem 0.65rem;
      }

      .supplier-sidebar-logo-wrap {
        min-height: 2.5rem;
      }

      .supplier-sidebar-supplier-name {
        margin-top: 0.4rem;
        font-size: 0.63rem;
        line-height: 0.9rem;
      }

      #supplier-sidebar-nav {
        margin-top: 1rem;
        gap: 0.45rem;
      }

      .supplier-nav-button--sidebar,
      .supplier-logout-button {
        min-height: 3.35rem;
        border-radius: 1rem;
        padding: 0.65rem 0.4rem;
      }

      .supplier-nav-label-full,
      .supplier-logout-label-full {
        font-size: 0.64rem;
        line-height: 0.82rem;
      }

      .supplier-mobile-nav-track {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0.5rem;
        overflow: visible;
      }

      /* Mobile button geometry is owned by supplier-components.css. */

      .supplier-mobile-menu-panel {
        width: min(18rem, calc(100vw - 1.1rem));
      }
    }

    @media (min-width: 768px) and (max-width: 1023px) {
      .supplier-desktop-sidebar {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
      }

      #supplier-sidebar-nav {
        gap: 0.6rem;
      }

      .supplier-nav-button--sidebar,
      .supplier-logout-button {
        min-height: 4rem;
      }
    }

    @media (min-width: 768px) {
      html[data-shopapp-menu-type="dropdown"] .supplier-layout-shell.supplier-layout-shell--default,
      body.shopapp-menu-dropdown .supplier-layout-shell.supplier-layout-shell--default,
      html[data-shopapp-menu-type="dropdown"] .supplier-layout-shell.supplier-layout-shell--wide,
      body.shopapp-menu-dropdown .supplier-layout-shell.supplier-layout-shell--wide {
        grid-template-columns: minmax(0,1fr);
      }

      html[data-shopapp-menu-type="dropdown"] .supplier-desktop-sidebar,
      body.shopapp-menu-dropdown .supplier-desktop-sidebar {
        display: none;
      }

      html[data-shopapp-menu-type="dropdown"] .supplier-desktop-header,
      body.shopapp-menu-dropdown .supplier-desktop-header {
        display: block;
      }

      #supplier-desktop-dropdown-nav.supplier-desktop-dropdown-shell {
        display: none;
      }

      html[data-shopapp-menu-type="dropdown"] #supplier-desktop-dropdown-nav.supplier-desktop-dropdown-shell,
      body.shopapp-menu-dropdown #supplier-desktop-dropdown-nav.supplier-desktop-dropdown-shell {
        display: flex;
      }

      html[data-shopapp-menu-type="dropdown"] .supplier-main-stage,
      body.shopapp-menu-dropdown .supplier-main-stage {
        padding-inline: 0.6rem;
      }
    }

    @media (min-width: 1024px) {
      .supplier-menu-toggle {
        display: inline-flex;
      }

      body.shopapp-menu-right .supplier-layout-shell.supplier-layout-shell--default {
        grid-template-columns: minmax(0,1fr) 18rem;
      }

      body.shopapp-menu-right .supplier-layout-shell.supplier-layout-shell--wide {
        grid-template-columns: minmax(0,1fr) 15rem;
      }

      body.shopapp-menu-right .supplier-desktop-sidebar {
        order: 2;
        border-right: 0;
        border-left: 1px solid var(--supplier-border);
      }

      body.shopapp-menu-right .supplier-main-shell {
        order: 1;
      }

      body.shopapp-menu-collapsed .supplier-layout-shell.supplier-layout-shell--default,
      body.shopapp-menu-collapsed .supplier-layout-shell.supplier-layout-shell--wide {
        grid-template-columns: 6rem minmax(0,1fr);
      }

      body.shopapp-menu-right.shopapp-menu-collapsed .supplier-layout-shell.supplier-layout-shell--default,
      body.shopapp-menu-right.shopapp-menu-collapsed .supplier-layout-shell.supplier-layout-shell--wide {
        grid-template-columns: minmax(0,1fr) 6rem;
      }

      body.shopapp-menu-collapsed .supplier-desktop-sidebar {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      body.shopapp-menu-collapsed #supplier-sidebar-context {
        display: none;
      }

      body.shopapp-menu-collapsed #supplier-sidebar-nav {
        margin-top: 1.75rem;
      }

      body.shopapp-menu-collapsed .supplier-nav-accordion-panel {
        display: none !important;
      }

      body.shopapp-menu-collapsed .supplier-nav-button--sidebar {
        flex-direction: column;
        justify-content: center;
        gap: 0;
        min-height: 3.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        text-align: center;
      }

      body.shopapp-menu-collapsed .supplier-menu-toggle {
        align-self: center;
      }

      body.shopapp-menu-collapsed .supplier-nav-label-full,
      body.shopapp-menu-collapsed .supplier-nav-label-compact,
      body.shopapp-menu-collapsed .supplier-logout-label-full,
      body.shopapp-menu-collapsed .supplier-logout-label-compact {
        display: none;
      }

      body.shopapp-menu-collapsed .supplier-nav-icon,
      body.shopapp-menu-collapsed .supplier-logout-icon {
        margin: 0 auto;
      }

      body.shopapp-menu-collapsed .supplier-nav-accordion-chevron {
        display: none;
      }

      body.shopapp-menu-collapsed .supplier-menu-toggle-icon-expanded {
        display: none;
      }

      body.shopapp-menu-collapsed .supplier-menu-toggle-icon-collapsed {
        display: inline-flex;
      }

      body.shopapp-menu-collapsed .supplier-logout-button {
        justify-content: center;
        gap: 0;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
      }

      body.shopapp-menu-right .supplier-menu-toggle-icon {
        transform: scaleX(-1);
      }
    }
  

}