/* ================================================================
   Perth Pebbles — make our widgets edge-to-edge in any Elementor
   wrapper. Covers BOTH the legacy section/column system AND the
   newer flexbox container system (.e-con, .e-con-full, .e-flex).

   Targets only .elementor-widget-ppe_* so other widgets keep their
   default Elementor spacing.
   ================================================================ */

/* 1) Strip the per-widget wrapper padding/margin */
.elementor-widget[class*="elementor-widget-ppe_"],
.elementor-element[class*="elementor-widget-ppe_"] {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
.elementor-widget[class*="elementor-widget-ppe_"] > .elementor-widget-container,
.elementor-element[class*="elementor-widget-ppe_"] > .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 2) Legacy section/column system */
.elementor-section:has([class*="elementor-widget-ppe_"]) {
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-section:has([class*="elementor-widget-ppe_"]) > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-section:has([class*="elementor-widget-ppe_"]) .elementor-column,
.elementor-section:has([class*="elementor-widget-ppe_"]) .elementor-column-wrap,
.elementor-section:has([class*="elementor-widget-ppe_"]) .elementor-widget-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

/* 3) NEW flexbox container system: .e-con, .e-con-full, .e-flex.
      A container that holds one of our widgets must be full-bleed
      and gap-less. */
.e-con:has(> [class*="elementor-widget-ppe_"]),
.e-con:has(> .elementor-widget[class*="elementor-widget-ppe_"]) {
    --container-max-width: 100% !important;
    --container-default-padding-block-end: 0 !important;
    --container-default-padding-block-start: 0 !important;
    --container-default-padding-inline-end: 0 !important;
    --container-default-padding-inline-start: 0 !important;
    --padding-block-start: 0 !important;
    --padding-block-end: 0 !important;
    --padding-inline-start: 0 !important;
    --padding-inline-end: 0 !important;
    --gap: 0 !important;
    --row-gap: 0 !important;
    --column-gap: 0 !important;
    --margin-block-start: 0 !important;
    --margin-block-end: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}

/* The parent flex container that holds our column of PP widgets.
   Force its width to 100% and remove its inner padding too. */
.e-con-full:has([class*="elementor-widget-ppe_"]),
.e-flex:has([class*="elementor-widget-ppe_"]) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}

/* 4) Editor-only convenience — ensure the editor preview matches the
      front-end layout. */
.elementor-edit-area-active [class*="elementor-widget-ppe_"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* 5) Force .container inside our widgets to keep its inner padding,
      regardless of any other plugin/theme rule. Generic ".container" is a
      very common class name (Elementor, Bootstrap, etc.) so we re-assert
      the padding here with a higher-specificity selector. */
.elementor-widget[class*="elementor-widget-ppe_"] .container,
.elementor-element[class*="elementor-widget-ppe_"] .container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px !important;
    padding-right: 32px !important;
}
@media (max-width: 640px) {
    .elementor-widget[class*="elementor-widget-ppe_"] .container,
    .elementor-element[class*="elementor-widget-ppe_"] .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* 6) Iframes (Google Maps embed) must never exceed their column width. */
.elementor-widget[class*="elementor-widget-ppe_"] iframe {
    max-width: 100% !important;
}

/* 7) Every direct child of our widgets respects the viewport width.
      Combined with min-width: 0 from the theme's flex/grid resets, this
      stops long titles, full-width buttons, and hero cards from being
      "intrinsically wider" than their grid cell on mobile. */
.elementor-widget[class*="elementor-widget-ppe_"] *,
.elementor-element[class*="elementor-widget-ppe_"] * {
    box-sizing: border-box;
}