/* =========================================================
   WholesaleWindowTint.com Theme CSS v13
   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;
  box-sizing: border-box !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,
.wwt-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 0 !important;
}


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

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

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

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

.wwt-path-card {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 280px !important;
  padding: 34px !important;
  color: var(--wwt-white) !important;
  border: 1px solid rgba(41,182,246,0.28) !important;
  border-radius: var(--wwt-radius) !important;
  box-shadow: var(--wwt-shadow) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.18s ease !important;
  background-color: var(--wwt-charcoal) !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
}

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

.wwt-path-card:before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 7px !important;
  height: 100% !important;
  background: var(--wwt-blue) !important;
  z-index: 1 !important;
}

.wwt-path-card h2 {
  display: block !important;
  max-width: 420px !important;
  margin: 0 0 14px !important;
  color: var(--wwt-white) !important;
  font-size: clamp(28px, 2.4vw, 36px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.6px !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  position: relative !important;
  z-index: 2 !important;
}

.wwt-path-card p {
  display: block !important;
  max-width: 380px !important;
  margin: 0 0 24px !important;
  color: #d7e2ee !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  position: relative !important;
  z-index: 2 !important;
}

.wwt-path-card .wwt-btn {
  align-self: flex-start !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Precut tint category tile */
.wwt-path-card:first-child {
  background-image:
    linear-gradient(
      90deg,
      rgba(8,11,15,0.96) 0%,
      rgba(8,11,15,0.90) 36%,
      rgba(8,11,15,0.66) 58%,
      rgba(8,11,15,0.34) 100%
    ),
    url('https://sep.turbifycdn.com/ty/cdn/yhst-5206232-1/wwt-card-precut-v01.png') !important;
}

/* Window tint rolls category tile */
.wwt-path-card:nth-child(2) {
  background-image:
    linear-gradient(
      90deg,
      rgba(8,11,15,0.96) 0%,
      rgba(8,11,15,0.88) 36%,
      rgba(8,11,15,0.62) 58%,
      rgba(8,11,15,0.30) 100%
    ),
    url('https://sep.turbifycdn.com/ty/cdn/yhst-5206232-1/wwt-card-rolls-v01.png') !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;
    background-position: center right !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,
  .wwt-hero-actions {
    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: 255px !important;
    padding: 28px !important;
    background-position: center right !important;
  }

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

  .wwt-path-card p {
    font-size: 15px !important;
    max-width: 300px !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 {
    min-height: 240px !important;
  }

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

}

/* =========================================================
   16. REUSABLE CATEGORY PAGE SYSTEM
   Full-width hero + custom category landing pages
   ========================================================= */

.wwt-cat-page {
  background: #ffffff !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Full-width category hero, same full-bleed behavior as homepage */
.wwt-cat-hero {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  color: var(--wwt-white) !important;
  padding: 72px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(
      90deg,
      rgba(16,19,23,1) 0%,
      rgba(16,19,23,0.95) 36%,
      rgba(16,19,23,0.76) 58%,
      rgba(16,19,23,0.48) 100%
    ),
    url('https://sep.turbifycdn.com/ty/cdn/yhst-5206232-1/wwt-card-rolls-v01.png')
    center right / cover no-repeat !important;
}

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

.wwt-cat-hero-content {
  max-width: 650px !important;
}

.wwt-eyebrow {
  margin: 0 0 12px !important;
  color: var(--wwt-blue-bright) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
}

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

.wwt-cat-hero p {
  max-width: 560px !important;
  margin: 0 0 28px !important;
  color: #E6EEF7 !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
}

.wwt-cat-section {
  padding: 58px 0 64px !important;
}

.wwt-section-heading {
  max-width: 760px !important;
  margin: 0 auto 34px !important;
  text-align: center !important;
}

.wwt-section-heading h2,
.wwt-benefit-band h2,
.wwt-faq-section h2 {
  margin: 0 0 12px !important;
  color: var(--wwt-charcoal) !important;
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.wwt-section-heading p {
  margin: 0 !important;
  color: var(--wwt-muted) !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
}

.wwt-category-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.wwt-category-card {
  min-height: 330px !important;
  padding: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  color: var(--wwt-white) !important;
  text-decoration: none !important;
  border-radius: var(--wwt-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--wwt-shadow) !important;
  border: 1px solid rgba(41,182,246,0.28) !important;
  background-size: cover !important;
  background-position: center !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
}

.wwt-category-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--wwt-blue-bright) !important;
  color: var(--wwt-white) !important;
}

.wwt-category-card h3 {
  margin: 0 0 14px !important;
  color: var(--wwt-white) !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.wwt-category-card p {
  margin: 0 !important;
  color: #DDE7F3 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

.wwt-category-card span {
  display: inline-flex !important;
  align-self: flex-start !important;
  padding: 13px 20px !important;
  background: var(--wwt-blue) !important;
  color: var(--wwt-white) !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.wwt-card-auto {
  background:
    linear-gradient(180deg, rgba(8,11,15,0.88), rgba(8,11,15,0.80)),
    url('https://sep.turbifycdn.com/ty/cdn/yhst-5206232-1/wwt-card-rolls-v01.png')
    center / cover no-repeat !important;
}

.wwt-card-res {
  background:
    linear-gradient(180deg, rgba(8,11,15,0.88), rgba(8,11,15,0.80)),
    linear-gradient(135deg, #1A1D21, #26394A) !important;
}

.wwt-card-decor {
  background:
    linear-gradient(180deg, rgba(8,11,15,0.88), rgba(8,11,15,0.80)),
    linear-gradient(135deg, #101317, #1E88E5) !important;
}

.wwt-benefit-band {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: var(--wwt-light-gray) !important;
  padding: 58px 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.wwt-benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin-top: 30px !important;
}

.wwt-benefit-grid div {
  background: var(--wwt-white) !important;
  padding: 24px !important;
  border-radius: var(--wwt-radius) !important;
  border: 1px solid var(--wwt-border) !important;
  box-sizing: border-box !important;
}

.wwt-benefit-grid strong {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--wwt-charcoal) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.wwt-benefit-grid p {
  margin: 0 !important;
  color: var(--wwt-muted) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.wwt-faq-section {
  padding: 58px 0 70px !important;
}

.wwt-faq-item {
  max-width: 900px !important;
  margin: 0 auto 16px !important;
  padding: 24px !important;
  border: 1px solid var(--wwt-border) !important;
  border-radius: var(--wwt-radius) !important;
  background: var(--wwt-white) !important;
  box-sizing: border-box !important;
}

.wwt-faq-item h3 {
  margin: 0 0 8px !important;
  color: var(--wwt-charcoal) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

.wwt-faq-item p {
  margin: 0 !important;
  color: var(--wwt-muted) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Hide Turbify's automatically generated child-category link rows on pages using the custom WWT category layout. */
.wwt-cat-page ~ table,
.wwt-cat-page ~ center,
.wwt-cat-page ~ .fsubsections,
.wwt-cat-page ~ .fsection-contents,
.wwt-cat-page ~ .fcategory,
.wwt-cat-page ~ .contents,
.wwt-cat-page ~ .category-links,
.wwt-cat-page ~ .fcat-links {
  display: none !important;
}

/* Turbify often outputs child-category links before the caption. Hide the common wrappers without touching the main navigation. */
body:has(.wwt-cat-page) .fsubsections,
body:has(.wwt-cat-page) .fsection-contents,
body:has(.wwt-cat-page) .fcategory,
body:has(.wwt-cat-page) .category-links,
body:has(.wwt-cat-page) .fcat-links {
  display: none !important;
}

@media screen and (max-width: 900px) {
  .wwt-category-card-grid,
  .wwt-benefit-grid {
    grid-template-columns: 1fr !important;
  }

  .wwt-category-card {
    min-height: 280px !important;
  }
}

@media screen and (max-width: 760px) {
  .wwt-cat-hero {
    padding: 52px 0 !important;
    background-position: center right !important;
  }

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

  .wwt-cat-hero p {
    font-size: 17px !important;
  }

  .wwt-cat-section,
  .wwt-benefit-band,
  .wwt-faq-section {
    padding: 42px 0 !important;
  }
}

/* =========================================================
   17. WWT CATEGORY PAGE TURBIFY OVERRIDES
   Precise fixes for Turbify-generated category wrappers
   ========================================================= */

/* On custom WWT category pages, let the main page area go full width.
   This allows the custom hero and benefit band to behave like the homepage. */
body:has(.wwt-cat-page) main > .inner {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Keep breadcrumbs readable and aligned, but remove the awkward boxed-in layout. */
body:has(.wwt-cat-page) main > .inner > .breadcrumbs {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

body:has(.wwt-cat-page) main > .inner > .breadcrumbs > div {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 10px 28px !important;
  box-sizing: border-box !important;
}

/* The custom page is inside Turbify's section wrapper. Make that wrapper full width. */
body:has(.wwt-cat-page) .section-wrap,
body:has(.wwt-cat-page) .fsection-caption {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Hide Turbify's automatic child-category button row.
   Source structure:
   .section-wrap > .fcontainer > .frow > .fcol...
   This keeps the child categories in the menu tree, but hides the default on-page links. */
body:has(.wwt-cat-page) .section-wrap > .fcontainer {
  display: none !important;
}

/* Also hide the promo/category placeholder above the default section links if it creates spacing. */
body:has(.wwt-cat-page) .section-wrap > #ys_promocategory,
body:has(.wwt-cat-page) .section-wrap > .ys_promocategory {
  display: none !important;
}

/* Make sure the custom category hero remains full width after the wrapper changes. */
body:has(.wwt-cat-page) .wwt-cat-hero,
body:has(.wwt-cat-page) .wwt-benefit-band {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Prevent accidental horizontal scroll from full-bleed sections. */
body:has(.wwt-cat-page) {
  overflow-x: hidden !important;
}


/* =========================================================
   18. BREADCRUMB FINAL CLEANUP
   Fix breadcrumb link visibility and reduce white band height
   ========================================================= */

/* Make the breadcrumb band clean and compact on custom WWT category pages. */
body:has(.wwt-cat-page) main > .inner > .breadcrumbs {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}

/* Keep breadcrumb content aligned with the site content width. */
body:has(.wwt-cat-page) main > .inner > .breadcrumbs > div {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 8px 28px !important;
  color: var(--wwt-muted) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

/* Force breadcrumb text and links to stay visible on the white background. */
body:has(.wwt-cat-page) .breadcrumbs,
body:has(.wwt-cat-page) .breadcrumbs div {
  color: var(--wwt-muted) !important;
}

body:has(.wwt-cat-page) .breadcrumbs a,
body:has(.wwt-cat-page) .breadcrumbs a:link,
body:has(.wwt-cat-page) .breadcrumbs a:visited {
  color: var(--wwt-charcoal) !important;
  text-decoration: underline !important;
}

body:has(.wwt-cat-page) .breadcrumbs a:hover,
body:has(.wwt-cat-page) .breadcrumbs a:focus {
  color: var(--wwt-blue) !important;
}

/* Slightly reduce the visual gap between breadcrumbs and the custom hero. */
body:has(.wwt-cat-page) .fsection-caption {
  margin-top: 0 !important;
  padding-top: 0 !important;
}