/* =========================================================
   WholesaleWindowTint.com Theme CSS v02
   Loaded after Turbify CSS
   Brand: Charcoal / Blue / High-quality automotive supplier
   ========================================================= */


/* =========================================================
   1. BRAND VARIABLES
   ========================================================= */

:root {
  --wwt-charcoal: #1A1D21;
  --wwt-charcoal-dark: #101317;
  --wwt-blue: #1E88E5;
  --wwt-blue-bright: #29B6F6;
  --wwt-white: #FFFFFF;
  --wwt-light-gray: #F5F7FA;
  --wwt-border: #E6E6E6;
  --wwt-text: #222222;
  --wwt-muted: #5F6B7A;
  --wwt-shadow: 0 16px 35px rgba(0,0,0,0.16);
  --wwt-radius: 14px;
}


/* =========================================================
   2. GLOBAL BASE
   ========================================================= */

body {
  background: var(--wwt-white);
  color: var(--wwt-text);
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: var(--wwt-blue);
}

a:hover {
  color: var(--wwt-blue-bright);
}


/* =========================================================
   3. TURBIFY CLEANUP
   ========================================================= */

.fsection-name,
.fsection-name h1 {
  display: none !important;
}

.breadcrumbs {
  font-size: 13px;
  color: var(--wwt-muted);
}


/* =========================================================
   4. FULL-BLEED SYSTEM
   ========================================================= */

.wwt-full-bleed {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

.wwt-inner {
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
}


/* =========================================================
   5. BUTTONS
   ========================================================= */

.wwt-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 24px !important;
  background: var(--wwt-blue) !important;
  color: var(--wwt-white) !important;
  text-decoration: none !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  border: 2px solid var(--wwt-blue) !important;
  box-sizing: border-box !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
}

.wwt-btn:hover {
  background: var(--wwt-blue-bright) !important;
  border-color: var(--wwt-blue-bright) !important;
  color: var(--wwt-white) !important;
  transform: translateY(-1px);
}

.wwt-btn-dark {
  background: var(--wwt-charcoal) !important;
  border-color: var(--wwt-charcoal) !important;
  color: var(--wwt-white) !important;
}

.wwt-btn-dark:hover {
  background: #000000 !important;
  border-color: #000000 !important;
}


/* =========================================================
   6. HOMEPAGE HERO
   ========================================================= */

.wwt-hero {
  background:
    linear-gradient(
      90deg,
      rgba(16,19,23,1) 0%,
      rgba(16,19,23,0.95) 35%,
      rgba(16,19,23,0.75) 55%,
      rgba(16,19,23,0.55) 100%
    ),
    url('https://sep.turbifycdn.com/ty/cdn/yhst-5206232-1/wwt-home-hero-vehicles-v01.png')
    center right / cover no-repeat !important;

  color: var(--wwt-white) !important;
  padding: 86px 0 92px !important;
  position: relative !important;
  overflow: hidden !important;
}

.wwt-hero .wwt-inner {
  max-width: 1180px !important;
}

.wwt-hero h1 {
  max-width: 760px !important;
  margin: 0 0 22px !important;
  color: var(--wwt-white) !important;
  font-size: clamp(42px, 5vw, 76px) !important;
  line-height: 0.98 !important;
  letter-spacing: -1.5px !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
}

.wwt-hero p {
  max-width: 620px !important;
  margin: 0 0 30px !important;
  color: #EEF4FA !important;
  font-size: clamp(17px, 1.55vw, 21px) !important;
  line-height: 1.35 !important;
}

.wwt-hero p:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   7. HOMEPAGE SPLIT PATH SECTION
   ========================================================= */

.wwt-split-path {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  padding: 58px 0 64px !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

.wwt-path-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 245px !important;
  padding: 34px !important;
  background: var(--wwt-white) !important;
  border: 1px solid var(--wwt-border) !important;
  border-radius: var(--wwt-radius) !important;
  box-shadow: var(--wwt-shadow) !important;
  text-decoration: none !important;
  color: var(--wwt-text) !important;
  box-sizing: border-box !important;
  transition: all 0.18s ease !important;
}

.wwt-path-card:hover {
  transform: translateY(-3px);
  border-color: var(--wwt-blue) !important;
  color: var(--wwt-text) !important;
}

.wwt-path-card h2 {
  display: block !important;
  margin: 0 0 14px !important;
  color: var(--wwt-charcoal) !important;
  font-size: clamp(26px, 2.4vw, 34px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.5px !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
}

.wwt-path-card p {
  display: block !important;
  margin: 0 0 24px !important;
  color: var(--wwt-muted) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.wwt-path-card .wwt-btn {
  align-self: flex-start !important;
}


/* =========================================================
   8. SIMPLE TRUST STRIP
   ========================================================= */

.wwt-trust-strip {
  background: var(--wwt-light-gray) !important;
  padding: 34px 0 !important;
  text-align: center !important;
}

.wwt-trust-strip p {
  margin: 0 !important;
  color: var(--wwt-charcoal) !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}


/* =========================================================
   9. CATEGORY HERO SYSTEM
   ========================================================= */

.wwt-category-hero {
  background:
    radial-gradient(circle at 80% 30%, rgba(30,136,229,0.18), transparent 32%),
    linear-gradient(135deg, var(--wwt-charcoal), var(--wwt-charcoal-dark)) !important;
  color: var(--wwt-white) !important;
  padding: 62px 0 !important;
  box-sizing: border-box !important;
}

.wwt-category-hero h1 {
  margin: 0 0 12px !important;
  color: var(--wwt-white) !important;
  font-size: clamp(34px, 4vw, 58px) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
}

.wwt-category-hero p {
  max-width: 720px !important;
  margin: 0 !important;
  color: #DDE7F3 !important;
  font-size: 20px !important;
  line-height: 1.45 !important;
}


/* =========================================================
   10. PRODUCT GRID POLISH
   ========================================================= */

.fcol {
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: all 0.18s ease !important;
}

.fcol:hover {
  box-shadow: var(--wwt-shadow) !important;
  transform: translateY(-2px);
}

.finner a.fshop-now,
.finner input.fshop-now {
  background: var(--wwt-blue) !important;
  border-color: var(--wwt-blue) !important;
  color: var(--wwt-white) !important;
  border-radius: 999px !important;
}


/* =========================================================
   11. PRODUCT PAGE POLISH
   ========================================================= */

#itemPage h1,
.fitem-right h1 {
  color: var(--wwt-charcoal) !important;
  font-weight: 900 !important;
}

.fitem-right .price,
.sale-price,
.ys_saleprice {
  color: var(--wwt-blue) !important;
}

#itemPage select,
#itemPage input[type="text"],
#itemPage input[type="number"],
#itemPage textarea {
  border: 1px solid var(--wwt-border) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}


/* =========================================================
   12. HEADER / NAV LIGHT POLISH
   ========================================================= */

header {
  background: var(--wwt-charcoal) !important;
}

nav,
#nav,
.nav {
  background: var(--wwt-charcoal) !important;
}

nav a,
#nav a,
.nav a {
  color: var(--wwt-white) !important;
}

nav a:hover,
#nav a:hover,
.nav a:hover {
  color: var(--wwt-blue-bright) !important;
}


/* =========================================================
   13. FOOTER
   ========================================================= */

footer {
  background: var(--wwt-charcoal) !important;
  color: #D3D3D3 !important;
}

footer a {
  color: var(--wwt-blue-bright) !important;
}

footer a:hover {
  color: var(--wwt-white) !important;
}


/* =========================================================
   14. MOBILE
   ========================================================= */

.wwt-mobile-only {
  display: none !important;
}

@media screen and (max-width: 760px) {

  .wwt-desktop-only {
    display: none !important;
  }

  .wwt-mobile-only {
    display: block !important;
  }

  .wwt-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .wwt-hero {
    padding: 54px 0 58px !important;
  }

  .wwt-hero h1 {
    font-size: 40px !important;
    line-height: 1 !important;
    letter-spacing: -0.8px !important;
  }

  .wwt-hero p {
    font-size: 17px !important;
    line-height: 1.42 !important;
  }

  .wwt-hero p:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .wwt-hero .wwt-btn {
    width: 100% !important;
  }

  .wwt-split-path {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 34px 0 42px !important;
  }

  .wwt-path-card {
    min-height: auto !important;
    padding: 28px !important;
  }

  .wwt-path-card h2 {
    font-size: 28px !important;
  }

  .wwt-path-card p {
    font-size: 15px !important;
  }

  .wwt-path-card .wwt-btn {
    width: 100% !important;
  }

  .wwt-trust-strip {
    padding: 26px 0 !important;
  }

  .wwt-trust-strip p {
    font-size: 16px !important;
  }
}


/* =========================================================
   15. SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 420px) {

  .wwt-hero h1 {
    font-size: 34px !important;
  }

  .wwt-path-card h2 {
    font-size: 24px !important;
  }

}


/* =========================================================
   16. PATCHES
   ========================================================= */

.wwt-home-path-wrap {
  background: #FFFFFF !important;
}

.wwt-split-path br {
  display: none !important;
}