. Inside Elementor it is wrapped: .elementor-section.katori-section > .elementor-container (legacy boxed wrapper, 1140px) > .elementor-column.elementor-col-100 > .elementor-widget-wrap > .elementor-widget.katori-html.elementor-widget-html > .elementor-widget-container > [our

] These rules neutralise ONLY the wrappers around our imported sections, so the section's own CSS (inner .container handles max-width + gutter) renders pixel-identically to the static site. Native Elementor sections added later are intentionally NOT affected. Verified against published Elementor frontend.min.css + Hello main: .elementor-section.elementor-section-boxed>.elementor-container{max-width:1140px} .elementor-element-populated{padding:5..30px} (column padding) .elementor-widget:not(:last-child){margin-block-end:var(--kit-widget-spacing,20px)} .elementor *{box-sizing:border-box} (matches main.css — no fix needed) Hello: body:not([class*="elementor-page-"]) .site-main{max-width:…1140px} (Hello already drops .site-main width on Elementor-built pages) ===================================================================== */ /* ---- 1. Hello content wrapper: no width / padding on these pages ------ */ .elementor-page .site-main, .elementor-default .site-main, body[class*="elementor-page-"] .site-main { max-width: none; padding-inline: 0; margin-inline: 0; width: 100%; } /* ---- 2. Our imported SECTION goes edge-to-edge ----------------------- */ .elementor-section.katori-section, .elementor-element.katori-section { padding: 0; margin: 0; } /* Kill the boxed 1140px container + its auto-centering inline padding so our own .container provides max-width (var(--maxw)) + --gutter. */ .elementor-section.katori-section > .elementor-container, .elementor-element.katori-section > .elementor-container, .katori-section .elementor-container { max-width: none; width: 100%; padding: 0; margin: 0; } /* Column: zero its padding regardless of the section's column-gap setting (gap:no makes it .elementor-column-gap-no, so we cannot rely on .elementor-column-gap-default). Covers the legacy .elementor-row too. */ .katori-section > .elementor-container > .elementor-row, .katori-section .elementor-column, .katori-section .elementor-col-100, .katori-section .elementor-widget-wrap, .katori-section .elementor-widget-wrap > .elementor-element-populated, .katori-section .elementor-column > .elementor-element-populated { padding: 0; margin: 0; } /* ---- 3. The HTML widget itself imposes no spacing / typography ------- */ /* The 20px gap is margin-block-end on .elementor-widget (NOT its container), so zero it on the widget element, scoped to our widgets. */ .katori-section .katori-html.elementor-widget, .katori-section .elementor-widget.elementor-widget-html, .katori-html.elementor-widget { margin: 0; } .katori-section .katori-html.elementor-widget:not(:last-child), .katori-html.elementor-widget:not(:last-child) { margin-block-end: 0; --kit-widget-spacing: 0px; /* belt: also neutralises the kit variable */ } .katori-html .elementor-widget-container, .katori-section .elementor-widget-html .elementor-widget-container { margin: 0; padding: 0; line-height: normal; } /* ---- 4. Preserve sticky / fixed positioning + horizontal scroll ----- */ /* position:sticky (.lineage-sticky) and position:fixed (.kanji-rail) break if ANY ancestor has overflow != visible, or a transform/filter/contain. Force visible overflow on OUR wrapper chain only (never global). */ .elementor-section.katori-section, .katori-section > .elementor-container, .katori-section > .elementor-container > .elementor-row, .katori-section .elementor-column, .katori-section .elementor-widget-wrap, .katori-section .elementor-element-populated, .katori-section .katori-html, .katori-html > .elementor-widget-container { overflow: visible; } /* The kata horizontal scroller manages its OWN overflow. */ .katori-section .kata-track { overflow-x: auto; overflow-y: hidden; } /* ---- 5. Stacking order for fixed brand chrome ----------------------- */ .katori-section, .katori-section > .elementor-container { z-index: auto; } .kanji-rail { z-index: 90; } .site-header { z-index: 100; } /* static header, if present */ .skip-link { z-index: 9999; } /* The dedicated rail section has no box of its own; the fixed rail escapes it. */ .katori-rail-section, .katori-rail-section > .elementor-container, .katori-rail-section .elementor-widget-wrap, .katori-rail-section .elementor-element-populated { padding: 0; margin: 0; min-height: 0; overflow: visible; } /* ---- 6. No double scrollbars / containing-block surprises ----------- */ /* main.css already sets body{overflow-x:hidden}. Use `clip` (not hidden) so we do NOT create a second scroll container that would break fixed/sticky. */ .elementor-page .site, .elementor-page #content, body[class*="elementor-page-"] .site, body[class*="elementor-page-"] #content { overflow-x: clip; max-width: 100%; } /* ---- 7. Suppress Hello's auto page-title bar (design supplies headings) */ .elementor-page .page-header, .page .page-header .entry-title { display: none; } /* box-sizing: NONE NEEDED — main.css, Hello reset, and Elementor all agree on border-box, so there is no layout shift to correct. */