/* ------------------------------------------------------------------
   Site layout: one measure, one gutter

   Sections were built by different templates over time, each with its
   own wrapper, and the Elementor containers on the home page ran the
   full window width with no side padding at all, so copy touched the
   screen edge. Everything below shares a single max width and a single
   responsive gutter, so no section can sit wider or tighter than the
   rest.

   This sheet loads last on purpose: it is the final word on measure.
   ------------------------------------------------------------------ */

:root{
  --tcp-measure:1200px;
  --tcp-gutter:32px;
}
@media (max-width:1024px){ :root{ --tcp-gutter:24px; } }
@media (max-width:600px){  :root{ --tcp-gutter:20px; } }

/* ---------- the shared container ----------
   Every section wrapper in every template resolves to this. */
.tcp-pod-wrap,
.tcp-banner-inner,
.tcp-bg-wrap,
.tcp-sp-wrap,
.tcp-shop,
.tcp-pdp-wrap,
.tcp-chp-wrap,
.tcp-ch-card,
.tcp-win-in{
  max-width:var(--tcp-measure);
  margin-inline:auto;
  padding-inline:var(--tcp-gutter);
  box-sizing:border-box;
  width:100%;
}

/* ---------- Elementor containers ----------
   A boxed container holds its measure on .e-con-inner. Constrain that one
   level only: adding the gutter to nested inners as well would double the
   padding on every nested row. */
.elementor > .e-con > .e-con-inner,
.elementor > .e-con > .e-con > .e-con-inner{
  max-width:var(--tcp-measure);
  margin-inline:auto;
  padding-inline:var(--tcp-gutter);
  box-sizing:border-box;
}

/* full bleed containers still need their children held in */
.elementor > .e-con.e-con-full > .e-con-boxed > .e-con-inner,
.tcp-pod-hero-in > .e-con-inner,
.tcp-plat-in > .e-con-inner,
.tcp-cards > .e-con-inner,
.tcp-pod-sec > .e-con-inner{
  max-width:var(--tcp-measure);
  margin-inline:auto;
  padding-inline:var(--tcp-gutter);
  box-sizing:border-box;
}

/* a nested inner inside an already padded one adds nothing */
.e-con-inner .e-con-inner{padding-inline:0}

/* ---------- backgrounds stay full width ----------
   Only the content is constrained. A red band or a dark band still runs
   edge to edge, which is what makes the gutter read as deliberate. */
.tcp-pod-platforms,
.tcp-pod-hero,
.tcp-banner,
.tcp-pdp-band,
.tcp-bg,
.tcp-sp{width:100%;max-width:none;padding-inline:0}

/* ---------- Astra wrappers ----------
   Astra caps and pads its own container, which fought the measure above
   and produced two different gutters on the same page. */
.ast-container{max-width:none!important;padding-inline:0!important;width:100%}
.ast-container > .ast-row{margin-inline:0}
.site-content .ast-container{display:block}

/* ---------- vertical rhythm ----------
   Sections were landing anywhere between 40px and 130px apart. */
.tcp-pod-sec{padding-block:clamp(48px,6vw,88px)}

/* nothing should ever push a horizontal scrollbar */
html,body{overflow-x:hidden;max-width:100%}
img,video,iframe,table{max-width:100%}

/* ---------- no double gutter ----------
   Elementor's own boxed containers carry their own side padding from the
   builder. With the gutter now on .e-con-inner that stacked, so the hero
   started 56px in while a heading below it started at 32px. The outer
   container gives up its padding; the inner one owns the gutter. */
.tcp-pod-hero-in,
.tcp-plat-in,
.tcp-cards,
.tcp-pod-sec,
.tcp-bg-sec,
.elementor > .e-con > .e-con-boxed{
  padding-inline:0!important;
}