/* ═══════════════════════════════════════════════════════════════
   SYZ Rod Ends — Spec Page Stylesheet v2
   Design System: Slate + Steel Blue + Red CTA
   Fonts: Barlow Condensed (heads) + Inter (body)
   Fonts loaded globally via style.css @font-face — no @import needed here.
   Root wrapper required: <div class="syz-spec-page">...</div>
   All rules scoped to .syz-spec-page — safe for WordPress Custom HTML
═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   TOKENS (scoped — won't leak outside .syz-spec-page)
══════════════════════════════════════════════════════════ */
.syz-spec-page {
  --sp-slate:      #1c2b3a;
  --sp-slate-mid:  #2d4257;
  --sp-slate-soft: #3d5166;
  --sp-steel:      #1a6fa8;
  --sp-steel-lt:   #e8f2f9;
  --sp-steel-bd:   #c8dff0;
  --sp-red:        #c0392b;
  --sp-red-dark:   #9b2d23;
  --sp-ink:        #2d3e50;
  --sp-mid:        #607080;
  --sp-line:       #d0dce8;
  --sp-bg:         #f4f7fa;
  --sp-white:      #ffffff;
  --sp-f-head:     'Barlow Condensed', system-ui, sans-serif;
  --sp-f-body:     'Inter', system-ui, sans-serif;
  --sp-r:          6px;
  --sp-ease:       cubic-bezier(.25,.46,.45,.94);
  --sp-shadow:     0 2px 12px rgba(28,43,58,.08);
}

/* ══════════════════════════════════════════════════════════
   BASE RESET
══════════════════════════════════════════════════════════ */
.syz-spec-page *,
.syz-spec-page *::before,
.syz-spec-page *::after { box-sizing: border-box; margin: 0; padding: 0; }

.syz-spec-page {
  font-family: var(--sp-f-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--sp-ink);
  background: var(--sp-bg);
  -webkit-font-smoothing: antialiased;
}

.syz-spec-page button,
.syz-spec-page input,
.syz-spec-page select,
.syz-spec-page textarea { font: inherit; }

.syz-spec-page img { max-width: 100%; display: block; }

/* ══════════════════════════════════════════════════════════
   LAYOUT SHELL
══════════════════════════════════════════════════════════ */
.syz-spec-page .syz-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
}

.syz-spec-page .syz-main {
  padding: 28px;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.syz-spec-page .syz-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 0;
  margin-bottom: 20px;
  min-height: 320px;
  border-radius: var(--sp-r);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(28,43,58,.18);
  align-items: stretch;
}

/* Left — dark copy panel */
.syz-spec-page .syz-hero-copy {
  padding: 34px 36px 30px;
  display: grid;
  gap: 8px;
  align-content: center;
  background: var(--sp-slate);
  border: none;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  z-index: 0;
  height: 100%;
}

/* Grid texture overlay */
.syz-spec-page .syz-hero-copy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: -1;
}

/* Steel diagonal accent strip */
.syz-spec-page .syz-hero-copy::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 14%; height: 100%;
  background: var(--sp-steel);
  opacity: .25;
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
}

/* Eyebrow kicker */
.syz-spec-page .syz-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sp-f-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sp-steel);
  margin: 0 0 4px;
}
.syz-spec-page .syz-section-kicker::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--sp-steel);
  flex-shrink: 0;
}
.syz-spec-page .syz-hero-copy .syz-section-kicker { color: var(--sp-steel); }
.syz-spec-page .syz-hero-copy .syz-section-kicker::before { background: var(--sp-steel); }

/* H1 */
.syz-spec-page h1 {
  margin: 0;
  font-family: var(--sp-f-head);
  font-size: clamp(1.7rem, 2.35vw, 2.35rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
}

.syz-spec-page .syz-sub {
  margin: 0;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  line-height: 1.55;
}

/* Key spec stats */
.syz-spec-page .syz-hero-key-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 6px;
}

.syz-spec-page .syz-hero-key-spec {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--sp-r);
  background: rgba(255,255,255,.04);
}

.syz-spec-page .syz-hero-key-spec-num {
  font-family: var(--sp-f-head);
  font-size: 1.65rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.syz-spec-page .syz-hero-key-spec-num sup {
  font-size: .55rem;
  color: var(--sp-steel);
}

.syz-spec-page .syz-hero-key-spec-label {
  font-family: var(--sp-f-head);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-top: 5px;
}

/* Right — image panel */
.syz-spec-page .syz-hero-media {
  background: var(--sp-white);
  overflow: hidden;
  border: none;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
  border-left: 1px solid var(--sp-line);
}

.syz-spec-page .syz-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.syz-spec-page .syz-hero-media.syz-hero-media--contain { background: var(--sp-white); }
.syz-spec-page .syz-hero-slide.syz-hero-fit-contain { object-fit: contain; }
.syz-spec-page .syz-hero-slide.syz-hero-fit-cover    { object-fit: cover; }

.syz-spec-page .syz-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.syz-spec-page .syz-hero-slide.syz-is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Slider controls */
.syz-spec-page .syz-hero-dots {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 7px;
  z-index: 2;
}
.syz-spec-page .syz-hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(28,43,58,.3);
  background: rgba(28,43,58,.15);
  padding: 0;
  cursor: pointer;
}
.syz-spec-page .syz-hero-dot.syz-is-active {
  background: var(--sp-steel);
  border-color: var(--sp-steel);
}
.syz-spec-page .syz-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border: 1px solid rgba(28,43,58,.18);
  border-radius: 4px;
  background: rgba(255,255,255,.85);
  color: var(--sp-ink);
  display: grid;
  place-items: center;
  font-size: 20px;
  z-index: 2;
  padding: 0;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.syz-spec-page .syz-hero-arrow:hover {
  background: var(--sp-slate);
  color: #fff;
  border-color: var(--sp-slate);
}
.syz-spec-page .syz-hero-arrow.syz-prev { left: 14px; }
.syz-spec-page .syz-hero-arrow.syz-next { right: 52px; }

/* ══════════════════════════════════════════════════════════
   SECTION GRID & CARDS
══════════════════════════════════════════════════════════ */
.syz-spec-page .syz-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.syz-spec-page .syz-section-card,
.syz-spec-page .syz-info-card {
  background: var(--sp-white);
  border: 1px solid var(--sp-line);
  border-top: 3px solid var(--sp-steel);
  border-radius: var(--sp-r);
  box-shadow: var(--sp-shadow);
  padding: 24px;
}

.syz-spec-page .syz-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.syz-spec-page h2 {
  font-family: var(--sp-f-head);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.1;
  color: var(--sp-slate);
}

/* ══════════════════════════════════════════════════════════
   FORM CONTROLS (select, input, textarea)
══════════════════════════════════════════════════════════ */
.syz-spec-page .syz-select-field {
  display: grid;
  gap: 5px;
  position: relative;
}

.syz-spec-page .syz-select-field label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--sp-mid);
  letter-spacing: .04em;
}

.syz-spec-page select,
.syz-spec-page .syz-field input,
.syz-spec-page .syz-field textarea {
  width: 100%;
  border: 1px solid var(--sp-line);
  padding: 10px 12px;
  background: var(--sp-white);
  color: var(--sp-ink);
  border-radius: 4px;
  outline: none;
  transition: border-color .2s;
}

.syz-spec-page select:focus,
.syz-spec-page .syz-field input:focus,
.syz-spec-page .syz-field textarea:focus {
  border-color: var(--sp-steel);
}

.syz-spec-page select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23607080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  transition: border-color .2s, background-color .18s;
}

.syz-spec-page select.syz-is-empty {
  background-color: var(--sp-bg) !important;
  color: #9aa4b2 !important;
  -webkit-text-fill-color: #9aa4b2;
  border-color: var(--sp-line) !important;
}

.syz-spec-page .syz-not-found-text {
  display: none;
  position: absolute;
  left: 13px; right: 40px; bottom: 11px;
  z-index: 2;
  color: var(--sp-mid);
  font-size: .8rem;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.syz-spec-page .syz-select-field.syz-is-not-found .syz-not-found-text { display: block; }
.syz-spec-page .syz-select-field.syz-is-not-found select {
  background-color: var(--sp-bg) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.syz-spec-page .syz-btn,
.syz-spec-page .syz-small-btn,
.syz-spec-page .syz-ghost-btn {
  cursor: pointer;
  transition: background .18s var(--sp-ease), color .18s, border-color .18s;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .06em;
  font-size: .78rem;
  text-transform: uppercase;
}

/* CTA — red */
.syz-spec-page .syz-btn,
.syz-spec-page .syz-small-btn {
  border: 2px solid var(--sp-red);
  background: var(--sp-red);
  color: #fff;
  min-height: 42px;
  padding: 10px 20px;
}
.syz-spec-page .syz-btn:hover,
.syz-spec-page .syz-small-btn:hover {
  background: var(--sp-red-dark);
  border-color: var(--sp-red-dark);
}

.syz-spec-page .syz-spec-link {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sp-steel);
  text-decoration: none;
  white-space: nowrap;
}

.syz-spec-page .syz-spec-link:hover {
  color: var(--sp-red);
}

/* Ghost — steel on hover */
.syz-spec-page .syz-ghost-btn {
  border: 1.5px solid var(--sp-line);
  background: var(--sp-white);
  color: var(--sp-ink);
  min-height: 42px;
  padding: 10px 18px;
}
.syz-spec-page .syz-ghost-btn:hover {
  border-color: var(--sp-steel);
  color: var(--sp-steel);
  background: var(--sp-steel-lt);
}

/* Filter chip */
.syz-spec-page .syz-chip {
  border: 1px solid var(--sp-line);
  background: var(--sp-white);
  color: var(--sp-mid);
  padding: 7px 13px;
  border-radius: 4px;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  transition: all .18s;
}
.syz-spec-page .syz-chip.syz-is-active {
  color: var(--sp-white);
  background: var(--sp-steel);
  border-color: var(--sp-steel);
}

/* ══════════════════════════════════════════════════════════
   TYPE PILLS (XM Male / XF Female)
══════════════════════════════════════════════════════════ */
.syz-spec-page .syz-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.syz-spec-page .syz-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-family: var(--sp-f-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 3px;
}
.syz-spec-page .syz-type-pill.syz-male {
  background: var(--sp-steel);
  color: #fff;
  border-color: var(--sp-steel);
}
.syz-spec-page .syz-type-pill.syz-female {
  background: var(--sp-slate-mid);
  color: #fff;
  border-color: var(--sp-slate-mid);
}

/* ══════════════════════════════════════════════════════════
   FILTER BARS
══════════════════════════════════════════════════════════ */
.syz-spec-page .syz-cross-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}
.syz-spec-page .syz-cross-filters #syzCrossClearBtn { align-self: end; }

.syz-spec-page .syz-selectorbar {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.syz-spec-page .syz-selector-primary,
.syz-spec-page .syz-selector-more {
  display: grid;
  gap: 10px;
  align-items: end;
}
.syz-spec-page .syz-selector-primary {
  grid-template-columns: repeat(3, minmax(140px, 1fr)) auto auto;
}
.syz-spec-page .syz-selector-more {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  padding: 14px;
  background: var(--sp-bg);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r);
}
.syz-spec-page .syz-selector-more[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════
   RESULTS & TABLE
══════════════════════════════════════════════════════════ */
.syz-spec-page .syz-results {
  background: var(--sp-white);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r);
  overflow: hidden;
  box-shadow: var(--sp-shadow);
}

.syz-spec-page .syz-result-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sp-line);
  background: var(--sp-bg);
  font-size: .8rem;
  color: var(--sp-mid);
  font-weight: 500;
}

.syz-spec-page .syz-table-wrap {
  overflow: auto;
  max-height: 58vh;
}

.syz-spec-page table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1060px;
}

.syz-spec-page th,
.syz-spec-page td {
  border-bottom: 1px solid var(--sp-line);
  border-left: 0; border-right: 0; border-top: 0;
  padding: 10px 10px;
  text-align: left;
  font-size: .82rem;
  white-space: nowrap;
  vertical-align: middle;
}

/* Sticky header — dark slate */
.syz-spec-page thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sp-slate);
  background-image: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.1);
  vertical-align: top;
  padding-top: 10px;
  padding-bottom: 10px;
}

.syz-spec-page .syz-th-label {
  display: block;
  font-family: var(--sp-f-head);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.1;
  color: rgba(255,255,255,.9);
  min-height: 1.2em;
}

.syz-spec-page .syz-th-meta {
  display: block;
  margin-top: 6px;
  font-family: var(--sp-f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(255,255,255,.38);
  line-height: 1.25;
  white-space: normal;
  min-height: 2.6em;
}

/* Body rows */
.syz-spec-page .syz-results tbody tr,
.syz-spec-page .syz-results tbody td,
.syz-spec-page .syz-results tbody tr:nth-child(odd),
.syz-spec-page .syz-results tbody tr:nth-child(even),
.syz-spec-page .syz-results tbody tr:nth-child(odd) td,
.syz-spec-page .syz-results tbody tr:nth-child(even) td {
  background: var(--sp-white) !important;
  background-image: none !important;
}

/* Hover row */
.syz-spec-page [data-syz-spec-row] { cursor: pointer; }

.syz-spec-page .syz-results tbody tr[data-syz-spec-row]:hover td {
  background: var(--sp-steel-lt) !important;
  background-color: var(--sp-steel-lt) !important;
  background-image: none !important;
}

.syz-spec-page [data-syz-spec-row]:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--sp-steel);
}

/* In-quote row */
.syz-spec-page [data-syz-spec-row].syz-in-quote td {
  background: rgba(26,111,168,.05) !important;
  background-color: rgba(26,111,168,.05) !important;
  background-image: none !important;
}
.syz-spec-page [data-syz-spec-row].syz-in-quote td:first-child {
  box-shadow: inset 3px 0 0 var(--sp-steel);
}

/* Empty state */
.syz-spec-page .syz-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--sp-mid);
  font-size: .875rem;
}

/* Qty input */
.syz-spec-page .syz-qty {
  width: 80px;
  border: 1px solid var(--sp-line);
  padding: 7px 8px;
  background: var(--sp-white);
  border-radius: 4px;
  text-align: center;
}
.syz-spec-page .syz-qty:focus { border-color: var(--sp-steel); outline: none; }

/* ══════════════════════════════════════════════════════════
   INFO CARDS (Technical Spec, Notes)
══════════════════════════════════════════════════════════ */
.syz-spec-page .syz-info-copy { color: var(--sp-ink); }

.syz-spec-page .syz-info-copy p,
.syz-spec-page .syz-info-copy li {
  font-size: .875rem;
  line-height: 1.75;
  color: var(--sp-mid);
}

.syz-spec-page .syz-info-copy li { margin-bottom: 6px; }
.syz-spec-page .syz-info-copy li strong { color: var(--sp-ink); }

.syz-spec-page .syz-info-copy ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.syz-spec-page .syz-info-copy ul li {
  padding-left: 18px;
  position: relative;
}

.syz-spec-page .syz-info-copy ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sp-steel);
}

.syz-spec-page .syz-info-copy h4 {
  font-family: var(--sp-f-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--sp-slate);
  margin: 1em 0 .5em;
  letter-spacing: .02em;
}
.syz-spec-page .syz-info-copy h4:first-child { margin-top: 0; }

/* ══════════════════════════════════════════════════════════
   QUOTE PANEL (right sticky sidebar)
══════════════════════════════════════════════════════════ */
.syz-spec-page .syz-quote-panel {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  padding: 0;
  background: var(--sp-white);
  border-left: 1px solid var(--sp-line);
  display: flex;
  flex-direction: column;
}

.syz-spec-page .syz-panel-header {
  padding: 22px 24px 20px;
  background: var(--sp-slate);
  border-top: 4px solid var(--sp-steel);
  flex-shrink: 0;
}

.syz-spec-page .syz-panel-header .syz-panel-title {
  font-family: var(--sp-f-head);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  margin: 0 0 4px;
}

.syz-spec-page .syz-panel-header .syz-panel-sub {
  margin: 0;
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .04em;
  line-height: 1.5;
}

/* Panel body (scrollable) */
.syz-spec-page .syz-panel-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.syz-spec-page .syz-quote-items {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
  min-height: 48px;
}

/* Empty state */
.syz-spec-page .syz-quote-items:empty::after {
  content: 'No items added yet.';
  display: block;
  font-size: .82rem;
  color: var(--sp-mid);
  padding: 16px 0;
  text-align: center;
  border: 1px dashed var(--sp-line);
  border-radius: var(--sp-r);
}

/* Quote item card */
.syz-spec-page .syz-quote-item {
  border: 1px solid var(--sp-line);
  border-left: 3px solid var(--sp-steel);
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  background: var(--sp-white);
  border-radius: 0 var(--sp-r) var(--sp-r) 0;
}

.syz-spec-page .syz-quote-item strong {
  font-size: .9rem;
  font-family: var(--sp-f-head);
  font-weight: 700;
  color: var(--sp-slate);
}

.syz-spec-page .syz-quote-meta {
  color: var(--sp-mid);
  font-size: .78rem;
  line-height: 1.5;
}

.syz-spec-page .syz-quote-row {
  display: grid;
  grid-template-columns: 1fr 80px auto;
  gap: 8px;
  align-items: center;
}

.syz-spec-page .syz-remove {
  border: 1px solid var(--sp-line);
  background: var(--sp-white);
  padding: 7px 9px;
  cursor: pointer;
  border-radius: 4px;
  color: var(--sp-mid);
  font-size: .82rem;
  transition: all .18s;
}
.syz-spec-page .syz-remove:hover {
  border-color: var(--sp-red);
  color: var(--sp-red);
}

/* Quote form */
.syz-spec-page .syz-form {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--sp-line);
}

.syz-spec-page .syz-field label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--sp-mid);
  margin-bottom: 5px;
  letter-spacing: .04em;
}

.syz-spec-page .syz-field-note { color: var(--sp-mid); font-weight: 400; }

.syz-spec-page .syz-field-help {
  margin-top: 5px;
  font-size: .72rem;
  color: var(--sp-mid);
  line-height: 1.5;
}

.syz-spec-page .syz-field textarea { min-height: 80px; resize: vertical; }

.syz-spec-page .syz-status {
  font-size: .8rem;
  color: var(--sp-mid);
  line-height: 1.5;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════════ */
.syz-spec-page .syz-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(12,20,30,.9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  z-index: 9999;
}
.syz-spec-page .syz-lightbox.syz-is-open { display: flex; }

.syz-spec-page .syz-lightbox img {
  max-width: min(1280px, 92vw);
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--sp-r);
  box-shadow: 0 16px 60px rgba(0,0,0,.5);
}

.syz-spec-page .syz-lightbox-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s;
}
.syz-spec-page .syz-lightbox-close:hover { background: rgba(255,255,255,.2); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .syz-spec-page .syz-shell { grid-template-columns: 1fr; }
  .syz-spec-page .syz-quote-panel {
    position: static;
    min-height: auto;
    border-left: 0;
    border-top: 1px solid var(--sp-line);
    display: block;
  }
  .syz-spec-page .syz-panel-body { padding: 20px 24px; }
}

@media (max-width: 980px) {
  .syz-spec-page .syz-cross-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .syz-spec-page .syz-hero { grid-template-columns: 1fr; height: auto; }
  .syz-spec-page .syz-hero-media { aspect-ratio: 3 / 2; min-height: 0; }
  .syz-spec-page .syz-hero-arrow.syz-next { right: 14px; }
  .syz-spec-page .syz-selector-primary { grid-template-columns: repeat(2, 1fr) auto auto; }
}

@media (max-width: 720px) {
  .syz-spec-page .syz-main,
  .syz-spec-page .syz-panel-body { padding: 16px; }
  .syz-spec-page .syz-cross-filters,
  .syz-spec-page .syz-selector-primary,
  .syz-spec-page .syz-selector-more { grid-template-columns: 1fr; }
  .syz-spec-page h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .syz-spec-page .syz-hero-copy { padding: 28px 24px; }
  .syz-spec-page .syz-hero-key-specs { grid-template-columns: 1fr; }
  .syz-spec-page .syz-panel-header { padding: 18px 16px; }
}