/* =========================================================================
   Hasura product page — interactive parts catalogue (scoped .hmgp-)
   Spec: docs/superpowers/specs/2026-07-22-product-catalogue-redesign-design.md
   Fonts loaded globally in app.blade.php (Hasura Semibold, Barlow, Open Sans).
   ========================================================================= */

@keyframes hmgpProg { from { width:0; } to { width:100%; } }

/* ---- section + card shell ---- */
/* The legacy theme zeroes padding-top on a <section> that follows another
   <section> via a high-specificity :not() chain (see hasura-redesign.css) —
   the !important re-asserts our intended padding. */
.hmgp-section { background:#fff; padding:0 !important; }
.hmgp-card { background:#fff; font-family:'Open Sans',sans-serif; color:#10163A; }
/* Reserve the catalogue's space before JS paints it, so the first frame
   doesn't collapse the footer against the header; :empty self-releases the
   moment the component renders. Values from measured rendered heights. */
#hmgp-catalogue:empty { min-height:750px; }
.hmgp-card * { box-sizing:border-box; }
.hmgp-card img { margin:0; max-width:100%; }
.hmgp-card button { margin:0; appearance:none; -webkit-appearance:none; }

/* The prototype styles text with the `font:` SHORTHAND, which resets
   line-height to `normal`; the legacy theme sets a tall inherited line-height
   (~1.86) that inflates every label/pill/badge if left to cascade. */
.hmgp-filter__label, .hmgp-pill, .hmgp-filter__count,
.hmgp-rail__head, .hmgp-rail__count, .hmgp-railitem__tag, .hmgp-railitem__plus,
.hmgp-frame__empty, .hmgp-frame__badge, .hmgp-chip, .hmgp-chip__num,
.hmgp-detail__zone, .hmgp-detail__code, .hmgp-auto, .hmgp-label,
.hmgp-comp__empty { line-height:normal; }

/* ---- category filter bar ---- */
.hmgp-filter { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 20px; border-bottom:1px solid #ECEEF3; }
.hmgp-filter__label { font-family:'Barlow',sans-serif; font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8A90A6; }
.hmgp-pills { display:flex; border:1px solid #ECEEF3; border-radius:999px; overflow:hidden; }
.hmgp-pill { padding:8px 16px; border:none; border-right:1px solid #ECEEF3; background:#fff; color:#10163A; font-family:'Barlow',sans-serif; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.hmgp-pill:last-child { border-right:none; }
.hmgp-pill.is-active { background:#10163A; color:#fff; }
.hmgp-filter__count { margin-left:auto; font-family:'Barlow',sans-serif; font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8A90A6; }

/* ---- vehicle rail + main split ---- */
.hmgp-body { display:flex; }
.hmgp-rail { width:220px; flex:0 0 auto; border-right:1px solid #ECEEF3; background:#F4F5F8; }
.hmgp-rail__head { padding:14px 16px; border-bottom:1px solid #ECEEF3; display:flex; align-items:center; justify-content:space-between; font-family:'Barlow',sans-serif; font-weight:800; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#10163A; }
.hmgp-rail__count { font-weight:700; letter-spacing:0; color:#8A90A6; }
.hmgp-rail__list { display:flex; flex-direction:column; max-height:640px; overflow-y:auto; }
.hmgp-railitem { display:flex; align-items:center; gap:11px; padding:13px 15px; border:none; border-bottom:1px solid #ECEEF3; border-left:3px solid transparent; background:#fff; color:#10163A; cursor:pointer; text-align:left; min-width:170px; }
.hmgp-railitem.is-active { background:#10163A; color:#fff; border-left-color:#EE7C1B; }
.hmgp-railitem.is-soon { opacity:.5; cursor:not-allowed; }
.hmgp-railitem__thumb { width:48px; height:34px; flex:0 0 auto; background:#fff; border:1px solid #ECEEF3; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hmgp-railitem__thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.hmgp-railitem__plus { font-family:'Barlow',sans-serif; font-weight:700; font-size:14px; color:#C3C9D6; }
.hmgp-railitem__meta { min-width:0; }
.hmgp-railitem__name { display:block; font-family:'Barlow',sans-serif; font-weight:800; font-size:12px; line-height:1.15; }
.hmgp-railitem__tag { display:block; font-family:'Barlow',sans-serif; font-weight:600; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#8A90A6; margin-top:3px; }
.hmgp-railitem.is-active .hmgp-railitem__tag { color:#C9CEE4; }
.hmgp-main { flex:1; min-width:0; }
.hmgp-grid { display:grid; grid-template-columns:minmax(0,1fr) 400px; }
.hmgp-stage { border-right:1px solid #ECEEF3; min-width:0; padding:24px; }

/* ---- vehicle image frame ---- */
.hmgp-frame { position:relative; background:#F4F5F8; border:1px solid #ECEEF3; display:flex; align-items:center; justify-content:center; min-height:300px; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(30,45,90,.08); margin:10px 0; }
.hmgp-frame__img { display:block; max-width:100%; max-height:460px; }
.hmgp-frame__empty { width:100%; padding:60px 24px; text-align:center; font-family:'Barlow',sans-serif; font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#8A90A6; }
.hmgp-frame__badge { position:absolute; left:0; bottom:0; background:#10163A; color:#fff; padding:8px 14px; font-family:'Barlow',sans-serif; font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

/* ---- part chips ---- */
.hmgp-chips { margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.hmgp-chip { display:flex; align-items:center; gap:8px; padding:8px 12px; border:2px solid #10163A; background:#fff; color:#10163A; cursor:pointer; font-family:'Barlow',sans-serif; font-weight:600; font-size:12px; text-align:left; border-radius:999px; }
.hmgp-chip.is-active { border-color:#EE7C1B; background:#EE7C1B; color:#fff; }
.hmgp-chip__num { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 auto; color:#5B6070; font-family:'Barlow',sans-serif; font-weight:800; font-size:10px; }
.hmgp-chip.is-active .hmgp-chip__num { color:#fff; }

/* ---- detail panel ---- */
.hmgp-detail { background:#F4F5F8; min-width:0; }
.hmgp-detail__head { padding:22px 24px; border-bottom:1px solid #ECEEF3; background:#fff; }
.hmgp-detail__top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hmgp-detail__titles { min-width:0; }
.hmgp-detail__zone { font-family:'Barlow',sans-serif; font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#EE7C1B; margin-bottom:6px; }
.hmgp-detail__name { font-family:'Hasura Semibold','Barlow',sans-serif; font-weight:normal; font-size:23px; line-height:1.05; min-height:2.1em; display:flex; align-items:flex-end; color:#10163A; }
.hmgp-detail__code { font-family:'Open Sans',sans-serif; font-weight:500; font-size:12px; color:#8A90A6; margin-top:5px; }
.hmgp-auto { flex:0 0 auto; display:flex; align-items:center; gap:7px; border:1px solid #ECEEF3; background:#fff; color:#10163A; padding:7px 12px; font-family:'Barlow',sans-serif; font-weight:700; font-size:9px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; border-radius:999px; }
.hmgp-auto.is-on { background:#EE7C1B; border-color:#EE7C1B; color:#fff; }
.hmgp-auto svg { display:block; }
.hmgp-progress { margin-top:14px; height:3px; background:#ECEEF3; }
.hmgp-progress__fill { height:100%; background:#EE7C1B; animation:hmgpProg 3.5s linear forwards; }
.hmgp-detail__body { padding:24px; }
.hmgp-label { font-family:'Barlow',sans-serif; font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#8A90A6; margin-bottom:10px; }
.hmgp-loc { border:1px solid #ECEEF3; background:#fff; height:222px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:14px; }
.hmgp-loc img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.hmgp-arrow { display:flex; justify-content:center; padding:12px 0; }
.hmgp-arrow span { width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-top:15px solid #EE7C1B; }
.hmgp-comp { height:172px; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; }
.hmgp-comp__card { background:#fff; border:1px solid #ECEEF3; padding:10px; width:100%; flex:1; min-height:0; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.hmgp-comp__card img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.hmgp-comp__empty { border:2px dashed #C3C9D6; background:#fff; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'Barlow',sans-serif; font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8A90A6; }

/* ---- mobile (spec: media query stands in for the prototype's 680px container query) ---- */
@media (max-width:760px){
  #hmgp-catalogue:empty { min-height:1300px; }
  .hmgp-body { flex-direction:column; }
  .hmgp-rail { width:auto; border-right:none; border-bottom:1px solid #ECEEF3; }
  .hmgp-rail__list { flex-direction:row; overflow-x:auto; max-height:none; }
  /* equal fixed-size tabs regardless of name/photo, with air around the thumb card */
  .hmgp-railitem { flex:0 0 240px; width:240px; height:84px; min-width:0; border-bottom:none; border-right:1px solid #ECEEF3; padding:0 18px; gap:12px; }
  .hmgp-grid { grid-template-columns:minmax(0,1fr); }
  .hmgp-stage { border-right:none; border-bottom:1px solid #ECEEF3; padding:20px; }
  .hmgp-detail__head { padding:20px; }
  .hmgp-detail__body { padding:20px; }
  .hmgp-detail__name { font-size:20px; }
  .hmgp-filter { padding:12px 16px; }
  .hmgp-chip { padding:8px; gap:0; border:none; background:none; }
  .hmgp-chip.is-active { background:none; }
  .hmgp-chip__label { display:none; }
  .hmgp-chip__num { width:22px; height:22px; font-size:12px; }
  .hmgp-chip.is-active .hmgp-chip__num { background:#EE7C1B; color:#fff; border-radius:6px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .hmgp-progress__fill { animation:none; width:100%; }
}