/* ============================================================
   HOKA × Malachyte demo — brand overrides on top of shell/wiha
   ============================================================ */
:root {
  --hoka-blue: #0072CE;
  --hoka-dark: #1A1A1A;
  --hoka-mid:  #4A4A4A;
  --hoka-line: #E0E0E0;
  --hoka-bg:   #F7F7F7;
  /* Override wiha vars so shared classes pick up Hoka colors */
  --wiha-red:        #0072CE;
  --wiha-red-hover:  #005BA8;
  --wiha-blue:       #0072CE;
  --wiha-slate:      #4A4A4A;
  --wiha-text:       #1A1A1A;
  --wiha-muted:      #6B6B6B;
  --wiha-line:       #E0E0E0;
  --wiha-bg-soft:    #F7F7F7;
  --wiha-now-badge:  #0072CE;
  --wiha-sale-badge: #CC2200;
}

/* ── Hoka header chrome ───────────────────────────────────── */
.hoka-header {
  background: #fff;
  border-bottom: 1px solid var(--hoka-line);
}
.hoka-header--minimal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  gap: 0;
}
.hoka-logo {
  display: flex;
  align-items: center;
}
.hoka-logo img {
  height: 30px;
  display: block;
  object-fit: contain;
}

/* ── Hoka nav strip ───────────────────────────────────────── */
.hoka-nav {
  background: #fff;
  border-top: 1px solid var(--hoka-line);
  border-bottom: 2px solid var(--hoka-dark);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hoka-nav a {
  color: var(--hoka-dark);
  text-decoration: none;
  padding: 11px 14px;
  display: inline-block;
  cursor: pointer;
  white-space: nowrap;
}
.hoka-nav a:hover { color: var(--hoka-blue); }
.hoka-nav a.active { color: var(--hoka-blue); box-shadow: inset 0 -2px 0 var(--hoka-blue); }
.hoka-nav a.sale-link { color: #CC2200; }

/* ── Product card type label ──────────────────────────────── */
.wiha-card__type {
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 3px;
  font-family: var(--font-mono);
}

/* ── Before-column grid rail (red for HOKA) ──────────────── */
.wiha-grid-wrap--alpha {
  border-color: rgba(204,34,0,0.25);
  background: rgba(204,34,0,0.02);
}
.wiha-grid-wrap--alpha .wiha-grid-railbar {
  background: #CC2200;
}

/* ── SBS column head — equal height both sides ───────────── */
.sbs-col__head {
  min-height: 88px;
  justify-content: center;
}
.sbs-col__logo--brand,
.sbs-col__logo--mal {
  height: 32px !important;
  object-fit: contain;
}
.sbs-col--alpha .sbs-col__head {
  background: #EBEBEB;
}

/* ── PLP title ────────────────────────────────────────────── */
.sbs-col__viewport .wiha-plp-title {
  color: var(--hoka-dark);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 24px;
}

/* ── Welcome screen hero heading ─────────────────────────── */
.welcome-title em { color: var(--hoka-blue); font-style: normal; }

/* ── BEFORE compare card (dark/neutral for Hoka) ─────────── */
.compare-card--before .compare-icon img {
  filter: none;
  opacity: 1;
}

/* ── Logo sizes on welcome ────────────────────────────────── */
.welcome-logos img.logo-brand {
  height: 44px;
  object-fit: contain;
}

/* ── Hoka card fav heart uses blue ───────────────────────── */
.wiha-fav--on {
  box-shadow: 0 0 0 1px var(--hoka-blue);
}

/* ── Rank chip dots + borders: Malachyte stays green ─────── */

/* ── PDP anchor ──────────────────────────────────────────── */
.pdp-anchor__name { color: var(--hoka-dark); }
.pdp-anchor__price { color: var(--hoka-dark); }

/* ── PDP recs head — equal height both sides so carousels align ── */
.pdp-recs__head {
  min-height: 64px;
}
.pdp-col-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pdp-col-label--before {
  background: #EBEBEB;
  color: #666;
}
.pdp-col-label--after {
  background: rgba(3,131,98,0.12);
  color: var(--c-malachyte-dark);
}

/* ── Search intent badges ────────────────────────────────── */
.search-bar-menu-item-intent--simple { background: #E8F0FA; color: #003D7A; }