/* ========================================================================== CUSTOM HERO SLIDER — Light DOM stylesheet Must load in the page (NOT inside mmx-resources template) so that ::part() selectors can pierce into mmx-hero's shadow DOM. All rules are scoped to custom-hero-slider to avoid affecting other components. ========================================================================== */ @media screen and (max-width: 59.999em) { /* Override mmx-hero's content margin so the panel sits flush with no horizontal offset — required for our align-items centering to work */ custom-hero-slider [slot="hero_slide"] { --mmx-hero__content-margin--hero-slide: 0 !important; } /* Give the slide wrapper a positioning context */ custom-hero-slider [slot="hero_slide"]::part(wrapper) { position: relative !important; display: block !important; } /* Overlay content panel: absolute over image, text at bottom, centered */ custom-hero-slider [slot="hero_slide"]::part(content) { position: absolute !important; inset: 0 !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-content: flex-end !important; align-items: var(--chs-mobile-align-items, center) !important; text-align: var(--chs-mobile-text-align, center) !important; padding-top: 70% !important; box-sizing: border-box !important; pointer-events: none !important; } /* Re-enable pointer events on text and button */ custom-hero-slider [slot="hero_slide"] mmx-text, custom-hero-slider [slot="hero_slide"] mmx-button { pointer-events: auto; } custom-hero-slider [slot="hero_slide"] mmx-text::part(text), custom-hero-slider [slot="hero_slide"] mmx-text::part(text__inner) { color: var(--chs-mobile-text-color) !important; text-align: var(--chs-mobile-text-align, center) !important; } custom-hero-slider [slot="hero_slide"] mmx-button::part(button) { color: var(--chs-mobile-text-color) !important; } }