:root{--sg-cw:1240px;--sg-cpad:24px}
/* always reserve the vertical scrollbar so the centred header/content never
 * shift between short and long pages (the "jump" on page change). */
html{overflow-y:scroll!important;scrollbar-gutter:stable}
/* neutralise the old overview cap from sg-produkte-css.php (please delete that file) */
.sg-overview main{max-width:none!important;padding:0!important}

/* The custom renderers output a full-width <main> whose inner .*-wrap caps the
 * content at 1240. Bricks' flex <body> does NOT stretch the <main> (no
 * align-items:stretch), so without an explicit width the <main> takes its
 * content's min-content width (~1000px from the product grid) and overflows
 * horizontally on MOBILE. Force full width + allow it to shrink below content. */
main.sg-pv,main.sg-dx,main.sg-nw{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
main.pd-wrap{min-width:0!important}
.sg-pv-grid,.sg-dx-grid,.sg-nw-grid{min-width:0}

/* unified breadcrumb (.pd-crumbs) — its CSS used to load only on product pages,
 * so on Leaderboards/Codes/App it was unstyled. Define it globally + dark-mode. */
.pd-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--sg-color-text-subtle,#687076);margin:0 0 16px}
.pd-crumbs a{color:var(--sg-color-text-subtle,#687076);text-decoration:none}
.pd-crumbs a:hover{color:var(--sg-color-primary-text,#0e7a6f)}
.pd-crumbs .pd-crumb-cur{color:#181818}
html[data-sg-theme="dark"] .pd-crumbs,html[data-sg-theme="dark"] .pd-crumbs a{color:var(--sg-color-text-muted)}
html[data-sg-theme="dark"] .pd-crumbs .pd-crumb-cur{color:var(--sg-color-text)}
/* Abstand oben + Breadcrumb-Abstand kommen einheitlich aus .sg-container / .sg-breadcrumbs
 * (sg-design-system/components/layout.css) – hier bewusst KEINE eigenen Werte mehr. */
.sg-pv-wrap,.sg-nw-wrap,.pd-wrap,.dl-wrap,.sg-app-wrap,.sg-pc-wrap,.sg-hp-sec{
  /* width:100% is essential: the Bricks <body> is display:flex/column, so a
   * <main> with only max-width + margin:auto shrinks to its content. width:100%
   * makes it fill up to max-width and centre correctly. */
  width:100%!important;
  max-width:var(--sg-cw)!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:var(--sg-cpad)!important;padding-right:var(--sg-cpad)!important;
  box-sizing:border-box!important;
}

/* Native Bricks-built pages/posts: widen the section root containers so they
 * match too (proper fix is Bricks → Settings → Layout → Content width = 1240).
 * Scoped to root containers (direct child of a section) so nested containers are
 * untouched. Adjust the selector if a specific page still differs. */
.brxe-section > .brxe-container,
.brxe-section > .brxe-block,
.brxe-section > div[class*="brxe-container"]{
  max-width:var(--sg-cw)!important;margin-left:auto!important;margin-right:auto!important;
}

/* The theme styles bare <header> elements with a background colour, which bleeds
 * into our in-content section heads (Restocks, overview, deals, news, …). Keep
 * every content head transparent and flat across all pages. */
main header:not([class*="hero"]),.pd-wrap header:not([class*="hero"]), /* Heros behalten ihre eigene Fläche (z. B. Vorpacklink) */
.sg-rs-head,.sg-pv-head,.sg-nw-head,.sg-dx-head,.sg-acc-head,.sg-rp-head,.sg-pc-head{
  background:transparent!important;box-shadow:none!important;border:0!important
}
/* sg-theme.php sets `html[data-sg-theme="dark"] header{background:#10171c}` which
 * has higher specificity (0,1,2) than the rule above, so the dark bg bled through.
 * Match it with dark-scoped, higher-specificity overrides. */
html[data-sg-theme="dark"] main header:not([class*="hero"]),html[data-sg-theme="dark"] .pd-wrap header:not([class*="hero"]),
html[data-sg-theme="dark"] .sg-rs-head,html[data-sg-theme="dark"] .sg-pv-head,
html[data-sg-theme="dark"] .sg-nw-head,html[data-sg-theme="dark"] .sg-dx-head,
html[data-sg-theme="dark"] .sg-acc-head,html[data-sg-theme="dark"] .sg-rp-head,
html[data-sg-theme="dark"] .sg-pc-head{
  background:transparent!important;box-shadow:none!important;border:0!important
}

@media(max-width:640px){
  :root{--sg-cpad:16px}
}