/* Match Fashion Vally — owner screenshot reopen corrections, 2026-09-12.
 * Scope is intentionally limited to the two screenshot-proven defects:
 * 1) the shared native header cart visual; and
 * 2) homepage hero body/CTA geometry.
 * Loaded after the established shared-component/header layers.
 */


/* HEADER CART ---------------------------------------------------------
 * Keep the native Blocksy cart link/behavior as the one authority, but remove
 * its legacy icon/count artwork so only the current Match cart mark is visible.
 */
header#header.ct-header .ct-header-cart .ct-icon-container,
header#header.ct-header .ct-cart-item .ct-icon-container,
header#header.ct-header .ct-cart-item > .ct-icon-container {
  display: none !important;
  visibility: hidden !important;
}

header#header.ct-header .ct-header-cart .ct-dynamic-count,
header#header.ct-header .ct-header-cart .ct-cart-count,
header#header.ct-header .ct-header-cart [class*="cart-count"],
header#header.ct-header .ct-cart-item .ct-dynamic-count,
header#header.ct-header .ct-cart-item .ct-cart-count,
header#header.ct-header .ct-cart-item [class*="cart-count"],
header#header.ct-header .ct-cart-item .ct-amount {
  display: none !important;
  visibility: hidden !important;
}

header#header.ct-header .ct-cart-item::before {
  content: "" !important;
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  margin: 0 !important;
  background-image: url('/wp-content/themes/match-fashion-valley/assets/homepage-reference/header-cart.svg') !important;
  background-position: center !important;
  background-size: 26px 26px !important;
  background-repeat: no-repeat !important;
}

/* HOMEPAGE HERO CTA ---------------------------------------------------
 * The previous acceptance layer pinned this control at top:65%, which made it
 * overlap the supporting paragraph at real desktop dimensions. Return it to
 * normal document flow so its position is derived from the actual copy height.
 *
 * On mobile/tablet (≤900px), let the approved hero artwork fill a useful hero
 * viewport and keep the existing source copy/CTA in normal flow over it. This
 * avoids the former undersized banner + detached CTA band while preserving the
 * same source content and artwork.
 */
.home .mfv-hero__copy {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.home .mfv-hero__copy > p,
.home .mfv-hero__copy > h1,
.home .mfv-hero__copy .wp-block-buttons {
  position: relative !important;
  z-index: 6 !important;
}

.home .mfv-hero__copy .wp-block-buttons {
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 20px 0 0 !important;
  pointer-events: auto !important;
}

.home .mfv-hero__copy .wp-block-button,
.home .mfv-hero__copy .wp-block-button__link {
  pointer-events: auto !important;
}

@media (max-width: 999px) {
  header#header.ct-header .ct-cart-item::before {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
    background-size: 25px 25px !important;
  }
}

@media (max-width: 900px) {
  .home .mfv-hero__grid {
    aspect-ratio: auto !important;
    height: clamp(390px, 58vw, 400px) !important;
    min-height: clamp(390px, 58vw, 400px) !important;
    max-height: 400px !important;
    background-size: cover !important;
    background-position: 60% center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
  }

  .home .mfv-hero__copy {
    width: min(72%, 280px) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .home .mfv-hero__copy .wp-block-buttons {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
    background: transparent !important;
    border-radius: 0 !important;
    pointer-events: auto !important;
  }
}