/* ========================================================================== Elementor ↔ original design compatibility layer -------------------------------------------------------------------------- site.css was written for hand-authored HTML. Elementor wraps every widget in two extra divs: .elementor-element.elementor-widget > .elementor-widget-container > markup Those wrappers sit between a layout parent (e.g. `.trow`, which is a CSS grid) and its intended children, so grid/flex placement would land on the wrappers instead of the real elements. `display: contents` removes the wrappers from layout while leaving the markup untouched, so the original selectors match exactly what they were written for. It is applied only inside `.mdm-native` so nothing else on the site — the header, footer, or any page built normally in Elementor — is affected. ========================================================================== */ .mdm-native .elementor-widget, .mdm-native .elementor-widget > .elementor-widget-container{ display:contents; } /* Elementor containers used purely as a pass-through wrapper */ .mdm-native .e-con.is-passthrough, .mdm-native .e-con.is-passthrough > .e-con-inner{ display:contents; } /* Elementor gives every container a default gap, padding and min-height that the original layout does not expect. Neutralise them inside our sections and let site.css own the spacing. */ .mdm-native.e-con, .mdm-native .e-con{ --gap:0px; --padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px; --margin-top:0px;--margin-right:0px;--margin-bottom:0px;--margin-left:0px; --min-height:0; --content-width:100%; } /* Widget bottom margin from the kit's "space between widgets" */ .mdm-native .elementor-element{ --widgets-spacing:0px 0px; margin-block-end:0 } /* Elementor normalises images/lists/buttons; the original design already does its own resets, so stop the double-styling. */ .mdm-native img{ border-radius:inherit } .mdm-native ul{ margin:0;padding:0;list-style:none } /* The editor canvas needs the wrappers back, otherwise widgets cannot be selected or dragged. Elementor adds .elementor-editor-active to . */ .elementor-editor-active .mdm-native .elementor-widget, .elementor-editor-active .mdm-native .elementor-widget > .elementor-widget-container, .elementor-editor-active .mdm-native .e-con.is-passthrough, .elementor-editor-active .mdm-native .e-con.is-passthrough > .e-con-inner{ display:block; } /* -------------------------------------------------------------------------- Elementor resets

inside every widget: .elementor .elementor-widget:not(.elementor-widget-text-editor) :not(.elementor-widget-theme-post-content) figure { margin: 0 } That is three classes and an element — more specific than the design's `.portrait`, so it wins no matter which sheet loads last, and the therapist portrait loses the 20px that should sit under it. Matched here with enough specificity to hand it back, scoped to our sections so no other figure on the site is affected. -------------------------------------------------------------------------- */ .elementor .mdm-native .tcard figure.portrait{ margin: 0 0 20px }