/*
 * SiteOrigin / eu-layout-parts: Layout-Bruecke
 * Basis: vom Nutzer bereitgestelltes LESS + gerendertes HTML der eCommerz-Startseite
 *
 * HINWEIS: @contentSize, @wideSize, @margin_sides, @mobile_width
 * und @tablet_width werden wie im Original aus eurem LESS-Setup erwartet.
 * SiteOrigin-generiertes Flex-/Responsive-CSS bleibt massgeblich.
 */
/* --------------------------------------------------------------------------
   1. ROW / ROW WRAPPER
   -------------------------------------------------------------------------- */
/* Der zusaetzliche Wrapper ist bei euch DIREKTES Kind der .panel-row.
   Die alte .page-layout-Selektion passt nicht zu diesem HTML. */
.panel-grid > .panel-row > .panel-row-wrapper {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
.panel-row {
  margin: 0 auto;
}
.panel-row > .panel-row-wrapper {
  width: 100%;
  height: 100%;
  min-height: inherit;
  min-width: 0;
  /* NICHT pauschal entfernen: SiteOrigin setzt Flex-Eigenschaften auf
       .panel-row (= eure .panel-row-style). Der innere Wrapper muss sie
       weiterreichen, auch fuer den SiteOrigin-Mobile-Breakpoint. */
  display: inherit;
  flex-direction: inherit;
  flex-wrap: inherit;
  align-items: inherit;
  align-content: inherit;
  flex-grow: inherit;
  justify-content: inherit;
  margin: 0 auto;
}
.panel-row > .panel-row-wrapper.vertical-stretch {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.panel-row > .panel-row-wrapper.vertical-center {
  align-items: center;
}
/* Die Klasse vertical-row-stretch liegt am SELBEN Element wie
   vertical-row-align, nicht an einem Kindelement. */
.panel-row-wrapper.vertical-row-align {
  display: flex;
}
.panel-row-wrapper.vertical-row-align.vertical-row-stretch {
  align-items: stretch;
}
@media (max-width: 780px) {
  .panel-row-wrapper.vertical-row-align.vertical-row-flex-end {
    justify-content: flex-end;
  }
}
/* --------------------------------------------------------------------------
   2. CELLS / VERTIKALE AUSRICHTUNG
   -------------------------------------------------------------------------- */
.panel-grid-cell {
  min-width: 0;
  /* Eure .vertical-cell-align sitzt in .panel-cell-style als DIREKTES KIND
     der .panel-grid-cell, nicht auf einem Eltern-Wrapper. */
}
.panel-grid-cell > .vertical-cell-align {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.panel-grid-cell > .vertical-cell-align.vertical-cell-align-auto {
  align-items: inherit;
}
/* Fuer Produktkacheln: .vertical-stretch ist am Row-Wrapper,
   mehrere Widgets sind jedoch INNERHALB der einen Grid-Cell.
   Daher muss die Verteilung auch im Cell-Wrapper stattfinden. */
.panel-row > .panel-row-wrapper.vertical-stretch > .panel-grid-cell > .panel-cell-style.vertical-cell-align {
  justify-content: space-between;
}
/* --------------------------------------------------------------------------
   3. BREITENKLASSEN (ORIGINAL-API BEIBEHALTEN)
   -------------------------------------------------------------------------- */
.standard-width {
  max-width: 968px;
}
.full-width {
  max-width: 1600px;
}
.full-width-stretch {
  max-width: 100%;
}
/* Nur auf der aeusseren .panel-row einsetzen. Achtung auf
   Scrollbar/Overflow bei 100vw und verschachtelten LayoutParts. */
.full-width-stretch-body {
  margin-left: calc(0px - (100vw - 100%) / 2);
  margin-right: calc(0px - (100vw - 100%) / 2);
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}
.row-outer-width-default {
  max-width: 1600px;
}
.row-inner-width-default {
  max-width: 100%;
}
/* --------------------------------------------------------------------------
   4. SITEORIGIN MOBILE / COLLAPSE
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  .panel-row {
    /* Die normale SiteOrigin-Mobile-Ausgabe adressiert z.T.
       .panel-row-style > .panel-grid-cell, aber eure Grid-Cells liegen
       eine Ebene tiefer. Daher die gezielte Brueckenregel.

       WICHTIG: Die Klasse .has-collapse_behaviour muss anhand eurer
       PHP-Feldsemantik geprueft werden, bevor die Ausnahme geaendert wird. */
  }
  .panel-row:not(.has-collapse_behaviour) > .panel-row-wrapper > .panel-grid-cell {
    width: 100% !important;
    margin-right: 0 !important;
  }
}
/* --------------------------------------------------------------------------
   5. WIDGETS / HOEHEN
   -------------------------------------------------------------------------- */
.widget:has(.parent-height-match) {
  min-height: inherit;
}
.widget .parent-height-match {
  min-height: inherit;
}
.widget .parent-height-match > div {
  min-height: inherit;
}
.panel-has-overlay .panel-cell-style,
.panel-has-overlay .panel-row-style,
.panel-has-overlay .panel-widget-style {
  overflow: visible !important;
}
.widget-title {
  color: inherit;
}
.box-shadow.box-shadow-inset {
  position: relative;
}
.box-shadow.box-shadow-inset::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inherit;
  pointer-events: none;
  z-index: 1;
}
/* --------------------------------------------------------------------------
   6. HINTERGRUENDE
   -------------------------------------------------------------------------- */
.panel-row-style,
.panel-cell-style,
.panel-widget-style,
.panel-background-overlay {
  background-repeat: no-repeat;
}
.background-left,
.background-left .panel-background-overlay {
  background-position-x: left;
}
.background-middle,
.background-middle .panel-background-overlay {
  background-position-x: center;
}
.background-right,
.background-right .panel-background-overlay {
  background-position-x: right;
}
.background-top,
.background-top .panel-background-overlay {
  background-position-y: top;
}
.background-center,
.background-center .panel-background-overlay {
  background-position-y: center;
}
.background-bottom,
.background-bottom .panel-background-overlay {
  background-position-y: bottom;
}
/* --------------------------------------------------------------------------
   7. HEADLINES / FARBVERERBUNG
   -------------------------------------------------------------------------- */
:root {
  --h1-min: 1rem;
  --h2-min: 1rem;
  --h3-min: 1rem;
  --h4-min: 1rem;
  --h5-min: 1rem;
}
/* Original .panel-row\\.has-color war eine literal gepunktete Klasse;
   hier ist die korrekte Kombination beider Klassen gemeint. */
.panel-row.has-color h1,
.widget-wrapper.has-font-color h1,
.panel-row.has-color h2,
.widget-wrapper.has-font-color h2,
.panel-row.has-color h3,
.widget-wrapper.has-font-color h3,
.panel-row.has-color h4,
.widget-wrapper.has-font-color h4,
.panel-row.has-color h5,
.widget-wrapper.has-font-color h5,
.panel-row.has-color h6,
.widget-wrapper.has-font-color h6 {
  color: inherit;
}
/* --------------------------------------------------------------------------
   8. HORIZONTALE CELL-AUSRICHTUNG / WIDGET GRID
   -------------------------------------------------------------------------- */
.panel-grid-cell:has(> .horizontal-cell-align) {
  display: grid;
}
.panel-grid-cell > .horizontal-cell-align-left {
  justify-self: start;
}
.panel-grid-cell > .horizontal-cell-align-right {
  justify-self: end;
}
.panel-grid-cell > .horizontal-cell-align-center {
  justify-self: center;
}
/* Intentional: .widget-wrapper ist direktes Kind von .so-panel.
   display:grid macht justify-self auf .widget-wrapper wirksam. */
.so-panel {
  display: grid;
}
.widget-wrapper.justify-self-left {
  justify-self: start;
}
.widget-wrapper.justify-self-right {
  justify-self: end;
}
.widget-wrapper.justify-self-center {
  justify-self: center;
}
/* Alle responsiven Ausrichtungen muessen den .widget-wrapper SELBST
   ansprechen, nicht > div (das ist kein Grid-Item des .so-panel). */
@media (max-width: 1024px) {
  .widget-wrapper.justify-self-inherit-tablet {
    justify-self: auto;
  }
  .widget-wrapper.justify-self-left-tablet {
    justify-self: start;
  }
  .widget-wrapper.justify-self-right-tablet {
    justify-self: end;
  }
  .widget-wrapper.justify-self-center-tablet {
    justify-self: center;
  }
}
@media (max-width: 780px) {
  .widget-wrapper.justify-self-inherit-mobile {
    justify-self: auto;
  }
  .widget-wrapper.justify-self-left-mobile {
    justify-self: start;
  }
  .widget-wrapper.justify-self-right-mobile {
    justify-self: end;
  }
  .widget-wrapper.justify-self-center-mobile {
    justify-self: center;
  }
}
/* Bestehender Selektor unveraendert - vermutlich fuer WP-Colorpicker. */
.wp-picker-container {
  height: 200px;
}