/**
 * MG Design System - Gap Utility Classes
 * 
 * T-shirt sized gap utilities that ALWAYS override Designer Controls
 * 
 * Available Classes:
 * - mg-gap-* or mg-row-gap-* = Control vertical spacing (row gaps)
 * - mg-col-gap-* = Control horizontal spacing (column gaps)
 * - mg-no-gap = Remove all gaps
 * - mg-no-padding = Remove all padding
 * 
 * Sizes: none, xxs, xs, s, m, l, xl, xxl
 * 
 * Usage: Add class to any Elementor container
 * Example: Add "mg-gap-s" for 12px row gap
 * 
 * @package MG_Leadbuilder_2025
 */

/* =========================
   UNIVERSAL GAP UTILITIES (Both row AND column gaps)
   Use mg-gap-* when you want the same spacing in both directions
   ========================= */

.mg-gap-none,
.mg-gap-none .e-con-inner {
  --row-gap: 0 !important;
  --column-gap: 0 !important;
  --widgets-spacing-row: 0 !important;
  --widgets-spacing-column: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  gap: 0 !important;
}

.mg-gap-xxs,
.mg-gap-xxs .e-con-inner {
  --row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-row: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-column: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

.mg-gap-xs,
.mg-gap-xs .e-con-inner {
  --row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-row: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-column: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
}

.mg-gap-s,
.mg-gap-s .e-con-inner {
  --row-gap: clamp(0.75rem, 1vw, 1rem) !important;
  --column-gap: clamp(0.75rem, 1vw, 1rem) !important;
  --widgets-spacing-row: clamp(0.75rem, 1vw, 1rem) !important;
  --widgets-spacing-column: clamp(0.75rem, 1vw, 1rem) !important;
  row-gap: clamp(0.75rem, 1vw, 1rem) !important;
  column-gap: clamp(0.75rem, 1vw, 1rem) !important;
}

.mg-gap-m,
.mg-gap-m .e-con-inner {
  --row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-row: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-column: clamp(1rem, 1.25vw, 1.25rem) !important;
  row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
}

.mg-gap-l,
.mg-gap-l .e-con-inner {
  --row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-row: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-column: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
}

.mg-gap-xl,
.mg-gap-xl .e-con-inner {
  --row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-row: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-column: clamp(1.5rem, 2vw, 2.5rem) !important;
  row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
}

.mg-gap-xxl,
.mg-gap-xxl .e-con-inner {
  --row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-row: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-column: clamp(2rem, 2.5vw, 3.5rem) !important;
  row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
}

/* =========================
   ROW GAP UTILITIES (Vertical spacing ONLY)
   Use mg-row-gap-* when you want different row vs column spacing
   ========================= */

.mg-row-gap-none,
.mg-row-gap-none .e-con-inner {
  --row-gap: 0 !important;
  --widgets-spacing-row: 0 !important;
  row-gap: 0 !important;
}

.mg-row-gap-xxs,
.mg-row-gap-xxs .e-con-inner {
  --row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-row: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  row-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

.mg-row-gap-xs,
.mg-row-gap-xs .e-con-inner {
  --row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-row: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  row-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
}

.mg-row-gap-s,
.mg-row-gap-s .e-con-inner {
  --row-gap: clamp(0.75rem, 1vw, 1rem) !important;
  --widgets-spacing-row: clamp(0.75rem, 1vw, 1rem) !important;
  row-gap: clamp(0.75rem, 1vw, 1rem) !important;
}

.mg-row-gap-m,
.mg-row-gap-m .e-con-inner {
  --row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-row: clamp(1rem, 1.25vw, 1.25rem) !important;
  row-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
}

.mg-row-gap-l,
.mg-row-gap-l .e-con-inner {
  --row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-row: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  row-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
}

.mg-row-gap-xl,
.mg-row-gap-xl .e-con-inner {
  --row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-row: clamp(1.5rem, 2vw, 2.5rem) !important;
  row-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
}

.mg-row-gap-xxl,
.mg-row-gap-xxl .e-con-inner {
  --row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-row: clamp(2rem, 2.5vw, 3.5rem) !important;
  row-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
}

/* =========================
   COLUMN GAP UTILITIES (Horizontal spacing between columns)
   ========================= */

.mg-col-gap-none,
.mg-col-gap-none .e-con-inner {
  --column-gap: 0 !important;
  --widgets-spacing-column: 0 !important;
  column-gap: 0 !important;
}

.mg-col-gap-xxs,
.mg-col-gap-xxs .e-con-inner {
  --column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  --widgets-spacing-column: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  column-gap: clamp(0.25rem, 0.5vw, 0.5rem) !important;
}

.mg-col-gap-xs,
.mg-col-gap-xs .e-con-inner {
  --column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --widgets-spacing-column: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  column-gap: clamp(0.5rem, 0.75vw, 0.75rem) !important;
}

.mg-col-gap-s,
.mg-col-gap-s .e-con-inner {
  --column-gap: clamp(0.75rem, 1vw, 1rem) !important;  /* Fluid Small */
  --widgets-spacing-column: clamp(0.75rem, 1vw, 1rem) !important;
  column-gap: clamp(0.75rem, 1vw, 1rem) !important;
}

.mg-col-gap-m,
.mg-col-gap-m .e-con-inner {
  --column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
  --widgets-spacing-column: clamp(1rem, 1.25vw, 1.25rem) !important;
  column-gap: clamp(1rem, 1.25vw, 1.25rem) !important;
}

.mg-col-gap-l,
.mg-col-gap-l .e-con-inner {
  --column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  --widgets-spacing-column: clamp(1.25rem, 1.5vw, 1.75rem) !important;
  column-gap: clamp(1.25rem, 1.5vw, 1.75rem) !important;
}

.mg-col-gap-xl,
.mg-col-gap-xl .e-con-inner {
  --column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
  --widgets-spacing-column: clamp(1.5rem, 2vw, 2.5rem) !important;
  column-gap: clamp(1.5rem, 2vw, 2.5rem) !important;
}

.mg-col-gap-xxl,
.mg-col-gap-xxl .e-con-inner {
  --column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
  --widgets-spacing-column: clamp(2rem, 2.5vw, 3.5rem) !important;
  column-gap: clamp(2rem, 2.5vw, 3.5rem) !important;
}

/* =========================
   SPECIAL UTILITIES
   ========================= */

/* Top Bar - minimal padding for compact headers/footers (all sides minimal) */
/* HIGH SPECIFICITY: Utility classes ALWAYS override Designer Controls */
/* 
 * Why so many properties?
 * - Elementor uses CSS variables that it reads via JavaScript
 * - --container-default-padding-* = Legacy container system
 * - --e-con-padding-* = Modern Flexbox container system (.e-con)
 * - padding = Direct CSS fallback (highest priority with !important)
 * 
 * We set all three to ensure compatibility across Elementor versions
 * and container types. The direct padding property ensures it works
 * even if Elementor's JS doesn't read the variables.
 */
body.mg-design-system .mg-top-bar,
body.mg-design-system .mg-top-bar.e-parent,
body.mg-design-system .mg-top-bar[data-element_type="container"] {
  /* Legacy container variables */
  --container-default-padding-top: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --container-default-padding-bottom: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --container-default-padding-left: clamp(1rem, 2vw, 2rem) !important;
  --container-default-padding-right: clamp(1rem, 2vw, 2rem) !important;
  
  /* Modern Flexbox container variables */
  --e-con-padding-top: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --e-con-padding-bottom: clamp(0.5rem, 0.75vw, 0.75rem) !important;
  --e-con-padding-left: clamp(1rem, 2vw, 2rem) !important;
  --e-con-padding-right: clamp(1rem, 2vw, 2rem) !important;
  
  /* Direct CSS fallback (ensures it works regardless of Elementor version) */
  padding: clamp(0.5rem, 0.75vw, 0.75rem) clamp(1rem, 2vw, 2rem) !important;
}

/* CRITICAL: Reset inner container padding to prevent double padding */
body.mg-design-system .mg-top-bar > .e-con-inner {
  padding: 0 !important;
}

/* =========================
   DIRECTIONAL PADDING UTILITIES (Top/Bottom/Left/Right)
   Use these for precise control over individual sides
   Designer manual inputs ALWAYS override these (no !important)
   Bigger jumps between sizes for more significant differences
   ========================= */

/* PADDING TOP - All Sizes */
body.mg-design-system .mg-padding-t-xxs { 
  --container-default-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  padding-top: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-t-xs { 
  --container-default-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  padding-top: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-t-s { 
  --container-default-padding-top: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-top: clamp(1.5rem, 2vw, 2rem);
  padding-top: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-t-m { 
  --container-default-padding-top: clamp(2rem, 3vw, 3rem);
  --e-con-padding-top: clamp(2rem, 3vw, 3rem);
  padding-top: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-t-l { 
  --container-default-padding-top: clamp(3rem, 4vw, 4rem);
  --e-con-padding-top: clamp(3rem, 4vw, 4rem);
  padding-top: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-t-xl { 
  --container-default-padding-top: clamp(4rem, 5vw, 5rem);
  --e-con-padding-top: clamp(4rem, 5vw, 5rem);
  padding-top: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-t-xxl { 
  --container-default-padding-top: clamp(5rem, 6vw, 6rem);
  --e-con-padding-top: clamp(5rem, 6vw, 6rem);
  padding-top: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-t-none { 
  --container-default-padding-top: 0;
  --e-con-padding-top: 0;
  padding-top: 0; 
}

/* PADDING BOTTOM - All Sizes */
body.mg-design-system .mg-padding-b-xxs { 
  --container-default-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  padding-bottom: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-b-xs { 
  --container-default-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  padding-bottom: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-b-s { 
  --container-default-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  padding-bottom: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-b-m { 
  --container-default-padding-bottom: clamp(2rem, 3vw, 3rem);
  --e-con-padding-bottom: clamp(2rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-b-l { 
  --container-default-padding-bottom: clamp(3rem, 4vw, 4rem);
  --e-con-padding-bottom: clamp(3rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-b-xl { 
  --container-default-padding-bottom: clamp(4rem, 5vw, 5rem);
  --e-con-padding-bottom: clamp(4rem, 5vw, 5rem);
  padding-bottom: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-b-xxl { 
  --container-default-padding-bottom: clamp(5rem, 6vw, 6rem);
  --e-con-padding-bottom: clamp(5rem, 6vw, 6rem);
  padding-bottom: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-b-none { 
  --container-default-padding-bottom: 0;
  --e-con-padding-bottom: 0;
  padding-bottom: 0; 
}

/* PADDING LEFT - All Sizes */
body.mg-design-system .mg-padding-l-xxs { 
  --container-default-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  padding-left: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-l-xs { 
  --container-default-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  padding-left: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-l-s { 
  --container-default-padding-left: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-left: clamp(1.5rem, 2vw, 2rem);
  padding-left: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-l-m { 
  --container-default-padding-left: clamp(2rem, 3vw, 3rem);
  --e-con-padding-left: clamp(2rem, 3vw, 3rem);
  padding-left: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-l-l { 
  --container-default-padding-left: clamp(3rem, 4vw, 4rem);
  --e-con-padding-left: clamp(3rem, 4vw, 4rem);
  padding-left: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-l-xl { 
  --container-default-padding-left: clamp(4rem, 5vw, 5rem);
  --e-con-padding-left: clamp(4rem, 5vw, 5rem);
  padding-left: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-l-xxl { 
  --container-default-padding-left: clamp(5rem, 6vw, 6rem);
  --e-con-padding-left: clamp(5rem, 6vw, 6rem);
  padding-left: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-l-none { 
  --container-default-padding-left: 0;
  --e-con-padding-left: 0;
  padding-left: 0; 
}

/* PADDING RIGHT - All Sizes */
body.mg-design-system .mg-padding-r-xxs { 
  --container-default-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  padding-right: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-r-xs { 
  --container-default-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  padding-right: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-r-s { 
  --container-default-padding-right: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-right: clamp(1.5rem, 2vw, 2rem);
  padding-right: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-r-m { 
  --container-default-padding-right: clamp(2rem, 3vw, 3rem);
  --e-con-padding-right: clamp(2rem, 3vw, 3rem);
  padding-right: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-r-l { 
  --container-default-padding-right: clamp(3rem, 4vw, 4rem);
  --e-con-padding-right: clamp(3rem, 4vw, 4rem);
  padding-right: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-r-xl { 
  --container-default-padding-right: clamp(4rem, 5vw, 5rem);
  --e-con-padding-right: clamp(4rem, 5vw, 5rem);
  padding-right: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-r-xxl { 
  --container-default-padding-right: clamp(5rem, 6vw, 6rem);
  --e-con-padding-right: clamp(5rem, 6vw, 6rem);
  padding-right: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-r-none { 
  --container-default-padding-right: 0;
  --e-con-padding-right: 0;
  padding-right: 0; 
}

/* PADDING Y-AXIS (Top + Bottom) - All Sizes */
body.mg-design-system .mg-padding-y-xxs { 
  --container-default-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  --container-default-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-top: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  padding-top: clamp(0.5rem, 1vw, 0.75rem); 
  padding-bottom: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-y-xs { 
  --container-default-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  --container-default-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-top: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-bottom: clamp(1rem, 1.5vw, 1.5rem);
  padding-top: clamp(1rem, 1.5vw, 1.5rem); 
  padding-bottom: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-y-s { 
  --container-default-padding-top: clamp(1.5rem, 2vw, 2rem);
  --container-default-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-top: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-bottom: clamp(1.5rem, 2vw, 2rem);
  padding-top: clamp(1.5rem, 2vw, 2rem); 
  padding-bottom: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-y-m { 
  --container-default-padding-top: clamp(2rem, 3vw, 3rem);
  --container-default-padding-bottom: clamp(2rem, 3vw, 3rem);
  --e-con-padding-top: clamp(2rem, 3vw, 3rem);
  --e-con-padding-bottom: clamp(2rem, 3vw, 3rem);
  padding-top: clamp(2rem, 3vw, 3rem); 
  padding-bottom: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-y-l { 
  --container-default-padding-top: clamp(3rem, 4vw, 4rem);
  --container-default-padding-bottom: clamp(3rem, 4vw, 4rem);
  --e-con-padding-top: clamp(3rem, 4vw, 4rem);
  --e-con-padding-bottom: clamp(3rem, 4vw, 4rem);
  padding-top: clamp(3rem, 4vw, 4rem); 
  padding-bottom: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-y-xl { 
  --container-default-padding-top: clamp(4rem, 5vw, 5rem);
  --container-default-padding-bottom: clamp(4rem, 5vw, 5rem);
  --e-con-padding-top: clamp(4rem, 5vw, 5rem);
  --e-con-padding-bottom: clamp(4rem, 5vw, 5rem);
  padding-top: clamp(4rem, 5vw, 5rem); 
  padding-bottom: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-y-xxl { 
  --container-default-padding-top: clamp(5rem, 6vw, 6rem);
  --container-default-padding-bottom: clamp(5rem, 6vw, 6rem);
  --e-con-padding-top: clamp(5rem, 6vw, 6rem);
  --e-con-padding-bottom: clamp(5rem, 6vw, 6rem);
  padding-top: clamp(5rem, 6vw, 6rem); 
  padding-bottom: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-y-none { 
  --container-default-padding-top: 0;
  --container-default-padding-bottom: 0;
  --e-con-padding-top: 0;
  --e-con-padding-bottom: 0;
  padding-top: 0; 
  padding-bottom: 0; 
}

/* PADDING X-AXIS (Left + Right) - All Sizes */
body.mg-design-system .mg-padding-x-xxs { 
  --container-default-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  --container-default-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-left: clamp(0.5rem, 1vw, 0.75rem);
  --e-con-padding-right: clamp(0.5rem, 1vw, 0.75rem);
  padding-left: clamp(0.5rem, 1vw, 0.75rem); 
  padding-right: clamp(0.5rem, 1vw, 0.75rem); 
}
body.mg-design-system .mg-padding-x-xs { 
  --container-default-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  --container-default-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-left: clamp(1rem, 1.5vw, 1.5rem);
  --e-con-padding-right: clamp(1rem, 1.5vw, 1.5rem);
  padding-left: clamp(1rem, 1.5vw, 1.5rem); 
  padding-right: clamp(1rem, 1.5vw, 1.5rem); 
}
body.mg-design-system .mg-padding-x-s { 
  --container-default-padding-left: clamp(1.5rem, 2vw, 2rem);
  --container-default-padding-right: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-left: clamp(1.5rem, 2vw, 2rem);
  --e-con-padding-right: clamp(1.5rem, 2vw, 2rem);
  padding-left: clamp(1.5rem, 2vw, 2rem); 
  padding-right: clamp(1.5rem, 2vw, 2rem); 
}
body.mg-design-system .mg-padding-x-m { 
  --container-default-padding-left: clamp(2rem, 3vw, 3rem);
  --container-default-padding-right: clamp(2rem, 3vw, 3rem);
  --e-con-padding-left: clamp(2rem, 3vw, 3rem);
  --e-con-padding-right: clamp(2rem, 3vw, 3rem);
  padding-left: clamp(2rem, 3vw, 3rem); 
  padding-right: clamp(2rem, 3vw, 3rem); 
}
body.mg-design-system .mg-padding-x-l { 
  --container-default-padding-left: clamp(3rem, 4vw, 4rem);
  --container-default-padding-right: clamp(3rem, 4vw, 4rem);
  --e-con-padding-left: clamp(3rem, 4vw, 4rem);
  --e-con-padding-right: clamp(3rem, 4vw, 4rem);
  padding-left: clamp(3rem, 4vw, 4rem); 
  padding-right: clamp(3rem, 4vw, 4rem); 
}
body.mg-design-system .mg-padding-x-xl { 
  --container-default-padding-left: clamp(4rem, 5vw, 5rem);
  --container-default-padding-right: clamp(4rem, 5vw, 5rem);
  --e-con-padding-left: clamp(4rem, 5vw, 5rem);
  --e-con-padding-right: clamp(4rem, 5vw, 5rem);
  padding-left: clamp(4rem, 5vw, 5rem); 
  padding-right: clamp(4rem, 5vw, 5rem); 
}
body.mg-design-system .mg-padding-x-xxl { 
  --container-default-padding-left: clamp(5rem, 6vw, 6rem);
  --container-default-padding-right: clamp(5rem, 6vw, 6rem);
  --e-con-padding-left: clamp(5rem, 6vw, 6rem);
  --e-con-padding-right: clamp(5rem, 6vw, 6rem);
  padding-left: clamp(5rem, 6vw, 6rem); 
  padding-right: clamp(5rem, 6vw, 6rem); 
}
body.mg-design-system .mg-padding-x-none { 
  --container-default-padding-left: 0;
  --container-default-padding-right: 0;
  --e-con-padding-left: 0;
  --e-con-padding-right: 0;
  padding-left: 0; 
  padding-right: 0; 
}

/* =========================
   SIMPLE RESET UTILITIES
   ========================= */

/* Remove ALL gaps (row + column) - simpler alternative to mg-gap-all-none */
.mg-no-gap {
  --row-gap: 0 !important;
  --column-gap: 0 !important;
  --widgets-spacing-row: 0 !important;
  --widgets-spacing-column: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  gap: 0 !important;
}

/* Remove ALL padding from container */
/* See .mg-top-bar above for explanation of why we set all three property types */
body.mg-design-system .mg-no-padding,
body.mg-design-system .mg-no-padding.e-parent,
body.mg-design-system .mg-no-padding[data-element_type="container"] {
  /* Legacy container variables */
  --container-default-padding-top: 0 !important;
  --container-default-padding-bottom: 0 !important;
  --container-default-padding-left: 0 !important;
  --container-default-padding-right: 0 !important;
  
  /* Modern Flexbox container variables */
  --e-con-padding-top: 0 !important;
  --e-con-padding-bottom: 0 !important;
  --e-con-padding-left: 0 !important;
  --e-con-padding-right: 0 !important;
  
  /* Direct CSS fallback */
  padding: 0 !important;
}

/* Reset inner container padding for mg-no-padding */
body.mg-design-system .mg-no-padding > .e-con-inner {
  padding: 0 !important;
}

/* =========================
   USAGE EXAMPLES & SIZE SCALE
   ========================= */

/*
 * T-SHIRT SIZING: xxs, xs, s, m, l, xl, xxl
 * 
 * ===================================================
 * UTILITIES AVAILABLE:
 * ===================================================
 * 
 * GAP UTILITIES (for spacing between widgets/columns):
 * - mg-gap-* = Control both row AND column gaps (universal)
 * - mg-row-gap-* = Control vertical spacing ONLY (row gaps)
 * - mg-col-gap-* = Control horizontal spacing ONLY (column gaps)
 * - mg-no-gap = Remove all gaps
 * 
 * PADDING UTILITIES (for container padding):
 * - mg-padding-t-* = Control top padding only
 * - mg-padding-b-* = Control bottom padding only
 * - mg-padding-l-* = Control left padding only
 * - mg-padding-r-* = Control right padding only
 * - mg-padding-y-* = Control top AND bottom padding (vertical axis)
 * - mg-padding-x-* = Control left AND right padding (horizontal axis)
 * - mg-no-padding = Remove all padding
 * 
 * ===================================================
 * SIZE SCALES (Fluid/Responsive using clamp()):
 * ===================================================
 * 
 * GAP SIZES (spacing between elements):
 * xxs = 4-8px    | clamp(0.25rem, 0.5vw, 0.5rem)
 * xs  = 8-12px   | clamp(0.5rem, 0.75vw, 0.75rem)
 * s   = 12-16px  | clamp(0.75rem, 1vw, 1rem)
 * m   = 16-20px  | clamp(1rem, 1.25vw, 1.25rem)
 * l   = 20-28px  | clamp(1.25rem, 1.5vw, 1.75rem)
 * xl  = 24-40px  | clamp(1.5rem, 2vw, 2.5rem)
 * xxl = 32-56px  | clamp(2rem, 2.5vw, 3.5rem)
 * 
 * PADDING SIZES (container padding - bigger jumps):
 * xxs = 8-12px   | clamp(0.5rem, 1vw, 0.75rem)
 * xs  = 16-24px  | clamp(1rem, 1.5vw, 1.5rem)
 * s   = 24-32px  | clamp(1.5rem, 2vw, 2rem)
 * m   = 32-48px  | clamp(2rem, 3vw, 3rem)
 * l   = 48-64px  | clamp(3rem, 4vw, 4rem)
 * xl  = 64-80px  | clamp(4rem, 5vw, 5rem)
 * xxl = 80-96px  | clamp(5rem, 6vw, 6rem)
 * 
 * ===================================================
 * USAGE EXAMPLES:
 * ===================================================
 * 
 * Header with tight row spacing:
 * Add class: mg-gap-xs or mg-row-gap-xs
 * Result: Fluid 8-12px row gap (scales with viewport)
 * 
 * Control both row AND column gaps:
 * Add classes: mg-gap-s mg-col-gap-l
 * Result: Fluid 12-16px row gap, 20-28px column gap
 * 
 * Add top padding only:
 * Add class: mg-padding-t-m
 * Result: Fluid 32-48px top padding
 * 
 * Add vertical padding (top + bottom):
 * Add class: mg-padding-y-l
 * Result: Fluid 48-64px top and bottom padding
 * 
 * Add horizontal padding (left + right):
 * Add class: mg-padding-x-xl
 * Result: Fluid 64-80px left and right padding
 * 
 * Remove all gaps:
 * Add class: mg-no-gap
 * Result: 0px row and column gaps
 * 
 * Remove all padding:
 * Add class: mg-no-padding
 * Result: 0 padding on all sides
 * 
 * Compact top bar:
 * Add class: mg-top-bar
 * Result: Fluid 8-12px top/bottom, 16-32px left/right padding
 */