/* ==========================================================================
   1.8.439 — Mega menu (desktop + phone accordion)
   1) Approved TEAM IDX menu icons (assets/images/menu-icons/*.svg): transparent,
      no tile / frame / border / background / shadow, ~38px, centred with title.
   2) Phone menu (≤760px) IDX FAMILY pills (IDX CPR / IDX Cares): compact,
      sized to content, flush left; bigger logos inside their ring.
   Separate file so Harley's blocks at the end of main.css stay untouched.
   ========================================================================== */
.mega-menu .mega-menu__thumb:has(img[src*="/menu-icons/"]) {
	width: 40px !important; height: 40px !important;
	background: transparent !important; border: 0 !important; border-radius: 0 !important;
	box-shadow: none !important; overflow: visible !important; padding: 0 !important;
	align-self: center;
}
.mega-menu .mega-menu__thumb img[src*="/menu-icons/"] {
	width: 38px !important; height: 38px !important; padding: 0 !important; margin: 1px !important;
	object-fit: contain !important; background: transparent !important;
	border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important;
	transform: none !important;
}
.mega-menu .mega-menu__link:hover .mega-menu__thumb img[src*="/menu-icons/"],
.mega-menu .mega-menu__link:focus-visible .mega-menu__thumb img[src*="/menu-icons/"] { transform: translateY(-1px) !important; transition: transform 0.2s ease; }

@media (max-width: 760px) {
	.mega-menu .mega-menu__family--panel { align-items: flex-start !important; gap: 0.5rem !important; padding-left: 0 !important; margin-left: 0 !important; }
	.mega-menu .mega-menu__family--panel .mega-menu__family-link {
		width: auto !important; max-width: none !important; min-height: 0 !important;
		align-self: flex-start !important; margin: 0 !important;
		padding: 0.2rem 0.85rem 0.2rem 0.2rem !important; gap: 0.6rem !important;
	}
	.mega-menu .mega-menu__family--panel .mega-menu__family-icon {
		width: 46px !important; height: 46px !important; flex: 0 0 46px !important;
		padding: 1px !important; object-fit: cover !important;
	}
}

/* 1.8.439 — Apparel service cards: eyebrow tagline + dash in yellow (was red) */
.svx-page--apparel .svx-tile--make .svx-tile__tag { color: #f3c91a !important; }
.svx-page--apparel .svx-tile--make .svx-tile__tag::before { background: #f3c91a !important; }

/* 1.8.439 — Apparel cards: taglines on one line at desktop (4 columns kept) */
@media (min-width: 1180px) {
	.svx-page--apparel #make .svx-tiles { padding-left: 32px !important; padding-right: 32px !important; }
	.svx-page--apparel #make .svx-tiles { max-width: none !important; }
	.svx-page--apparel .svx-tile--make .svx-tile__tag { white-space: nowrap; font-size: clamp(.64rem, .76vw, .72rem) !important; letter-spacing: .04em !important; gap: .4rem !important; }
	.svx-page--apparel .svx-tile--make .svx-tile__tag::before { width: 14px !important; }
}

/* 1.8.440 — Tone: "just remove the gradient". No fade between the Apparel / Laser Engraving
   hero and the navy banner below: hero bottom fade off, banner top fade + photo/dot masks off.
   (The 1.8.439 seam block was removed; this also neutralises the older svc-pages.css fade.) */
.svx-page--apparel .svx-hero::after { display: none !important; }
.svx-hero + .svx-section > .svx-banner:first-child::before { background: linear-gradient(115deg, #0f143a, #1b2560 55%, #2d4a8a) !important; }
.svx-hero + .svx-section > .svx-banner:first-child .svx-banner__bg { -webkit-mask-image: none !important; mask-image: none !important; }
.svx-page:not(.svx-page--apparel) .svx-hero:has(+ .svx-section > .svx-banner:first-child) .svx-hero__overlay { background: rgba(15, 20, 58, 0.72) !important; }