/* assets/css/gallery.css */

/* =========================
   HERO
   ========================= */

.g-hero{ padding:70px 0 22px; }

.g-hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}

.g-hero-card{ padding:26px 26px 22px; }
.g-hero-top{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }

.g-title{
  margin:0 0 10px;
  font-family: var(--font-display);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:28px;
}
:root[data-theme="light"] .g-title{
  color: rgba(18,19,26,.96);
}

.g-sub{
  margin:0 0 16px;
  color: rgba(232,232,238,.84);
  line-height:1.65;
  font-size:14px;
}
:root[data-theme="light"] .g-sub{
  color: rgba(18,19,26,.76);
}

.g-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================
   STATS
   ========================= */

.g-stats{
  padding:18px;
  box-shadow: var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.g-stat{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding:12px;
}
:root[data-theme="light"] .g-stat{
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.g-k{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(184,186,198,.95);
  font-weight:800;
  margin-bottom:6px;
}
:root[data-theme="light"] .g-k{
  color: rgba(18,19,26,.56);
}

.g-v{
  font-family: var(--font-display);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(232,232,238,.92);
}
:root[data-theme="light"] .g-v{
  color: rgba(18,19,26,.92);
}

/* =========================
   TOOLBAR + FILTERS
   ========================= */

.g-toolbar{
  padding:18px 0 26px;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

.g-bar{
  padding:14px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap:14px;
  align-items:end;
  box-shadow: var(--shadow-soft);
}

.g-bar > input[type="hidden"]{
  display:none;
}

.g-field{
  min-width:0;
}

.g-label{
  display:block;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(184,186,198,.95);
  font-weight:800;
  margin-bottom:8px;
}
:root[data-theme="light"] .g-label{
  color: rgba(18,19,26,.60);
}

.g-input, .g-select{
  width:100%;
  min-width:0;
  height:44px;
  border-radius:16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(232,232,238,.94);
  padding:0 14px;
  outline:none;
}
.g-input::placeholder{ color: rgba(184,186,198,.8); }

:root[data-theme="light"] .g-input,
:root[data-theme="light"] .g-select{
  border-color: rgba(0,0,0,.12);
  background: rgba(255,255,255,.82);
  color: rgba(18,19,26,.88);
}
:root[data-theme="light"] .g-input::placeholder{
  color: rgba(18,19,26,.45);
}

.g-input:focus, .g-select:focus{
  border-color: rgba(255,45,45,.28);
  box-shadow: 0 0 0 3px rgba(255,45,45,.12);
}
:root[data-theme="light"] .g-input:focus,
:root[data-theme="light"] .g-select:focus{
  border-color: rgba(255,45,45,.35);
  box-shadow: 0 0 0 3px rgba(255,45,45,.16);
}

.g-select:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.g-filters{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:14px;
  min-width:0;
}

.g-right{
  min-width:108px;
  display:flex;
  justify-content:flex-end;
  align-self:end;
}

.g-right .btn{
  width:auto;
  white-space:nowrap;
}

.btn-small{
  height:44px;
  min-height:44px;
  padding:0 14px;
}

/* =========================
   CATEGORY NAV (collapsible)
   ========================= */

.g-catnav{
  grid-column: 1 / -1;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
:root[data-theme="light"] .g-catnav{
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

.g-catnav summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.g-catnav summary::-webkit-details-marker{ display:none; }

.g-catnav-title{
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(184,186,198,.95);
  font-weight:900;
}
:root[data-theme="light"] .g-catnav-title{
  color: rgba(18,19,26,.60);
}

.g-catnav-chev{
  opacity:.85;
  transition: transform .18s ease;
}
:root[data-theme="light"] .g-catnav-chev{
  opacity:.7;
}

.g-catnav[open] .g-catnav-chev{ transform: rotate(180deg); }

.g-catnav-body{
  padding:12px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;
}
:root[data-theme="light"] .g-catnav-body{
  border-top-color: rgba(0,0,0,.08);
}

.g-catnav-body .btn{
  flex:1 1 0;
  justify-content:center;
  width:auto;
  min-width:0;
  height:40px;
  min-height:40px;
  padding:0 12px;
}

/* =========================
   GRID
   ========================= */

.g-grid{ padding:16px 0 68px; }

.g-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.g-catname{
  margin-top:8px;
  font-family: var(--font-display);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(232,232,238,.88);
  opacity:.95;
}
:root[data-theme="light"] .g-catname{
  color: rgba(18,19,26,.72);
}

.g-cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}

.g-card{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.g-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,45,45,.22);
}
:root[data-theme="light"] .g-card:hover{
  border-color: rgba(255,45,45,.28);
}

/* =========================
   THUMB - 16:9 FULL COVER
   ========================= */

.g-thumb{
  aspect-ratio: 16 / 9;
  width:100%;
  height:auto;
  border-radius:18px;
  border: 1px solid rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(10,10,14,.35);
}

:root[data-theme="light"] .g-thumb{
  border-color: rgba(0,0,0,.10);
  background-color: rgba(255,255,255,.55);
}

.g-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(320px 200px at 18% 28%, rgba(255,45,45,.16), transparent 55%),
    radial-gradient(320px 220px at 90% 40%, rgba(78,161,255,.10), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  opacity:.95;
}
:root[data-theme="light"] .g-thumb::after{
  opacity:.55;
}

.g-badges{
  position:absolute;
  top:12px;
  left:12px;
  z-index: 2;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}

.g-badge{
  height:30px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,14,.40);
  font-family: var(--font-display);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
}

:root[data-theme="light"] .g-badge{
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  color: rgba(18,19,26,.86);
}

.g-finish{
  height:26px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,14,.40);
  font-family: var(--font-display);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:10px;
  font-weight: 900;
  opacity:.96;
}

:root[data-theme="light"] .g-finish{
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  color: rgba(18,19,26,.86);
}

.g-finish.finish-metallic{ border-color: rgba(255,255,255,.18); }
.g-finish.finish-gloss{ border-color: rgba(0,255,140,.22); background: rgba(0,255,140,.08); }
.g-finish.finish-matte{ border-color: rgba(184,186,198,.22); background: rgba(184,186,198,.06); }
.g-finish.finish-pearl{ border-color: rgba(115,70,255,.22); background: rgba(115,70,255,.08); }
.g-finish.finish-spectra{
  border-color: rgba(60,210,255,.22);
  background:
    radial-gradient(140px 60px at 25% 30%, rgba(255,45,45,.14), transparent 60%),
    radial-gradient(140px 60px at 80% 70%, rgba(60,210,255,.14), transparent 60%),
    rgba(255,255,255,.04);
}
.g-finish.finish-candy{
  border-color: rgba(255,120,80,.28);
  background: rgba(255,120,80,.08);
}
.g-finish.finish-chrome{
  border-color: rgba(200,200,210,.28);
  background: rgba(200,200,210,.06);
}

.g-name{ font-weight:800; letter-spacing:.02em; }
:root[data-theme="light"] .g-name{
  color: rgba(18,19,26,.94);
}

.g-meta{ margin-top:4px; color: var(--muted); font-size:13px; }
:root[data-theme="light"] .g-meta{
  color: rgba(18,19,26,.62);
}

/* =========================
   CTA
   ========================= */

.g-cta{ padding:0 0 70px; }
.g-cta-card{
  padding:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  box-shadow: var(--shadow-soft);
}
.g-cta-title{
  margin:0 0 8px;
  font-family: var(--font-display);
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:14px;
}
:root[data-theme="light"] .g-cta-title{
  color: rgba(18,19,26,.92);
}
.g-cta-sub{
  margin:0;
  color: rgba(232,232,238,.82);
  font-size:13px;
  line-height:1.6;
}
:root[data-theme="light"] .g-cta-sub{
  color: rgba(18,19,26,.70);
}

.g-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================
   PAGINATION
   ========================= */

.g-pager{
  margin: 10px 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.g-pager-left{
  color: rgba(232,232,238,.82);
  font-size:13px;
}
:root[data-theme="light"] .g-pager-left{
  color: rgba(18,19,26,.70);
}

.g-pager-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.g-page{
  height:40px;
  min-width:40px;
  padding:0 12px;
  border-radius:14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(232,232,238,.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

:root[data-theme="light"] .g-page{
  border-color: rgba(0,0,0,.12);
  background: rgba(255,255,255,.82);
  color: rgba(18,19,26,.86);
}

.g-page:hover{
  transform: translateY(-1px);
  border-color: rgba(255,45,45,.22);
}
:root[data-theme="light"] .g-page:hover{
  border-color: rgba(255,45,45,.28);
}

.g-page.is-current{
  border-color: rgba(255,45,45,.32);
  background: rgba(255,45,45,.10);
}
:root[data-theme="light"] .g-page.is-current{
  border-color: rgba(255,45,45,.34);
  background: rgba(255,45,45,.12);
  color: rgba(18,19,26,.92);
}

.g-page-ellipsis{
  color: rgba(184,186,198,.85);
  padding:0 6px;
}
:root[data-theme="light"] .g-page-ellipsis{
  color: rgba(18,19,26,.45);
}

.btn.is-disabled{
  opacity:.45;
  pointer-events:none;
}

/* =========================
   Native select readability
   ========================= */

.g-select{ color: rgba(232,232,238,.94); }
.g-select option{
  color:#111;
  background:#fff;
}

/* =========================
   FINISH LEGEND
   ========================= */

.g-legend{
  padding: 0 0 30px;
}

.g-legend-card{
  padding:16px 18px;
  box-shadow: var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.g-legend-title{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
  color: rgba(184,186,198,.85);
}

.g-legend-items{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.g-legend-item{
  height:30px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-family: var(--font-display);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.finish-spectra{ border-color: rgba(255,80,120,.35); }
.finish-candy{ border-color: rgba(255,120,80,.35); }
.finish-chrome{ border-color: rgba(200,200,210,.35); }
.finish-matte{ border-color: rgba(120,120,130,.35); }
.finish-gloss{ border-color: rgba(255,45,45,.35); }

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 980px){
  .g-hero-inner{ grid-template-columns: 1fr; }
  .g-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-cta-card{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 820px){
  .g-bar{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items:end;
  }

  .g-filters{
    display:contents;
  }

  .g-right{
    width:100%;
    min-width:0;
    justify-content:stretch;
  }

  .g-right .btn{
    width:100%;
  }
}

@media (max-width: 560px){
  .g-bar{
    grid-template-columns: 1fr;
    gap:12px;
    padding:12px;
  }

  .g-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .g-pager{
    justify-content:center;
    text-align:center;
  }
  .g-pager-left{ width:100%; }
  .g-pager-nav{ justify-content:center; }

  .g-head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .g-catnav-body{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .g-catnav-body .btn{
    width:100%;
    min-width:0;
    padding:0 8px;
  }
}

@media (max-width: 380px){
  .g-cards{ grid-template-columns: 1fr; }
  .g-catnav-body{ grid-template-columns: 1fr; }
}

/* Spectra pilot: catalogue surfaces and controls */
:root[data-theme="spectra"] .g-sub,
:root[data-theme="spectra"] .g-cta-sub,
:root[data-theme="spectra"] .g-pager-left{
  color:var(--content-soft);
}

:root[data-theme="spectra"] .g-k,
:root[data-theme="spectra"] .g-label,
:root[data-theme="spectra"] .g-catnav-title,
:root[data-theme="spectra"] .g-legend-title,
:root[data-theme="spectra"] .g-page-ellipsis{
  color:var(--content-muted);
}

:root[data-theme="spectra"] .g-stat,
:root[data-theme="spectra"] .g-catnav{
  border-color:var(--panel-border);
  background:var(--panel-bg);
}

:root[data-theme="spectra"] .g-catnav-body{
  border-top-color:var(--panel-border);
}

:root[data-theme="spectra"] .g-input,
:root[data-theme="spectra"] .g-select{
  border-color:var(--field-border);
  background:var(--field-bg);
  color:var(--text);
}

:root[data-theme="spectra"] .g-input::placeholder{
  color:var(--content-muted);
}

:root[data-theme="spectra"] .g-input:focus,
:root[data-theme="spectra"] .g-select:focus{
  border-color:var(--field-focus-border);
  box-shadow:0 0 0 3px var(--field-focus-ring);
}

:root[data-theme="spectra"] .g-card:hover,
:root[data-theme="spectra"] .g-page:hover{
  border-color:var(--panel-border-hover);
}

:root[data-theme="spectra"] .g-thumb{
  border-color:var(--panel-border);
  background-color:var(--media-bg);
}

:root[data-theme="spectra"] .g-thumb::after{
  background:
    radial-gradient(320px 200px at 18% 28%, var(--media-red), transparent 55%),
    radial-gradient(320px 220px at 90% 40%, var(--media-cyan), transparent 58%),
    linear-gradient(135deg, rgba(214,237,245,.07), rgba(214,237,245,.02));
}

:root[data-theme="spectra"] .g-badge,
:root[data-theme="spectra"] .g-finish,
:root[data-theme="spectra"] .g-page,
:root[data-theme="spectra"] .g-legend-item{
  border-color:var(--panel-border);
  background:var(--panel-bg);
}

:root[data-theme="spectra"] .g-page.is-current{
  border-color:var(--accent-border);
  background:var(--accent-wash);
}

:root[data-theme="spectra"] .g-finish.finish-spectra{
  border-color:var(--reflection-border);
  background:
    radial-gradient(140px 60px at 25% 30%, var(--media-red), transparent 60%),
    radial-gradient(140px 60px at 80% 70%, var(--media-cyan), transparent 60%),
    var(--panel-bg);
}

/* Midnight Atelier: gallery catalogue visual pilot */
.g-hero{
  padding:clamp(60px, 7.5vw, 82px) 0 25px;
}

.g-hero-inner{
  grid-template-columns:minmax(0, 1.34fr) minmax(270px, .66fr);
  gap:20px;
}

.g-hero-card,
.g-stats{
  border-color:var(--panel-border);
  background:var(--panel-bg);
  box-shadow:var(--card-shadow);
}

.g-hero-card{
  padding:clamp(25px, 3vw, 32px) clamp(20px, 3vw, 30px) 25px;
}

.g-hero-top{
  margin-bottom:18px;
}

.g-hero-top::before{
  content:"";
  flex:0 0 74px;
  width:74px;
  height:2px;
  margin-right:calc(100% - 74px);
  margin-bottom:5px;
  border-radius:999px;
  background:var(--paint-line);
  box-shadow:0 0 18px var(--paint-line-glow);
}

.g-hero .pill{
  min-height:30px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--label-border);
  background:var(--label-bg);
  color:var(--label-text);
  font-size:11px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.g-hero .pill:first-of-type{
  border-color:var(--accent-border);
  background:var(--accent-wash);
  color:var(--text);
}

.g-title{
  margin-bottom:14px;
  font-size:clamp(30px, 4vw, 38px);
  letter-spacing:.075em;
  line-height:1.06;
}

.g-sub{
  max-width:58ch;
  margin-bottom:22px;
  color:var(--content-soft);
  line-height:1.72;
}

.g-actions{
  gap:10px;
}

.g-actions .btn{
  min-height:48px;
  padding-inline:21px;
}

.g-actions .btn-primary,
.g-cta-actions .btn-primary{
  box-shadow:var(--cta-shadow);
}

.g-actions .btn:focus-visible,
.g-catnav-body .btn:focus-visible,
.g-right .btn:focus-visible,
.g-cta-actions .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--focus-ring);
}

.g-stats{
  gap:9px;
  padding:13px;
}

.g-stat{
  padding:16px 14px;
  border-color:var(--panel-border);
  background:var(--panel-bg);
  box-shadow:none;
}

.g-stat:first-child{
  border-color:var(--accent-border);
}

.g-k{
  color:var(--label-text);
  font-size:10px;
  letter-spacing:.12em;
}

.g-v{
  color:var(--text);
  font-size:13px;
  line-height:1.42;
}

.g-toolbar{
  padding:20px 0 29px;
}

.g-bar{
  padding:16px;
  gap:15px;
  border-color:var(--panel-border);
  background:var(--panel-bg);
  box-shadow:var(--card-shadow);
}

.g-label,
.g-catnav-title{
  color:var(--label-text);
  font-size:10px;
  letter-spacing:.13em;
}

.g-input,
.g-select{
  height:46px;
  border-color:var(--media-border);
  background:var(--media-bg);
  color:var(--text);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.g-input::placeholder{
  color:var(--content-muted);
}

.g-input:focus,
.g-select:focus{
  border-color:var(--accent-border);
  background:var(--panel-bg-raised);
  box-shadow:0 0 0 3px var(--focus-ring);
}

.g-catnav{
  border-color:var(--panel-border);
  background:var(--panel-bg);
  box-shadow:none;
}

.g-catnav summary{
  min-height:46px;
  padding-inline:14px;
}

.g-catnav summary:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 3px var(--focus-ring);
}

.g-catnav-body{
  gap:9px;
  border-top-color:var(--panel-border);
}

.g-grid{
  padding:20px 0 72px;
}

.g-head{
  margin-bottom:24px;
}

.g-head .section-title::after{
  content:"";
  display:block;
  width:54px;
  height:2px;
  margin-top:11px;
  border-radius:999px;
  background:var(--paint-line);
}

.g-head .section-sub{
  max-width:560px;
  color:var(--content-muted);
  line-height:1.7;
}

.g-catname{
  margin-top:10px;
  color:var(--label-text);
}

.g-cards{
  gap:18px;
}

.g-card{
  padding:12px 12px 15px;
  gap:14px;
  border-color:var(--panel-border);
  background:var(--panel-bg);
  box-shadow:var(--card-shadow);
}

.g-card:hover{
  transform:translateY(-3px);
  border-color:var(--panel-border-hover);
  background:var(--panel-bg-raised);
  box-shadow:var(--card-shadow-hover);
}

.g-card:focus-visible{
  outline:none;
  border-color:var(--panel-border-hover);
  box-shadow:0 0 0 3px var(--focus-ring), var(--card-shadow-hover);
}

.g-thumb{
  border-color:var(--media-border);
  background-color:var(--media-bg);
}

.g-thumb::after{
  background:
    radial-gradient(320px 200px at 18% 28%, var(--media-warm), transparent 55%),
    radial-gradient(320px 220px at 90% 40%, var(--media-cool), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.08) 52%, rgba(0,0,0,.30));
  opacity:.86;
}

.g-badges{
  top:11px;
  left:11px;
  gap:7px;
}

.g-badge,
.g-finish{
  border-color:var(--label-border);
  background:var(--label-bg);
  color:var(--text);
  backdrop-filter:blur(8px);
}

.g-badge{
  height:29px;
  font-size:10px;
  letter-spacing:.11em;
}

.g-finish{
  font-size:9px;
  letter-spacing:.17em;
}

.g-info{
  padding:0 4px 2px;
}

.g-name{
  color:var(--text);
  font-size:15px;
  line-height:1.35;
}

.g-meta{
  color:var(--label-text);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.55;
  text-transform:uppercase;
}

.g-legend{
  padding-bottom:34px;
}

.g-legend-card,
.g-cta-card{
  border-color:var(--panel-border);
  background:var(--panel-bg);
  box-shadow:var(--card-shadow);
}

.g-legend-title{
  color:var(--label-text);
}

.g-legend-item{
  background:var(--label-bg);
}

.g-cta-title{
  letter-spacing:.08em;
}

.g-cta-title::before{
  content:"";
  display:block;
  width:42px;
  height:2px;
  margin-bottom:13px;
  border-radius:999px;
  background:var(--paint-line);
}

.g-cta-sub,
.g-pager-left{
  color:var(--content-soft);
}

.g-page{
  border-color:var(--panel-border);
  background:var(--panel-bg);
  color:var(--text);
}

.g-page:hover{
  border-color:var(--panel-border-hover);
  background:var(--panel-bg-raised);
}

.g-page:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--focus-ring);
}

.g-page.is-current{
  border-color:var(--accent-border);
  background:var(--accent-wash);
}

.g-page-ellipsis{
  color:var(--label-text);
}

@media (max-width: 980px){
  .g-hero-inner{
    grid-template-columns:1fr;
  }
}

@media (max-width: 560px){
  .g-hero{
    padding-top:48px;
    padding-bottom:20px;
  }

  .g-hero-card{
    padding:22px 17px 19px;
  }

  .g-title{
    font-size:clamp(28px, 10vw, 34px);
  }

  .g-sub{
    font-size:14px;
  }

  .g-actions .btn{
    width:100%;
  }

  .g-stat{
    padding:13px 12px;
  }

  .g-card{
    padding:9px 9px 12px;
    gap:10px;
  }

  .g-badges{
    top:8px;
    left:8px;
  }

  .g-badge{
    height:26px;
    padding-inline:8px;
  }

  .g-finish{
    height:24px;
    padding-inline:8px;
  }

  .g-name{
    font-size:14px;
  }

  .g-meta{
    font-size:10px;
    letter-spacing:.055em;
  }
}

/* =========================
   PARTS LAB additions
   ========================= */

.p-card-text{
  margin:8px 0 0;
  color:var(--content-soft);
  font-size:12px;
  line-height:1.55;
}

.p-card-foot{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--panel-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--label-text);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.p-status.status-available{
  border-color:rgba(0,255,140,.28);
  background:rgba(0,255,140,.08);
}

.p-status.status-made-to-order{
  border-color:rgba(78,161,255,.30);
  background:rgba(78,161,255,.10);
}

.p-status.status-preorder{
  border-color:rgba(255,190,90,.32);
  background:rgba(255,190,90,.10);
}

.p-status.status-sold-out{
  border-color:rgba(184,186,198,.22);
  background:rgba(184,186,198,.06);
  opacity:.82;
}

.p-status.status-inquiry{
  border-color:var(--label-border);
  background:var(--label-bg);
}

.p-featured{
  border-color:var(--accent-border);
  background:var(--accent-wash);
}

.p-empty{
  padding:24px;
  box-shadow:var(--card-shadow);
}

.p-empty h3{
  margin:0 0 10px;
  font-family:var(--font-display);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:15px;
}

.p-empty p{
  margin:0;
  color:var(--content-soft);
  line-height:1.7;
  font-size:13px;
}

.p-empty code{
  padding:2px 6px;
  border-radius:8px;
  border:1px solid var(--panel-border);
  background:var(--media-bg);
  color:var(--text);
}

@media (max-width:560px){
  .p-card-text{
    font-size:11px;
  }

  .p-card-foot{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    font-size:9px;
  }
}


/* =========================
   PARTS category availability
   ========================= */

.p-category-card{
  text-decoration:none;
}

.p-category-empty-card{
  position:relative;
  cursor:not-allowed;
  opacity:.58;
  filter:saturate(.55) brightness(.78);
  transform:none !important;
}

.p-category-empty-card:hover{
  border-color:var(--panel-border);
  background:var(--panel-bg);
  box-shadow:var(--card-shadow);
}

.p-category-empty-card .g-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.42));
}

.p-category-empty-card .g-badges{
  z-index:2;
}

.p-category-empty-card .g-info{
  opacity:.88;
}

.p-category-empty-card .g-name{
  color:var(--content-soft);
}

.p-category-empty-card .g-meta{
  color:var(--content-muted);
}

.p-coming-soon{
  border-color:rgba(184,186,198,.24);
  background:rgba(184,186,198,.08);
  color:var(--content-soft);
}

:root[data-theme="light"] .p-category-empty-card{
  opacity:.66;
  filter:saturate(.45) brightness(.96);
}

:root[data-theme="light"] .p-category-empty-card .g-thumb::before{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.54));
}