/**
 * Light-mode header content while header overlaps `.hero-banner`.
 *
 * IMPORTANT: Only changes color/fill — no sizing/spacing/layout rules here.
 * Disabled once `.carlo-rino-header-scrolled` is on so the white compact
 * header keeps dark text and a solid background.
 */

body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead a,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .menu-link,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .ast-builder-html-element,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .cr-btn-search-trigger,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .cr-search-bar-trigger,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .cr-side-menu-trigger,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .ast-icon,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .ast-icon * {
	color: #fff !important;
	text-shadow: 0 0.062rem 0.188rem rgba(0, 0, 0, 0.45) !important;
}

/* Recolor SVG icons to match header text. Outline icons (heart, compare,
   account) use stroke with fill="none" — never force a fill on those or
   they become solid shapes. Filled artwork (e.g. cart path) keeps fill. */
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead svg:not(.custom-logo-link svg)
	[stroke]:not([stroke="none"]):not([stroke="#E81F76"]):not([stroke="#e81f76"]) {
	stroke: currentColor !important;
}

body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead svg:not(.custom-logo-link svg)
	[fill]:not([fill="none"]):not([fill="#E81F76"]):not([fill="#e81f76"]):not([fill="white"]):not([fill="#fff"]):not([fill="#FFFFFF"]):not([fill="#ffffff"]) {
	fill: currentColor !important;
}

body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead svg[fill="none"],
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead svg [fill="none"],
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .cr-header-icon svg path:not([fill]) {
	fill: none !important;
}

/* Keep white header icons readable over pale areas of hero imagery. */
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead svg {
	filter: drop-shadow(0 0.062rem 0.125rem rgba(0, 0, 0, 0.45)) !important;
}

/* Custom header HTML may use external SVG files via <img>; invert those
   hard-coded #333 icons while the header is transparent over the hero. */
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .cr-btn-search-trigger img,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .cr-search-bar-trigger img,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .cr-side-menu-trigger img,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead #cr-side-menu-trigger + img,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead img[src*="search-01.svg"],
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead img[src*="menu-01.svg"] {
	filter: brightness(0) invert(1) drop-shadow(0 0.062rem 0.125rem rgba(0, 0, 0, 0.45)) !important;
	transition: filter 0.25s ease !important;
}

/* Keep header background transparent while over hero (Astra does this too) */
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .main-header-bar,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .ast-primary-header-bar.main-header-bar,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .ast-above-header,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .ast-below-header {
	background: transparent !important;
}

/* Ensure buttons/toggles in header inherit the light color */
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead button,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .ast-menu-toggle,
body.carlo-rino-over-hero-banner:not(.carlo-rino-header-scrolled) #masthead .ast-header-search .ast-search-icon {
	color: #fff !important;
	text-shadow: 0 0.062rem 0.188rem rgba(0, 0, 0, 0.45) !important;
}