/* SPORTFIT.ES CUSTOM CSS - NIKE-INSPIRED SPORTS STYLE */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  --sf-black: #000000;
  --sf-white: #ffffff;
  --sf-offwhite: #f5f5f5;
  --sf-light: #eeeeee;
  --sf-mid: #767676;
  --sf-dark: #111111;
  --sf-charcoal: #1f1f1f;
  --sf-border: #d8d8d8;
  --sf-red: #e60023;
  --sf-green: #3aa655;
  --sf-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
  --sf-transition: all 0.25s ease;
}

/* BASE */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sf-white);
  color: var(--sf-black);
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  background: var(--sf-white);
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none !important;
  transition: var(--sf-transition);
}

a:hover,
a:focus {
  color: var(--sf-mid);
  text-decoration: none !important;
}

img {
  max-width: 100%;
}

/* NAVBAR */

.site-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 9999;
}

.site-header nav {
  min-height: 76px;
  align-items: center !important;
}

.site-header .logo,
.logo {
  width: auto;
  max-width: 170px;
  max-height: 48px;
  object-fit: contain;
  display: block;
}

.site-header a.py-2 {
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

.site-header a.py-2:hover {
  color: var(--sf-mid) !important;
}

.site-header .s-icons,
.site-header .social-icons-simple {
  margin: 0;
}

/* HERO / H1 HEADER */

.page-header {
  position: relative;
  min-height: 74vh;
  padding: 110px 20px 92px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.42)),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.18), transparent 32%),
    linear-gradient(135deg, #101010 0%, #1f1f1f 46%, #000000 100%);
  color: var(--sf-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.page-header::before {
  content: "SPORTFIT";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -56%);
  color: rgba(255, 255, 255, 0.045);
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  font-size: clamp(5rem, 16vw, 18rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.page-header::after {
  content: "";
  position: absolute;
  bottom: 42px;
  left: 50%;
  width: 72px;
  height: 4px;
  background: var(--sf-white);
  border-radius: 99px;
  transform: translateX(-50%);
}

.page-header-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1100px);
  margin: 0 auto;
}

.page-header h1 {
  margin: 0 auto 28px !important;
  color: var(--sf-white) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(3.8rem, 9vw, 9.8rem) !important;
  font-weight: 900 !important;
  line-height: 0.82 !important;
  letter-spacing: -0.075em !important;
  text-transform: uppercase;
}

.page-header p {
  max-width: 780px;
  margin: 0 auto !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: -0.01em;
}

/* GENERAL SECTIONS */

.section,
.ComparisonTable,
.Interlinking {
  background: var(--sf-white);
}

.ComparisonTable.section {
  min-height: 0;
  padding: 0;
}

.Interlinking.section {
  padding: 70px 24px;
  background: var(--sf-offwhite);
  color: var(--sf-mid);
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

/* PRODUCT CONTAINER */

.container-fluid {
  width: 100%;
  max-width: 1760px;
  padding-left: clamp(18px, 4vw, 72px) !important;
  padding-right: clamp(18px, 4vw, 72px) !important;
  margin-left: auto;
  margin-right: auto;
  background: var(--sf-white);
}

.amz-link {
  display: block;
  color: var(--sf-black) !important;
  text-decoration: none !important;
}

.amz-link:hover,
.amz-link:focus {
  color: var(--sf-black) !important;
  text-decoration: none !important;
}

/* PRODUCT ROWS */

.amz-link > .row,
.container-fluid > a > .row {
  position: relative;
  margin: 0 auto !important;
  padding-top: clamp(60px, 8vw, 120px) !important;
  padding-bottom: clamp(60px, 8vw, 120px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-bottom: 1px solid var(--sf-border);
  align-items: center !important;
}

.amz-link > .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(18px, 3vw, 48px);
  width: 48px;
  height: 4px;
  background: var(--sf-black);
  border-radius: 99px;
}

.amz-link:nth-of-type(even) > .row {
  background: var(--sf-offwhite);
}

.amz-link:nth-of-type(even) > .row .col-lg-6:first-child {
  order: 2;
}

.amz-link:nth-of-type(even) > .row .col-lg-6:last-child {
  order: 1;
}

.col-lg-6 {
  padding-left: clamp(18px, 3vw, 56px) !important;
  padding-right: clamp(18px, 3vw, 56px) !important;
}

/* PRODUCT IMAGES */

.custom-image-container {
  width: 100% !important;
  height: clamp(430px, 54vw, 760px) !important;
  max-height: 780px;
  object-fit: contain !important;
  object-position: center center !important;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0%, #f7f7f7 46%, #e9e9e9 100%);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(20px, 4vw, 58px) !important;
  transition: var(--sf-transition);
}

.custom-image,
img.custom-image {
  display: block !important;
  width: 100% !important;
  height: clamp(430px, 54vw, 760px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.amz-link:hover .custom-image-container,
.amz-link:hover img.custom-image {
  transform: scale(1.015);
}

/* PRODUCT TEXT */

.sub-heading {
  margin: 0 0 18px !important;
  color: var(--sf-mid) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(0.82rem, 1vw, 0.98rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
  text-transform: uppercase;
}

.font-custom,
.product-name {
  margin: 0 0 18px !important;
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(3rem, 6vw, 7rem) !important;
  font-weight: 900 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.075em !important;
  text-transform: uppercase;
}

.additional-h2 {
  margin: 0 0 28px !important;
  padding-bottom: 28px !important;
  color: var(--sf-black) !important;
  border-bottom: 1px solid var(--sf-border);
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(1.1rem, 1.65vw, 1.7rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase;
}

.heading,
.h2main,
.fw200 {
  max-width: 740px;
  margin-left: 0 !important;
  margin-right: auto !important;
  color: var(--sf-charcoal) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: clamp(0.96rem, 1.05vw, 1.08rem) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  letter-spacing: -0.01em !important;
}

.h2main + .h2main {
  margin-top: 18px !important;
}

/* AMAZON BUTTON */

.amz-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 230px;
  padding: 17px 34px !important;
  background: var(--sf-black) !important;
  color: var(--sf-white) !important;
  border: 2px solid var(--sf-black) !important;
  border-radius: 999px !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  transition: var(--sf-transition);
}

.amz-button::after {
  content: "→";
  margin-left: 12px;
  font-size: 18px;
  line-height: 1;
  transition: var(--sf-transition);
}

.amz-link:hover .amz-button,
.amz-button:hover {
  background: var(--sf-charcoal) !important;
  color: var(--sf-white) !important;
  border-color: var(--sf-charcoal) !important;
  transform: translateY(-2px);
}

.amz-link:hover .amz-button::after,
.amz-button:hover::after {
  transform: translateX(4px);
}

/* FAQ SECTION */

.faq-section {
  padding: clamp(76px, 10vw, 150px) clamp(20px, 6vw, 96px) !important;
  background: var(--sf-offwhite) !important;
  color: var(--sf-black) !important;
}

.faq-section h2 {
  max-width: 1050px;
  margin: 0 auto 58px !important;
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(3rem, 7vw, 8rem) !important;
  font-weight: 900 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.075em !important;
  text-align: center;
  text-transform: uppercase;
}

.faq-item {
  max-width: 980px;
  margin: 0 auto !important;
  padding: 30px 0 !important;
  border-top: 1px solid var(--sf-border);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--sf-border);
}

.faq-item h3 {
  margin: 0 0 12px !important;
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(1.55rem, 3vw, 3.4rem) !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.06em !important;
  text-transform: uppercase;
}

.faq-item p {
  max-width: 820px;
  margin: 0 !important;
  color: var(--sf-charcoal) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

/* FOOTER */

.footer {
  background: var(--sf-black) !important;
  color: var(--sf-white) !important;
  padding: clamp(70px, 8vw, 118px) 0 36px !important;
}

.footer .container {
  max-width: 1320px;
}

.footer-container {
  align-items: flex-start;
}

.footer h4,
.footer .high-lighted-heading {
  margin-bottom: 22px !important;
  color: var(--sf-white) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase;
}

.footer p,
.footer li,
.footer a {
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

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

.footer ul {
  padding-left: 0;
  list-style: none;
}

.f-sec1,
.f-sec2,
.f-sec3 {
  margin-bottom: 38px;
}

.foot-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.foot-tag-list span {
  display: inline-flex;
  padding: 9px 14px;
  color: var(--sf-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.footer_notes {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.whitecolor,
.footer_notes p {
  color: rgba(255, 255, 255, 0.58) !important;
}

.web-link {
  color: var(--sf-white) !important;
  font-weight: 700 !important;
}

/* SOCIAL ICONS */

.s-icons {
  margin-top: 12px;
}

.social-icons-simple {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: inherit;
  padding: 0;
  margin: 0;
  list-style: none;
}

.social-icons-simple li {
  display: inline-flex;
}

.social-icons-simple a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--sf-white) !important;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transition: var(--sf-transition);
}

.social-icons-simple a:hover {
  color: var(--sf-black) !important;
  background: var(--sf-white);
  border-color: var(--sf-white);
}

.site-header .social-icons-simple a {
  color: var(--sf-black) !important;
  border-color: rgba(0, 0, 0, 0.22);
}

.site-header .social-icons-simple a:hover {
  color: var(--sf-white) !important;
  background: var(--sf-black);
  border-color: var(--sf-black);
}

/* UTILITY OVERRIDES */

.hidden-xs {
  display: block;
}

.pb-1 {
  padding-bottom: 0.45rem !important;
}

.pb-4 {
  padding-bottom: 1.75rem !important;
}

.pt-4 {
  padding-top: 2rem !important;
}

.pt-5 {
  padding-top: clamp(60px, 8vw, 120px) !important;
}

.px-3 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.m-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.row {
  --bs-gutter-x: 0;
}

/* FIX COMMON GENERATED PAGE ISSUES */

body > main:first-of-type {
  display: block;
}

body {
  word-break: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  word-break: normal;
}

/* RESPONSIVE */

@media (max-width: 991.98px) {
  .site-header nav {
    min-height: 68px;
  }

  .site-header .logo,
  .logo {
    max-width: 150px;
    max-height: 44px;
  }

  .page-header {
    min-height: 62vh;
    padding: 92px 20px 76px;
  }

  .page-header h1 {
    font-size: clamp(3.2rem, 13vw, 6.6rem) !important;
  }

  .amz-link:nth-of-type(even) > .row .col-lg-6:first-child,
  .amz-link:nth-of-type(even) > .row .col-lg-6:last-child {
    order: initial;
  }

  .amz-link > .row,
  .container-fluid > a > .row {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .custom-image-container,
  .custom-image,
  img.custom-image {
    height: 520px !important;
  }

  .product-name,
  .font-custom {
    margin-top: 34px !important;
  }

  .heading,
  .h2main,
  .fw200 {
    max-width: 100%;
  }

  .faq-section {
    padding: 84px 24px !important;
  }

  .footer {
    padding-top: 74px !important;
  }
}

@media (max-width: 767.98px) {
  body {
    font-size: 15px;
  }

  .site-header nav {
    min-height: 62px;
  }

  .site-header .logo,
  .logo {
    max-width: 132px;
  }

  .page-header {
    min-height: auto;
    padding: 78px 18px 66px;
  }

  .page-header::before {
    display: none;
  }

  .page-header h1 {
    font-size: clamp(3rem, 15vw, 4.8rem) !important;
    line-height: 0.86 !important;
  }

  .page-header p {
    font-size: 0.94rem !important;
    line-height: 1.62 !important;
  }

  .container-fluid {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .col-lg-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .custom-image-container,
  .custom-image,
  img.custom-image {
    height: 430px !important;
    padding: 22px !important;
  }

  .sub-heading {
    margin-top: 34px !important;
    font-size: 0.78rem !important;
  }

  .product-name,
  .font-custom {
    font-size: clamp(2.7rem, 14vw, 4.8rem) !important;
  }

  .additional-h2 {
    font-size: 1.15rem !important;
  }

  .heading,
  .h2main,
  .fw200 {
    font-size: 0.94rem !important;
    line-height: 1.68 !important;
  }

  .amz-button {
    width: 100%;
    min-width: 0;
    padding: 16px 20px !important;
  }

  .faq-section h2 {
    text-align: left;
    font-size: clamp(2.7rem, 14vw, 5rem) !important;
  }

  .faq-item {
    padding: 28px 0 !important;
  }

  .faq-item h3 {
    font-size: clamp(1.8rem, 9vw, 3rem) !important;
  }

  .footer,
  .footer h4,
  .footer p,
  .footer a,
  .footer li {
    text-align: center !important;
  }

  .social-icons-simple,
  .foot-tag-list {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .custom-image-container,
  .custom-image,
  img.custom-image {
    height: 350px !important;
  }

  .page-header {
    padding-top: 70px;
  }

  .amz-link > .row,
  .container-fluid > a > .row {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .amz-link > .row::before {
    width: 38px;
  }
}

/* ======================================================================
   SPORTIF-Y ENHANCED OVERRIDES
   Applied for generated product pages using:
   .site-nav / .site-logo / .site-nav-links / .seo-interlinks
   ====================================================================== */

/* REAL GENERATED NAVBAR STRUCTURE */
.site-header {
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 9999 !important;
}

.site-nav {
  width: min(100%, 1720px) !important;
  min-height: 66px !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px, 3vw, 48px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(18px, 3vw, 48px) !important;
}

.site-logo {
  flex: 0 0 auto !important;
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.site-logo::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  background: var(--sf-red);
  border-radius: 999px;
  transform: translateY(-2px);
}

.site-logo:hover,
.site-logo:focus {
  color: var(--sf-black) !important;
}

.site-nav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(16px, 2vw, 34px) !important;
  min-width: 0 !important;
}

.site-nav-links a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 66px !important;
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.015em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  opacity: 0.92 !important;
}

.site-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 17px;
  height: 2px;
  background: var(--sf-black);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.22s ease;
}

.site-nav-links a:hover,
.site-nav-links a:focus {
  color: var(--sf-black) !important;
  opacity: 1 !important;
}

.site-nav-links a:hover::after,
.site-nav-links a:focus::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* HERO: SMALLER, WIDER, CLEANER */
.page-header {
  min-height: 58vh !important;
  padding: 86px clamp(16px, 3vw, 44px) 70px !important;
}

.page-header::before {
  content: "SPORTIF-Y" !important;
  top: 50% !important;
  font-size: clamp(4rem, 14vw, 16rem) !important;
  letter-spacing: -0.09em !important;
}

.page-header::after {
  bottom: 32px !important;
  width: 62px !important;
  height: 3px !important;
}

.page-header-inner {
  width: min(100%, 1320px) !important;
  max-width: 1320px !important;
}

.page-header h1 {
  max-width: 1260px !important;
  margin: 0 auto 20px !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(2.55rem, 5.25vw, 5.9rem) !important;
  font-weight: 900 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.072em !important;
  text-transform: uppercase !important;
}

.page-header p {
  max-width: 1120px !important;
  margin: 0 auto !important;
  font-size: clamp(0.94rem, 1.05vw, 1.08rem) !important;
  line-height: 1.54 !important;
  letter-spacing: -0.012em !important;
}

/* FIRST SEO INTERLINKING SECTION */
.seo-interlinks {
  padding: clamp(46px, 6vw, 78px) clamp(16px, 4vw, 56px) !important;
  background: var(--sf-white) !important;
  border-bottom: 1px solid var(--sf-border) !important;
  text-align: center !important;
}

.seo-interlinks h2 {
  max-width: 980px !important;
  margin: 0 auto 14px !important;
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(2rem, 4.2vw, 4.8rem) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.07em !important;
  text-transform: uppercase !important;
}

.seo-interlinks > p {
  max-width: 760px !important;
  margin: 0 auto 34px !important;
  color: var(--sf-charcoal) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  letter-spacing: -0.01em !important;
}

.seo-interlink-grid {
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.seo-interlink-card {
  min-height: 128px !important;
  padding: 20px 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  background: var(--sf-offwhite) !important;
  color: var(--sf-black) !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: 0 !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: var(--sf-transition) !important;
}

.seo-interlink-card::before {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--sf-black);
  border-radius: 99px;
  transition: var(--sf-transition);
}

.seo-interlink-card span {
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  text-transform: uppercase !important;
}

.seo-interlink-card small {
  margin-top: 12px !important;
  color: var(--sf-mid) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

.seo-interlink-card:hover,
.seo-interlink-card:focus {
  background: var(--sf-black) !important;
  color: var(--sf-white) !important;
  border-color: var(--sf-black) !important;
  transform: translateY(-3px) !important;
}

.seo-interlink-card:hover::before,
.seo-interlink-card:focus::before {
  background: var(--sf-red) !important;
}

.seo-interlink-card:hover span,
.seo-interlink-card:focus span {
  color: var(--sf-white) !important;
}

.seo-interlink-card:hover small,
.seo-interlink-card:focus small {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* PRODUCT SECTION: LESS LATERAL PADDING, SMALLER TEXT */
.container-fluid {
  max-width: 100% !important;
  padding-left: clamp(12px, 2.2vw, 34px) !important;
  padding-right: clamp(12px, 2.2vw, 34px) !important;
}

.amz-link > .row,
.container-fluid > a > .row {
  max-width: 1640px !important;
  padding-top: clamp(44px, 5.8vw, 82px) !important;
  padding-bottom: clamp(44px, 5.8vw, 82px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.col-lg-6 {
  padding-left: clamp(8px, 2vw, 34px) !important;
  padding-right: clamp(8px, 2vw, 34px) !important;
}

.custom-image-container,
.custom-image,
img.custom-image,
img.custom-image-container {
  height: clamp(360px, 43vw, 640px) !important;
  max-height: 660px !important;
  padding: clamp(16px, 3vw, 42px) !important;
}

.sub-heading {
  margin-bottom: 12px !important;
  font-size: clamp(0.72rem, 0.82vw, 0.86rem) !important;
  line-height: 1.28 !important;
  letter-spacing: -0.012em !important;
}

.font-custom,
.product-name {
  margin: 0 0 12px !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(2.05rem, 3.75vw, 4.6rem) !important;
  font-weight: 900 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.068em !important;
  text-transform: uppercase !important;
}

.additional-h2 {
  margin: 0 0 20px !important;
  padding-bottom: 18px !important;
  font-size: clamp(0.98rem, 1.24vw, 1.38rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}

.heading,
.h2main,
.fw200 {
  max-width: 860px !important;
  font-size: clamp(0.86rem, 0.92vw, 0.98rem) !important;
  line-height: 1.58 !important;
  letter-spacing: -0.006em !important;
}

.h2main + .h2main {
  margin-top: 10px !important;
}

.pt-5 {
  padding-top: clamp(44px, 5.8vw, 82px) !important;
}

.pb-1 {
  padding-bottom: 0.28rem !important;
}

.pb-4 {
  padding-bottom: 1.12rem !important;
}

.pt-4 {
  padding-top: 1.35rem !important;
}

/* CTA BUTTON: SAME FAMILY AS H1 / PRODUCT TITLES */
.amz-button {
  min-width: 210px !important;
  padding: 14px 28px !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  text-transform: uppercase !important;
}

.amz-button::after {
  margin-left: 10px !important;
  font-size: 16px !important;
}

/* SECOND RELATED GUIDES SECTION: KEEP CONSISTENT */
.Interlinking.section,
section[class*="Interlinking"] {
  padding: clamp(52px, 7vw, 86px) clamp(16px, 4vw, 56px) !important;
  background: var(--sf-offwhite) !important;
  color: var(--sf-black) !important;
  text-align: center !important;
}

section[class*="Interlinking"] h2 {
  max-width: 940px !important;
  margin: 0 auto 14px !important;
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(2rem, 4vw, 4.4rem) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.07em !important;
  text-transform: uppercase !important;
}

section[class*="Interlinking"] p {
  max-width: 760px !important;
  margin: 0 auto 30px !important;
  color: var(--sf-charcoal) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 0.94rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

.related-guides-grid {
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.related-guide-card {
  min-height: 92px !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: var(--sf-white) !important;
  color: var(--sf-black) !important;
  border: 1px solid var(--sf-border) !important;
  text-align: left !important;
  transition: var(--sf-transition) !important;
}

.related-guide-card span {
  color: inherit !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
}

.related-guide-card:hover,
.related-guide-card:focus {
  background: var(--sf-black) !important;
  color: var(--sf-white) !important;
  border-color: var(--sf-black) !important;
  transform: translateY(-3px) !important;
}

/* FAQ: REDUCE EXTREME HEADINGS SLIGHTLY */
.faq-section h2 {
  font-size: clamp(2.6rem, 5.6vw, 6.4rem) !important;
}

.faq-item h3 {
  font-size: clamp(1.32rem, 2.1vw, 2.35rem) !important;
  line-height: 1.02 !important;
}

.faq-item p {
  font-size: 0.96rem !important;
  line-height: 1.6 !important;
}

/* RESPONSIVE ENHANCEMENTS */
@media (max-width: 1199.98px) {
  .seo-interlink-grid,
  .related-guides-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 991.98px) {
  .site-nav {
    min-height: auto !important;
    padding: 14px 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .site-nav-links {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    padding-bottom: 4px !important;
  }

  .site-nav-links a {
    min-height: 32px !important;
    font-size: 0.74rem !important;
  }

  .site-nav-links a::after {
    bottom: 2px !important;
  }

  .page-header {
    min-height: auto !important;
    padding: 74px 18px 58px !important;
  }

  .page-header h1 {
    font-size: clamp(2.45rem, 9.6vw, 5.2rem) !important;
  }

  .page-header p {
    max-width: 920px !important;
    font-size: 0.96rem !important;
  }

  .amz-link:nth-of-type(even) > .row .col-lg-6:first-child,
  .amz-link:nth-of-type(even) > .row .col-lg-6:last-child {
    order: initial !important;
  }

  .product-name,
  .font-custom {
    margin-top: 28px !important;
    font-size: clamp(2.2rem, 8.6vw, 4.3rem) !important;
  }

  .custom-image-container,
  .custom-image,
  img.custom-image,
  img.custom-image-container {
    height: 470px !important;
  }
}

@media (max-width: 767.98px) {
  .page-header h1 {
    font-size: clamp(2.2rem, 11.8vw, 4rem) !important;
    line-height: 0.92 !important;
  }

  .page-header p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  .seo-interlinks h2,
  section[class*="Interlinking"] h2 {
    font-size: clamp(1.9rem, 10vw, 3.4rem) !important;
    text-align: left !important;
  }

  .seo-interlinks > p,
  section[class*="Interlinking"] p {
    text-align: left !important;
  }

  .seo-interlink-grid,
  .related-guides-grid {
    grid-template-columns: 1fr !important;
  }

  .seo-interlink-card,
  .related-guide-card {
    min-height: 96px !important;
  }

  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .amz-link > .row,
  .container-fluid > a > .row {
    padding-top: 44px !important;
    padding-bottom: 46px !important;
  }

  .product-name,
  .font-custom {
    font-size: clamp(2rem, 11vw, 3.6rem) !important;
    line-height: 0.94 !important;
  }

  .additional-h2 {
    font-size: 1rem !important;
  }

  .heading,
  .h2main,
  .fw200 {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  .custom-image-container,
  .custom-image,
  img.custom-image,
  img.custom-image-container {
    height: 360px !important;
    padding: 18px !important;
  }

  .amz-button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 18px !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 480px) {
  .site-logo {
    font-size: 1.08rem !important;
  }

  .page-header {
    padding-top: 58px !important;
  }

  .page-header h1 {
    font-size: clamp(2rem, 12.5vw, 3.45rem) !important;
  }

  .custom-image-container,
  .custom-image,
  img.custom-image,
  img.custom-image-container {
    height: 300px !important;
  }
}

/* =========================================================
   SPORTIF-Y FINAL OVERRIDE: WIDER ROW + CONTROLLED IMAGE SIZE
   Paste at the very end of the CSS
   ========================================================= */

/* Keep the layout wide, but not full-bleed ugly */
.container-fluid,
.ComparisonTable .container-fluid,
.ComparisonTable.section .container-fluid {
  width: 100% !important;
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(14px, 2vw, 28px) !important;
  padding-right: clamp(14px, 2vw, 28px) !important;
}

/* Product row: wider than before, controlled, centered */
.amz-link > .row,
.container-fluid > a > .row,
.ComparisonTable a > .row {
  width: 100% !important;
  max-width: 1480px !important;
  min-height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(44px, 5vw, 72px) !important;
  padding-bottom: clamp(44px, 5vw, 72px) !important;
  padding-left: clamp(10px, 1.5vw, 24px) !important;
  padding-right: clamp(10px, 1.5vw, 24px) !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Product columns: text slightly bigger, image controlled */
@media (min-width: 992px) {
  .amz-link > .row,
  .container-fluid > a > .row,
  .ComparisonTable a > .row {
    display: flex !important;
    align-items: center !important;
  }

  .amz-link > .row > .col-lg-6:first-child,
  .container-fluid > a > .row > .col-lg-6:first-child,
  .ComparisonTable a > .row > .col-lg-6:first-child {
    flex: 0 0 56% !important;
    max-width: 56% !important;
  }

  .amz-link > .row > .col-lg-6:last-child,
  .container-fluid > a > .row > .col-lg-6:last-child,
  .ComparisonTable a > .row > .col-lg-6:last-child {
    flex: 0 0 44% !important;
    max-width: 44% !important;
  }
}

/* Image box: smaller than previous bad version, still large enough */
.custom-image-container,
.custom-image,
img.custom-image,
img.custom-image-container {
  width: 100% !important;
  height: clamp(500px, 44vw, 680px) !important;
  min-height: 500px !important;
  max-height: 680px !important;
  padding: clamp(8px, 1.2vw, 18px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #ffffff !important;
  transform: none !important;
}

.custom-image-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Remove previous zooms/transforms */
.custom-image-container img,
img.custom-image {
  width: 100% !important;
  height: 100% !important;
  max-height: 680px !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Text should not get cut or squeezed */
.heading,
.h2main,
.fw200 {
  max-width: 860px !important;
}

/* Avoid title overflow inside the row */
.font-custom,
.product-name {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Mobile: clean stacked layout */
@media (max-width: 991.98px) {
  .amz-link > .row > .col-lg-6,
  .container-fluid > a > .row > .col-lg-6,
  .ComparisonTable a > .row > .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .custom-image-container,
  .custom-image,
  img.custom-image,
  img.custom-image-container {
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
  }
}

@media (max-width: 480px) {
  .custom-image-container,
  .custom-image,
  img.custom-image,
  img.custom-image-container {
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
  }
}

/* =========================================================
   SPORTIF-Y FINAL FIX: ULTRA-WIDE WHITE PRODUCT SECTIONS
   - Removes grey card backgrounds
   - Reduces lateral whitespace
   - Keeps image controlled, not oversized
   - Gives text and image more horizontal room
   Paste at the very end of the CSS
   ========================================================= */

html,
body,
main,
.section,
.ComparisonTable,
.ComparisonTable.section,
.Interlinking.section,
.amz-link,
.amz-link > .row,
.container-fluid,
.container,
.row {
  background-color: #ffffff !important;
}

/* Remove alternating grey product cards */
.amz-link:nth-of-type(even) > .row,
.amz-link:nth-of-type(odd) > .row,
.container-fluid > a:nth-of-type(even) > .row,
.container-fluid > a:nth-of-type(odd) > .row,
.ComparisonTable a:nth-of-type(even) > .row,
.ComparisonTable a:nth-of-type(odd) > .row {
  background: #ffffff !important;
}

/* Override Bootstrap/container limits that create the huge side gaps */
main > .container,
main > .container-fluid,
.ComparisonTable > .container,
.ComparisonTable > .container-fluid,
.ComparisonTable.section > .container,
.ComparisonTable.section > .container-fluid,
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(6px, 0.75vw, 14px) !important;
  padding-right: clamp(6px, 0.75vw, 14px) !important;
}

/* Product row: almost full viewport, white, no clipping */
.amz-link > .row,
.container-fluid > a > .row,
.ComparisonTable a > .row {
  width: calc(100vw - clamp(16px, 2vw, 36px)) !important;
  max-width: 1860px !important;
  min-height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(42px, 4.5vw, 70px) !important;
  padding-bottom: clamp(42px, 4.5vw, 70px) !important;
  padding-left: clamp(8px, 1vw, 18px) !important;
  padding-right: clamp(8px, 1vw, 18px) !important;
  border-bottom: 1px solid #e4e4e4 !important;
  align-items: center !important;
  overflow: visible !important;
  background: #ffffff !important;
}

/* Less internal gutter between text and image */
.amz-link > .row > [class*="col-"],
.container-fluid > a > .row > [class*="col-"],
.ComparisonTable a > .row > [class*="col-"] {
  padding-left: clamp(8px, 1.2vw, 22px) !important;
  padding-right: clamp(8px, 1.2vw, 22px) !important;
  background: #ffffff !important;
}

@media (min-width: 992px) {
  .amz-link > .row,
  .container-fluid > a > .row,
  .ComparisonTable a > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(12px, 1.6vw, 30px) !important;
  }

  /* Text gets enough width; image remains strong but not massive */
  .amz-link > .row > .col-lg-6:first-child,
  .container-fluid > a > .row > .col-lg-6:first-child,
  .ComparisonTable a > .row > .col-lg-6:first-child {
    flex: 0 0 calc(52% - 15px) !important;
    max-width: calc(52% - 15px) !important;
  }

  .amz-link > .row > .col-lg-6:last-child,
  .container-fluid > a > .row > .col-lg-6:last-child,
  .ComparisonTable a > .row > .col-lg-6:last-child {
    flex: 0 0 calc(48% - 15px) !important;
    max-width: calc(48% - 15px) !important;
  }
}

/* Image block: white-on-white and controlled size */
.custom-image-container,
.custom-image,
img.custom-image,
img.custom-image-container {
  width: 100% !important;
  height: clamp(460px, 39vw, 620px) !important;
  min-height: 460px !important;
  max-height: 620px !important;
  padding: clamp(0px, 0.55vw, 10px) !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

.custom-image-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.custom-image-container img,
img.custom-image {
  width: 100% !important;
  height: 100% !important;
  max-height: 620px !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #ffffff !important;
  transform: none !important;
}

/* Text: use the extra lateral space instead of clipping */
.sub-heading,
.font-custom,
.product-name,
.additional-h2,
.heading,
.h2main,
.fw200 {
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.heading,
.h2main,
.fw200 {
  max-width: 980px !important;
}

/* Slightly reduce huge titles so the wider row looks balanced */
.font-custom,
.product-name {
  font-size: clamp(2.15rem, 3.55vw, 4.35rem) !important;
  line-height: 0.92 !important;
}

.additional-h2 {
  font-size: clamp(1rem, 1.16vw, 1.32rem) !important;
}

/* Keep all product-image white panels visually seamless */
.custom-image-container::before,
.custom-image-container::after {
  display: none !important;
}

/* Mobile/tablet remains stacked and readable */
@media (max-width: 991.98px) {
  .amz-link > .row,
  .container-fluid > a > .row,
  .ComparisonTable a > .row {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .amz-link > .row > .col-lg-6,
  .container-fluid > a > .row > .col-lg-6,
  .ComparisonTable a > .row > .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .custom-image-container,
  .custom-image,
  img.custom-image,
  img.custom-image-container {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
  }
}

@media (max-width: 480px) {
  .custom-image-container,
  .custom-image,
  img.custom-image,
  img.custom-image-container {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }
}

/* =========================================================
   SPORTIF-Y FINAL OVERRIDE:
   Make the SECOND interlinking section use the SAME visual style
   as the FIRST .seo-interlinks section.

   Target source section:
   <section class="Interlinking section">
     <div class="related-guides-grid">
       <a class="related-guide-card"><span>...</span></a>
     </div>
   </section>
   ========================================================= */

.Interlinking.section,
section.Interlinking.section,
section[class*="Interlinking"] {
  padding: clamp(46px, 6vw, 78px) clamp(16px, 4vw, 56px) !important;
  background: var(--sf-white) !important;
  color: var(--sf-black) !important;
  border-top: 1px solid var(--sf-border) !important;
  border-bottom: 1px solid var(--sf-border) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  text-transform: none !important;
}

.Interlinking.section h2,
section.Interlinking.section h2,
section[class*="Interlinking"] h2 {
  max-width: 980px !important;
  margin: 0 auto 14px !important;
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(2rem, 4.2vw, 4.8rem) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.07em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.Interlinking.section p,
section.Interlinking.section p,
section[class*="Interlinking"] p {
  max-width: 760px !important;
  margin: 0 auto 34px !important;
  color: var(--sf-charcoal) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  text-transform: none !important;
}

.related-guides-grid {
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.related-guide-card {
  min-height: 128px !important;
  padding: 20px 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  background: var(--sf-offwhite) !important;
  color: var(--sf-black) !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: 0 !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: var(--sf-transition) !important;
}

.related-guide-card::before {
  content: "";
  display: block !important;
  width: 38px !important;
  height: 3px !important;
  margin-bottom: 18px !important;
  background: var(--sf-black) !important;
  border-radius: 99px !important;
  transition: var(--sf-transition) !important;
  flex: 0 0 auto !important;
}

.related-guide-card span {
  display: block !important;
  width: 100% !important;
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

/* The second interlinking HTML does not include <small> text.
   This pseudo-element adds the same small explanatory line as the first cards. */
.related-guide-card span::after {
  content: "Compare use cases, features and buying criteria";
  display: block !important;
  margin-top: 12px !important;
  color: var(--sf-mid) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  text-transform: none !important;
}

.related-guide-card:hover,
.related-guide-card:focus {
  background: var(--sf-black) !important;
  color: var(--sf-white) !important;
  border-color: var(--sf-black) !important;
  transform: translateY(-3px) !important;
}

.related-guide-card:hover::before,
.related-guide-card:focus::before {
  background: var(--sf-red) !important;
}

.related-guide-card:hover span,
.related-guide-card:focus span {
  color: var(--sf-white) !important;
}

.related-guide-card:hover span::after,
.related-guide-card:focus span::after {
  color: rgba(255, 255, 255, 0.72) !important;
}

@media (max-width: 1199.98px) {
  .related-guides-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767.98px) {
  .Interlinking.section,
  section.Interlinking.section,
  section[class*="Interlinking"] {
    padding: 52px 18px !important;
  }

  .Interlinking.section h2,
  section.Interlinking.section h2,
  section[class*="Interlinking"] h2 {
    font-size: clamp(1.9rem, 10vw, 3.4rem) !important;
    text-align: left !important;
  }

  .Interlinking.section p,
  section.Interlinking.section p,
  section[class*="Interlinking"] p {
    text-align: left !important;
  }

  .related-guides-grid {
    grid-template-columns: 1fr !important;
  }

  .related-guide-card {
    min-height: 96px !important;
  }
}

/* =========================================================
   SPORTIF-Y FOOTER FIX: BLACK VISIBLE FOOTER
   Forces the footer back to a clean black section with visible text,
   visible links, visible topic pills and no white-on-white content.
   Paste at the very end of the CSS if not using this full file.
   ========================================================= */

.footer,
body .footer,
main .footer {
  width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(56px, 6vw, 90px) clamp(18px, 4vw, 72px) 34px !important;
  background: #000000 !important;
  color: #ffffff !important;
  border-top: 1px solid #000000 !important;
  overflow: visible !important;
}

.footer .container,
.footer .container-fluid,
.footer .row,
.footer .footer-container,
.footer [class*="col-"],
.footer .f-sec1,
.footer .f-sec2,
.footer .f-sec3,
.footer .footer_notes {
  background: #000000 !important;
  color: #ffffff !important;
  min-height: auto !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.footer .container {
  width: 100% !important;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.footer .footer-container {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: clamp(26px, 4vw, 64px) !important;
}

.footer h4,
.footer .high-lighted-heading,
.footer strong {
  display: block !important;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer p,
.footer li,
.footer a,
.footer span,
.footer small,
.footer div {
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.footer p,
.footer li,
.footer a {
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 0.94rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  text-align: left !important;
}

.footer p {
  max-width: 520px !important;
  margin: 0 0 14px !important;
}

.footer a {
  display: inline-flex !important;
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  transition: all 0.22s ease !important;
}

.footer a:hover,
.footer a:focus {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}

.footer ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.footer li {
  margin: 0 0 9px !important;
  padding: 0 !important;
}

.footer .foot-tag-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

.footer .foot-tag-list span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 8px 14px !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 999px !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
}

.footer .s-icons,
.footer .social-icons-simple {
  margin-top: 14px !important;
}

.footer .social-icons-simple {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0 !important;
  list-style: none !important;
}

.footer .social-icons-simple a {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 999px !important;
}

.footer .social-icons-simple a:hover,
.footer .social-icons-simple a:focus {
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

.footer .footer_notes {
  width: 100% !important;
  margin-top: clamp(34px, 4vw, 58px) !important;
  padding-top: 26px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-bottom: none !important;
}

.footer .footer_notes p,
.footer .whitecolor,
.footer_notes p.whitecolor {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.58) !important;
  text-align: center !important;
  font-size: 0.86rem !important;
}

/* Override old utility classes that were forcing footer text alignment/colors */
.footer .text-center,
.footer .text-md-left,
.footer .text-lg-left {
  color: inherit !important;
}

/* Mobile footer */
@media (max-width: 991.98px) {
  .footer {
    padding: 54px 22px 30px !important;
  }

  .footer .footer-container {
    display: block !important;
  }

  .footer .f-sec1,
  .footer .f-sec2,
  .footer .f-sec3 {
    margin-bottom: 36px !important;
  }

  .footer h4,
  .footer .high-lighted-heading,
  .footer p,
  .footer li,
  .footer a {
    text-align: center !important;
  }

  .footer p {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer ul,
  .footer .social-icons-simple,
  .footer .foot-tag-list {
    justify-content: center !important;
  }
}

/* =========================================================
   SPORTIF-Y FOOTER FIX: 3 COLUMNS ON DESKTOP
   Keeps Popular Topics on the same row as About / Information / Explore
   Paste after all other footer CSS.
   ========================================================= */

@media (min-width: 992px) {
  .footer {
    padding: clamp(72px, 7vw, 110px) clamp(20px, 4vw, 72px) 36px !important;
    background: #000000 !important;
  }

  .footer .container {
    width: min(100%, 1500px) !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .footer .footer-container {
    display: grid !important;
    grid-template-columns: minmax(320px, 1.05fr) minmax(360px, 1fr) minmax(300px, 0.9fr) !important;
    column-gap: clamp(54px, 7vw, 118px) !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .footer .f-sec1,
  .footer .f-sec2,
  .footer .f-sec3 {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
    color: #ffffff !important;
  }

  .footer .f-sec1 {
    grid-column: 1 !important;
  }

  .footer .f-sec2 {
    grid-column: 2 !important;
  }

  .footer .f-sec3 {
    grid-column: 3 !important;
  }

  .footer .f-sec2 > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(36px, 4vw, 70px) !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .footer .f-sec2 > .row > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
  }

  .footer .f-sec3 h4 {
    margin-bottom: 22px !important;
  }

  .footer .foot-tag-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-top: 0 !important;
    max-width: 340px !important;
  }

  .footer .foot-tag-list span {
    white-space: nowrap !important;
  }

  .footer .footer_notes {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .footer .footer-container {
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr) minmax(260px, 0.9fr) !important;
    column-gap: 38px !important;
  }
}

/* =========================================================
   SPORTIF-Y FINAL FOOTER CLEANUP
   - Removes strange footer divider lines
   - Centers the social network block
   - Keeps desktop footer in clean columns
   Paste this at the very end if using another CSS file.
   ========================================================= */

.footer,
.footer * {
  box-shadow: none !important;
}

.footer .footer_notes,
.footer .footer_notes.row,
.footer .row:has(.footer_notes),
.footer .footer_notes[class*="col-"] {
  margin-top: clamp(42px, 4vw, 70px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  background: #000000 !important;
}

.footer .footer_notes::before,
.footer .footer_notes::after,
.footer .row:has(.footer_notes)::before,
.footer .row:has(.footer_notes)::after,
.footer .footer_notes p::before,
.footer .footer_notes p::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: transparent !important;
}

.footer .footer_notes p,
.footer_notes p.whitecolor,
.footer .whitecolor {
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  text-align: center !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

@media (min-width: 992px) {
  .footer .container {
    position: relative !important;
  }

  .footer .footer-container {
    display: grid !important;
    grid-template-columns: minmax(330px, 1.05fr) minmax(360px, 1fr) minmax(320px, 0.95fr) !important;
    column-gap: clamp(56px, 7vw, 118px) !important;
    align-items: start !important;
  }

  .footer .f-sec1 {
    grid-column: 1 !important;
  }

  .footer .f-sec2 {
    grid-column: 2 !important;
  }

  .footer .f-sec3 {
    grid-column: 3 !important;
  }

  /* Move the social block out of the left visual edge and center it in the footer */
  .footer .f-sec1 h4:nth-of-type(2) {
    width: 100% !important;
    max-width: 340px !important;
    margin: clamp(28px, 3vw, 42px) auto 12px !important;
    text-align: center !important;
    transform: translateX(32vw) !important;
  }

  .footer .f-sec1 .s-icons {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    text-align: center !important;
    transform: translateX(32vw) !important;
  }

  .footer .f-sec1 .social-icons-simple {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .footer .footer_notes,
  .footer .row:has(.footer_notes) {
    width: 100% !important;
    max-width: none !important;
    margin-top: clamp(50px, 5vw, 86px) !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .footer .f-sec1 h4:nth-of-type(2),
  .footer .f-sec1 .s-icons {
    transform: translateX(24vw) !important;
  }
}

@media (max-width: 991.98px) {
  .footer .f-sec1 h4:nth-of-type(2),
  .footer .f-sec1 .s-icons,
  .footer .social-icons-simple {
    transform: none !important;
    text-align: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer .footer_notes,
  .footer .row:has(.footer_notes) {
    margin-top: 30px !important;
    border: 0 !important;
  }
}

/* =========================================================
   SPORTIF-Y FOOTER HARD FIX
   - Centers Social Network exactly in the footer
   - Removes the strange dotted/solid divider lines
   - Keeps footer black and readable
   Paste this at the very end of sportif-y.css
   ========================================================= */

.footer,
.footer * {
  box-shadow: none !important;
}

.footer {
  position: relative !important;
  background: #000000 !important;
  color: #ffffff !important;
  overflow: visible !important;
}

.footer .container {
  position: relative !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Kill every possible footer divider / dotted line */
.footer .footer_notes,
.footer .footer_notes *,
.footer .footer_notes.row,
.footer .row.footer_notes,
.footer .container > .row:last-child,
.footer .row:has(.footer_notes),
.footer .row:has(.whitecolor) {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.footer .footer_notes::before,
.footer .footer_notes::after,
.footer .footer_notes *::before,
.footer .footer_notes *::after,
.footer .container > .row:last-child::before,
.footer .container > .row:last-child::after,
.footer .row:has(.footer_notes)::before,
.footer .row:has(.footer_notes)::after,
.footer .row:has(.whitecolor)::before,
.footer .row:has(.whitecolor)::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.footer .footer_notes {
  margin-top: clamp(34px, 4vw, 62px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #000000 !important;
}

.footer .footer_notes p,
.footer .footer_notes .whitecolor,
.footer_notes p.whitecolor {
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.62) !important;
  text-align: center !important;
}

@media (min-width: 992px) {
  /* Use CSS grid and split the About block so Social Network can be truly centered */
  .footer .footer-container {
    display: grid !important;
    grid-template-columns: minmax(320px, 1.1fr) minmax(360px, 1fr) minmax(340px, 1fr) !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    column-gap: clamp(58px, 7vw, 118px) !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Make children of the first footer column addressable by the parent grid */
  .footer .f-sec1 {
    display: contents !important;
  }

  .footer .f-sec1 h4:first-of-type {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    text-align: center !important;
    margin: 0 0 22px !important;
  }

  .footer .f-sec1 p:nth-of-type(1) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .footer .f-sec1 p:nth-of-type(2) {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .footer .f-sec1 > a {
    grid-column: 1 !important;
    grid-row: 4 !important;
    justify-self: center !important;
    align-self: start !important;
    margin-top: 6px !important;
  }

  .footer .f-sec2 {
    grid-column: 2 !important;
    grid-row: 1 / span 4 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer .f-sec3 {
    grid-column: 3 !important;
    grid-row: 1 / span 4 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer .f-sec2 > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(36px, 4vw, 70px) !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .footer .f-sec2 > .row > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* True centered social block */
  .footer .f-sec1 h4:nth-of-type(2) {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    justify-self: center !important;
    width: auto !important;
    max-width: none !important;
    margin: clamp(34px, 4vw, 58px) 0 12px !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
  }

  .footer .f-sec1 .s-icons {
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;
    justify-self: center !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
  }

  .footer .f-sec1 .social-icons-simple,
  .footer .social-icons-simple {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .footer .footer-container,
  .footer .f-sec1,
  .footer .f-sec2,
  .footer .f-sec3 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .footer .f-sec1 h4:nth-of-type(2),
  .footer .f-sec1 .s-icons,
  .footer .social-icons-simple {
    transform: none !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* =========================================================
   SPORTIF-Y FIX: keep second interlinking card text inside boxes
   Paste at the very end of sportif-y.css
   ========================================================= */

.Interlinking.section,
section.Interlinking.section,
section[class*="Interlinking"] {
  overflow: visible !important;
}

.related-guides-grid {
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
  overflow: visible !important;
}

.related-guide-card {
  height: auto !important;
  min-height: 168px !important;
  padding: 20px 20px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: var(--sf-offwhite) !important;
  border: 1px solid var(--sf-border) !important;
}

.related-guide-card::before {
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 3px !important;
  margin: 0 0 22px !important;
}

.related-guide-card span {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  color: var(--sf-black) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(0.82rem, 0.82vw, 0.96rem) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

.related-guide-card span::after {
  content: "Compare use cases, features and buying criteria";
  display: block !important;
  margin-top: auto !important;
  padding-top: 16px !important;
  color: var(--sf-mid) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 1199.98px) {
  .related-guides-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
  }

  .related-guide-card {
    min-height: 150px !important;
  }
}

@media (max-width: 767.98px) {
  .related-guides-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .related-guide-card {
    min-height: 132px !important;
    padding: 18px 18px 20px !important;
  }

  .related-guide-card span {
    font-size: 0.9rem !important;
  }
}

/* =========================================================
   SPORTIF-Y FIX: FORCE NAVIGATION LOGO VISIBLE
   The real text can be hidden by previous/global link rules, so the
   logo label is rendered with ::before and the red dot stays with ::after.
   Paste at the very end of the CSS if not replacing the full file.
   ========================================================= */

.site-header,
.site-header * {
  box-sizing: border-box !important;
}

.site-header {
  background: #ffffff !important;
  color: #000000 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.site-nav {
  width: min(100%, 1720px) !important;
  min-height: 66px !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px, 3vw, 48px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(18px, 3vw, 48px) !important;
}

.site-logo,
.site-logo:link,
.site-logo:visited,
.site-logo:hover,
.site-logo:focus,
.site-logo:active {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  min-width: 132px !important;
  min-height: 66px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  z-index: 2 !important;
}

.site-logo::before {
  content: "SPORTIF-Y" !important;
  display: inline-block !important;
  color: #000000 !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-logo::after {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: 8px !important;
  background: var(--sf-red, #e60023) !important;
  border-radius: 999px !important;
  transform: translateY(-2px) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.site-nav-links a,
.site-nav-links a:link,
.site-nav-links a:visited,
.site-nav-links a:hover,
.site-nav-links a:focus,
.site-nav-links a:active {
  color: #000000 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 991.98px) {
  .site-logo,
  .site-logo:link,
  .site-logo:visited,
  .site-logo:hover,
  .site-logo:focus,
  .site-logo:active {
    min-width: 122px !important;
    min-height: 42px !important;
  }

  .site-logo::before {
    font-size: 1.2rem !important;
  }
}

/* =========================================================
   SPORTIF-Y FIX: SMALLER PRODUCT TITLES
   Paste at the very end of the CSS
   ========================================================= */

/* Product title only: h2.font-custom.product-name inside Amazon/product cards */
.amz-link .product-name,
.amz-link h2.product-name,
.amz-link .font-custom.product-name,
.container-fluid > a .product-name,
.ComparisonTable a .product-name {
  font-size: clamp(1.72rem, 2.95vw, 3.65rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.058em !important;
  max-width: 100% !important;
  margin-bottom: 14px !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Product subtitle under the title */
.amz-link .additional-h2,
.amz-link h2.additional-h2,
.container-fluid > a .additional-h2,
.ComparisonTable a .additional-h2 {
  font-size: clamp(0.92rem, 1.08vw, 1.18rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em !important;
}

/* Desktop: keep long product titles controlled and readable */
@media (min-width: 1200px) {
  .amz-link .product-name,
  .amz-link h2.product-name,
  .amz-link .font-custom.product-name,
  .container-fluid > a .product-name,
  .ComparisonTable a .product-name {
    font-size: clamp(2.15rem, 2.85vw, 3.55rem) !important;
    line-height: 0.95 !important;
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .amz-link .product-name,
  .amz-link h2.product-name,
  .amz-link .font-custom.product-name,
  .container-fluid > a .product-name,
  .ComparisonTable a .product-name {
    font-size: clamp(1.95rem, 7.4vw, 3.55rem) !important;
    line-height: 0.96 !important;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .amz-link .product-name,
  .amz-link h2.product-name,
  .amz-link .font-custom.product-name,
  .container-fluid > a .product-name,
  .ComparisonTable a .product-name {
    font-size: clamp(1.75rem, 9vw, 3.05rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.052em !important;
  }
}

/* =========================================================
   SPORTIF-Y FIX: FAQ SMALLER AND WIDER
   Paste at the very end of the CSS
   ========================================================= */

/* FAQ section: wider content area, less heavy spacing */
.faq-section {
  width: 100% !important;
  max-width: none !important;
  padding: clamp(56px, 7vw, 96px) clamp(16px, 4vw, 64px) !important;
  background: var(--sf-offwhite, #f5f5f5) !important;
}

/* Main FAQ heading: smaller, still bold */
.faq-section > h2,
.faq-section h2 {
  max-width: 1280px !important;
  margin: 0 auto clamp(34px, 4vw, 52px) !important;
  font-size: clamp(2.45rem, 4.7vw, 5.1rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.068em !important;
  text-align: center !important;
}

/* FAQ rows: wider than before */
.faq-item {
  width: min(100%, 1280px) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(22px, 2.4vw, 34px) 0 !important;
  border-top: 1px solid var(--sf-border, #d8d8d8) !important;
}

.faq-item:last-child {
  border-bottom: 1px solid var(--sf-border, #d8d8d8) !important;
}

/* FAQ questions: smaller and wider */
.faq-item h3,
.faq-section .faq-item h3 {
  max-width: 1180px !important;
  margin: 0 0 10px !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(1.18rem, 1.55vw, 1.85rem) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.052em !important;
  text-transform: uppercase !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* FAQ answers: wider line measure, readable */
.faq-item p,
.faq-section .faq-item p {
  max-width: 1120px !important;
  margin: 0 !important;
  font-size: clamp(0.92rem, 0.98vw, 1rem) !important;
  line-height: 1.62 !important;
}

/* Desktop: use more horizontal space */
@media (min-width: 1200px) {
  .faq-section {
    padding-left: clamp(42px, 5vw, 96px) !important;
    padding-right: clamp(42px, 5vw, 96px) !important;
  }

  .faq-section > h2,
  .faq-section h2 {
    font-size: clamp(3rem, 4.15vw, 4.9rem) !important;
  }

  .faq-item h3,
  .faq-section .faq-item h3 {
    font-size: clamp(1.28rem, 1.42vw, 1.72rem) !important;
  }
}

/* Tablet */
@media (max-width: 991.98px) {
  .faq-section {
    padding: 56px 22px !important;
  }

  .faq-section > h2,
  .faq-section h2 {
    max-width: 100% !important;
    font-size: clamp(2.15rem, 8vw, 3.8rem) !important;
    line-height: 0.94 !important;
    text-align: left !important;
  }

  .faq-item {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 0 !important;
  }

  .faq-item h3,
  .faq-section .faq-item h3 {
    max-width: 100% !important;
    font-size: clamp(1.15rem, 4.8vw, 1.75rem) !important;
    line-height: 1.08 !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .faq-section {
    padding: 46px 18px !important;
  }

  .faq-section > h2,
  .faq-section h2 {
    font-size: clamp(2rem, 10vw, 3.1rem) !important;
  }

  .faq-item h3,
  .faq-section .faq-item h3 {
    font-size: clamp(1.06rem, 6vw, 1.42rem) !important;
    letter-spacing: -0.045em !important;
  }

  .faq-item p,
  .faq-section .faq-item p {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }
}

/* =========================================================
   SPORTIF-Y SUBTLE SPORTS COLOR ACCENTS
   Keeps the design clean, but replaces flat black/grey lines
   with controlled sport-color accents.
   Paste at the very end of the CSS.
   ========================================================= */

:root {
  --sf-sport-red: #e60023;
  --sf-sport-blue: #1478ff;
  --sf-sport-orange: #ff7a00;
  --sf-sport-green: #21a45d;
  --sf-sport-purple: #6d4cff;
  --sf-line-soft: rgba(20, 120, 255, 0.18);
  --sf-line-soft-2: rgba(255, 122, 0, 0.18);
  --sf-line-soft-3: rgba(230, 0, 35, 0.16);
  --sf-sport-gradient: linear-gradient(
    90deg,
    var(--sf-sport-red),
    var(--sf-sport-orange),
    var(--sf-sport-blue),
    var(--sf-sport-green)
  );
  --sf-sport-gradient-soft: linear-gradient(
    90deg,
    rgba(230, 0, 35, 0),
    rgba(230, 0, 35, 0.35),
    rgba(255, 122, 0, 0.28),
    rgba(20, 120, 255, 0.32),
    rgba(33, 164, 93, 0)
  );
}

/* Header: subtle sport stripe instead of plain black divider */
.site-header {
  border-bottom: 0 !important;
  position: sticky !important;
}

.site-header::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    rgba(230, 0, 35, 0),
    rgba(230, 0, 35, 0.55),
    rgba(255, 122, 0, 0.45),
    rgba(20, 120, 255, 0.48),
    rgba(33, 164, 93, 0.42),
    rgba(33, 164, 93, 0)
  ) !important;
  pointer-events: none !important;
}

.site-logo::after {
  background: linear-gradient(135deg, var(--sf-sport-red), var(--sf-sport-orange)) !important;
  box-shadow: 0 0 0 4px rgba(230, 0, 35, 0.08) !important;
}

.site-nav-links a::after {
  height: 2px !important;
  background: linear-gradient(90deg, var(--sf-sport-red), var(--sf-sport-blue)) !important;
}

/* Hero/page header accent */
.page-header::after {
  background: var(--sf-sport-gradient) !important;
  height: 4px !important;
  box-shadow: 0 8px 26px rgba(20, 120, 255, 0.18) !important;
}

/* Product sections: softer colored separators */
.amz-link > .row,
.container-fluid > a > .row,
.ComparisonTable a > .row {
  border-bottom: 0 !important;
  position: relative !important;
}

.amz-link > .row::before,
.container-fluid > a > .row::before,
.ComparisonTable a > .row::before {
  background: linear-gradient(90deg, var(--sf-sport-red), var(--sf-sport-orange)) !important;
  height: 4px !important;
  box-shadow: 0 6px 18px rgba(230, 0, 35, 0.12) !important;
}

.amz-link > .row::after,
.container-fluid > a > .row::after,
.ComparisonTable a > .row::after {
  content: "" !important;
  position: absolute !important;
  left: clamp(12px, 2vw, 34px) !important;
  right: clamp(12px, 2vw, 34px) !important;
  bottom: 0 !important;
  height: 1px !important;
  background: var(--sf-sport-gradient-soft) !important;
  pointer-events: none !important;
}

/* Rotate small product-row accents without changing the layout */
.amz-link:nth-of-type(4n + 1) > .row::before {
  background: linear-gradient(90deg, var(--sf-sport-red), var(--sf-sport-orange)) !important;
}

.amz-link:nth-of-type(4n + 2) > .row::before {
  background: linear-gradient(90deg, var(--sf-sport-blue), var(--sf-sport-green)) !important;
}

.amz-link:nth-of-type(4n + 3) > .row::before {
  background: linear-gradient(90deg, var(--sf-sport-orange), var(--sf-sport-blue)) !important;
}

.amz-link:nth-of-type(4n + 4) > .row::before {
  background: linear-gradient(90deg, var(--sf-sport-green), var(--sf-sport-red)) !important;
}

.additional-h2 {
  border-bottom: 1px solid rgba(20, 120, 255, 0.18) !important;
}

/* Buttons: keep black, add very subtle sport edge */
.amz-button {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(230, 0, 35, 0.08) !important;
}

.amz-button::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  margin-right: 10px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--sf-sport-red), var(--sf-sport-orange)) !important;
  display: inline-block !important;
}

/* Interlinking sections: same structure, with colored sport bars */
.seo-interlink-card,
.related-guide-card {
  border-color: rgba(20, 120, 255, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 122, 0, 0.035) !important;
}

.seo-interlink-card::before,
.related-guide-card::before {
  background: linear-gradient(90deg, var(--sf-sport-red), var(--sf-sport-orange)) !important;
  height: 3px !important;
}

.seo-interlink-card:nth-child(4n + 1)::before,
.related-guide-card:nth-child(4n + 1)::before {
  background: linear-gradient(90deg, var(--sf-sport-red), var(--sf-sport-orange)) !important;
}

.seo-interlink-card:nth-child(4n + 2)::before,
.related-guide-card:nth-child(4n + 2)::before {
  background: linear-gradient(90deg, var(--sf-sport-blue), var(--sf-sport-green)) !important;
}

.seo-interlink-card:nth-child(4n + 3)::before,
.related-guide-card:nth-child(4n + 3)::before {
  background: linear-gradient(90deg, var(--sf-sport-orange), var(--sf-sport-blue)) !important;
}

.seo-interlink-card:nth-child(4n + 4)::before,
.related-guide-card:nth-child(4n + 4)::before {
  background: linear-gradient(90deg, var(--sf-sport-green), var(--sf-sport-red)) !important;
}

.seo-interlink-card:hover,
.seo-interlink-card:focus,
.related-guide-card:hover,
.related-guide-card:focus {
  border-color: transparent !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 18px 36px rgba(20, 120, 255, 0.12) !important;
}

/* FAQ: colored separators, still clean */
.faq-section {
  background:
    radial-gradient(circle at 12% 10%, rgba(230, 0, 35, 0.035), transparent 28%),
    radial-gradient(circle at 90% 16%, rgba(20, 120, 255, 0.04), transparent 30%),
    #f5f5f5 !important;
}

.faq-section h2 {
  position: relative !important;
}

.faq-section h2::after {
  content: "" !important;
  display: block !important;
  width: clamp(80px, 9vw, 150px) !important;
  height: 4px !important;
  margin: 28px auto 0 !important;
  background: var(--sf-sport-gradient) !important;
  border-radius: 999px !important;
}

.faq-item {
  position: relative !important;
  border-top: 0 !important;
}

.faq-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    rgba(230, 0, 35, 0.3),
    rgba(255, 122, 0, 0.22),
    rgba(20, 120, 255, 0.26),
    rgba(33, 164, 93, 0.18),
    transparent
  ) !important;
}

.faq-item h3::before {
  content: "" !important;
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  margin-right: 12px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--sf-sport-red), var(--sf-sport-orange)) !important;
  vertical-align: 0.12em !important;
}

.faq-item:nth-child(3n + 1) h3::before {
  background: linear-gradient(135deg, var(--sf-sport-red), var(--sf-sport-orange)) !important;
}

.faq-item:nth-child(3n + 2) h3::before {
  background: linear-gradient(135deg, var(--sf-sport-blue), var(--sf-sport-green)) !important;
}

.faq-item:nth-child(3n + 3) h3::before {
  background: linear-gradient(135deg, var(--sf-sport-orange), var(--sf-sport-blue)) !important;
}

/* Footer: keep black, add small sports accents without restoring divider lines */
.footer h4::after,
.footer .high-lighted-heading::after {
  content: "" !important;
  display: block !important;
  width: 34px !important;
  height: 3px !important;
  margin-top: 10px !important;
  background: linear-gradient(90deg, var(--sf-sport-red), var(--sf-sport-orange)) !important;
  border-radius: 999px !important;
}

.footer .f-sec2 h4::after {
  background: linear-gradient(90deg, var(--sf-sport-blue), var(--sf-sport-green)) !important;
}

.footer .f-sec3 h4::after {
  background: linear-gradient(90deg, var(--sf-sport-orange), var(--sf-sport-blue)) !important;
}

.foot-tag-list span {
  border-color: rgba(20, 120, 255, 0.36) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 122, 0, 0.08) !important;
}

.foot-tag-list span:nth-child(3n + 1) {
  border-color: rgba(230, 0, 35, 0.34) !important;
}

.foot-tag-list span:nth-child(3n + 2) {
  border-color: rgba(20, 120, 255, 0.34) !important;
}

.foot-tag-list span:nth-child(3n + 3) {
  border-color: rgba(33, 164, 93, 0.34) !important;
}

.social-icons-simple a {
  border-color: rgba(20, 120, 255, 0.38) !important;
}

.social-icons-simple li:nth-child(1) a {
  border-color: rgba(230, 0, 35, 0.42) !important;
}

.social-icons-simple li:nth-child(2) a {
  border-color: rgba(20, 120, 255, 0.42) !important;
}

.social-icons-simple li:nth-child(3) a {
  border-color: rgba(33, 164, 93, 0.42) !important;
}

/* Mobile: keep accents controlled */
@media (max-width: 767.98px) {
  .faq-section h2::after {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .footer h4::after,
  .footer .high-lighted-heading::after {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================
   SPORTIF-Y REFINED SPORT COLOR PALETTE
   Stronger but controlled accents: gold, blood red, ocean blue, sky blue.
   No rainbow / green palette.
   ========================================================= */

:root {
  --sf-blood-red: #8f0712;
  --sf-blood-red-soft: rgba(143, 7, 18, 0.72);
  --sf-gold: #c99700;
  --sf-gold-soft: rgba(201, 151, 0, 0.72);
  --sf-ocean-blue: #005f86;
  --sf-ocean-blue-soft: rgba(0, 95, 134, 0.72);
  --sf-sky-blue: #47b7e8;
  --sf-sky-blue-soft: rgba(71, 183, 232, 0.68);
  --sf-sport-red: var(--sf-blood-red) !important;
  --sf-sport-orange: var(--sf-gold) !important;
  --sf-sport-blue: var(--sf-ocean-blue) !important;
  --sf-sport-green: var(--sf-sky-blue) !important;
  --sf-sport-gradient: linear-gradient(90deg, var(--sf-blood-red) 0%, var(--sf-gold) 34%, var(--sf-ocean-blue) 68%, var(--sf-sky-blue) 100%) !important;
  --sf-sport-gradient-soft: linear-gradient(90deg, rgba(143,7,18,0.48) 0%, rgba(201,151,0,0.44) 34%, rgba(0,95,134,0.48) 68%, rgba(71,183,232,0.42) 100%) !important;
}

/* Header: visible logo accent and more intentional underline color */
.site-logo::after {
  background: linear-gradient(135deg, var(--sf-blood-red), var(--sf-gold)) !important;
  box-shadow: 0 0 0 4px rgba(143, 7, 18, 0.08) !important;
}

.site-nav-links a::after {
  height: 3px !important;
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-ocean-blue)) !important;
}

.site-header {
  border-bottom: 1px solid rgba(0, 95, 134, 0.16) !important;
}

.site-header::after {
  background: linear-gradient(90deg, rgba(143,7,18,0.62), rgba(201,151,0,0.48), rgba(0,95,134,0.62), rgba(71,183,232,0.44)) !important;
}

/* Page hero accent line */
.page-header::after {
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-gold), var(--sf-ocean-blue)) !important;
  box-shadow: 0 8px 22px rgba(0, 95, 134, 0.16) !important;
}

/* Product rows: stronger sport divider accents, still clean */
.amz-link > .row::before,
.container-fluid > a > .row::before,
.ComparisonTable a > .row::before {
  width: clamp(64px, 7vw, 118px) !important;
  height: 5px !important;
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-gold)) !important;
  box-shadow: 0 8px 20px rgba(143, 7, 18, 0.11) !important;
}

.amz-link:nth-of-type(4n + 1) > .row::before {
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-gold)) !important;
}

.amz-link:nth-of-type(4n + 2) > .row::before {
  background: linear-gradient(90deg, var(--sf-ocean-blue), var(--sf-sky-blue)) !important;
}

.amz-link:nth-of-type(4n + 3) > .row::before {
  background: linear-gradient(90deg, var(--sf-gold), var(--sf-ocean-blue)) !important;
}

.amz-link:nth-of-type(4n + 4) > .row::before {
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-ocean-blue)) !important;
}

.amz-link > .row,
.container-fluid > a > .row,
.ComparisonTable a > .row {
  border-bottom: 1px solid rgba(0, 95, 134, 0.14) !important;
}

.amz-link:nth-of-type(even) > .row {
  background: #ffffff !important;
}

/* Product subtitles: color only on thin line, not full text */
.additional-h2 {
  border-bottom: 1px solid rgba(201, 151, 0, 0.34) !important;
}

.sub-heading {
  color: #5f6870 !important;
}

/* CTA: slightly more premium sport detail */
.amz-button {
  border-color: #000000 !important;
  box-shadow: inset 0 -3px 0 rgba(201, 151, 0, 0.28), 0 12px 28px rgba(0, 0, 0, 0.09) !important;
}

.amz-button::after {
  color: var(--sf-gold) !important;
}

.amz-link:hover .amz-button,
.amz-button:hover {
  box-shadow: inset 0 -3px 0 rgba(71, 183, 232, 0.34), 0 16px 34px rgba(0, 95, 134, 0.14) !important;
}

/* Interlink sections: gold/red/blue bars, no rainbow colors */
.seo-interlinks,
.Interlinking.section,
section[class*="Interlinking"] {
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 74%, rgba(71,183,232,0.035) 100%) !important;
}

.seo-interlink-card,
.related-guide-card {
  background: #f8f8f8 !important;
  border-color: rgba(0, 95, 134, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7) !important;
}

.seo-interlink-card::before,
.related-guide-card::before {
  height: 4px !important;
  width: 48px !important;
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-gold)) !important;
}

.seo-interlink-card:nth-child(4n + 1)::before,
.related-guide-card:nth-child(4n + 1)::before {
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-gold)) !important;
}

.seo-interlink-card:nth-child(4n + 2)::before,
.related-guide-card:nth-child(4n + 2)::before {
  background: linear-gradient(90deg, var(--sf-ocean-blue), var(--sf-sky-blue)) !important;
}

.seo-interlink-card:nth-child(4n + 3)::before,
.related-guide-card:nth-child(4n + 3)::before {
  background: linear-gradient(90deg, var(--sf-gold), var(--sf-ocean-blue)) !important;
}

.seo-interlink-card:nth-child(4n + 4)::before,
.related-guide-card:nth-child(4n + 4)::before {
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-ocean-blue)) !important;
}

.seo-interlink-card:hover,
.seo-interlink-card:focus,
.related-guide-card:hover,
.related-guide-card:focus {
  background: #050505 !important;
  border-color: rgba(201, 151, 0, 0.52) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 151, 0, 0.20), 0 16px 36px rgba(0, 95, 134, 0.14) !important;
}

.seo-interlink-card:hover::before,
.seo-interlink-card:focus::before,
.related-guide-card:hover::before,
.related-guide-card:focus::before {
  width: 72px !important;
  background: linear-gradient(90deg, var(--sf-gold), var(--sf-sky-blue)) !important;
}

/* FAQ: stronger, wider divider accents without making the page noisy */
.faq-section {
  background:
    linear-gradient(180deg, #f7f7f7 0%, #f7f7f7 78%, rgba(0,95,134,0.035) 100%) !important;
}

.faq-section h2::after {
  height: 5px !important;
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-gold), var(--sf-ocean-blue)) !important;
  box-shadow: 0 10px 22px rgba(0, 95, 134, 0.12) !important;
}

.faq-item::before {
  height: 2px !important;
  background: linear-gradient(90deg, rgba(143,7,18,0.42), rgba(201,151,0,0.34), rgba(0,95,134,0.38), rgba(71,183,232,0.24), transparent) !important;
}

.faq-item h3::before {
  width: 10px !important;
  height: 10px !important;
  background: linear-gradient(135deg, var(--sf-blood-red), var(--sf-gold)) !important;
  box-shadow: 0 0 0 4px rgba(143, 7, 18, 0.06) !important;
}

.faq-item:nth-child(4n + 1) h3::before {
  background: linear-gradient(135deg, var(--sf-blood-red), var(--sf-gold)) !important;
}

.faq-item:nth-child(4n + 2) h3::before {
  background: linear-gradient(135deg, var(--sf-ocean-blue), var(--sf-sky-blue)) !important;
}

.faq-item:nth-child(4n + 3) h3::before {
  background: linear-gradient(135deg, var(--sf-gold), var(--sf-ocean-blue)) !important;
}

.faq-item:nth-child(4n + 4) h3::before {
  background: linear-gradient(135deg, var(--sf-blood-red), var(--sf-ocean-blue)) !important;
}

/* Footer accents: gold/red/blue only */
.footer h4::after,
.footer .high-lighted-heading::after {
  height: 4px !important;
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-gold)) !important;
}

.footer .f-sec2 h4::after {
  background: linear-gradient(90deg, var(--sf-ocean-blue), var(--sf-sky-blue)) !important;
}

.footer .f-sec3 h4::after {
  background: linear-gradient(90deg, var(--sf-gold), var(--sf-ocean-blue)) !important;
}

.foot-tag-list span {
  border-color: rgba(201, 151, 0, 0.48) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 95, 134, 0.10) !important;
}

.foot-tag-list span:nth-child(4n + 1) {
  border-color: rgba(143, 7, 18, 0.54) !important;
}

.foot-tag-list span:nth-child(4n + 2) {
  border-color: rgba(201, 151, 0, 0.54) !important;
}

.foot-tag-list span:nth-child(4n + 3) {
  border-color: rgba(0, 95, 134, 0.54) !important;
}

.foot-tag-list span:nth-child(4n + 4) {
  border-color: rgba(71, 183, 232, 0.54) !important;
}

.foot-tag-list span:hover {
  border-color: var(--sf-gold) !important;
  color: #ffffff !important;
  box-shadow: inset 0 -2px 0 rgba(201, 151, 0, 0.38) !important;
}

.social-icons-simple a {
  border-color: rgba(201, 151, 0, 0.48) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 95, 134, 0.12) !important;
}

.social-icons-simple li:nth-child(1) a {
  border-color: rgba(143, 7, 18, 0.58) !important;
}

.social-icons-simple li:nth-child(2) a {
  border-color: rgba(0, 95, 134, 0.58) !important;
}

.social-icons-simple li:nth-child(3) a {
  border-color: rgba(71, 183, 232, 0.58) !important;
}

.social-icons-simple a:hover {
  background: linear-gradient(135deg, var(--sf-blood-red), var(--sf-ocean-blue)) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
/* =========================================================
   SPORTIF-Y TITLE COLOR TINT OVERRIDE
   Very subtle gold / blood-red / ocean-blue tint on large black titles
   Paste at the very end if using as a patch.
   ========================================================= */

:root {
  --sf-blood-red: #8f0712;
  --sf-deep-blood: #5d0309;
  --sf-gold: #c99700;
  --sf-soft-gold: #d8b55d;
  --sf-ocean-blue: #005f86;
  --sf-sky-blue: #47b7e8;
}

/* Main black titles: keep them mostly black, with a restrained sport-colour wash */
.page-header h1,
.seo-interlinks h2,
section[class*="Interlinking"] h2,
.Interlinking.section h2,
.faq-section h2,
.amz-link .product-name,
.amz-link h2.product-name,
.amz-link .font-custom.product-name {
  color: #050505 !important;
  background:
    linear-gradient(
      112deg,
      #050505 0%,
      #050505 46%,
      var(--sf-deep-blood) 58%,
      var(--sf-blood-red) 66%,
      var(--sf-gold) 78%,
      #050505 91%,
      #050505 100%
    ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 1px 0 rgba(143, 7, 18, 0.06),
    0 2px 0 rgba(201, 151, 0, 0.035) !important;
}

/* Product titles: slightly warmer than the rest, still very close to black */
.amz-link .product-name,
.amz-link h2.product-name,
.amz-link .font-custom.product-name {
  background:
    linear-gradient(
      115deg,
      #050505 0%,
      #050505 48%,
      #6f040d 60%,
      var(--sf-blood-red) 69%,
      var(--sf-soft-gold) 82%,
      #050505 96%
    ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Section titles: add a little more gold/red without making them look rainbow */
.seo-interlinks h2,
section[class*="Interlinking"] h2,
.Interlinking.section h2,
.faq-section h2 {
  background:
    linear-gradient(
      110deg,
      #050505 0%,
      #050505 43%,
      var(--sf-blood-red) 59%,
      var(--sf-gold) 74%,
      #050505 92%
    ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Smaller black titles: visible accent, but less dramatic than the big headings */
.additional-h2,
.faq-item h3,
.seo-interlink-card span,
.related-guide-card span,
.footer h4,
.footer .high-lighted-heading {
  color: #050505 !important;
  background:
    linear-gradient(
      105deg,
      #050505 0%,
      #050505 62%,
      var(--sf-blood-red) 76%,
      var(--sf-gold) 92%
    ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Footer headings sit on black, so keep them readable while still tinted */
.footer h4,
.footer .high-lighted-heading {
  color: #ffffff !important;
  background:
    linear-gradient(
      105deg,
      #ffffff 0%,
      #ffffff 54%,
      var(--sf-soft-gold) 72%,
      #f2f2f2 100%
    ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Hover states: preserve contrast on black cards/buttons */
.seo-interlink-card:hover span,
.seo-interlink-card:focus span,
.related-guide-card:hover span,
.related-guide-card:focus span,
.amz-button:hover,
.amz-link:hover .amz-button {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

/* Browser fallback when text background-clip is unsupported */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-header h1,
  .seo-interlinks h2,
  section[class*="Interlinking"] h2,
  .Interlinking.section h2,
  .faq-section h2,
  .amz-link .product-name,
  .amz-link h2.product-name,
  .amz-link .font-custom.product-name,
  .additional-h2,
  .faq-item h3,
  .seo-interlink-card span,
  .related-guide-card span {
    color: #080808 !important;
    background: none !important;
  }

  .footer h4,
  .footer .high-lighted-heading {
    color: #ffffff !important;
    background: none !important;
  }
}
/* =========================================================
   SPORTIF-Y TITLE TINT — MORE SUBTLE, BLOOD RED FOCUS
   Paste this at the very end of the CSS if using as a patch.
   Purpose: reduce the previous gold/red gradient intensity on titles.
   ========================================================= */

:root {
  --sf-blood-red: #7b0610;
  --sf-blood-red-dark: #3f0207;
  --sf-title-black: #050505;
  --sf-title-warm-black: #080506;
}

/* Big section/product titles: almost black, only a faint blood-red base tint */
.page-header h1,
.seo-interlinks h2,
section[class*="Interlinking"] h2,
.Interlinking.section h2,
.faq-section h2,
.amz-link .product-name,
.amz-link h2.product-name,
.amz-link .font-custom.product-name {
  color: var(--sf-title-black) !important;
  background: linear-gradient(
    180deg,
    #050505 0%,
    #050505 72%,
    #070404 86%,
    var(--sf-blood-red-dark) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(123, 6, 16, 0.045) !important;
}

/* Product titles: slightly clearer blood-red warmth, still visually black */
.amz-link .product-name,
.amz-link h2.product-name,
.amz-link .font-custom.product-name {
  background: linear-gradient(
    180deg,
    #050505 0%,
    #050505 68%,
    #090405 84%,
    #5b030b 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Interlinking and FAQ titles: remove visible gold, keep subtle red depth */
.seo-interlinks h2,
section[class*="Interlinking"] h2,
.Interlinking.section h2,
.faq-section h2 {
  background: linear-gradient(
    180deg,
    #050505 0%,
    #050505 76%,
    #080405 90%,
    #4d0208 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Smaller headings/card titles: simpler and less decorative */
.additional-h2,
.faq-item h3,
.seo-interlink-card span,
.related-guide-card span {
  color: #060606 !important;
  background: none !important;
  -webkit-text-fill-color: #060606 !important;
  text-shadow: 0 1px 0 rgba(123, 6, 16, 0.06) !important;
}

/* Footer headings must stay readable on black; only a tiny warm-red edge */
.footer h4,
.footer .high-lighted-heading {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(123, 6, 16, 0.35) !important;
}

/* Keep hover states clean and high contrast */
.seo-interlink-card:hover span,
.seo-interlink-card:focus span,
.related-guide-card:hover span,
.related-guide-card:focus span,
.amz-button:hover,
.amz-link:hover .amz-button {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}
/* =========================================================
   SPORTIF-Y FINAL COLOR CLEANUP — BLOOD RED + GOLD ONLY
   Removes blue/sky/green accents and keeps title tint subtle.
   Paste this at the very end if using as a patch.
   ========================================================= */

:root {
  --sf-blood-red: #760610 !important;
  --sf-blood-red-dark: #3f0207 !important;
  --sf-blood-red-soft: rgba(118, 6, 16, 0.62) !important;
  --sf-gold: #c59a18 !important;
  --sf-gold-soft: rgba(197, 154, 24, 0.48) !important;

  /* Force any previous blue/green variables to resolve as red/gold */
  --sf-ocean-blue: var(--sf-blood-red) !important;
  --sf-ocean-blue-soft: rgba(118, 6, 16, 0.42) !important;
  --sf-sky-blue: var(--sf-gold) !important;
  --sf-sky-blue-soft: rgba(197, 154, 24, 0.38) !important;
  --sf-sport-red: var(--sf-blood-red) !important;
  --sf-sport-orange: var(--sf-gold) !important;
  --sf-sport-blue: var(--sf-blood-red) !important;
  --sf-sport-green: var(--sf-gold) !important;
  --sf-sport-purple: var(--sf-blood-red) !important;

  --sf-sport-gradient: linear-gradient(
    90deg,
    rgba(118, 6, 16, 0.92) 0%,
    rgba(118, 6, 16, 0.78) 52%,
    rgba(197, 154, 24, 0.58) 100%
  ) !important;

  --sf-sport-gradient-soft: linear-gradient(
    90deg,
    rgba(118, 6, 16, 0),
    rgba(118, 6, 16, 0.28),
    rgba(197, 154, 24, 0.20),
    rgba(197, 154, 24, 0)
  ) !important;
}

/* Keep all section backgrounds clean: no blue washes */
.seo-interlinks,
.Interlinking.section,
section[class*="Interlinking"],
.faq-section {
  background:
    radial-gradient(circle at 14% 8%, rgba(118, 6, 16, 0.026), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(197, 154, 24, 0.025), transparent 30%),
    #f7f7f7 !important;
}

.seo-interlinks {
  background: #ffffff !important;
}

/* Header: red/gold only */
.site-header {
  border-bottom: 1px solid rgba(118, 6, 16, 0.14) !important;
}

.site-header::before,
.site-header::after {
  background: linear-gradient(
    90deg,
    rgba(118, 6, 16, 0),
    rgba(118, 6, 16, 0.54),
    rgba(197, 154, 24, 0.42),
    rgba(118, 6, 16, 0)
  ) !important;
}

.site-logo::after,
.site-nav-links a::after,
.page-header::after,
.faq-section h2::after {
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-gold)) !important;
  box-shadow: 0 8px 22px rgba(118, 6, 16, 0.10) !important;
}

/* Product separators: no alternating blue/green rows */
.amz-link > .row::before,
.container-fluid > a > .row::before,
.ComparisonTable a > .row::before,
.amz-link:nth-of-type(4n + 1) > .row::before,
.amz-link:nth-of-type(4n + 2) > .row::before,
.amz-link:nth-of-type(4n + 3) > .row::before,
.amz-link:nth-of-type(4n + 4) > .row::before {
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-gold)) !important;
  box-shadow: 0 8px 20px rgba(118, 6, 16, 0.10) !important;
}

.amz-link > .row::after,
.container-fluid > a > .row::after,
.ComparisonTable a > .row::after,
.faq-item::before {
  background: linear-gradient(
    90deg,
    rgba(118, 6, 16, 0.32),
    rgba(197, 154, 24, 0.24),
    rgba(118, 6, 16, 0.10),
    transparent
  ) !important;
}

.amz-link > .row,
.container-fluid > a > .row,
.ComparisonTable a > .row,
.additional-h2,
.faq-item,
.faq-item:last-child {
  border-color: rgba(118, 6, 16, 0.13) !important;
}

/* Buttons: black base with blood-red/gold edge only */
.amz-button {
  box-shadow:
    inset 0 -3px 0 rgba(197, 154, 24, 0.24),
    0 12px 28px rgba(118, 6, 16, 0.08) !important;
}

.amz-button::before,
.faq-item h3::before,
.faq-item:nth-child(3n + 1) h3::before,
.faq-item:nth-child(3n + 2) h3::before,
.faq-item:nth-child(3n + 3) h3::before,
.faq-item:nth-child(4n + 1) h3::before,
.faq-item:nth-child(4n + 2) h3::before,
.faq-item:nth-child(4n + 3) h3::before,
.faq-item:nth-child(4n + 4) h3::before {
  background: linear-gradient(135deg, var(--sf-blood-red), var(--sf-gold)) !important;
  box-shadow: 0 0 0 4px rgba(118, 6, 16, 0.055) !important;
}

.amz-link:hover .amz-button,
.amz-button:hover {
  box-shadow:
    inset 0 -3px 0 rgba(197, 154, 24, 0.32),
    0 16px 34px rgba(118, 6, 16, 0.13) !important;
}

/* Interlinking cards: red/gold only */
.seo-interlink-card,
.related-guide-card {
  border-color: rgba(118, 6, 16, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(197, 154, 24, 0.055) !important;
}

.seo-interlink-card::before,
.related-guide-card::before,
.seo-interlink-card:nth-child(4n + 1)::before,
.related-guide-card:nth-child(4n + 1)::before,
.seo-interlink-card:nth-child(4n + 2)::before,
.related-guide-card:nth-child(4n + 2)::before,
.seo-interlink-card:nth-child(4n + 3)::before,
.related-guide-card:nth-child(4n + 3)::before,
.seo-interlink-card:nth-child(4n + 4)::before,
.related-guide-card:nth-child(4n + 4)::before {
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-gold)) !important;
}

.seo-interlink-card:hover,
.seo-interlink-card:focus,
.related-guide-card:hover,
.related-guide-card:focus {
  border-color: rgba(197, 154, 24, 0.48) !important;
  box-shadow:
    inset 0 0 0 1px rgba(197, 154, 24, 0.18),
    0 16px 34px rgba(118, 6, 16, 0.13) !important;
}

.seo-interlink-card:hover::before,
.seo-interlink-card:focus::before,
.related-guide-card:hover::before,
.related-guide-card:focus::before {
  background: linear-gradient(90deg, var(--sf-gold), var(--sf-blood-red)) !important;
}

/* Titles: very subtle blood red, less gold */
.page-header h1,
.seo-interlinks h2,
section[class*="Interlinking"] h2,
.Interlinking.section h2,
.faq-section h2,
.amz-link .product-name,
.amz-link h2.product-name,
.amz-link .font-custom.product-name {
  color: #050505 !important;
  background: linear-gradient(
    180deg,
    #050505 0%,
    #050505 76%,
    #080405 91%,
    #4a0208 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(118, 6, 16, 0.045) !important;
}

.additional-h2,
.faq-item h3,
.seo-interlink-card span,
.related-guide-card span {
  color: #060606 !important;
  background: none !important;
  -webkit-text-fill-color: #060606 !important;
  text-shadow: 0 1px 0 rgba(118, 6, 16, 0.05) !important;
}

/* Footer: red/gold only */
.footer h4::after,
.footer .high-lighted-heading::after,
.footer .f-sec2 h4::after,
.footer .f-sec3 h4::after {
  background: linear-gradient(90deg, var(--sf-blood-red), var(--sf-gold)) !important;
}

.foot-tag-list span,
.foot-tag-list span:nth-child(3n + 1),
.foot-tag-list span:nth-child(3n + 2),
.foot-tag-list span:nth-child(3n + 3),
.foot-tag-list span:nth-child(4n + 1),
.foot-tag-list span:nth-child(4n + 2),
.foot-tag-list span:nth-child(4n + 3),
.foot-tag-list span:nth-child(4n + 4) {
  border-color: rgba(197, 154, 24, 0.44) !important;
  box-shadow: inset 0 0 0 1px rgba(118, 6, 16, 0.10) !important;
}

.social-icons-simple a,
.social-icons-simple li:nth-child(1) a,
.social-icons-simple li:nth-child(2) a,
.social-icons-simple li:nth-child(3) a {
  border-color: rgba(197, 154, 24, 0.44) !important;
  box-shadow: inset 0 0 0 1px rgba(118, 6, 16, 0.08) !important;
}

.social-icons-simple a:hover {
  background: linear-gradient(135deg, var(--sf-blood-red), var(--sf-gold)) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* =========================================================
   FINAL FIX: HERO H1 VISIBILITY + REMOVE LOGO DOT
   Paste at the very end of the CSS.
   ========================================================= */

/* Remove the small dot after the Sportif-Y logo */
.site-logo::after,
.site-logo:hover::after,
.site-logo:focus::after,
.site-header .site-logo::after,
.site-header .site-logo:hover::after,
.site-header .site-logo:focus::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep the logo always visible, without relying on hover */
.site-logo,
.site-logo:link,
.site-logo:visited,
.site-logo:hover,
.site-logo:focus,
.site-logo:active {
  opacity: 1 !important;
  visibility: visible !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: none !important;
  text-shadow: none !important;
}

.site-logo::before {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: none !important;
  text-shadow: none !important;
}

/* Hero H1 must be readable on the dark hero background */
.page-header h1,
.page-header .page-header-inner h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow:
    0 3px 0 rgba(118, 6, 16, 0.30),
    0 18px 46px rgba(0, 0, 0, 0.45) !important;
}

/* Very subtle blood-red depth only on the last visual line area */
.page-header h1::after {
  content: "";
  display: block;
  width: min(240px, 28vw);
  height: 4px;
  margin: 28px auto 0;
  background: linear-gradient(90deg, transparent, #760610 20%, #c59a18 50%, #760610 80%, transparent) !important;
  border-radius: 999px;
  opacity: 0.72;
}

/* Make the hero paragraph slightly stronger against the black background */
.page-header p,
.page-header .page-header-inner p {
  color: rgba(255, 255, 255, 0.90) !important;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.38) !important;
}
/* =========================================================
   SPORTIF-Y FIX: AMAZON BUTTON ALWAYS VISIBLE ON CARD HOVER
   Paste at the very end of the CSS
   ========================================================= */

.amz-link .amz-button,
.amz-link:link .amz-button,
.amz-link:visited .amz-button,
.amz-link:hover .amz-button,
.amz-link:focus .amz-button,
.amz-link:active .amz-button,
.amz-button,
.amz-button:hover,
.amz-button:focus,
.amz-button:active {
  position: relative !important;
  z-index: 20 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 250px !important;
  min-height: 48px !important;
  padding: 15px 32px !important;
  background: linear-gradient(135deg, #050505 0%, #111111 55%, #360006 100%) !important;
  color: #ffffff !important;
  border: 2px solid #050505 !important;
  border-bottom-color: #b08a2e !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(0.78rem, 0.82vw, 0.9rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

.amz-link .amz-button::before,
.amz-link:hover .amz-button::before,
.amz-button::before {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  margin-right: 12px !important;
  background: #8b000e !important;
  border: 1px solid #b08a2e !important;
  border-radius: 999px !important;
  opacity: 1 !important;
}

.amz-link .amz-button::after,
.amz-link:hover .amz-button::after,
.amz-button::after {
  content: "→" !important;
  display: inline-block !important;
  margin-left: 12px !important;
  color: #b08a2e !important;
  font-size: 17px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
}

.amz-link:hover .amz-button,
.amz-button:hover,
.amz-button:focus {
  background: linear-gradient(135deg, #8b000e 0%, #360006 55%, #050505 100%) !important;
  color: #ffffff !important;
  border-color: #8b000e !important;
  border-bottom-color: #b08a2e !important;
  box-shadow: 0 14px 34px rgba(139, 0, 14, 0.26) !important;
  transform: translateY(-2px) !important;
}

.amz-link:hover .amz-button *,
.amz-link:focus .amz-button *,
.amz-button:hover *,
.amz-button:focus * {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Prevent parent link/card hover rules from washing out the CTA text */
.amz-link:hover,
.amz-link:focus,
.amz-link:hover .text-center,
.amz-link:focus .text-center {
  color: inherit !important;
  opacity: 1 !important;
}

.amz-link .pt-4.text-center,
.amz-link:hover .pt-4.text-center {
  position: relative !important;
  z-index: 15 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 767.98px) {
  .amz-link .amz-button,
  .amz-link:hover .amz-button,
  .amz-button {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }
}
/* =========================================================
   SPORTIF-Y GENERATED CONTENT MODULES
   Styling for the new Excel-driven content blocks:
   breadcrumbs, summaries, TOC, quick picks, comparison table,
   methodology, buying guide, criteria, comparison notes,
   best-for, alternatives, category modules, mistakes,
   decision helper, care, author/reviewer, updated date, sources.
   Uses the existing Sportif-Y black / white / blood-red / gold system.
   ========================================================= */

:root {
  --sf-module-max: 1320px;
  --sf-module-narrow: 980px;
  --sf-module-pad-x: clamp(18px, 4vw, 64px);
  --sf-module-pad-y: clamp(56px, 7vw, 96px);
  --sf-module-card: #f7f7f7;
  --sf-module-card-strong: #f1f1f1;
  --sf-module-border: rgba(118, 6, 16, 0.14);
  --sf-module-gold-border: rgba(197, 154, 24, 0.34);
  --sf-module-muted: #666666;
}

/* ---------- Shared module foundations ---------- */

.visible-breadcrumbs,
.page-summary,
.table-of-contents,
.quick-picks,
.comparison-table,
.how-we-choose,
.buying-guide,
.key-criteria,
.product-comparison-notes,
.best-for-summary,
.alternatives,
.category-module,
.common-mistakes,
.decision-helper,
.care-maintenance,
.author-reviewer,
.sources-references {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  color: var(--sf-black, #000000) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
}

.page-summary,
.table-of-contents,
.quick-picks,
.comparison-table,
.how-we-choose,
.buying-guide,
.key-criteria,
.product-comparison-notes,
.best-for-summary,
.alternatives,
.category-module,
.common-mistakes,
.decision-helper,
.care-maintenance,
.sources-references {
  padding: var(--sf-module-pad-y) var(--sf-module-pad-x) !important;
  border-top: 1px solid var(--sf-module-border) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(118, 6, 16, 0.024), transparent 24%),
    radial-gradient(circle at 92% 8%, rgba(197, 154, 24, 0.028), transparent 26%),
    #ffffff !important;
}

.page-summary-inner,
.table-of-contents-inner,
.quick-picks-inner,
.comparison-table-inner,
.how-we-choose-inner,
.buying-guide-inner,
.key-criteria-inner {
  width: min(100%, var(--sf-module-max)) !important;
  margin: 0 auto !important;
}

.page-summary h2,
.table-of-contents h2,
.quick-picks h2,
.comparison-table h2,
.how-we-choose h2,
.buying-guide h2,
.key-criteria h2,
.product-comparison-notes h2,
.best-for-summary h2,
.alternatives h2,
.category-module h2,
.common-mistakes h2,
.decision-helper h2,
.care-maintenance h2,
.sources-references h2 {
  max-width: 1160px !important;
  margin: 0 0 clamp(24px, 3vw, 38px) !important;
  color: #050505 !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(2rem, 4vw, 4.5rem) !important;
  font-weight: 900 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.06em !important;
  text-transform: uppercase !important;
  background: linear-gradient(
    180deg,
    #050505 0%,
    #050505 78%,
    #080405 92%,
    #4a0208 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.page-summary h2::after,
.table-of-contents h2::after,
.quick-picks h2::after,
.comparison-table h2::after,
.how-we-choose h2::after,
.buying-guide h2::after,
.key-criteria h2::after,
.product-comparison-notes h2::after,
.best-for-summary h2::after,
.alternatives h2::after,
.category-module h2::after,
.common-mistakes h2::after,
.decision-helper h2::after,
.care-maintenance h2::after,
.sources-references h2::after {
  content: "" !important;
  display: block !important;
  width: clamp(58px, 6vw, 96px) !important;
  height: 4px !important;
  margin-top: 18px !important;
  background: linear-gradient(90deg, var(--sf-blood-red, #760610), var(--sf-gold, #c59a18)) !important;
  border-radius: 999px !important;
}

.page-summary p,
.table-of-contents p,
.quick-picks p,
.comparison-table p,
.how-we-choose p,
.buying-guide p,
.key-criteria p,
.product-comparison-notes p,
.best-for-summary p,
.alternatives p,
.category-module p,
.common-mistakes p,
.decision-helper p,
.care-maintenance p,
.author-reviewer p,
.sources-references p,
.last-updated {
  color: var(--sf-charcoal, #1f1f1f) !important;
  font-family: "Inter", Arial, Helvetica, sans-serif !important;
  font-size: clamp(0.94rem, 1vw, 1.04rem) !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
  letter-spacing: -0.01em !important;
}

.page-summary ul,
.table-of-contents ul,
.quick-picks ul,
.how-we-choose ul,
.buying-guide ul,
.key-criteria ul,
.product-comparison-notes ul,
.best-for-summary ul,
.alternatives ul,
.category-module ul,
.common-mistakes ul,
.decision-helper ul,
.care-maintenance ul,
.sources-references ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ---------- Visible breadcrumbs ---------- */

.visible-breadcrumbs {
  padding: 16px var(--sf-module-pad-x) !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(118, 6, 16, 0.10) !important;
}

.visible-breadcrumbs .breadcrumb-list {
  width: min(100%, var(--sf-module-max)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 12px !important;
  list-style: none !important;
}

.visible-breadcrumbs .breadcrumb-item {
  color: #6d6d6d !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
}

.visible-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  content: "/" !important;
  margin-right: 12px !important;
  color: var(--sf-gold, #c59a18) !important;
}

.visible-breadcrumbs a {
  color: #111111 !important;
}

.visible-breadcrumbs a:hover,
.visible-breadcrumbs a:focus {
  color: var(--sf-blood-red, #760610) !important;
}

/* ---------- Page summary ---------- */

.page-summary {
  padding-top: clamp(42px, 5vw, 72px) !important;
  padding-bottom: clamp(42px, 5vw, 72px) !important;
  background: #f8f8f8 !important;
}

.page-summary-inner {
  padding: clamp(28px, 4vw, 48px) !important;
  background: #ffffff !important;
  border: 1px solid var(--sf-module-border) !important;
  border-left: 5px solid var(--sf-blood-red, #760610) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.05) !important;
}

.page-summary h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.8rem) !important;
  margin-bottom: 18px !important;
}

.page-summary h2::after {
  width: 54px !important;
  height: 3px !important;
  margin-top: 12px !important;
}

.page-summary p {
  max-width: 1000px !important;
  margin: 0 !important;
  font-size: clamp(1rem, 1.15vw, 1.12rem) !important;
}

/* ---------- Table of contents ---------- */

.table-of-contents {
  background: #ffffff !important;
}

.table-of-contents-inner {
  padding: clamp(28px, 4vw, 46px) !important;
  background: #050505 !important;
  color: #ffffff !important;
  border-bottom: 4px solid var(--sf-gold, #c59a18) !important;
}

.table-of-contents h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  font-size: clamp(1.8rem, 3vw, 3.4rem) !important;
}

.table-of-contents h2::after {
  background: linear-gradient(90deg, var(--sf-blood-red, #760610), var(--sf-gold, #c59a18)) !important;
}

.table-of-contents ul {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.table-of-contents li {
  min-width: 0 !important;
}

.table-of-contents a {
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  color: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

.table-of-contents a::before {
  content: "→" !important;
  margin-right: 10px !important;
  color: var(--sf-gold, #c59a18) !important;
}

.table-of-contents a:hover,
.table-of-contents a:focus {
  color: #ffffff !important;
  border-color: var(--sf-gold, #c59a18) !important;
  background: rgba(118, 6, 16, 0.32) !important;
  transform: translateY(-2px) !important;
}

/* ---------- Quick Picks ---------- */

.quick-picks {
  background: #f7f7f7 !important;
}

.quick-picks-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.quick-pick-card {
  min-height: 160px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid var(--sf-module-border) !important;
  box-shadow: inset 0 0 0 1px rgba(197, 154, 24, 0.04) !important;
}

.quick-pick-card::before {
  content: "" !important;
  display: block !important;
  width: 48px !important;
  height: 4px !important;
  margin-bottom: 24px !important;
  background: linear-gradient(90deg, var(--sf-blood-red, #760610), var(--sf-gold, #c59a18)) !important;
}

.quick-pick-label {
  display: block !important;
  margin-bottom: 12px !important;
  color: var(--sf-blood-red, #760610) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.quick-pick-card strong {
  color: #060606 !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(0.98rem, 1.2vw, 1.28rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em !important;
}

/* ---------- Comparison table ---------- */

.comparison-table {
  background: #ffffff !important;
}

.comparison-table .table-responsive {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid var(--sf-module-border) !important;
}

.comparison-table table {
  width: 100% !important;
  min-width: 760px !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  background: #ffffff !important;
}

.comparison-table thead {
  background: #050505 !important;
}

.comparison-table th {
  padding: 17px 18px !important;
  color: #ffffff !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.comparison-table td {
  padding: 18px !important;
  color: #202020 !important;
  font-size: 0.92rem !important;
  line-height: 1.52 !important;
  vertical-align: top !important;
  border-bottom: 1px solid rgba(118, 6, 16, 0.11) !important;
}

.comparison-table tbody tr:nth-child(even) {
  background: #f8f8f8 !important;
}

.comparison-table tbody tr:hover {
  background: rgba(197, 154, 24, 0.06) !important;
}

.comparison-table td:first-child {
  color: #050505 !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.comparison-table td a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 15px !important;
  color: #ffffff !important;
  background: #050505 !important;
  border-bottom: 2px solid var(--sf-gold, #c59a18) !important;
  border-radius: 999px !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.comparison-table td a:hover,
.comparison-table td a:focus {
  background: var(--sf-blood-red, #760610) !important;
  color: #ffffff !important;
}

/* ---------- How we choose / Buying guide / Key criteria ---------- */

.how-we-choose,
.key-criteria {
  background: #f7f7f7 !important;
}

.how-we-choose ul,
.key-criteria-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

.how-we-choose li,
.key-criteria-list li {
  position: relative !important;
  min-height: 92px !important;
  padding: 20px 18px 18px !important;
  background: #ffffff !important;
  border: 1px solid var(--sf-module-border) !important;
  color: #111111 !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

.how-we-choose li::before,
.key-criteria-list li::before {
  content: "" !important;
  display: block !important;
  width: 34px !important;
  height: 3px !important;
  margin-bottom: 16px !important;
  background: linear-gradient(90deg, var(--sf-blood-red, #760610), var(--sf-gold, #c59a18)) !important;
}

.buying-guide {
  background: #ffffff !important;
}

.buying-guide-subtitle {
  margin-top: -12px !important;
  margin-bottom: 18px !important;
  color: var(--sf-blood-red, #760610) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.buying-guide-context {
  max-width: 980px !important;
  margin-bottom: 34px !important;
}

.buying-guide-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.buying-guide-step {
  position: relative !important;
  min-height: 220px !important;
  padding: 28px !important;
  background: #f8f8f8 !important;
  border: 1px solid var(--sf-module-border) !important;
}

.buying-guide-step::before {
  content: "" !important;
  display: block !important;
  width: 52px !important;
  height: 5px !important;
  margin-bottom: 24px !important;
  background: linear-gradient(90deg, var(--sf-blood-red, #760610), var(--sf-gold, #c59a18)) !important;
}

.buying-guide-step h3 {
  margin: 0 0 14px !important;
  color: #050505 !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: clamp(1.15rem, 1.5vw, 1.55rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
}

.buying-guide-step p {
  margin: 0 !important;
}

/* ---------- Comparison notes / Best-for / Alternatives ---------- */

.product-comparison-notes,
.best-for-summary,
.alternatives {
  width: 100% !important;
}

.product-comparison-notes > *,
.best-for-summary > *,
.alternatives > *,
.category-module > *,
.common-mistakes > *,
.decision-helper > *,
.care-maintenance > *,
.sources-references > * {
  width: min(100%, var(--sf-module-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.product-comparison-notes ul,
.best-for-summary ul,
.alternatives ul,
.common-mistakes ul,
.decision-helper ul,
.sources-references ul {
  display: grid !important;
  gap: 10px !important;
}

.product-comparison-notes li,
.best-for-summary li,
.alternatives li,
.common-mistakes li,
.decision-helper li,
.sources-references li {
  position: relative !important;
  padding: 18px 20px 18px 44px !important;
  background: #f8f8f8 !important;
  border: 1px solid var(--sf-module-border) !important;
  color: #222222 !important;
  font-size: 0.94rem !important;
  line-height: 1.55 !important;
}

.product-comparison-notes li::before,
.best-for-summary li::before,
.alternatives li::before,
.common-mistakes li::before,
.decision-helper li::before,
.sources-references li::before {
  content: "" !important;
  position: absolute !important;
  left: 19px !important;
  top: 24px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--sf-blood-red, #760610), var(--sf-gold, #c59a18)) !important;
}

.product-comparison-notes strong,
.best-for-summary strong,
.alternatives strong,
.decision-helper strong {
  color: #050505 !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.best-for-summary {
  background: #050505 !important;
}

.best-for-summary h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}

.best-for-summary li {
  background: #111111 !important;
  color: rgba(255, 255, 255, 0.80) !important;
  border-color: rgba(197, 154, 24, 0.20) !important;
}

.best-for-summary strong {
  color: #ffffff !important;
}

.best-for-summary span {
  color: var(--sf-gold, #c59a18) !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

/* ---------- Category modules ---------- */

.category-module {
  border-top: 0 !important;
}

.category-module-1 {
  background: #ffffff !important;
}

.category-module-2 {
  background: #f7f7f7 !important;
}

.category-module-3 {
  background: #ffffff !important;
}

.category-module + .category-module {
  border-top: 1px solid var(--sf-module-border) !important;
}

.category-module p {
  max-width: 960px !important;
}

.category-module ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

.category-module li {
  padding: 10px 15px !important;
  background: #050505 !important;
  color: #ffffff !important;
  border-bottom: 2px solid var(--sf-gold, #c59a18) !important;
  border-radius: 999px !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* ---------- Mistakes / Decision / Care ---------- */

.common-mistakes {
  background: #f7f7f7 !important;
}

.common-mistakes li {
  background: #ffffff !important;
}

.decision-helper {
  background: #ffffff !important;
}

.decision-helper li {
  border-left: 4px solid var(--sf-blood-red, #760610) !important;
}

.care-maintenance {
  background: #050505 !important;
  color: #ffffff !important;
}

.care-maintenance h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}

.care-maintenance p {
  max-width: 980px !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

/* ---------- Author / reviewer / updated date ---------- */

.author-reviewer {
  width: min(100% - 36px, var(--sf-module-max)) !important;
  margin: clamp(36px, 5vw, 68px) auto 0 !important;
  padding: 22px 24px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  background: #f7f7f7 !important;
  border: 1px solid var(--sf-module-border) !important;
  border-left: 5px solid var(--sf-blood-red, #760610) !important;
}

.author-reviewer p {
  margin: 0 !important;
}

.author-reviewer strong {
  color: #050505 !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
}

.last-updated {
  width: min(100% - 36px, var(--sf-module-max)) !important;
  margin: 12px auto clamp(34px, 5vw, 64px) !important;
  padding: 0 4px !important;
  color: #777777 !important;
  font-size: 0.84rem !important;
}

.last-updated strong {
  color: #111111 !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* ---------- Sources & references ---------- */

.sources-references {
  background: #f7f7f7 !important;
}

.sources-references a {
  color: #111111 !important;
  font-family: "Archivo", Arial, Helvetica, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.sources-references a:hover,
.sources-references a:focus {
  color: var(--sf-blood-red, #760610) !important;
}

/* ---------- Anchor scrolling ---------- */

#quick-picks,
#comparison-table,
#how-we-choose,
#buying-guide,
#key-criteria,
#common-mistakes,
#decision-helper,
#care-maintenance,
#faqs {
  scroll-margin-top: 96px !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
  .table-of-contents ul,
  .quick-picks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .how-we-choose ul,
  .key-criteria-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 991.98px) {
  .page-summary,
  .table-of-contents,
  .quick-picks,
  .comparison-table,
  .how-we-choose,
  .buying-guide,
  .key-criteria,
  .product-comparison-notes,
  .best-for-summary,
  .alternatives,
  .category-module,
  .common-mistakes,
  .decision-helper,
  .care-maintenance,
  .sources-references {
    padding: 54px 22px !important;
  }

  .buying-guide-grid {
    grid-template-columns: 1fr !important;
  }

  .buying-guide-step {
    min-height: auto !important;
  }

  .how-we-choose ul,
  .key-criteria-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .author-reviewer {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767.98px) {
  .visible-breadcrumbs {
    padding: 13px 18px !important;
  }

  .visible-breadcrumbs .breadcrumb-item {
    font-size: 0.68rem !important;
  }

  .page-summary,
  .table-of-contents,
  .quick-picks,
  .comparison-table,
  .how-we-choose,
  .buying-guide,
  .key-criteria,
  .product-comparison-notes,
  .best-for-summary,
  .alternatives,
  .category-module,
  .common-mistakes,
  .decision-helper,
  .care-maintenance,
  .sources-references {
    padding: 46px 18px !important;
  }

  .page-summary h2,
  .table-of-contents h2,
  .quick-picks h2,
  .comparison-table h2,
  .how-we-choose h2,
  .buying-guide h2,
  .key-criteria h2,
  .product-comparison-notes h2,
  .best-for-summary h2,
  .alternatives h2,
  .category-module h2,
  .common-mistakes h2,
  .decision-helper h2,
  .care-maintenance h2,
  .sources-references h2 {
    font-size: clamp(1.8rem, 9vw, 3rem) !important;
  }

  .table-of-contents ul,
  .quick-picks-grid,
  .how-we-choose ul,
  .key-criteria-list {
    grid-template-columns: 1fr !important;
  }

  .quick-pick-card,
  .how-we-choose li,
  .key-criteria-list li {
    min-height: auto !important;
  }

  .comparison-table table {
    min-width: 680px !important;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 14px !important;
  }

  .product-comparison-notes li,
  .best-for-summary li,
  .alternatives li,
  .common-mistakes li,
  .decision-helper li,
  .sources-references li {
    padding: 16px 16px 16px 40px !important;
  }

  .author-reviewer {
    width: calc(100% - 36px) !important;
    margin-top: 32px !important;
    padding: 20px !important;
  }

  .last-updated {
    width: calc(100% - 36px) !important;
  }
}

/* Keep schema-only script blocks invisible by nature; no visual CSS needed:
   Article Schema Code, ItemList Schema Code, FAQ Schema Code.
*/

/* =====================================================================
   TSA SEO / COMMERCE LAYER 2 — MODULAR MOSAIC
   Keeps this site's identity while breaking the old linear product rhythm.
   Layout is deterministic, responsive and designed around editorial/product
   discovery rather than random visual noise.
   ===================================================================== */

body.tsa-generated {
  --tsa-site-accent: var(--sf-red,#e60023);
  --tsa-site-ink: var(--sf-black,#000);
  --tsa-site-panel: var(--sf-offwhite,#f5f5f5);
  --tsa-site-paper: var(--sf-white,#fff);
  --tsa-site-radius: 0px;
}

body.tsa-generated .ComparisonTable.section {
  padding: clamp(18px,3vw,42px) 0 !important;
  background: var(--tsa-site-paper) !important;
}

@media (min-width: 900px) {
  body.tsa-generated .ComparisonTable .container-fluid {
    display: grid !important;
    grid-template-columns: repeat(12,minmax(0,1fr)) !important;
    gap: clamp(12px,1.6vw,26px) !important;
    align-items: stretch !important;
    max-width: 1720px !important;
    margin: 0 auto !important;
    padding: 0 clamp(12px,2vw,30px) !important;
  }

  body.tsa-generated .ComparisonTable .amz-link {
    grid-column: span 6 !important;
    min-width: 0 !important;
  }
  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n+1) { grid-column: span 8 !important; }
  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n+2) { grid-column: span 4 !important; }
  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n+3) { grid-column: span 5 !important; }
  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n+4) { grid-column: span 7 !important; }
  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n+5) { grid-column: span 4 !important; }
  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n+6) { grid-column: span 8 !important; }
  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n) { grid-column: span 12 !important; }

  body.tsa-generated .ComparisonTable .amz-link > .row {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(24px,3vw,44px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    border: 1px solid color-mix(in srgb, var(--tsa-site-ink) 14%, transparent) !important;
    border-radius: var(--tsa-site-radius) !important;
    background: var(--tsa-site-paper) !important;
    box-sizing: border-box !important;
  }

  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n) > .row {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: clamp(22px,3vw,52px) !important;
    align-items: center !important;
  }

  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n+2) > .row,
  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n+5) > .row {
    background: var(--tsa-site-panel) !important;
  }

  body.tsa-generated .ComparisonTable .custom-image-container,
  body.tsa-generated .ComparisonTable img.custom-image {
    height: clamp(220px,26vw,390px) !important;
    min-height: 0 !important;
    max-height: 390px !important;
  }

  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n) .custom-image-container,
  body.tsa-generated .ComparisonTable .amz-link:nth-of-type(7n) img.custom-image {
    height: clamp(300px,32vw,500px) !important;
    max-height: 500px !important;
  }
}

body.tsa-generated :is(.quick-picks,.key-criteria,.buying-guide,.best-for-summary,.alternatives,.common-mistakes,.decision-helper,.care-maintenance,.product-comparison-notes) {
  position: relative !important;
  background: var(--tsa-site-paper) !important;
}

body.tsa-generated :is(.quick-picks-grid,.buying-guide-grid,.key-criteria-list,.related-guides-grid,.seo-interlink-grid) {
  align-items: stretch !important;
}

body.tsa-generated :is(.quick-pick-card,.buying-guide-step,.seo-interlink-card,.related-guide-card) {
  border-radius: var(--tsa-site-radius) !important;
  overflow: hidden !important;
}

body.tsa-generated :is(.quick-pick-card,.buying-guide-step,.seo-interlink-card,.related-guide-card)::before {
  background: var(--tsa-site-accent) !important;
}

body.tsa-generated.tsa-editorial .tsa-editorial-hero {
  position: relative !important;
}
body.tsa-generated.tsa-editorial .tsa-editorial-hero::after {
  content: "" !important;
  display: block !important;
  width: min(140px,28vw) !important;
  height: 4px !important;
  margin-top: 28px !important;
  background: var(--tsa-site-accent) !important;
}

body.tsa-generated.tsa-editorial :is(.tsa-editorial-intro,.tsa-editorial-trend,.tsa-editorial-criteria,.tsa-editorial-detail,.tsa-editorial-products,.tsa-editorial-mistakes,.tsa-editorial-questions,.tsa-related-editorial,.tsa-editorial-faq,.tsa-editorial-source) {
  border-radius: var(--tsa-site-radius) !important;
}

body.tsa-generated.tsa-editorial .tsa-product-tile {
  border-radius: var(--tsa-site-radius) !important;
  background: var(--tsa-site-paper) !important;
}
body.tsa-generated.tsa-editorial .tsa-product-tile img {
  border-radius: var(--tsa-site-radius) !important;
}
body.tsa-generated.tsa-editorial .tsa-affiliate-search {
  background: var(--tsa-site-ink) !important;
  border: 1px solid var(--tsa-site-ink) !important;
}
body.tsa-generated.tsa-editorial .tsa-affiliate-search:hover,
body.tsa-generated.tsa-editorial .tsa-affiliate-search:focus {
  background: var(--tsa-site-accent) !important;
  border-color: var(--tsa-site-accent) !important;
}

@media (max-width: 899px) {
  body.tsa-generated .ComparisonTable .container-fluid {
    display: block !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.tsa-generated .ComparisonTable .amz-link {
    display: block !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }
  body.tsa-generated .ComparisonTable .amz-link > .row {
    display: block !important;
    padding: 28px 16px 34px !important;
  }
  body.tsa-generated .ComparisonTable .custom-image-container,
  body.tsa-generated .ComparisonTable img.custom-image {
    height: 300px !important;
    max-height: 300px !important;
  }
}

@media (max-width: 480px) {
  body.tsa-generated .ComparisonTable .custom-image-container,
  body.tsa-generated .ComparisonTable img.custom-image {
    height: 250px !important;
    max-height: 250px !important;
  }
}

/* =========================================================
   SPORTIF-Y MOBILE LEGAL / INFORMATION PAGE FIX
   Keeps the current visual identity while preventing headings,
   TOCs, tables and policy text from overflowing narrow screens.
   ========================================================= */
@media (max-width: 767.98px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .privacy-content,
  .legal-content,
  .policy-content,
  .terms-content,
  .affiliate-content,
  .contact-content,
  main > .box,
  body > .box,
  .box {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .privacy-content article,
  .privacy-section,
  .privacy-highlight,
  .privacy-contact-box,
  .privacy-details,
  .privacy-toc,
  .privacy-toc-card,
  main > .box > *,
  .box > * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .privacy-section h1,
  .privacy-section h2,
  .privacy-section h3,
  .privacy-toc h2,
  .privacy-content h1,
  .privacy-content h2,
  .privacy-content h3,
  .box h1,
  .box h2,
  .box h3 {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }

  .privacy-section h2,
  .privacy-content h2,
  .box h2 {
    font-size: clamp(1.55rem, 7.6vw, 2.35rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    text-align: left !important;
  }

  .privacy-section h3,
  .privacy-content h3,
  .box h3 {
    font-size: clamp(1.08rem, 5.4vw, 1.55rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
  }

  .privacy-section p,
  .privacy-section li,
  .privacy-section dd,
  .privacy-section td,
  .privacy-content p,
  .privacy-content li,
  .box p,
  .box li {
    max-width: 100% !important;
    font-size: 0.96rem !important;
    line-height: 1.68 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .privacy-table-wrapper,
  .privacy-table,
  .box table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }

  .privacy-toc-grid,
  .privacy-definition-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .privacy-toc-card,
  .privacy-definition-list > * {
    min-width: 0 !important;
  }

  .page-header,
  .page-header-inner {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}