/* pricing-hero.css — ONE navy hero across every pricing page:
   King · Price List · LIFT Calculator · LIFT DA Model · Pricing Calculator.
   DM Sans breadcrumb title, NO copper underline, uniform height (88px), and
   LIFT-Calculator-style pickers + uniform buttons. Per-page content width:
   set --hero-w on the page (default 1280px; Price List 1080, Calculator 920). */

.hero { background: linear-gradient(135deg, #1B2A4A, #26385c); color: #fff; }
.hero-inner {
  max-width: var(--hero-w, 1280px); margin: 0 auto; padding: 16px 32px;
  min-height: 56px; box-sizing: border-box;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

/* Icon + title block */
.hero-icon {
  height: 44px; width: 44px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
}
.hero-icon svg { width: 22px; height: 22px; color: var(--copper-lt, #d4924d); }
.hero-head { min-width: 0; }
.hero-title {
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 23px; font-weight: 700;
  margin: 0; color: #fff; line-height: 1.1; letter-spacing: -0.01em;
}
.hero-title a { color: #cbd5e1; font-weight: 600; text-decoration: none; }
.hero-title a:hover { color: #fff; text-decoration: underline; }
.hero-title .sep { color: #64748b; font-weight: 400; margin: 0 6px; }
.hero-sub {
  font-family: 'DM Sans', system-ui, sans-serif; color: rgba(255,255,255,0.6);
  font-size: 13px; margin: 3px 0 0 0;
}

/* Controls cluster — pickers (label over select) + buttons, right-aligned */
.hero-pickers { margin-left: auto; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.hero-pickers .pk { display: flex; flex-direction: column; }
.hero-pickers .pk label {
  color: rgba(255,255,255,0.45); font: 600 10px/1 'DM Sans', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px;
}
.hero-pickers select {
  height: 36px; background: rgba(255,255,255,0.06); color: #fff;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; padding: 0 10px;
  font: 500 13px 'DM Sans', system-ui, sans-serif; min-width: 150px; outline: none; cursor: pointer;
}
.hero-pickers select:hover { border-color: rgba(255,255,255,0.32); }
.hero-pickers select option { color: #1B2A4A; }

.hero-btn {
  height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08); color: #fff;
  font: 600 11px 'DM Mono', ui-monospace, monospace; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.hero-btn svg { width: 15px; height: 15px; }
.hero-btn:hover { border-color: rgba(255,255,255,0.5); }
.hero-btn.primary { background: #fff; color: #1B2A4A; border-color: #fff; }
.hero-btn.primary:hover { background: #f1f1ee; }
.hero-btn.copper { background: var(--copper, #C87533); border-color: var(--copper, #C87533); color: #fff; }
.hero-btn.copper:hover { background: var(--copper-deep, #A65E2E); }
.hero-btn:disabled { opacity: 0.55; cursor: default; }

/* Segmented toggle (e.g. King's Full / Simple) */
.hero-seg { display: inline-flex; height: 36px; box-sizing: border-box; padding: 3px; gap: 2px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; }
.hero-seg a, .hero-seg button {
  display: inline-flex; align-items: center; padding: 0 12px; border: 0; border-radius: 6px;
  background: transparent; color: rgba(255,255,255,0.7); cursor: pointer; text-decoration: none;
  font: 600 12px 'DM Sans', system-ui, sans-serif;
}
.hero-seg .is-on { background: #fff; color: #1B2A4A; }

/* Print — the navy band doesn't render on white paper, so recolor to navy text
   on white for a clean printed header. */
@media print {
  .hero { background: none !important; }
  .hero-inner { padding: 10px 0; }
  .hero-title, .hero-title a { color: #1B2A4A !important; }
  .hero-title .sep { color: #8A887E !important; }
  .hero-sub { color: #4A4A4A !important; }
  .hero-icon { background: #F3F1EC !important; border-color: #EAE8E1 !important; }
  .hero-pickers, .hero-seg { display: none; }
}

/* Centered in-page filter bar (Winery / Wine) — placed immediately after the
   subnav on Price List + LIFT Calculator so it sits in the identical spot on
   every page (no bounce). Owns the top spacing; content wrappers get 0. */
.pricing-filterbar {
  max-width: var(--hero-w, 1280px); margin: 0 auto; padding: 28px 32px; box-sizing: border-box;
  display: flex; align-items: flex-end; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.pricing-filterbar .pk-c { display: flex; flex-direction: column; align-items: center; }
.pricing-filterbar label {
  font: 700 10px/1 'DM Mono', ui-monospace, monospace; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute, #8A887E); margin-bottom: 6px;
}
.pricing-filterbar select {
  height: 40px; min-width: 220px; box-sizing: border-box; background: #fff; color: var(--ink, #1B2A4A);
  border: 1px solid var(--hairline-strong, #D8D6CF); border-radius: 9px; padding: 0 12px;
  font: 600 14px 'DM Sans', sans-serif; outline: none; cursor: pointer;
}
.pricing-filterbar select:hover { border-color: var(--copper, #C87533); }
@media print { .pricing-filterbar { display: none; } }