:root {
  --green: #007f3d;
  --orange: #f04b23;
  --ink: #07130a;
  --muted: #60705d;
  --paper: #f3f8f0;
  --line: #c4d5bf;
  --line-strong: #a8c0a1;
  --cream: #eaf2e6;
}

* {
  box-sizing: border-box;
}

html[data-environment-marker]::before {
  content: attr(data-environment-marker);
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 999999;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 12px;
  background: #fff8ce;
  color: var(--ink);
  font: 1000 13px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  box-shadow: 0 8px 24px rgba(7, 19, 10, 0.18);
  pointer-events: none;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 1000;
  cursor: pointer;
}

button.primary {
  background: var(--orange);
  color: white;
}

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

.loginScreen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(243, 248, 240, 0.94);
}

.loginScreen[hidden] {
  display: none;
}

body.signedIn .loginScreen {
  display: none;
}

body:not(.signedIn) .stockShell {
  filter: blur(2px);
  pointer-events: none;
}

.loginCard {
  width: min(440px, 100%);
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  background: white;
  box-shadow: 0 18px 48px rgba(7, 19, 10, 0.14);
}

.loginCard p,
.loginCard h1 {
  margin: 0;
}

.loginCard p {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  font-size: 13px;
}

.loginCard h1 {
  font-size: 34px;
}

.loginCard label {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.loginCard input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
}

#loginMessage {
  min-height: 20px;
  color: #9d2d11;
}

body.locked .costShell {
  filter: blur(2px);
  pointer-events: none;
}

.costShell {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, #05431d, #1eb441);
  color: white;
}

.hero p,
.hero h1 {
  margin: 0;
}

.heroBrandLogo {
  display: block;
  width: min(250px, 100%);
  height: auto;
  margin-bottom: 12px;
  border-radius: 8px;
  background: #fff;
}

.hero p {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
}

.hero h1 {
  margin-top: 4px;
  font-size: clamp(32px, 6vw, 58px);
  line-height: 0.95;
}

#saveStatus {
  display: block;
  margin-top: 10px;
  color: #dff4dd;
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.toolbar,
.receivingCard,
.department,
.subcategory,
.productRow {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.toolbar {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.receivingCard {
  padding: 18px;
}

.receivingHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.receivingHeader p,
.receivingHeader h2 {
  margin: 0;
}

.receivingHeader p {
  color: var(--green);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.receivingHeader h2 {
  margin: 3px 0 5px;
  font-size: 30px;
}

.receivingHeader span {
  color: var(--muted);
}

#receivingPreview {
  max-width: 420px;
  border-radius: 8px;
  padding: 12px 14px;
  background: #edf6e9;
  color: var(--dark-green, #05431d);
  text-align: right;
}

.receivingHeaderActions {
  width: min(420px, 100%);
  display: grid;
  justify-items: end;
  gap: 8px;
}

.receivingHeader .receivingHeaderActions small {
  margin: 0;
  color: var(--muted);
  text-align: right;
}

.scanInvoiceButton {
  min-width: 220px;
  border: 1px solid #0c7138;
  background: var(--green);
  color: white;
}

.scanInvoiceButton:hover {
  background: #006b34;
}

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

.invoiceScanPanel {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  border: 1px solid #92b9d9;
  border-left: 5px solid #2477b5;
  border-radius: 11px;
  padding: 14px 16px;
  background: #eef6ff;
  color: #173d61;
}

.invoiceScanPanel[hidden] {
  display: none;
}

.invoiceScanPanel > div:first-child {
  display: grid;
  gap: 4px;
}

.invoiceScanSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.invoiceScanSummary span {
  border: 1px solid #b7cfe3;
  border-radius: 999px;
  padding: 6px 10px;
  background: white;
  color: #173d61;
  font-size: 12px;
}

.invoiceScanWarnings {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 20px;
  color: #8a3f00;
  font-size: 13px;
  line-height: 1.4;
}

.invoiceReviewPage {
  display: grid;
  gap: 18px;
}

.invoiceReviewPage[hidden] {
  display: none;
}

.scannedInvoicePage {
  display: grid;
  gap: 18px;
}

.scannedInvoiceHeading span {
  display: block;
  max-width: 780px;
  color: var(--muted);
}

.scannedInvoiceUploadActions,
.scannedInvoiceControlActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scannedInvoiceEmpty {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 2px dashed #8eb397;
  border-radius: 14px;
  padding: 70px 24px;
  background: #f4faf3;
  text-align: center;
}

.scannedInvoiceEmpty strong {
  font-size: 24px;
}

.scannedInvoiceEmpty span {
  color: var(--muted);
}

.scannedInvoiceEmpty.isLoading {
  border-style: solid;
  background: #eef8ed;
}

.scannedInvoiceEmpty.isLoading::before {
  width: 34px;
  height: 34px;
  border: 4px solid #b9d6bd;
  border-top-color: var(--green);
  border-radius: 50%;
  content: "";
  animation: invoiceUploadSpin .8s linear infinite;
}

@keyframes invoiceUploadSpin {
  to { transform: rotate(360deg); }
}

.scannedInvoiceEditor {
  display: grid;
  grid-template-columns: minmax(330px, 390px) minmax(700px, 1fr);
  gap: 16px;
  align-items: start;
}

.scannedInvoiceEditor[hidden] {
  display: none;
}

.scannedInvoiceControls,
.scannedInvoicePreviewPane {
  min-width: 0;
  border: 2px solid #91ae96;
  border-radius: 13px;
  background: #fff;
}

.scannedInvoiceControls {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 13px;
  max-height: calc(100vh - 95px);
  overflow: auto;
  padding: 15px;
}

.scannedInvoiceControls > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.templateStatus,
.zoneInstructions {
  display: grid;
  gap: 4px;
  border-radius: 9px;
  padding: 11px;
  background: #edf7eb;
  color: #205b35;
  font-size: 12px;
  line-height: 1.4;
}

.supplierIgnoredText {
  display: grid;
  gap: 8px;
  border: 1px solid #a7adb6;
  border-radius: 9px;
  padding: 11px;
  background: #f4f5f7;
}

.supplierIgnoredText label {
  display: grid;
  gap: 5px;
  color: #4b5563;
  font-size: 12px;
  font-weight: 900;
}

.supplierIgnoredText .supplierIgnoredTextToggle {
  display: flex;
  align-items: center;
  gap: 7px;
}

.supplierIgnoredTextToggle input {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--green);
}

.supplierIgnoredText textarea {
  min-height: 82px;
  resize: vertical;
}

.supplierIgnoredText span {
  color: #68717d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.zoneInstructions {
  border: 1px solid #c9b579;
  background: #fff9e7;
  color: #5c4a12;
}

.scannedInvoiceFieldList {
  display: grid;
  gap: 6px;
}

.scannedInvoiceFieldRow {
  display: grid;
  grid-template-columns: 13px minmax(90px, .72fr) minmax(0, 1.2fr) auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #aebfac;
  border-radius: 8px;
  padding: 7px 8px;
  background: #fafcf9;
  font-size: 12px;
}

.scannedInvoiceFieldRow label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #245837;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.scannedInvoiceFieldRow input {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--green);
}

.scannedInvoiceFieldRow i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--zone-color);
}

.scannedInvoiceFieldRow strong,
.scannedInvoiceFieldRow span {
  min-width: 0;
}

.scannedInvoiceFieldRow.ignoreFieldRow {
  border-style: dashed;
  background: #f2f3f5;
}

.scannedInvoiceFieldRow span {
  overflow: hidden;
  color: #58685a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#scannedInvoiceStatus {
  color: #315c3d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.scannedInvoicePreviewHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #a9bda9;
  padding: 12px 14px;
}

.scannedInvoicePageControls {
  display: flex;
  align-items: center;
  gap: 9px;
}

.scannedInvoicePageControls button {
  min-height: 34px;
  padding: 7px 11px;
}

.scannedInvoicePageControls strong {
  min-width: 94px;
  color: #255836;
  font-size: 12px;
  text-align: center;
}

.scannedInvoicePreviewHeader span {
  color: var(--muted);
  font-size: 12px;
}

.scannedInvoiceViewport {
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 16px;
  background: #dce3dc;
}

.scannedInvoiceStage {
  position: relative;
  width: 100%;
  line-height: 0;
  box-shadow: 0 4px 18px rgba(9, 40, 18, .2);
}

#scannedInvoicePreviewImage {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

.scannedInvoiceOverlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.invoiceZone {
  position: absolute;
  min-width: 32px;
  min-height: 24px;
  resize: both;
  overflow: hidden;
  border: 3px solid var(--zone-color);
  border-radius: 6px;
  background: color-mix(in srgb, var(--zone-color) 13%, transparent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .26);
  pointer-events: auto;
  line-height: 1.2;
}

.invoiceZoneHeader {
  display: block;
  overflow: hidden;
  padding: 4px 6px;
  background: var(--zone-color);
  color: #fff;
  cursor: move;
  font-size: 10px;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  white-space: nowrap;
  user-select: none;
}

.invoiceZone.isLocked {
  resize: none;
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, .23);
}

.invoiceZone.isLocked .invoiceZoneHeader {
  cursor: default;
}

.invoiceZone.isTemporarilyHidden {
  opacity: 0;
  pointer-events: none;
}

.invoiceZone[data-invoice-zone^="ignore"] {
  background: repeating-linear-gradient(
    135deg,
    rgba(55, 65, 81, .25) 0,
    rgba(55, 65, 81, .25) 8px,
    rgba(255, 255, 255, .18) 8px,
    rgba(255, 255, 255, .18) 16px
  );
}

@media (max-width: 1100px) {
  .scannedInvoiceEditor {
    grid-template-columns: 1fr;
  }

  .scannedInvoiceControls {
    position: static;
    max-height: none;
  }
}

.receivingCard[hidden] {
  display: none;
}

.invoiceReviewTopbar,
.invoiceReviewActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #91b79b;
  border-radius: 13px;
  padding: 18px 20px;
  background: linear-gradient(120deg, #eef8ed, #f8fbf7);
}

.invoiceReviewTopbar p {
  margin: 0;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.invoiceReviewTopbar h2 {
  margin: 4px 0 5px;
  font-size: clamp(22px, 2.4vw, 34px);
}

.invoiceReviewTopbar span,
.invoiceReviewSectionTitle span,
.ocrMappingBox p,
.invoiceReviewActions span {
  color: var(--muted);
}

.invoiceReviewLayout {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.35fr);
  gap: 18px;
  min-height: 620px;
}

.invoiceDocumentPane,
.invoiceReviewWorkspace,
.invoiceReviewLinesSection {
  min-width: 0;
  border: 1px solid #a8bda9;
  border-radius: 13px;
  padding: 15px;
  background: #fff;
}

.invoiceDocumentPane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.invoiceReviewSectionTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#invoiceReviewImage,
#invoiceReviewPdf {
  width: 100%;
  height: 100%;
  min-height: 560px;
  border: 1px solid #b8c8b8;
  border-radius: 9px;
  background: #f2f4f1;
  object-fit: contain;
}

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

.invoiceHeaderReviewGrid label,
.invoiceReviewLineGrid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.advancedInvoiceCorrection {
  margin-top: 16px;
  border: 1px solid #d0a667;
  border-radius: 10px;
  padding: 12px;
  background: #fffaf1;
}

.advancedInvoiceCorrection > summary {
  cursor: pointer;
  color: #8a4b08;
  font-weight: 900;
}

.advancedInvoiceCorrection > p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.advancedInvoiceCorrection:not([open]) {
  padding-block: 10px;
}

.ocrMappingBox {
  margin-top: 16px;
  border: 1px solid #9fb5c9;
  border-radius: 10px;
  padding: 12px;
  background: #f3f8fd;
}

.lineLayoutTrainer {
  margin-top: 14px;
  border: 2px solid #6d9775;
  border-radius: 10px;
  padding: 12px;
  background: #f4faf3;
}

.lineLayoutTrainer summary {
  cursor: pointer;
  color: #075d2b;
  font-weight: 900;
}

.lineLayoutTrainer > p {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.lineLayoutTrainer > label,
.lineLayoutFields label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.lineLayoutFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.lineLayoutActions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.lineLayoutActions button {
  color: #fff;
  background: #087b38;
}

.lineLayoutActions span {
  color: #285b39;
  font-size: 12px;
  font-weight: 800;
}

.ocrMappingBox summary {
  cursor: pointer;
  color: #194f78;
  font-weight: 900;
}

.ocrMappingBox p {
  margin: 8px 0 10px;
  font-size: 12px;
}

.invoiceOcrMappingList {
  display: grid;
  gap: 7px;
  max-height: 320px;
  overflow: auto;
}

.ocrMappingRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 8px;
  align-items: center;
  border: 1px solid #c5d4e1;
  border-radius: 8px;
  padding: 7px 8px;
  background: #fff;
}

.ocrMappingRow code {
  min-width: 0;
  overflow: hidden;
  color: #263b4c;
  font-family: inherit;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoiceReviewLines {
  display: grid;
  gap: 12px;
}

.invoiceReviewLine {
  border: 1px solid #9eb59f;
  border-left: 5px solid #2477b5;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  overflow-x: auto;
}

.invoiceReviewLine.needsReview {
  border-left-color: #e58a17;
  background: #fffaf2;
}

.invoiceReviewLineHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.invoiceReviewLineHeader > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.invoiceReviewLineHeader button {
  padding: 7px 10px;
}

.invoiceReviewLineGrid {
  display: grid;
  grid-template-columns: 210px 130px 260px repeat(11, minmax(92px, 1fr));
  gap: 9px;
  min-width: 1650px;
  align-items: end;
}

.invoiceReviewLineGrid > label {
  min-width: 0;
}

.invoiceReviewLineGrid input,
.invoiceReviewLineGrid select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  border: 1px solid #a9bea7;
  border-radius: 7px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  line-height: 1.2;
}

.invoiceReviewLineGrid input[type="number"] {
  padding-right: 4px;
  font-variant-numeric: tabular-nums;
}

.invoiceReviewLineGrid select {
  padding-right: 28px;
}

.invoiceReviewLineGrid .reviewProductField,
.invoiceReviewLineGrid .reviewDescriptionField {
  min-width: 180px;
}

.invoiceReviewActions {
  position: sticky;
  bottom: 10px;
  z-index: 5;
  background: rgba(247, 251, 246, .96);
  box-shadow: 0 7px 24px rgba(13, 73, 36, .13);
}

.invoiceReviewActions span {
  margin-right: auto;
  font-weight: 700;
}

.deliveryLine.scanMatched {
  border-left: 5px solid #2477b5;
}

.deliveryLine.scanNeedsReview {
  border-left: 5px solid #e58a17;
  background: #fffaf2;
}

.scanLineTag {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.scanLineTag.matched {
  background: #dceeff;
  color: #155989;
}

.scanLineTag.review {
  background: #ffebca;
  color: #914b00;
}

.receivingGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.receivingGrid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.receivingGrid input,
.receivingGrid select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  background: white;
  color: var(--ink);
}

.receivingGrid .wideField {
  grid-column: span 2;
}

.fieldHint {
  color: var(--green);
  font-size: 12px;
}

.receivingSearchResults {
  max-height: 300px;
  display: grid;
  gap: 6px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px;
  background: #f8fbf6;
  box-shadow: 0 10px 24px rgba(7, 19, 10, 0.1);
}

.receivingSearchResults[hidden] {
  display: none;
}

.receivingSearchResults button {
  min-height: 52px;
  display: grid;
  justify-items: start;
  gap: 3px;
  border: 1px solid var(--line);
  padding: 8px 11px;
  background: white;
  text-align: left;
}

.receivingSearchResults button:hover,
.receivingSearchResults button:focus {
  border-color: var(--green);
  background: #edf8eb;
}

.receivingSearchResults button span,
.noReceivingResults {
  color: var(--muted);
  font-size: 12px;
}

.noReceivingResults {
  padding: 10px;
}

.receivingSubmit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  grid-column: span 2;
}

#receivingStatus {
  color: var(--muted);
}

@media (max-width: 900px) {
  .receivingGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .invoiceDocumentPane {
    min-height: 620px;
  }

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

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

  .invoiceReviewLineGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .invoiceReviewTopbar,
  .invoiceReviewActions {
    align-items: stretch;
    flex-direction: column;
  }

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

  .invoiceHeaderReviewGrid,
  .invoiceReviewLineGrid,
  .ocrMappingRow {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  #invoiceReviewImage,
  #invoiceReviewPdf {
    min-height: 440px;
  }
  .receivingHeader {
    display: grid;
  }

  #receivingPreview {
    text-align: left;
  }

  .receivingHeaderActions {
    justify-items: stretch;
  }

  .receivingHeaderActions small {
    text-align: left;
  }

  .scanInvoiceButton {
    width: 100%;
  }

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

  .receivingGrid .wideField,
  .receivingSubmit {
    grid-column: auto;
  }
}

#searchInput {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: white;
  color: var(--ink);
}

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

.tabs button {
  background: white;
  border: 1px solid var(--line);
}

.tabs button.active {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

.tabs span {
  margin-left: 8px;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(0, 127, 61, 0.1);
}

.tabs button.active span {
  background: rgba(255, 255, 255, 0.2);
}

.productList,
.departmentBody {
  display: grid;
  gap: 12px;
}

.department {
  overflow: hidden;
}

.departmentHeader,
.subcategoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.departmentHeader {
  padding: 16px;
  background: #f8fbf6;
}

.departmentHeader h2,
.subcategoryHeader h3 {
  margin: 0;
}

.departmentHeader span,
.subcategoryHeader span {
  color: var(--green);
  font-weight: 1000;
}

.departmentBody {
  padding: 12px;
}

.subcategory {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fbfdf9;
}

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

.productRow {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 140px 170px 120px 130px 155px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.productRow:hover,
.productRow:focus {
  border-color: #7fbd8c;
  background: #f4fbf2;
  outline: none;
}

.productRow.selectedForReceiving {
  border: 2px solid var(--green);
  background: #edf8eb;
  box-shadow: 0 0 0 3px rgba(0, 127, 61, 0.11);
}

.productRow input {
  cursor: text;
}

.productName {
  display: grid;
  gap: 3px;
}

.productName strong {
  font-size: 17px;
}

.muted,
.salePrice,
.pricingMode {
  color: var(--muted);
}

.loadReceivingHint {
  color: var(--green);
  font-size: 11px;
  font-weight: 1000;
}

.profitPercent {
  justify-self: start;
  border-radius: 999px;
  padding: 8px 10px;
  background: #e4f7e7;
  color: var(--green);
  font-weight: 1000;
  white-space: nowrap;
}

.profitPercent.low {
  background: #fff3d5;
  color: #9b6413;
}

.profitPercent.loss {
  background: #ffe8e0;
  color: #9d2d11;
}

.profitPercent.unknown {
  background: var(--cream);
  color: var(--muted);
}

.costInput,
.saleInput,
.sellByInput {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
}

.sellByField {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 1000;
}

.sellByField span {
  line-height: 1;
}

.saleInput {
  border-color: #b9d8bc;
  background: #fbfffa;
}

.productRow.changed {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(240, 75, 35, 0.1);
}

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

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

  .heroActions {
    width: 100%;
  }

  .heroActions button {
    flex: 1;
  }

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


.productTitleLine {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.multiBuyDeal {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff3d5;
  color: #9b2d10;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

/* Consolidated Stock Control */
.stockShell {
  width: min(1840px, 100%);
  display: grid;
  gap: 20px;
  margin: 0 auto;
  padding: clamp(12px, 1.6vw, 26px);
}

.stockShell button,
.stockShell input,
.stockShell select,
.stockShell textarea,
.stockShell a {
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.stockShell input:focus,
.stockShell select:focus,
.stockShell textarea:focus {
  outline: 0;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 127, 61, 0.11);
}

.stockShell button:focus-visible,
.stockShell a:focus-visible {
  outline: 3px solid rgba(240, 75, 35, 0.28);
  outline-offset: 2px;
}

.stockShell .hero {
  border-radius: 14px;
  padding: clamp(20px, 2.2vw, 34px);
  box-shadow: 0 12px 30px rgba(5, 67, 29, 0.14);
}

.stockShell .receivingCard {
  border-radius: 12px;
  padding: clamp(16px, 1.7vw, 26px);
  box-shadow: 0 8px 28px rgba(7, 19, 10, 0.04);
}

body.locked .stockShell {
  filter: blur(2px);
  pointer-events: none;
}

.buttonLink {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 16px;
  background: white;
  color: var(--ink);
  font-weight: 1000;
  text-decoration: none;
}

.stockTabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.stockTabs button {
  flex: 0 0 auto;
  min-width: 150px;
  border-radius: 0;
  border-right: 1px solid var(--line);
  background: white;
}

.stockTabs button:hover {
  background: #f3f8f0;
}

.stockTabs button.active {
  background: #eaf6e9;
  color: var(--green);
  box-shadow: inset 0 -4px 0 var(--green);
}

.stockTabs span,
.catalogSummary span {
  display: inline-flex;
  min-width: 26px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  margin-left: 7px;
  padding: 2px 7px;
  background: var(--cream);
  font-size: 12px;
}

.locationBar {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(320px, 1.3fr);
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px 18px;
  background: white;
  box-shadow: 0 7px 22px rgba(7, 19, 10, 0.04);
}

.locationBar > div {
  min-width: 0;
}

.locationEyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--green);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.locationBar select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #f9fcf7;
  color: var(--ink);
}

.locationMessage {
  display: grid;
  gap: 4px;
}

.locationMessage strong {
  font-size: 17px;
}

.locationMessage span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.stockPanel {
  display: none;
}

.stockPanel.active {
  display: grid;
  gap: 16px;
}

.sectionCard {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(16px, 1.7vw, 26px);
  background: white;
  box-shadow: 0 8px 28px rgba(7, 19, 10, 0.04);
}

.holidayPricingTab span {
  min-width: 32px;
  background: #fff0e5 !important;
  color: #b54708 !important;
}

.holidayPricingWorkspace {
  border: 2px solid #f1b083;
  background: linear-gradient(180deg, #fffaf5 0, #fff 180px);
}

.holidayCampaignStatus {
  align-self: flex-start;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}

.holidayCampaignStatus.inactive,
.holidayCampaignStatus.ended {
  background: #edf1ed;
  color: #526052;
}

.holidayCampaignStatus.scheduled {
  background: #fff0d7;
  color: #9a5700;
}

.holidayCampaignStatus.active {
  background: #ffe4d6;
  color: #bd3b0b;
  box-shadow: 0 0 0 4px rgba(237, 79, 36, .12);
}

.holidayCampaignStatus.invalid {
  background: #ffe1df;
  color: #b42318;
}

.holidayCampaignNotice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -2px 0 16px;
  padding: 12px 14px;
  border: 1px solid #ed9b64;
  border-left: 6px solid var(--orange);
  border-radius: 10px;
  background: #fff5ed;
  color: #8f3310;
}

.holidayCampaignNotice[hidden] {
  display: none;
}

.holidayCampaignNotice.scheduled {
  border-color: #e3bd72;
  border-left-color: #d88a00;
  background: #fff9e9;
  color: #805300;
}

.holidayCampaignNotice > div {
  display: grid;
  gap: 2px;
}

.holidayCampaignNotice span {
  font-weight: 700;
}

.holidayCampaignNotice button {
  flex: 0 0 auto;
  border-color: currentColor;
  color: inherit;
  background: white;
}

.holidayPricingForm {
  display: grid;
  gap: 14px;
}

.holidayCampaignControls {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid #e7b995;
  border-radius: 12px;
  background: #fff;
}

.holidayCampaignControls label {
  display: grid;
  gap: 6px;
  color: #4f5f4d;
  font-weight: 800;
}

.holidayCampaignControls input,
.holidayCampaignControls select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.holidayCampaignControls small {
  color: var(--muted);
}

.holidayCampaignControls .holidayAuthorisation {
  grid-column: span 2;
  padding: 12px;
  border: 1px solid #e6a276;
  border-radius: 9px;
  background: #fff6ef;
  color: #8f3310;
}

.holidayCampaignControls .holidayAuthorisation input.requiredMissing {
  border: 2px solid #c9251c;
  background: #fff1f0;
  box-shadow: 0 0 0 3px rgba(201, 37, 28, .1);
}

.holidayMasterSwitch {
  display: flex !important;
  min-height: 42px;
  align-items: center;
  padding: 8px 12px;
  border: 2px solid var(--orange);
  border-radius: 9px;
  background: #fff4ec;
  color: #a7350d !important;
}

.holidayMasterSwitch input,
.holidayCampaignControls .checkLabel input {
  width: auto;
  min-height: auto;
}

.holidayCampaignExplanation {
  display: flex;
  gap: 8px;
  flex-direction: column;
  padding: 14px 16px;
  border-left: 5px solid var(--orange);
  border-radius: 8px;
  background: #fff4ec;
}

.holidayCampaignExplanation span {
  color: var(--muted);
  font-weight: 700;
}

.holidayCampaignActions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.holidayCampaignActions span {
  color: var(--muted);
  font-weight: 700;
}

.holidayPreviewSection,
.holidayHistorySection {
  margin-top: 20px;
}

.holidayPreviewTable {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: #fff;
}

.holidayPreviewHeader,
.holidayPreviewRow {
  display: grid;
  grid-template-columns: minmax(230px, 1.6fr) repeat(4, minmax(100px, .7fr)) minmax(180px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
}

.holidayPreviewHeader {
  background: #f2f7f0;
  color: #315338;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.holidayPreviewRow {
  border-top: 1px solid var(--line);
}

.holidayPreviewRow > span:first-child {
  display: flex;
  flex-direction: column;
}

.holidayPreviewRow small {
  color: var(--muted);
  font-weight: 700;
}

.holidayPreviewRow.changed {
  box-shadow: inset 4px 0 0 var(--orange);
}

.holidayPreviewRow.protected {
  background: #f8f9f7;
}

.holidayResult {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.holidayResult.changed {
  background: #ffeadc;
  color: #ad3f13;
}

.holidayResult.protected {
  background: #edf1ed;
  color: #5d675c;
}

@media (max-width: 1050px) {
  .holidayCampaignControls {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }

  .holidayPreviewTable {
    overflow-x: auto;
  }

  .holidayPreviewHeader,
  .holidayPreviewRow {
    min-width: 950px;
  }
}

@media (max-width: 640px) {
  .holidayCampaignControls {
    grid-template-columns: 1fr;
  }

  .holidayCampaignControls .holidayAuthorisation {
    grid-column: auto;
  }

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

.sectionTitle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.sectionTitle h2,
.sectionTitle h3,
.sectionTitle p {
  margin: 0;
}

.sectionTitle p {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sectionTitle h2 {
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: 1.05;
}

.sectionTitle span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.4;
}

.deliveryHeaderGrid,
.lineGrid,
.formGrid {
  display: grid;
  gap: 12px;
}

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

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

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

.deliveryHeaderGrid label,
.lineGrid label,
.formGrid label {
  display: grid;
  align-content: start;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.formGrid label > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.stockRuleGuidance {
  border: 1px solid #a9d5ae;
  border-radius: 9px;
  padding: 12px 14px;
  background: #eef8ed;
  color: #175a2d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.stockRuleGuidance.warn {
  border-color: #efb25b;
  background: #fff5e6;
  color: #8a4600;
}

.stockRuleGuidance.bad {
  border-color: #e49a96;
  background: #fff0ef;
  color: #9a231d;
}

.deliveryHeaderGrid input,
.deliveryHeaderGrid select,
.deliveryHeaderGrid textarea,
.lineGrid input,
.lineGrid select,
.formGrid input,
.formGrid select,
.formGrid textarea,
.stockToolbar input,
.stockToolbar select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  background: white;
  color: var(--ink);
}

.deliveryHeaderGrid textarea {
  min-height: 84px;
  resize: vertical;
}

.formGrid textarea {
  min-height: 96px;
  resize: vertical;
}

.deliveryLinesHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 10px;
}

.receivingHeader small {
  display: block;
  margin-top: 8px;
  color: #dff4dd;
  line-height: 1.35;
}

.deliveryLinesHeader h3,
.deliveryLinesHeader p {
  margin: 0;
}

.deliveryLinesHeader h3 {
  font-size: 22px;
}

.deliveryLinesHeader p {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.deliveryLines {
  display: grid;
  gap: 14px;
}

.deliveryLine {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: clamp(14px, 1.4vw, 20px);
  background: #fbfdf9;
}

.deliveryLineHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.deliveryLineHeader strong {
  display: block;
  margin-top: 2px;
  color: var(--green);
  font-size: 20px;
}

.deliveryLineHeader span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deliveryLineHeader button {
  min-height: 36px;
  background: #fff0ed;
  color: #a5260c;
}

.lineGrid .productField {
  grid-column: span 2;
}

.lineGrid .descriptionField {
  grid-column: span 2;
}

.lineCheck {
  margin: 10px 0 0;
  color: #a45c06;
  font-size: 13px;
}

.lineCheck.ok {
  color: var(--green);
}

.lineCheck.warn {
  color: #a5260c;
}

.deliveryActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.deliveryActions > span {
  flex: 1 1 280px;
  color: var(--muted);
}

.stockToolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.stockToolbar input {
  flex: 1 1 300px;
}

.stockToolbar select {
  min-width: 190px;
}

.sectionCard > .toolbar > input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: white;
}

.summaryCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.summaryCards > article {
  border: 1px solid #e2eadf;
  border-radius: 9px;
  padding: 16px;
  background: var(--paper);
}

.summaryCards > article.provisionalCard {
  border-color: #efb7af;
  background: #fff2f0;
}

.summaryCards > article.expirySummaryWarning {
  border-color: #f1b75c;
  background: #fff7e6;
}

.summaryCards > article.expirySummaryExpired {
  border-color: #ef9f9b;
  background: #fff0ef;
}

.summaryCards span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.summaryCards strong {
  display: block;
  margin-top: 5px;
  font-size: 26px;
}

.historyList,
.reviewList {
  display: grid;
  gap: 10px;
}

.stockReviewDepartment,
.stockReviewDepartmentRows,
.stockReviewSubcategory,
.stockReviewSubcategoryRows {
  display: grid;
}

.stockReviewDepartment + .stockReviewDepartment {
  margin-top: 24px;
}

.stockReviewDepartmentHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 2px solid #168444;
  border-bottom: 1px solid #bad4bc;
  border-radius: 10px 10px 0 0;
  padding: 13px 16px;
  background: linear-gradient(90deg, #eaf5e7, #f7fbf5);
  color: #0b5f30;
}

.stockReviewDepartmentHeader > div {
  display: grid;
  gap: 2px;
}

.stockReviewDepartmentHeader small {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  font-weight: 1000;
}

.stockReviewDepartmentHeader h3,
.stockReviewSubcategoryHeader h4 {
  margin: 0;
}

.stockReviewDepartmentHeader h3 {
  font-size: 22px;
}

.stockReviewDepartmentHeader > span,
.stockReviewSubcategoryHeader > span {
  border-radius: 999px;
  padding: 5px 9px;
  background: white;
  color: #4f6654;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

.stockReviewDepartmentRows {
  gap: 16px;
  padding-top: 12px;
}

.stockReviewSubcategoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-left: 5px solid #2b9550;
  border-bottom: 1px solid #cfddca;
  padding: 10px 14px;
  background: #f3f8f0;
  color: #174d28;
}

.stockReviewSubcategoryHeader h4 {
  font-size: 17px;
}

.stockReviewSubcategoryRows {
  gap: 10px;
  padding-top: 10px;
}

.historyRow,
.reviewRow,
.priceHeader,
.priceRow {
  display: grid;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #fbfdf9;
}

.historyRow {
  grid-template-columns: minmax(240px, 1.7fr) repeat(3, minmax(120px, 0.7fr)) auto;
}

.reviewRow {
  grid-template-columns: minmax(260px, 1.7fr) repeat(3, minmax(170px, 1fr)) auto;
}

.reviewRow.stockReviewRow {
  grid-template-columns: minmax(240px, 1.55fr) repeat(4, minmax(150px, 1fr)) auto;
}

.stockReviewExpiry {
  border-left: 3px solid #a9c7a9;
  padding-left: 10px;
}

.stockReviewExpiry.expiryExpired b,
.stockReviewExpiry.expiryUrgent b {
  color: #bd2821;
}

.stockReviewExpiry.expiryWarning b {
  color: #c45d00;
}

.stockReviewExpiry.expiryWatch b {
  color: #806600;
}

.stockReviewExpiry.expiryMissing b {
  color: #8b342f;
}

.priceHeader,
.priceRow {
  grid-template-columns: minmax(260px, 2fr) repeat(5, minmax(110px, 1fr));
}

.priceHeader {
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
}

.priceRow.dealReviewRow {
  border-color: #ffd0c2;
  background: #fff7f3;
}

.priceRow.dealReviewRow .rowPrimary strong {
  color: var(--orange);
}

.shortDatedPrintTitle {
  display: none;
}

.productSpreadsheetPreview[hidden] {
  display: none;
}

body.showingProductSpreadsheetPreview {
  overflow: hidden;
}

.productSpreadsheetPreview {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: auto;
  padding: 20px;
  background: rgba(7, 19, 10, 0.78);
}

.productSpreadsheetPreviewCard {
  width: min(1500px, 100%);
  min-height: calc(100vh - 40px);
  margin: 0 auto;
  border-radius: 14px;
  background: #eef3eb;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.productSpreadsheetPreviewHeader {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 2px solid var(--line);
  border-radius: 14px 14px 0 0;
  padding: 18px 20px;
  background: white;
}

.productSpreadsheetPreviewHeader p,
.productSpreadsheetPreviewHeader h2 {
  margin: 0;
}

.productSpreadsheetPreviewHeader p {
  margin-bottom: 4px;
  color: var(--green);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.productSpreadsheetPreviewHeader span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.productSpreadsheetPreviewActions {
  display: flex;
  gap: 10px;
}

.productSpreadsheetPrint {
  display: grid;
  gap: 24px;
  padding: 22px;
}

.productSpreadsheetPrintPage {
  overflow-x: auto;
  border: 1px solid #aeb9aa;
  border-radius: 8px;
  padding: 12px;
  background: white;
  box-shadow: 0 5px 18px rgba(7, 19, 10, .09);
}

.productSpreadsheetPrint table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #000;
  font: 700 9px/1.1 Arial, Helvetica, sans-serif;
}

.productSpreadsheetPrint th,
.productSpreadsheetPrint td {
  height: 32px;
  border: 1px solid #777;
  padding: 3px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  word-break: keep-all;
  hyphens: none;
}

.productSpreadsheetPrint th.compact,
.productSpreadsheetPrint td.compact {
  font-size: 7.5px !important;
}

.productSpreadsheetPrint th.veryCompact,
.productSpreadsheetPrint td.veryCompact {
  font-size: 6.5px !important;
}

.productSpreadsheetPrint th.ultraCompact,
.productSpreadsheetPrint td.ultraCompact {
  font-size: 5.5px !important;
}

.productSpreadsheetPrint thead tr:first-child th {
  height: 26px;
  background: #d9ead3;
  text-align: center;
}

.productSpreadsheetPrint thead tr:nth-child(2) th {
  height: 30px;
  background: #eef5eb;
  font-size: 8px;
  text-align: center;
}

.productSpreadsheetPrint tbody td:first-child {
  background: #f0f0f0;
}

.expirySettingsBar {
  display: grid;
  grid-template-columns: minmax(230px, 1.3fr) repeat(3, minmax(165px, 0.7fr)) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px;
  background: #fbfdf9;
}

.expirySettingsBar > div,
.expirySettingsBar label {
  display: grid;
  gap: 5px;
}

.expirySettingsBar > div span,
.expirySettingsBar > span,
.expirySettingsBar label {
  color: var(--muted);
  font-size: 12px;
}

.expirySettingsBar label {
  grid-template-columns: auto minmax(58px, 1fr) auto;
  align-items: center;
  border-radius: 8px;
  padding: 7px 9px;
  font-weight: 900;
}

.expirySettingsBar input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  background: white;
  color: var(--ink);
  font-weight: 900;
}

.expirySettingsBar .expiryRedSetting {
  background: #fff0ef;
  color: #a5241d;
}

.expirySettingsBar .expiryOrangeSetting {
  background: #fff5e9;
  color: #a34c00;
}

.expirySettingsBar .expiryYellowSetting {
  background: #fffbea;
  color: #796000;
}

.expirySettingsBar > span {
  grid-column: 1 / -1;
}

.shortDatedRow {
  border-left-width: 6px;
}

.shortDatedRow.expiryExpired,
.shortDatedRow.expiryUrgent {
  border-color: #e9483f;
  background: #fff0ef;
}

.shortDatedRow.expiryWarning {
  border-color: #ef8b2c;
  background: #fff5e9;
}

.shortDatedRow.expiryWatch {
  border-color: #e1b826;
  background: #fffbea;
}

.expiryBadge {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff;
  color: #a5241d !important;
  font-weight: 900 !important;
}

.historyRow button,
.reviewRow button {
  min-height: 36px;
}

.rowActions {
  display: grid;
  gap: 7px;
}

.rowPrimary,
.rowCell,
.catalogProductMain {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.rowPrimary strong,
.catalogProductMain strong {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.rowPrimary span,
.rowCell > span:not(.rowLabel),
.catalogProductMain > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rowLabel {
  display: block;
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.priceRow .rowLabel {
  display: none;
}

.status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--cream);
  color: var(--green);
  font-size: 12px;
}

.status.draft,
.status.needs_review {
  background: #fff2d8;
  color: #945500;
}

.good {
  color: #16843c;
}

.bad {
  color: #c5281c;
}

.needsReview {
  border-color: #eadfbd;
  background: #fffdf7;
}

.unverifiedStock {
  border-color: #efb7af;
  background: #fff8f7;
}

.provisionalQuantity {
  color: #c5281c;
}

.verificationBadge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  margin-top: 3px;
  padding: 5px 8px;
  font-size: 10px;
  line-height: 1;
}

.verificationBadge.unverified,
.catalogStatus.unverified {
  background: #ffe2de;
  color: #b42318;
}

.verificationBadge.verified {
  background: #e3f5e3;
  color: var(--green);
}

.reviewRow .verifyButton {
  background: #c52b1f;
  color: white;
}

.stocktakeEditor {
  display: grid;
  grid-template-columns: minmax(240px, 1.3fr) repeat(3, minmax(160px, 0.8fr)) auto;
  align-items: end;
  gap: 14px;
  margin: 0 0 16px;
  border: 2px solid var(--orange);
  border-radius: 11px;
  padding: 16px;
  background: #fffaf7;
}

@media print {
  @page {
    size: A4 landscape;
    margin: 8mm;
  }

  body.printingShortDated {
    background: white;
  }

  body.printingShortDated .hero,
  body.printingShortDated .stockTabs,
  body.printingShortDated .stockPanel,
  body.printingShortDated #stockSummary,
  body.printingShortDated .expirySettingsBar,
  body.printingShortDated .stockToolbar,
  body.printingShortDated .stocktakeEditor,
  body.printingShortDated .sectionTitle {
    display: none !important;
  }

  body.printingShortDated [data-stock-panel="review"] {
    display: block !important;
  }

  body.printingShortDated .shortDatedPrintTitle {
    display: block;
    margin-bottom: 18px;
  }

  body.printingShortDated .shortDatedPrintTitle h1,
  body.printingShortDated .shortDatedPrintTitle p {
    margin: 0 0 4px;
  }

  body.printingShortDated .sectionCard {
    border: 0;
    padding: 0;
    box-shadow: none;
  }

  body.printingShortDated .reviewRow {
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr));
    break-inside: avoid;
  }

  body.printingShortDated .reviewRow button {
    display: none;
  }

  body.printingProductSpreadsheet {
    background: white;
  }

  body.printingProductSpreadsheet .loginScreen,
  body.printingProductSpreadsheet .hero,
  body.printingProductSpreadsheet .stockTabs,
  body.printingProductSpreadsheet .stockPanel {
    display: none !important;
  }

  body.printingProductSpreadsheet .productSpreadsheetPreviewHeader {
    display: none !important;
  }

  body.printingProductSpreadsheet .costShell {
    display: block;
    padding: 0;
  }

  body.printingProductSpreadsheet .productSpreadsheetPreview {
    position: static;
    display: block;
    overflow: visible;
    padding: 0;
    background: white;
  }

  body.printingProductSpreadsheet .productSpreadsheetPreviewCard {
    width: 100%;
    min-height: 0;
    border-radius: 0;
    background: white;
    box-shadow: none;
  }

  body.printingProductSpreadsheet .productSpreadsheetPrint {
    display: block;
    padding: 0;
  }

  .productSpreadsheetPrintPage {
    overflow: visible;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }

  .productSpreadsheetPrintPage:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .productSpreadsheetPrint table {
    min-width: 0;
    font: 700 5.2pt/1.08 Arial, Helvetica, sans-serif;
  }

  .productSpreadsheetPrint th,
  .productSpreadsheetPrint td {
    height: 7.2mm;
    padding: .65mm;
  }

  .productSpreadsheetPrint th.compact,
  .productSpreadsheetPrint td.compact {
    font-size: 4.4pt !important;
  }

  .productSpreadsheetPrint th.veryCompact,
  .productSpreadsheetPrint td.veryCompact {
    font-size: 3.7pt !important;
  }

  .productSpreadsheetPrint th.ultraCompact,
  .productSpreadsheetPrint td.ultraCompact {
    font-size: 3.2pt !important;
  }

  .productSpreadsheetPrint thead tr:first-child th {
    height: 5.5mm;
    background: #d9ead3;
    font-size: 5.4pt;
    text-align: center;
  }

  .productSpreadsheetPrint thead tr:nth-child(2) th {
    height: 6.5mm;
    background: #eef5eb;
    font-size: 4.8pt;
    text-align: center;
  }

  .productSpreadsheetPrint tbody td:first-child {
    background: #f0f0f0;
  }
}

@media (max-width: 1100px) {
  .expirySettingsBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expirySettingsBar > div,
  .expirySettingsBar > span {
    grid-column: 1 / -1;
  }
}

.stocktakeEditor[hidden] {
  display: none;
}

.stocktakeEditor p,
.stocktakeEditor h3 {
  margin: 0;
}

.stocktakeEditor p {
  margin-bottom: 3px;
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stocktakeEditor > div > span,
.stocktakeEditor > span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.stocktakeEditor label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.stocktakeEditor input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  background: white;
  color: var(--ink);
}

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

.stocktakeEditor > span {
  grid-column: 1 / -1;
}

.provisionalNotice {
  border-color: #efb7af !important;
  background: #fff2f0 !important;
  color: #8e241b !important;
}

.statusBadge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--cream);
  color: var(--green);
  font-size: 12px;
}

.statusBadge.warn {
  background: #fff1d5;
  color: #9b5700;
}

.catalogLayout {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(580px, 1.5fr);
  gap: 16px;
  align-items: start;
}

.catalogSummary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.catalogSummary span {
  margin-left: 0;
}

.catalogSummary button {
  min-height: 38px;
}

.catalogSummary button.active {
  background: var(--green);
  color: white;
}

.catalogViewLabel {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.catalogViewLabel select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  background: white;
  color: var(--ink);
  font: inherit;
}

.catalogList {
  display: grid;
  gap: 8px;
  max-height: 1400px;
  overflow: auto;
}

.catalogPagination {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.catalogPagination span {
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.catalogPagination button {
  min-height: 40px;
  padding: 8px 12px;
}

.catalogLifecycleBox {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #f8fbf6;
}

.catalogLifecycleBox > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

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

.catalogLifecycleHeader small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catalogLifecycleHeader h3 {
  margin: 0;
  font-size: 18px;
}

.catalogLifecycleHeader > span {
  display: inline-grid;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  border-radius: 999px;
  background: #e7f1e3;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.catalogLifecycleList {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}

.catalogLifecycleList .catalogItem {
  min-height: 66px;
}

.draftProductsBox {
  border-color: #e8c987;
  background: #fffaf0;
}

.draftProductsBox .catalogLifecycleHeader > span,
.catalogItem.draft .catalogStatus {
  background: #fff1d8;
  color: #8c5100;
}

.archivedProductsBox {
  border-color: #ccd2cf;
  background: #f4f6f5;
}

.archivedProductsBox .catalogLifecycleHeader > span,
.catalogItem.archived .catalogStatus {
  background: #e6e9e7;
  color: #4f5b55;
}

.catalogItem.archived {
  background: #fafbfa;
}

.catalogItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: white;
  text-align: left;
}

.catalogItem:hover {
  border-color: #a9c9aa;
  background: #f8fcf6;
}

.catalogItem.active {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(0, 127, 61, 0.12);
}

.catalogSummary .queueSummaryReview {
  background: #fee4e2;
  color: #b42318;
}

.catalogSummary .queueSummaryReady {
  background: #fff1d8;
  color: #8c5100;
}

.catalogStatus {
  justify-self: end;
  border-radius: 999px;
  padding: 6px 9px;
  background: #fff1d8;
  color: #8c5100;
  font-size: 11px;
  white-space: nowrap;
}

.catalogItem.needsReview .catalogStatus {
  background: #fee4e2;
  color: #b42318;
}

.catalogItem.ready .catalogStatus {
  background: #fff1d8;
  color: #8c5100;
}

.catalogItem.complete .catalogStatus,
.catalogItem.published .catalogStatus {
  background: #e7f5e5;
  color: var(--green);
}

.websiteLiveNote {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: #e7f5e5;
  color: var(--green);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.productReviewToolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(170px, 0.7fr));
  gap: 10px;
  margin-bottom: 14px;
}

.productReviewToolbar > input,
.productReviewToolbar select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  background: white;
  color: var(--ink);
}

.productReviewToolbar label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

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

.productReviewRow {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(150px, 0.7fr) repeat(3, minmax(105px, 0.55fr)) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: white;
}

.productReviewStatus {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

.reviewStatusTag,
.websitePublishedTag {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 1000;
  white-space: nowrap;
}

.reviewStatusTag.needs_review,
.reviewStatusTag.needsReview {
  background: #fee4e2;
  color: #b42318;
}

.reviewStatusTag.ready_to_publish,
.reviewStatusTag.ready {
  background: #fff1d8;
  color: #8c5100;
}

.reviewStatusTag.published,
.websitePublishedTag {
  background: #e7f5e5;
  color: var(--green);
}

.masterCutForm {
  margin: 18px 0 28px;
  padding: 20px;
  border: 1px solid #cfe1c9;
  border-radius: 16px;
  background: #f8fbf6;
}

.masterCutNotice {
  display: grid;
  gap: 5px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-left: 5px solid #ed4f24;
  border-radius: 10px;
  background: #fff5ef;
}

.masterCutNotice strong {
  font-size: 16px;
}

.masterCutNotice span {
  color: #5e6c59;
  font-weight: 700;
  line-height: 1.4;
}

.nestedFormGrid {
  margin-top: 2px;
  padding: 16px;
  border: 1px solid #cfe1c9;
  border-radius: 12px;
  background: #f0f7ed;
}

.compactSectionTitle {
  margin-top: 18px;
}

.masterPluTag,
.linkedPluTag {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.masterPluTag {
  background: #e0f2e2;
  color: #066f2c;
}

.linkedPluTag {
  background: #fff0df;
  color: #9a4a00;
}

.masterStockRow {
  border-left: 5px solid #07863d;
}

.linkedStockRow {
  border-left: 5px solid #ed8a22;
}

.cuttingRecordRow {
  grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(135px, 0.8fr));
}

#masterLinkFields[hidden] {
  display: none;
}

#productVisibility:disabled,
#productTrackingEnabled:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.catalogItem.stocktakeRequired {
  border-color: #efb7af;
  background: #fff8f7;
}

.productEditor {
  position: static;
  top: auto;
  filter: none;
  transform: none;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
}

.productEditor fieldset {
  min-width: 0;
  margin: 0 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: clamp(14px, 1.4vw, 20px);
  background: #fff;
  box-shadow: 0 2px 7px rgba(7, 19, 10, 0.035);
}

.productEditor .formGrid input,
.productEditor .formGrid select,
.productEditor .formGrid textarea {
  border-color: var(--line-strong);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.productEditor .formGrid label {
  color: #465743;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.productEditor .formGrid label > small,
.productEditor .dealBoxSummary,
.productEditor .formNotice {
  font-weight: 700;
}

.productEditor legend {
  padding: 0 8px;
  color: var(--green);
  font-weight: 700;
}

.productEditor legend small {
  color: var(--muted);
}

.linkedMasterStockSummary {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(360px, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 2px solid #71b27d;
  border-radius: 11px;
  background: #f0f9ef;
}

.linkedMasterStockSummary[hidden] {
  display: none;
}

.linkedMasterStockSummary p {
  margin: 0 0 3px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.linkedMasterStockSummary h3,
.linkedMasterStockSummary span {
  margin: 0;
}

.linkedMasterStockSummary > div:first-child > span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-weight: 700;
}

.linkedMasterFacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 8px;
}

.linkedMasterFacts > span {
  display: flex;
  min-height: 58px;
  flex-direction: column;
  justify-content: center;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
}

.linkedMasterFacts small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.linkedMasterFacts b {
  margin-top: 3px;
  color: var(--ink);
}

@media (max-width: 1100px) {
  .linkedMasterStockSummary {
    grid-template-columns: 1fr;
  }
}

.productEditor .requiredFieldMissing {
  color: #b42318;
}

.productEditor input.requiredMissing,
.productEditor select.requiredMissing,
.productEditor textarea.requiredMissing {
  border: 2px solid #d92d20;
  background: #fff1f0;
  box-shadow: inset 5px 0 0 #d92d20;
}

.productEditor input.requiredMissing:focus,
.productEditor select.requiredMissing:focus,
.productEditor textarea.requiredMissing:focus {
  border-color: #b42318;
  outline: 3px solid rgba(217, 45, 32, 0.16);
}

.formGrid .fullField {
  grid-column: 1 / -1;
}

.checkLabel {
  display: flex !important;
  min-height: 44px;
  align-items: center;
  gap: 9px !important;
}

.checkLabel input {
  width: 20px;
  min-height: 20px;
}

.optionSetting {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfdf9;
}

.optionSetting .checkLabel {
  min-height: 30px;
  color: var(--ink);
}

.optionSetting p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.optionSetting:has(.checkLabel input:not(:checked)) > label:not(.checkLabel) {
  opacity: 0.55;
}

.dealBoxEditor {
  border-color: #f1c38b !important;
  background: #fffdf8 !important;
}

.dealBoxToggle {
  min-height: 48px;
  border-radius: 9px;
  padding: 10px 12px;
  background: #fff3df;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 1000;
}

.dealBoxEditor:has(#productDealEnabled:not(:checked)) .formGrid > label:not(.dealBoxToggle),
.dealBoxEditor:has(#productDealEnabled:not(:checked)) .dealBoxSummary {
  opacity: 0.58;
}

.dealBoxSummary {
  border-radius: 8px;
  padding: 11px 12px;
  background: #f5f8f2;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.catalogDealBox {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff0d8;
  color: #9b2d10 !important;
  font-size: 11px !important;
  font-weight: 1000;
}

.formNotice {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  border-radius: 8px;
  padding: 13px 14px;
  background: #edf5ff;
  color: #244d73;
  font-size: 13px;
}

.formNotice strong,
.formNotice span {
  display: block;
}

#productSearch {
  width: 100%;
  min-height: 46px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: white;
}

@media (max-width: 1400px) {
  .lineGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lineGrid .productField,
  .lineGrid .descriptionField {
    grid-column: span 2;
  }
}

@media (max-width: 1200px) {
  .catalogLayout {
    grid-template-columns: 1fr;
  }

  .catalogList {
    max-height: 760px;
  }

  .productEditor {
    position: static;
  }

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

  .productReviewRow {
    grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(130px, 0.7fr));
  }
}

@media (max-width: 900px) {
  .stockShell {
    padding: 9px;
  }

  .deliveryHeaderGrid,
  .formGrid,
  .summaryCards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .historyRow,
  .reviewRow,
  .priceHeader,
  .priceRow,
  .productReviewRow {
    grid-template-columns: 1fr 1fr;
  }

  .locationBar,
  .stocktakeEditor {
    grid-template-columns: 1fr 1fr;
  }

  .stocktakeEditor > div,
  .stocktakeEditor > span {
    grid-column: 1 / -1;
  }

  .priceHeader {
    display: none;
  }

  .priceRow .rowLabel {
    display: block;
  }

  .historyRow button {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .catalogList {
    max-height: 60vh;
  }

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

  .expirySettingsBar > div,
  .expirySettingsBar > span {
    grid-column: auto;
  }

  .stockReviewDepartmentHeader,
  .stockReviewSubcategoryHeader {
    align-items: flex-start;
  }

  .deliveryHeaderGrid,
  .lineGrid,
  .formGrid,
  .summaryCards,
  .historyRow,
  .reviewRow,
  .priceRow {
    grid-template-columns: 1fr;
  }

  .productReviewToolbar,
  .productReviewRow {
    grid-template-columns: 1fr;
  }

  .locationBar,
  .stocktakeEditor {
    grid-template-columns: 1fr;
  }

  .stocktakeActions {
    display: grid;
  }

  .lineGrid .productField,
  .lineGrid .descriptionField,
  .formGrid .fullField {
    grid-column: auto;
  }

  .sectionTitle,
  .deliveryLinesHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .sectionTitle > button,
  .deliveryLinesHeader > button {
    width: 100%;
  }

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

  .catalogStatus {
    justify-self: start;
  }

  .productReviewActions,
  .productReviewActions button {
    width: 100%;
  }

  .sectionCard {
    padding: 12px;
  }
}

/* Product Review combines the former Product Review and Price Review pages. */
.stockTabs {
  border: 0;
  border-radius: 0;
  background: linear-gradient(105deg, #075329, #006f36 68%, #064d27);
  box-shadow: 0 5px 16px rgba(4, 58, 28, 0.14);
}

.stockTabs button {
  min-width: 190px;
  border-right: 0;
  background: transparent;
  color: white;
}

.stockTabs button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.stockTabs button.active {
  background: transparent;
  color: white;
  box-shadow: inset 0 -4px 0 #a6ed9d;
}

.stockTabs span {
  min-width: 27px;
  min-height: 25px;
  background: #eaf6e9;
  color: #174d28;
}

.mergedProductReview {
  overflow-x: auto;
}

.mergedProductReview > .sectionTitle {
  margin-bottom: 22px;
}

.mergedProductReview > .sectionTitle p {
  color: #0b6634;
}

.mergedProductReview > .sectionTitle h2 {
  font-size: clamp(34px, 3vw, 46px);
}

.productReviewSummary {
  min-width: 1360px;
  display: grid;
  grid-template-columns: minmax(610px, 1fr) 1px minmax(650px, 1fr);
  align-items: stretch;
  gap: 24px;
  margin-bottom: 24px;
}

.workflowSummaryGroup,
.pricingSummaryGroup {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.summaryDivider {
  width: 1px;
  height: 72px;
  align-self: center;
  background: #dce5d9;
}

.productReviewSummaryCard {
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px auto minmax(max-content, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #a7c9a5;
  border-radius: 10px;
  padding: 12px 16px;
  background: #f8fbf6;
  color: var(--ink);
  text-align: left;
}

.productReviewSummaryCard:hover {
  border-color: var(--green);
  background: #f0f8ed;
}

.productReviewSummaryCard .summaryIcon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #2c9648;
  color: white;
  font-size: 22px;
  font-weight: 1000;
}

.productReviewSummaryCard strong {
  color: #197437;
  font-size: 26px;
  line-height: 1;
}

.productReviewSummaryCard > span:last-child {
  font-size: 14px;
  white-space: nowrap;
}

.productReviewSummaryCard.pricingAlert {
  border-color: #f3ad76;
  background: #fffaf6;
}

.productReviewSummaryCard.pricingAlert:hover {
  border-color: #ea6b19;
  background: #fff5ed;
}

.productReviewSummaryCard.pricingAlert .summaryIcon {
  background: #df6812;
}

.productReviewSummaryCard.pricingAlert strong {
  color: #d65b0e;
}

.productReviewToolbar {
  min-width: 1360px;
  grid-template-columns: minmax(420px, 1.8fr) repeat(4, minmax(180px, 0.78fr));
  gap: 14px;
  margin-bottom: 24px;
  border: 1px solid #d6e0e3;
  border-radius: 10px;
  padding: 14px;
  background: #fcfdfd;
}

.productReviewToolbar > input,
.productReviewToolbar > select {
  width: 100%;
  min-height: 50px;
  border: 1px solid #ccd8dc;
  border-radius: 7px;
  padding: 0 14px;
  background: white;
  color: #1d2730;
}

.productReviewTable {
  border: 1px solid #ccd9c9;
  border-radius: 10px;
  background: white;
}

.productReviewTableHeader,
.productReviewRow {
  min-width: 1360px;
  display: grid;
  grid-template-columns: minmax(250px, 2.1fr) minmax(135px, 1fr) minmax(88px, 0.65fr) repeat(3, minmax(96px, 0.72fr)) repeat(2, minmax(105px, 0.8fr)) minmax(125px, 0.92fr) minmax(220px, 1.25fr);
  align-items: center;
  gap: 12px;
}

.productReviewTableHeader {
  position: sticky;
  top: 0;
  z-index: 4;
  border: 0;
  border-bottom: 1px solid #ccd9c9;
  border-radius: 0;
  padding: 14px 18px;
  background: linear-gradient(90deg, #f2f7ef, #f8fbf6);
  color: #174d28;
  font-size: 12px;
  font-weight: 1000;
}

.productReviewList {
  min-width: 1360px;
  gap: 0;
}

.productReviewDepartment,
.productReviewDepartmentRows,
.productReviewSubcategory,
.productReviewSubcategoryRows {
  min-width: 1360px;
  display: grid;
}

.productReviewDepartment + .productReviewDepartment {
  margin-top: 26px;
}

.productReviewDepartmentHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 2px solid #168444;
  border-bottom: 1px solid #bad4bc;
  padding: 13px 18px;
  background: linear-gradient(90deg, #eaf5e7, #f7fbf5);
  color: #0b5f30;
}

.productReviewDepartmentHeader > div {
  display: grid;
  gap: 2px;
}

.productReviewDepartmentHeader small {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  font-weight: 1000;
}

.productReviewDepartmentHeader h3 {
  margin: 0;
  font-size: 22px;
}

.productReviewDepartmentHeader > span {
  border-radius: 999px;
  padding: 6px 10px;
  background: #dff0de;
  font-weight: 1000;
  white-space: nowrap;
}

.productReviewDepartmentRows {
  gap: 16px;
  padding-top: 12px;
}

.productReviewSubcategoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-left: 5px solid #2b9550;
  border-bottom: 1px solid #cfddca;
  padding: 10px 18px;
  background: #f3f8f0;
  color: #174d28;
}

.productReviewSubcategoryHeader h4 {
  margin: 0;
  font-size: 17px;
}

.productReviewSubcategoryHeader > span {
  border-radius: 999px;
  padding: 5px 9px;
  background: white;
  color: #4f6654;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

.productReviewProductGroup {
  min-width: 1360px;
  display: grid;
  gap: 0;
}

.productReviewProductGroup + .productReviewProductGroup {
  margin-top: 10px;
}

.productReviewProductGroup + .productReviewProductGroup .productReviewMainRow {
  border-top: 1px solid #d9e3d5;
}

.productReviewRow {
  min-height: 72px;
  border: 1px solid #d9e3d5;
  border-right: 0;
  border-left: 0;
  border-top: 0;
  border-radius: 0;
  padding: 12px 18px;
  background: white;
}

.productReviewRow:hover {
  background: #fbfdf9;
}

.productReviewDealRow {
  border-color: #ffd0c2;
  background: #fff7f3;
  box-shadow: inset 5px 0 0 #f06a24;
}

.productReviewDealRow:hover {
  background: #fff2eb;
}

.productReviewDealRow .rowPrimary {
  padding-left: 18px;
}

.productReviewDealRow .rowPrimary strong {
  color: #c64b0a;
}

.productReviewDealRow .rowCell > span:not(.rowLabel) {
  display: block;
  margin-top: 3px;
  color: #7b726b;
  font-size: 11px;
  font-weight: 800;
}

.productReviewRow .rowLabel {
  display: none;
}

.productReviewRow .rowCell b {
  font-size: 14px;
  white-space: nowrap;
}

.productReviewRow > * {
  min-width: 0;
}

.productReviewActions {
  display: grid;
  grid-template-columns: 36px 36px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.productReviewActions button {
  min-height: 40px;
  border: 1px solid #63a777;
  background: white;
  color: #075d2e;
  min-width: 0;
  max-width: 100%;
  padding: 6px 8px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

.productReviewActions button:hover:not(:disabled) {
  background: #edf7ea;
}

.productReviewActions .productReviewOrderButton {
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.productReviewActions button:disabled {
  border-color: #d5ddd3;
  background: #f2f4f1;
  color: #a3aca0;
  cursor: not-allowed;
}

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

.productReviewDealTag {
  width: fit-content;
  color: #e45c0b;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
}

.fifoChange,
.pricingWarning {
  color: #ed650d;
}

.fifoChange {
  margin-left: 4px;
  font-size: 19px;
}

@media (max-width: 1200px) {
  .productReviewSummary,
  .productReviewToolbar,
  .productReviewTableHeader,
  .productReviewList,
  .productReviewDepartment,
  .productReviewDepartmentRows,
  .productReviewSubcategory,
  .productReviewSubcategoryRows,
  .productReviewProductGroup,
  .productReviewRow {
    min-width: 0;
  }

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

  .summaryDivider {
    display: none;
  }

  .productReviewTableHeader {
    display: none;
  }

  .productReviewRow {
    grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(120px, 0.75fr));
    border-top: 1px solid #d9e3d5;
    border-radius: 10px;
    margin-bottom: 8px;
  }

  .productReviewProductGroup {
    gap: 8px;
    margin-bottom: 8px;
  }

  .productReviewProductGroup + .productReviewProductGroup {
    margin-top: 0;
  }

  .productReviewProductGroup .productReviewRow {
    margin-bottom: 0;
  }

  .productReviewRow .rowLabel {
    display: block;
  }

  .productReviewRow .rowCell b {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .productReviewActions {
    grid-column: span 2;
    grid-template-columns: 40px 40px minmax(0, 1fr);
    width: 100%;
  }

}

@media (max-width: 760px) {
  .workflowSummaryGroup,
  .pricingSummaryGroup,
  .productReviewToolbar,
  .productReviewRow {
    grid-template-columns: 1fr;
  }

  .productReviewSummaryCard {
    grid-template-columns: 42px 48px 1fr;
  }

  .productReviewActions,
  .productReviewActions button {
    width: 100%;
  }

  .productReviewActions {
    grid-column: auto;
    grid-template-columns: 44px 44px minmax(0, 1fr);
  }

  .productReviewDepartmentHeader {
    align-items: flex-start;
  }

  .productReviewSubcategoryHeader {
    align-items: flex-start;
  }

}

/* Live customer-card preview inside Products. */
.productPublishPreview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.34fr);
  align-items: stretch;
  gap: 16px;
  margin: 4px 0 18px;
  border: 1px solid #b9d6b5;
  border-radius: 13px;
  padding: clamp(14px, 1.5vw, 20px);
  background: linear-gradient(135deg, #fbfef9, #f2f8ef);
}

.productPreviewMain {
  min-width: 0;
}

.productPreviewHeading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.productPreviewHeading p,
.productPreviewHeading h3 {
  margin: 0;
}

.productPreviewHeading p {
  color: var(--green);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.productPreviewHeading h3 {
  margin-top: 3px;
  font-size: 22px;
}

.productPreviewHeading > span {
  max-width: 390px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

.productCardPreview {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 14px;
}

.websiteProductCardPreview {
  position: relative;
  width: 230px;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #cee2c9;
  border-top: 4px solid #159639;
  border-radius: 13px;
  padding: 10px 12px 12px;
  background: white;
  color: #101827;
  box-shadow: 0 8px 24px rgba(12, 78, 34, 0.08);
}

.websiteProductCardPreview.dealPreview {
  border-top-color: var(--orange);
}

.previewVisual {
  position: relative;
  min-height: 124px;
  display: grid;
  place-items: center;
  background: white;
}

.previewProductImage {
  width: 100%;
  height: 120px;
  object-fit: contain;
}

.previewImagePlaceholder {
  font-size: 70px;
}

.previewBadge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: 135px;
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff0ef;
  color: #c60018;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
}

.previewLogoStack {
  position: absolute;
  top: 5px;
  right: 3px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3px;
}

.previewLogoStack img {
  width: 34px;
  height: 42px;
  object-fit: contain;
}

.previewAddButton {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36px;
  min-height: 36px;
  border-radius: 50%;
  padding: 0;
  background: #007f3d;
  color: white;
  font-size: 24px;
  line-height: 1;
  pointer-events: none;
}

.websiteProductCardPreview h4 {
  min-height: 45px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 7px 0;
  font-size: 18px;
  line-height: 0.98;
  text-align: center;
  overflow-wrap: anywhere;
}

.previewOptionShelf {
  min-height: 96px;
  display: grid;
  align-content: start;
  gap: 7px;
}

.previewPreparation {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #174d28;
  border-radius: 6px;
  padding: 0 9px;
  background: #f4fbf3;
  color: #263b2c;
  font-size: 11px;
  font-weight: 1000;
}

.previewQuantity {
  display: grid;
  gap: 4px;
  color: #697765;
  font-size: 11px;
  text-align: center;
}

.previewQuantity > div {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 5px;
}

.previewQuantity button {
  min-height: 32px;
  border-radius: 7px;
  padding: 0;
  background: #007f3d;
  color: white;
  pointer-events: none;
}

.previewQuantity b {
  min-height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #f2b6b6;
  border-radius: 7px;
  background: white;
  color: #c60018;
}

.previewPriceLine {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  margin-top: auto;
  white-space: nowrap;
}

.previewPriceLine small {
  color: #111;
  font-size: 10px;
  font-weight: 1000;
}

.previewPriceLine strong {
  color: #c60018;
  font-size: 33px;
  line-height: 0.95;
}

.previewPriceLine del {
  color: #7b8378;
  font-size: 12px;
}

.previewUnit {
  min-height: 20px;
  margin-top: 3px;
  color: #697765;
  font-size: 11px;
  text-align: right;
}

.productPublishAction {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  border-left: 1px solid #d0dfcc;
  padding-left: 18px;
}

.productPublishAction strong {
  font-size: 19px;
  line-height: 1.15;
}

.productPublishAction span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.productPublishAction .publishWebsiteButton {
  min-height: 50px;
  margin-top: 6px;
  background: var(--orange);
  color: white;
  font-size: 15px;
}

.productPublishAction .publishWebsiteButton:disabled {
  background: #dfe5dc;
  color: #7d867a;
}

.previewHiddenProduct {
  width: 100%;
  min-height: 150px;
  display: grid;
  place-content: center;
  gap: 6px;
  border: 1px dashed #a9bea4;
  border-radius: 10px;
  padding: 20px;
  background: white;
  text-align: center;
}

.previewHiddenProduct span {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .productPublishPreview {
    grid-template-columns: 1fr;
  }

  .productPublishAction {
    border-top: 1px solid #d0dfcc;
    border-left: 0;
    padding-top: 16px;
    padding-left: 0;
  }
}

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

  .productPreviewHeading > span {
    text-align: left;
  }

  .productCardPreview {
    justify-content: center;
  }
}