:root {
  --navy: #0b1f3a;
  --navy-2: #12345b;
  --gold: #c8a44d;
  --ink: #111827;
  --muted: #6b7280;
  --line: #d8dee8;
  --soft: #f6f8fb;
  --white: #ffffff;
  --green: #14532d;
  --red: #7f1d1d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: #eef2f7;
  color: var(--ink);
  font-family: Inter, Roboto, Arial, sans-serif;
}

button, input, select, textarea { font: inherit; }
fieldset { min-inline-size: 0; }

button {
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

button:active { transform: translateY(1px) scale(0.985); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(200, 164, 77, 0.34);
  outline-offset: 2px;
}

.app-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 22px clamp(16px, 4vw, 42px);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-header h1, .cart-head h2, .panel-head h2 {
  margin: 0;
  color: var(--navy);
  letter-spacing: 0;
}

.app-header h1 { font-size: clamp(24px, 3vw, 38px); }

.brand-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.header-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 10px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.header-actions, .cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.company-site-link {
  border: 1px solid var(--line);
  color: var(--navy);
  background: var(--soft);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.company-site-link:hover {
  background: #fffaf0;
  border-color: rgba(200, 164, 77, 0.55);
  transform: translateY(-1px);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 18px;
  align-items: start;
}

.admin-layout {
  grid-template-columns: 1fr;
  max-width: 1180px;
}

.workspace, .cart-shell {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 14px 36px rgba(11, 31, 58, 0.10);
}

.workspace { border-radius: 18px; overflow: hidden; }

.tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: var(--navy);
}

.tab {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.8);
  padding: 15px 18px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.tab.active {
  color: var(--navy);
  background: var(--gold);
}

.tab-panel { display: none; padding: 22px; }
.tab-panel.active { display: block; }

.search-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: end;
}

.search-sticky {
  position: sticky;
  top: 10px;
  z-index: 12;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(216, 222, 232, 0.86);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 14px 30px rgba(11, 31, 58, 0.10);
  backdrop-filter: blur(10px);
}

label {
  display: grid;
  gap: 7px;
  color: var(--navy);
  font-weight: 900;
  font-size: 13px;
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 13px;
  color: var(--ink);
  background: var(--white);
  outline: none;
}

input[type="checkbox"], input[type="radio"] {
  width: auto;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 164, 77, 0.18);
}

#searchInput {
  min-height: 54px;
  font-size: 18px;
}

#searchHint, .panel-head p, .status-line {
  color: var(--muted);
  margin: 8px 0 0;
}

.trust-box, .freight-card, .discount-card, .checkout-summary, .status-card {
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 12px;
  padding: 13px;
}

.trust-box strong, .trust-box span { display: block; }
.trust-box span { color: var(--muted); margin-top: 4px; font-size: 13px; line-height: 1.35; }

.results-list, .document-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 4px;
}

.load-more-wrap .secondary-btn {
  min-width: min(100%, 260px);
}

.result-card {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: var(--white);
}

.oem-block strong, .product-card h3 { color: var(--navy); }
.oem-block span, .meta, .warning-list, .doc-row span { color: var(--muted); }
.product-card { min-width: 0; }

.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 14px;
}

.result-card.collapsed .product-card {
  display: grid;
  align-items: center;
}

.result-expand {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 13px;
  text-align: left;
}

.result-card.expanded .result-expand {
  border-color: rgba(200, 164, 77, 0.55);
  background: #fffaf0;
  margin-bottom: 10px;
}

.result-expand-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.result-expand-main strong {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.2;
}

.result-expand-main small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.3;
}

.expand-pill {
  border: 1px solid rgba(200, 164, 77, 0.40);
  background: rgba(200, 164, 77, 0.16);
  color: #7a5a12;
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
  white-space: nowrap;
}

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

.replacement-head h3 {
  margin: 0;
  color: var(--navy);
}

.replacement-head span {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  white-space: nowrap;
}

.option-stack {
  display: grid;
  gap: 10px;
}

.choice-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfe;
  padding: 13px;
}

.choice-card.priority {
  border-color: rgba(200, 164, 77, 0.65);
  box-shadow: inset 4px 0 0 var(--gold);
}

.choice-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.choice-card h4 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
}

.choice-controls {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  margin-top: 10px;
}

.lead-pill {
  border: 1px solid rgba(20, 83, 45, 0.20);
  background: #ecfdf5;
  color: var(--green);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(200,164,77,0.14);
  color: #7a5a12;
  border: 1px solid rgba(200,164,77,0.35);
  font-size: 12px;
  font-weight: 900;
}

.badge.good { background: #dcfce7; color: var(--green); border-color: #86efac; }
.badge.warn { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.badge.review { background: #fef2f2; color: var(--red); border-color: #fecaca; }

.doc-links, .result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.doc-links a, .secondary-btn, .ghost-btn {
  border: 1px solid var(--line);
  color: var(--navy);
  background: var(--white);
  border-radius: 10px;
  padding: 9px 11px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.primary-btn {
  border: 0;
  color: var(--white);
  background: var(--navy);
  border-radius: 10px;
  padding: 10px 13px;
  font-weight: 900;
  cursor: pointer;
}

.primary-btn.just-added {
  background: var(--green);
  color: var(--white);
}

.primary-btn:hover, .secondary-btn:hover, .ghost-btn:hover, .doc-links a:hover {
  transform: translateY(-1px);
}

.primary-btn:disabled, .secondary-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

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

.wide { grid-column: 1 / -1; }

.inline-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 14px;
}

.document-item, .cart-line {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--white);
}

.cart-shell {
  border-radius: 18px;
  padding: 16px;
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 116px);
  overflow: auto;
}

.cart-head, .freight-top, .cart-line-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.icon-btn {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  font-weight: 900;
}

.cart-items { display: grid; gap: 9px; margin: 12px 0; }

.cart-line h4 { margin: 0; color: var(--navy); }
.cart-line small { color: var(--muted); }

.qty-row {
  display: grid;
  grid-template-columns: 1fr 76px auto;
  gap: 8px;
  margin-top: 9px;
  align-items: center;
}

.qty-row input { padding: 8px; }

.freight-card, .discount-card { margin: 12px 0; }
.freight-top strong { color: var(--navy); }
.freight-top span { color: var(--muted); font-weight: 900; }

.progress {
  height: 9px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  margin-top: 10px;
}

.progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold);
}

.checkout-summary {
  display: grid;
  gap: 8px;
}

.checkout-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.checkout-summary .total {
  border-top: 1px solid var(--line);
  padding-top: 9px;
  color: var(--navy);
  font-size: 18px;
}

.discount-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.share-cart-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  margin-top: 12px;
  padding: 14px;
}

.share-url-label {
  display: grid;
  gap: 6px;
}

.share-url-label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.share-url-label input {
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.share-cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.share-cart-actions .secondary-btn {
  text-align: center;
}

.method-head.compact {
  margin-bottom: 8px;
}

.discount-card h3 {
  margin: 0;
  color: var(--navy);
}

#discountSummary {
  border: 1px solid rgba(20, 83, 45, 0.22);
  background: #ecfdf5;
  color: var(--green);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.discount-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

#discountCode {
  text-transform: uppercase;
}

#discountRow {
  color: var(--green);
}

.payment-toggle {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
  margin: 12px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

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

.method-head h3 {
  margin: 0;
  color: var(--navy);
}

#paymentMethodSummary {
  border: 1px solid rgba(200, 164, 77, 0.40);
  background: rgba(200, 164, 77, 0.14);
  color: #7a5a12;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

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

.payment-option {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  padding: 11px;
  cursor: pointer;
}

.payment-option:has(input:checked) {
  border-color: var(--gold);
  background: #fffaf0;
  box-shadow: inset 0 0 0 2px rgba(200, 164, 77, 0.18);
}

.payment-option input { accent-color: var(--navy); }
.payment-option span { display: grid; gap: 2px; }
.payment-option strong { color: var(--navy); }
.payment-option small { color: var(--muted); font-weight: 800; line-height: 1.25; }

.payment-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.payment-note.good { color: var(--green); font-weight: 900; }
.payment-note.bad { color: var(--red); font-weight: 900; }

.terms-policy-note {
  margin: 10px 0 0;
  padding: 10px 11px;
  border: 1px solid rgba(200, 164, 77, 0.30);
  border-radius: 10px;
  background: rgba(200, 164, 77, 0.08);
  color: #374151;
  font-size: 12px;
  line-height: 1.4;
}

.terms-policy-note strong {
  color: var(--navy);
}

.reorder-box, .equipment-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
  min-width: 0;
}

.reorder-box legend, .equipment-box legend {
  color: var(--navy);
  font-weight: 900;
  padding: 0 4px;
}

.cadence-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.cadence-option {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  min-width: 0;
  padding: 10px;
  width: 100%;
}

.cadence-option:has(input:checked) {
  border-color: var(--gold);
  background: #fffaf0;
  box-shadow: inset 0 0 0 2px rgba(200, 164, 77, 0.18);
}

.cadence-option input {
  accent-color: var(--navy);
  flex: 0 0 auto;
  height: 18px;
  margin: 0;
  width: 18px;
}

.cadence-option span {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.equipment-save-toggle {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  margin: 8px 0;
  min-width: 0;
  padding: 10px;
  width: 100%;
}

.equipment-save-toggle:has(input:checked) {
  border-color: var(--gold);
  background: #fffaf0;
  box-shadow: inset 0 0 0 2px rgba(200, 164, 77, 0.18);
}

.equipment-save-toggle input {
  accent-color: var(--navy);
  flex: 0 0 auto;
  height: 18px;
  margin: 0;
  width: 18px;
}

.equipment-save-toggle span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.equipment-assignments {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.equipment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: end;
}

.equipment-row label { min-width: 0; }
.equipment-row .icon-btn { align-self: end; }
.equipment-add { margin-top: 10px; }

.equipment-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin: 10px 0 0;
}

.cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cart-actions .primary-btn {
  grid-column: 1 / -1;
}

.checkout-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.checkout-form h3 { margin: 0; color: var(--navy); }

.cart-shell.quote-mode .freight-card,
.cart-shell.quote-mode .discount-card,
.cart-shell.quote-mode .checkout-summary,
.cart-shell.quote-mode .payment-toggle,
.cart-shell.quote-mode .share-cart-panel,
.cart-shell.quote-mode .cart-actions,
.cart-shell.quote-mode .checkout-only {
  display: none;
}

.cart-shell.quote-mode .checkout-form {
  border-top: 0;
  margin-top: 12px;
  padding-top: 0;
}

.card-fields {
  display: grid;
  grid-template-columns: 1fr 110px 90px;
  gap: 8px;
}

.notice {
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px;
}

.notice.good { color: var(--green); font-weight: 900; }
.notice.bad { color: var(--red); font-weight: 900; }
.notice a {
  color: var(--navy);
  display: inline-flex;
  font-weight: 900;
  margin-left: 6px;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
.notice small {
  color: var(--muted);
  display: block;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 5px;
  overflow-wrap: anywhere;
}
.status-card.bad {
  color: var(--red);
  background: #fef2f2;
  border-color: #fecaca;
  font-weight: 900;
}

.account-note {
  margin-top: 12px;
  border: 1px solid rgba(200, 164, 77, 0.38);
  background: #fffaf0;
  color: #4b3b12;
  border-radius: 12px;
  padding: 12px;
  line-height: 1.45;
  font-size: 13px;
}

.account-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.account-results { margin-top: 16px; }

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

.account-summary h3 {
  margin: 0;
  color: var(--navy);
}

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

.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 12px;
}

.account-card, .order-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  padding: 14px;
}

.account-card h3 {
  margin: 0 0 10px;
  color: var(--navy);
}

.order-card + .order-card { margin-top: 10px; }

.order-items {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 8px;
}

.order-items p {
  margin: 4px 0;
  color: var(--navy);
  font-weight: 800;
}

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

.security-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.site-footer {
  max-width: 1480px;
  margin: 0 auto 24px;
  padding: 0 18px;
  color: var(--muted);
}

.site-footer details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  padding: 12px 14px;
}

.site-footer summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 900;
}

.site-footer p {
  margin: 10px 0 0;
  line-height: 1.5;
  font-size: 13px;
}

.site-footer a {
  color: var(--navy);
  font-weight: 900;
}

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .cart-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding:
      max(16px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 30;
    transform: translateY(calc(100% - 78px));
    transition: transform 0.2s ease;
  }
  .cart-shell.open { transform: translateY(0); }
  .cart-shell.open .cart-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 10px;
    background: var(--white);
  }
  .search-band, .result-card, .product-grid, .form-grid, .card-fields {
    grid-template-columns: 1fr;
  }
  .search-sticky {
    top: 8px;
  }
  .choice-controls, .account-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .app-header { align-items: start; flex-direction: column; }
  .brand-heading { align-items: flex-start; }
  .header-logo {
    width: 38px;
    height: 38px;
    margin-top: 2px;
  }
  .header-actions { width: 100%; }
  .header-actions button { flex: 1; }
  .header-actions .company-site-link {
    flex: 1 1 100%;
    text-align: center;
  }
  .tab-panel { padding: 16px; }
  .search-sticky {
    margin: -6px -6px 0;
    padding: 12px;
  }
  .search-sticky .trust-box {
    display: none;
  }
  .result-card { padding: 13px; }
  .replacement-head, .choice-top, .method-head, .account-summary {
    display: grid;
  }
  .payment-options, .cart-actions, .share-cart-actions {
    grid-template-columns: 1fr;
  }
  .discount-entry {
    grid-template-columns: 1fr;
  }
  .cadence-options, .equipment-row {
    grid-template-columns: 1fr;
  }
  .result-expand {
    display: grid;
  }
  .expand-pill {
    justify-self: start;
  }
  .equipment-row .icon-btn {
    width: 100%;
    border-radius: 10px;
  }
  .site-footer { padding: 0 10px 86px; }
}