/* ============================================================
   CANLO SPORTS — ANTON + ORBITRON SPORTS FONT SYSTEM
   Drop-in override. No content changed. Pure typography upgrade.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');

/* ── CSS Variables ── */
:root {
  --font-display: 'Anton', 'Arial Black', sans-serif;
  --font-heading: 'Orbitron', 'Anton', sans-serif;
  --font-nav: 'Barlow Condensed', 'Anton', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --red: #e8000d;
  --dark: #0a0a0a;
  --mid: #1a1a1a;
}

/* ── GLOBAL RESET TO SPORTS FONTS ── */
*, *::before, *::after {
  font-family: var(--font-body);
}

body {
  font-family: var(--font-body) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ── H1 — Hero Title: Anton — Big + Punchy ── */
h1, .h1 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important; /* Anton is already ultra-bold */
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.0 !important;
}

/* ── H2 — Section Titles: Orbitron ── */
h2, .h2 {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.1 !important;
}

/* ── H3 — Category Labels: Anton ── */
h3, .h3 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.1 !important;
}

/* ── H4, H5, H6 — Sub-titles: Barlow Condensed Bold ── */
h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--font-nav) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
}

/* ── Navigation Links ── */
.main-menu nav ul li a,
.mobile-menu nav ul li a,
#mobile-menu-active ul li a,
nav ul li a {
  font-family: var(--font-nav) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 13px !important;
}

.mega-menu-title a,
.mega-menu li a {
  font-family: var(--font-nav) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ── Buttons ── */
a.default-btn,
.default-btn,
button,
input[type="submit"],
.button,
.loadMore,
a.loadMore {
  font-family: var(--font-nav) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

/* ── Banner / Category Cards ── */
.banner-content h4 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: clamp(18px, 2.5vw, 28px) !important;
}

/* ── Product Titles ── */
.bestselling-content h4,
.bestselling-content h4 a {
  font-family: var(--font-nav) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ── Slider Text ── */
.slider-text-6 h1,
.slider-text-6 h3 {
  font-family: var(--font-display) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.slider-text-6 h4 {
  font-family: var(--font-nav) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── Top Info Bar ── */
.top-bar-area p,
.top-bar-area,
body > center p {
  font-family: var(--font-nav) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
}

/* ── Footer ── */
.footer-area h4,
.footer-title h4,
.support-text h2,
footer h2,
footer h4 {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}

.footer-area p,
footer p,
.copyright p,
.panel-body p,
.footer-cont-info p {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* ── Section Title ── */
.section-title-4 h2 {
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: clamp(22px, 4vw, 42px) !important;
  position: relative;
  display: inline-block;
}

.section-title-4 p {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  font-size: 15px !important;
}

/* ── Sidebar ── */
.sidebar-contact h5 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.sidebar-contact p,
.sidebar-contact-list li {
  font-family: var(--font-body) !important;
}

/* ── Newsletter ── */
.subscribe-style-2 h4 {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: clamp(14px, 2vw, 20px) !important;
}

.subscribe-form input[type="email"] {
  font-family: var(--font-body) !important;
  letter-spacing: 0.03em !important;
}

/* ── Accordion / Panel ── */
.panel-title a,
.footer-accordion .panel-title {
  font-family: var(--font-nav) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ── WhatsApp Float ── */
.whats-float a span {
  font-family: var(--font-nav) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ── Mobile Responsive Improvements ── */
@media (max-width: 768px) {
  h1, .slider-text-6 h1 {
    font-size: clamp(28px, 8vw, 52px) !important;
    line-height: 1.05 !important;
  }

  h2 {
    font-size: clamp(18px, 5vw, 32px) !important;
  }

  h3, .slider-text-6 h3 {
    font-size: clamp(16px, 4.5vw, 26px) !important;
  }

  h4 {
    font-size: clamp(13px, 3.5vw, 18px) !important;
  }

  nav ul li a {
    font-size: 12px !important;
    letter-spacing: 0.07em !important;
  }

  .section-title-4 h2 {
    font-size: clamp(18px, 6vw, 30px) !important;
  }

  .banner-content h4 {
    font-size: clamp(14px, 4vw, 20px) !important;
  }

  .bestselling-content h4,
  .bestselling-content h4 a {
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
  }

  .subscribe-style-2 h4 {
    font-size: clamp(13px, 3.5vw, 17px) !important;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(24px, 9vw, 40px) !important;
  }

  h2 {
    font-size: clamp(16px, 6vw, 24px) !important;
  }

  .default-btn,
  a.default-btn {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
  }
}