:root {
  color-scheme: dark;
  --bg: #100817;
  --surface: #180d22;
  --surface-soft: #100817;
  --card: #21132f;
  --field: #0f0718;
  --text: #f8f2ff;
  --muted: #c7b4d9;
  --line: #433050;
  --accent: #8b55ff;
  --accent-dark: #6f42c1;
  --good: #50d989;
  --warn: #f3bc47;
  --danger: #f45d87;
}

[data-theme="jinnorras"],
[data-theme="jinnorras-dark"],
[data-theme="jinnorras-light"] {
  --surface: #180d22;
  --surface-soft: #100817;
  --card: #21132f;
  --field: #0f0718;
  --text: #f8f2ff;
  --muted: #c7b4d9;
  --line: #433050;
  --accent: #7c4dde;
  --accent-dark: #4f2c9f;
  --good: #50d989;
  --warn: #f3bc47;
  --danger: #f45d87;
}

[data-theme="koahis"],
[data-theme="koahis-dark"],
[data-theme="koahis-light"] {
  --surface: #fbf0d5;
  --surface-soft: #f4dfb6;
  --card: #fff8e8;
  --text: #1b130c;
  --muted: #62442e;
  --line: #cba776;
  --accent: #7f241b;
  --accent-dark: #572018;
}

[data-theme="smcribs"],
[data-theme="smcribs-dark"],
[data-theme="smcribs-light"] {
  --surface: #f7d969;
  --surface-soft: #e4bc3c;
  --card: #fff2a8;
  --text: #15100a;
  --muted: #604718;
  --line: #a98426;
  --accent: #1f1f1f;
  --accent-dark: #000000;
}

[data-theme="shannons"],
[data-theme="shannons-dark"],
[data-theme="shannons-light"] {
  --surface: #fff0f7;
  --surface-soft: #f8d5e7;
  --card: #ffffff;
  --text: #21131b;
  --muted: #70425a;
  --line: #d7a9c0;
  --accent: #8d3364;
  --accent-dark: #642044;
}

[data-theme="deuces"],
[data-theme="deuces-dark"] {
  --surface: #27242f;
  --surface-soft: #15131c;
  --card: #302a3c;
  --field: #11101a;
  --text: #f6f3fb;
  --muted: #cbc5d9;
  --line: #5a526b;
  --accent: #9078ff;
  --accent-dark: #7057cf;
}

[data-theme="deuces-light"] {
  --surface: #f5f3fa;
  --surface-soft: #e5e0ef;
  --card: #ffffff;
  --field: #ffffff;
  --text: #191721;
  --muted: #5c566a;
  --line: #c9c2d8;
  --accent: #7057cf;
  --accent-dark: #49339e;
}

[data-theme="tblks"],
[data-theme="tblks-dark"],
[data-theme="tblks-light"],
[data-theme="unds"],
[data-theme="unds-dark"],
[data-theme="unds-light"],
[data-theme="tms"],
[data-theme="tms-dark"],
[data-theme="tms-light"] {
  --surface: #f8f5f0;
  --surface-soft: #ebe2d8;
  --card: #ffffff;
  --text: #1b1714;
  --muted: #6b5b4d;
  --line: #d2c3b5;
  --accent: #5f3d2f;
  --accent-dark: #372219;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--surface-soft);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: 42px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

button.secondary,
.pager button {
  background: #ffffff;
  color: var(--accent-dark);
}

button:hover:not(:disabled) {
  filter: brightness(0.98);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  padding: 10px 11px;
}

textarea {
  resize: vertical;
}

label span {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 4px;
  font-size: clamp(1.8rem, 4vw, 2.55rem);
}

h2 {
  margin-bottom: 12px;
  font-size: 1.22rem;
}

h3 {
  margin-bottom: 5px;
  font-size: 1rem;
}

.pageHeader {
  border-bottom: 1px solid var(--line);
  background: var(--card);
  padding: 20px clamp(16px, 4vw, 44px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.brand img {
  width: auto;
  max-width: 180px;
  max-height: 66px;
  object-fit: contain;
}

.brand img[hidden] {
  display: none;
}

.brand p {
  margin-bottom: 0;
  color: var(--muted);
}

.layout {
  width: min(1120px, calc(100% - 32px));
  margin: 24px auto 48px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.searchPanel,
.termsPanel {
  padding: 18px;
}

.filters {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(180px, 240px) minmax(240px, 1fr) 120px;
  gap: 12px;
  align-items: end;
}

.statusText {
  margin: 12px 0 0;
  color: var(--muted);
}

.gridArea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.resultsPanel,
.offerPanel {
  padding: 18px;
}

.offerPanel {
  position: sticky;
  top: 16px;
}

.bulkPanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 16px;
  padding: 16px;
}

.bulkOptions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.bulkOptionCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 78px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
}

.bulkOptionCard .bulkMeta {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 4px;
}

.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.pager {
  display: flex;
  gap: 8px;
}

.results,
.cartItems {
  display: grid;
  gap: 12px;
}

.productCard,
.cartItem {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 14px;
}

.productCardTop {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.productImage {
  width: 72px;
  aspect-ratio: 63 / 88;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 3px;
}

.productIdentity {
  min-width: 0;
}

.productIdentity h3 {
  overflow-wrap: anywhere;
}

.meta,
.termsPanel p {
  color: var(--muted);
}

.offerRows {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.offerRow {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 92px 92px 78px 74px;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.money {
  color: var(--good);
  font-weight: 800;
}

.small {
  color: var(--muted);
  font-size: 0.84rem;
}

.offerForm {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.totals {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.submissionNotice {
  margin-top: 14px;
  border: 1px solid var(--good);
  border-radius: 8px;
  background: color-mix(in oklab, var(--card) 85%, transparent);
  padding: 12px;
}

.submissionNotice h3 {
  margin-bottom: 8px;
}

.submissionNoticeText {
  margin: 0;
  color: var(--muted);
}

.submissionNoticeItems {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.submissionNoticeItem {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 9px;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.4;
}

.submissionNoticeTotals {
  color: var(--muted);
  margin: 8px 0 0;
}

.submissionCsvLink {
  margin-top: 10px;
  display: inline-block;
  border: 1px solid var(--good);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  text-decoration: none;
  background: color-mix(in oklab, var(--good) 12%, var(--surface));
}

.submissionCsvLink:hover {
  filter: brightness(0.96);
}

.empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 24px;
  text-align: center;
}

.termsPanel {
  margin-top: 18px;
}

@media (max-width: 960px) {
  .filters,
  .gridArea {
    grid-template-columns: 1fr;
  }

  .offerPanel {
    position: static;
    order: -1;
  }

  .bulkOptionCard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .sectionHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .pager {
    width: 100%;
  }

  .pager button {
    flex: 1;
  }

  .productCardTop {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .productImage {
    width: 58px;
  }

  .offerRow {
    grid-template-columns: 1fr 1fr;
  }

  .offerRow button {
    grid-column: 1 / -1;
  }
}

/* 2026-06-13 public buylist layout pass. */
* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.page,
.brand,
.filters,
.gridArea,
.termsPanel,
.bulkItemsPanel,
.productsPanel,
.offerPanel {
  min-width: 0;
}

.page {
  width: min(1180px, calc(100vw - 36px));
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(1180px, calc(100vw - 36px));
  margin-inline: auto;
}

.brand img {
  max-width: 180px;
  max-height: 72px;
  object-fit: contain;
}

.filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(260px, 2fr) auto;
  gap: 12px;
  align-items: end;
}

.filters select,
.filters input,
.filters button {
  width: 100%;
  min-width: 0;
}

.gridArea {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 0.95fr);
  gap: 16px;
  align-items: start;
}

.productsPanel,
.offerPanel,
.filters,
.termsPanel {
  border-radius: 8px;
}

.productCard,
.cartItem,
.bulkOptionCard {
  min-width: 0;
}

.productIdentity h3,
.productIdentity p,
.meta,
.termsPanel,
.termsPanel p,
.bulkOptionCard,
.offerRow {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}

.offerRow {
  grid-template-columns: minmax(150px, 1fr) minmax(80px, auto) minmax(80px, auto) minmax(70px, 82px) minmax(64px, 76px);
}

.offerRow input {
  width: 100%;
  min-width: 0;
}

.bulkOptionCard {
  grid-template-columns: minmax(0, 1fr) minmax(72px, 100px) minmax(64px, 78px);
}

@media (max-width: 900px) {
  .filters,
  .gridArea,
  .bulkOptionCard {
    grid-template-columns: minmax(0, 1fr);
  }

  .offerPanel {
    position: static;
    order: -1;
  }
}

@media (max-width: 640px) {
  .page,
  .brand {
    width: min(100% - 24px, 1180px);
  }

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

/* 2026-06-13 customer buylist hard polish. */
.page,
.brand {
  width: min(1180px, calc(100vw - 40px));
}

.searchPanel,
.productsPanel,
.offerPanel,
.termsPanel {
  border-radius: 8px;
  overflow: hidden;
}

.termsPanel {
  display: block;
  padding: 18px;
}

.termsPanel h2,
.termsPanel p,
.termsPanel strong,
.termsPanel span {
  writing-mode: horizontal-tb;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 92ch;
}

.filters {
  grid-template-columns: minmax(220px, 0.9fr) minmax(240px, 1fr) minmax(320px, 1.6fr) 120px;
}

.bulkOptions {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 12px;
}

.bulkOptionCard {
  min-height: 88px;
  grid-template-columns: minmax(0, 1fr) 96px 82px;
  align-items: center;
}

.bulkOptionCard h3,
.bulkOptionCard p {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.bulkOptionCard input,
.bulkOptionCard button {
  min-height: 42px;
}

.productCard {
  overflow: hidden;
}

.productIdentity h3,
.productIdentity .meta {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 980px) {
  .filters,
  .gridArea,
  .bulkOptions,
  .bulkOptionCard {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 2026-06-13 final public buylist containment pass. */
body .termsPanel,
body .termsPanel * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body .termsPanel {
  display: block !important;
  min-height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 18px !important;
}

body .termsPanel p {
  max-width: 96ch !important;
  line-height: 1.45 !important;
}

body .bulkOptions {
  grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  gap: 12px !important;
}

body .bulkOptionCard {
  grid-template-columns: minmax(0, 1fr) 104px 82px !important;
  gap: 12px !important;
  min-height: 94px !important;
}

body .bulkOptionCard input {
  width: 104px !important;
}

body .bulkOptionCard button {
  width: 82px !important;
}

@media (max-width: 900px) {
  body .bulkOptions,
  body .bulkOptionCard {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .bulkOptionCard input,
  body .bulkOptionCard button {
    width: 100% !important;
  }
}
/* 2026-06-13 public buylist scale lock. Keep this at EOF. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-size: 15px;
}

.pageHeader {
  padding: 18px 20px;
}

.brand {
  align-items: center;
  display: flex;
  gap: 18px;
  width: min(1040px, calc(100vw - 32px));
}

.brand img {
  max-height: 64px;
  max-width: 180px;
  object-fit: contain;
}

.brand h1 {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  line-height: 1.05;
  margin: 0 0 6px;
}

.layout {
  margin: 20px auto 42px;
  width: min(1040px, calc(100vw - 32px));
}

.searchPanel,
.resultsPanel,
.offerPanel,
.termsPanel,
.bulkPanel {
  box-sizing: border-box;
  overflow: hidden;
}

.filters {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(190px, 0.9fr) minmax(210px, 1fr) minmax(280px, 1.55fr) 112px;
}

.filters select,
.filters input,
.filters button {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.gridArea {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.bulkPanel {
  padding: 16px;
}

.bulkPanelHeader {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.bulkOptions {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bulkOptionCard {
  align-items: center;
  box-sizing: border-box;
  display: grid;
  gap: 10px 12px;
  grid-template-columns: minmax(0, 1fr) 96px 76px;
  min-height: 88px;
  padding: 12px;
}

.bulkOptionCard h3,
.bulkOptionCard p,
.productIdentity h3,
.meta {
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: break-word;
  white-space: normal;
  word-break: normal;
}

.bulkOptionCard input {
  box-sizing: border-box;
  height: 42px;
  min-width: 0;
  width: 96px;
}

.bulkOptionCard button {
  height: 42px;
  min-width: 0;
  width: 76px;
}

.offerPanel {
  align-self: start;
  position: sticky;
  top: 12px;
}

@media (max-width: 980px) {
  .brand,
  .layout {
    width: min(100%, calc(100vw - 24px));
  }

  .filters,
  .gridArea,
  .bulkOptions,
  .bulkPanelHeader {
    grid-template-columns: minmax(0, 1fr);
  }

  .offerPanel {
    order: -1;
    position: static;
  }

  .bulkOptionCard {
    grid-template-columns: minmax(0, 1fr) 96px 76px;
  }
}

@media (max-width: 640px) {
  .brand {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .bulkOptionCard input,
  .bulkOptionCard button {
    width: 100%;
  }
}
/* 2026-06-13 public buylist theme/proportion lock. */
html body select,
html body select option {
  background-color: var(--field-bg, #12081d) !important;
  color: var(--text, #f8f3ff) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body[data-theme="koahis"] select,
html body[data-theme="koahis"] select option,
html body[data-theme="smcribs"] select,
html body[data-theme="smcribs"] select option,
html body[data-theme="shannons"] select,
html body[data-theme="shannons"] select option,
html body[data-theme="tms"] select,
html body[data-theme="tms"] select option {
  background-color: #fff7e8 !important;
  color: #1b1021 !important;
  -webkit-text-fill-color: #1b1021 !important;
}

html body .buylistShell,
html body .buylistFilters,
html body .buylistGrid,
html body .productsPanel,
html body .offerPanel {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

html body .buylistShell {
  max-width: min(1120px, calc(100vw - 32px)) !important;
  margin-inline: auto !important;
}

html body .buylistFilterGrid {
  display: grid !important;
  grid-template-columns: minmax(190px, 0.8fr) minmax(220px, 0.9fr) minmax(260px, 1.4fr) auto !important;
  gap: 12px !important;
  align-items: end !important;
}

html body .bulkItemsGrid,
html body .bulkGrid,
html body #buylistBulkItems {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 12px !important;
}

html body .bulkItem,
html body .bulkOption,
html body .bulkCard,
html body .buylistBulkItem {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 92px 84px !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 112px !important;
  padding: 14px !important;
}

html body .bulkItem > :first-child,
html body .bulkOption > :first-child,
html body .bulkCard > :first-child,
html body .buylistBulkItem > :first-child {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  max-width: 100% !important;
}

html body .bulkItem > *:not(input):not(button):not(:first-child),
html body .bulkOption > *:not(input):not(button):not(:first-child),
html body .bulkCard > *:not(input):not(button):not(:first-child),
html body .buylistBulkItem > *:not(input):not(button):not(:first-child) {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

html body .bulkItem input,
html body .bulkOption input,
html body .bulkCard input,
html body .buylistBulkItem input {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html body .bulkItem button,
html body .bulkOption button,
html body .bulkCard button,
html body .buylistBulkItem button {
  grid-column: 3 !important;
  grid-row: 2 !important;
}

html body .bulkItem h3,
html body .bulkOption h3,
html body .bulkCard h3,
html body .buylistBulkItem h3,
html body .bulkItem strong,
html body .bulkOption strong,
html body .bulkCard strong,
html body .buylistBulkItem strong {
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  line-height: 1.25 !important;
}

html body .bulkItem input,
html body .bulkOption input,
html body .bulkCard input,
html body .buylistBulkItem input {
  width: 92px !important;
  min-width: 0 !important;
}

html body .bulkItem button,
html body .bulkOption button,
html body .bulkCard button,
html body .buylistBulkItem button {
  min-width: 78px !important;
}

html body .bulkOptionCard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 14px !important;
  align-items: stretch !important;
  min-height: 0 !important;
  padding: 16px !important;
}

html body .bulkOptionCard > .bulkOptionCopy,
html body .bulkOptionCard > div:first-child {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

html body .bulkOptionActions {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(96px, 1fr) minmax(86px, 110px) !important;
  gap: 10px !important;
  align-items: center !important;
}

html body .bulkOptionCard h3 {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  word-break: normal !important;
}

html body .bulkOptionCard .bulkMeta {
  line-height: 1.3 !important;
  margin: 0 !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  word-break: normal !important;
}

html body .bulkOptionCard input {
  width: 100% !important;
  min-width: 0 !important;
}

html body .bulkOptionCard button {
  width: 100% !important;
  min-width: 86px !important;
}

@media (max-width: 900px) {
  html body .buylistFilterGrid,
  html body .buylistGrid {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-06-13 customer buylist proportion lock. */
html body *,
html body *::before,
html body *::after {
  box-sizing: border-box;
}

html body .brand,
html body .filters,
html body .layout,
html body .buylistShell {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: min(1120px, calc(100vw - 32px)) !important;
  margin-inline: auto !important;
}

html body .filters,
html body .buylistFilters {
  padding: 18px !important;
}

html body .buylistFilterGrid {
  display: grid !important;
  grid-template-columns: minmax(210px, 0.8fr) minmax(240px, 0.9fr) minmax(280px, 1.5fr) minmax(104px, 130px) !important;
  gap: 12px !important;
  align-items: end !important;
}

html body .layout,
html body .buylistGrid,
html body .gridArea {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 16px !important;
  align-items: start !important;
}

html body .productsPanel,
html body .offerPanel,
html body .bulkPanel,
html body .bulkOptionCard,
html body .productCard,
html body .offerRow {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html body .bulkPanel {
  padding: 18px !important;
}

html body .bulkPanelHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, max-content) !important;
  gap: 14px !important;
  align-items: start !important;
}

html body .bulkPanelHeader p,
html body .bulkOptionCard h3,
html body .bulkOptionCard p,
html body .productCard h3,
html body .productCard p,
html body .offerRow,
html body .offerRow * {
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

html body .bulkOptions,
html body #buylistBulkItems {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}

html body .bulkOptionCard h3 {
  font-size: 1rem !important;
  line-height: 1.25 !important;
}

html body .bulkMeta {
  color: var(--muted, #c7bde0) !important;
}

html body .offerPanel {
  position: sticky !important;
  top: 14px !important;
}

html body .productCard {
  display: grid !important;
  grid-template-columns: 80px minmax(0, 1fr) !important;
  gap: 12px !important;
}

html body .productCard .offerRows,
html body .productCard .offerRow {
  grid-column: 1 / -1 !important;
}

@media (max-width: 980px) {
  html body .buylistFilterGrid,
  html body .layout,
  html body .buylistGrid,
  html body .gridArea,
  html body .bulkPanelHeader {
    grid-template-columns: 1fr !important;
  }

  html body .offerPanel {
    position: static !important;
  }
}
/* 2026-06-13 public buylist proportional lock. Keep at EOF. */
html body {
  overflow-x: hidden !important;
}

html body select,
html body option,
html body input,
html body textarea,
html body button {
  min-width: 0;
  max-width: 100%;
  color: var(--text, #f8f3ff);
}

html body option {
  background: var(--panel, #1f112c);
  color: var(--text, #f8f3ff);
}

html body .brand,
html body .filters,
html body .layout,
html body .buylistShell,
html body .buylistPageShell {
  width: min(1040px, calc(100vw - 32px)) !important;
  max-width: 1040px !important;
  margin-inline: auto !important;
}

html body .brand {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 24px 16px !important;
}

html body .brand img {
  max-width: 180px !important;
  max-height: 76px !important;
  object-fit: contain !important;
}

html body .filters {
  padding: 16px !important;
  margin-top: 18px !important;
}

html body .buylistFilterGrid,
html body .filters form,
html body .filters .filterGrid {
  display: grid !important;
  grid-template-columns: minmax(190px, 240px) minmax(220px, 260px) minmax(260px, 1fr) 116px !important;
  gap: 12px !important;
  align-items: end !important;
}

html body .layout,
html body .buylistGrid,
html body .gridArea {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
  gap: 16px !important;
  align-items: start !important;
  margin-top: 16px !important;
}

html body .productsPanel,
html body .bulkPanel,
html body .offerPanel {
  min-width: 0 !important;
  overflow: hidden !important;
}

html body .bulkPanel {
  padding: 18px !important;
}

html body .bulkPanelHeader,
html body .bulkHeader {
  display: flex !important;
  justify-content: space-between !important;
  align-items: start !important;
  gap: 12px !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.14)) !important;
}

html body .bulkOptions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}

html body .bulkOptionCard {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 14px !important;
  min-height: 0 !important;
}

html body .bulkOptionCopy {
  min-width: 0 !important;
}

html body .bulkOptionCopy h3 {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
  margin: 0 0 6px !important;
}

html body .bulkMeta {
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  margin: 0 !important;
}

html body .bulkOptionActions {
  display: grid !important;
  grid-template-columns: 1fr 88px !important;
  gap: 10px !important;
  align-items: center !important;
}

html body .bulkOptionActions input,
html body .bulkOptionActions button {
  width: 100% !important;
  min-height: 42px !important;
}

html body .productCard,
html body .buylistProduct,
html body .product {
  min-width: 0 !important;
  overflow: hidden !important;
}

html body .productCard h3,
html body .buylistProduct h3,
html body .product h3 {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.25 !important;
}

html body .offerPanel {
  position: sticky !important;
  top: 12px !important;
}

@media (max-width: 900px) {
  html body .buylistFilterGrid,
  html body .filters form,
  html body .filters .filterGrid,
  html body .layout,
  html body .buylistGrid,
  html body .gridArea {
    grid-template-columns: 1fr !important;
  }

  html body .offerPanel {
    position: static !important;
  }
}

/* 2026-06-14 public buylist display repair. Keep at EOF. */
html body {
  overflow-x: hidden !important;
}

html body *,
html body *::before,
html body *::after {
  box-sizing: border-box !important;
}

html body .brand,
html body .layout {
  width: min(1120px, calc(100vw - 40px)) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

html body .layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
  margin-top: 16px !important;
}

html body .searchPanel,
html body .gridArea,
html body .termsPanel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body .searchPanel,
html body .resultsPanel,
html body .offerPanel,
html body .termsPanel {
  overflow: visible !important;
}

html body .filters {
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.1fr) minmax(280px, 1.8fr) minmax(96px, 120px) !important;
  gap: 12px !important;
  align-items: end !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 18px !important;
  overflow: visible !important;
}

html body .filters label,
html body .filters .searchField {
  min-width: 0 !important;
  width: 100% !important;
}

html body .filters select,
html body .filters input,
html body .filters button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
}

html body .statusText {
  margin: 0 18px 18px !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html body .gridArea {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) !important;
  gap: 16px !important;
  align-items: start !important;
  margin-top: 0 !important;
}

html body .resultsPanel,
html body .bulkPanel,
html body .offerPanel,
html body .productCard {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .resultsPanel,
html body .offerPanel {
  padding: 18px !important;
}

html body #bulkPanel[hidden] {
  display: none !important;
}

html body #bulkPanel:not([hidden]) {
  display: block !important;
  margin-bottom: 18px !important;
}

html body .bulkPanel .sectionHeader,
html body .resultsPanel > .sectionHeader {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.14)) !important;
}

html body .bulkPanel .sectionHeader h2,
html body .resultsPanel > .sectionHeader h2 {
  margin: 0 !important;
  line-height: 1.2 !important;
}

html body .bulkPanel .sectionHeader p {
  margin: 0 !important;
  max-width: 520px !important;
  line-height: 1.35 !important;
  overflow-wrap: normal !important;
}

html body .bulkOptions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body .bulkOptionCard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 14px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html body .bulkOptionCopy h3 {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

html body .bulkMeta {
  margin: 0 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

html body .bulkOptionActions {
  display: grid !important;
  grid-template-columns: minmax(88px, 1fr) minmax(84px, 110px) !important;
  gap: 10px !important;
  align-items: center !important;
}

html body .bulkOptionActions input,
html body .bulkOptionActions button {
  width: 100% !important;
  min-height: 42px !important;
}

html body .results {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body .productCard {
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
}

html body .productCardTop {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

html body .productImage {
  width: 72px !important;
  height: 96px !important;
  object-fit: contain !important;
}

html body .productIdentity,
html body .productIdentity h3,
html body .productIdentity .meta {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body .offerPanel {
  position: sticky !important;
  top: 14px !important;
  align-self: start !important;
}

html body .offerForm label,
html body .offerForm input,
html body .offerForm textarea,
html body .offerForm button,
html body .totals {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 980px) {
  html body .brand,
  html body .layout {
    width: min(100%, calc(100vw - 24px)) !important;
  }

  html body .filters,
  html body .gridArea {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .offerPanel {
    position: static !important;
  }
}

/* 2026-06-14 public buylist stable layout lock. Keep at EOF. */
html,
html body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body * {
  box-sizing: border-box;
}

html body .brand,
html body .layout {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  margin-top: 16px !important;
  margin-bottom: 48px !important;
  padding: 0 !important;
}

html body .searchPanel,
html body .resultsPanel,
html body .offerPanel,
html body .termsPanel {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

html body .filters {
  display: grid !important;
  grid-template-columns: minmax(200px, 0.9fr) minmax(230px, 1fr) minmax(280px, 1.4fr) 120px !important;
  gap: 12px !important;
  align-items: end !important;
  padding: 18px !important;
}

html body .filters label,
html body .filters .searchField,
html body .filters select,
html body .filters input,
html body .filters button {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body .statusText {
  display: block !important;
  margin: 0 18px 18px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body .gridArea {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body .resultsPanel,
html body .offerPanel {
  padding: 18px !important;
}

html body .offerPanel {
  position: sticky !important;
  top: 14px !important;
  align-self: start !important;
}

html body #bulkPanel[hidden] {
  display: none !important;
}

html body.buylistBulkMode .resultsPanel > .sectionHeader,
html body.buylistBulkMode #results {
  display: none !important;
}

html body.buylistBulkMode #bulkPanel:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
}

html body .bulkPanel .sectionHeader {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--line) !important;
}

html body .bulkPanel .sectionHeader h2,
html body .bulkPanel .sectionHeader p {
  margin: 0 !important;
  text-align: left !important;
  max-width: 100% !important;
}

html body .bulkPanel .sectionHeader p {
  margin-top: 6px !important;
}

html body .bulkOptions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body .bulkOptionCard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 14px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body .bulkOptionCopy h3 {
  margin: 0 0 4px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

html body .bulkMeta {
  margin: 0 !important;
  line-height: 1.35 !important;
}

html body .bulkOptionActions {
  display: grid !important;
  grid-template-columns: minmax(82px, 1fr) 88px !important;
  gap: 10px !important;
  align-items: center !important;
}

html body .bulkOptionActions input,
html body .bulkOptionActions button {
  min-width: 0 !important;
  width: 100% !important;
}

html body .productCardTop {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

html body .productImage {
  width: 72px !important;
  height: 96px !important;
  object-fit: contain !important;
}

html body .productIdentity,
html body .productIdentity h3,
html body .productIdentity .meta,
html body .cartItem,
html body .empty {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 980px) {
  html body .brand,
  html body .layout {
    width: min(100%, calc(100vw - 24px)) !important;
  }

  html body .filters,
  html body .gridArea,
  html body .bulkOptions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .offerPanel {
    position: static !important;
  }
}

/* 2026-06-14 customer buylist containment repair. Keep at EOF. */
html body {
  overflow-x: hidden !important;
}

html body .layout {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: 1120px !important;
  margin: 18px auto 44px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

html body .searchPanel,
html body .resultsPanel,
html body .offerPanel,
html body .termsPanel {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body .filters {
  display: grid !important;
  grid-template-columns: minmax(180px, .85fr) minmax(220px, .95fr) minmax(320px, 1.6fr) 120px !important;
  gap: 12px !important;
  align-items: end !important;
}

html body .filters > * {
  min-width: 0 !important;
}

html body .filters input,
html body .filters select,
html body .filters button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body .gridArea {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
  gap: 16px !important;
  align-items: start !important;
}

html body.buylistBulkMode .resultsPanel > .sectionHeader,
html body.buylistBulkMode #results {
  display: none !important;
}

html body #bulkPanel[hidden] {
  display: none !important;
}

html body.buylistBulkMode #bulkPanel:not([hidden]) {
  display: block !important;
  margin: 0 !important;
}

html body.buylistBulkMode .bulkOptions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body .bulkOptionCard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  min-height: 128px !important;
  padding: 14px !important;
  gap: 12px !important;
  align-items: stretch !important;
}

html body .bulkOptionCopy {
  min-width: 0 !important;
}

html body .bulkOptionCopy h3 {
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html body .bulkOptionActions {
  display: grid !important;
  grid-template-columns: minmax(84px, 1fr) minmax(84px, 106px) !important;
  gap: 10px !important;
  align-items: center !important;
}

html body .bulkOptionActions input,
html body .bulkOptionActions button {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body .offerPanel {
  position: sticky !important;
  top: 14px !important;
}

@media (max-width: 920px) {
  html body .filters,
  html body .gridArea,
  html body.buylistBulkMode .bulkOptions {
    grid-template-columns: 1fr !important;
  }

  html body .offerPanel {
    position: static !important;
  }
}

/* 2026-06-14 public buylist display repair: final layout lock.
   Older page-specific overrides above this point are intentionally left in place,
   but these rules own the visible customer buylist proportions. */
html body .layout {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 18px 0 32px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  overflow: visible !important;
}

html body .searchPanel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html body .filters {
  display: grid !important;
  grid-template-columns: minmax(180px, 0.9fr) minmax(210px, 1fr) minmax(260px, 1.55fr) minmax(104px, 120px) !important;
  align-items: end !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body .filters label,
html body .filters select,
html body .filters input,
html body .filters button {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .filters .searchField {
  width: 100% !important;
}

html body .statusText {
  margin: 12px 0 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body .gridArea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
  align-items: start !important;
  gap: 16px !important;
  overflow: visible !important;
}

html body .resultsPanel,
html body .offerPanel {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body.buylistBulkMode .resultsPanel > .sectionHeader,
html body.buylistBulkMode #results {
  display: none !important;
}

html body.buylistBulkMode #bulkPanel:not([hidden]) {
  display: block !important;
  margin: 0 !important;
}

html body .bulkPanel .sectionHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
  padding-bottom: 12px !important;
}

html body .bulkPanel .sectionHeader p {
  max-width: none !important;
  text-align: left !important;
}

html body .bulkOptions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body .bulkOptionCard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 12px !important;
  min-height: 126px !important;
  padding: 14px !important;
  align-content: space-between !important;
}

html body .bulkOptionCopy {
  min-width: 0 !important;
}

html body .bulkOptionCopy h3 {
  font-size: 16px !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body .bulkMeta {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body .bulkOptionActions {
  display: grid !important;
  grid-template-columns: minmax(82px, 1fr) 84px !important;
  gap: 10px !important;
  align-items: center !important;
}

html body .bulkOptionActions input,
html body .bulkOptionActions button {
  width: 100% !important;
  min-width: 0 !important;
}

html body .offerPanel {
  position: sticky !important;
  top: 16px !important;
  align-self: start !important;
}

@media (max-width: 900px) {
  html body .layout {
    width: min(100%, calc(100vw - 20px)) !important;
    padding: 12px 0 24px !important;
  }

  html body .filters,
  html body .gridArea,
  html body .bulkOptions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .offerPanel {
    position: static !important;
  }
}

/* 2026-06-14 public buylist final display lock. Keep at EOF. */
html body {
  overflow-x: hidden !important;
}

html body .brand,
html body .layout {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

html body .layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: 16px !important;
  margin-bottom: 40px !important;
}

html body .searchPanel,
html body .gridArea,
html body .termsPanel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html body .filters {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.05fr) minmax(300px, 1.6fr) minmax(100px, 120px) !important;
  gap: 12px !important;
  align-items: end !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 18px !important;
  margin: 0 !important;
  overflow: visible !important;
}

html body .filters label,
html body .filters .searchField,
html body .filters select,
html body .filters input,
html body .filters button {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body .statusText {
  width: auto !important;
  max-width: calc(100% - 36px) !important;
  margin: 0 18px 18px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body .gridArea {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) !important;
  gap: 16px !important;
  align-items: start !important;
  margin: 0 !important;
}

html body .resultsPanel,
html body .offerPanel,
html body .bulkPanel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html body .resultsPanel,
html body .offerPanel {
  padding: 18px !important;
}

html body #bulkPanel[hidden] {
  display: none !important;
}

html body #bulkPanel:not([hidden]) {
  display: block !important;
  margin: 0 0 18px !important;
}

html body .bulkPanel .sectionHeader,
html body .resultsPanel > .sectionHeader {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--line) !important;
}

html body .bulkPanel .sectionHeader h2,
html body .resultsPanel > .sectionHeader h2 {
  margin: 0 !important;
  line-height: 1.2 !important;
}

html body .bulkPanel .sectionHeader p {
  flex: 1 1 auto !important;
  max-width: 620px !important;
  margin: 0 !important;
  text-align: right !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

html body .bulkOptions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
  gap: 12px !important;
}

html body .bulkOptionCard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 14px !important;
}

html body .bulkOptionCopy h3,
html body .bulkMeta {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: none !important;
}

html body .bulkOptionCopy h3 {
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
}

html body .bulkMeta {
  margin: 0 !important;
  line-height: 1.35 !important;
}

html body .bulkOptionActions {
  display: grid !important;
  grid-template-columns: minmax(90px, 1fr) minmax(84px, 110px) !important;
  gap: 10px !important;
  align-items: center !important;
}

html body .productCardTop {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

html body .productImage {
  width: 72px !important;
  height: 96px !important;
  object-fit: contain !important;
}

html body .productIdentity,
html body .productIdentity h3,
html body .productIdentity .meta,
html body .cartItem,
html body .empty {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body .offerPanel {
  position: sticky !important;
  top: 14px !important;
  align-self: start !important;
}

@media (max-width: 980px) {
  html body .brand,
  html body .layout {
    width: min(100%, calc(100vw - 24px)) !important;
  }

  html body .filters,
  html body .gridArea {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .bulkPanel .sectionHeader {
    display: grid !important;
  }

  html body .bulkPanel .sectionHeader p {
    max-width: 100% !important;
    text-align: left !important;
  }

  html body .offerPanel {
    position: static !important;
  }
}
/* 2026-06-14: keep public buylist product rows readable. Keep this block last. */
html body .results,
html body .productCard,
html body .productCardTop,
html body .productIdentity,
html body .productIdentity h3,
html body .productIdentity .meta,
html body .offerRows,
html body .offerRow {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .results {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
}

html body .productCard {
  display: block !important;
  width: 100% !important;
  padding: 14px !important;
  overflow: hidden !important;
}

html body .productCardTop {
  display: grid !important;
  grid-template-columns: 74px minmax(220px, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
}

html body .productImage {
  grid-column: 1 !important;
  width: 74px !important;
  height: 100px !important;
  object-fit: contain !important;
}

html body .productIdentity {
  grid-column: 2 !important;
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
}

html body .productIdentity h3,
html body .productIdentity .meta {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-break: auto !important;
  hyphens: none !important;
}

html body .productIdentity h3 {
  margin: 0 0 6px !important;
  font-size: 16px !important;
  line-height: 1.28 !important;
}

html body .productIdentity .meta {
  margin: 0 !important;
  line-height: 1.35 !important;
  color: var(--muted) !important;
}

html body .offerRows {
  display: grid !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--line) !important;
}

html body .offerRow {
  display: grid !important;
  grid-template-columns: minmax(160px, 1fr) 92px 92px 80px 72px !important;
  gap: 10px !important;
  align-items: center !important;
}

html body .offerRow input,
html body .offerRow button {
  min-width: 0 !important;
  width: 100% !important;
}

@media (max-width: 760px) {
  html body .productCardTop {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  html body .productImage {
    width: 64px !important;
    height: 88px !important;
  }

  html body .offerRow {
    grid-template-columns: minmax(0, 1fr) 80px 80px !important;
  }
}

/* 2026-06-14 customer buylist containment hardening.
   Ensure cards, image/title rows, and offer cells always stay within panel bounds. */
html body .results,
html body .productCard,
html body .productCardTop,
html body .offerRows,
html body .offerRow {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body .results {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.storeModeLink {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  text-decoration: none;
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  color: var(--text);
}

.storeModeLink:hover {
  filter: brightness(0.96);
}

#storeModeNotice {
  margin-top: 8px;
}

.storeControls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  width: 100%;
}

.storeControls[hidden] {
  display: none !important;
}

.storeVisibilityStatus {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.storeDesiredRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 174px;
  gap: 10px;
  align-items: end;
}

.storeDesiredRow label {
  min-width: 0;
}

.storeDesiredRow input {
  width: 100%;
}

.storeControlMessage {
  margin: 0;
  min-height: 20px;
  color: var(--warn);
  font-size: 0.84rem;
}

html body .productCard {
  width: 100% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: block !important;
}

html body .productCardTop {
  width: 100% !important;
  grid-template-columns: minmax(0, 72px) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

html body .productImage {
  grid-column: 1 !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 96px !important;
  object-fit: contain !important;
  justify-self: start !important;
}

html body .productIdentity {
  grid-column: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body .productIdentity h3,
html body .productIdentity .meta {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html body .offerRows {
  width: 100% !important;
  overflow: hidden !important;
}

html body .offerRow {
  width: 100% !important;
  gap: 8px !important;
  grid-template-columns: minmax(0, 2fr) minmax(86px, 1fr) minmax(86px, 1fr) minmax(62px, 80px) minmax(62px, 76px) !important;
}

html body .offerRow > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .offerRow input,
html body .offerRow button,
html body .offerRow span {
  width: 100% !important;
}

@media (max-width: 760px) {
  html body .productCardTop {
    grid-template-columns: minmax(0, 64px) minmax(0, 1fr) !important;
  }

  html body .productImage {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 88px !important;
  }

  html body .offerRow {
    grid-template-columns: minmax(0, 1fr) minmax(80px, 1fr) minmax(80px, 1fr) !important;
  }
}
/* 2026-06-14: final alignment hardening. Keep buylist card image and title row contained and centered.
   Ensures no card metadata or thumbnails overflow outside their result tiles. */
html body .results .productCard {
  overflow: hidden !important;
}

html body .productCardTop {
  align-items: center !important;
}

html body .productImage {
  justify-self: center !important;
  align-self: center !important;
  width: 72px !important;
  max-width: 72px !important;
  min-width: 72px !important;
  height: 96px !important;
  max-height: 96px !important;
  min-height: 96px !important;
}

html body .productCard .productIdentity {
  overflow: hidden !important;
}