.b2b-commerce {
  --commerce-green: #2f4738;
  --commerce-green-strong: #20372a;
  --commerce-accent: #8c2e6e;
  --commerce-surface: #ffffff;
  --commerce-page: #f6f8f7;
  --commerce-border: #dfe7e2;
  --commerce-muted: #64736a;
  --commerce-radius: 12px;
  color: #24342a;
  background: var(--commerce-page);
}

.b2b-commerce :where(button, a, input, select, summary):focus-visible {
  outline: 3px solid rgba(140, 46, 110, 0.28);
  outline-offset: 2px;
}

.commerce-shell {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding: 24px clamp(16px, 3vw, 40px) 112px;
}
.b2b-commerce[data-catalog-root] .commerce-shell {
  width: calc(100% - 48px);
  max-width: 1580px;
  padding: 0 0 112px;
}

.commerce-surface {
  background: var(--commerce-surface);
  border: 1px solid var(--commerce-border);
  border-radius: var(--commerce-radius);
}

.commerce-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 18px 20px;
}

.commerce-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  color: var(--commerce-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.commerce-back__arrow { transition: transform 150ms ease; }
html[dir="rtl"] .commerce-back__arrow { transform: scaleX(-1); }

.commerce-eyebrow {
  color: var(--commerce-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.commerce-title {
  margin: 2px 0 0;
  color: var(--commerce-green-strong);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  font-weight: 750;
  line-height: 1.25;
}

.commerce-subtitle {
  margin-top: 5px;
  color: var(--commerce-muted);
  font-size: 0.84rem;
}

.commerce-header__summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.commerce-total { text-align: end; }
.commerce-total span { display: block; color: var(--commerce-muted); font-size: 0.72rem; font-weight: 650; }
.commerce-total strong { display: block; color: var(--commerce-green-strong); font-size: 1.3rem; font-weight: 800; white-space: nowrap; }

.commerce-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f6eaf2;
  color: #78275e;
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}
.commerce-status::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.commerce-status--success { background: #e8f5ee; color: #1c7047; }
.commerce-status--warning { background: #fff4df; color: #8a5b08; }
.commerce-status--neutral { background: #eef2ef; color: #5b685f; }
.commerce-status--danger { background: #fdeced; color: #a3313c; }

.commerce-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.commerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--commerce-border);
  border-radius: 9px;
  background: #fff;
  color: var(--commerce-green);
  font-size: 0.82rem;
  font-weight: 750;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.commerce-button:hover { border-color: #afbeb5; background: #f7faf8; }
.commerce-button--primary { border-color: var(--commerce-green); background: var(--commerce-green); color: #fff; }
.commerce-button--primary:hover { border-color: var(--commerce-green-strong); background: var(--commerce-green-strong); }
.commerce-button--order { border-color: var(--commerce-accent); background: var(--commerce-accent); color: #fff; box-shadow: 0 4px 10px rgba(140,46,110,.16); }
.commerce-button--order:hover { border-color: #702457; background: #702457; color: #fff; box-shadow: 0 6px 14px rgba(140,46,110,.22); }
.commerce-button--order:disabled, .commerce-button--order[aria-disabled="true"],
.commerce-button--order:disabled:hover, .commerce-button--order[aria-disabled="true"]:hover { border-color: var(--commerce-accent); background: var(--commerce-accent); box-shadow: none; }
.commerce-button--accent { border-color: #d9b7ce; color: var(--commerce-accent); }
.commerce-button:disabled, .commerce-button[aria-disabled="true"] { cursor: not-allowed; opacity: .52; }

.order-progress { margin-top: 14px; padding: 16px 20px; }
.order-progress ol { display: grid; grid-template-columns: repeat(var(--step-count, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.order-progress li { position: relative; display: grid; justify-items: center; gap: 7px; color: #829087; font-size: 0.72rem; font-weight: 700; text-align: center; }
.order-progress li:not(:last-child)::after { position: absolute; z-index: 0; top: 10px; inset-inline-start: 50%; width: 100%; height: 2px; background: #dce5df; content: ""; }
.order-progress__dot { z-index: 1; display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid #c9d5cd; border-radius: 50%; background: #fff; }
.order-progress li[data-state="completed"] { color: #2b6b48; }
.order-progress li[data-state="completed"] .order-progress__dot,
.order-progress li[data-state="completed"]::after { border-color: #4d936c; background: #4d936c; }
.order-progress li[data-state="completed"] .order-progress__dot::after { color: #fff; content: "✓"; font-size: 0.65rem; }
.order-progress li[data-state="current"] { color: var(--commerce-accent); }
.order-progress li[data-state="current"] .order-progress__dot { border-color: var(--commerce-accent); box-shadow: 0 0 0 4px rgba(140,46,110,.1); }
.order-progress li[data-state="current"] .order-progress__dot::after { width: 7px; height: 7px; border-radius: 50%; background: var(--commerce-accent); content: ""; }
.order-progress li[data-state="stopped"] { color: #a3313c; }
.order-progress li[data-state="stopped"] .order-progress__dot { border-color: #c84a56; background: #fdeced; }
.order-progress li[data-state="stopped"] .order-progress__dot::after { content: "!"; font-weight: 800; }

.commerce-notice { display: flex; gap: 11px; margin-top: 14px; padding: 13px 16px; border: 1px solid #d9c1d2; border-radius: 10px; background: #fbf5f9; color: #5f294e; font-size: 0.84rem; }
.commerce-notice--warning { border-color: #ecd7ad; background: #fffaf0; color: #73541c; }
.commerce-notice__icon { flex: 0 0 auto; font-size: 1rem; }
.commerce-notice p { margin: 0; white-space: pre-line; }

.order-overview { margin-top: 14px; padding: 20px; }
.commerce-section-title { margin: 0; color: var(--commerce-green-strong); font-size: 1rem; font-weight: 800; }
.order-overview__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
.overview-group { min-width: 0; padding-inline-end: 16px; border-inline-end: 1px solid var(--commerce-border); }
.overview-group:last-child { padding-inline-end: 0; border-inline-end: 0; }
.overview-group h3 { margin: 0 0 10px; color: var(--commerce-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.overview-list { display: grid; gap: 8px; margin: 0; }
.overview-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.overview-list dt { color: var(--commerce-muted); font-size: .76rem; }
.overview-list dd { margin: 0; color: #27382e; font-size: .82rem; font-weight: 700; text-align: end; }
.overview-list .overview-total dd { color: var(--commerce-green-strong); font-size: 1.2rem; font-weight: 850; }

.pricing-disclaimer { margin-top: 14px; padding: 10px 14px; border: 1px solid #ecd7ad; border-radius: 10px; background: #fffaf0; color: #73541c; font-size: .78rem; }
.pricing-disclaimer summary { cursor: pointer; font-weight: 750; }
.pricing-disclaimer p { margin: 8px 0 0; line-height: 1.7; }

.order-lines { margin-top: 14px; overflow: hidden; }
.order-lines__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--commerce-border); }
.order-lines__count { color: var(--commerce-muted); font-size: .76rem; }
.line-tools { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--commerce-border); background: #fafcfb; }
.line-tools input, .line-tools select { min-height: 40px; border: 1px solid #d5dfd8; border-radius: 9px; font-size: .82rem; }
.line-filter-chips { display: flex; align-items: center; gap: 6px; overflow-x: auto; }
.line-filter-chip { min-height: 36px; padding: 6px 11px; border: 1px solid #d5dfd8; border-radius: 999px; background: #fff; color: #516158; font-size: .75rem; font-weight: 750; white-space: nowrap; }
.line-filter-chip[aria-pressed="true"] { border-color: #8faca0; background: #edf5f0; color: var(--commerce-green); }

.commerce-table { width: 100%; border-collapse: collapse; }
.commerce-table th { padding: 10px 14px; background: #f7faf8; color: #627168; font-size: .68rem; font-weight: 800; letter-spacing: .045em; text-align: start; text-transform: uppercase; }
.commerce-table td { padding: 13px 14px; border-top: 1px solid #e8eeea; color: #34443a; font-size: .8rem; vertical-align: middle; }
.commerce-table tbody tr:first-child td { border-top: 0; }
.commerce-table tbody tr[data-substituted="true"] { background: #fbf7fc; box-shadow: inset 3px 0 0 #b783a8; }
html[dir="rtl"] .commerce-table tbody tr[data-substituted="true"] { box-shadow: inset -3px 0 0 #b783a8; }
.commercial-offers { display: flex; flex-wrap: wrap; gap: 5px; }

.company-logo-frame { position: relative; display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; overflow: hidden; border: 1px solid #dde5e0; border-radius: 9px; background: #fff; color: #607168; }
.company-logo-frame img, .supplier-logo-frame img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; background: #fff; }
.company-logo-fallback, .supplier-logo-fallback { font-size: .72rem; font-weight: 850; letter-spacing: .02em; }
.supplier-logo-frame { position: relative; display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; overflow: hidden; border: 1px solid #e1e7e3; border-radius: 9px; background: #fff; color: #718078; }
.product-identity { display: flex; min-width: 260px; align-items: flex-start; gap: 11px; }
.product-identity__logo a { display: block; border-radius: 9px; }
.product-identity__body { min-width: 0; }
.product-identity__name { color: var(--commerce-green-strong); font-size: .88rem; font-weight: 800; line-height: 1.45; }
.product-identity__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 2px; color: var(--commerce-muted); font-size: .69rem; }
.order-history-line__product { display: flex; min-width: 0; align-items: stretch; gap: 12px; }
.order-history-line__media { display: grid; width: 68px; height: 76px; flex: 0 0 68px; place-items: center; }
.order-history-line__image-trigger, .order-history-line__image-empty, .order-history-line__image-fallback { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; border: 1px solid #edf1ee; border-radius: 8px; background: #fbfcfb; color: #a6b0aa; }
.order-history-line__image-trigger { cursor: zoom-in; }
.order-history-line__image-trigger:hover, .order-history-line__image-trigger:focus-visible { border-color: #bfa5b8; box-shadow: 0 2px 8px rgba(56,42,51,.1); outline: none; }
.order-history-line__image-trigger img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; padding: 4px; object-fit: contain; object-position: center; background: #fff; }
.order-history-line__image-empty { background: #f7f9f8; }
.order-history-line__image-empty svg, .order-history-line__image-fallback svg { width: 21px; height: 21px; }
.product-identity--order-line { min-width: 0; flex: 1 1 auto; align-items: flex-start; gap: 12px; }
.product-identity--order-line .order-line-visual-meta { display: grid; width: 84px; flex: 0 0 84px; grid-template-rows: 34px 24px; align-content: start; gap: 6px; }
.product-identity--order-line .product-identity__logos { display: grid; width: 84px; height: 34px; }
.product-identity--order-line .company-logo-frame, .product-identity--order-line .supplier-logo-frame { width: 84px; height: 34px; flex-basis: 34px; border-color: #e5ebe7; border-radius: 8px; background: #fbfcfb; }
.product-identity--order-line .company-logo-frame img, .product-identity--order-line .supplier-logo-frame img { inset: 4px 6px; width: calc(100% - 12px); height: calc(100% - 8px); object-fit: contain; }
.product-identity--order-line .company-logo-frame--empty { background: #f7f9f8; }
.product-identity--order-line .product-identity__body { flex: 1 1 auto; }
.order-line-badge-icons { display: flex; min-width: 0; height: 24px; align-items: center; gap: 4px; overflow: hidden; }
.order-line-badge-icon, .order-line-badge-overflow { display: inline-grid; width: 22px; height: 22px; min-width: 22px; min-height: 22px; padding: 0; place-items: center; overflow: hidden; border: 1px solid #d9e1dc; border-radius: 999px; background: #f3f6f4; color: #58685e; font-size: .58rem; font-weight: 800; line-height: 1; }
.order-line-badge-icon--dosage { border-color: #d8c1d1; background: #fbf4f9; color: #76265d; }
.order-line-badge-icon .commerce-badge__icon, .order-line-badge-icon .dosage-form-icon { width: 14px; height: 14px; }
.order-line-badge-icon .commerce-badge__icon :where(svg, img), .order-line-badge-icon .dosage-form-icon :where(svg, img) { width: 14px; height: 14px; }
.order-line-badge-overflow { cursor: help; background: #fff; }
.product-substitution { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; color: #675064; font-size: .7rem; }
.product-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.commerce-badge { display: inline-flex; min-height: 22px; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid transparent; border-radius: 999px; font-size: .67rem; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.commerce-badge__icon { display: inline-grid; width: 13px; height: 13px; place-items: center; }
.commerce-badge__icon :where(svg, img) { width: 13px; height: 13px; }
.commerce-badge--success { border-color: #b8dfc9; background: #eaf7ef; color: #1f7048; }
.commerce-badge--warning { border-color: #edd59f; background: #fff5df; color: #865a0b; }
.commerce-badge--danger { border-color: #efc4c8; background: #fdeced; color: #a3313c; }
.commerce-badge--special { border-color: #dabdd1; background: #f7ecf4; color: #7b2b61; }
.commerce-badge--info { border-color: #cddbe6; background: #f0f6fa; color: #3c6178; }
.commerce-badge--neutral { border-color: #d9e1dc; background: #f3f6f4; color: #58685e; }
.commerce-badge--dosage { border-color: #d8c1d1; background: #fbf4f9; color: #76265d; }
.dosage-form-icon { position: relative; width: 15px; height: 15px; }
.dosage-form-icon :where(svg, img) { width: 15px; height: 15px; }
.dosage-form-icon img { position: absolute; inset: 0; object-fit: contain; background: #fbf4f9; }
.badge-overflow { position: relative; }
.badge-overflow summary { display: inline-flex; min-height: 24px; cursor: pointer; align-items: center; padding: 2px 7px; border: 1px solid #d9e1dc; border-radius: 999px; background: #fff; color: #58685e; font-size: .67rem; font-weight: 750; list-style: none; }
.badge-overflow summary::-webkit-details-marker { display: none; }
.badge-overflow__panel { position: absolute; z-index: 25; inset-block-start: calc(100% + 6px); inset-inline-end: 0; display: flex; width: max-content; max-width: min(300px, 80vw); flex-wrap: wrap; gap: 6px; padding: 10px; border: 1px solid var(--commerce-border); border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(31,52,40,.13); }

.price-details { margin-top: 6px; }
.price-details summary { cursor: pointer; color: var(--commerce-accent); font-size: .7rem; font-weight: 750; }
.price-details dl { position: absolute; z-index: 20; width: min(320px, calc(100vw - 36px)); margin: 6px 0 0; padding: 11px; border: 1px solid var(--commerce-border); border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(31,52,40,.13); }
.price-details dl div { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; }
.price-details dt { color: var(--commerce-muted); }
.price-details dd { margin: 0; color: #2c3e33; font-weight: 700; text-align: end; }

.secondary-panel { margin-top: 14px; overflow: hidden; }
.commerce-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px 0; border-bottom: 1px solid var(--commerce-border); }
.commerce-tab { display: inline-flex; min-height: 42px; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 2px solid transparent; color: #66766c; font-size: .78rem; font-weight: 750; white-space: nowrap; }
.commerce-tab[aria-selected="true"] { border-color: var(--commerce-accent); color: var(--commerce-green-strong); }
.commerce-tab__count { display: inline-grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; background: #eef3f0; font-size: .65rem; }
.commerce-tab-panel { padding: 18px 20px; }
.document-upload { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 12px; align-items: end; padding: 14px; border: 1px dashed #bdccc3; border-radius: 10px; background: #fafcfb; }
.document-upload label span { display: block; margin-bottom: 5px; color: var(--commerce-muted); font-size: .7rem; font-weight: 750; }
.document-upload input { width: 100%; min-height: 40px; border: 1px solid #d5dfd8; border-radius: 8px; font-size: .78rem; }
.document-list { display: grid; gap: 8px; margin-top: 14px; }
.document-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #e3eae6; border-radius: 9px; }
.empty-state { padding: 24px; border: 1px dashed #ccd8d0; border-radius: 10px; color: var(--commerce-muted); font-size: .82rem; text-align: center; }
.activity-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.activity-list li { position: relative; padding: 3px 0 18px 26px; }
html[dir="rtl"] .activity-list li { padding: 3px 26px 18px 0; }
.activity-list li::before { position: absolute; top: 7px; left: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--commerce-accent); content: ""; }
.activity-list li::after { position: absolute; top: 18px; bottom: 0; left: 9px; width: 1px; background: #dce5df; content: ""; }
html[dir="rtl"] .activity-list li::before { right: 5px; left: auto; }
html[dir="rtl"] .activity-list li::after { right: 9px; left: auto; }
.activity-list li:last-child::after { display: none; }

.sticky-order-summary, .mobile-cart-summary { position: fixed; z-index: 35; right: max(16px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); display: flex; width: min(960px, calc(100% - 32px)); min-height: 64px; margin-inline: auto; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 18px; border: 1px solid #cfdad3; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 14px 36px rgba(32,55,42,.16); backdrop-filter: blur(10px); }
.sticky-order-summary__metrics { display: flex; align-items: center; gap: clamp(14px, 4vw, 38px); }
.sticky-order-summary__metrics span { display: block; color: var(--commerce-muted); font-size: .65rem; }
.sticky-order-summary__metrics strong { display: block; color: var(--commerce-green-strong); font-size: .86rem; }

.catalog-help-icon, .catalog-filter-icon, .catalog-reset__icon, .catalog-action-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.catalog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin-top: 10px; align-items: start; }
.catalog-layout > section { min-width: 0; }
.catalog-heading { padding: 0 0 6px; }
.catalog-toolbar { position: sticky; z-index: 28; top: 70px; padding: 14px 16px; box-shadow: 0 3px 12px rgba(32,55,42,.035); }
.catalog-search-row { min-width: 0; min-height: 46px; padding-inline-end: 146px; }
.catalog-search-field { position: relative; min-width: 0; }
.catalog-search-icon { position: absolute; z-index: 1; top: 50%; inset-inline-start: 14px; width: 19px; height: 19px; color: #6f7f76; transform: translateY(-50%); pointer-events: none; }
.catalog-search-field .catalog-search { width: 100%; min-height: 46px; padding-inline-start: 44px; border: 1px solid #ccd8d0; border-radius: 10px; font-size: .86rem; }
.catalog-filter-disclosure summary { position: absolute; top: 14px; inset-inline-end: 16px; display: inline-flex; min-height: 46px; cursor: pointer; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid #d5dfd8; border-radius: 9px; background: #fff; color: var(--commerce-green); font-size: .78rem; font-weight: 750; list-style: none; }
.catalog-filter-disclosure[open] summary { border-color: #c5a8bd; background: #fcf7fb; color: var(--commerce-accent); }
.catalog-filter-disclosure summary::-webkit-details-marker { display: none; }
.catalog-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e4ebe7; }
.catalog-filter-disclosure .line-filter-chips { margin-top: 12px; }
.catalog-filter-grid label span { display: block; margin-bottom: 4px; color: var(--commerce-muted); font-size: .66rem; font-weight: 750; }
.catalog-filter-grid select { width: 100%; min-height: 38px; border: 1px solid #d5dfd8; border-radius: 8px; font-size: .75rem; }
.catalog-promos--main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.catalog-promos--sidebar { display: grid; }
.catalog-promo-card { display: grid; min-width: 0; overflow: hidden; border: 1px solid #d9e4dd; border-radius: 12px; background: linear-gradient(135deg, #fff 0%, #f5faf7 100%); box-shadow: 0 4px 14px rgba(32,55,42,.055); }
.catalog-promo-card--main { min-height: 126px; grid-template-columns: minmax(0, 1fr) 118px; }
.catalog-promo-card--main:not(:has(.catalog-promo-card__media)) { grid-template-columns: 1fr; }
.catalog-promo-card--sidebar { min-height: 134px; grid-template-columns: minmax(0, 1fr) 78px; border-inline-start: 4px solid var(--commerce-accent); }
.catalog-promo-card--sidebar:not(:has(.catalog-promo-card__media)) { grid-template-columns: 1fr; }
.catalog-promo-card__media { grid-column: 2; grid-row: 1; min-width: 0; background: #eef4f0; }
.catalog-promo-card__media img { width: 100%; height: 100%; min-height: 126px; object-fit: cover; object-position: center; }
.catalog-promo-card--sidebar .catalog-promo-card__media img { min-height: 134px; }
.catalog-promo-card__body { display: grid; min-width: 0; align-content: center; gap: 5px; padding: 15px 17px; }
.catalog-promo-card__eyebrow { color: var(--commerce-accent); font-size: .64rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.catalog-promo-card h3 { color: var(--commerce-green-strong); font-size: .9rem; font-weight: 850; line-height: 1.3; }
.catalog-promo-card__body > p:not(.catalog-promo-card__eyebrow) { color: var(--commerce-muted); font-size: .72rem; line-height: 1.45; }
.catalog-promo-card__cta { display: inline-flex; width: max-content; align-items: center; gap: 6px; margin-top: 3px; color: var(--commerce-accent); font-size: .72rem; font-weight: 850; }
.catalog-promo-card__cta:hover { text-decoration: underline; }
.catalog-promo-card__cta:focus-visible { border-radius: 4px; outline: 3px solid rgba(140,46,110,.22); outline-offset: 3px; }
.catalog-results-surface { margin-top: 12px; overflow: hidden; }
.catalog-result-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e3eae6; color: var(--commerce-muted); font-size: .76rem; }
.catalog-alphabet { padding: 10px 16px; border-bottom: 1px solid #e3eae6; background: #fbfcfb; }
.catalog-alphabet__letters { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.catalog-alphabet__letter { display: inline-grid; min-width: 30px; min-height: 30px; place-items: center; padding: 4px 7px; border: 1px solid #d7e1da; border-radius: 7px; background: #fff; color: #52655a; font-size: .7rem; font-weight: 800; }
.catalog-alphabet__letter:hover { border-color: #9cb5a5; color: var(--commerce-green-strong); }
.catalog-alphabet__letter:focus-visible, .catalog-alphabet-toggle:focus-visible { outline: 3px solid rgba(140,46,110,.2); outline-offset: 2px; }
.catalog-alphabet__letter.is-active { border-color: var(--commerce-green); background: var(--commerce-green); color: #fff; }
.catalog-alpha-active { display: flex; align-items: center; gap: 7px; padding: 7px 18px; border-bottom: 1px solid #e3eae6; background: #f3f8f5; color: var(--commerce-green-strong); font-size: .72rem; font-weight: 800; }
.catalog-alpha-active a { display: inline-grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--commerce-accent); font-size: 1rem; }
.catalog-alpha-active a:hover, .catalog-alpha-active a:focus-visible { background: #f3e8ef; outline: none; }
.catalog-result-toolbar { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 18px; border-bottom: 1px solid #e3eae6; }
.catalog-result-toolbar__count { display: grid; min-width: 0; gap: 2px; color: var(--commerce-muted); font-size: .72rem; }
.catalog-result-toolbar__count strong { color: var(--commerce-green-strong); font-size: .82rem; }
.catalog-result-toolbar__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.catalog-alphabet-toggle { min-height: 38px; padding: 7px 10px; }
.catalog-alphabet-toggle[aria-expanded="true"] { border-color: #afc2b6; background: #f3f8f5; color: var(--commerce-green-strong); }
.catalog-sort-label, .catalog-view-selector__label { color: var(--commerce-muted); font-size: .7rem; font-weight: 750; }
.catalog-sort { min-height: 38px; max-width: 190px; border: 1px solid #d5dfd8; border-radius: 8px; background: #fff; font-size: .76rem; }
.catalog-view-selector { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #d5dfd8; border-radius: 9px; background: #f8faf9; }
.catalog-view-selector__label { margin-inline: 5px 3px; }
.catalog-view-button { display: inline-flex; min-height: 34px; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid transparent; border-radius: 7px; color: #596a60; font-size: .72rem; font-weight: 750; }
.catalog-view-button:hover { color: var(--commerce-green-strong); }
.catalog-view-button.is-active { border-color: #b8c9bf; background: #fff; color: var(--commerce-green-strong); box-shadow: 0 1px 3px rgba(32,55,42,.08); }
.catalog-view-icon { font-size: .95rem; line-height: 1; }
.catalog-reset { min-height: 36px; padding: 6px 10px; }
.catalog-products { display: grid; }
.catalog-products--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px; background: #f8faf9; }
.catalog-product { min-width: 0; }
.catalog-product[data-orderable="false"] { background: #fbfcfb; }
.catalog-product--list { display: grid; height: 124px; min-height: 124px; grid-template-areas: "identity media availability price controls"; grid-template-columns: minmax(280px, 1.7fr) 112px minmax(125px, .68fr) minmax(115px, .58fr) minmax(190px, .82fr); gap: 14px; align-items: stretch; padding: 14px 16px; border-top: 1px solid #e6ece8; }
.catalog-product--list:first-child { border-top: 0; }
.catalog-product--grid { display: grid; height: 248px; min-height: 248px; grid-template-rows: 120px 82px; align-content: stretch; gap: 12px; padding: 16px; border: 1px solid #dce5df; border-radius: 12px; background: #fff; box-shadow: 0 2px 7px rgba(32,55,42,.045); transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.catalog-product--grid:hover, .catalog-product--grid:focus-within { border-color: #c7b0c0; box-shadow: 0 9px 24px rgba(56,42,51,.09); transform: translateY(-1px); }
.catalog-product__main { display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr) 120px; gap: 14px; }
.catalog-product__identity { min-width: 0; }
.catalog-product-image { display: grid; place-items: center; min-width: 0; }
.catalog-product-image--grid { width: 120px; height: 112px; align-self: start; }
.catalog-product-image--list { width: 112px; height: 100%; min-height: 0; align-self: stretch; grid-area: media; }
.catalog-product-image__trigger { position: relative; display: grid; width: 100%; height: 100%; cursor: zoom-in; place-items: center; overflow: hidden; border: 1px solid #edf1ee; border-radius: 9px; background: #fbfcfb; }
.catalog-product-image__trigger:hover, .catalog-product-image__trigger:focus-visible { border-color: #bfa5b8; box-shadow: 0 3px 12px rgba(56,42,51,.1); outline: none; }
/* Product packaging is never cropped: the image is sized by the frame, not by its own intrinsic height. */
.catalog-product-image__trigger img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); max-width: calc(100% - 12px); max-height: calc(100% - 12px); padding: 0; object-fit: contain; object-position: center; background: #fff; }
.catalog-product-image__fallback, .catalog-product-image__empty { display: grid; width: 100%; height: 100%; place-items: center; border: 1px solid #edf1ee; border-radius: 9px; background: #f7f9f8; color: #a6b0aa; }
.catalog-product-image__fallback svg, .catalog-product-image__empty svg { width: 29px; height: 29px; }
.product-identity--catalog { width: 100%; height: 100%; min-width: 0; }
.product-identity--catalog .product-identity__logos { display: flex; flex: 0 0 auto; gap: 5px; }
.product-identity--catalog .product-identity__body { display: grid; min-width: 0; flex: 1 1 auto; grid-template-rows: 2.7em 18px 20px 26px; align-content: start; }
.catalog-product .product-identity__name { display: -webkit-box; height: 2.7em; min-height: 2.7em; overflow: hidden; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-product .product-identity__meta { min-width: 0; height: 18px; overflow: hidden; margin-top: 2px; flex-wrap: nowrap; white-space: nowrap; }
.product-identity__metadata-slot { min-width: 0; height: 20px; overflow: hidden; }
.product-identity__badges-slot { position: relative; min-width: 0; height: 26px; min-height: 26px; overflow: hidden; }
.product-identity__badges-slot:has(.badge-overflow[open]) { z-index: 26; overflow: visible; }
.product-identity__badges-slot .product-badges { height: 24px; max-width: 100%; flex-wrap: nowrap; overflow: hidden; margin-top: 2px; }
.product-identity__badges-slot:has(.badge-overflow[open]) .product-badges { overflow: visible; }
.catalog-product--grid .company-logo-frame { width: 88px; height: 48px; flex-basis: 88px; border-radius: 9px; }
.catalog-product--grid .product-identity__logos { width: 88px; flex-basis: 88px; flex-direction: column; }
.catalog-product--grid .supplier-logo-frame { width: 88px; height: 32px; flex-basis: 32px; }
.catalog-product--grid .product-identity { min-width: 0; }
.catalog-product--grid .company-logo-frame img { inset: 5px 7px; width: calc(100% - 14px); height: calc(100% - 10px); }
.catalog-product--grid .product-identity { gap: 12px; }
.catalog-product--grid .product-identity__name { font-size: .98rem; }
.catalog-product--grid .product-badges { justify-content: flex-start; }
.catalog-product--grid .badge-overflow__panel { inset-inline-end: 0; }
.catalog-product--list > .catalog-product__identity { align-self: center; grid-area: identity; }
.catalog-product--list > .catalog-product__availability { grid-area: availability; }
.catalog-product--list > .catalog-product__price { grid-area: price; }
.catalog-product--list > .catalog-product__controls { grid-area: controls; }
.catalog-product--list > .catalog-product__availability,
.catalog-product--list > .catalog-product__price,
.catalog-product--list > .catalog-product__controls { align-self: center; }
.catalog-product--list .product-identity--catalog { min-height: 68px; }
.catalog-product--list .product-identity__body { grid-template-rows: 2.55em 17px 18px 24px; }
.catalog-product--list .product-identity__name { height: 2.55em; min-height: 2.55em; }
.catalog-product--list .product-identity__metadata-slot { height: 18px; }
.catalog-product--list .product-identity__badges-slot { height: 24px; min-height: 24px; }
.catalog-product--list .product-identity__badges-slot .product-badges { height: 22px; margin-top: 1px; }
.catalog-product__metadata { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; color: var(--commerce-muted); font-size: .69rem; }
.catalog-product__metadata a { overflow: hidden; color: var(--commerce-accent); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.catalog-product__metadata a:hover { text-decoration: underline; }
.catalog-product__commercial { margin-top: 8px; margin-inline-start: 55px; }
.catalog-product--grid .catalog-product__metadata { height: 18px; overflow: hidden; margin-top: 2px; flex-wrap: nowrap; }
.catalog-product__grid-bottom { display: grid; height: 82px; gap: 8px; align-content: center; padding-top: 11px; border-top: 1px solid #e9efeb; }
.catalog-product__purchase-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.catalog-product__commercial-summary { display: grid; min-width: 0; align-content: start; gap: 3px; }
.catalog-product--grid .catalog-product__commercial-summary { max-height: 71px; overflow: hidden; }
.catalog-product--grid .catalog-product__commercial { margin: 2px 0 0; }
.catalog-product__label { display: none; color: var(--commerce-muted); font-size: .64rem; font-weight: 750; text-transform: uppercase; }
.catalog-product__availability, .catalog-product__price { display: grid; gap: 5px; }
.catalog-product__price strong { color: var(--commerce-green-strong); font-size: 1rem; white-space: nowrap; }
.catalog-product--grid .catalog-product__availability { display: block; }
.catalog-product--grid .catalog-product__availability > .commerce-badge { width: auto; max-width: 100%; justify-self: start; }
.catalog-product--grid .catalog-product__availability-row > .commerce-badge { width: auto; max-width: 100%; justify-self: start; }
.catalog-product--grid .catalog-product__price strong { color: var(--commerce-accent); font-size: 1.08rem; }
.catalog-product__controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.catalog-product__controls input { width: 74px; min-height: 40px; border: 1px solid #cad6ce; border-radius: 8px; font-size: .8rem; }
.catalog-product--grid .catalog-product__controls input { width: 72px; min-height: 40px; }
.catalog-product--grid .catalog-product__controls button { min-height: 40px; white-space: nowrap; }
.catalog-action-icon { margin-inline-end: 1px; }
.catalog-product__availability-row { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.catalog-product__stock-total { display: inline-flex; align-items: baseline; gap: 3px; font-size: .69rem; line-height: 1.2; white-space: nowrap; }
.catalog-product__stock-label { color: var(--commerce-muted); font-weight: 700; }
.catalog-product__stock-value { color: var(--commerce-green-strong); font-weight: 800; font-variant-numeric: tabular-nums; }
.catalog-product__reason { margin-top: 5px; color: #8d3a43; font-size: .68rem; }
.catalog-image-preview { position: fixed; z-index: 90; inset: 0; display: grid; padding: 20px; place-items: center; background: rgba(13,26,19,.76); }
.catalog-image-preview__dialog { display: grid; width: min(860px, 100%); max-height: calc(100vh - 40px); overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.catalog-image-preview__header, .catalog-image-preview__footer { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; }
.catalog-image-preview__header { border-bottom: 1px solid #e3eae6; }
.catalog-image-preview__header h2 { overflow: hidden; color: var(--commerce-green-strong); font-size: 1rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.catalog-image-preview__stage { display: grid; min-height: 280px; place-items: center; overflow: hidden; background: #f5f8f6; }
.catalog-image-preview__stage > img { width: 100%; height: 100%; max-height: calc(100vh - 180px); padding: 18px; object-fit: scale-down; object-position: center; background: #fff; }
.catalog-image-preview__fallback { display: grid; gap: 10px; place-items: center; color: var(--commerce-muted); font-size: .82rem; }
.catalog-image-preview__fallback svg { width: 56px; height: 56px; }
.catalog-image-preview__footer { border-top: 1px solid #e3eae6; }
.catalog-image-preview__footer > span { color: var(--commerce-muted); font-size: .76rem; font-weight: 750; }
.catalog-pagination { padding: 10px 16px 12px; border-top: 1px solid #edf1ee; }
.catalog-page-nav { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: .74rem; }
.catalog-page-nav__link, .catalog-page-nav__position { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 6px 11px; border: 1px solid #d7e1da; border-radius: 8px; background: #fff; color: var(--commerce-green-strong); font-weight: 800; }
.catalog-page-nav__link:hover { border-color: #9cb5a5; background: #f5f9f6; }
.catalog-page-nav__link:focus-visible { outline: 3px solid rgba(140,46,110,.2); outline-offset: 2px; }
.catalog-page-nav__link.is-disabled { color: #95a39b; opacity: .65; }
.catalog-page-nav__position { min-width: 82px; border-color: transparent; background: #f3f7f4; font-variant-numeric: tabular-nums; }
.catalog-sidebar-stack { position: sticky; top: 86px; display: grid; max-height: calc(100vh - 104px); align-self: start; gap: 12px; overflow: auto; overscroll-behavior: contain; }
.catalog-sidebar { padding: 16px; box-shadow: 0 7px 20px rgba(32,55,42,.06); }
.catalog-sidebar__items { max-height: 340px; overflow: auto; }
.catalog-cart-line { display: grid; min-width: 0; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.catalog-cart-line__total { white-space: nowrap; }
.order-review-product { display: flex; min-width: 0; align-items: center; gap: 12px; }
.order-product-image { display: grid; flex: 0 0 auto; place-items: center; }
.order-product-image--cart { width: 48px; height: 48px; }
.order-product-image--review { width: 56px; height: 56px; }
.order-product-image__trigger, .order-product-image__placeholder { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; border: 1px solid #edf1ee; border-radius: 8px; background: #fbfcfb; color: #a6b0aa; }
.order-product-image__trigger { cursor: zoom-in; }
.order-product-image__trigger:hover, .order-product-image__trigger:focus-visible { border-color: #bfa5b8; box-shadow: 0 2px 8px rgba(56,42,51,.1); outline: none; }
.order-product-image__trigger img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; padding: 4px; object-fit: contain; object-position: center; background: #fff; }
.order-product-image__placeholder { background: #f7f9f8; }
.order-product-image__placeholder svg { width: 21px; height: 21px; }
.catalog-sidebar .commerce-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.catalog-sidebar .commerce-actions .commerce-button { width: 100%; padding-inline: 9px; }
.catalog-cart-empty { display: grid; min-height: 116px; place-content: center; gap: 9px; border-style: dashed; line-height: 1.7; }
.catalog-cart-empty__icon { width: 23px; height: 23px; margin-inline: auto; color: #617268; }
.mobile-cart-summary { display: none; }

[hidden] { display: none !important; }

@media (max-width: 1280px) and (min-width: 1101px) {
  .catalog-layout { grid-template-columns: minmax(0, 1fr) 288px; gap: 20px; }
  .catalog-products--grid { gap: 12px; padding: 12px; }
  .catalog-product--grid { padding: 14px; }
  .catalog-product__main { grid-template-columns: minmax(0, 1fr) 104px; gap: 11px; }
  .catalog-product-image--grid { width: 104px; height: 100px; }
}

@media (max-width: 1100px) {
  .order-overview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-group:nth-child(2) { padding-inline-end: 0; border-inline-end: 0; }
  .overview-group:last-child { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--commerce-border); }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-sidebar-stack { position: static; max-height: none; overflow: visible; }
  .catalog-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-products--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-product--list { grid-template-columns: minmax(260px, 1.4fr) 112px 130px 115px 180px; }
}

@media (max-width: 800px) {
  .b2b-commerce[data-catalog-root] .commerce-shell { width: calc(100% - 32px); }
  .commerce-shell { padding-top: 16px; }
  .commerce-header { grid-template-columns: 1fr; gap: 14px; }
  .commerce-header__summary, .commerce-actions { justify-content: flex-start; }
  .commerce-total { text-align: start; }
  .order-progress { overflow-x: auto; }
  .order-progress ol { min-width: 560px; }
  .order-overview__grid { grid-template-columns: 1fr; }
  .overview-group, .overview-group:nth-child(2), .overview-group:last-child { grid-column: auto; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--commerce-border); }
  .overview-group:last-child { padding-bottom: 0; border-bottom: 0; }
  .line-tools { grid-template-columns: 1fr; }
  .commerce-table thead { display: none; }
  .commerce-table, .commerce-table tbody, .commerce-table tr, .commerce-table td { display: block; width: 100%; }
  .commerce-table tbody { display: grid; gap: 10px; padding: 10px; }
  .commerce-table tr { overflow: visible; border: 1px solid #e0e8e3; border-radius: 10px; background: #fff; }
  .commerce-table td { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 12px; border: 0; }
  .order-lines .commerce-table td { box-sizing: border-box; min-width: 0; }
  .commerce-table td::before { flex: 0 0 auto; color: var(--commerce-muted); content: attr(data-label); font-size: .67rem; font-weight: 750; }
  .commerce-table td:first-child { display: block; padding-top: 12px; padding-bottom: 11px; border-bottom: 1px solid #edf1ee; }
  .commerce-table td:first-child::before { display: none; }
  .product-identity { min-width: 0; }
  .company-logo-frame { width: 40px; height: 40px; flex-basis: 40px; }
  .supplier-logo-frame { width: 40px; height: 40px; flex-basis: 40px; }
  .order-history-line__media { width: 60px; height: 68px; flex-basis: 60px; }
  .product-identity--order-line { gap: 9px; }
  .product-identity--order-line .order-line-visual-meta { width: 76px; flex-basis: 76px; grid-template-rows: 32px 24px; gap: 5px; }
  .product-identity--order-line .product-identity__logos { width: 76px; height: 32px; }
  .product-identity--order-line .company-logo-frame, .product-identity--order-line .supplier-logo-frame { width: 76px; height: 32px; flex-basis: 32px; }
  .commercial-offers { justify-content: flex-end; }
  .price-details dl { position: static; }
  .document-upload { grid-template-columns: 1fr; }
  .catalog-toolbar { top: 58px; }
  .catalog-search-row { padding-inline-end: 0; }
  .catalog-filter-disclosure summary { position: static; width: max-content; margin-top: 10px; }
  .catalog-result-toolbar { align-items: flex-start; flex-direction: column; }
  .catalog-result-toolbar__controls { width: 100%; justify-content: flex-start; }
  .catalog-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-products--grid { grid-template-columns: 1fr; }
  .catalog-product--list { height: auto; min-height: 164px; grid-template-areas: "identity media" "availability availability" "price controls"; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px 12px; align-items: center; }
  .catalog-product-image--list { width: 100%; height: 82px; min-height: 82px; }
  .catalog-product--list .catalog-product__controls { justify-content: flex-end; }
  .catalog-product--list .catalog-product__label { display: block; }
  .catalog-product--grid .company-logo-frame { width: 80px; height: 42px; flex-basis: 80px; }
  .catalog-product--grid .product-identity__logos { width: 80px; flex-basis: 80px; }
  .catalog-product--grid .supplier-logo-frame { width: 80px; height: 32px; flex-basis: 32px; }
  .catalog-sidebar-stack { display: none; }
  .mobile-cart-summary { display: flex; }
}

@media (max-width: 520px) {
  .commerce-shell { padding-inline: 12px; }
  .b2b-commerce[data-catalog-root] .commerce-shell { width: calc(100% - 24px); padding-inline: 0; }
  .commerce-header { padding: 15px; }
  .commerce-header__summary { display: grid; grid-template-columns: 1fr 1fr; }
  .commerce-actions { grid-column: 1 / -1; }
  .commerce-button { flex: 1 1 auto; min-height: 44px; }
  .order-progress ol { min-width: 500px; }
  .catalog-filter-grid { grid-template-columns: 1fr; }
  .catalog-result-toolbar__controls { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .catalog-alphabet-toggle { grid-column: 1 / -1; justify-self: start; }
  .catalog-sort { width: 100%; max-width: none; }
  .catalog-view-selector { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .catalog-reset { grid-column: 1 / -1; justify-self: start; }
  .catalog-promos--main { grid-template-columns: 1fr; }
  .catalog-promo-card--main { grid-template-columns: minmax(0, 1fr) 92px; }
  .catalog-products--grid { grid-template-columns: 1fr; padding: 10px; }
  .catalog-product--list { display: grid; padding: 14px; }
  .catalog-product--grid { height: 248px; min-height: 248px; padding: 15px; }
  .catalog-product__main { grid-template-columns: minmax(0, 1fr) 80px; gap: 10px; }
  .catalog-product-image--grid { width: 80px; height: 80px; }
  .catalog-product__controls { justify-content: stretch; }
  .catalog-product__controls input { flex: 0 0 76px; min-height: 44px; }
  .catalog-product__controls button { flex: 1; min-height: 44px; }
  .sticky-order-summary, .mobile-cart-summary { gap: 9px; padding: 9px 10px; }
  .sticky-order-summary__metrics { gap: 12px; }
  .sticky-order-summary__metrics > :nth-child(2) { display: none; }
  .sticky-order-summary .commerce-button, .mobile-cart-summary .commerce-button { flex: 0 0 auto; }
  .document-row { align-items: flex-start; flex-direction: column; }
  .order-review-product { gap: 8px; }
  .order-product-image--review { width: 48px; height: 48px; }
  .order-review-table, .order-review-table tbody { display: block; width: 100%; min-width: 0; }
  .order-review-table thead { display: none; }
  .order-review-table tr { display: grid; width: 100%; grid-template-columns: minmax(72px, 1fr) minmax(76px, auto) minmax(76px, auto); align-items: end; gap: 4px 8px; padding: 10px 12px; }
  .order-review-table td { min-width: 0; padding: 4px 0; border: 0; }
  .order-review-table td:first-child { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid #edf1ee; }
  .order-review-table td[data-label] { display: grid; gap: 3px; align-content: end; }
  .order-review-table td[data-label]::before { color: var(--commerce-muted); content: attr(data-label); font-size: .64rem; font-weight: 700; }
  .order-review-table td:nth-child(5) { grid-column: 1 / -1; justify-self: end; }
  .order-review-table td:nth-child(5):empty { display: none; }
  .order-review-table tr.empty-placeholder { display: block; padding: 0; }
  .order-review-table tr.empty-placeholder td { display: block; padding: 24px 16px; border: 0; }
  .order-history-line__product { gap: 8px; }
  .order-history-line__media { width: 52px; height: 64px; flex-basis: 52px; }
  .product-identity--order-line { gap: 7px; }
  .product-identity--order-line .order-line-visual-meta { width: 68px; flex-basis: 68px; grid-template-rows: 30px 22px; gap: 4px; }
  .product-identity--order-line .product-identity__logos { width: 68px; height: 30px; }
  .product-identity--order-line .company-logo-frame, .product-identity--order-line .supplier-logo-frame { width: 68px; height: 30px; flex-basis: 30px; }
  .order-line-badge-icons { height: 22px; gap: 3px; }
  .order-line-badge-icon, .order-line-badge-overflow { width: 20px; height: 20px; min-width: 20px; min-height: 20px; }
}

/* Phone-only chrome for the filter sheet. Hidden at every other width so the
   desktop disclosure keeps its current inline appearance. */
.catalog-filter-panel__head,
.catalog-filter-panel__actions { display: none; }

/* ==========================================================================
   Phone layout (<= 800px)
   ==========================================================================

   800px, not Tailwind's md, because this page's own mobile switches already
   happen there: .catalog-sidebar-stack is replaced by .mobile-cart-summary at
   <= 800px, the product grid is already a single column, and the chat launcher
   has collapsed to its circular form. Leaving the cards on the desktop
   breakpoint left a 768-800px band that paired mobile chrome with fixed-height
   cards, and measured 7 clipped elements at 768px. One edge, one layout.

   Everything below this line is phone-only. The desktop and tablet rules
   above are untouched.

   Three things drive the design:

   1. Nothing has a fixed height. A product name that runs to three lines, an
      Arabic company name, a wrapped badge row: each grows its card instead of
      being clipped. The desktop cards keep their fixed-height grid, because
      there the columns have to line up across a row.

   2. The advanced filters leave the initial screen. The same <details> that
      is an inline disclosure on desktop becomes a bottom sheet here, so the
      first screen is search, a compact control row, and products.

   3. Nothing overlaps. The page-level fixed UI (chat launcher, cart bar) is
      arranged by portal-mobile.css; this file only has to stay out of its way
      and keep every control at a thumb-friendly size.
   ========================================================================== */

@media (max-width: 800px) {
  /* ------------------------------------------------------------- shell */

  /* main[data-hmc-main] already supplies the 16px page gutter, so the shell
     adds none: two nested gutters cost 24px of a 320px screen. Bottom space
     is reserved by portal-mobile.css against the real fixed-UI height. */
  .commerce-shell { padding: 0 0 4px; }
  .b2b-commerce[data-catalog-root] .commerce-shell { width: 100%; padding: 0 0 4px; }
  .catalog-layout { gap: 14px; margin-top: 6px; }
  .catalog-heading { padding-bottom: 2px; }
  .catalog-heading .commerce-subtitle { display: none; }

  /* --------------------------------------------------------- search row */

  /* Not sticky on a phone: the site header is already sticky and its height
     varies as the nav wraps, so a second sticky strip either double-stacks or
     slides underneath. The control row directly below stays reachable by a
     short scroll instead. */
  .catalog-toolbar { position: static; padding: 12px; }
  .catalog-search-row { min-height: 0; padding-inline-end: 0; }
  .catalog-search-field .catalog-search { min-height: 46px; font-size: .9rem; }

  /* Filters is a compact pill under the search field, not a full-width slab. */
  .catalog-filter-disclosure summary {
    position: static;
    width: max-content;
    min-height: 44px;
    margin-top: 10px;
    padding: 8px 14px;
  }

  /* The sheet starts closed on a phone, so the trigger carries the signal that
     filters are narrowing the results. */
  .catalog-filter-disclosure[data-filters-active="1"] > summary {
    border-color: #c5a8bd;
    background: #fcf7fb;
    color: var(--commerce-accent);
  }

  /* ------------------------------------------------------- filter sheet */

  .catalog-filter-disclosure[open]::before {
    position: fixed;
    z-index: 49;
    inset: 0;
    background: rgba(13, 26, 19, .45);
    content: "";
  }

  .catalog-filter-panel {
    position: fixed;
    z-index: 50;
    inset-inline: 0;
    inset-block-end: 0;
    max-block-size: 82vh;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--commerce-border);
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-shadow: 0 -18px 44px rgba(13, 26, 19, .22);
  }

  .catalog-filter-panel__head { display: block; padding-bottom: 4px; }

  .catalog-filter-panel .catalog-filter-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
  }

  .catalog-filter-panel .catalog-filter-grid select { min-height: 44px; font-size: .84rem; }
  .catalog-filter-panel .line-filter-chips { flex-wrap: wrap; overflow: visible; }
  .catalog-filter-panel .line-filter-chip { min-height: 40px; }

  /* Pinned so Reset and Done stay reachable however long the filter list is. */
  .catalog-filter-panel__actions {
    position: sticky;
    z-index: 1;
    inset-block-end: calc(-14px - env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin: 14px -14px calc(-14px - env(safe-area-inset-bottom, 0px));
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--commerce-border);
    background: #fff;
  }

  .catalog-filter-panel__actions .commerce-button { min-height: 46px; justify-content: center; }

  /* ----------------------------------------------------- results toolbar */

  /* One compact row of controls rather than a stack of full-width boxes. */
  .catalog-result-toolbar {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px;
  }

  .catalog-result-toolbar__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .catalog-result-toolbar__count span { min-width: 0; overflow-wrap: break-word; }

  .catalog-result-toolbar__controls {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  /* Undo the wider-phone stacking: these are pills in a row here. */
  .catalog-alphabet-toggle,
  .catalog-view-selector,
  .catalog-reset,
  .catalog-sort { grid-column: auto; justify-self: auto; }

  .catalog-alphabet-toggle { min-height: 40px; padding: 6px 10px; }
  .catalog-sort { min-height: 40px; max-width: none; flex: 1 1 9rem; min-width: 0; }
  .catalog-view-selector { width: auto; justify-content: flex-start; }
  .catalog-view-button { min-height: 40px; }
  .catalog-reset { min-height: 40px; }

  /* The select and the toggle group name themselves through their options and
     pressed state, so the captions only cost vertical space here. They stay in
     the accessibility tree as the controls' labels. */
  .catalog-sort-label,
  .catalog-view-selector__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .catalog-alphabet { padding: 10px 12px; }
  .catalog-alphabet__letter { min-width: 36px; min-height: 36px; }

  /* -------------------------------------------------------- promo cards */

  .catalog-promos--main { grid-template-columns: 1fr; margin-top: 10px; }
  .catalog-promo-card--main { grid-template-columns: minmax(0, 1fr) 88px; min-height: 106px; }
  .catalog-promo-card__media img { min-height: 106px; }

  /* ------------------------------------------------------ product cards */

  /* Grid and list converge on one card shape at phone width: image leading,
     name and identity beside it, then availability, price, and the purchase
     row each on their own full-width line. Both view modes stay available and
     the stored preference is still honoured; they simply stop differing in a
     way that has no meaning in a single column. */
  .catalog-products--grid { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .catalog-products--list { padding: 0; }

  .catalog-product--grid,
  .catalog-product--list {
    height: auto;
    min-height: 0;
    padding: 14px;
    gap: 10px;
  }

  .catalog-product--grid { grid-template-rows: auto auto; }

  .catalog-product--list {
    grid-template-areas:
      "media identity"
      "availability availability"
      "price price"
      "controls controls";
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
  }

  .catalog-product--list > .catalog-product__identity,
  .catalog-product--list > .catalog-product__availability,
  .catalog-product--list > .catalog-product__price,
  .catalog-product--list > .catalog-product__controls { align-self: start; }

  /* Image leads the card. `order` places it first without touching markup, and
     follows the writing direction, so RTL puts it on the right. */
  .catalog-product__main { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .catalog-product-image--grid { order: -1; width: 88px; height: 88px; align-self: start; }
  .catalog-product-image--list { width: 88px; height: 88px; min-height: 88px; align-self: start; }

  /* --- identity: nothing clipped ------------------------------------- */

  /* The desktop cards clamp every identity row to a fixed height so that
     names line up across a row. In one column there is no row to line up
     with, and clipping a product name is the worst thing this page can do. */
  .product-identity--catalog { height: auto; }
  .product-identity--catalog .product-identity__body { display: grid; grid-template-rows: none; gap: 3px; }

  .catalog-product .product-identity__name {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    -webkit-line-clamp: none;
    font-size: .92rem;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }

  .catalog-product .product-identity__meta,
  .catalog-product--list .product-identity__meta {
    height: auto;
    overflow: visible;
    flex-wrap: wrap;
    white-space: normal;
  }

  .catalog-product .product-identity__metadata-slot,
  .catalog-product--list .product-identity__metadata-slot { height: auto; overflow: visible; }

  .catalog-product .product-identity__badges-slot,
  .catalog-product--list .product-identity__badges-slot { height: auto; min-height: 0; overflow: visible; }

  .catalog-product .product-identity__badges-slot .product-badges,
  .catalog-product--list .product-identity__badges-slot .product-badges { height: auto; flex-wrap: wrap; overflow: visible; }

  .catalog-product--grid .catalog-product__metadata,
  .catalog-product .catalog-product__metadata { height: auto; overflow: visible; flex-wrap: wrap; }
  .catalog-product .catalog-product__metadata a { overflow: visible; white-space: normal; }

  /* Manufacturer and supplier marks are secondary: a small stacked pair that
     never competes with the name for width. */
  .catalog-product--grid .product-identity,
  .catalog-product--list .product-identity { gap: 8px; }

  .catalog-product--grid .product-identity__logos,
  .catalog-product--list .product-identity__logos { width: 40px; flex-basis: 40px; flex-direction: column; gap: 4px; }

  .catalog-product--grid .company-logo-frame,
  .catalog-product--list .company-logo-frame { width: 40px; height: 30px; flex-basis: 30px; }

  .catalog-product--grid .supplier-logo-frame,
  .catalog-product--list .supplier-logo-frame { width: 40px; height: 26px; flex-basis: 26px; }

  /* --- commercial block ---------------------------------------------- */

  .catalog-product__grid-bottom { height: auto; gap: 8px; padding-top: 10px; }
  .catalog-product__purchase-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Releasing the height is not enough: the desktop rule pairs it with
     overflow:hidden, which kept clipping the last line once the group
     was free to grow. Measured at 390px: scrollHeight 78 vs client 76. */
  .catalog-product--grid .catalog-product__commercial-summary { max-height: none; overflow: visible; }
  .catalog-product__commercial-summary { gap: 6px; }
  .catalog-product__commercial { margin-inline-start: 0; }

  .catalog-product__availability-row { flex-wrap: wrap; }

  /* Price keeps a caption and stays the largest thing in the row. */
  .catalog-product__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .catalog-product--grid .catalog-product__label,
  .catalog-product--list .catalog-product__label { display: block; }
  .catalog-product__availability > .catalog-product__label { display: none; }
  .catalog-product__price strong,
  .catalog-product--grid .catalog-product__price strong { font-size: 1.12rem; }

  /* --- purchase row --------------------------------------------------- */

  .catalog-product__controls {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: 8px;
  }

  .catalog-product__controls input,
  .catalog-product--grid .catalog-product__controls input { width: 100%; min-height: 46px; }
  .catalog-product__controls button,
  .catalog-product--grid .catalog-product__controls button { width: 100%; min-height: 46px; white-space: normal; }
  .catalog-product__controls .in-cart-label { grid-column: 2; justify-content: center; min-height: 46px; }

  /* ------------------------------------------------------- cart summary */

  /* Positioning comes from .hmc-bottom-bar in portal-mobile.css. What is left
     here is what the bar shows: a product count and a subtotal that stay
     legible next to the action, and never grow the bar. */
  .mobile-cart-summary .sticky-order-summary__metrics { min-width: 0; gap: 14px; }
  .mobile-cart-summary .sticky-order-summary__metrics > div { min-width: 0; }
  .mobile-cart-summary .sticky-order-summary__metrics strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-cart-summary .commerce-button { flex: 0 0 auto; min-height: 44px; }

  .catalog-pagination { padding: 10px 12px 12px; }
  .catalog-page-nav__link, .catalog-page-nav__position { min-height: 44px; }
}

@media (max-width: 400px) {
  /* At the narrowest widths the unit count is the first thing to go: the
     product count and the subtotal are what the action depends on. */
  .mobile-cart-summary .sticky-order-summary__metrics > :nth-child(2) { display: none; }
  .catalog-product--grid, .catalog-product--list { padding: 12px; }
  .catalog-product__main,
  .catalog-product--list { grid-template-columns: 76px minmax(0, 1fr); }
  .catalog-product-image--grid,
  .catalog-product-image--list { width: 76px; height: 76px; min-height: 76px; }
  .catalog-product__controls { grid-template-columns: 84px minmax(0, 1fr); }
}

/* Phone-only chrome for the Excel import disclosure. From `md` up the panel is
   always open and the toggle does not exist, so desktop is unchanged. */
.order-import__toggle { display: none; }

/* --------------------------------------------------- import method switch */

/* Only rendered for accounts with more than one import method. Logical
   properties throughout so RTL needs no override. */
.order-import__methods { margin-block-end: 14px; }
.order-import__methods-label { margin-block-end: 6px; }

.order-import__method-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-import__method {
  min-height: 40px;
  padding-inline: 16px;
  border: 1px solid var(--commerce-border);
  border-radius: 999px;
  background: #fff;
  color: var(--commerce-green-strong);
  font-size: .82rem;
  font-weight: 700;
}

.order-import__method[aria-pressed="true"] {
  border-color: var(--commerce-green-strong);
  background: var(--commerce-green-strong);
  color: #fff;
}

/* ----------------------------------------------- purchase order PDF review */

/* The review list can be long, so it scrolls inside its own container rather
   than giving the document horizontal overflow. */
.pdf-import-review__lines { overflow-x: auto; }
.pdf-import-review__table { width: 100%; }
.pdf-import-review__table td { vertical-align: top; }

.pdf-import-review__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.pdf-import-review__badge[data-status="MATCHED"] { background: #e7f5ec; color: #1c6b3d; }
.pdf-import-review__badge[data-status="UNMAPPED"] { background: #fdf1dc; color: #8a5a11; }
.pdf-import-review__badge[data-status="INVALID"] { background: #fdeaea; color: #9b2226; }
.pdf-import-review__badge[data-status="WARNING"] { background: #fdf1dc; color: #8a5a11; }

.pdf-import-review__note {
  display: block;
  margin-block-start: 4px;
  color: var(--commerce-muted);
  font-size: .7rem;
}

/* ------------------------------- imported purchase request, on order detail */

.pdf-import-summary__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 10px;
}

.pdf-import-summary__note {
  margin-block-start: 10px;
  padding: 8px 12px;
  border: 1px solid #f3d9a4;
  border-radius: 10px;
  background: #fdf6e7;
  color: #8a5a11;
  font-size: .78rem;
}

.pdf-pending-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pdf-pending-badge[data-status="ADDED"] { background: #e7f5ec; color: #1c6b3d; }
.pdf-pending-badge[data-status="UNMAPPED"] { background: #fdf1dc; color: #8a5a11; }
.pdf-pending-badge[data-status="LOCKED"] { background: #eef1f4; color: #44515e; }
.pdf-pending-badge[data-status="INVALID"] { background: #fdeaea; color: #9b2226; }
.pdf-pending-badge[data-status="OTHER"] { background: #eef1f4; color: #44515e; }

/* The pending table carries long unbroken customer codes. */
.pdf-pending-table td { overflow-wrap: anywhere; word-break: break-word; }

/* ==========================================================================
   Review & submit order, and the customer orders list (<= 767.98px)
   ==========================================================================

   Both screens keep their desktop markup exactly. What changes on a phone:

   - the page stops nesting a card inside a card inside a gutter, which on a
     320px screen was costing about 68px of the 320 before any content;
   - the five-column line-item table becomes one card per line, driven by the
     same <tr> the cart JavaScript already builds and updates, so quantity,
     line total, order total, removal and validation keep working through the
     single existing state model;
   - Excel import collapses behind one row, because it is a secondary path;
   - the final actions stack full width instead of being squeezed onto one row.
   ========================================================================== */

@media (max-width: 767.98px) {
  /* ------------------------------------------------------- page shell */

  /* main[data-hmc-main] already supplies the page gutter. */
  /* Tailwind's play CDN injects its utilities after these sheets, so a rule
     that has to beat px-4 / p-6 / gap-3 is qualified by element name. That
     outranks a utility class without an !important. */
  div.order-review-page { padding-inline: 0; padding-top: 0; padding-bottom: 0; }

  /* The outer card only exists to group the blocks inside it; on a phone the
     blocks are the cards, and the wrapper is pure lost width. */
  section.order-review-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  section.order-review-card > * + * { margin-top: 12px; }
  div.order-review-block { padding: 12px; }
  div.order-review-total { padding: 12px; border: 1px solid var(--commerce-border); }

  /* -------------------------------------------------- account & branch */

  .order-review-block h2 { font-size: .95rem; }
  .order-review-block select { min-height: 44px; }

  /* ------------------------------------------------------ Excel import */

  div.order-import { padding: 0; }

  .order-import__toggle {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 0;
    background: transparent;
    color: var(--commerce-green-strong);
    font-size: .88rem;
    font-weight: 700;
    text-align: start;
  }

  .order-import__chevron { transition: transform 150ms ease; font-size: 1.15rem; line-height: 1; }
  html[dir="rtl"] .order-import__chevron { transform: scaleX(-1); }
  .order-import__toggle[aria-expanded="true"] .order-import__chevron { transform: rotate(90deg); }
  html[dir="rtl"] .order-import__toggle[aria-expanded="true"] .order-import__chevron { transform: rotate(90deg) scaleY(-1); }

  .order-import__panel { display: none; padding: 0 12px 12px; }
  .order-import__panel[data-open="true"] { display: block; }

  /* The toggle already names the section on a phone. */
  .order-import__title { display: none; }
  div.order-import__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .order-import__actions .btn { width: 100%; }

  /* ------------------------------------------- import method + PDF review */

  /* Two methods, two full-width targets, rather than two squeezed pills. */
  div.order-import__method-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .order-import__method { width: 100%; min-height: 44px; }

  div.pdf-import-review { padding: 12px; }

  /* Same card-per-row contract the order lines use: the header row is dropped
     and every value reads as caption and figure, so the review never needs
     document-level horizontal scrolling on a phone.

     `auto` rather than `visible` here: a long unbroken customer code would
     otherwise be clipped by the computed `hidden` and become unreachable. The
     wrapping rules below mean it should never come to that, but a scrollbar
     beats losing content. */
  .pdf-import-review__lines { border: 0; border-radius: 0; overflow-x: auto; }

  /* Barcode-length customer codes carry no spaces, so they need an explicit
     break opportunity or they set the card's width on their own. */
  .pdf-import-review__table td,
  .pdf-import-review__table td::before {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .pdf-import-review__table,
  .pdf-import-review__table tbody,
  .pdf-import-review__table tr,
  .pdf-import-review__table td { display: block; width: 100%; min-width: 0; }

  .pdf-import-review__table thead { display: none; }

  .pdf-import-review__table tbody tr {
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--commerce-border);
    border-radius: 12px;
    background: #fff;
  }

  .pdf-import-review__table td { padding: 0; border: 0; }

  /* The customer code leads the card on its own line. */
  .pdf-import-review__table td:first-child {
    padding-bottom: 8px;
    border-bottom: 1px solid #edf1ee;
  }

  .pdf-import-review__table td[data-label] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    padding-top: 6px;
    text-align: end;
  }

  .pdf-import-review__table td[data-label]::before {
    flex: 0 0 auto;
    color: var(--commerce-muted);
    content: attr(data-label);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: start;
    text-transform: uppercase;
  }

  /* --------------------------------------------------- line item cards */

  div.order-review-lines { border: 0; border-radius: 0; }

  .order-review-table,
  .order-review-table tbody,
  .order-review-table tr,
  .order-review-table td { display: block; width: 100%; min-width: 0; }

  .order-review-table thead { display: none; }

  .order-review-table tbody tr {
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--commerce-border);
    border-radius: 12px;
    background: #fff;
  }

  .order-review-table td { padding: 0; border: 0; }

  /* Product identity leads the card, on its own line, free to wrap. */
  .order-review-table td:first-child {
    padding-bottom: 10px;
    border-bottom: 1px solid #edf1ee;
  }

  .order-review-table td:first-child::before { content: none; }

  /* Every other value reads as caption and figure on one line. */
  .order-review-table td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding-top: 6px;
  }

  .order-review-table td[data-label]::before {
    flex: 0 0 auto;
    color: var(--commerce-muted);
    content: attr(data-label);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  /* The quantity control is the one thing on the card the user changes. */
  .order-review-table td[data-label] input[type="number"] {
    width: 96px;
    height: 44px;
    min-height: 44px;
    text-align: center;
  }

  /* Remove is the last cell and has no caption; it sits on its own row. */
  .order-review-table td:last-child {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #edf1ee;
  }

  .order-review-table td:last-child:empty { display: none; }
  .order-review-table td:last-child button { min-height: 44px; padding-inline: 8px; }

  .order-review-table tr.empty-placeholder { display: block; padding: 0; }
  .order-review-table tr.empty-placeholder td { display: block; padding: 24px 16px; border: 0; }
  .order-review-table tr.empty-placeholder td::before { content: none; }

  .order-review-product { gap: 10px; }
  .order-product-image--review { width: 48px; height: 48px; }

  /* ------------------------------------------------------- submit row */

  /* Full-width targets, stacked in priority order, with the primary action
     last so it sits closest to the thumb and reads as the conclusion. */
  div.order-review-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .order-review-actions .btn {
    width: 100%;
    min-height: 48px;
    padding-inline: 12px;
    white-space: normal;
  }

  /* ------------------------------------------- customer orders as cards */

  /* One card per order: number and status on the header line, the amount as
     the figure that matters, and the open action full width. Reference,
     ordered-by and created stay visible as captioned secondary rows rather
     than being hidden, because a customer scanning their own orders is
     usually looking for exactly one of them. */
  /* Flex with `order` rather than grid areas: the number of captioned rows
     varies with the data, and `order` reorders whatever is actually there
     without any cell needing to know its row index. It also follows the
     writing direction, so RTL needs no override. */
  .orders-card-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin-block: 10px;
    margin-inline: 0;
    padding: 12px 14px;
  }

  .orders-card-table .hmc-cell-title {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 800;
  }

  .orders-card-table .hmc-cell-status { order: 2; flex: 0 0 auto; }

  /* Laid out as a flex line rather than with text-align, because
     customer_rtl.css rewrites .text-right with !important and would otherwise
     decide where this figure sits. justify-content follows the writing
     direction, so the amount starts the line in both LTR and RTL. */
  .orders-card-table .hmc-cell-amount {
    order: 3;
    flex: 0 0 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 2px;
    color: var(--commerce-green-strong);
    font-size: 1.15rem;
    font-weight: 800;
  }

  /* Captioned secondary rows: a customer scanning their own orders is usually
     hunting for one of these, so they stay visible rather than folding away. */
  .orders-card-table .hmc-cell-secondary,
  .orders-card-table .hmc-cell-created {
    flex: 0 0 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
    color: var(--commerce-muted);
    font-size: .78rem;
  }

  .orders-card-table .hmc-cell-secondary { order: 4; }
  .orders-card-table .hmc-cell-created { order: 5; }

  .orders-card-table .hmc-cell-actions {
    order: 6;
    flex: 0 0 100%;
    margin-top: 8px;
    text-align: start;
  }

  .orders-card-table .hmc-cell-actions > div { display: grid; width: 100%; grid-auto-flow: column; gap: 8px; }
  .orders-card-table .hmc-cell-actions .btn { width: 100%; min-height: 44px; }

  /* Status filter chips scroll as one row instead of wrapping into a block. */
  .filters { flex-wrap: wrap; gap: 6px; }
  .filters .chip { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .b2b-commerce *, .b2b-commerce *::before, .b2b-commerce *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ------------------------------------------------- promotion visual themes */
/* Restrained creative controls for the OPS Promotions Manager. The default
   "brand" theme is intentionally absent so existing campaigns keep the exact
   appearance they have today. */

.catalog-promo-card--theme-soft {
  border-color: #cfe3d7;
  background: linear-gradient(135deg, #f4faf6 0%, #eaf4ee 100%);
}
.catalog-promo-card--theme-neutral {
  border-color: #dfe3e0;
  background: #fff;
}
.catalog-promo-card--theme-neutral .catalog-promo-card__eyebrow {
  color: #5c6b62;
}
.catalog-promo-card--theme-accent {
  border-color: #e6cddd;
  background: linear-gradient(135deg, #fff 0%, #fbf3f8 100%);
  border-inline-start: 4px solid var(--commerce-accent);
}
.catalog-promo-card--theme-image_led .catalog-promo-card__body {
  padding: 13px 15px;
}
.catalog-promo-card--theme-image_led.catalog-promo-card--main {
  grid-template-columns: minmax(0, 1fr) 168px;
}
.catalog-promo-card--theme-image_led.catalog-promo-card--sidebar {
  grid-template-columns: minmax(0, 1fr) 96px;
}

@media (max-width: 640px) {
  .catalog-promo-card--theme-image_led.catalog-promo-card--main {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
}