:root {
  --brown-dark: #3b2a20;
  --brown: #6b4a34;
  --tan: #e8dcc7;
  --cream: #faf6ee;
  --accent: #8a2d2d;
  --ok: #2d6a2d;
  --err: #a12020;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: Georgia, 'Times New Roman', serif;
  background: var(--cream); color: var(--brown-dark);
}
.topbar {
  background: var(--brown-dark); color: var(--tan);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1.5rem;
}
.brand { font-weight: bold; font-size: 1.1rem; letter-spacing: 0.02em; }
.topnav { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.topnav button {
  background: var(--brown); color: white; border: none; padding: 0.4rem 0.9rem;
  border-radius: 4px; cursor: pointer; font-family: inherit;
}
.topnav button:hover { background: var(--accent); }

main { max-width: 1500px; margin: 0 auto; padding: 1.5rem; padding-bottom: 8rem; }

.screen { display: none; }
.screen.active { display: block; }

.card {
  background: white; border: 1px solid var(--tan); border-radius: 8px;
  padding: 2rem; max-width: 420px; margin: 2rem auto;
}
.card.wide { max-width: 800px; }

h1 { color: var(--brown-dark); margin-top: 0; }
h2 { color: var(--brown); border-bottom: 2px solid var(--tan); padding-bottom: 0.3rem; }

form label { display: block; margin-bottom: 1rem; font-size: 0.95rem; }
form input {
  display: block; width: 100%; padding: 0.5rem; margin-top: 0.3rem;
  border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 1rem;
}
.pw-wrap { position: relative; display: block; margin-top: 0.3rem; }
.pw-wrap input { margin-top: 0; padding-right: 2.4rem; }
.pw-toggle {
  position: absolute; right: 0; top: 0; height: 100%; width: 2.2rem;
  background: none; border: none; cursor: pointer; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center; color: #888; opacity: 0.6;
}
.pw-toggle:hover { opacity: 1; }
.pw-toggle-active { opacity: 1; color: var(--accent); }
.btn-primary {
  background: var(--accent); color: white; border: none; padding: 0.7rem 1.4rem;
  border-radius: 5px; font-size: 1rem; cursor: pointer; font-family: inherit;
}
.btn-primary:disabled { background: #bbb; cursor: not-allowed; }
.btn-primary:hover:not(:disabled) { background: #6e1f1f; }
.btn-secondary {
  background: var(--tan); color: var(--brown-dark); border: none; padding: 0.5rem 1rem;
  border-radius: 5px; cursor: pointer; font-family: inherit; text-decoration: none; display: inline-block;
}
.error { color: var(--err); font-size: 0.9rem; min-height: 1.2em; }
.success { color: var(--ok); font-size: 0.9rem; }
.muted { color: #777; }
.small { font-size: 0.85rem; }
.switch-link { text-align: center; }

.search-box { width: 100%; padding: 0.6rem; font-size: 1rem; margin: 1rem 0; border: 1px solid #ccc; border-radius: 4px; }
.order-note-label { display: block; margin: 0.8rem 0 0.3rem; font-size: 0.9rem; font-weight: bold; }
.order-note-input {
  width: 100%; max-width: 600px; padding: 0.6rem; font: inherit; font-size: 0.95rem;
  border: 1px solid #ccc; border-radius: 4px; resize: vertical; box-sizing: border-box;
  margin-bottom: 0.8rem;
}
.rep-customer-list { max-height: 60vh; overflow-y: auto; }
.rep-customer-item {
  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--tan); cursor: pointer;
}
.rep-customer-item:hover { background: var(--tan); }

.catalog-header { margin-bottom: 1rem; }
.section-title { margin-top: 2rem; color: var(--brown-dark); }
.subgroup { margin-bottom: 1.5rem; }
.subgroup-head { display: flex; justify-content: space-between; align-items: baseline; }
.subgroup-head h3 { margin-bottom: 0.2rem; color: var(--brown); }
.catalog-link { font-size: 1.05rem; color: var(--accent); text-decoration: none; display: inline-block; margin: 0.2rem 0 0.5rem; }
.min-note { font-size: 0.95rem; font-weight: bold; color: var(--brown); margin: 0.2rem 0 0.6rem; }

.product-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.product-table tr { border-bottom: 1px solid #eee; }
.product-table td { padding: 0.15rem 0.3rem; line-height: 1.3; }
.p-sku { color: #999; font-size: 0.85rem; text-align: center; }
.p-price { text-align: center; }
.p-qty { text-align: center; }
.p-qty input { width: 60px; padding: 0.3rem; border: 1px solid #ccc; border-radius: 4px; }
.p-qty select { width: 66px; padding: 0.25rem; border: 1px solid #ccc; border-radius: 4px; background: white; text-align: center; }

.matrix-table-wrap { overflow-x: auto; margin-bottom: 2rem; width: fit-content; max-width: 100%; }
.matrix-table-wrap.unified-wrap { width: 100%; overflow-x: visible; }
.matrix-table { border-collapse: collapse; font-size: 0.85rem; table-layout: auto; }
.matrix-table th, .matrix-table td { border: 1px solid var(--tan); padding: 0.2rem 0.3rem; text-align: center; white-space: nowrap; }
.matrix-header-row th:first-child { text-align: right; font-weight: normal; color: #777; background: var(--cream); position: sticky; left: 0; }
.matrix-table thead th { background: #f3ead9; }
.matrix-name {
  text-align: left !important; white-space: nowrap; background: white;
  font-size: 0.95rem; line-height: 1; padding-top: 0.12rem !important; padding-bottom: 0.12rem !important;
}
.matrix-suffix { color: #999; font-size: 0.75rem; }
.matrix-suffix-col {
  color: #888; font-size: 0.95rem; line-height: 1;
  padding-top: 0.12rem !important; padding-bottom: 0.12rem !important;
}
.matrix-qty { padding: 0.15rem !important; }
.matrix-qty input { width: 46px; box-sizing: border-box; padding: 0.2rem; border: 1px solid #ccc; border-radius: 4px; text-align: center; }
.matrix-qty select { width: 52px; box-sizing: border-box; padding: 0.15rem; border: 1px solid #ccc; border-radius: 4px; text-align: center; font-size: 0.8rem; background: white; }

/* Scent Notes column: left-aligned, smaller, wrapping text for actual scent-note data rows. */
.matrix-scent-notes-col {
  text-align: left !important; white-space: normal !important; font-size: 0.68rem; color: #666;
  line-height: 1.2; max-width: 170px; min-width: 110px; background: white;
}
/* Inside the stationary (sticky) header block this is a HEADER cell, not a data cell —
   it needs to look and behave exactly like its sibling header cells (same alignment,
   background, and font treatment per row), just with no width cap so it doesn't get
   squeezed oddly while sticky. */
.matrix-sticky-row .matrix-scent-notes-col {
  text-align: center !important; white-space: normal !important;
  max-width: none; min-width: 0; background: #f3ead9 !important;
}
.matrix-type-row .matrix-scent-notes-col {
  font-size: 0.75rem !important; font-weight: bold; color: inherit;
}
.matrix-price-row.matrix-sticky-row .matrix-scent-notes-col {
  font-size: 0.78rem !important; font-weight: normal; color: #666;
}

.matrix-line-divider td {
  background: var(--tan); border-top: 2px solid var(--brown); text-align: left !important;
  white-space: normal; padding: 0.6rem 0.6rem;
}
.matrix-line-divider .line-title { font-size: 1.15rem; font-weight: bold; color: var(--brown-dark); }
.matrix-line-divider .min-note { margin-top: 0.3rem; }

.matrix-price-row td { background: var(--cream); font-size: 0.78rem; color: #666; }

.matrix-type-row td, .matrix-type-row th { font-size: 0.75rem; font-weight: bold; line-height: 1.15; }
.matrix-sticky-row td {
  position: sticky; z-index: 5; background: #f3ead9;
  height: 1.7rem; box-sizing: border-box; padding-top: 0.15rem; padding-bottom: 0.15rem;
}
/* Row 1 (type labels) can now wrap to two lines (COOKIE JAR, TRAVEL TIN, etc.), so it
   gets extra height; rows 2/3 (Wholesale/Retail) shift down to match, with no overlap. */
.sticky-row-1 td { top: 0; height: 2.3rem; white-space: normal; vertical-align: middle; }
.sticky-row-2 td { top: 2.3rem; }
.sticky-row-3 td { top: 4rem; }
.matrix-sticky-row td:first-child { z-index: 6; }
.matrix-price-label { text-align: right !important; font-weight: normal; color: #777; }

.matrix-extra-block td {
  text-align: left !important; white-space: normal; background: white;
  padding: 1rem 0.8rem; font-size: 0.92rem; line-height: 1.5;
}
.matrix-extra-block p { margin: 0.5rem 0; }
.matrix-extra-block ul { margin: 0.3rem 0 0.8rem; padding-left: 1.4rem; }
.matrix-extra-block li { margin: 0.15rem 0; }

.intro-columns { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.intro-col { flex: 1 1 260px; }
.intro-col p { margin: 0.3rem 0; }
.intro-col ul { margin: 0.2rem 0; }

.fragrance-groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 1.8rem; align-items: start;
}
.fragrance-group { margin-bottom: 0.4rem; break-inside: avoid; }
.fragrance-group h4 { margin: 0 0 0.15rem; color: var(--accent); font-size: 0.85rem; letter-spacing: 0.03em; }
.fragrance-group ul { margin: 0 0 0.3rem; padding-left: 1.1rem; }
.fragrance-group li { margin: 0.05rem 0; font-size: 0.85rem; line-height: 1.3; }

.cart-bar {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--brown-dark);
  color: white; box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
}
.cart-bar-inner { max-width: 1500px; margin: 0 auto; padding: 0.8rem 1.5rem; }
.cart-totals { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.cart-total-final { font-weight: bold; }
.requirements-panel { font-size: 0.85rem; max-height: 5.5em; overflow-y: auto; margin-bottom: 0.4rem; }
.requirements-panel ul { margin: 0.2rem 0; padding-left: 1.2rem; color: #ffcccc; }
.requirements-panel .ok { color: #b7e4b7; margin: 0; }
.req-title { margin: 0; font-weight: bold; }

.order-summary-text {
  background: var(--tan); padding: 1rem; border-radius: 6px; white-space: pre-wrap;
  font-family: monospace; font-size: 0.9rem;
}
.report-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-bottom: 2rem; }
.report-table th, .report-table td { text-align: left; padding: 0.4rem; border-bottom: 1px solid var(--tan); }

.top-promotions {
  background: white; border: 1px solid var(--tan); border-radius: 6px;
  padding: 1rem 1.2rem; margin-bottom: 1.2rem; font-size: 0.92rem; line-height: 1.5;
}
.top-promotions p { margin: 0.5rem 0; }
.top-promotions ul { margin: 0.3rem 0 0.8rem; padding-left: 1.4rem; }
.top-promotions li { margin: 0.15rem 0; }

.fulfillment-block {
  background: var(--tan); border-radius: 6px; padding: 0.9rem 1.2rem; margin-bottom: 1.2rem;
}
.fulfillment-option { display: block; margin: 0.3rem 0; font-size: 0.95rem; cursor: pointer; }
.fulfillment-option input { margin-right: 0.5rem; }
.fulfillment-note { font-weight: bold; color: #a33; font-size: 0.9rem; }
.no-email-warning {
  font-weight: bold; color: #a33; font-size: 0.9rem; background: #fdf0f0;
  border: 1px solid #e3b3b3; border-radius: 4px; padding: 0.5rem 0.8rem; margin: 0.5rem 0;
}
#cart-freight-progress { font-weight: bold; }
.fulfillment-instructions { margin: 0.7rem 0 0; font-size: 0.85rem; font-weight: bold; }

.policy-block { margin: 1.5rem 0; font-size: 0.9rem; line-height: 1.4; }
.policy-block h3 { margin-bottom: 0.4rem; }
.policy-block ul { margin: 0.3rem 0; padding-left: 1.3rem; }
.policy-block li { margin: 0.25rem 0; }

.policy-intro-divider { border: none; border-top: 2px solid var(--tan); margin: 2rem 0 0.8rem; }
.policy-intro-title { font-size: 1.3rem; font-weight: bold; color: var(--brown-dark); margin: 0 0 1rem; }

/* Printing the submitted order (Print order button on the confirmation screen):
   hide app chrome/buttons, show just the order text in plain black on white. */
@media print {
  .no-print, .cart-bar, .catalog-header, nav, header, .reports-nav-btn, .back-to-order-btn { display: none !important; }
  body, .card { background: white !important; box-shadow: none !important; }
  .order-summary-text {
    background: white !important; border: none !important; padding: 0 !important;
    color: black !important; font-size: 11pt;
  }
  .card.wide { max-width: none; margin: 0; padding: 0; }
}