/* ==========================================================================
   Smart Jhuri — Elementor width bridge

   Elementor caps a boxed container at the kit's "Content width", measured on
   the box itself. The theme measures --sj-container on the *content*, with the
   gutter sitting outside it. Left alone the two disagree, and a theme section
   dropped into an Elementor container loses a gutter's worth of width on each
   side — so the home page renders narrower than the header, footer and shop
   pages framing it.

   Everything below only widens the box to agree with the theme. Elementor's
   own layout, spacing and per-element settings are left alone.
   ========================================================================== */

/* Flexbox containers (Elementor 3.6+). Elementor derives --content-width from
   this, and .e-con-inner reads that, so overriding the one property is enough. */
.elementor .e-con {
	--container-max-width: calc(var(--sj-container) + var(--sj-gutter) * 2);
}

/* Legacy widget-based sections. Carries the extra .elementor class so it wins
   over the kit stylesheet whichever order the two happen to be printed in. */
.elementor .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: calc(var(--sj-container) + var(--sj-gutter) * 2);
}

/* A container wrapping a theme section drops the kit's default side padding:
   the section carries the theme gutter itself, and two gutters stacked is the
   narrowing this file exists to undo. Scoped with :has(), so containers of
   ordinary Elementor content keep whatever padding they were given. */
.elementor .e-con:has(.sj-container),
.elementor .elementor-section:has(.sj-container) {
	padding-inline: 0;
}