/* Maido Customs Stage 4M
   Match Popular Mods card size to the A90/BMW product section cards.
   Overlay only: no hero/header/mobile/search/admin CSS touched. */

html body .maido-popular-mods.maido-popular-mods--stage4l {
  padding-top: clamp(54px, 6vw, 96px) !important;
  padding-bottom: clamp(58px, 6.2vw, 102px) !important;
}

html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__container {
  width: min(1520px, calc(100% - 56px)) !important;
}

/* Show four large cards across desktop, matching the sections below. */
html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__track {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-rows: 1fr !important;
  gap: clamp(28px, 2.8vw, 42px) clamp(24px, 2.4vw, 36px) !important;
  padding: 0 0 28px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
}

@media (min-width: 1180px) {
  html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__track {
    grid-auto-columns: calc((100% - (3 * clamp(24px, 2.4vw, 36px))) / 4) !important;
  }
}

html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__card {
  scroll-snap-align: start !important;
  min-width: 0 !important;
}

/* Match the A90/BMW product cards below. */
html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__image {
  aspect-ratio: 1 / 1 !important;
  border-radius: 24px !important;
  border: 1px solid #e9e9ee !important;
  background: #f6f6f8 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .055) !important;
}

html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__img {
  padding: clamp(12px, 1.25vw, 22px) !important;
}

html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__body {
  padding-top: 16px !important;
}

html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__body h3 {
  max-width: 340px !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  margin: 0 auto 9px !important;
}

html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #007a68 !important;
}

html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__badge {
  left: 16px !important;
  top: 16px !important;
}

html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__arrow {
  top: 39% !important;
  width: 48px !important;
  height: 48px !important;
}

html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__arrow--prev {
  left: -22px !important;
}

html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__arrow--next {
  right: -22px !important;
}

@media (max-width: 1179px) {
  html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__track {
    grid-auto-columns: minmax(280px, 42vw) !important;
  }
}

@media (max-width: 900px) {
  html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__container {
    width: min(100% - 30px, 760px) !important;
  }

  html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__track {
    grid-auto-columns: minmax(250px, 72vw) !important;
    gap: 24px 18px !important;
  }
}

@media (max-width: 520px) {
  html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__container {
    width: min(100% - 24px, 440px) !important;
  }

  html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__track {
    grid-auto-columns: 86vw !important;
  }

  html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__body h3 {
    font-size: 15px !important;
  }
}
/* ----------------------------------------------------------------------
   Stage 5F FINAL: product prices + blue capsules + payment logo fallback
   ----------------------------------------------------------------------
   This block is intentionally strong because some homepage product-section
   styles are loaded inside the page after the header CSS.
*/

html body .product-card .product-card__body,
html body .product-grid .product-card .product-card__body,
html body .maido-stage4k-card .maido-stage4k-card__body,
html body .maido-popular-mods .maido-popular-mods__body {
  text-align: center !important;
  align-items: center !important;
}

html body .product-card .product-card__body h3,
html body .product-card .product-card__body .muted,
html body .product-card .product-card__body .price,
html body .maido-stage4k-card .maido-stage4k-card__body h3,
html body .maido-popular-mods .maido-popular-mods__body h3,
html body .maido-stage4k-card .maido-stage4k-card__price,
html body .maido-popular-mods .maido-popular-mods__price,
html body .maido-stage4k-card .maido-stage4k-card__body .maido-stage4k-card__price,
html body .maido-popular-mods .maido-popular-mods__body .maido-popular-mods__price,
html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__card .maido-popular-mods__body .maido-popular-mods__price,
html body .maido-stage4l-home-sections .maido-stage4k-card.maido-stage4l-card .maido-stage4k-card__body .maido-stage4k-card__price {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .product-card .product-card__body .price,
html body .product-grid .product-card .product-card__body .price,
html body .maido-stage4k-card .maido-stage4k-card__body .maido-stage4k-card__price,
html body .maido-popular-mods .maido-popular-mods__body .maido-popular-mods__price,
html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__card .maido-popular-mods__body .maido-popular-mods__price,
html body .maido-stage4l-home-sections .maido-stage4k-card.maido-stage4l-card .maido-stage4k-card__body .maido-stage4k-card__price {
  display: block !important;
  width: 100% !important;
  color: #00e676 !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

html body .product-card .product-card__body .price,
html body .product-grid .product-card .product-card__body .price {
  font-size: 20px !important;
  margin: 8px auto 14px !important;
}

html body .maido-stage4k-card .maido-stage4k-card__body .maido-stage4k-card__price,
html body .maido-popular-mods .maido-popular-mods__body .maido-popular-mods__price,
html body .maido-popular-mods.maido-popular-mods--stage4l .maido-popular-mods__card .maido-popular-mods__body .maido-popular-mods__price,
html body .maido-stage4l-home-sections .maido-stage4k-card.maido-stage4l-card .maido-stage4k-card__body .maido-stage4k-card__price {
  font-size: 16px !important;
  margin: 8px auto 13px !important;
}

html body .product-card .product-card__body .btn,
html body .product-card .product-card__body .btn.btn--small,
html body .product-grid .product-card .product-card__body .btn,
html body .maido-stage4l-view-more,
html body .maido-stage4l-card .maido-stage4l-view-more,
html body .maido-popular-mods .maido-stage4l-view-more,
html body .maido-popular-mods.maido-popular-mods--stage4l .maido-stage4l-view-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  min-height: 38px !important;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  background: #006eff !important;
  border: 1px solid #006eff !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  text-transform: none !important;
  box-shadow: 0 12px 24px rgba(0, 110, 255, .25) !important;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html body .product-card .product-card__body .btn:hover,
html body .product-card .product-card__body .btn:focus-visible,
html body .product-grid .product-card .product-card__body .btn:hover,
html body .product-grid .product-card .product-card__body .btn:focus-visible,
html body .maido-stage4l-view-more:hover,
html body .maido-stage4l-view-more:focus-visible,
html body .maido-stage4l-card .maido-stage4l-view-more:hover,
html body .maido-stage4l-card .maido-stage4l-view-more:focus-visible,
html body .maido-popular-mods .maido-stage4l-view-more:hover,
html body .maido-popular-mods .maido-stage4l-view-more:focus-visible {
  background: #0057d8 !important;
  border-color: #0057d8 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 15px 30px rgba(0, 87, 216, .30) !important;
}

/* Payment logos: works with both the old JS text spans and the new image output. */
html body .maido-stage3k-payments,
html body .maido-stage3k-footer .maido-stage3k-payments,
html body .footer-payments.maido-stage3k-payments {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 14px 20px !important;
  text-align: center !important;
  padding: 8px 20px 44px !important;
  background: transparent !important;
}

html body .maido-stage3k-payments span {
  display: inline-block !important;
  width: 92px !important;
  min-width: 92px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

html body .maido-stage3k-payments span:nth-child(1) { background-image: url('/assets/img/payments/visa.svg') !important; }
html body .maido-stage3k-payments span:nth-child(2) { background-image: url('/assets/img/payments/mastercard.svg') !important; }
html body .maido-stage3k-payments span:nth-child(3) { background-image: url('/assets/img/payments/amex.svg') !important; }
html body .maido-stage3k-payments span:nth-child(4) { background-image: url('/assets/img/payments/discover.svg') !important; width: 112px !important; min-width: 112px !important; }
html body .maido-stage3k-payments span:nth-child(5) { background-image: url('/assets/img/payments/paypal.svg') !important; }
html body .maido-stage3k-payments span:nth-child(6) { background-image: url('/assets/img/payments/stripe.svg') !important; }

html body .maido-stage3k-payments::after {
  content: "" !important;
  display: inline-block !important;
  width: 104px !important;
  height: 38px !important;
  background: transparent url('/assets/img/payments/apple-pay.svg') center center / contain no-repeat !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .maido-stage3k-payments.maido-stage3k-payments--icons::after {
  content: none !important;
  display: none !important;
}

html body .maido-stage3k-payment-img,
html body .footer-payment-img {
  display: block !important;
  width: auto !important;
  height: 38px !important;
  max-width: 128px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@supports selector(:has(*)) {
  html body .maido-stage3k-payments:has(.maido-stage3k-payment-img)::after,
  html body .maido-stage3k-payments:has(.footer-payment-img)::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 640px) {
  html body .maido-stage3k-payments,
  html body .maido-stage3k-footer .maido-stage3k-payments,
  html body .footer-payments.maido-stage3k-payments {
    gap: 10px 12px !important;
    padding-bottom: 34px !important;
  }
  html body .maido-stage3k-payments span,
  html body .maido-stage3k-payment-img,
  html body .footer-payment-img,
  html body .maido-stage3k-payments::after {
    height: 30px !important;
    max-width: 106px !important;
  }
  html body .maido-stage3k-payments span {
    width: 78px !important;
    min-width: 78px !important;
  }
}