/* ============================================================
   CS2 Store — JK Elementor widgets: scope shim.
   The theme CSS (villas-*.css) styles components via `.villas-home .v-…`
   (class-scoped) — so wrapping each widget in `.villas-home` makes those
   rules apply in BOTH the Elementor editor and the frontend.
   This file only re-establishes the few `body.villas-home` base bits
   (background / colour / font) on the widget wrapper — no component CSS
   is duplicated.
   ============================================================ */
.cs2-jk-w {
  box-sizing: border-box;
  background: var(--v-bg, #0e0e0e);
  color: var(--v-text, #fff);
  font-family: var(--v-sans, "Manrope", system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  /* `clip` keeps the full-bleed places marquee from creating page scroll,
     without making the wrapper a scroll container */
  overflow-x: clip;
}

/* Elementor wraps our output in .elementor-widget-container with default
   padding/margins on some setups — neutralise so sections stack seamlessly.
   Matches every CS2 widget (cs2-jk-* and cs2-home-*). */
[class*="elementor-widget-cs2-"] > .elementor-widget-container {
  margin: 0;
  padding: 0;
}

/* Full-width sections: CS2 widgets manage their own width via .v-container, so
   Elementor's boxed content width must never constrain them. Forced regardless
   of the section's "Content Width" setting. Scoped to the villas standalone
   pages (home-1 / product-1), where every section is a CS2 widget. */
.villas-home .elementor-section > .elementor-container,
.villas-home .e-con > .e-con-inner,
.villas-home .e-con { max-width: 100% !important; }
[class*="elementor-widget-cs2-"] { width: 100%; }

/* The sticky JK nav must escape the wrapper's overflow clip (which would
   otherwise pin it to the short wrapper instead of the viewport). */
.cs2-jk-w.cs2-jk-nav-w { overflow: visible; }

/* JK nav sticky emulation: the widget's section is only nav-height tall, so
   CSS position:sticky can't stick. cs2-jk.js toggles .is-stuck (with a spacer)
   to pin it. Override the theme's sticky rule only inside the Elementor wrapper. */
.cs2-jk-nav-w .v-jk-nav { position: relative; top: 0; }
.cs2-jk-nav-w .v-jk-nav.is-stuck { position: fixed; top: 85px; left: 0; right: 0; }
.v-jk-nav-spacer { width: 100%; }

@media (max-width: 1024px) {
    .cs2-jk-nav-w .v-jk-nav.is-stuck { position: fixed; top: 79px; left: 0; right: 0; }
}