/* =================================================================
   QuoteHub — Customer Portal  |  Professional Light Theme
   Primary: #00b5cc (blue) · Danger: #dc2626 (red only)
   ================================================================= */

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ── Design Tokens ───────────────────────────────────────────────── */
:root {
  /* Primary interactive — Northcom teal */
  --qh-brand:        #00b5cc;
  --qh-brand-h:      #0099ad;
  --qh-brand-dim:    rgba(0,181,204,.08);
  --qh-brand-glow:   rgba(0,181,204,.22);

  /* Northcom identity */
  --qh-nc-teal:      #00b5cc;
  --qh-nc-red:       #f25648;

  /* Surfaces */
  --qh-bg:           #f8fafc;
  --qh-surface:      #ffffff;
  --qh-card:         #ffffff;
  --qh-card-2:       #f1f5f9;

  /* Borders */
  --qh-border:       #e2e8f0;
  --qh-border-2:     #cbd5e1;

  /* Text */
  --qh-text-1:       #0f172a;
  --qh-text-2:       #64748b;
  --qh-text-3:       #94a3b8;

  /* Semantic */
  --qh-green:        #059669;  --qh-green-dim:   rgba(5,150,105,.10);
  --qh-amber:        #d97706;  --qh-amber-dim:   rgba(217,119,6,.10);
  --qh-red:          #dc2626;  --qh-red-dim:     rgba(220,38,38,.09);
  --qh-blue:         #2563eb;  --qh-blue-dim:    rgba(37,99,235,.09);
  --qh-indigo:       #4f46e5;  --qh-indigo-dim:  rgba(79,70,229,.09);
  --qh-purple:       #7c3aed;  --qh-purple-dim:  rgba(124,58,237,.09);

  /* JS / inline-style aliases */
  --qh-accent:       #00b5cc;
  --qh-accent-h:     #0099ad;
  --qh-accent-dim:   rgba(0,181,204,.08);
  --qh-accent-glow:  rgba(0,181,204,.20);
  --qh-navy:         #0f172a;
  --qh-gray-50:      #f8fafc;
  --qh-gray-100:     #f1f5f9;
  --qh-gray-200:     #e2e8f0;
  --qh-gray-300:     #cbd5e1;
  --qh-gray-400:     #94a3b8;
  --qh-gray-500:     #64748b;
  --qh-gray-600:     #475569;
  --qh-gray-700:     #334155;
  --qh-gray-800:     #1e293b;
  --qh-white:        #ffffff;

  /* Geometry */
  --qh-radius-sm:    6px;
  --qh-radius:       8px;
  --qh-radius-lg:    12px;
  --qh-radius-xl:    16px;
  --qh-shadow:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --qh-shadow-md:    0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --qh-shadow-lg:    0 16px 48px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
  --qh-t:            0.15s ease;
  --qh-header-h:     60px;
}

/* ── Base ────────────────────────────────────────────────────────── */
html, body.qh-portal-body {
  /* iOS Safari fix v2: `overflow-x: clip` clips even position:fixed and transformed children;
     `overflow-x: hidden` does not on iOS WebKit. Layered with hidden as fallback for iOS <16. */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
body.qh-portal-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--qh-text-1);
  background: var(--qh-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light;
}

.qh-app {
  display: flex; flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  contain: paint;
}

/* =================================================================
   IMPERSONATION BANNER
   ================================================================= */
.qh-imp-banner {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1.5rem;
  background: #fffbeb; border-bottom: 1px solid #fde68a;
  color: #92400e; font-size: 13px; font-weight: 500;
}
.qh-imp-banner svg { flex-shrink: 0; }
.qh-imp-banner span { flex: 1; }
.qh-imp-end-btn {
  background: #fef3c7; border: 1px solid #fcd34d; color: #78350f;
  padding: .25rem .75rem; border-radius: var(--qh-radius-sm);
  cursor: pointer; font-size: 12px; font-weight: 600; transition: background var(--qh-t);
}
.qh-imp-end-btn:hover { background: #fde68a; }

/* =================================================================
   HEADER
   ================================================================= */
.qh-header {
  background: var(--qh-surface);
  border-bottom: 1px solid var(--qh-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  position: sticky; top: 0; z-index: 200;
  height: var(--qh-header-h);
}
.qh-header__inner {
  max-width: 1300px; margin: 0 auto;
  padding: 0 1.5rem; height: 100%;
  display: flex; align-items: center; gap: 1.25rem;
}

/* Logo */
.qh-logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; flex-shrink: 0; }
.qh-logo__badge {
  background: var(--qh-nc-red); color: #fff;
  font-weight: 800; font-size: 11px; padding: 3px 7px;
  border-radius: 5px; letter-spacing: .5px; text-transform: uppercase;
}
.qh-logo__name { font-weight: 700; font-size: 15px; color: var(--qh-text-1); letter-spacing: -.01em; }
.qh-domain-logo-img { height: 28px; width: auto; border-radius: 4px; }

/* Nav */
.qh-nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.qh-nav::-webkit-scrollbar { display: none; }
.qh-nav-btn {
  flex-shrink: 0; background: transparent; border: none;
  color: var(--qh-text-2); font-size: 14px; font-weight: 500;
  padding: .45rem .9rem; border-radius: var(--qh-radius-sm);
  cursor: pointer; transition: color var(--qh-t), background var(--qh-t); white-space: nowrap;
}
.qh-nav-btn:hover { color: var(--qh-text-1); background: var(--qh-card-2); }
.qh-nav-btn--active {
  color: var(--qh-brand) !important;
  background: var(--qh-brand-dim) !important;
  font-weight: 600;
}

/* Header right */
.qh-header__right { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-shrink: 0; }
.qh-help-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--qh-card-2); border: 1px solid var(--qh-border);
  color: var(--qh-text-2); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all var(--qh-t);
  display: flex; align-items: center; justify-content: center;
}
.qh-help-btn:hover { background: var(--qh-brand-dim); color: var(--qh-brand); border-color: rgba(0,181,204,.25); }
.qh-avatar-pill {
  display: flex; align-items: center; gap: .5rem;
  background: var(--qh-card-2); border: 1px solid var(--qh-border);
  border-radius: 99px; padding: .25rem .75rem .25rem .35rem;
}
.qh-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--qh-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.qh-avatar-pill__name { font-size: 13px; color: var(--qh-text-2); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =================================================================
   BUTTONS
   ================================================================= */
.qh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; font-size: 14px; font-weight: 600; line-height: 1;
  padding: .6rem 1.1rem; border-radius: var(--qh-radius-sm);
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none; font-family: inherit;
  transition: background var(--qh-t), border-color var(--qh-t), box-shadow var(--qh-t), transform .1s, opacity var(--qh-t);
}
.qh-btn:disabled { opacity: .45; cursor: not-allowed; }
.qh-btn--primary {
  background: var(--qh-brand); color: #fff; border-color: var(--qh-brand);
  box-shadow: 0 1px 3px rgba(0,181,204,.25);
}
.qh-btn--primary:hover:not(:disabled) {
  background: var(--qh-brand-h); border-color: var(--qh-brand-h);
  box-shadow: 0 4px 14px rgba(0,181,204,.35); transform: translateY(-1px);
}
.qh-btn--primary:active:not(:disabled) { transform: none; box-shadow: none; }
.qh-btn--ghost {
  background: var(--qh-surface); color: var(--qh-text-2); border-color: var(--qh-border-2);
}
.qh-btn--ghost:hover:not(:disabled) { color: var(--qh-text-1); background: var(--qh-card-2); border-color: var(--qh-border-2); }
.qh-btn--danger { background: var(--qh-red-dim); color: var(--qh-red); border-color: rgba(220,38,38,.2); }
.qh-btn--danger:hover:not(:disabled) { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.3); }
.qh-btn--success { background: var(--qh-green-dim); color: var(--qh-green); border-color: rgba(5,150,105,.2); }
.qh-btn--success:hover:not(:disabled) { background: rgba(5,150,105,.15); }
.qh-btn--sm  { font-size: 12.5px; padding: .4rem .8rem; }
.qh-btn--xs  { font-size: 11px; padding: .25rem .5rem; border-radius: 4px; }
.qh-btn--full { width: 100%; }

/* =================================================================
   MAIN LAYOUT
   ================================================================= */
.qh-main { flex: 1; max-width: 1300px; width: 100%; margin: 0 auto; padding: 1.5rem; }
.qh-view { display: block; }
.qh-page-header {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.qh-page-header h2 { font-size: 20px; font-weight: 700; color: var(--qh-text-1); flex: 1; letter-spacing: -.02em; }
.qh-page-header__actions { display: flex; gap: .5rem; align-items: center; }

/* =================================================================
   LOGIN / AUTH VIEW
   ================================================================= */
.qh-view--login {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; padding: 2rem 1.5rem;
  background: #f1f5f9;
}

/* Subtle dot-grid */
.qh-view--login::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(0,181,204,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Ambient blobs */
.qh-view--login::after {
  content: '';
  position: absolute; pointer-events: none; z-index: 0;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,181,204,.06) 0%, transparent 65%);
  top: -200px; right: -100px;
  filter: blur(40px);
}

/* Radio wave rings */
.qh-radio-rings { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 0; }
.qh-radio-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(0,181,204,.18);
  transform: translate(-50%,-50%);
  animation: qh-radio-wave 5.5s ease-out infinite;
}
.qh-radio-ring:nth-child(1) { animation-delay: 0s; }
.qh-radio-ring:nth-child(2) { animation-delay: 1.1s; }
.qh-radio-ring:nth-child(3) { animation-delay: 2.2s; }
.qh-radio-ring:nth-child(4) { animation-delay: 3.3s; }
.qh-radio-ring:nth-child(5) { animation-delay: 4.4s; }
@keyframes qh-radio-wave {
  0%   { width:80px;    height:80px;    opacity:.6;  border-color:rgba(0,181,204,.45); }
  35%  { opacity:.15; }
  100% { width:1300px;  height:1300px;  opacity:0;   border-color:rgba(0,181,204,.01); }
}
.qh-radio-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--qh-brand); z-index: 1; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(0,181,204,.15);
  animation: qh-center-pulse 2.5s ease-in-out infinite;
}
@keyframes qh-center-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(0,181,204,.15), 0 0 12px rgba(0,181,204,.3); }
  50%     { box-shadow: 0 0 0 8px rgba(0,181,204,.08), 0 0 20px rgba(0,181,204,.2); }
}

/* Auth card */
.qh-auth-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  background: var(--qh-surface);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-xl);
  box-shadow: var(--qh-shadow-lg), 0 0 0 1px rgba(0,181,204,.04);
  overflow: hidden;
}
.qh-auth-card__top {
  padding: 2.25rem 2.25rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--qh-border);
  background: linear-gradient(180deg, rgba(0,181,204,.04) 0%, transparent 100%);
}
.qh-auth-logo-mark {
  width: 52px; height: 52px; margin: 0 auto 1.1rem;
  background: var(--qh-brand-dim); border: 1px solid rgba(0,181,204,.2);
  border-radius: var(--qh-radius-lg);
  display: flex; align-items: center; justify-content: center;
}
.qh-auth-logo-mark svg { width: 24px; height: 24px; fill: var(--qh-brand); }
.qh-auth-card__title { font-size: 19px; font-weight: 700; color: var(--qh-text-1); margin-bottom: .3rem; letter-spacing: -.02em; }
.qh-auth-card__sub   { font-size: 13.5px; color: var(--qh-text-2); line-height: 1.55; }
.qh-auth-card__body  { padding: 1.75rem 2.25rem 2.25rem; }

/* OTP */
.qh-otp-hint { text-align: center; font-size: 13px; color: var(--qh-text-2); margin-bottom: 1.25rem; }
.qh-otp-hint strong { color: var(--qh-brand); font-weight: 600; }
.qh-otp-progress { display: flex; justify-content: center; gap: .4rem; margin-bottom: 1.25rem; }
.qh-otp-progress__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--qh-border-2);
  transition: background var(--qh-t), transform var(--qh-t);
}
.qh-otp-progress__dot.filled { background: var(--qh-brand); transform: scale(1.2); box-shadow: 0 0 0 3px var(--qh-brand-glow); }
.qh-otp-display { margin-bottom: 1rem; }
.qh-otp-display__label {
  font-size: 11px; font-weight: 600; color: var(--qh-text-3);
  text-transform: uppercase; letter-spacing: .08em; text-align: center; margin-bottom: .6rem;
}
.qh-otp-boxes { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.qh-otp-prefix {
  font-size: 17px; font-weight: 800; color: var(--qh-brand);
  background: var(--qh-brand-dim); border: 1px solid rgba(0,181,204,.2);
  border-radius: 6px; padding: 3px 8px; letter-spacing: .1em;
}
.qh-otp-sep { font-size: 20px; font-weight: 300; color: var(--qh-text-3); user-select: none; }
.qh-otp-digit {
  width: 42px; height: 52px; text-align: center;
  font-size: 22px; font-weight: 700; color: var(--qh-text-1);
  background: var(--qh-card-2); border: 1.5px solid var(--qh-border-2);
  border-radius: var(--qh-radius-sm); caret-color: var(--qh-brand);
  transition: border-color var(--qh-t), background var(--qh-t), box-shadow var(--qh-t), transform .1s;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.qh-otp-digit:focus {
  outline: none; border-color: var(--qh-brand);
  background: var(--qh-surface); box-shadow: 0 0 0 3px var(--qh-brand-glow);
  transform: scale(1.04);
}
.qh-otp-digit.filled { border-color: var(--qh-brand); background: var(--qh-brand-dim); }
.qh-otp-resend {
  display: flex; align-items: center; justify-content: center;
  gap: .4rem; margin-top: .75rem; font-size: 12.5px; color: var(--qh-text-2);
}
.qh-otp-resend button {
  background: none; border: none; color: var(--qh-brand); cursor: pointer;
  font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.qh-otp-resend button:disabled { color: var(--qh-text-3); cursor: not-allowed; text-decoration: none; }
.qh-otp-timer { color: var(--qh-text-3); font-size: 12px; }
#qh-otp-submit { margin-top: .85rem; }

/* =================================================================
   FORMS
   ================================================================= */
.qh-form-group { margin-bottom: .85rem; }
.qh-form-row { display: flex; gap: .75rem; }
.qh-form-row .qh-form-group { flex: 1; }
.qh-form-group--full { flex: 1 1 100% !important; }
.qh-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.qh-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--qh-text-2); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: .35rem;
}
.qh-input, .qh-textarea, .qh-select {
  width: 100%; background: var(--qh-surface);
  border: 1.5px solid var(--qh-border-2); color: var(--qh-text-1);
  border-radius: var(--qh-radius-sm); padding: .6rem .85rem;
  font-size: 14px; font-family: inherit; line-height: 1.5;
  transition: border-color var(--qh-t), box-shadow var(--qh-t);
}
.qh-input:hover:not(:focus), .qh-textarea:hover:not(:focus), .qh-select:hover:not(:focus) {
  border-color: var(--qh-text-3);
}
.qh-input:focus, .qh-textarea:focus, .qh-select:focus {
  outline: none; border-color: var(--qh-brand);
  box-shadow: 0 0 0 3px var(--qh-brand-glow);
}
.qh-input::placeholder, .qh-textarea::placeholder { color: var(--qh-text-3); }
.qh-textarea { resize: vertical; min-height: 80px; }
.qh-select { appearance: none; cursor: pointer; }
.qh-input--search { padding-left: 2.2rem; }
.qh-input--inline {
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: .2rem .4rem; font-size: inherit; color: inherit;
}
.qh-input--inline:focus { border-color: var(--qh-brand); background: var(--qh-brand-dim); outline: none; }
.qh-input--qty { width: 56px; text-align: center; padding: .3rem .4rem; }
.qh-input--sm  { padding: .4rem .65rem; font-size: 13px; }

.qh-notice {
  font-size: 13px; padding: .65rem .85rem;
  border-radius: var(--qh-radius-sm); margin-top: .5rem; border: 1px solid transparent;
}
.qh-notice--error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.qh-notice--success { background: #f0fdf4; border-color: #bbf7d0; color: #065f46; }
.qh-notice--info    { background: #f0fafb; border-color: #99dde4; color: #0099ad; }
.qh-notice:empty { display: none !important; }

/* Select dropdown arrow */
.qh-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center; background-size: 15px;
  padding-right: 2.1rem;
}
.qh-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* =================================================================
   CARDS
   ================================================================= */
.qh-card {
  background: var(--qh-card); border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg); padding: 1.25rem; margin-bottom: 1rem;
  box-shadow: var(--qh-shadow); overflow: visible;
}
.qh-card--compact { padding: .85rem 1rem; }
.qh-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; gap: .5rem; }
.qh-card__title  { font-size: 14px; font-weight: 600; color: var(--qh-text-1); }

/* =================================================================
   STAT CARDS  (Dashboard)
   ================================================================= */
.qh-dashboard-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.qh-stat-card {
  background: var(--qh-card); border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg); padding: 1.1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: var(--qh-shadow);
  transition: box-shadow var(--qh-t), transform .15s;
}
.qh-stat-card:hover { box-shadow: var(--qh-shadow-md); transform: translateY(-2px); }
.qh-stat-card--clickable { cursor: pointer; }
.qh-stat-card--clickable:hover { border-color: rgba(0,181,204,.25); box-shadow: 0 6px 20px rgba(0,181,204,.10); }
.qh-stat-card__icon {
  width: 44px; height: 44px; border-radius: var(--qh-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.qh-stat-card__icon svg { width: 22px; height: 22px; flex-shrink: 0; }
.qh-stat-card__icon--blue   { background: linear-gradient(135deg,#ccf1f5,#f0fafb); color: #00b5cc; }
.qh-stat-card__icon--green  { background: linear-gradient(135deg,#d1fae5,#ecfdf5); color: #065f46; }
.qh-stat-card__icon--amber  { background: linear-gradient(135deg,#fef3c7,#fffbeb); color: #92400e; }
.qh-stat-card__icon--red    { background: linear-gradient(135deg,#fee2e2,#fff1f2); color: #991b1b; }
.qh-stat-card__icon--purple { background: linear-gradient(135deg,#ede9fe,#f5f3ff); color: #5b21b6; }
.qh-stat-card__icon--indigo { background: linear-gradient(135deg,#e0e7ff,#eef2ff); color: #3730a3; }
.qh-stat-card__body { min-width: 0; }
.qh-stat-card__value { font-size: 22px; font-weight: 700; color: var(--qh-text-1); line-height: 1.1; }
.qh-stat-card__label { font-size: 12px; color: var(--qh-text-2); margin-top: .2rem; }

/* =================================================================
   DASHBOARD
   ================================================================= */
.qh-dash-greeting { margin-bottom: 1.5rem; }
.qh-dash-greeting__hello { font-size: 22px; font-weight: 700; color: var(--qh-text-1); letter-spacing: -.02em; }
.qh-dash-greeting__sub   { font-size: 14px; color: var(--qh-text-2); margin-top: .2rem; }

/* Pipeline — compact for sidebar */
.qh-pipeline { display: flex; align-items: flex-start; margin: .5rem 0 .35rem; overflow: hidden; }
.qh-pipeline__step {
  display: flex; flex-direction: column; align-items: center;
  gap: .18rem; flex: 1; min-width: 0; position: relative; padding: 0 2px;
}
.qh-pipeline__step + .qh-pipeline__step::before {
  content: ''; position: absolute; left: -50%; top: 8px;
  width: 100%; height: 2px; background: var(--qh-border-2);
}
.qh-pipeline__step--done::before,
.qh-pipeline__step--active::before { background: var(--qh-brand) !important; }
.qh-pipeline__dot {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--qh-border-2); border: 2px solid var(--qh-border-2);
  position: relative; z-index: 1; transition: all .18s;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff; line-height: 1;
}
.qh-pipeline__step--done .qh-pipeline__dot {
  background: var(--qh-brand); border-color: var(--qh-brand);
}
.qh-pipeline__step--active .qh-pipeline__dot {
  width: 20px; height: 20px;
  background: var(--qh-surface); border-color: var(--qh-brand); border-width: 2.5px;
  box-shadow: 0 0 0 3px var(--qh-brand-glow);
  color: var(--qh-brand);
}
.qh-pipeline__label {
  font-size: 9.5px; color: var(--qh-text-3); text-align: center; font-weight: 500;
  line-height: 1.2; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qh-pipeline__step--done .qh-pipeline__label   { color: var(--qh-brand); }
.qh-pipeline__step--active .qh-pipeline__label { color: var(--qh-brand); font-weight: 700; }

/* =================================================================
   PRODUCT CATALOG
   ================================================================= */
.qh-search-wrap { position: relative; flex: 1; max-width: 360px; }
.qh-search-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--qh-text-3); pointer-events: none; }
.qh-catalog-content { margin-top: .5rem; }
.qh-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1rem; }
.qh-catalog-heading {
  font-size: 12px; font-weight: 700; color: var(--qh-text-2);
  text-transform: uppercase; letter-spacing: .07em;
  margin: 1.25rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--qh-border);
}

/* Product card */
.qh-product-card {
  background: var(--qh-card); border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--qh-shadow);
  transition: border-color var(--qh-t), box-shadow var(--qh-t), transform var(--qh-t);
}
.qh-product-card:hover {
  border-color: rgba(0,181,204,.22);
  box-shadow: 0 8px 28px rgba(0,181,204,.10), 0 2px 6px rgba(0,0,0,.05);
  transform: translateY(-2px);
}

/* Image area */
.qh-product-card__img-wrap {
  height: 148px; background: linear-gradient(135deg, var(--qh-card-2) 0%, #e8eef6 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-bottom: 1px solid var(--qh-border);
  flex-shrink: 0; position: relative;
}
.qh-product-card__img             { width: 100%; height: 100%; object-fit: cover; }
.qh-product-card__img-placeholder { font-size: 40px; opacity: .45; user-select: none; }

/* Package badge over image */
.qh-product-card--package .qh-product-card__img-wrap {
  background: linear-gradient(135deg, #f0fafb 0%, #ccf1f5 100%);
}
.qh-pkg-count-chip {
  position: absolute; bottom: .6rem; right: .6rem;
  background: rgba(0,181,204,.12); border: 1px solid rgba(0,181,204,.2);
  color: var(--qh-brand); font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px; backdrop-filter: blur(4px);
}

/* Domain-unlocked badge — shows customer's domain logo bottom-left of card image */
.qh-domain-badge {
  position: absolute; bottom: 5px; left: 5px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.18);
  background: #fff; object-fit: contain; pointer-events: none;
}

/* Body — grows to fill */
.qh-product-card__body { padding: .9rem 1rem .65rem; flex: 1; display: flex; flex-direction: column; gap: 0; }
.qh-product-card__name { font-size: 13.5px; font-weight: 700; color: var(--qh-text-1); line-height: 1.35; margin-bottom: .25rem; }
.qh-product-card__sku  { font-size: 10.5px; color: var(--qh-text-3); font-family: 'SF Mono', 'Fira Code', monospace; margin-bottom: .5rem; letter-spacing: .02em; }
.qh-product-card__desc {
  font-size: 12.5px; color: var(--qh-text-2); line-height: 1.5; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Price area — consistent height row */
.qh-product-card__price-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .6rem 1rem; border-top: 1px solid var(--qh-border);
  background: var(--qh-card-2); flex-shrink: 0;
}
.qh-product-card__price    { font-size: 15px; font-weight: 800; color: var(--qh-text-1); letter-spacing: -.01em; }
.qh-product-card__price--na{ color: var(--qh-text-3); font-weight: 400; font-size: 12px; }

/* CTA footer */
.qh-product-card__footer {
  padding: .65rem .9rem; border-top: 1px solid var(--qh-border);
  flex-shrink: 0;
}
.qh-product-card__footer .qh-btn { width: 100%; justify-content: center; font-size: 13px; }

/* Pricing */
.qh-price-block       { display: flex; flex-direction: column; gap: 1px; }
.qh-price-guide       { font-size: 11px; color: var(--qh-text-3); text-decoration: line-through; }
.qh-price-new         { font-size: 15px; font-weight: 800; color: var(--qh-brand); letter-spacing: -.01em; }
.qh-price-discount    { display: flex; align-items: center; gap: .4rem; }
.qh-discount-badge {
  background: linear-gradient(135deg,#d1fae5,#ecfdf5); color: #065f46;
  border: 1px solid rgba(5,150,105,.25);
  border-radius: 4px; font-size: 10px; font-weight: 700; padding: 2px 6px;
}

/* PDF link */
.qh-pdf-link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--qh-brand); font-size: 11.5px; font-weight: 500;
  text-decoration: none; padding: .3rem .6rem;
  border: 1px solid rgba(0,181,204,.18); border-radius: var(--qh-radius-sm);
  background: var(--qh-brand-dim); transition: background var(--qh-t);
  white-space: nowrap; flex-shrink: 0;
}
.qh-pdf-link:hover  { background: rgba(0,181,204,.14); }

/* Category tag */
.qh-cat-tag {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  background: #f0fafb; color: #00b5cc; border: 1px solid #99dde4;
  border-radius: 99px; padding: 2px 8px; white-space: nowrap;
  margin-bottom: .3rem;
}
.qh-cat-tag--overlay {
  position: absolute; top: .5rem; left: .5rem;
  backdrop-filter: blur(4px); background: rgba(255,255,255,.85);
}

/* Catalog filter toolbar */
.qh-catalog-filters {
  display: flex; flex-direction: column; gap: .6rem;
  margin-bottom: 1rem;
}
.qh-cat-chips {
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.qh-cat-chip {
  padding: .28rem .8rem; border-radius: 99px; font-size: .78rem; font-weight: 600;
  border: 1.5px solid var(--qh-border-2); background: var(--qh-card);
  color: var(--qh-text-2); cursor: pointer; font-family: inherit;
  transition: all .12s; white-space: nowrap;
}
.qh-cat-chip:hover         { border-color: rgba(0,181,204,.3); color: var(--qh-brand); background: var(--qh-brand-dim); }
.qh-cat-chip--active       { background: var(--qh-brand); border-color: var(--qh-brand); color: #fff; }
.qh-catalog-controls {
  display: flex; align-items: center; gap: .5rem;
}
.qh-catalog-sort {
  padding: .38rem .7rem; border: 1.5px solid var(--qh-border-2);
  border-radius: var(--qh-radius-sm); background: var(--qh-card);
  font-size: .8rem; color: var(--qh-text-1); cursor: pointer;
  font-family: inherit; outline: none; flex: 1; max-width: 220px;
}
.qh-catalog-sort:focus { border-color: var(--qh-brand); box-shadow: 0 0 0 3px var(--qh-brand-dim); }
.qh-view-toggle { display: flex; border: 1.5px solid var(--qh-border-2); border-radius: var(--qh-radius-sm); overflow: hidden; }
.qh-view-btn {
  padding: .35rem .65rem; background: var(--qh-card); border: none;
  color: var(--qh-text-3); cursor: pointer; font-family: inherit; font-size: .85rem;
  transition: all .12s;
}
.qh-view-btn:hover        { background: var(--qh-brand-dim); color: var(--qh-brand); }
.qh-view-btn--active      { background: var(--qh-brand); color: #fff; }

/* List view for catalog */
.qh-catalog-list { display: flex; flex-direction: column; gap: .65rem; }
.qh-product-card--list {
  background: var(--qh-card); border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg); overflow: hidden;
  box-shadow: var(--qh-shadow);
  transition: border-color var(--qh-t), box-shadow var(--qh-t);
}
.qh-product-card--list:hover {
  border-color: rgba(0,181,204,.22);
  box-shadow: 0 4px 16px rgba(0,181,204,.08);
}
.qh-product-card__list-body {
  display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem;
  justify-content: space-between;
}
.qh-product-card__list-body > div:first-child { flex: 1; min-width: 0; }
.qh-product-card__list-thumb { width: 56px; height: 56px; min-width: 56px; object-fit: contain; border-radius: 8px; border: 1px solid var(--qh-border); background: #f8fafc; }
.qh-product-card__list-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex-shrink: 0;
}
.qh-product-card__desc--clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; color: var(--qh-text-2); margin-top: .25rem;
}

/* =================================================================
   CATALOG — TOOLBAR & CATEGORY NAV
   ================================================================= */
.qh-catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .55rem 0; margin-bottom: .65rem; flex-wrap: wrap;
}
.qh-catalog-count { font-size: 12.5px; color: var(--qh-text-3); font-weight: 500; }
.qh-catalog-toolbar__right { display: flex; align-items: center; gap: .5rem; }
.qh-catalog-section-gap { height: 1.5rem; }
.qh-catalog-heading__count {
  font-size: .8em; font-weight: 500; color: var(--qh-text-3); margin-left: .35rem;
}

/* ================================================================
   CATALOG SIDEBAR LAYOUT
   ================================================================ */
.qh-catalog-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.qh-catalog-sidebar {
  width: 196px;
  flex-shrink: 0;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  scrollbar-width: none;
}
.qh-catalog-sidebar::-webkit-scrollbar { display: none; }
.qh-catalog-body {
  flex: 1;
  min-width: 0;
}
.qh-catalog-sidebar__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--qh-text-3);
  padding: .3rem 0 .5rem;
  border-bottom: 1px solid var(--qh-border);
  margin-bottom: .3rem;
}
/* Vertical category nav */
.qh-cat-nav-v {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.qh-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .42rem .6rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--qh-text-2);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background var(--qh-t), color var(--qh-t);
  gap: .4rem;
}
.qh-cat-btn:hover { background: var(--qh-card-2); color: var(--qh-text); }
.qh-cat-btn--active {
  background: var(--qh-brand-dim);
  color: var(--qh-brand);
  font-weight: 600;
}
.qh-cat-btn__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qh-cat-btn__count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--qh-text-3);
  background: var(--qh-card-2);
  border-radius: 10px;
  padding: 1px 6px;
  line-height: 1.5;
}
.qh-cat-btn--active .qh-cat-btn__count {
  background: rgba(0,181,204,.15);
  color: var(--qh-brand);
}
.qh-catalog-sidebar__cta {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--qh-border);
}
.qh-catalog-sidebar__cta p {
  font-size: 12px;
  color: var(--qh-text-3);
  margin: 0 0 .5rem;
  line-height: 1.4;
}

/* Mobile: sidebar becomes a horizontal scroll row */
@media (max-width: 700px) {
  .qh-catalog-layout { flex-direction: column; gap: .75rem; }
  .qh-catalog-sidebar {
    width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .qh-catalog-sidebar__label { display: none; }
  .qh-cat-nav-v {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .3rem;
    padding-bottom: .25rem;
    scrollbar-width: none;
  }
  .qh-cat-nav-v::-webkit-scrollbar { display: none; }
  .qh-cat-btn {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
    border-radius: 99px;
    border: 1.5px solid var(--qh-border-2);
    background: var(--qh-surface);
    padding: .3rem .85rem;
    font-size: 12.5px;
  }
  .qh-cat-btn--active {
    background: var(--qh-brand);
    border-color: var(--qh-brand);
    color: #fff;
  }
  .qh-cat-btn--active .qh-cat-btn__count { background: rgba(255,255,255,.25); color: #fff; }
  .qh-catalog-sidebar__cta { display: none; }
}

/* Legacy horizontal nav (kept for any remaining usage) */
.qh-cat-nav {
  display: flex; flex-wrap: nowrap; gap: .3rem; overflow-x: auto; scrollbar-width: none;
  padding: .85rem 0 .75rem; border-bottom: 1px solid var(--qh-border); margin-bottom: .8rem;
  -webkit-overflow-scrolling: touch;
}
.qh-cat-nav::-webkit-scrollbar { display: none; }
.qh-cat-nav__btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem 1rem; border-radius: 99px;
  border: 1.5px solid var(--qh-border-2); background: var(--qh-surface);
  color: var(--qh-text-2); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all var(--qh-t);
}
.qh-cat-nav__btn:hover { border-color: rgba(0,181,204,.35); color: var(--qh-brand); background: var(--qh-brand-dim); }
.qh-cat-nav__btn--active {
  background: var(--qh-brand) !important; border-color: var(--qh-brand) !important;
  color: #fff !important; font-weight: 600;
}
.qh-cat-nav__count {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.25); border-radius: 99px;
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; min-width: 22px;
}
.qh-cat-nav__btn:not(.qh-cat-nav__btn--active) .qh-cat-nav__count {
  background: var(--qh-card-2); color: var(--qh-text-3);
}

/* =================================================================
   PREMIUM PRODUCT CARD  (.qh-pcard)
   ================================================================= */
.qh-pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.qh-pcard-list { display: flex; flex-direction: column; gap: .6rem; }

/* Base card */
.qh-pcard {
  background: var(--qh-surface);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg);
  box-shadow: var(--qh-shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.qh-pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.09), 0 2px 6px rgba(0,181,204,.08);
  border-color: rgba(0,181,204,.3);
}

/* Image area */
.qh-pcard__media {
  position: relative; height: 190px;
  background: linear-gradient(145deg, #f0f9ff 0%, #e8f4ff 100%);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.qh-pcard__img {
  width: 100%; height: 100%; object-fit: contain; padding: .75rem;
  transition: transform .35s ease;
}
.qh-pcard:hover .qh-pcard__img { transform: scale(1.05); }
.qh-pcard__img-ph {
  width: 52px; height: 52px; color: var(--qh-gray-300);
}

/* Overlay badges */
.qh-pcard__series-badge {
  position: absolute; top: .55rem; left: .55rem;
  background: rgba(0,181,204,.90); backdrop-filter: blur(4px);
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 99px;
  text-transform: uppercase; white-space: nowrap; max-width: 60%;
  overflow: hidden; text-overflow: ellipsis;
}
.qh-pcard__discount-chip {
  position: absolute; top: .55rem; right: .55rem;
  background: var(--qh-nc-red); color: #fff;
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px;
}

/* Body */
.qh-pcard__body {
  padding: .85rem 1rem .6rem; flex: 1;
  display: flex; flex-direction: column; gap: .2rem;
}
.qh-pcard__name {
  font-size: 13.5px; font-weight: 700; color: var(--qh-text-1); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qh-pcard__sku { font-size: 10.5px; color: var(--qh-text-3); font-family: 'SF Mono','Fira Code',monospace; }
.qh-pcard__desc {
  font-size: 12px; color: var(--qh-text-2); line-height: 1.5; margin-top: .15rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Document links */
.qh-pcard__docs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.qh-pcard__doc {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 10px; font-weight: 600; color: var(--qh-brand);
  border: 1px solid rgba(0,181,204,.25); border-radius: 4px;
  padding: 2px 7px; text-decoration: none; background: var(--qh-brand-dim);
  transition: background var(--qh-t), border-color var(--qh-t);
  white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}
.qh-pcard__doc:hover { background: rgba(0,181,204,.14); border-color: rgba(0,181,204,.45); }
.qh-pcard__doc svg { flex-shrink: 0; }

/* Footer — price + CTA */
.qh-pcard__footer {
  padding: .65rem 1rem .8rem;
  border-top: 1px solid var(--qh-border);
  display: flex; flex-direction: column; gap: .5rem;
}
.qh-pcard__price-area { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.qh-pcard__price      { font-size: 15.5px; font-weight: 800; color: var(--qh-text-1); letter-spacing: -.01em; }
.qh-pcard__price-old  { font-size: 12px; color: var(--qh-text-3); text-decoration: line-through; }
.qh-pcard__price-na   { font-size: 12px; color: var(--qh-text-3); font-weight: 400; }
.qh-pcard__price-wrap { display: flex; align-items: baseline; gap: .4rem; }
.qh-pcard__footer .qh-btn { width: 100%; justify-content: center; font-size: 13px; }

/* Series tag (inline, for list view) */
.qh-pcard__series-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--qh-brand); background: var(--qh-brand-dim);
  border: 1px solid rgba(0,181,204,.2); border-radius: 4px;
  padding: 2px 7px; margin-bottom: .25rem;
}

/* List variant */
.qh-pcard--list {
  flex-direction: row; border-radius: var(--qh-radius);
  height: auto; align-items: stretch;
}
.qh-pcard--list:hover { transform: none; box-shadow: 0 2px 10px rgba(0,0,0,.07), 0 1px 3px rgba(0,181,204,.08); }
.qh-pcard__list-media {
  width: 100px; flex-shrink: 0; position: relative;
  background: linear-gradient(145deg, #f0f9ff 0%, #e8f4ff 100%);
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--qh-border);
}
.qh-pcard__list-media--img { overflow: hidden; }
.qh-pcard__list-media .qh-pcard__img {
  width: 100%; height: 100%; object-fit: contain; padding: .4rem;
  transition: transform .3s ease;
}
.qh-pcard--list:hover .qh-pcard__list-media .qh-pcard__img { transform: scale(1.06); }
.qh-pcard__list-media .qh-pcard__img-ph { width: 36px; height: 36px; }
.qh-pcard__list-body {
  flex: 1; min-width: 0; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .15rem;
}
.qh-pcard__list-right {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; gap: .45rem; padding: .75rem 1rem;
  border-left: 1px solid var(--qh-border); min-width: 170px;
}
.qh-pcard__list-right .qh-pcard__price-area { justify-content: flex-end; }
.qh-pcard__list-right .qh-btn { white-space: nowrap; }

/* =================================================================
   CATALOG LIGHTBOX
   ================================================================= */
#qh-catalog-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
#qh-catalog-lightbox[hidden] { display: none !important; }
#qh-catalog-lightbox-bd {
  position: absolute; inset: 0;
  background: rgba(10,18,30,.85); backdrop-filter: blur(6px);
  cursor: zoom-out;
}
#qh-catalog-lightbox-wrap {
  position: relative; z-index: 1;
  max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
#qh-catalog-lightbox-img {
  max-width: 90vw; max-height: 82vh;
  object-fit: contain; border-radius: var(--qh-radius-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  background: var(--qh-surface);
}
#qh-catalog-lightbox-name {
  color: rgba(255,255,255,.75); font-size: 13px; font-weight: 500;
  text-align: center; max-width: 480px; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#qh-catalog-lightbox-close {
  position: absolute; top: -2.5rem; right: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.12); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.2); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--qh-t);
}
#qh-catalog-lightbox-close:hover { background: rgba(255,255,255,.22); }

/* Quotes search toolbar */
.qh-quotes-toolbar {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  margin-bottom: .9rem;
}
.qh-quotes-search-wrap { margin-left: auto; }
.qh-quotes-search-input {
  padding: .38rem .75rem; border: 1.5px solid var(--qh-border-2);
  border-radius: var(--qh-radius-sm); background: var(--qh-card);
  font-size: .82rem; color: var(--qh-text-1); font-family: inherit;
  outline: none; min-width: 180px;
  transition: border-color var(--qh-t), box-shadow var(--qh-t);
}
.qh-quotes-search-input:focus { border-color: var(--qh-brand); box-shadow: 0 0 0 3px var(--qh-brand-dim); }
.qh-table__row--clickable { cursor: pointer; }
.qh-table__row--clickable:hover { background: #f0fafb; }

/* Sidebar product display */
.qh-bsd-item { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--qh-border); }
.qh-bsd-item:last-child { border-bottom: none; }
.qh-bsd-item__name  { font-size: 13px; color: var(--qh-text-1); font-weight: 500; }
.qh-bsd-item__sku   { font-size: 11px; color: var(--qh-text-3); }
.qh-bsd-item__price { font-size: 13px; font-weight: 600; color: var(--qh-text-1); flex-shrink: 0; }
.qh-bsd-empty       { font-size: 13px; color: var(--qh-text-3); text-align: center; padding: 1.5rem 0; }

/* =================================================================
   TABLES
   ================================================================= */
.qh-table-wrap { overflow-x: auto; border: 1px solid var(--qh-border); border-radius: var(--qh-radius-lg); background: var(--qh-card); box-shadow: var(--qh-shadow); }
.qh-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.qh-table thead tr { background: var(--qh-card-2); border-bottom: 1px solid var(--qh-border); }
.qh-table th {
  text-align: left; font-size: 11px; font-weight: 700;
  color: var(--qh-text-2); text-transform: uppercase; letter-spacing: .07em;
  padding: .75rem 1rem; white-space: nowrap;
}
.qh-table td { padding: .8rem 1rem; color: var(--qh-text-1); border-bottom: 1px solid var(--qh-border); vertical-align: middle; word-break: break-word; }
.qh-table td:first-child, .qh-table th:first-child { padding-left: 1.25rem !important; }
.qh-table td:last-child,  .qh-table th:last-child  { padding-right: 1.25rem !important; }
.qh-table tbody tr:last-child td { border-bottom: none; }
.qh-table tbody tr { transition: background var(--qh-t); }
.qh-table tbody tr:hover { background: #f0fafb; cursor: pointer; }
.qh-table__empty td { text-align: center; color: var(--qh-text-2); padding: 2.5rem; font-style: italic; }
.qh-table__num { font-weight: 700; color: var(--qh-brand) !important; font-family: monospace; }
.qh-table__actions { display: flex; gap: .4rem; }

/* =================================================================
   QUOTE DETAIL LAYOUT
   ================================================================= */
.qh-quote-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.25rem; align-items: start; }
.qh-quote-layout__main { min-width: 0; }
.qh-quote-layout__sidebar { position: sticky; top: calc(54px + 1.5rem); }

/* Info rows */
.qh-info-row { display: flex; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--qh-border); font-size: 13.5px; }
.qh-info-row:last-child { border-bottom: none; }
.qh-info-row__label { color: var(--qh-text-2); min-width: 130px; flex-shrink: 0; font-size: 12.5px; }
.qh-info-row__value { color: var(--qh-text-1); font-weight: 500; }

/* Add bar */
.qh-quote-add-bar { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* Builder search */
.qh-builder-search-wrap { position: relative; flex: 1; min-width: 200px; }
.qh-builder-search-input {
  width: 100%; background: var(--qh-surface);
  border: 1.5px solid var(--qh-border-2); color: var(--qh-text-1);
  border-radius: var(--qh-radius-sm); padding: .5rem .8rem;
  font-size: 13.5px; font-family: inherit;
  transition: border-color var(--qh-t), box-shadow var(--qh-t);
}
.qh-builder-search-input:focus { outline: none; border-color: var(--qh-brand); box-shadow: 0 0 0 3px var(--qh-brand-glow); }
.qh-builder-search-input::placeholder { color: var(--qh-text-3); }
.qh-builder-search-drop {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--qh-surface); border: 1px solid var(--qh-border-2);
  border-radius: var(--qh-radius); z-index: 50;
  max-height: 260px; overflow-y: auto; box-shadow: var(--qh-shadow-md);
}
.qh-builder-search-drop button {
  width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--qh-border); padding: .65rem .9rem;
  font-size: 13px; color: var(--qh-text-1); cursor: pointer; transition: background var(--qh-t);
}
.qh-builder-search-drop button:last-child { border-bottom: none; }
.qh-builder-search-drop button:hover { background: var(--qh-brand-dim); color: var(--qh-brand); }

/* Quote sections — unified bordered card */
.qh-quote-section {
  margin-bottom: .85rem;
  border: 1px solid #b2e4ec;
  border-radius: var(--qh-radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,181,204,.07), 0 1px 2px rgba(0,0,0,.03);
}
.qh-quote-section__header {
  display: flex; align-items: center;
  padding: .5rem .85rem;
  background: #f0fafb;
  border-bottom: 1px solid #ceeef4;
  border-left: 3px solid var(--qh-brand);
  gap: .45rem;
}
.qh-quote-section__title-wrap { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; }
.qh-quote-section__title { font-size: 13px; font-weight: 700; color: var(--qh-brand); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Quote items */
.qh-quote-items { border: none; background: var(--qh-surface); }

/* Section subtotal */
.qh-quote-section__total {
  padding: .38rem .85rem;
  background: #f6fdfe;
  border-top: 1px solid #ceeef4;
  text-align: right; font-size: 12.5px; color: var(--qh-text-2); font-weight: 500;
}
.qh-quote-section__total strong { color: var(--qh-brand); }
.qh-quote-items__header {
  display: grid; grid-template-columns: 20px 1fr 70px 140px 110px 44px; gap: .65rem;
  padding: .45rem .85rem; background: var(--qh-card-2);
  border-bottom: 1px solid var(--qh-border);
  font-size: 11px; font-weight: 700; color: var(--qh-text-2);
  text-transform: uppercase; letter-spacing: .06em;
}
.qh-quote-items__empty { padding: 1rem .85rem; font-size: 13px; color: var(--qh-text-3); font-style: italic; }
.qh-quote-item {
  display: grid; grid-template-columns: 20px 1fr 70px 140px 110px 44px; gap: .65rem;
  align-items: start; padding: .6rem .85rem;
  border-bottom: 1px solid var(--qh-border); transition: background var(--qh-t); font-size: 13.5px;
}
.qh-quote-item:last-child { border-bottom: none; }
.qh-quote-item:hover { background: #f0fafb; }
.qh-quote-item--editable:hover { background: var(--qh-brand-dim); }
.qh-quote-item__name  { color: var(--qh-text-1); font-weight: 500; }
.qh-quote-item__sku   { font-size: 11px; color: var(--qh-text-3); font-family: monospace; }
.qh-quote-item__desc  { font-size: 12px; color: var(--qh-text-2); margin-top: .15rem; }
.qh-quote-item__info  { min-width: 0; display: flex; align-items: flex-start; gap: .5rem; }
.qh-quote-item__info-text { min-width: 0; flex: 1; }
.qh-quote-item__thumb { width: 36px; height: 36px; min-width: 36px; object-fit: contain; border-radius: 5px; border: 1px solid var(--qh-border); background: #f8fafc; cursor: zoom-in; }
.qh-quote-item__qty   { display: flex; justify-content: center; padding-top: 3px; }
/* Stable, visible-at-rest qty input */
.qh-quote-item__qty .qh-input--qty,
.qh-quote-item__qty input[type="number"] {
  width: 56px; height: 30px;
  text-align: center; font-variant-numeric: tabular-nums; font-weight: 600;
  border: 1.5px solid var(--qh-border, #e2e8f0); border-radius: 6px;
  background: #fff; padding: 0 .35rem; font-size: 13px;
  font-family: inherit; color: var(--qh-text-1);
  transition: border-color .12s, box-shadow .12s;
}
.qh-quote-item__qty input[type="number"]:hover { border-color: var(--qh-border-2, #cbd5e1); }
.qh-quote-item__qty input[type="number"]:focus {
  border-color: var(--qh-accent, #00b5cc); outline: none;
  box-shadow: 0 0 0 3px rgba(0,181,204,0.18);
}
.qh-quote-item__qty input[type="number"]::-webkit-inner-spin-button,
.qh-quote-item__qty input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qh-quote-item__qty input[type="number"] { -moz-appearance: textfield; }

.qh-quote-item__price {
  text-align: right; color: var(--qh-text-1); font-weight: 600;
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.qh-quote-item__total {
  text-align: right; color: var(--qh-brand); font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
  padding-right: .35rem;
  white-space: nowrap;
}
.qh-quote-item__actions {
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 2px;
}
.qh-quote-item__actions .qh-btn--ghost,
.qh-quote-item__actions .qh-btn--xs {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1;
  border-radius: 6px;
}

/* Quote total */
.qh-quote-total {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .85rem 1.1rem; background: var(--qh-card-2);
  border: 1px solid var(--qh-border); border-radius: var(--qh-radius); margin-top: .75rem;
}
.qh-quote-total__line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.qh-quote-total__line--strike  { font-size: 14px; color: var(--qh-text-2); }
.qh-quote-total__line--savings { font-size: 14px; color: #15803d; font-weight: 700; }
.qh-quote-total__line--final {
  border-top: 2px solid #1e3a8a; padding-top: .4rem; margin-top: .15rem;
  font-size: 15px;
}
.qh-quote-total__label { font-size: 14px; font-weight: 600; color: var(--qh-text-2); }
.qh-quote-total__value { font-size: 22px; font-weight: 800; color: var(--qh-text-1); letter-spacing: -.02em; }

/* Per-line price stack — used when a discount is shown on a quote line */
.qh-price-stack {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  line-height: 1.2;
}
.qh-price-list {
  text-decoration: line-through;
  color: var(--qh-gray-400, #94a3b8);
  font-size: .82em; font-variant-numeric: tabular-nums;
}
.qh-price-final { font-weight: 600; font-variant-numeric: tabular-nums; }
.qh-price-disc-pill {
  display: inline-block;
  background: #dcfce7; color: #15803d;
  font-size: .7rem; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
  margin-top: 1px; cursor: help; white-space: nowrap;
}
.qh-price--empty { color: var(--qh-gray-400, #94a3b8); }

/* Drag handle */
.qh-drag-handle { cursor: grab; color: var(--qh-text-3); padding: .25rem; border-radius: 4px; transition: color var(--qh-t); flex-shrink: 0; }
.qh-drag-handle:hover { color: var(--qh-text-2); }
.qh-drag-handle--hidden  { visibility: hidden; }
.qh-drag-handle--section { color: rgba(0,181,204,.4); }

/* Ref copy / autosave */
.qh-ref-copy { background: none; border: none; cursor: pointer; color: var(--qh-text-3); font-size: 12px; padding: .15rem .3rem; border-radius: 3px; transition: color var(--qh-t), background var(--qh-t); }
.qh-ref-copy:hover { color: var(--qh-brand); background: var(--qh-brand-dim); }
.qh-need-by         { font-size: 12px; color: var(--qh-text-2); }
.qh-need-by--urgent { color: var(--qh-red); font-weight: 600; }
.qh-autosave-indicator { font-size: 12px; color: var(--qh-text-3); }

/* =================================================================
   CHAT / COMMENTS
   ================================================================= */
.qh-chat { display: flex; flex-direction: column; gap: .85rem; }
.qh-chat__empty { font-size: 13px; color: var(--qh-text-3); text-align: center; padding: 1.5rem 0; }
.qh-chat__msg { display: flex; gap: .65rem; max-width: 88%; }
.qh-chat__msg--seller   { align-self: flex-start; }
.qh-chat__msg--customer { align-self: flex-end; flex-direction: row-reverse; }
.qh-chat__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--qh-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.qh-chat__msg--customer .qh-chat__avatar { background: var(--qh-green); }
.qh-chat__bubble {
  background: var(--qh-card-2); border: 1px solid var(--qh-border);
  border-radius: 4px 12px 12px 12px;
  padding: .7rem 1rem; font-size: 13.5px; color: var(--qh-text-1); line-height: 1.5;
}
.qh-chat__msg--customer .qh-chat__bubble {
  background: #f0fafb; border-color: #99dde4;
  border-radius: 12px 4px 12px 12px;
}
.qh-chat__time { font-size: 11px; color: var(--qh-text-3); margin-top: .25rem; }
.qh-chat-input { margin-top: .75rem; display: flex; gap: .5rem; }
.qh-chat-input .qh-textarea { flex: 1; min-height: 60px; }

/* =================================================================
   STATUS PILLS & BADGES
   ================================================================= */
.qh-status-pills { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.qh-pill {
  background: var(--qh-surface); border: 1px solid var(--qh-border);
  color: var(--qh-text-2); border-radius: 99px; padding: .3rem .85rem;
  font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all var(--qh-t);
}
.qh-pill:hover { color: var(--qh-text-1); border-color: var(--qh-border-2); background: var(--qh-card-2); }
.qh-pill--active {
  background: var(--qh-brand-dim) !important;
  border-color: rgba(0,181,204,.25) !important;
  color: var(--qh-brand) !important; font-weight: 600;
}

.qh-badge {
  display: inline-flex; align-items: center;
  border-radius: 6px; font-size: 11px; font-weight: 700;
  padding: 2px 7px; letter-spacing: .02em; white-space: nowrap;
}
.qh-badge--draft      { background: #f1f5f9; color: #475569; }
.qh-badge--submitted  { background: #ccf1f5; color: #00b5cc; }
.qh-badge--processing { background: #e0e7ff; color: #3730a3; }
.qh-badge--answered   { background: #fef3c7; color: #92400e; }
.qh-badge--accepted   { background: #d1fae5; color: #065f46; }
.qh-badge--rejected   { background: #fee2e2; color: #991b1b; }
.qh-badge--ordered    { background: #ccf1f5; color: #00b5cc; }
.qh-badge--levert     { background: #d1fae5; color: #065f46; }
.qh-badge--cancelled  { background: #f1f5f9; color: #475569; }
.qh-badge--pending    { background: #fef3c7; color: #92400e; }
.qh-badge--approved   { background: #d1fae5; color: #065f46; }
.qh-badge--sent       { background: #f0fafb; color: #0099ad; }
.qh-badge--revised    { background: #fef3c7; color: #92400e; }

/* =================================================================
   MODALS
   ================================================================= */
.qh-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.qh-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(3px); }
.qh-modal__dialog {
  position: relative; z-index: 1; background: var(--qh-surface);
  border: 1px solid var(--qh-border); border-radius: var(--qh-radius-xl);
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--qh-shadow-lg), 0 0 0 1px rgba(0,181,204,.04);
  animation: qh-modal-in .18s ease;
}
@keyframes qh-modal-in { from{transform:scale(.96) translateY(8px);opacity:0} to{transform:none;opacity:1} }
.qh-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--qh-border);
}
.qh-modal__header h3 { font-size: 16px; font-weight: 700; color: var(--qh-text-1); }
.qh-modal__close {
  width: 28px; height: 28px; background: var(--qh-card-2);
  border: 1px solid var(--qh-border); border-radius: 50%;
  color: var(--qh-text-2); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all var(--qh-t);
}
.qh-modal__close:hover { background: #fee2e2; color: var(--qh-red); border-color: #fecaca; }
.qh-modal__body   { padding: 1.5rem; }
.qh-modal__footer {
  display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap;
  padding: 1rem 1.5rem; border-top: 1px solid var(--qh-border);
  background: var(--qh-card-2);
  border-radius: 0 0 var(--qh-radius-xl) var(--qh-radius-xl);
}

/* Help modal */
.qh-help-modal .qh-modal__dialog { max-width: 580px; }
.qh-help-body { display: flex; flex-direction: column; gap: 1.25rem; }
.qh-help-section { background: var(--qh-card-2); border: 1px solid var(--qh-border); border-radius: var(--qh-radius); padding: 1rem; }
.qh-help-section__title { font-size: 13.5px; font-weight: 700; color: var(--qh-text-1); margin-bottom: .85rem; }
.qh-help-step { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .6rem; font-size: 13.5px; color: var(--qh-text-2); line-height: 1.5; }
.qh-help-step:last-child { margin-bottom: 0; }
.qh-help-step__num { width: 22px; height: 22px; border-radius: 50%; background: var(--qh-brand-dim); border: 1px solid rgba(0,181,204,.2); color: var(--qh-brand); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qh-help-step__text strong { color: var(--qh-text-1); }
.qh-help-tip { background: var(--qh-brand-dim); border: 1px solid rgba(0,181,204,.18); border-radius: var(--qh-radius); padding: .85rem 1rem; font-size: 13px; color: var(--qh-text-2); line-height: 1.5; }
.qh-help-tip strong { color: var(--qh-text-1); }

/* =================================================================
   TOASTS
   ================================================================= */
.qh-toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; max-width: 340px; }
.qh-toast {
  background: var(--qh-surface); border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius); padding: .75rem 1rem;
  font-size: 13.5px; color: var(--qh-text-1); box-shadow: var(--qh-shadow-md);
  display: flex; align-items: center; gap: .65rem;
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.qh-toast.show     { opacity: 1; transform: none; }
.qh-toast--success { border-left: 3px solid var(--qh-green); }
.qh-toast--error   { border-left: 3px solid var(--qh-red); }
.qh-toast--info    { border-left: 3px solid var(--qh-brand); }

/* =================================================================
   SKELETON LOADERS
   ================================================================= */
@keyframes qh-shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
.qh-skeleton {
  background: linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
  background-size: 1200px 100%; animation: qh-shimmer 1.5s infinite;
  border-radius: var(--qh-radius);
}
.qh-skeleton--card  { height: 120px; margin-bottom: 1rem; }
.qh-skeleton--table { height: 200px; margin-bottom: 1rem; }

/* =================================================================
   EMPTY STATES
   ================================================================= */
.qh-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1.5rem; gap: .75rem; }
.qh-empty-state__icon  { font-size: 40px; opacity: .35; }
.qh-empty-state__title { font-size: 16px; font-weight: 600; color: var(--qh-text-1); }
.qh-empty-state__sub   { font-size: 13.5px; color: var(--qh-text-2); max-width: 320px; line-height: 1.5; }
.qh-empty-msg          { font-size: 13px; color: var(--qh-text-3); text-align: center; padding: 2rem; }

/* =================================================================
   MISC
   ================================================================= */
.qh-link { color: var(--qh-brand); text-decoration: none; font-weight: 500; }
.qh-link:hover { text-decoration: underline; }
.qh-open-quote { cursor: pointer; }

hr { border: none; border-top: 1px solid var(--qh-border); margin: 1.25rem 0; }

/* =================================================================
   PROFILE VIEW
   ================================================================= */
.qh-profile-grid {
  display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start;
}
.qh-profile-avatar-card {
  background: var(--qh-card); border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg); padding: 2rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center; box-shadow: var(--qh-shadow);
}
.qh-profile-avatar-large {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--qh-brand) 0%, #33c4d4 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: #fff;
  box-shadow: 0 4px 20px rgba(0,181,204,.3);
}
.qh-profile-name    { font-size: 17px; font-weight: 700; color: var(--qh-text-1); }
.qh-profile-company { font-size: 13px; color: var(--qh-text-2); }
.qh-profile-email   {
  font-size: 12px; color: var(--qh-text-3);
  background: var(--qh-card-2); padding: .3rem .75rem;
  border-radius: 99px; border: 1px solid var(--qh-border);
}
.qh-autosave-indicator[data-state="saving"] { color: var(--qh-amber); }
.qh-autosave-indicator[data-state="saved"]  { color: var(--qh-green); }
.qh-autosave-indicator[data-state="error"]  { color: var(--qh-red); }

@media (max-width: 768px) { .qh-profile-grid { grid-template-columns: 1fr; } }

/* =================================================================
   FOOTER
   ================================================================= */
.qh-footer {
  padding: 1.25rem 1.5rem; text-align: center;
  font-size: 12px; color: var(--qh-text-3);
  border-top: 1px solid var(--qh-border); margin-top: auto;
  background: var(--qh-surface);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 900px) {
  .qh-quote-layout { grid-template-columns: 1fr; }
  .qh-quote-layout__sidebar { position: static; }
  .qh-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); }
  .qh-dashboard-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .qh-header__inner { padding: 0 1rem; gap: .75rem; }
  .qh-main { padding: 1rem; }
  .qh-nav-btn { font-size: 12px; padding: .4rem .65rem; }
  .qh-avatar-pill__name { display: none; }
  .qh-dashboard-stats { grid-template-columns: 1fr 1fr; }
  .qh-catalog-grid { grid-template-columns: 1fr 1fr; }
  .qh-form-row { flex-direction: column; }
  .qh-form-grid-2 { grid-template-columns: 1fr; }
  .qh-quote-items__header { display: none; }
  .qh-quote-item { grid-template-columns: 20px 1fr auto; grid-template-rows: auto auto; font-size: 13px; }
  .qh-auth-card__top  { padding: 1.75rem 1.5rem 1.25rem; }
  .qh-auth-card__body { padding: 1.5rem; }
}

/* =================================================================
   NATIVE CHECKBOX — custom styled
   ================================================================= */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; min-width: 16px;
  border: 1.5px solid var(--qh-border-2); border-radius: 4px;
  background: var(--qh-surface); cursor: pointer; position: relative;
  transition: border-color var(--qh-t), background var(--qh-t), box-shadow var(--qh-t);
  vertical-align: middle; flex-shrink: 0;
}
input[type="checkbox"]:hover { border-color: var(--qh-brand); }
input[type="checkbox"]:checked { background: var(--qh-brand); border-color: var(--qh-brand); box-shadow: 0 0 0 2px var(--qh-brand-glow); }
input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1.5px;
  width: 5px; height: 9px; border: 2px solid #fff;
  border-top: none; border-left: none; transform: rotate(45deg);
}
input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 3px var(--qh-brand-glow); }

/* =================================================================
   NUMBER INPUTS — hide spinners
   ================================================================= */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { opacity: 0; transition: opacity .15s; }
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-outer-spin-button { opacity: .6; }

/* =================================================================
   AUTOFILL
   ================================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--qh-surface) inset !important;
  -webkit-text-fill-color: var(--qh-text-1) !important;
  caret-color: var(--qh-text-1);
  transition: background-color 5000s ease-in-out 0s;
}

/* =================================================================
   SCROLLBAR
   ================================================================= */
body.qh-portal-body ::-webkit-scrollbar             { width: 5px; height: 5px; }
body.qh-portal-body ::-webkit-scrollbar-track       { background: transparent; }
body.qh-portal-body ::-webkit-scrollbar-thumb       { background: var(--qh-border-2); border-radius: 10px; }
body.qh-portal-body ::-webkit-scrollbar-thumb:hover { background: var(--qh-text-3); }

/* =================================================================
   TEXT SELECTION
   ================================================================= */
body.qh-portal-body ::selection { background: rgba(0,181,204,.15); color: var(--qh-text-1); }

/* =================================================================
   POLISH
   ================================================================= */
.qh-card--compact .qh-pipeline { margin: .5rem -0.05rem 0; }
.qh-card--compact .qh-info-row { font-size: 13px; }
.qh-card--compact .qh-info-row__label { min-width: 110px; }
.qh-modal__footer { flex-wrap: wrap; gap: .5rem; }

/* NC SVG logo badge reset */
svg.qh-logo__badge {
  padding: 0; background: none; box-shadow: none; letter-spacing: 0;
  text-transform: none; font-size: 0; width: 30px; height: 30px;
  border-radius: 7px; flex-shrink: 0; transition: opacity var(--qh-t);
}
svg.qh-logo__badge:hover { opacity: .82; }

/* =================================================================
   SIDEBAR PORTAL LAYOUT  (qhp- prefix = QuoteHub Portal)
   ================================================================= */

/* ── Login overlay ───────────────────────────────────────────────── */
#qhp-login {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: #f0fafb;
  /* `contain: paint` is the only thing iOS WebKit reliably honors to clip the 130vw graphic
     and 1400px radio-rings behind the auth card. overflow:hidden alone leaks on iOS. */
  contain: paint;
  overflow: hidden;
  overflow: clip;
}
#qhp-login[hidden] { display: none !important; }

/* Northcom Graphic Symbol — decorative rotating ring behind auth card.
   Cap at 100vw to avoid even attempting to overflow on phones — the parent's `contain: paint`
   would clip it visually, but iOS scroll-bounds calculation can still pick up the wider box. */
.qhp-login__graphic {
  position: absolute;
  width: min(820px, 100vw); height: min(820px, 100vw);
  top: 50%; left: 68%;
  transform: translate(-50%, -50%);
  opacity: .13;
  pointer-events: none;
  animation: qhp-graphic-drift 90s linear infinite;
}
@keyframes qhp-graphic-drift {
  0%   { transform: translate(-50%,-50%) rotate(0deg)   scale(1); }
  50%  { transform: translate(-50%,-50%) rotate(180deg) scale(1.05); }
  100% { transform: translate(-50%,-50%) rotate(360deg) scale(1); }
}

/* Background canvas */
.qhp-bg-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* Radio rings — reuse existing keyframe but in teal */
.qhp-radio-rings {
  position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 0;
  width: 0; height: 0;
  contain: layout paint;
}
.qhp-radio-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(0,181,204,.18);
  transform: translate(-50%,-50%);
  animation: qhp-radio-wave 5.5s ease-out infinite;
}
.qhp-radio-ring:nth-child(1) { animation-delay: 0s; }
.qhp-radio-ring:nth-child(2) { animation-delay: 1.1s; }
.qhp-radio-ring:nth-child(3) { animation-delay: 2.2s; }
.qhp-radio-ring:nth-child(4) { animation-delay: 3.3s; }
.qhp-radio-ring:nth-child(5) { animation-delay: 4.4s; }
@keyframes qhp-radio-wave {
  0%   { width: 80px;    height: 80px;    opacity: .6;  border-color: rgba(0,181,204,.45); }
  35%  { opacity: .12; }
  100% { width: 1400px;  height: 1400px;  opacity: 0;   border-color: rgba(0,181,204,.01); }
}
.qhp-radio-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--qh-brand); z-index: 1; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(0,181,204,.18), 0 0 14px rgba(0,181,204,.35);
  animation: qhp-center-pulse 2.5s ease-in-out infinite;
}
@keyframes qhp-center-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(0,181,204,.18), 0 0 14px rgba(0,181,204,.3); }
  50%     { box-shadow: 0 0 0 9px rgba(0,181,204,.08), 0 0 22px rgba(0,181,204,.18); }
}

/* Login logo mark — Northcom symbol variant */
.qh-auth-logo-mark--nc {
  width: 72px; height: 72px;
  background: rgba(0,181,204,.07);
  border-color: rgba(0,181,204,.22);
  border-radius: var(--qh-radius-lg);
}
.qh-auth-nc-symbol { width: 52px; height: 52px; object-fit: contain; }

/* Login background mesh override (teal dots) */
.qhp-login .qh-view--login::before {
  background-image: radial-gradient(rgba(0,181,204,.06) 1px, transparent 1px);
}

/* ── App layout ──────────────────────────────────────────────────── */
#qhp-app {
  display: flex; min-height: 100vh; background: var(--qh-bg);
  width: 100%; max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  contain: paint;
}
#qhp-app[hidden] { display: none !important; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.qhp-sidebar {
  width: 258px; flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--qh-border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow: 1px 0 0 var(--qh-border);
}

/* Sidebar brand */
.qhp-sidebar__brand {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.15rem 1.1rem 1.05rem;
  border-bottom: 1px solid var(--qh-border);
  text-decoration: none;
}
.qhp-brand-icon {
  width: 36px; height: 36px; flex-shrink: 0; object-fit: contain;
}
.qhp-brand-name { font-size: .88rem; font-weight: 700; color: var(--qh-text-1); letter-spacing: -.015em; line-height: 1.1; }
.qhp-brand-sub  { font-size: .65rem; color: var(--qh-text-3); font-weight: 500; margin-top: 2px; letter-spacing: .01em; }

/* Nav scroll area */
.qhp-nav { flex: 1; padding: .5rem 0; overflow-y: auto; scrollbar-width: none; }
.qhp-nav::-webkit-scrollbar { display: none; }

/* Nav group label */
.qhp-nav-group {
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--qh-text-3); padding: .9rem .8rem .25rem 1.05rem;
  pointer-events: none; user-select: none;
}

/* Nav item — aligned with admin portal style */
.qhp-nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .85rem; margin: 0 .5rem .03rem;
  border-radius: var(--qh-radius);
  color: var(--qh-text-2); cursor: pointer;
  border: 1px solid transparent; background: transparent;
  font-size: .845rem; font-weight: 500; font-family: inherit;
  width: calc(100% - 1rem); text-align: left;
  transition: all .12s ease; position: relative;
}
.qhp-nav-item:hover { background: var(--qh-brand-dim); color: var(--qh-text-1); }
.qhp-nav-item--active {
  background: var(--qh-brand-dim);
  color: var(--qh-brand);
  border-color: rgba(0,181,204,.15);
  font-weight: 600;
}
.qhp-nav-item--active::before {
  content: '';
  position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 3px; background: var(--qh-brand);
  border-radius: 0 3px 3px 0;
}
.qhp-nav-icon { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; opacity: .75; }
.qhp-nav-item--active .qhp-nav-icon { opacity: 1; }
.qhp-nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qhp-nav-badge {
  background: var(--qh-brand); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: .01em; box-shadow: 0 1px 4px rgba(0,181,204,.35);
}

/* Sidebar footer — user avatar + name, then logout row */
.qhp-sidebar__footer {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--qh-border);
  background: var(--qh-card-2);
}
.qhp-footer__user {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem .75rem;
}
.qhp-user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--qh-brand) 0%, #33c4d4 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  box-shadow: 0 2px 8px rgba(0,181,204,.25);
}
.qhp-user-meta { flex: 1; min-width: 0; }
.qhp-user-meta__name  { font-size: .8rem; font-weight: 600; color: var(--qh-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qhp-user-meta__email { font-size: .7rem; color: var(--qh-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .05rem; }
.qhp-sidebar__logout {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; padding: .6rem 1rem;
  background: transparent; border: none; border-top: 1px solid var(--qh-border);
  color: var(--qh-text-2); cursor: pointer;
  font-size: .78rem; font-weight: 500; font-family: inherit;
  transition: background .12s, color .12s;
}
.qhp-sidebar__logout:hover { background: var(--qh-red-dim); color: var(--qh-red); }
.qhp-sidebar__logout svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Main content area ───────────────────────────────────────────── */
.qhp-main {
  margin-left: 258px; flex: 1;
  display: flex; flex-direction: column; min-height: 100vh;
  background: var(--qh-bg);
}

/* ── Topbar ──────────────────────────────────────────────────────── */
.qhp-topbar {
  height: 54px; background: #fff; border-bottom: 1px solid var(--qh-border);
  display: flex; align-items: center; gap: .85rem; padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.qhp-hamburger {
  display: none; width: 32px; height: 32px; border-radius: 6px;
  background: transparent; border: 1px solid var(--qh-border);
  color: var(--qh-text-2); cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.qhp-hamburger svg { width: 16px; height: 16px; }
.qhp-topbar__breadcrumb { flex: 1; min-width: 0; }
.qhp-topbar__title { font-size: .92rem; font-weight: 600; color: var(--qh-text-1); }
.qhp-topbar__right { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-shrink: 0; }
.qhp-help-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--qh-card-2); border: 1px solid var(--qh-border);
  color: var(--qh-text-2); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.qhp-help-btn:hover { background: var(--qh-brand-dim); color: var(--qh-brand); border-color: rgba(0,181,204,.3); }
.qhp-domain-logo-img { height: 26px; width: auto; border-radius: 4px; object-fit: contain; }

/* ── Content ─────────────────────────────────────────────────────── */
.qhp-content { flex: 1; padding: 1.5rem; max-width: 1300px; width: 100%; }

/* Global footer — shown on every customer-portal view */
.qh-global-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem;
  margin-top: auto;
  border-top: 1px solid var(--qh-border, #e2e8f0);
  background: var(--qh-surface-2, #f8fafc);
  font-size: .78rem; color: var(--qh-text-2, #64748b);
}
.qh-global-footer__brand code {
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: .75rem;
  background: rgba(0,181,204,.1);
  color: #0e7490;
  padding: 1px 5px; border-radius: 3px;
}
.qh-global-footer__tagline {
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  /* Same gentle cyan-shimmer as seller side — narrow light-cyan highlight on dark-cyan base,
     12s linear pass. No white peak. */
  background-image: linear-gradient(
    100deg,
    #0e7490 0%,
    #0e7490 40%,
    #22d3ee 50%,
    #0e7490 60%,
    #0e7490 100%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: qh-tagline-shimmer 12s linear infinite;
}
@keyframes qh-tagline-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qh-global-footer__tagline { animation: none; background-position: 50% 0; }
}
@media (max-width: 640px) {
  .qh-global-footer { flex-direction: column; align-items: flex-start; gap: .35rem; padding: .85rem 1rem; }
  .qh-global-footer__tagline { font-size: .65rem; letter-spacing: .25em; }
}

/* Override old .qh-main — no longer used as layout wrapper */
body.qh-portal-body .qh-main {
  max-width: none; padding: 0; width: 100%;
}

/* ── Mobile sidebar overlay ──────────────────────────────────────── */
.qhp-sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(15,23,42,.4); z-index: 99;
  backdrop-filter: blur(2px);
}
.qhp-sidebar-overlay--visible { display: block; }

/* ── Stat card teal icon variant ─────────────────────────────────── */
.qh-stat-card__icon--teal {
  background: linear-gradient(135deg,rgba(0,181,204,.15),rgba(0,181,204,.05));
  color: var(--qh-brand);
}

/* =================================================================
   RESPONSIVE — Sidebar collapse
   ================================================================= */
@media (max-width: 1024px) {
  .qhp-sidebar { transform: translateX(-100%); }
  .qhp-sidebar--open { transform: none; box-shadow: 4px 0 24px rgba(0,0,0,.15); }
  .qhp-main { margin-left: 0; }
  .qhp-hamburger { display: flex; }
  .qhp-content { padding: 1rem; }
}
@media (max-width: 640px) {
  .qhp-topbar { padding: 0 1rem; }
  .qhp-content { padding: .75rem; }
  .qhp-sidebar { width: 240px; }
}

/* =================================================================
   PRODUCT PICKER MODAL
   ================================================================= */
#qh-product-picker-modal .qh-modal__dialog {
  max-width: 820px; max-height: 86vh;
  overflow: hidden; display: flex; flex-direction: column;
}
.qh-picker-search-row {
  display: flex; gap: .65rem; align-items: center;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--qh-border); background: var(--qh-card-2);
  flex-shrink: 0;
}
.qh-picker-search-row .qh-search-wrap { flex: 1; }
.qh-picker-section-selector {
  display: flex; align-items: center; gap: .45rem;
  font-size: 12.5px; color: var(--qh-text-2); flex-shrink: 0;
}
.qh-picker-section-select {
  padding: .35rem .6rem; border: 1.5px solid var(--qh-border-2);
  border-radius: var(--qh-radius-sm); font-family: inherit; font-size: 12.5px;
  color: var(--qh-text-1); background: var(--qh-surface); cursor: pointer; outline: none;
  transition: border-color var(--qh-t);
}
.qh-picker-section-select:focus { border-color: var(--qh-brand); box-shadow: 0 0 0 3px var(--qh-brand-glow); }
.qh-product-picker-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.qh-picker-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0; padding: .4rem .5rem; }

/* Category filter chips */
.qh-picker-cat-nav {
  display: flex; flex-wrap: wrap; gap: .3rem;
  padding: .55rem .9rem .45rem;
  border-bottom: 1px solid var(--qh-border);
  background: var(--qh-card-2);
  flex-shrink: 0;
}
.qh-picker-cat-btn {
  padding: .18rem .65rem; border-radius: 99px;
  border: 1px solid var(--qh-border);
  background: var(--qh-card); color: var(--qh-text-2);
  font-size: 11.5px; cursor: pointer; transition: all .12s;
  white-space: nowrap; line-height: 1.6;
}
.qh-picker-cat-btn:hover { background: var(--qh-hover); color: var(--qh-text); }
.qh-picker-cat-btn--active { background: var(--qh-brand); color: #fff; border-color: var(--qh-brand); }

/* Pagination bar */
.qh-picker-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; padding: .6rem .9rem;
  border-top: 1px solid var(--qh-border);
  background: var(--qh-card-2); flex-shrink: 0;
}
.qh-picker-pg-btn {
  padding: .22rem .8rem; border-radius: 6px;
  border: 1px solid var(--qh-border);
  background: var(--qh-card); color: var(--qh-text-2);
  font-size: 12px; cursor: pointer; transition: background .12s;
}
.qh-picker-pg-btn:hover:not(:disabled) { background: var(--qh-hover); }
.qh-picker-pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.qh-picker-pg-info { font-size: 12px; color: var(--qh-text-3); }

/* Loading skeleton rows in picker */
.qh-picker-skeleton {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--qh-border);
}

/* Updated picker row styles */
.qh-picker-cat-heading {
  font-size: 10.5px; font-weight: 700; color: var(--qh-text-2);
  text-transform: uppercase; letter-spacing: .07em;
  padding: .65rem 0 .3rem; border-bottom: 1px solid var(--qh-border); margin-bottom: .3rem; margin-top: .65rem;
}
.qh-picker-cat-heading:first-child { margin-top: 0; }
.qh-picker-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-sm); background: var(--qh-surface);
  transition: border-color .1s, background .1s;
}
.qh-picker-row:hover { border-color: rgba(0,181,204,.3); background: var(--qh-brand-dim); }
.qh-picker-row__thumb {
  width: 38px; height: 38px; min-width: 38px; object-fit: contain;
  border-radius: 5px; border: 1px solid var(--qh-border); background: #f8fafc;
}
.qh-picker-row__icon {
  width: 38px; height: 38px; min-width: 38px; border-radius: 5px;
  border: 1px solid var(--qh-border); background: var(--qh-card-2);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.qh-picker-row__info  { flex: 1; min-width: 0; }
.qh-picker-row__name  { font-size: 13px; font-weight: 600; color: var(--qh-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-picker-row__sku   { font-size: 10.5px; color: var(--qh-text-3); font-family: 'SF Mono','Fira Code',monospace; }
.qh-picker-row__cat   { display: inline-block; font-size: 10px; color: var(--qh-brand); background: var(--qh-brand-dim); border: 1px solid rgba(0,181,204,.15); border-radius: 99px; padding: 1px 7px; margin-top: 2px; }
.qh-picker-row__price { font-size: 13.5px; font-weight: 700; color: var(--qh-brand); flex-shrink: 0; text-align: right; min-width: 100px; }
.qh-picker-row__price--na,
.qh-picker-row__price--muted { color: var(--qh-text-3); font-weight: 400; font-size: 12px; }
.qh-picker-row__sub { font-size: 11px; color: var(--qh-text-3); }
.qh-picker-row__thumb--pkg,
.qh-picker-row__thumb--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: var(--qh-card-2); border-radius: 5px;
}
.qh-picker-badge {
  font-size: 11px; padding: 2px 9px; border-radius: 99px;
  background: rgba(0,181,204,.1); color: var(--qh-brand);
  border: 1px solid rgba(0,181,204,.2); flex-shrink: 0;
}
.qh-picker-empty { text-align: center; padding: 2.5rem 1rem; color: var(--qh-text-3); font-size: 13px; }

/* =================================================================
   REFERENCE TOGGLE FIELDS
   ================================================================= */
.qh-refs-header {
  display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem;
}
.qh-refs-hint {
  font-size: 11.5px; color: var(--qh-text-3); font-style: italic;
}
.qh-refs-grid {
  display: flex; flex-direction: column; gap: .45rem;
}
.qh-ref-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .4rem .65rem;
  border: 1.5px solid var(--qh-border-2);
  border-radius: var(--qh-radius-sm);
  background: var(--qh-card-2);
  transition: border-color .15s, background .15s, opacity .15s;
  opacity: .62;
}
.qh-ref-row--on {
  background: var(--qh-surface); opacity: 1;
  border-color: var(--qh-brand);
}
.qh-ref-row__label {
  font-size: 12px; font-weight: 600; color: var(--qh-text-2);
  min-width: 100px; flex-shrink: 0;
  transition: color .15s;
}
.qh-ref-row--on .qh-ref-row__label { color: var(--qh-brand); }
.qh-ref-row__input {
  flex: 1; min-width: 0;
  border: none !important; background: transparent; outline: none !important;
  box-shadow: none !important;
  font-size: 13.5px; font-family: inherit; color: var(--qh-text-1);
  padding: 0;
}
.qh-ref-row__input::placeholder { color: var(--qh-text-3); }
.qh-ref-row__input:disabled { cursor: default; color: var(--qh-text-3); }
.qh-ref-row__input:disabled::placeholder { color: transparent; }

/* Toggle switch */
.qh-toggle-sw {
  display: inline-flex; align-items: center; flex-shrink: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qh-toggle-sw input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.qh-toggle-sw__track {
  display: flex; align-items: center;
  width: 34px; height: 18px;
  background: var(--qh-border-2); border-radius: 999px;
  padding: 2px;
  transition: background .2s;
}
.qh-toggle-sw input:checked ~ .qh-toggle-sw__track { background: var(--qh-brand); }
.qh-toggle-sw__thumb {
  width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
  flex-shrink: 0;
}
.qh-toggle-sw input:checked ~ .qh-toggle-sw__track .qh-toggle-sw__thumb {
  transform: translateX(16px);
}

/* Section inline reference input (simplified — no type dropdown) */
.qh-section-ref-input {
  border: 1px solid var(--qh-border-2); border-radius: var(--qh-radius-sm);
  background: var(--qh-surface); font-size: 12px; font-family: inherit;
  color: var(--qh-text-1); padding: .2rem .5rem; width: 140px;
  outline: none; transition: border-color .1s;
}
.qh-section-ref-input:focus { border-color: var(--qh-brand); box-shadow: 0 0 0 2px var(--qh-brand-glow); }
.qh-section-ref-input::placeholder { color: var(--qh-text-3); }

/* =================================================================
   BUILDER SEARCH — more prominent
   ================================================================= */
.qh-builder-search-wrap {
  background: var(--qh-surface); border: 1.5px solid rgba(0,181,204,.3);
  border-radius: var(--qh-radius-sm); margin-bottom: .4rem;
  position: relative;
}
.qh-builder-search-wrap:focus-within {
  border-color: var(--qh-brand); box-shadow: 0 0 0 3px var(--qh-brand-glow);
}
.qh-builder-search-input {
  border: none !important; box-shadow: none !important; background: transparent;
  padding-left: 2.5rem !important; font-size: 14px;
}
.qh-builder-search-prefix {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  font-size: 16px; pointer-events: none; line-height: 1;
}
.qh-builder-search-hint {
  font-size: 11px; color: var(--qh-text-3); padding: 0 .85rem .5rem;
  display: flex; align-items: center; gap: .3rem;
}

/* =================================================================
   AUTOSAVE BANNER
   ================================================================= */
.qh-save-banner {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .85rem; margin-bottom: .5rem;
  border-radius: var(--qh-radius-sm); font-size: 12.5px;
  border: 1px solid transparent; transition: all .2s;
}
.qh-save-banner--dirty  { background: rgba(217,119,6,.07); border-color: rgba(217,119,6,.2); color: #92400e; }
.qh-save-banner--saving { background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.15); color: #1e3a8a; }
.qh-save-banner--saved  { background: var(--qh-green-dim); border-color: rgba(5,150,105,.2); color: #065f46; }
.qh-save-banner[hidden] { display: none !important; }
.qh-save-banner__text { flex: 1; font-weight: 500; }
.qh-save-banner__btn  { padding: .2rem .6rem; font-size: 11.5px; }

/* Presence banner — seller editing indicator */
.qh-presence-banner {
  display: flex; align-items: center; gap: .5rem;
  font-size: 12.5px; font-weight: 500; padding: .55rem .85rem;
  border-radius: var(--qh-radius-sm); margin-bottom: .75rem;
  border: 1.5px solid transparent;
}
.qh-presence-banner[hidden] { display: none !important; }
.qh-presence-banner--editing {
  background: rgba(0,181,204,.08); border-color: rgba(0,181,204,.25);
  color: var(--qh-brand);
  animation: qh-presence-pulse 2.5s ease-in-out infinite;
}
.qh-presence-banner--updated {
  background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.25);
  color: #065f46; cursor: pointer;
}
.qh-presence-banner--updated:hover { background: rgba(16,185,129,.13); }
@keyframes qh-presence-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

/* Company info card (domain branding in quote sidebar) */
.qh-company-card {
  display: flex; align-items: center; gap: .85rem;
  background: var(--qh-surface); border: 1.5px solid var(--qh-border-2);
  border-radius: var(--qh-radius); padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.qh-company-card__logo {
  width: 52px; height: 52px; object-fit: contain;
  border-radius: 8px; flex-shrink: 0;
  background: var(--qh-card-2); padding: 4px;
}
.qh-company-card__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.qh-company-card__name { font-weight: 700; font-size: 14px; color: var(--qh-text-1); }
.qh-company-card__domain { font-size: 11.5px; color: var(--qh-brand); font-family: 'Consolas', monospace; }

/* Section action icon buttons */
.qh-section-action-btn {
  width: 26px; height: 26px; border-radius: 5px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--qh-border);
  color: var(--qh-text-2); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s; font-family: inherit;
}
.qh-section-action-btn:hover { background: var(--qh-card-2); color: var(--qh-text-1); }
.qh-section-action-btn--danger:hover { background: var(--qh-red-dim); color: var(--qh-red); border-color: rgba(220,38,38,.22); }
.qh-section-action-btn--add:hover { background: var(--qh-brand-dim); color: var(--qh-brand); border-color: rgba(0,181,204,.25); }

/* Add-bar — primary prominence for builder search, secondary for manual */
.qh-quote-add-bar .qh-btn--ghost { font-size: 13px; }

@media (max-width: 640px) {
  .qh-picker-search-row { flex-wrap: wrap; }
  .qh-picker-section-selector { width: 100%; }
  #qh-product-picker-modal .qh-modal__dialog { max-height: 95vh; }
  .qh-picker-row__price { min-width: 70px; }
}

/* =================================================================
   DUPLICATE HEADER FIX
   ================================================================= */
@media (min-width: 1025px) {
  .qhp-topbar__breadcrumb { display: none; }
}

/* =================================================================
   PRODUCT REQUEST VIEW  (.qhr-*)
   ================================================================= */
.qhr-root { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Intro banner ─────────────────────────────────────── */
.qhr-intro {
  display: flex; align-items: flex-start; gap: 1rem;
  background: linear-gradient(135deg, var(--qh-brand-dim) 0%, rgba(0,181,204,.04) 100%);
  border: 1.5px solid rgba(0,181,204,.22);
  border-left: 4px solid var(--qh-brand);
  border-radius: var(--qh-radius-lg); padding: 1.1rem 1.25rem;
}
.qhr-intro__icon {
  font-size: 28px; line-height: 1; flex-shrink: 0;
  margin-top: .1rem;
}
.qhr-intro__body { flex: 1; min-width: 0; }
.qhr-intro__title { font-size: 15px; font-weight: 700; color: var(--qh-text-1); margin-bottom: .25rem; }
.qhr-intro__text  { font-size: 13px; color: var(--qh-text-2); line-height: 1.55; }
.qhr-intro__stat  {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; background: var(--qh-surface);
  border: 1px solid rgba(0,181,204,.25); border-radius: var(--qh-radius);
  padding: .5rem .9rem; min-width: 62px;
  box-shadow: 0 1px 4px rgba(0,181,204,.08);
}
.qhr-intro__num   { font-size: 22px; font-weight: 800; color: var(--qh-brand); line-height: 1; }
.qhr-intro__label { font-size: 10px; color: var(--qh-text-3); text-transform: uppercase; letter-spacing: .06em; margin-top: .15rem; }

/* ── Toolbar ──────────────────────────────────────────── */
.qhr-toolbar {
  display: flex; flex-direction: column; gap: .75rem;
  background: var(--qh-surface); border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-lg); padding: 1rem 1.25rem;
  box-shadow: var(--qh-shadow);
}
.qhr-toolbar__top {
  display: flex; align-items: center; gap: .75rem;
}
.qhr-search-wrap {
  flex: 1; display: flex; align-items: center; gap: .6rem;
  background: var(--qh-card-2); border: 1.5px solid var(--qh-border-2);
  border-radius: var(--qh-radius); padding: 0 1rem;
  transition: border-color var(--qh-t), box-shadow var(--qh-t);
}
.qhr-search-wrap:focus-within {
  border-color: var(--qh-brand); box-shadow: 0 0 0 3px var(--qh-brand-glow);
  background: var(--qh-surface);
}
.qhr-search-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--qh-text-3); pointer-events: none;
}
.qhr-search-input {
  flex: 1; height: 42px; padding: 0;
  border: none; background: transparent; color: var(--qh-text-1);
  font-size: 14px; outline: none;
}
.qhr-search-input::placeholder { color: var(--qh-text-3); }
.qhr-result-count {
  font-size: 12px; color: var(--qh-text-3); white-space: nowrap; flex-shrink: 0;
}

/* ── Category chips ───────────────────────────────────── */
.qhr-cats { display: flex; flex-wrap: wrap; gap: .4rem; }
.qhr-cat-chip {
  padding: .3rem .9rem; font-size: 12.5px; font-weight: 500;
  border: 1.5px solid var(--qh-border-2); border-radius: 99px;
  background: transparent; color: var(--qh-text-2); cursor: pointer;
  transition: all var(--qh-t); white-space: nowrap;
}
.qhr-cat-chip:hover { border-color: var(--qh-brand); color: var(--qh-brand); background: var(--qh-brand-dim); }
.qhr-cat-chip--active {
  border-color: var(--qh-brand); background: var(--qh-brand);
  color: #fff; font-weight: 600;
}

/* ── Two-panel layout ─────────────────────────────────── */
.qhr-layout { display: grid; grid-template-columns: 1fr 292px; gap: 1.25rem; align-items: start; }
.qhr-products { min-width: 0; }

/* ── Product grid ─────────────────────────────────────── */
.qhr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .85rem;
}

/* ── Product card ─────────────────────────────────────── */
.qhr-card {
  background: var(--qh-surface); border: 1.5px solid var(--qh-border);
  border-radius: var(--qh-radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--qh-t), border-color var(--qh-t), transform .15s ease;
  cursor: default; outline: none;
}
.qhr-card:hover {
  box-shadow: var(--qh-shadow-md); border-color: rgba(0,181,204,.35);
  transform: translateY(-2px);
}
.qhr-card:focus-visible { box-shadow: 0 0 0 3px var(--qh-brand-glow); border-color: var(--qh-brand); }
.qhr-card--selected {
  border-color: var(--qh-brand) !important;
  box-shadow: 0 0 0 3px var(--qh-brand-glow), var(--qh-shadow-md) !important;
}

.qhr-card__img-wrap {
  position: relative; background: var(--qh-card-2);
  aspect-ratio: 4/3; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.qhr-card__img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.qhr-card__img-placeholder { color: var(--qh-text-3); }

/* Animated teal overlay on selected */
.qhr-card__overlay {
  position: absolute; inset: 0;
  background: rgba(0,181,204,.18);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s ease;
  pointer-events: none;
}
.qhr-card__overlay--on { opacity: 1; }
.qhr-card__overlay svg { filter: drop-shadow(0 2px 6px rgba(0,181,204,.5)); }

.qhr-card__body {
  padding: .7rem .75rem .3rem; flex: 1;
  display: flex; flex-direction: column; gap: .2rem;
}
.qhr-card__name { font-size: 12.5px; font-weight: 600; color: var(--qh-text-1); line-height: 1.35; }
.qhr-card__sku  { font-size: 11px; color: var(--qh-text-3); font-family: 'JetBrains Mono', monospace, sans-serif; }
.qhr-card__cat  { font-size: 11px; color: var(--qh-brand); font-weight: 500; margin-top: .1rem; }

.qhr-card__foot { padding: .5rem .75rem .7rem; display: flex; gap: .4rem; align-items: center; }
.qhr-card__info-btn {
  flex-shrink: 0; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--qh-radius-sm); border: 1.5px solid var(--qh-border-2);
  background: transparent; color: var(--qh-text-3); cursor: pointer;
  transition: all var(--qh-t);
}
.qhr-card__info-btn:hover { border-color: var(--qh-brand); color: var(--qh-brand); background: var(--qh-brand-dim); }
.qhr-card__btn {
  flex: 1; padding: .4rem .6rem; font-size: 12px; font-weight: 600;
  border-radius: var(--qh-radius-sm); border: 1.5px solid var(--qh-brand);
  background: transparent; color: var(--qh-brand); cursor: pointer;
  transition: all var(--qh-t);
}
.qhr-card__btn:hover { background: var(--qh-brand); color: #fff; }
.qhr-card__btn--added { background: var(--qh-brand); color: #fff; }
.qhr-card__btn--added:hover { background: var(--qh-brand-h); border-color: var(--qh-brand-h); }

/* Already-in-catalog state */
.qhr-card--in-catalog {
  border-color: #10b981 !important;
  background: linear-gradient(135deg, var(--qh-surface) 85%, rgba(16,185,129,.04) 100%);
  cursor: default;
  pointer-events: none;
}
.qhr-card--in-catalog .qhr-card__info-btn,
.qhr-card--in-catalog .qhr-card__catalog-tag { pointer-events: all; }
.qhr-card__in-catalog-badge {
  position: absolute; inset: 0;
  background: rgba(16,185,129,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #065f46;
  letter-spacing: .04em;
}
.qhr-card__catalog-tag {
  flex: 1; display: flex; align-items: center; gap: .3rem;
  font-size: 11.5px; font-weight: 600; color: #059669;
  padding: .35rem .5rem;
}

/* ── Request sidebar ──────────────────────────────────── */
.qhr-sidebar {
  background: var(--qh-surface); border: 1.5px solid var(--qh-border);
  border-radius: var(--qh-radius-lg); padding: 1.1rem;
  display: flex; flex-direction: column; gap: .8rem;
  position: sticky; top: 72px;
  box-shadow: var(--qh-shadow);
}
.qhr-sidebar__header { display: flex; align-items: center; justify-content: space-between; }
.qhr-sidebar__title  { font-size: 13.5px; font-weight: 700; color: var(--qh-text-1); }
.qhr-sidebar__count {
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 99px; background: var(--qh-brand);
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.qhr-sidebar__list {
  display: flex; flex-direction: column; gap: .45rem;
  max-height: 320px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--qh-border-2) transparent;
}
.qhr-sidebar__list::-webkit-scrollbar { width: 5px; }
.qhr-sidebar__list::-webkit-scrollbar-track { background: transparent; }
.qhr-sidebar__list::-webkit-scrollbar-thumb { background: var(--qh-border-2); border-radius: 99px; }
.qhr-sidebar__empty {
  font-size: 12.5px; color: var(--qh-text-3); text-align: center;
  padding: 1.25rem 0; line-height: 1.5;
}

/* ── Sidebar items ────────────────────────────────────── */
.qhr-sitem {
  display: flex; align-items: center; gap: .6rem;
  background: var(--qh-card-2); border-radius: var(--qh-radius-sm);
  padding: .45rem .55rem; border: 1px solid transparent;
  transition: border-color var(--qh-t);
  animation: qhr-slide-in .18s ease both;
}
.qhr-sitem:hover { border-color: var(--qh-border); }
.qhr-sitem__img {
  width: 36px; height: 36px; border-radius: 4px;
  object-fit: contain; background: #fff; flex-shrink: 0;
  border: 1px solid var(--qh-border);
}
.qhr-sitem__img--ph { background: var(--qh-border); }
.qhr-sitem__info { flex: 1; min-width: 0; }
.qhr-sitem__name { font-size: 12px; font-weight: 600; color: var(--qh-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qhr-sitem__sku  { font-size: 10.5px; color: var(--qh-text-3); }
.qhr-sitem__rm {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: transparent; border: 1px solid var(--qh-border);
  color: var(--qh-text-3); cursor: pointer; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--qh-t); line-height: 1;
}
.qhr-sitem__rm:hover { background: var(--qh-red-dim); border-color: var(--qh-red); color: var(--qh-red); }
.qhr-sitem--custom .qhr-sitem__img { background: var(--qh-purple-dim); }
.qhr-sitem--custom .qhr-sitem__sku { color: var(--qh-purple); font-style: italic; }

@keyframes qhr-slide-in {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Notes textarea ───────────────────────────────────── */
.qhr-notes-section { display: flex; flex-direction: column; gap: .35rem; }
.qhr-notes-label {
  font-size: 11px; font-weight: 600; color: var(--qh-text-2);
}
.qhr-notes-input {
  width: 100%; padding: .5rem .65rem; resize: vertical; min-height: 64px;
  border: 1.5px solid var(--qh-border-2); border-radius: var(--qh-radius);
  font-size: 12.5px; font-family: inherit; background: var(--qh-card-2);
  color: var(--qh-text-1); transition: border-color var(--qh-t), box-shadow var(--qh-t);
}
.qhr-notes-input:focus { outline: none; border-color: var(--qh-brand); box-shadow: 0 0 0 3px var(--qh-brand-glow); background: var(--qh-surface); }
.qhr-notes-input::placeholder { color: var(--qh-text-3); font-size: 12px; }

/* ── Custom product request form ──────────────────────── */
.qhr-custom-section { border-top: 1px solid var(--qh-border); padding-top: .8rem; margin-top: .05rem; }
.qhr-custom-toggle {
  display: flex; align-items: center; gap: .45rem;
  width: 100%; background: none; border: 1.5px dashed var(--qh-border-2);
  border-radius: var(--qh-radius); padding: .5rem .75rem;
  font-size: 12px; font-weight: 500; color: var(--qh-text-2);
  cursor: pointer; transition: all var(--qh-t);
}
.qhr-custom-toggle:hover { border-color: var(--qh-brand); color: var(--qh-brand); background: var(--qh-brand-dim); }
.qhr-custom-toggle svg { flex-shrink: 0; transition: transform .22s ease; }
.qhr-custom-toggle--open svg { transform: rotate(45deg); }
.qhr-custom-form {
  display: none; flex-direction: column; gap: .5rem;
  padding: .75rem; margin-top: .5rem;
  background: var(--qh-card-2); border-radius: var(--qh-radius);
  border: 1px solid var(--qh-border);
}
.qhr-custom-form--visible { display: flex; }
.qhr-custom-field { display: flex; flex-direction: column; gap: .2rem; }
.qhr-custom-field label { font-size: 11px; font-weight: 600; color: var(--qh-text-2); }
.qhr-custom-form input,
.qhr-custom-form textarea {
  width: 100%; padding: .45rem .65rem;
  border: 1.5px solid var(--qh-border-2); border-radius: var(--qh-radius);
  font-size: 12.5px; font-family: inherit; background: var(--qh-surface);
  color: var(--qh-text-1); resize: none;
  transition: border-color var(--qh-t), box-shadow var(--qh-t);
}
.qhr-custom-form input:focus,
.qhr-custom-form textarea:focus { outline: none; border-color: var(--qh-brand); box-shadow: 0 0 0 3px var(--qh-brand-glow); }
.qhr-custom-form textarea { height: 60px; }
.qhr-custom-add-btn {
  width: 100%; padding: .5rem; font-size: 12px; font-weight: 600;
  background: var(--qh-brand-dim); color: var(--qh-brand);
  border: 1.5px solid rgba(0,181,204,.3); border-radius: var(--qh-radius);
  cursor: pointer; transition: all var(--qh-t);
}
.qhr-custom-add-btn:hover { background: var(--qh-brand); color: #fff; border-color: var(--qh-brand); }

/* ── Submit button ────────────────────────────────────── */
.qhr-submit-btn {
  width: 100%; font-size: 12.5px; font-weight: 600;
  white-space: normal; line-height: 1.4; padding: .7rem .75rem;
  text-align: center; border-radius: var(--qh-radius);
}

/* ── Previous requests ────────────────────────────────── */
.qhr-prev-section { margin-top: .75rem; }
.qhr-prev-section__header {
  font-size: 11px; font-weight: 700; color: var(--qh-text-3);
  text-transform: uppercase; letter-spacing: .07em;
  padding-bottom: .6rem; border-bottom: 1px solid var(--qh-border);
  margin-bottom: .85rem;
}
.qhr-prev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .85rem;
}
.qhr-prev-card {
  background: var(--qh-surface); border: 1.5px solid var(--qh-border);
  border-radius: var(--qh-radius-lg); padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .35rem;
  transition: box-shadow var(--qh-t), border-color var(--qh-t);
}
.qhr-prev-card:hover { box-shadow: var(--qh-shadow-md); border-color: var(--qh-border-2); }
.qhr-prev-card--custom { border-left: 3px solid var(--qh-purple); }
.qhr-prev-card__name {
  font-size: 13px; font-weight: 700; color: var(--qh-text-1); line-height: 1.35;
}
.qhr-prev-card__tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  background: var(--qh-purple-dim); color: var(--qh-purple);
  border: 1px solid rgba(139,92,246,.25); border-radius: 99px;
  padding: .1rem .5rem; vertical-align: middle; margin-left: .3rem;
}
.qhr-prev-card__sku  { font-size: 11px; color: var(--qh-text-3); font-family: 'JetBrains Mono', monospace, sans-serif; }
.qhr-prev-card__desc { font-size: 12px; color: var(--qh-text-2); line-height: 1.4; margin-top: .1rem; }
.qhr-prev-card__footer {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: auto; padding-top: .45rem; border-top: 1px solid var(--qh-border);
}
.qhr-prev-card__date { font-size: 11px; color: var(--qh-text-3); }

/* ── Empty state ──────────────────────────────────────── */
.qhr-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: .65rem; padding: 3rem 1rem; text-align: center;
}
.qhr-empty__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--qh-card-2); border: 1.5px solid var(--qh-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.qhr-empty__title { font-size: 14px; font-weight: 700; color: var(--qh-text-1); }
.qhr-empty__sub   { font-size: 13px; color: var(--qh-text-3); max-width: 280px; line-height: 1.5; }

/* ── Error state ──────────────────────────────────────── */
.qhr-error-state {
  display: flex; flex-direction: column; align-items: center;
  gap: .6rem; padding: 2.5rem 1rem; text-align: center;
}
.qhr-error-state__icon  { font-size: 32px; }
.qhr-error-state__title { font-size: 14px; font-weight: 700; color: var(--qh-text-1); }
.qhr-error-state__sub   { font-size: 13px; color: var(--qh-text-3); }

/* ── Skeleton loading ─────────────────────────────────── */
.qhr-load-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .85rem;
}
.qhr-skeleton-card {
  background: var(--qh-surface); border: 1.5px solid var(--qh-border);
  border-radius: var(--qh-radius-lg); overflow: hidden;
}
.qhr-skeleton-img {
  aspect-ratio: 4/3; background: var(--qh-card-2);
  animation: qhr-pulse 1.4s ease-in-out infinite;
}
.qhr-skeleton-body { padding: .75rem; display: flex; flex-direction: column; gap: .45rem; }
.qhr-sk-line {
  height: 10px; border-radius: 99px; background: var(--qh-card-2);
  animation: qhr-pulse 1.4s ease-in-out infinite;
}
.qhr-sk-line--lg { width: 80%; }
.qhr-sk-line--sm { width: 50%; animation-delay: .15s; }

@keyframes qhr-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

/* ── Search prompt (idle state) ──────────────────────── */
.qhr-search-prompt {
  display: flex; flex-direction: column; align-items: center;
  gap: .65rem; padding: 3rem 1rem; text-align: center;
}
.qhr-search-prompt__icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--qh-brand-dim); color: var(--qh-brand);
  border: 2px solid rgba(0,181,204,.2);
}
.qhr-search-prompt__title { font-size: 16px; font-weight: 700; color: var(--qh-text-1); }
.qhr-search-prompt__sub   { font-size: 13px; color: var(--qh-text-3); max-width: 280px; line-height: 1.55; }

/* ── Pagination ───────────────────────────────────────── */
.qhr-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; padding: 1.25rem 0 .25rem;
}
.qhr-page-btn {
  padding: .45rem 1.1rem; font-size: 13px; font-weight: 600;
  border-radius: var(--qh-radius); border: 1.5px solid var(--qh-border);
  background: var(--qh-surface); color: var(--qh-text-2); cursor: pointer;
  transition: all var(--qh-t);
}
.qhr-page-btn:hover:not(:disabled) { border-color: var(--qh-brand); color: var(--qh-brand); background: var(--qh-brand-dim); }
.qhr-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.qhr-page-info { font-size: 13px; color: var(--qh-text-3); white-space: nowrap; min-width: 100px; text-align: center; }

/* ── Header badge (selected count) ───────────────────── */
.qhr-header-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 99px; background: var(--qh-brand); color: #fff;
  font-size: 12.5px; font-weight: 700;
}

/* =================================================================
   PROFILE — company display (read-only)
   ================================================================= */
.qh-company-display {
  display: flex; align-items: center; gap: .6rem;
  height: 42px; padding: 0 .875rem;
  border: 1.5px solid var(--qh-border); border-radius: var(--qh-radius);
  background: var(--qh-card-2); color: var(--qh-text-2);
  font-size: 14px;
}
.qh-company-display__name { font-weight: 600; color: var(--qh-text-1); }
.qh-company-display__domain { font-size: 12px; color: var(--qh-text-3); margin-left: auto; }
.qh-field-hint { font-size: 11.5px; color: var(--qh-text-3); margin-top: .3rem; }

/* =================================================================
   PRODUCT DETAIL MODAL  (.qhr-detail-*)
   ================================================================= */
.qhr-detail-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: flex-end; justify-content: flex-end;
  pointer-events: none;
}
.qhr-detail-modal--open { pointer-events: auto; }

.qhr-detail-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,15,30,.45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .22s ease;
}
.qhr-detail-modal--open .qhr-detail-backdrop { opacity: 1; }

.qhr-detail-panel {
  position: relative; z-index: 1;
  width: min(540px, 96vw); height: 100vh;
  background: var(--qh-surface); border-left: 1px solid var(--qh-border);
  box-shadow: -6px 0 32px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.qhr-detail-modal--open .qhr-detail-panel { transform: translateX(0); }

.qhr-detail-header {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--qh-border);
  flex-shrink: 0;
}
.qhr-detail-title {
  flex: 1; font-size: 16px; font-weight: 700; color: var(--qh-text-1);
  margin: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qhr-detail-close {
  flex-shrink: 0; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--qh-radius-sm); border: 1.5px solid var(--qh-border);
  background: transparent; color: var(--qh-text-3); cursor: pointer;
  transition: all var(--qh-t);
}
.qhr-detail-close:hover { border-color: var(--qh-border-2); color: var(--qh-text-1); background: var(--qh-card-2); }

.qhr-detail-body {
  flex: 1; overflow-y: auto; padding: 1.25rem;
  scroll-padding-top: .5rem;
}
.qhr-detail-body::-webkit-scrollbar { width: 5px; }
.qhr-detail-body::-webkit-scrollbar-thumb { background: var(--qh-border-2); border-radius: 99px; }

/* Skeleton */
.qhr-detail-skel { display: flex; flex-direction: column; gap: 1rem; }
.qhr-detail-skel__img {
  width: 100%; aspect-ratio: 16/9; border-radius: var(--qh-radius-lg);
  background: var(--qh-card-2); animation: qhr-pulse 1.4s ease-in-out infinite;
}
.qhr-detail-skel__lines { display: flex; flex-direction: column; gap: .6rem; }
.qhr-detail-skel__line {
  height: 12px; border-radius: 99px; background: var(--qh-card-2);
  animation: qhr-pulse 1.4s ease-in-out infinite;
}

/* Error */
.qhr-detail-error {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding: 2.5rem 1rem; text-align: center; color: var(--qh-text-3);
}

/* Hero: image + meta */
.qhr-detail-hero { margin-bottom: 1.25rem; }
.qhr-detail-img-wrap {
  width: 100%; background: var(--qh-card-2);
  border-radius: var(--qh-radius-lg); overflow: hidden;
  border: 1px solid var(--qh-border); margin-bottom: .75rem;
}
.qhr-detail-img {
  width: 100%; display: block; object-fit: contain;
  max-height: 260px; background: var(--qh-card-2);
}
.qhr-detail-gallery {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem;
}
.qhr-detail-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--qh-radius-sm); border: 2px solid var(--qh-border);
  cursor: pointer; transition: border-color var(--qh-t), opacity var(--qh-t);
  opacity: .75;
}
.qhr-detail-thumb:hover { opacity: 1; border-color: var(--qh-brand); }
.qhr-detail-thumb--active { border-color: var(--qh-brand); opacity: 1; }
.qhr-detail-hero-meta { display: flex; flex-direction: column; gap: .45rem; margin-top: .5rem; }
.qhr-detail-sku {
  font-size: 12px; color: var(--qh-text-3);
  font-family: 'JetBrains Mono', monospace, sans-serif; letter-spacing: .03em;
}
.qhr-detail-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.qhr-detail-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  background: var(--qh-brand-dim); color: var(--qh-brand);
  border: 1px solid rgba(0,181,204,.25); border-radius: 99px;
  padding: .2rem .65rem;
}
.qhr-detail-badge--purple {
  background: var(--qh-purple-dim); color: var(--qh-purple);
  border-color: rgba(139,92,246,.25);
}
.qhr-detail-badge--gray {
  background: var(--qh-card-2); color: var(--qh-text-2);
  border-color: var(--qh-border);
}

/* Sections */
.qhr-detail-sections { display: flex; flex-direction: column; gap: 0; }
.qhr-detail-section {
  padding: 1rem 0;
  border-top: 1px solid var(--qh-border);
}
.qhr-detail-section:first-child { border-top: none; padding-top: 0; }
.qhr-detail-stitle {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--qh-text-3); margin: 0 0 .65rem;
}

/* Description */
.qhr-detail-desc {
  font-size: 13.5px; line-height: 1.65; color: var(--qh-text-2);
  white-space: pre-wrap; word-break: break-word;
}
.qhr-detail-desc--html { white-space: normal; }
.qhr-detail-desc--html ul, .qhr-detail-desc--html ol { padding-left: 1.4rem; margin: .35rem 0; }
.qhr-detail-desc--html li { margin: .2rem 0; }
.qhr-detail-desc--html p  { margin: .35rem 0; }
.qhr-detail-acc-sku { font-size: 11px; color: var(--qh-text-3); font-family: 'JetBrains Mono', monospace, sans-serif; }

/* Specs dl */
.qhr-detail-specs { margin: 0; }
.qhr-detail-spec {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: .3rem .75rem; padding: .45rem 0;
  border-bottom: 1px solid var(--qh-border);
}
.qhr-detail-spec:last-child { border-bottom: none; }
.qhr-detail-spec dt {
  font-size: 12.5px; font-weight: 600; color: var(--qh-text-2);
  align-self: start;
}
.qhr-detail-spec dd {
  font-size: 12.5px; color: var(--qh-text-1); margin: 0;
  word-break: break-word;
}

/* Accessories */
.qhr-detail-acc-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .3rem;
}
.qhr-detail-acc-item {
  display: flex; align-items: center; gap: .45rem;
  font-size: 13px; color: var(--qh-text-2); padding: .3rem 0;
}
.qhr-detail-acc-item svg { flex-shrink: 0; color: var(--qh-brand); }

/* Documents */
.qhr-detail-docs { display: flex; flex-direction: column; gap: .45rem; }
.qhr-detail-doc {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .85rem; border-radius: var(--qh-radius);
  background: var(--qh-card-2); border: 1.5px solid var(--qh-border);
  text-decoration: none; color: var(--qh-text-1);
  transition: border-color var(--qh-t), background var(--qh-t), box-shadow var(--qh-t);
}
.qhr-detail-doc:hover {
  border-color: var(--qh-brand); background: var(--qh-brand-dim);
  box-shadow: 0 2px 8px rgba(0,181,204,.12);
}
.qhr-detail-doc__icon { flex-shrink: 0; color: var(--qh-brand); }
.qhr-detail-doc__name { flex: 1; font-size: 13px; font-weight: 500; }
.qhr-detail-doc__size { font-size: 11px; color: var(--qh-text-3); white-space: nowrap; }
.qhr-detail-doc__dl { flex-shrink: 0; color: var(--qh-text-3); }
.qhr-detail-doc:hover .qhr-detail-doc__dl { color: var(--qh-brand); }

@media (max-width: 600px) {
  .qhr-detail-panel { width: 100vw; }
  .qhr-detail-img { max-height: 200px; }
}

/* =================================================================
   PRODUCT REQUEST — responsive
   ================================================================= */
@media (max-width: 960px) {
  .qhr-layout { grid-template-columns: 1fr; }
  .qhr-sidebar { position: static; }
  .qhr-sidebar__list { max-height: 220px; }
  .qhr-intro { flex-wrap: wrap; }
  .qhr-intro__stat { flex-direction: row; gap: .5rem; padding: .4rem .8rem; min-width: unset; }
  .qhr-intro__num { font-size: 18px; }
}
@media (max-width: 640px) {
  .qhr-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; }
  .qhr-load-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; }
  .qhr-prev-grid { grid-template-columns: 1fr; }
  .qhr-toolbar { padding: .75rem; }
  .qhr-toolbar__top { flex-wrap: wrap; }
  .qhr-result-count { width: 100%; text-align: right; }
  .qhr-intro { padding: .9rem 1rem; }
}

/* =================================================================
   PRODUCT DETAIL PANEL
   ================================================================= */
.qh-quote-item__thumb--clickable { cursor: zoom-in; transition: opacity .12s; }
.qh-quote-item__thumb--clickable:hover { opacity: .8; }
.qh-detail-btn {
  flex-shrink: 0; margin-left: auto; background: transparent; border: none;
  color: var(--qh-text-3); font-size: .95rem; cursor: pointer; padding: .15rem .3rem;
  border-radius: 4px; line-height: 1; transition: color .12s, background .12s;
}
.qh-detail-btn:hover { color: var(--qh-accent); background: rgba(0,181,204,.08); }

.qh-detail-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,23,42,.45); backdrop-filter: blur(3px);
  display: flex; align-items: stretch; justify-content: flex-end;
  opacity: 0; transition: opacity .2s;
}
.qh-detail-overlay--open { opacity: 1; }

.qh-detail-panel {
  width: 400px; max-width: 100vw; background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,.15); display: flex; flex-direction: column;
  transform: translateX(40px); transition: transform .22s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
}
.qh-detail-overlay--open .qh-detail-panel { transform: translateX(0); }

.qh-detail-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--qh-border);
  background: var(--qh-surface-2,#f8fafc); flex-shrink: 0;
}
.qh-detail-panel__close {
  width: 28px; height: 28px; background: transparent; border: 1px solid var(--qh-border);
  border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--qh-text-2);
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.qh-detail-panel__close:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

.qh-detail-panel__body { flex: 1; overflow-y: auto; padding: 1.25rem 1.1rem; }
.qh-detail-panel__img-wrap {
  display: flex; align-items: center; justify-content: center;
  background: #f8fafc; border: 1px solid var(--qh-border);
  border-radius: 10px; padding: 1rem; margin-bottom: 1rem; min-height: 160px;
}
.qh-detail-panel__img { max-height: 180px; max-width: 100%; object-fit: contain; }
.qh-detail-panel__name { font-size: 1rem; font-weight: 700; color: var(--qh-text-1); margin: 0 0 .5rem; }
.qh-detail-panel__desc { font-size: .84rem; color: var(--qh-text-2); line-height: 1.6; margin: 0 0 1rem; }

.qh-detail-section { margin-bottom: 1rem; }
.qh-detail-section__title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--qh-text-3); margin-bottom: .45rem;
}
.qh-doc-row {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .85rem; border: 1px solid var(--qh-border);
  border-radius: 6px; margin-bottom: .35rem; text-decoration: none;
  color: var(--qh-text-1); transition: all .12s;
}
.qh-doc-row:hover { border-color: var(--qh-accent,#00b5cc); background: rgba(0,181,204,.05); color: var(--qh-accent,#00b5cc); }
.qh-doc-row__icon { font-size: 1rem; flex-shrink: 0; }
.qh-doc-row__name { flex: 1; font-size: .82rem; font-weight: 500; padding-right: .5rem; }
.qh-doc-row__dl { font-size: .8rem; color: var(--qh-text-3); flex-shrink: 0; }

/* Detail panel — new components (mirrors seller side, no cost/margin) */
.qh-detail-panel__head-tags { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.qh-detail-meta-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.qh-detail-meta-table td { padding: .3rem .1rem; border-bottom: 1px solid var(--qh-border, #e2e8f0); vertical-align: top; }
.qh-detail-meta-table td:first-child { color: var(--qh-text-2); width: 40%; }

.qh-detail-subsection { margin-top: .65rem; }
.qh-detail-subsection h4 {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--qh-text-3); margin: 0 0 .3rem;
}
.qh-detail-subsection p { font-size: .85rem; line-height: 1.55; color: var(--qh-text-2); margin: 0; }
.qh-detail-longdesc { white-space: pre-wrap; }
.qh-detail-longdesc--html { white-space: normal; font-size: .87rem; line-height: 1.55; color: var(--qh-text-2); }
.qh-detail-longdesc--html p { margin: 0 0 .5em; }
.qh-detail-longdesc--html p:last-child { margin-bottom: 0; }
.qh-detail-longdesc--html ul, .qh-detail-longdesc--html ol { margin: .3em 0 .55em 1.2em; padding: 0; }
.qh-detail-longdesc--html li { margin: .15em 0; }
.qh-detail-longdesc--html strong { color: var(--qh-text-1); font-weight: 700; }
.qh-detail-longdesc--html a { color: var(--qh-accent, #00b5cc); text-decoration: underline; }
.qh-detail-longdesc--html h2,
.qh-detail-longdesc--html h3,
.qh-detail-longdesc--html h4 { font-size: .92rem; color: var(--qh-text-1); margin: .8em 0 .3em; font-weight: 700; }
.qh-detail-longdesc--html table { width: 100%; border-collapse: collapse; margin: .35em 0; font-size: .82rem; }
.qh-detail-longdesc--html td, .qh-detail-longdesc--html th { padding: .25rem .4rem; border-bottom: 1px solid var(--qh-border, #e2e8f0); }

.qh-detail-loading {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .65rem; margin-bottom: .85rem;
  background: var(--qh-bg, #f8fafc);
  border: 1px solid var(--qh-border, #e2e8f0);
  border-radius: 6px;
  font-size: .8rem; color: var(--qh-text-2);
}

.qh-detail-opt-skus { display: flex; flex-wrap: wrap; gap: .3rem; }
.qh-detail-opt-sku {
  display: inline-block;
  padding: 2px 8px;
  background: var(--qh-bg, #f8fafc);
  border: 1px solid var(--qh-border, #e2e8f0);
  border-radius: 4px;
  font-family: 'Consolas', 'SF Mono', monospace;
  font-size: .78rem;
  color: var(--qh-text-1);
}

.qh-detail-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .35rem;
}
.qh-detail-gallery__item {
  display: block; border: 1px solid var(--qh-border, #e2e8f0); border-radius: 6px;
  overflow: hidden; background: #fff;
  transition: border-color .12s, transform .12s;
}
.qh-detail-gallery__item:hover {
  border-color: var(--qh-accent, #00b5cc);
  transform: translateY(-2px);
}
.qh-detail-gallery__item img { width: 100%; height: 72px; object-fit: contain; display: block; padding: 4px; }

/* Cross-section drop zone */
.qh-quote-items.qh-drop-zone-over {
  background: rgba(0,181,204,.06) !important;
  outline: 2px dashed var(--qh-accent,#00b5cc);
  outline-offset: -2px;
  min-height: 48px;
}

/* =================================================================
   RELOAD BANNER
   ================================================================= */
.qh-reload-banner {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .65rem 1rem; margin-bottom: 1rem;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  font-size: .85rem; color: #92400e; font-weight: 500;
}
.qh-reload-banner__btn {
  flex-shrink: 0; padding: .35rem .8rem; background: #f59e0b; color: #fff;
  border: none; border-radius: 6px; font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.qh-reload-banner__btn:hover { background: #d97706; }

/* ── Customer portal — Compare view ─────────────────────────────── */
#qh-view-compare { padding: 0; }
.qhc-slots { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1rem; }
.qhc-slot { flex: 1; min-width: 170px; max-width: 240px; }
.qhc-slot-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.qhc-slot-lbl { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--qh-text-2, #64748b); }
.qhc-rm { background: none; border: none; cursor: pointer; color: var(--qh-text-2, #64748b); font-size: .9rem; padding: 0 .2rem; line-height: 1; }
.qhc-rm:hover { color: #ef4444; }
.qhc-inp-wrap { position: relative; }
.qhc-dd {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
  background: #fff; border: 1px solid var(--qh-border, #e2e8f0);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.10);
  max-height: 260px; overflow-y: auto; margin-top: 2px;
}
.qhc-dd-item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  background: none; border: none; padding: .5rem .75rem; cursor: pointer; text-align: left;
}
.qhc-dd-item:hover { background: #f8fafc; }
.qhc-dd-thumb { width: 34px; height: 26px; object-fit: contain; flex-shrink: 0; }
.qhc-dd-thumb--empty { width: 34px; height: 26px; background: #f1f5f9; border-radius: 4px; flex-shrink: 0; display: inline-block; }
.qhc-dd-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.qhc-dd-name { font-size: .82rem; font-weight: 500; color: var(--qh-text, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qhc-dd-series { font-size: .72rem; color: var(--qh-text-2, #64748b); }
.qhc-dd-access { font-size: .68rem; font-weight: 600; border-radius: 3px; padding: 1px 5px; display: inline-block; }
.qhc-dd-access--yes { background: #dcfce7; color: #15803d; }
.qhc-dd-access--no  { background: #fef2f2; color: #b91c1c; }
.qhc-act { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.qhc-result-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; flex-wrap: wrap; gap: .5rem; }
.qhc-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid var(--qh-border, #e2e8f0); }
.qhc-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.qhc-th {
  padding: 1.1rem 1.5rem; background: #fff; border-bottom: 2px solid var(--qh-border, #e2e8f0);
  border-right: 1px solid var(--qh-border, #e2e8f0); text-align: center; min-width: 180px; vertical-align: bottom;
}
.qhc-th--lbl {
  min-width: 190px; text-align: left; position: sticky; left: 0; z-index: 2;
  border-right: 2px solid var(--qh-border, #e2e8f0);
}
.qhc-prod-img { max-width: 100px; max-height: 60px; object-fit: contain; display: block; margin: 0 auto .5rem; }
.qhc-prod-name { font-weight: 700; font-size: .87rem; color: var(--qh-text, #0f172a); }
.qhc-prod-sku  { font-size: .72rem; color: var(--qh-text-2, #64748b); margin-top: .1rem; }
.qhc-prod-access { margin-top: .5rem; }
.qhc-access-badge {
  display: inline-block; font-size: .73rem; font-weight: 600; border-radius: 4px; padding: .2rem .55rem;
}
.qhc-access-badge--yes { background: #dcfce7; color: #15803d; }
.qhc-access-badge--req { background: #dbeafe; color: #1d4ed8; }
.qhc-access-btn {
  font-size: .73rem; font-weight: 600; background: #fff7ed; color: #c2410c;
  border: 1px solid #fed7aa; border-radius: 4px; padding: .2rem .55rem; cursor: pointer;
  transition: background .12s;
}
.qhc-access-btn:hover { background: #ffedd5; }
.qhc-access-btn:disabled { opacity: .6; cursor: default; }
.qhc-sec-row td {
  padding: .45rem 1rem; font-size: .71rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--qh-brand, #1B6CA8); background: #f0f9ff;
  border-top: 1px solid var(--qh-border, #e2e8f0);
  position: sticky; left: 0;
}
.qhc-field {
  padding: .5rem 1.5rem .5rem 1rem; color: var(--qh-text-2, #64748b); font-size: .8rem;
  border-bottom: 1px solid var(--qh-border, #e2e8f0); border-right: 2px solid var(--qh-border, #e2e8f0);
  white-space: nowrap; min-width: 190px;
  position: sticky; left: 0; background: #fff; z-index: 1;
}
.qhc-val {
  padding: .5rem 1.5rem; text-align: center;
  border-bottom: 1px solid var(--qh-border, #e2e8f0); border-right: 1px solid var(--qh-border, #e2e8f0);
  color: var(--qh-text, #0f172a); min-width: 160px;
}
tr > .qhc-val:last-child { border-right: none; }
.qhc-diff { background: #fffbeb; }
.qhc-diff .qhc-field { background: #fffbeb; }
.qhc-diff .qhc-val { font-weight: 500; }
.qhc-table tbody tr:hover:not(.qhc-sec-row) { background: #f8fafc; }
.qhc-table tbody tr:hover:not(.qhc-sec-row) .qhc-field { background: #f8fafc; }
#qh-view-compare .qhc-scroll { margin-top: 0; }
/* Picker card */
#qhc-picker {
  background: #fff; border: 1px solid var(--qh-border, #e2e8f0);
  border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem;
}

/* =================================================================
   COMPARE VIEW — mobile responsive
   ================================================================= */
@media (max-width: 640px) {
  #qhc-picker { padding: .9rem; border-radius: 10px; }
  .qhc-slot   { max-width: 100%; }
  .qhc-act    { flex-wrap: wrap; }
  .qhc-act .qh-btn { flex: 1; justify-content: center; }
}
@media (max-width: 480px) {
  .qhc-slots { flex-direction: column; }
  .qhc-slot  { min-width: 0; }
}

/* =================================================================
   PRODUCT CARD — list variant: collapse on small phones
   ================================================================= */
@media (max-width: 560px) {
  .qh-pcard--list { flex-wrap: wrap; }
  .qh-pcard__list-media {
    width: 80px;
  }
  .qh-pcard__list-right {
    min-width: 0;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-left: none;
    border-top: 1px solid var(--qh-border);
    padding: .6rem 1rem;
  }
  .qh-pcard__list-right .qh-pcard__price-area { justify-content: flex-start; }
  .qh-pcard__list-right .qh-btn { white-space: nowrap; font-size: 12px; padding: .38rem .7rem; }
}

/* =================================================================
   QUOTES TOOLBAR — wrap on mobile
   ================================================================= */
@media (max-width: 500px) {
  .qh-quotes-toolbar { gap: .45rem; }
  .qh-quotes-search-wrap { margin-left: 0; width: 100%; }
  .qh-quotes-search-input { width: 100%; }
}

/* =================================================================
   CATALOG TOOLBAR — wrap on mobile
   ================================================================= */
@media (max-width: 640px) {
  .qh-catalog-toolbar { flex-wrap: wrap; }
  .qh-catalog-toolbar .qh-search-wrap { width: 100%; flex: none; }
}

/* =================================================================
   DASHBOARD PAGE HEADER ACTIONS — stack on mobile
   ================================================================= */
@media (max-width: 480px) {
  .qh-page-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .qh-page-header__actions { align-self: stretch; }
  .qh-page-header__actions .qh-btn { width: 100%; justify-content: center; }
}


/* ============================================================================
   MOBILE — comprehensive responsive overrides (customer portal)
   Mirrors the seller-side mobile pass but tailored for the customer flow:
   - Quote items reflow to vertical cards (touch-friendly)
   - Detail panel full-screen on phone
   - Catalog grid reflows
   - PDF link + sidebar adapt
   ============================================================================ */

/* ── Tablet (≤960px) ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .qh-quote-layout { grid-template-columns: 1fr; }
  .qh-quote-layout__sidebar { order: -1; } /* sidebar above main on tablet for visibility */
  .qh-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ── Mobile (≤640px) ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* ── 0. Hide decorative animations that exceed viewport on small screens.
     The 820px graphic and 1400px radio rings are eye-candy only — removing them on phones
     eliminates any chance of iOS WebKit horizontal-scroll leakage. */
  .qhp-login__graphic,
  .qhp-radio-rings,
  .qhp-login-mesh { display: none !important; }

  /* ── 1. Quote items vertical card layout ── */
  .qh-quote-items__header { display: none; }
  .qh-quote-item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    grid-template-areas:
      "drag info     actions"
      ".    info     info"
      ".    qty-price qty-price"
      ".    price-detail price-detail"
      ".    total    total";
    gap: .35rem .55rem;
    padding: .75rem .65rem;
    font-size: 13.5px;
  }
  .qh-drag-handle { grid-area: drag; }
  .qh-quote-item__info { grid-area: info; }
  .qh-quote-item__qty  {
    grid-area: qty-price;
    justify-self: start;
    flex-direction: row;
    align-items: center;
    gap: .5rem; padding-top: 0;
  }
  .qh-quote-item__qty::before {
    content: 'Antall:';
    font-size: .72rem; color: var(--qh-text-2, #475569); font-weight: 600;
  }
  .qh-quote-item__price {
    grid-area: qty-price; justify-self: end;
    text-align: right; padding-top: 0;
  }
  .qh-quote-item__total {
    grid-area: total; text-align: left;
    font-size: 1.05rem; padding-top: .5rem; padding-right: 0;
    border-top: 1px solid var(--qh-border, #e2e8f0);
  }
  .qh-quote-item__total::before {
    content: 'Sum: '; color: var(--qh-text-2, #475569);
    font-size: .8rem; font-weight: 600;
  }
  .qh-quote-item__actions { grid-area: actions; justify-self: end; }
  .qh-price-stack { align-items: flex-end; }

  /* ── 2. Quote total card ── */
  .qh-quote-total { padding: .8rem 1rem; }
  .qh-quote-total__line { font-size: 13px; }
  .qh-quote-total__line--final { font-size: 14px; }
  .qh-quote-total__value { font-size: 18px; }

  /* ── 3. Catalog grid → 2 then 1 ── */
  .qh-catalog-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }

  /* ── 4. Detail panel full-width — 100% (not 100vw) avoids iOS layout/visual viewport mismatch ── */
  .qh-detail-panel { width: 100%; max-width: 100%; border-radius: 0; }
  .qh-detail-panel__head { padding: .85rem 1rem; }
  .qh-detail-panel__body { padding: 1rem .9rem; }
  .qh-detail-panel__img-wrap { padding: .6rem; min-height: 140px; }
  .qh-detail-gallery { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .qh-detail-meta-table { font-size: .82rem; }

  /* ── 5. Section header — wrap actions ── */
  .qh-quote-section__header { flex-wrap: wrap; gap: .35rem .55rem; }
  .qh-section-action-btn { width: 36px; height: 36px; }

  /* ── 6. Buttons / inputs — touch-friendly ── */
  .qh-btn { min-height: 36px; }
  .qh-btn--sm { min-height: 32px; }
  .qh-btn--primary { min-height: 40px; }
  .qh-input,
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  .qh-textarea,
  select { min-height: 38px; font-size: 16px; /* iOS no-zoom */ }
  .qh-textarea { min-height: 80px; }

  /* ── 7. Catalog cards: touch padding ── */
  .qh-catalog-card { padding: .65rem; }
  .qh-catalog-card__add { min-height: 36px; }

  /* ── 8. Auth/login — narrow card fits viewport ── */
  .qh-auth-card { width: 92vw; max-width: 92vw; margin: 1rem auto; }
  .qh-auth-card__top { padding: 1.5rem 1.2rem 1rem; }
  .qh-auth-card__body { padding: 1.2rem; }

  /* ── 9. Chat input (Meldinger) — full width and easier to tap ── */
  .qh-chat-input { flex-direction: column; align-items: stretch; gap: .5rem; }
  .qh-chat-input .qh-textarea { width: 100%; }
  .qh-chat-input .qh-btn { width: 100%; min-height: 38px; }

  /* ── 10. Quote-section totals row stack ── */
  .qh-quote-section__total { text-align: left; padding: .35rem .85rem; font-size: 13px; }

  /* ── 11. Need-by + meta badges wrap ── */
  .qh-quote-meta-row, .qh-quote-meta { flex-wrap: wrap; }
  .qh-need-by { font-size: .8rem; }

  /* ── 12. Section title input clearer ── */
  .qh-input--inline { font-size: 14px; }
}

/* ── Small phones (≤380px) ───────────────────────────────────────────────── */
@media (max-width: 380px) {
  .qh-quote-item { grid-template-columns: 28px 1fr auto; gap: .25rem .45rem; padding: .65rem .5rem; }
  .qh-catalog-grid { grid-template-columns: 1fr; }
}

/* ── Global iOS safety net for customer portal ─────────────────────────────
   No image, video, table or long string may extend past its container width.
   Pairs with html/body overflow-x:hidden above. */
.qh-portal-body img,
.qh-portal-body video,
.qh-portal-body iframe { max-width: 100%; height: auto; }
.qh-portal-body table { max-width: 100%; }
.qh-portal-body { overflow-wrap: break-word; word-wrap: break-word; }