@import url('common.css');

/* ================================================================
   HOMEPAGE V2 — Monochrome (Black & White) + Light/Dark switcher
   Self-contained layout built on Bootstrap grid (no dependency on
   the legacy custom-grid classes used by the classic homepage).
   ================================================================ */

.v2-page {
  --mono-bg: #000;
  --mono-bg2: #0a0000;
  --mono-surface: #130404;
  --mono-card: #1a0606;
  --mono-border: #2e0e0e;
  --mono-text: #fff;
  --mono-text2: #b8a8a8;
  --mono-text3: #7a6060;
  --mono-accent: #e81c1c;
  --mono-accent2: #b30000;
  --mono-on-accent: #fff;
  background: var(--mono-bg);
  color: var(--mono-text);
}

[data-theme="light"] .v2-page {
  --mono-bg: #fff;
  --mono-bg2: #fbf6f6;
  --mono-surface: #fcf7f7;
  --mono-card: #fff;
  --mono-border: #f0dcdc;
  --mono-text: #1a0d0d;
  --mono-text2: #5a4444;
  --mono-text3: #8a7373;
  --mono-accent: #d11414;
  --mono-accent2: #a30000;
  --mono-on-accent: #fff;
}

/* Override shared header/footer/banner to red+black theme on this page only */

.v2-page .pb-btn-login {
  border-color: var(--mono-accent);
  color: var(--mono-accent)
}

.v2-page .pb-btn-signup {
  background: var(--mono-accent);
  color: var(--mono-on-accent)
}

.v2-page .pb-btn-signup:hover {
  background: var(--mono-accent2)
}

.v2-page .fl-col a:hover {
  color: var(--mono-accent)
}

.v2-page .features-strip {
  background: var(--mono-surface);
  border-color: var(--mono-border)
}

/* ── THEME TOGGLE ── */

/* ── HERO ── */

.v2-hero {
  position: relative;
  overflow: hidden;
  background: var(--mono-bg2);
  padding: 5.5rem 1.5rem 4.5rem;
  text-align: center;
  border-bottom: 1px solid var(--mono-border);
}

.v2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(232, 28, 28, .13), transparent);
}

[data-theme="light"] .v2-page .v2-hero::before {
  background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(232, 28, 28, .08), transparent)
}

.v2-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto
}

.v2-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(232, 28, 28, .08);
  border: 1px solid rgba(232, 28, 28, .25);
  color: var(--mono-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.v2-hero h1 {
  font-family: var(--font-d);
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .3px;
  margin-bottom: 1rem;
  color: var(--mono-text);
}

.v2-hero p {
  font-size: 1rem;
  color: var(--mono-text2);
  max-width: 540px;
  margin: 0 auto 2.25rem;
  line-height: 1.7
}

/* ── SEARCH BAR ── */

.v2-search-bar {
  display: flex;
  align-items: stretch;
  max-width: 680px;
  margin: 0 auto;
  background: var(--mono-card);
  border: 1px solid var(--mono-border);
  border-radius: 14px;
  overflow: hidden;
}

.v2-search-bar select {
  background: transparent;
  border: none;
  border-right: 1px solid var(--mono-border);
  color: var(--mono-text2);
  font-size: .84rem;
  font-weight: 600;
  padding: 0 1rem;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}

.v2-search-bar .v2-search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center
}

.v2-search-bar .v2-search-input-wrap i {
  position: absolute;
  left: 1rem;
  color: var(--mono-text3);
  font-size: .95rem;
  pointer-events: none
}

.v2-search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--mono-text);
  font-family: var(--font-b);
  font-size: .95rem;
  padding: 1rem 1rem 1rem 2.6rem;
  outline: none;
  min-width: 0;
  width: 100%;
}

.v2-search-bar input::placeholder {
  color: var(--mono-text3)
}

.v2-search-bar button {
  background: var(--mono-accent);
  color: var(--mono-on-accent);
  border: none;
  padding: 0 1.6rem;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
  display: flex;
  align-items: center;
  gap: .45rem;
}

.v2-search-bar button:hover {
  background: var(--mono-accent2)
}

.v2-search-results {
  position: relative;
  max-width: 680px;
  margin: .6rem auto 0;
  background: var(--mono-card);
  border: 1px solid var(--mono-border);
  border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .4);
  z-index: 50;
  display: none;
  max-height: 420px;
  overflow-y: auto;
  text-align: left;
}

.v2-search-results.open {
  display: block
}

.v2-sd-label {
  padding: .55rem 1rem .3rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mono-text3)
}

.v2-sd-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  text-decoration: none;
  border-top: 1px solid var(--mono-border)
}

.v2-sd-item:hover {
  background: rgba(255, 255, 255, .04)
}

[data-theme="light"] .v2-page .v2-sd-item:hover {
  background: rgba(0, 0, 0, .03)
}

.v2-sd-thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--mono-surface);
  border: 1px solid var(--mono-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: .7rem;
  font-weight: 700;
  color: var(--mono-text2)
}

.v2-sd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.v2-sd-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--mono-text)
}

.v2-sd-sub {
  font-size: .72rem;
  color: var(--mono-text3);
  margin-top: 1px
}

.v2-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2.25rem
}

.v2-hero-stat {
  text-align: center
}

.v2-hero-stat-num {
  font-family: var(--font-d);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--mono-accent);
  display: block
}

.v2-hero-stat-label {
  font-size: .68rem;
  color: var(--mono-text3);
  letter-spacing: 1px;
  text-transform: uppercase
}

.v2-hero-quicklinks {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem
}

.v2-quicklink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: transparent;
  border: 1px solid var(--mono-border);
  color: var(--mono-text2);
  font-size: .8rem;
  font-weight: 600;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  transition: all .2s;
}

.v2-quicklink:hover {
  border-color: var(--mono-accent);
  color: var(--mono-accent)
}

/* ── FEATURES STRIP — bordered pills, never look like a plain stacked list ── */

.v2-feat-strip {
  background: var(--mono-surface);
  border-top: 1px solid var(--mono-border);
  border-bottom: 1px solid var(--mono-border);
  padding: 1.25rem 1.5rem
}

.v2-feat-row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap
}

.v2-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--mono-card);
  border: 1px solid var(--mono-border);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .8rem;
  color: var(--mono-text2);
  white-space: nowrap;
}

.v2-feat-pill i {
  color: var(--mono-accent);
  font-size: .95rem
}

.v2-feat-pill strong {
  color: var(--mono-text);
  font-weight: 700
}

/* ── SECTION HEAD ── */

.v2-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.75rem
}

.v2-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mono-text2);
  background: var(--mono-card);
  border: 1px solid var(--mono-border);
  padding: .3rem .85rem;
  border-radius: 999px;
  margin-bottom: .6rem;
}

.v2-section-title {
  font-family: var(--font-d);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--mono-text)
}

.v2-section-sub {
  color: var(--mono-text2);
  font-size: .86rem;
  margin-top: .2rem
}

.v2-section-link {
  font-size: .82rem;
  color: var(--mono-text);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem
}

.v2-section-link:hover {
  text-decoration: underline
}

/* ── NEW ARRIVALS — prominent showcase ── */

.v2-arrivals-section {
  padding: 3.5rem 0;
  background: var(--mono-surface);
  border-bottom: 1px solid var(--mono-border)
}

.v2-arrival-card {
  background: var(--mono-card);
  border: 1px solid var(--mono-border);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: all .22s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.v2-arrival-card:hover {
  transform: translateY(-3px);
  border-color: var(--mono-accent)
}

.v2-arrival-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--mono-accent);
  color: var(--mono-on-accent);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.v2-arrival-img {
  aspect-ratio: 4/3;
  background: var(--mono-bg2);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center
}

.v2-arrival-img img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .35s
}

.v2-arrival-card:hover .v2-arrival-img img {
  transform: scale(1.05)
}

.v2-arrival-noimg {
  color: var(--mono-text3);
  font-size: 1.6rem
}

.v2-arrival-body {
  padding: 1rem 1.1rem 1.15rem;
  flex: 1;
  display: flex;
  flex-direction: column
}

.v2-arrival-meta {
  font-size: .68rem;
  color: var(--mono-text3);
  margin-bottom: .25rem
}

.v2-arrival-name {
  font-family: var(--font-d);
  font-size: .98rem;
  font-weight: 700;
  color: var(--mono-text);
  line-height: 1.3;
  margin-bottom: .7rem;
  flex: 1
}

.v2-arrival-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  font-weight: 600;
  color: var(--mono-accent);
  text-decoration: none
}

.v2-arrival-cta:hover {
  text-decoration: underline
}

/* ── BRAND CARDS (own, red+black) ── */

.v2-brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-align: center;
  height: 100%;
  background: var(--mono-card);
  border: 1px solid var(--mono-border);
  border-radius: 14px;
  padding: 1.1rem .85rem;
  text-decoration: none;
  transition: all .2s;
}

.v2-brand-card:hover {
  border-color: var(--mono-accent);
  transform: translateY(-2px)
}

.v2-brand-logo {
  width: 100%;
  aspect-ratio: 277/153;
  background: var(--mono-surface);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mono-border)
}

.v2-brand-logo span {
  font-family: var(--font-d);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mono-accent)
}

.v2-brand-name {
  font-family: var(--font-d);
  font-size: .88rem;
  font-weight: 700;
  color: var(--mono-text)
}

.v2-brand-count {
  font-size: .65rem;
  color: var(--mono-text3)
}

/* ── FEATURED TABS (own, monochrome) ── */

.v2-tabs {
  display: flex;
  border: 1px solid var(--mono-border);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background: var(--mono-card)
}

.v2-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .85rem 1rem;
  background: transparent;
  border: none;
  color: var(--mono-text3);
  font-family: var(--font-d);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .18s;
}

.v2-tab+.v2-tab {
  border-left: 1px solid var(--mono-border)
}

.v2-tab.active {
  color: var(--mono-accent);
  background: var(--mono-surface);
  border-bottom-color: var(--mono-accent)
}

.v2-tab-count {
  font-size: .62rem;
  background: var(--mono-border);
  color: var(--mono-text2);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700
}

.v2-tab.active .v2-tab-count {
  background: var(--mono-accent);
  color: var(--mono-on-accent)
}

.v2-tab-panel {
  display: none;
  background: var(--mono-surface);
  border: 1px solid var(--mono-border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 1.5rem 1.25rem
}

.v2-tab-panel.active {
  display: block
}

.v2-kit-card {
  background: var(--mono-card);
  border: 1px solid var(--mono-border);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all .2s
}

.v2-kit-card:hover {
  border-color: var(--mono-accent)
}

.v2-kit-img {
  aspect-ratio: 4/3;
  background: var(--mono-bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mono-text3);
  font-size: 1.5rem;
  position: relative
}

.v2-kit-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--mono-accent);
  color: var(--mono-on-accent);
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .25rem
}

.v2-kit-soon-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  flex-direction: column;
  gap: .3rem
}

.v2-kit-body {
  padding: .85rem .95rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column
}

.v2-kit-meta {
  font-size: .65rem;
  color: var(--mono-text3);
  margin-bottom: .2rem
}

.v2-kit-name {
  font-family: var(--font-d);
  font-size: .9rem;
  font-weight: 700;
  color: var(--mono-text);
  line-height: 1.3;
  margin-bottom: .6rem;
  flex: 1
}

.v2-kit-cta {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .6rem;
  background: rgba(232, 28, 28, .05);
  border: 1px dashed rgba(232, 28, 28, .3);
  border-radius: 6px;
  text-decoration: none
}

.v2-kit-cta i {
  color: var(--mono-accent)
}

.v2-kit-cta span {
  font-size: .72rem;
  color: var(--mono-accent);
  font-weight: 600
}

/* ── CTA STRIP ── */

.v2-cta-strip {
  background: var(--mono-surface);
  border-top: 1px solid var(--mono-border);
  text-align: center;
  padding: 2.75rem 1.5rem
}

.v2-cta-strip .v2-cta-title {
  font-family: var(--font-d);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--mono-text);
  margin-bottom: .5rem
}

.v2-cta-strip .v2-cta-sub {
  color: var(--mono-text2);
  font-size: .88rem;
  margin-bottom: 1.4rem
}

.v2-btn-mono {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--mono-accent);
  color: var(--mono-on-accent);
  padding: .75rem 1.75rem;
  border-radius: 8px;
  font-family: var(--font-d);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
}

.v2-btn-mono:hover {
  background: var(--mono-accent2)
}

@media(max-width:640px) {
  .v2-search-bar {
    flex-wrap: wrap;
    border-radius: 14px
  }

  .v2-search-bar select {
    border-right: none;
    border-bottom: 1px solid var(--mono-border);
    width: 100%;
    order: 1;
    padding: .7rem 1rem
  }

  .v2-search-bar .v2-search-input-wrap {
    order: 2;
    width: 100%
  }

  .v2-search-bar button {
    order: 3;
    width: 100%;
    justify-content: center;
    padding: .85rem
  }

  .v2-hero {
    padding: 3.5rem 1rem 3rem
  }
}

/* ── BOTTOM NAVIGATION (Mobile App Feel) ── */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--mono-bg, #000);
  border-top: 1px solid var(--mono-border, #2e0e0e);
  display: none;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@media(max-width:991px) {
  .bottom-nav {
    display: flex
  }
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .6rem .2rem;
  color: var(--mono-text2, #b8a8a8);
  text-decoration: none;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .3px;
  gap: .2rem;
  transition: color .15s;
}

.bn-item i {
  font-size: 1.3rem;
  line-height: 1
}

.bn-item.active,
.bn-item:hover {
  color: var(--mono-accent, #e81c1c)
}

@media(max-width:991px) {
  body.v2-page {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px))
  }
}

/* ── V2 INNER PAGE HERO (for interior/exterior/brand/product pages) ── */

.v2-page .page-hero {
  background: var(--mono-bg2, #0a0000);
  border-bottom: 1px solid var(--mono-border, #2e0e0e);
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
}

.v2-page .page-hero h1 {
  font-family: var(--font-d);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  color: var(--mono-text, #fff);
  margin: .5rem 0
}

.v2-page .page-hero h1 span {
  color: var(--mono-accent, #e81c1c)
}

.v2-page .page-hero p {
  color: var(--mono-text2, #b8a8a8);
  font-size: .92rem;
  max-width: 80vw;
  margin: .5rem auto 1rem
}

.v2-page .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mono-accent, #e81c1c);
  margin-bottom: .4rem
}

.v2-page .hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.2rem;
  flex-wrap: wrap
}

.v2-page .hero-stat {
  text-align: center
}

.v2-page .hero-stat-num {
  display: block;
  font-family: var(--font-d);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--mono-text, #fff)
}

.v2-page .hero-stat-label {
  font-size: .68rem;
  color: var(--mono-text3, #7a6060);
  text-transform: uppercase;
  letter-spacing: 1px
}

.v2-page .hero-stat-div {
  width: 1px;
  height: 36px;
  background: var(--mono-border, #2e0e0e)
}

/* ── V2 BRAND/MODEL GRID CARDS ── */

.v2-page .brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .875rem
}

.v2-page .brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: 1.1rem .7rem;
  background: var(--mono-card, #1a0606);
  border: 1px solid var(--mono-border, #2e0e0e);
  border-radius: 12px;
  text-decoration: none;
  transition: all .2s;
  text-align: center
}

.v2-page .brand-card:hover {
  border-color: var(--mono-accent, #e81c1c);
  transform: translateY(-2px)
}

.v2-page .brand-logo-wrap {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mono-surface, #130404);
  border-radius: 10px;
  overflow: hidden
}

.v2-page .brand-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px
}

.v2-page .brand-initials {
  font-family: var(--font-d);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mono-text2, #b8a8a8)
}

.v2-page .brand-name {
  font-family: var(--font-d);
  font-size: .82rem;
  font-weight: 700;
  color: var(--mono-text, #fff)
}

.v2-page .brand-meta {
  font-size: .65rem;
  color: var(--mono-text3, #7a6060)
}

.v2-page .brand-count {
  font-size: .65rem;
  color: var(--mono-accent, #e81c1c);
  font-weight: 600
}

.v2-page .brand-initials-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--mono-surface, #130404);
  font-family: var(--font-d);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mono-accent, #e81c1c)
}

/* ── V2 MODELS GRID ── */

.v2-page .models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .875rem
}

.v2-page .model-card {
  background: var(--mono-card, #1a0606);
  border: 1px solid var(--mono-border, #2e0e0e);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all .2s
}

.v2-page .model-card:hover {
  border-color: var(--mono-accent, #e81c1c);
  transform: translateY(-2px)
}

.v2-page .model-img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--mono-bg2, #0a0000);
  overflow: hidden
}

.v2-page .model-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.v2-page .model-type-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--mono-accent, #e81c1c);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .4px
}

.v2-page .model-body {
  padding: .8rem .9rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column
}

.v2-page .model-name {
  font-family: var(--font-d);
  font-size: .88rem;
  font-weight: 700;
  color: var(--mono-text, #fff);
  margin-bottom: .2rem
}

.v2-page .model-year {
  font-size: .65rem;
  color: var(--mono-text3, #7a6060);
  margin-bottom: .5rem
}

.v2-page .model-arrow-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  color: var(--mono-accent, #e81c1c);
  font-weight: 600;
  margin-top: auto
}

/* ── V2 FILTER BUTTONS ── */

.v2-page .filter-btn {
  background: var(--mono-surface, #130404);
  border: 1px solid var(--mono-border, #2e0e0e);
  color: var(--mono-text2, #b8a8a8);
  border-radius: 20px;
  padding: .38rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s
}

.v2-page .filter-btn.active,
.v2-page .filter-btn:hover {
  background: var(--mono-accent, #e81c1c);
  border-color: var(--mono-accent, #e81c1c);
  color: #fff
}

/* ── BREADCRUMB V2 ── */

.v2-page .breadcrumb {
  font-size: .75rem;
  color: var(--mono-text3, #7a6060);
  padding: .75rem 0;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: 0
}

.v2-page .breadcrumb a {
  color: var(--mono-text2, #b8a8a8);
  text-decoration: none
}

.v2-page .breadcrumb a:hover {
  color: var(--mono-accent, #e81c1c)
}

/* ── SECTION TITLE V2 ── */

.v2-page .section-title {
  font-family: var(--font-d);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--mono-text, #fff);
  margin-bottom: .35rem
}

.v2-page .section-sub {
  font-size: .82rem;
  color: var(--mono-text2, #b8a8a8)
}

/* ── MOBILE TOUCH IMPROVEMENTS ── */

@media(max-width:768px) {
  .v2-page .brand-card {
    padding: .9rem .5rem
  }

  .v2-page .brands-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .6rem
  }

  .v2-page .models-grid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: .6rem
  }

  .v2-page .container {
    padding-left: .875rem;
    padding-right: .875rem
  }
}


.brands-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}