/*
  Maido Customs Stage 4W
  - Admin-controlled hero images for home/inner pages
  - Fixes desktop dropdown hover gap so subcategories do not disappear
  - Hides old duplicate page-hero blocks when the unified hero is active
*/

/* Use the image chosen in Admin > Hero Images. Stage 4T made the hero layout consistent; Stage 4W makes the image variables dynamic. */
html body.maido-stage3k-home .landing-hero {
  background-image: var(--hero-desktop, var(--maido-4t-hero-image)) !important;
}

html body.maido-stage4i-inner-page .maido-stage4i-inner-hero {
  background-image: var(--maido-stage4i-inner-hero-image, var(--maido-4t-hero-image)) !important;
}

@media (max-width: 760px) {
  html body.maido-stage3k-home .landing-hero {
    background-image: var(--hero-mobile, var(--hero-desktop, url('/image/catalog/imgs/banner-mble-1.png'))) !important;
  }
  html body.maido-stage4i-inner-page .maido-stage4i-inner-hero {
    background-image: var(--maido-stage4i-inner-hero-mobile-image, var(--maido-stage4i-inner-hero-image, url('/image/catalog/imgs/banner-mble-1.png'))) !important;
  }
}

/* Once the unified inner hero is active, do not show the old small page-hero title block again below it. */
html body.maido-stage4i-inner-page main.maido-stage4i-main > .page-hero:first-child,
html body.maido-stage4i-inner-page main.maido-stage4i-main > section.page-hero:first-child {
  display: none !important;
}

/* ----------------------------------------------------------------------
   Desktop category dropdown hover bridge
   ---------------------------------------------------------------------- */
@media (min-width: 1181px) {
  html body.has-hero-header .site-header .main-nav .nav-item--has-dropdown,
  html body.has-hero-header .site-header .main-nav .maido-stage3k-top-category,
  html body.maido-stage4i-inner-page .site-header .main-nav .nav-item--has-dropdown,
  html body.maido-stage4i-inner-page .site-header .main-nav .maido-stage3k-top-category {
    position: relative !important;
  }

  /* This invisible bridge covers the mouse gap between the parent menu item and the dropdown. */
  html body.has-hero-header .site-header .main-nav .nav-item--has-dropdown::after,
  html body.has-hero-header .site-header .main-nav .maido-stage3k-top-category::after,
  html body.maido-stage4i-inner-page .site-header .main-nav .nav-item--has-dropdown::after,
  html body.maido-stage4i-inner-page .site-header .main-nav .maido-stage3k-top-category::after {
    content: "" !important;
    position: absolute !important;
    left: -28px !important;
    right: -28px !important;
    top: 100% !important;
    height: 30px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 10049 !important;
  }

  html body.has-hero-header .site-header .main-nav .maido-stage3k-menu-panel,
  html body.maido-stage4i-inner-page .site-header .main-nav .maido-stage3k-menu-panel {
    top: calc(100% + 0px) !important;
    margin-top: 0 !important;
    z-index: 10050 !important;
  }

  html body.has-hero-header .site-header .main-nav .nav-item--has-dropdown:hover > .maido-stage3k-menu-panel,
  html body.has-hero-header .site-header .main-nav .nav-item--has-dropdown:focus-within > .maido-stage3k-menu-panel,
  html body.has-hero-header .site-header .main-nav .maido-stage3k-top-category:hover > .maido-stage3k-menu-panel,
  html body.has-hero-header .site-header .main-nav .maido-stage3k-top-category:focus-within > .maido-stage3k-menu-panel,
  html body.maido-stage4i-inner-page .site-header .main-nav .nav-item--has-dropdown:hover > .maido-stage3k-menu-panel,
  html body.maido-stage4i-inner-page .site-header .main-nav .nav-item--has-dropdown:focus-within > .maido-stage3k-menu-panel,
  html body.maido-stage4i-inner-page .site-header .main-nav .maido-stage3k-top-category:hover > .maido-stage3k-menu-panel,
  html body.maido-stage4i-inner-page .site-header .main-nav .maido-stage3k-top-category:focus-within > .maido-stage3k-menu-panel {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* ----------------------------------------------------------------------
   Stage 4X: remove desktop dropdown top triangle
   ----------------------------------------------------------------------
   The hover bridge is now handled by the parent nav item ::after rule above,
   so the dropdown panel no longer needs the white diamond/triangle pointer.
*/
@media (min-width: 1181px) {
  html body .site-header .main-nav .maido-stage3k-menu-panel::before,
  html body.has-hero-header .site-header .main-nav .maido-stage3k-menu-panel::before,
  html body.has-hero-header .site-header--hero .main-nav .maido-stage3k-menu-panel::before,
  html body.maido-stage4i-inner-page .site-header .main-nav .maido-stage3k-menu-panel::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }
}

/* ----------------------------------------------------------------------
   Stage 5C: product card price + View Product capsule polish
   ----------------------------------------------------------------------
   - Centres product card text/price.
   - Makes card prices bright green.
   - Makes View Product/View More capsules blue.
   - Targets product grid cards and home page product sections only; it does
     not change the large product-detail page price.
*/

html body .product-card .product-card__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 {
  width: 100% !important;
  text-align: center !important;
}

html body .product-card .product-card__body .price,
html body .product-grid .product-card .price {
  color: #00c853 !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin: 6px auto 12px !important;
}

html body .product-card .product-card__body .btn,
html body .product-card .product-card__body .btn.btn--small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  min-height: 36px !important;
  margin: auto auto 0 !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  background: #007bff !important;
  border-color: #007bff !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(0, 123, 255, .22) !important;
}

html body .product-card .product-card__body .btn:hover,
html body .product-card .product-card__body .btn:focus-visible {
  background: #005fd1 !important;
  border-color: #005fd1 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 13px 26px rgba(0, 95, 209, .28) !important;
}

/* Home page product sections and Popular Mods cards. */
html body .maido-stage4k-card__body,
html body .maido-popular-mods__body {
  text-align: center !important;
}

html body .maido-stage4k-card__body h3,
html body .maido-popular-mods__body h3,
html body .maido-stage4k-card__price,
html body .maido-popular-mods__price {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .maido-stage4k-card__price,
html body .maido-popular-mods__price {
  display: block !important;
  width: 100% !important;
  color: #00c853 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

html body .maido-stage4l-view-more {
  background: #007bff !important;
  border-color: #007bff !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(0, 123, 255, .22) !important;
}

html body .maido-stage4l-view-more:hover,
html body .maido-stage4l-view-more:focus-visible {
  background: #005fd1 !important;
  border-color: #005fd1 !important;
  color: #ffffff !important;
  box-shadow: 0 13px 26px rgba(0, 95, 209, .28) !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;
  }
}