/* ═══════════════════════════════════════════════════════════════════
   PUMP ONE — SITE CSS  ·  Industrial Clean (V4)
   Palette from the Pump One logo: navy + orange + light blue
   Typography: Barlow Condensed (display) + Barlow (body)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
  --po-navy:        #0a2342;
  --po-navy-dark:   #081a33;
  --po-navy-deep:   #14345c;
  --po-sky:         #5a8fc4;
  --po-sky-pale:    #9fc3e8;
  --po-orange:      #e8832a;
  --po-orange-dark: #c96e1e;
  --po-orange-pale: #fbe8d4;

  --po-ink:         #1a1f28;
  --po-text:        #3a404e;
  --po-muted:       #6a707a;
  --po-faint:       #9aa1ab;
  --po-line:        #e4e6ea;
  --po-bg:          #ffffff;
  --po-bg-soft:     #f6f7f9;
  --po-bg-paper:    #f5f3ee;

  --po-display:     "Barlow Condensed","Helvetica Neue",Arial,sans-serif;
  --po-body:        "Barlow","Helvetica Neue",Arial,sans-serif;
  --po-mono:        ui-monospace,"SFMono-Regular",Menlo,monospace;

  --maxw:           1240px;
  --shadow-soft:    0 6px 24px rgba(10,35,66,.08);
  --shadow-md:      0 12px 40px rgba(10,35,66,.15);
}

/* ─── RESET / BASE ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--po-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--po-ink);
  background: var(--po-bg);
}
img,svg { max-width: 100%; height: auto; display: block; }
a { color: var(--po-navy); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--po-orange); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
h1,h2,h3,h4,h5 {
  font-family: var(--po-display);
  font-weight: 800;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 .4em;
  color: var(--po-navy);
}
p { margin: 0 0 1em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--po-navy); color: #fff; padding: 10px 14px; z-index: 9999; }
.skip-link:focus { left: 10px; top: 10px; }

.text-orange { color: var(--po-orange) !important; }
.text-navy   { color: var(--po-navy)   !important; }
.text-muted  { color: var(--po-muted)  !important; }
.text-center { text-align: center; }
.mono        { font-family: var(--po-mono); }

/* ─── TOP NAV — Two-tier (utility bar + main bar) ────────────────── */
.site-header { background: #fff; border-bottom: 1px solid var(--po-line); position: sticky; top: 0; z-index: 40; }

.utility-bar        { background: var(--po-navy); color: #e8eef6; font-size: 12px; padding: 6px 0; }
.utility-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.utility-bar__left  { opacity: .8; }
.utility-bar__right { display: flex; gap: 18px; align-items: center; opacity: .95; }
.utility-bar__right a { color: inherit; }
.utility-bar__right a:hover { color: var(--po-orange); }
.utility-bar__right .lang { opacity: .6; font-size: 11px; letter-spacing: .5px; }

.main-bar        { padding: 14px 0; }
.main-bar__inner { display: flex; align-items: center; gap: 28px; }

.site-logo         { display: inline-flex; align-items: center; gap: 10px; line-height: 1; flex-shrink: 0; }
.site-logo__mark   { flex-shrink: 0; }
.site-logo__text   { display: flex; flex-direction: column; gap: 2px; }
.site-logo__name   { font-family: var(--po-display); font-weight: 800; font-size: 16px; letter-spacing: .5px; color: var(--po-navy); }
.site-logo__tag    { font-family: var(--po-display); font-weight: 500; font-size: 9px; letter-spacing: 2.2px; color: var(--po-sky); text-transform: uppercase; }
.site-logo--dark .site-logo__name { color: #fff; }
.site-logo--dark .site-logo__tag  { color: var(--po-sky-pale); }

.header-search {
  flex: 1; max-width: 380px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--po-line);
  padding: 9px 14px;
  font-size: 13px; color: var(--po-muted);
  background: #fff;
}
.header-search input { flex: 1; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 13px; color: var(--po-ink); }
.header-search svg   { flex-shrink: 0; color: var(--po-muted); }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav__link {
  position: relative; padding: 6px 0;
  font-weight: 500; font-size: 13.5px;
  color: var(--po-ink);
  border-bottom: 2px solid transparent;
}
.site-nav__link:hover     { color: var(--po-navy); }
.site-nav__link.is-active { color: var(--po-navy); font-weight: 700; border-bottom-color: var(--po-orange); }

.header-cta { margin-left: auto; }
.site-nav__toggle { display: none; flex-direction: column; gap: 4px; padding: 10px; margin-left: auto; }
.site-nav__toggle span { width: 22px; height: 2px; background: var(--po-navy); display: block; }

/* ─── BUTTONS ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: var(--po-display);
  font-weight: 700; font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid transparent;
  background: transparent; color: var(--po-navy);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.btn--sm { padding: 8px 14px; font-size: 11px; }
.btn--lg { padding: 15px 28px; font-size: 13px; }
.btn--primary       { background: var(--po-orange); color: #fff; border-color: var(--po-orange); }
.btn--primary:hover { background: var(--po-orange-dark); border-color: var(--po-orange-dark); color: #fff; }
.btn--navy          { background: var(--po-navy); color: #fff; border-color: var(--po-navy); }
.btn--navy:hover    { background: var(--po-navy-dark); border-color: var(--po-navy-dark); color: #fff; }
.btn--ghost         { background: transparent; color: var(--po-navy); border-color: var(--po-navy); }
.btn--ghost:hover   { background: var(--po-navy); color: #fff; }
.btn--ghost-light         { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover   { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.btn--cart { padding-right: 16px; }
.btn--cart .cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 1px 6px;
  background: #fff; color: var(--po-orange);
  font-size: 10px; font-weight: 800;
}

/* ─── SECTIONS ──────────────────────────────────────────────────── */
.section                           { padding: 72px 0; }
.section--soft                     { background: var(--po-bg-soft); }
.section--paper                    { background: var(--po-bg-paper); }
.section--navy                     { background: var(--po-navy); color: #fff; }
.section--navy h1,.section--navy h2,.section--navy h3 { color: #fff; }

.section__head                     { margin-bottom: 42px; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.section__head--center             { justify-content: center; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--po-display); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--po-orange); margin-bottom: 12px;
}
.eyebrow::before { content: ""; display: inline-block; width: 24px; height: 2px; background: var(--po-orange); }

.section__title {
  font-family: var(--po-display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.1; letter-spacing: -.5px;
  text-transform: uppercase; color: var(--po-navy);
  margin: 0; max-width: 720px;
}
.section--navy .section__title { color: #fff; }
.section__kicker { margin-top: 12px; max-width: 580px; font-size: 14px; line-height: 1.55; color: var(--po-muted); }
.section--navy .section__kicker { color: #c5d0e0; }
.section__more   { font-family: var(--po-display); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--po-navy); white-space: nowrap; }
.section--navy .section__more { color: var(--po-orange); }

/* ─── HERO (home) ──────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: 90px 0 110px;
  background: linear-gradient(100deg, var(--po-navy-dark) 0%, var(--po-navy) 55%, var(--po-navy-deep) 100%);
  color: #fff;
}
.hero::before {
  content: ""; position: absolute; right: -160px; top: -120px;
  width: 640px; height: 640px;
  background: radial-gradient(circle, transparent 44%, rgba(255,255,255,.07) 45%, transparent 46%, transparent 55%, rgba(255,255,255,.05) 56%, transparent 57%);
  pointer-events: none;
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px; border: 1px solid rgba(255,255,255,.25);
  font-family: var(--po-display); font-size: 11px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase;
  margin-bottom: 28px;
}
.hero__badge::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--po-orange); }
.hero__title {
  font-family: var(--po-display); font-weight: 800;
  font-size: clamp(44px, 5.6vw, 60px); line-height: 1.02; letter-spacing: -1.2px;
  text-transform: uppercase; margin: 0; color: #fff;
}
.hero__title .accent { color: var(--po-orange); }
.hero__lead   { font-size: 15px; line-height: 1.6; max-width: 460px; margin-top: 22px; color: #c5d0e0; }
.hero__ctas   { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__stats  { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.15); }
.hero__stat-num   { font-family: var(--po-display); font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
.hero__stat-label { margin-top: 4px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #8fa2bf; }
.hero__visual { position: relative; min-height: 420px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); }

/* ─── QUICK SEARCH BAR ─────────────────────────────────────────── */
.quick-search        { background: var(--po-bg-soft); border-bottom: 1px solid var(--po-line); padding: 20px 0; }
.quick-search__inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.quick-search__label { font-family: var(--po-display); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--po-navy); flex-shrink: 0; }
.quick-search__field {
  flex: 1; min-width: 160px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border: 1px solid var(--po-line); background: #fff;
  font-size: 13px; color: var(--po-muted); cursor: pointer;
}
.quick-search__field:hover { border-color: var(--po-navy); color: var(--po-navy); }
.quick-search__field select { border: 0; background: transparent; font: inherit; color: inherit; flex: 1; outline: 0; appearance: none; cursor: pointer; }

/* ─── GRID HELPERS ──────────────────────────────────────────────── */
.grid-2     { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-tight { gap: 2px; background: var(--po-line); border: 1px solid var(--po-line); }

/* ─── CATEGORY CARD ─────────────────────────────────────────────── */
.cat-card        { background: #fff; display: flex; flex-direction: column; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.cat-card:hover  { transform: translateY(-2px); box-shadow: var(--shadow-soft); color: inherit; }
.cat-card__img   { aspect-ratio: 16/9; background: #eef2f7; overflow: hidden; }
.cat-card__img img { width: 100%; height: 100%; object-fit: cover; }
.cat-card__body  { padding: 18px 18px 22px; border-top: 3px solid var(--po-orange); }
.cat-card__name  { font-family: var(--po-display); font-weight: 800; font-size: 15px; letter-spacing: .3px; text-transform: uppercase; color: var(--po-navy); }
.cat-card__sub   { font-size: 12px; color: var(--po-muted); margin-top: 4px; }
.cat-card__count { font-size: 11px; color: var(--po-faint); margin-top: 10px; font-family: var(--po-display); letter-spacing: .8px; text-transform: uppercase; }
.cat-card:hover .cat-card__count { color: var(--po-orange); }

/* ─── BRAND CARD ────────────────────────────────────────────────── */
.brand-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 16px; }
.brand-card { position: relative; background: #fff; border: 1px solid var(--po-line); padding: 28px; }
.brand-card__exclusive {
  position: absolute; top: 0; right: 0;
  background: var(--po-orange); color: #fff;
  font-family: var(--po-display); font-weight: 700; font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px;
}
.brand-card__logo {
  height: 50px; display: flex; align-items: center;
  color: var(--po-muted); font-family: var(--po-mono);
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px dashed var(--po-line);
}
.brand-card__name  { font-family: var(--po-display); font-weight: 800; font-size: 18px; color: var(--po-navy); text-transform: uppercase; }
.brand-card__loc   { font-family: var(--po-display); font-size: 11px; color: var(--po-sky); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
.brand-card__desc  { font-size: 13px; color: var(--po-muted); line-height: 1.5; margin-top: 10px; }
.brand-card__since { font-family: var(--po-display); font-weight: 700; font-size: 11px; color: var(--po-navy); letter-spacing: 1px; margin-top: 14px; }

/* ─── FEATURE (why-us) GRID ─────────────────────────────────────── */
.feature-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.feature-icon  { width: 32px; height: 32px; background: var(--po-orange-pale); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.feature-icon::after { content: ""; width: 10px; height: 10px; background: var(--po-orange); }
.feature-title { font-family: var(--po-display); font-weight: 800; font-size: 14px; text-transform: uppercase; color: var(--po-navy); }
.feature-desc  { font-size: 13px; color: var(--po-muted); margin-top: 4px; line-height: 1.5; }

/* ─── TAGS ──────────────────────────────────────────────────────── */
.tag {
  display: inline-block; padding: 3px 8px;
  font-family: var(--po-display); font-weight: 700;
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  background: #f1f2f4; color: var(--po-text);
}
.tag--navy   { background: var(--po-navy);        color: #fff; }
.tag--orange { background: var(--po-orange-pale); color: #8a4a0a; }
.tag--sky    { background: #dfecf7;               color: #1e4a72; }
.tag--green  { background: #e3f0e4;               color: #2a5a2e; }

/* ─── PLACEHOLDER ───────────────────────────────────────────────── */
.ph {
  position: relative; min-height: 180px;
  background: #e7ecf3 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='M-1,1 l2,-2 M0,12 l12,-12 M11,13 l2,-2' stroke='%23c5d0e0' stroke-width='1'/></svg>");
  display: flex; align-items: center; justify-content: center;
  color: #4a5a75; font-family: var(--po-mono);
  font-size: 11px; letter-spacing: .3px; text-transform: uppercase;
}
.ph span { background: rgba(255,255,255,.9); padding: 4px 8px; border: 1px solid #c5d0e0; }

/* ─── PROJECT CARD (on dark bg) ─────────────────────────────────── */
.project-card        { color: #fff; }
.project-card__img   { aspect-ratio: 16/10; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.project-card__img img { width: 100%; height: 100%; object-fit: cover; }
.project-card__body  { margin-top: 16px; }
.project-card__name  { font-family: var(--po-display); font-weight: 800; font-size: 16px; text-transform: uppercase; margin-top: 10px; color: #fff; }
.project-card__desc  { font-size: 13px; color: #8fa2bf; margin-top: 4px; }

/* ─── CTA STRIP ────────────────────────────────────────────────── */
.cta-strip        { background: var(--po-orange); padding: 36px 0; color: #fff; }
.cta-strip__inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.cta-strip__title { font-family: var(--po-display); font-weight: 800; font-size: 24px; text-transform: uppercase; color: #fff; margin: 0; letter-spacing: -.3px; }
.cta-strip__sub   { font-size: 14px; opacity: .95; margin: 6px 0 0; }

/* ─── BREADCRUMB / PAGE HEAD ───────────────────────────────────── */
.breadcrumb { padding: 14px 0; font-size: 12px; color: var(--po-muted); border-bottom: 1px solid var(--po-line); background: #fff; }
.breadcrumb a       { color: var(--po-muted); }
.breadcrumb a:hover { color: var(--po-orange); }
.breadcrumb .sep    { margin: 0 8px; color: var(--po-faint); }
.breadcrumb .current{ color: var(--po-navy); font-weight: 600; }

.page-head       { padding: 56px 0 44px; background: linear-gradient(100deg, var(--po-navy-dark), var(--po-navy)); color: #fff; }
.page-head__title{ font-family: var(--po-display); font-weight: 800; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.5px; text-transform: uppercase; color: #fff; margin: 0; }
.page-head__lead { font-size: 14.5px; color: #c5d0e0; max-width: 640px; margin: 12px 0 0; }

/* ─── PRODUCT CATALOG ───────────────────────────────────────────── */
.catalog         { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: flex-start; }
.catalog__aside  { border: 1px solid var(--po-line); padding: 20px 18px; background: #fff; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }

.active-chips        { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--po-line); }
.active-chips__head  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 10px; color: var(--po-muted); letter-spacing: .8px; font-family: var(--po-mono); text-transform: uppercase; }
.active-chips__clear { color: var(--po-orange); cursor: pointer; font-weight: 700; }
.active-chip         { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; margin: 0 4px 4px 0; background: var(--po-navy); color: #fff; font-size: 10.5px; font-family: var(--po-mono); cursor: pointer; }
.active-chip:hover   { background: var(--po-orange); }

.filter-block             { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--po-line); }
.filter-block:last-child  { border-bottom: 0; padding-bottom: 0; }
.filter-block__title      { display: flex; justify-content: space-between; align-items: center; font-family: var(--po-display); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--po-navy); margin-bottom: 10px; }
.filter-block__title .badge { font-size: 9px; letter-spacing: .6px; color: var(--po-faint); font-family: var(--po-mono); padding: 1px 5px; border: 1px solid var(--po-line); }

.filter-block--dynamic { position: relative; margin-top: 14px; padding: 18px 14px 10px; background: #fffbf0; border: 1px dashed var(--po-orange); }
.filter-block--dynamic::before {
  content: attr(data-label); position: absolute; top: -9px; left: 10px;
  background: var(--po-orange); color: #fff;
  font-family: var(--po-mono); font-size: 9px; letter-spacing: 1px;
  padding: 2px 8px; text-transform: uppercase;
}
.filter-block--dynamic .filter-block__title { color: var(--po-orange); }

.filter-row             { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--po-text); cursor: pointer; }
.filter-row:hover       { color: var(--po-navy); }
.filter-row.is-on       { color: var(--po-navy); font-weight: 700; }
.filter-row .count      { margin-left: auto; font-size: 10px; color: var(--po-faint); font-family: var(--po-mono); }
.chk,.radio             { width: 13px; height: 13px; border: 1.5px solid #c5c9d0; background: #fff; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; }
.radio                  { border-radius: 50%; }
.filter-row.is-on .chk  { background: var(--po-orange); border-color: var(--po-orange); }
.filter-row.is-on .chk::after { content: "✓"; }
.filter-row.is-on .radio { border-color: var(--po-orange); background: radial-gradient(var(--po-orange) 45%, #fff 50%); }

.chip-select             { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-select button      { padding: 5px 10px; background: var(--po-bg-soft); border: 1px solid var(--po-line); font-size: 11px; font-family: var(--po-mono); color: var(--po-text); }
.chip-select button.is-on{ background: var(--po-navy); color: #fff; border-color: var(--po-navy); }
.chip-select button:hover{ border-color: var(--po-navy); }

.range-inputs            { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.range-inputs input      { padding: 7px 10px; border: 1px solid var(--po-line); font-family: var(--po-mono); font-size: 11px; background: #fff; width: 100%; }

.results-toolbar         { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--po-bg-soft); border: 1px solid var(--po-line); margin-bottom: 20px; font-family: var(--po-mono); font-size: 12px; color: var(--po-navy); letter-spacing: .5px; flex-wrap: wrap; gap: 12px; }
.results-toolbar__count  { text-transform: uppercase; }
.results-toolbar__count b{ color: var(--po-orange); }
.results-toolbar__right  { display: flex; align-items: center; gap: 12px; }
.sort-select             { padding: 6px 10px; border: 1px solid var(--po-line); background: #fff; font-family: inherit; font-size: 12px; }

/* ─── PRODUCT CARD ──────────────────────────────────────────────── */
.product-grid            { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card            { position: relative; background: #fff; border: 1px solid var(--po-line); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.product-card:hover      { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--po-sky); }
.product-card__brand     { position: absolute; top: 10px; left: 10px; z-index: 2; }
.product-card__fav       { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; background: #fff; border: 1px solid var(--po-line); display: inline-flex; align-items: center; justify-content: center; color: var(--po-muted); font-size: 14px; }
.product-card__fav:hover { color: var(--po-orange); border-color: var(--po-orange); }
.product-card__fav.is-liked { color: var(--po-orange); border-color: var(--po-orange); }
.product-card__img       { aspect-ratio: 4/3; background: #eff4f9; overflow: hidden; }
.product-card__img img   { width: 100%; height: 100%; object-fit: cover; }
.product-card__body      { padding: 16px 16px 18px; }
.product-card__cat       { font-size: 10px; color: var(--po-sky); font-family: var(--po-display); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.product-card__name      { font-family: var(--po-display); font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--po-navy); margin: 6px 0 0; text-transform: uppercase; }
.product-card__name a    { color: inherit; }
.product-card__spec      { font-size: 12.5px; color: var(--po-muted); margin: 6px 0 0; }
.product-card__actions   { display: flex; gap: 8px; margin-top: 14px; }
.product-card__actions .btn        { flex: 1; padding: 9px 10px; font-size: 11px; letter-spacing: .8px; }
.product-card__actions .btn--ghost { flex: 0 0 auto; }

/* ─── PAGINATION ───────────────────────────────────────────────── */
.pagination              { display: flex; justify-content: center; gap: 4px; margin-top: 40px; font-family: var(--po-display); font-size: 12px; font-weight: 700; }
.pagination a,
.pagination span         { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--po-navy); border: 1px solid var(--po-line); }
.pagination a:hover      { background: var(--po-navy); color: #fff; border-color: var(--po-navy); }
.pagination .is-current  { background: var(--po-navy); color: #fff; border-color: var(--po-navy); }
.pagination .is-disabled { opacity: .4; pointer-events: none; }

/* ─── PRODUCT DETAIL ────────────────────────────────────────────── */
.pd-wrap                 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; margin-top: 32px; }
.pd-gallery__main        { aspect-ratio: 4/3; background: #eff4f9; overflow: hidden; border: 1px solid var(--po-line); }
.pd-gallery__main img    { width: 100%; height: 100%; object-fit: cover; }
.pd-gallery__thumbs      { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.pd-gallery__thumb       { aspect-ratio: 1; background: #eff4f9; border: 1px solid var(--po-line); cursor: pointer; overflow: hidden; }
.pd-gallery__thumb img   { width: 100%; height: 100%; object-fit: cover; }
.pd-gallery__thumb.is-active { border-color: var(--po-orange); }

.pd-head    { margin-bottom: 16px; }
.pd-brand   { font-family: var(--po-display); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--po-sky); }
.pd-title   { font-family: var(--po-display); font-weight: 800; font-size: 32px; line-height: 1.1; text-transform: uppercase; color: var(--po-navy); margin: 6px 0; letter-spacing: -.3px; }
.pd-model   { font-size: 12.5px; color: var(--po-muted); font-family: var(--po-mono); letter-spacing: .5px; }
.pd-short   { font-size: 14.5px; line-height: 1.6; color: var(--po-text); margin-top: 16px; }
.pd-certs   { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pd-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

.pd-specs             { margin-top: 28px; border: 1px solid var(--po-line); }
.pd-specs__head       { background: var(--po-bg-soft); padding: 10px 14px; font-family: var(--po-display); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--po-navy); border-bottom: 1px solid var(--po-line); }
.pd-specs__row        { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--po-line); font-size: 13px; }
.pd-specs__row:last-child { border-bottom: 0; }
.pd-specs__row dt     { color: var(--po-muted); margin: 0; }
.pd-specs__row dd     { color: var(--po-navy); font-weight: 600; margin: 0; font-family: var(--po-mono); }

.pd-tabs              { margin-top: 44px; border-top: 1px solid var(--po-line); }
.pd-tabs__head        { display: flex; gap: 0; border-bottom: 1px solid var(--po-line); flex-wrap: wrap; }
.pd-tabs__btn         { padding: 14px 20px; font-family: var(--po-display); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--po-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pd-tabs__btn.is-on   { color: var(--po-navy); border-bottom-color: var(--po-orange); }
.pd-tabs__panel       { padding: 24px 0; display: none; }
.pd-tabs__panel.is-on { display: block; }
.pd-tabs__panel ul    { padding-left: 22px; }
.pd-tabs__panel li    { margin-bottom: 6px; color: var(--po-text); }

/* ─── RFQ PAGE ─────────────────────────────────────────────────── */
.rfq-wrap           { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; margin-top: 24px; }
.rfq-cart           { border: 1px solid var(--po-line); background: #fff; }
.rfq-cart__head     { padding: 14px 18px; background: var(--po-bg-soft); border-bottom: 1px solid var(--po-line); font-family: var(--po-display); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--po-navy); display: flex; justify-content: space-between; align-items: center; }
.rfq-cart__items    { min-height: 200px; }
.rfq-cart__empty    { padding: 60px 20px; text-align: center; color: var(--po-muted); }
.rfq-item           { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--po-line); }
.rfq-item:last-child{ border-bottom: 0; }
.rfq-item__img      { width: 64px; height: 64px; background: #eff4f9; border: 1px solid var(--po-line); overflow: hidden; }
.rfq-item__img img  { width: 100%; height: 100%; object-fit: cover; }
.rfq-item__name     { font-family: var(--po-display); font-weight: 700; color: var(--po-navy); text-transform: uppercase; font-size: 13.5px; line-height: 1.2; }
.rfq-item__meta     { font-size: 12px; color: var(--po-muted); margin-top: 2px; }
.rfq-item__qty      { width: 58px; padding: 6px 8px; border: 1px solid var(--po-line); text-align: center; font-family: var(--po-mono); font-size: 13px; }
.rfq-item__rm       { color: var(--po-muted); padding: 6px 8px; font-size: 16px; }
.rfq-item__rm:hover { color: var(--po-orange); }
.rfq-form           { background: #fff; border: 1px solid var(--po-line); padding: 24px; }

/* ─── FORM FIELDS ──────────────────────────────────────────────── */
.field        { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label  { font-family: var(--po-display); font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--po-navy); }
.field input,
.field select,
.field textarea { padding: 11px 13px; border: 1px solid var(--po-line); background: #fff; font-family: var(--po-body); font-size: 14px; color: var(--po-ink); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 0; border-color: var(--po-orange); box-shadow: 0 0 0 3px rgba(232,131,42,.15); }
.field small  { font-size: 12px; color: var(--po-muted); }
.field-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.required     { color: var(--po-orange); }

/* ─── ALERTS ───────────────────────────────────────────────────── */
.alert            { padding: 14px 18px; border-left: 3px solid; margin-bottom: 16px; font-size: 14px; background: var(--po-bg-soft); }
.alert--success   { background: #e8f5e9; border-color: #388e3c; color: #1e5a23; }
.alert--error     { background: #fdecea; border-color: #c62828; color: #8a1d18; }
.alert--info      { background: #e3f2fd; border-color: #1976d2; color: #1a4a7a; }
.alert--warn      { background: #fff4e5; border-color: var(--po-orange); color: #7a3e06; }

/* ─── FOOTER ───────────────────────────────────────────────────── */
.site-footer          { background: var(--po-navy); color: #c5d0e0; padding: 56px 0 24px; margin-top: 80px; font-size: 13px; }
.site-footer__grid    { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 40px; }
.site-footer h4       { color: #fff; font-family: var(--po-display); font-weight: 700; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 14px; }
.site-footer ul       { list-style: none; padding: 0; margin: 0; }
.site-footer li       { margin-bottom: 8px; }
.site-footer a        { color: #b8c4d5; }
.site-footer a:hover  { color: var(--po-orange); }
.site-footer__about   { margin-top: 14px; color: #b8c4d5; max-width: 300px; }
.site-footer__socials { display: flex; gap: 10px; margin-top: 18px; }
.site-footer__socials a { width: 32px; height: 32px; border: 1px solid #3a5378; display: inline-flex; align-items: center; justify-content: center; color: #b8c4d5; }
.site-footer__socials a:hover { background: var(--po-orange); color: #fff; border-color: var(--po-orange); }
.site-footer__bottom  { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid #2a3f5e; font-size: 11.5px; color: #8a9ab5; flex-wrap: wrap; gap: 10px; }

/* ─── CHATBOT ──────────────────────────────────────────────────── */
.chatbot-fab { position: fixed; bottom: 24px; right: 24px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--po-orange); color: #fff; box-shadow: var(--shadow-md); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.chatbot-fab:hover { transform: scale(1.05); color: #fff; }
.chatbot-fab svg   { width: 24px; height: 24px; }

.chatbot-panel        { position: fixed; bottom: 96px; right: 24px; z-index: 60; width: 380px; max-width: calc(100vw - 32px); height: 540px; max-height: 72vh; background: #fff; border: 1px solid var(--po-line); box-shadow: var(--shadow-md); display: none; flex-direction: column; }
.chatbot-panel.is-open{ display: flex; }
.chatbot-head         { background: var(--po-navy); color: #fff; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.chatbot-head__title  { font-family: var(--po-display); font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.chatbot-head__sub    { font-size: 11px; color: var(--po-sky-pale); margin-top: 1px; }
.chatbot-head button  { color: #fff; font-size: 22px; padding: 0 6px; }
.chatbot-msgs         { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--po-bg-soft); }
.chatbot-msg          { max-width: 85%; padding: 10px 14px; font-size: 13.5px; line-height: 1.45; border: 1px solid transparent; }
.chatbot-msg.bot      { background: #fff; border-color: var(--po-line); align-self: flex-start; }
.chatbot-msg.user     { background: var(--po-navy); color: #fff; align-self: flex-end; }
.chatbot-input        { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--po-line); }
.chatbot-input input  { flex: 1; padding: 10px 12px; border: 1px solid var(--po-line); font-family: inherit; font-size: 13.5px; }
.chatbot-input input:focus { outline: 0; border-color: var(--po-orange); }
.chatbot-input button { padding: 10px 16px; background: var(--po-orange); color: #fff; font-family: var(--po-display); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; font-size: 11px; }
.chatbot-input button:hover { background: var(--po-orange-dark); }
.chatbot-suggest      { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; background: var(--po-bg-soft); }
.chatbot-suggest button { padding: 6px 10px; background: #fff; border: 1px solid var(--po-line); font-size: 11.5px; color: var(--po-navy); }
.chatbot-suggest button:hover { border-color: var(--po-orange); color: var(--po-orange); }

/* ─── BRAND PAGE ───────────────────────────────────────────────── */
/* Hero block: logo beside long description + stats strip */
.brand-hero {
  background: var(--po-bg-soft);
  border-bottom: 1px solid var(--po-line);
  padding: 50px 0 40px;
  position: relative;
}
.brand-hero__exclusive {
  display: inline-block;
  background: var(--po-orange);
  color: #fff;
  font-family: var(--po-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 18px;
}
.brand-hero__inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: flex-start;
}
.brand-hero__logo {
  background: #fff;
  border: 1px solid var(--po-line);
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.brand-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-hero__logo-fallback {
  font-family: var(--po-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--po-navy);
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align: center;
  line-height: 1.1;
}
.brand-hero__body h1 {
  font-family: var(--po-display);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -.6px;
  color: var(--po-navy);
  margin: 0;
  text-transform: uppercase;
}
.brand-hero__meta {
  margin-top: 8px;
  font-family: var(--po-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--po-sky);
}
.brand-hero__meta span + span::before {
  content: "·";
  margin: 0 10px;
  color: var(--po-faint);
}
.brand-hero__desc {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--po-text);
  max-width: 700px;
}
.brand-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.brand-hero__stats {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--po-line);
}
.brand-hero__stat-num   { font-family: var(--po-display); font-size: 28px; font-weight: 800; color: var(--po-navy); line-height: 1; }
.brand-hero__stat-label { margin-top: 4px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--po-muted); font-family: var(--po-body); }

/* Category-group header within brand page */
.brand-cat-group          { margin-bottom: 48px; }
.brand-cat-group:last-child { margin-bottom: 0; }
.brand-cat-group__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--po-navy);
}
.brand-cat-group__name {
  font-family: var(--po-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.2px;
  text-transform: uppercase;
  color: var(--po-navy);
  margin: 0;
}
.brand-cat-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  background: var(--po-orange);
  color: #fff;
  font-family: var(--po-mono);
  font-size: 12px;
  font-weight: 700;
}
.brand-cat-group__link {
  margin-left: auto;
  font-family: var(--po-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--po-navy);
}

/* Category-tab navigation (anchor scroll links at top of product list) */
.brand-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--po-line);
}
.brand-cat-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--po-line);
  font-family: var(--po-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--po-navy);
}
.brand-cat-tabs a:hover     { border-color: var(--po-orange); color: var(--po-orange); }
.brand-cat-tabs a .tab-num  { font-family: var(--po-mono); font-size: 10px; color: var(--po-faint); font-weight: 600; }

/* ─── BRANDS INDEX PAGE — per-brand sections with products inline ── */
.brand-section { padding: 72px 0; }
.brand-section + .brand-section { border-top: 1px solid var(--po-line); }
.section--soft.brand-section + .brand-section { border-top: 0; }

.brand-section__hero {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--po-line);
}

.brand-section__logo {
  height: 160px;
  background: #fff;
  border: 1px solid var(--po-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.brand-section__logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.brand-section__logo-fallback {
  font-family: var(--po-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .4px;
  color: var(--po-navy);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
}

.brand-section__info { min-width: 0; }

.brand-section__badge {
  display: inline-block;
  background: var(--po-orange);
  color: #fff;
  font-family: var(--po-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 14px;
}

.brand-section__name {
  font-family: var(--po-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1.02;
  letter-spacing: -.5px;
  color: var(--po-navy);
  margin: 0;
  text-transform: uppercase;
}

.brand-section__meta {
  margin-top: 8px;
  font-family: var(--po-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--po-sky);
}
.brand-section__meta span + span::before {
  content: "·";
  margin: 0 10px;
  color: var(--po-faint);
}

.brand-section__desc {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--po-text);
  max-width: 700px;
  margin-bottom: 0;
}

.brand-section__products-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.brand-section__products-head h3 {
  font-family: var(--po-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--po-navy);
  margin: 0;
}
.brand-section__products-count {
  font-family: var(--po-mono);
  font-size: 12px;
  color: var(--po-muted);
  letter-spacing: .3px;
}
.brand-section__products-count::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--po-orange);
  vertical-align: middle;
  margin-right: 10px;
}

.brand-section__footer {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed var(--po-line);
}

.brand-section__empty {
  padding: 40px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--po-line);
  color: var(--po-muted);
  font-size: 14px;
}

/* 4-up product grid modifier (used on brand sections) */
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ─── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .hero__inner        { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual       { min-height: 260px; }
  .catalog            { grid-template-columns: 1fr; }
  .catalog__aside     { position: static; max-height: none; }
  .pd-wrap            { grid-template-columns: 1fr; }
  .rfq-wrap           { grid-template-columns: 1fr; }
  .site-footer__grid  { grid-template-columns: 1fr 1fr 1fr; }
  .brand-grid         { grid-template-columns: 1fr 1fr; }
  .brand-hero__inner  { grid-template-columns: 200px 1fr; gap: 32px; }
  .brand-section__hero { grid-template-columns: 180px 1fr; gap: 28px; }
  .product-grid--4    { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .utility-bar__left  { display: none; }
  .header-search      { display: none; }
  .site-nav           { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; border-top: 1px solid var(--po-line); padding: 6px 0; box-shadow: var(--shadow-soft); }
  .site-nav.is-open   { display: flex; }
  .site-nav__link     { padding: 12px 28px; width: 100%; border-bottom: 0; }
  .site-nav__toggle   { display: flex; }
  .main-bar__inner    { flex-wrap: wrap; }

  .grid-3, .grid-4, .product-grid { grid-template-columns: 1fr 1fr; }
  .grid-2, .feature-grid          { grid-template-columns: 1fr; }

  .hero               { padding: 60px 0 70px; }
  .hero__stats        { gap: 28px; }
  .section            { padding: 56px 0; }
  .section__head      { flex-direction: column; align-items: flex-start; gap: 16px; }

  .cta-strip__inner   { flex-direction: column; align-items: flex-start; }
  .site-footer__grid  { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom{ flex-direction: column; }
  .quick-search__inner{ gap: 10px; }
  .quick-search__field{ min-width: calc(50% - 10px); }

  .brand-hero__inner  { grid-template-columns: 1fr; gap: 24px; }
  .brand-hero__logo   { height: 140px; max-width: 240px; }
  .brand-hero__stats  { gap: 28px; }
  .brand-section      { padding: 56px 0; }
  .brand-section__hero { grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; margin-bottom: 28px; }
  .brand-section__logo { max-width: 220px; height: 130px; }
  .product-grid--4    { grid-template-columns: repeat(2, 1fr); }
  .brand-index-card   { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .brand-index-card__logo { height: 90px; max-width: 200px; }
}
@media (max-width: 560px) {
  .container          { padding: 0 18px; }
  .grid-3,.grid-4,.product-grid,.brand-grid,.site-footer__grid { grid-template-columns: 1fr; }
  .product-grid--4    { grid-template-columns: 1fr; }
  .hero__title        { font-size: 40px; }
  .hero__stats        { gap: 20px; }
  .hero__stat-num     { font-size: 22px; }
  .chatbot-panel      { right: 10px; bottom: 84px; width: calc(100vw - 20px); height: 60vh; }
}

/* ─── PRINT ────────────────────────────────────────────────────── */
@media print {
  .utility-bar, .site-nav, .chatbot-fab, .chatbot-panel, .cta-strip, .header-cta, .site-footer__socials { display: none !important; }
  body { color: #000; }
}