/* Site-wide alignment (loaded on every front-end page).
 * ONE content column everywhere, lined up with the header:
 *   PC:     1200px wide (1240px container, 20px side padding) — same as the header/logo.
 *   Mobile: 20px side gutter — same as the header/logo.
 * Before this, pages mixed 1080 / 1100 / 1140 / 1200 / 1280px blocks on PC and 4–46px gutters on
 * phones, so titles, tables, grids and the logo each started at a different edge and the site
 * looked pulled to one side. */
:root{--mm-col:1200px}

/* ---------- Cart & Checkout: content lines up with the page title and logo (was indented 60–84px) ---------- */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce{max-width:none!important;padding-left:0!important;padding-right:0!important}

/* ---------- Home, PC: content below the header uses the FULL screen width (Om, 8 Oct) ----------
 * 32px gutter each side; capped at 2000px so a 4K monitor does not stretch it absurdly.
 * The header keeps its own column. Phones are untouched (rules below). */
@media (min-width:922px){
  body.home .elementor > .e-con,body.home .elementor > .elementor-element.e-con{--padding-left:32px!important;--padding-right:32px!important;padding-left:32px!important;padding-right:32px!important}
  body.home .e-con.e-con-boxed{--content-width:min(100%,2000px)}
  body.home .mmx-wrap,body.home .wb-wrap{max-width:2000px;padding-left:32px;padding-right:32px}
  body.home .e-con .mmx-wrap,body.home .e-con-inner .mmx-wrap,body.home .e-con .wb-wrap,body.home .e-con-inner .wb-wrap{padding-left:0;padding-right:0;max-width:none}
  body.home .mm-product-grid-section{padding-left:0!important;padding-right:0!important}
  body.home .mmx-restyled-h,body.home .mmx-sub{max-width:none!important}
  body.home [data-id="df3a865"]{max-width:none!important}
  /* category-circles widget is scaled 1.2× in Elementor — size it so the scaled row fills the column */
  body.home .elementor-element-c632fd8{width:calc(100% / 1.2)!important;max-width:calc(100% / 1.2)!important;margin-left:auto!important;margin-right:auto!important}
}

/* ---------- Home, mobile: every section on the same 20px gutter ---------- */
@media (max-width:921px){
  body.home .elementor > .e-con,body.home .elementor > .elementor-element.e-con{--padding-left:20px!important;--padding-right:20px!important;padding-left:20px!important;padding-right:20px!important}
  body.home .elementor .e-con .e-con{--padding-left:0px!important;--padding-right:0px!important;padding-left:0!important;padding-right:0!important}
  body.home .e-con-inner{padding-left:0!important;padding-right:0!important}
  body.home .mmx-wrap{padding-left:20px!important;padding-right:20px!important}
  body.home .e-con .mmx-wrap,body.home .e-con-inner .mmx-wrap,body.home .e-con .wb-wrap,body.home .e-con-inner .wb-wrap{padding-left:0!important;padding-right:0!important}
  body.home .mm-product-grid-section{padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
  body.home ul.products{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
  body.home .mm-category-icons:not(.mm-theme-dark){padding-left:0!important;padding-right:0!important}
  /* widgets Elementor scales up (1.1× / 1.03×) — shrink them so the scaled result fits the column */
  body.home .elementor-element-c632fd8{width:calc(100% / 1.1)!important;max-width:calc(100% / 1.1)!important;margin-left:auto!important;margin-right:auto!important}
  body.home .elementor-element-e87d0cf{width:calc(100% / 1.03)!important;max-width:calc(100% / 1.03)!important;margin-left:auto!important;margin-right:auto!important}
  body.woocommerce-cart .woocommerce,body.woocommerce-checkout .woocommerce{padding-top:20px!important}
}

/* Home hero slider on phones: the white card + one-sided shadow behind the image made it look
   off-centre. The image itself is now the rounded card, sitting on the same 20px gutter. */
@media (max-width:921px){
  body.home [data-id="df3a865"]{box-shadow:none!important;background:transparent!important;border-radius:0!important;overflow:visible!important}
  body.home [data-id="df3a865"] .swiper{border-radius:16px;overflow:hidden;box-shadow:0 14px 30px -20px rgba(60,20,10,.35)}
}