/* GP542 – gezieltes Katalog-Feintuning, Basis 541.
 * Kategorien kompakter und klar lesbar; Einzelbildkarten erhalten einen
 * weissen Abschluss vor dem Text. Grid-Medienhoehen bleiben unveraendert.
 */

/* Ein Badge muss links von Waage und Herz bleiben und mit 24px Hoehe
 * auch auf schmaleren Vierer-Karten den Kategoriebegriff moeglichst zeigen. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-chips,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-chips {
  top:9px!important;
  left:9px!important;
  max-width:calc(100% - 71px)!important;
  min-height:0!important;
  width:auto!important;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-chip,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-chip {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  box-sizing:border-box!important;
  max-width:100%!important;
  width:max-content!important;
  min-height:23px!important;
  padding:3px 7px!important;
  font-size:10.25px!important;
  line-height:1.15!important;
  font-weight:760!important;
  letter-spacing:-.008em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
/* Am engsten in der 4er-Ansicht: 10px statt des alten 11.7px-Badges. */
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-chip {
  min-height:23px!important;
  font-size:10px!important;
  padding:3px 6px!important;
}

/* Einzelbild-Karten: die leicht gruenliche Bildflaeche endet sauber,
 * bevor der weisse Textbereich anfaengt. Der 15px-Abschluss liegt INNERHALB
 * der bisherigen Medienhoehe und verschiebt keinerlei Nachbarkarte. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-media.is-single-image > .gp-product-loop-image {
  position:relative;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-media.is-single-image > .gp-product-loop-image::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:auto 0 0;
  display:block;
  height:15px;
  background:#fff;
  pointer-events:none;
}
/* Gleichfoermiger weisser Textbeginn, auch bei Hover. Die Grenze zwischen
 * Galerie-Karte und Einzelbild-Karte bleibt identisch hoch. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-main,
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-card:hover .gp-product-loop-main {
  background:#fff!important;
}
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-main {
  padding-top:11px!important;
}
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="3"] .gp-product-loop-main {
  padding-top:12px!important;
}

@container gp-products (max-width:640px){
  .gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-chips,
  .gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-chips {
    max-width:calc(100% - 69px)!important;
  }
}