/*
 * YOKO Kids v3.4.9
 * Rey Split Slider clipping fix, homepage category cleanup and wholesale
 * quote hover state.
 */

/* Product quote CTA: purple background with readable white text on hover. */
body.single-product .yoko-pdp .yoko-button--quote:hover,
body.single-product .yoko-pdp .yoko-button--quote:focus-visible {
  border-color: var(--yoko-primary) !important;
  background: var(--yoko-primary) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.single-product .yoko-pdp .yoko-button--quote:hover img,
body.single-product .yoko-pdp .yoko-button--quote:focus-visible img {
  filter: brightness(0) invert(1) !important;
}
body.single-product .yoko-pdp .yoko-button--quote:hover svg,
body.single-product .yoko-pdp .yoko-button--quote:focus-visible svg {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Remove the duplicated use-case heading above the cards and tighten the
 * transition from the seasonal collection row to the category area. */
body.yoko-home-php-page .yoko-home-usecases {
  padding-top: clamp(20px, 2.2vw, 34px) !important;
}
body.yoko-home-php-page .yoko-home-usecases > header {
  display: none !important;
}
body.yoko-home-php-page .yoko-home-category-editorial {
  padding-top: clamp(34px, 3.4vw, 54px) !important;
}

/* Category menu card must be text-only. The old decorative icon is removed
 * in PHP and hidden here as a cache-safe fallback. */
body.yoko-home-php-page .yoko-home-category-card--menu > div > .yoko-home-local-icon,
body.yoko-home-php-page .yoko-home-category-card--menu > div > .yoko-icon {
  display: none !important;
}
body.yoko-home-php-page .yoko-home-category-card--menu h3 {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  body.yoko-home-php-page .yoko-home-usecases {
    padding-top: 20px !important;
  }
  body.yoko-home-php-page .yoko-home-category-editorial {
    padding-top: 34px !important;
  }
}

/* Rey Cover Split uses a sticky/scroll runway. The homepage main wrapper used
 * overflow:clip, which becomes a clipping ancestor and collapses that native
 * runway when the Global Section is embedded by shortcode. Keep the main
 * wrapper visible so Rey can own slide 01 → 02 → 03, then release the page. */
body.yoko-home-php-page .yoko-homepage-v340 {
  overflow: visible !important;
}

/* Both legacy headings above the use-case/category area are intentionally
 * removed in PHP. Hide cached markup as a safe fallback. */
body.yoko-home-php-page .yoko-home-category-editorial > header {
  display: none !important;
}