/* GP528 – Produkt-Loopcards für 2–4 Karten pro Reihe systematisch
 * neu ausgerichtet. Ziel: sauberer, professioneller und konsistenter Aufbau
 * in allen Grid-Varianten ohne Code-Leichen in älteren Templates.
 * 529: Medienabschluss von Karten mit und ohne Galerie exakt angeglichen.
 * 531: Medienraster ohne Blankstreifen; historische Overrides bereinigt.
 * 532: ruhigeres Titelsystem und getrennte Text-/Preiszonen.
 */

.gp-product-archive .gp-product-list.is-grid-view{
  --gp-loop-card-radius:20px;
  --gp-loop-image-h:228px;
  --gp-loop-gallery-h:64px;
  --gp-loop-thumb-w:50px;
  --gp-loop-thumb-h:46px;
  --gp-loop-main-pad-x:16px;
  --gp-loop-main-pad-top:16px;
  --gp-loop-main-pad-bottom:6px;
  --gp-loop-commerce-pad-bottom:16px;
  --gp-loop-title-size:clamp(16px,.98vw,18.5px);
  --gp-loop-title-min:3.69em;
  --gp-loop-title-max:3.69em;
  --gp-loop-desc-size:14px;
  --gp-loop-desc-lh:1.45;
  --gp-loop-desc-lines:3;
  --gp-loop-desc-min:4.35em;
  --gp-loop-desc-max:4.35em;
  --gp-loop-provider-height:44px;
  --gp-loop-provider-font:14px;
  --gp-loop-utility-height:38px;
  --gp-loop-utility-font:11.25px;
  --gp-loop-gap:16px;
}



.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="2"]{
  --gp-loop-image-h:250px;
  --gp-loop-gallery-h:70px;
  --gp-loop-thumb-w:54px;
  --gp-loop-thumb-h:50px;
  --gp-loop-main-pad-x:17px;
  --gp-loop-main-pad-top:17px;
  --gp-loop-title-size:clamp(18.5px,1.13vw,21px);
  --gp-loop-title-min:2.48em;
  --gp-loop-title-max:3.72em;
  --gp-loop-desc-size:14px;
  --gp-loop-provider-height:46px;
  --gp-loop-provider-font:15px;
  --gp-loop-utility-height:40px;
  --gp-loop-utility-font:12px;
}

.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="3"]{
  --gp-loop-image-h:226px;
  --gp-loop-gallery-h:64px;
  --gp-loop-thumb-w:50px;
  --gp-loop-thumb-h:46px;
  --gp-loop-main-pad-x:16px;
  --gp-loop-main-pad-top:16px;
  --gp-loop-title-size:clamp(16px,.95vw,18px);
  --gp-loop-title-min:3.72em;
  --gp-loop-title-max:3.72em;
  --gp-loop-desc-size:13.5px;
  --gp-loop-provider-height:44px;
  --gp-loop-provider-font:14px;
  --gp-loop-utility-height:38px;
  --gp-loop-utility-font:11.25px;
}

.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"]{
  --gp-loop-image-h:198px;
  --gp-loop-gallery-h:60px;
  --gp-loop-thumb-w:42px;
  --gp-loop-thumb-h:42px;
  --gp-loop-main-pad-x:14px;
  --gp-loop-main-pad-top:14px;
  --gp-loop-main-pad-bottom:6px;
  --gp-loop-commerce-pad-bottom:14px;
  --gp-loop-title-size:clamp(13.75px,.84vw,14.5px);
  --gp-loop-title-min:3.72em;
  --gp-loop-title-max:3.72em;
  --gp-loop-desc-size:12.75px;
  --gp-loop-desc-lines:3;
  --gp-loop-desc-min:4.2em;
  --gp-loop-desc-max:4.2em;
  --gp-loop-provider-height:40px;
  --gp-loop-provider-font:13px;
  --gp-loop-utility-height:36px;
  --gp-loop-utility-font:10.25px;
  column-gap:16px;
  row-gap:16px;
}

/* Grundlayout aller Grid-Karten */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-card{
  height:100%;
  border-radius:var(--gp-loop-card-radius);
  box-shadow:0 4px 18px rgba(33,62,49,.045);
  overflow:hidden;
}
/* Ein gemeinsames, exakt definiertes Medienraster für 2–4 Spalten.
 * Galerie = Hauptbild + Vorschaureihe. Einzelbild = ein durchgehendes Bild
 * mit exakt der GLEICHEN Gesamthöhe – kein Pseudoelement, kein Leerstreifen. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-media,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-media{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--gp-loop-image-h) var(--gp-loop-gallery-h);
  align-content:start;
  gap:0;
  min-width:0;
  height:calc(var(--gp-loop-image-h) + var(--gp-loop-gallery-h));
  min-height:0;
  max-height:none;
  background:#fff;
  border-bottom:1px solid #edf2ee;
  box-sizing:border-box;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-image,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-image{
  grid-column:1;
  grid-row:1;
  display:block;
  position:relative;
  width:100%;
  height:var(--gp-loop-image-h);
  min-height:0;
  max-height:none;
  margin:0;
  border:0;
  background:linear-gradient(160deg,#ffffff 0%,#f7fbf8 100%);
  box-sizing:border-box;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-image img{
  padding:clamp(16px,1.6vw,26px) clamp(14px,1.4vw,22px) 10px;
  object-fit:contain;
}
/* Wichtig: Die EINZELbildfläche füllt den gesamten Platz bis zur
 * gemeinsamen Trennlinie – kein frei stehender 60–100px-Balken mehr. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-media.is-single-image,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-media.is-single-image{
  grid-template-rows:minmax(0,1fr);
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-media.is-single-image > .gp-product-loop-image,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-media.is-single-image > .gp-product-loop-image{
  grid-column:1;
  grid-row:1;
  display:block;
  height:100%;
  min-height:0;
  max-height:none;
  margin:0;
  border:0;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-media.is-single-image::after,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-media.is-single-image::after{
  content:none;
  display:none;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-media.is-single-image .gp-product-loop-image img{
  padding:clamp(23px,1.9vw,36px) clamp(15px,1.5vw,24px) 14px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-media.has-gallery .gp-product-loop-gallery-thumbs,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-media.has-gallery .gp-product-loop-gallery-thumbs{
  grid-column:1;
  grid-row:2;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  height:var(--gp-loop-gallery-h);
  min-height:0;
  max-height:var(--gp-loop-gallery-h);
  box-sizing:border-box;
  margin:0;
  padding:6px 10px 8px;
  gap:6px;
  border-top:1px solid #edf2ee;
  background:#fff;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-gallery-thumb{
  flex:0 0 var(--gp-loop-thumb-w);
  width:var(--gp-loop-thumb-w);
  height:var(--gp-loop-thumb-h);
  border-radius:10px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-gallery-thumb img{
  padding:0;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-main{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:var(--gp-loop-main-pad-top) var(--gp-loop-main-pad-x) var(--gp-loop-main-pad-bottom);
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-title,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="2"] .gp-product-loop-title,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="3"] .gp-product-loop-title,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-title{
  margin:0;
  min-height:var(--gp-loop-title-min);
  max-height:var(--gp-loop-title-max);
  font-size:var(--gp-loop-title-size);
  line-height:1.24;
  letter-spacing:-.016em;
  text-wrap:pretty;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-description{
  margin:0;
  min-height:var(--gp-loop-desc-min);
  max-height:var(--gp-loop-desc-max);
  font-size:var(--gp-loop-desc-size);
  line-height:var(--gp-loop-desc-lh);
  color:#62736d;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--gp-loop-desc-lines);
  overflow:hidden;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-commerce,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="2"] .gp-product-loop-commerce,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="3"] .gp-product-loop-commerce,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-commerce{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  margin-top:0;
  padding:7px var(--gp-loop-main-pad-x) var(--gp-loop-commerce-pad-bottom);
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-commerce-metadata{
  min-height:22px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:4px 10px;
  line-height:1.2;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-stock-indicator,
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-delivery{
  min-width:0;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-delivery{
  text-align:right;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-price{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:end;
  gap:2px 8px;
  min-height:auto;
  margin:0;
  text-align:left;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-price strong{
  grid-column:1;
  line-height:1.02;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-price .gp-product-loop-package{
  grid-column:2;
  align-self:end;
  line-height:1.15;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-price .gp-product-loop-price-note,
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-price .gp-product-loop-availability{
  grid-column:1 / -1;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-main-actions{
  margin-top:2px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-main-actions .gp-product-loop-button{
  min-height:var(--gp-loop-provider-height);
  padding:10px 14px;
  border-radius:11px;
  font-size:var(--gp-loop-provider-font);
  font-weight:800;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-side-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-side-actions .gp-library-button{
  min-height:var(--gp-loop-utility-height);
  padding:7px 10px!important;
  border-radius:10px;
  font-size:var(--gp-loop-utility-font)!important;
  font-weight:730!important;
  line-height:1.1;
}












/* 2 Karten: großzügig, aber kompakt genug. */
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="2"] .gp-product-loop-price strong{
  font-size:clamp(22px,1.55vw,26px);
}
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="2"] .gp-product-loop-side-actions .gp-library-button__icon svg{
  width:14px;
  height:14px;
}

/* 3 Karten: Referenzlook mit klarer Vertikalausrichtung. */
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="3"] .gp-product-loop-price strong{
  font-size:clamp(21px,1.42vw,24px);
}

/* 4 Karten: engste Karte, daher besonders präzise Verdichtung. */
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-main{
  gap:6px;
}
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-price strong{
  font-size:clamp(18px,.98vw,22px);
}
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-commerce-metadata{
  min-height:20px;
  font-size:10.8px;
}
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-side-actions .gp-library-button{
  letter-spacing:-.012em;
}

/* Oberes Herz über alle Rastervarianten minimal besser einbetten. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-favorite{
  top:12px;
  right:12px;
}
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="2"] .gp-product-loop-top-favorite{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
}




/* Allgemeine mobile Rücksicht. */
@container gp-products (max-width: 640px) {
  /* Kleine Geräte: keine künstlich reservierte dritte Titelzeile. */
  .gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-title,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="2"] .gp-product-loop-title,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="3"] .gp-product-loop-title,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-title{
    min-height:0;
    max-height:3.75em;
    font-size:clamp(15px,3.9vw,18px);
  }
  .gp-product-archive .gp-product-list.is-grid-view{
    --gp-loop-main-pad-x:14px;
    --gp-loop-main-pad-top:14px;
    --gp-loop-provider-height:42px;
    --gp-loop-provider-font:13px;
    --gp-loop-utility-height:36px;
    --gp-loop-utility-font:10.5px;
  }
  .gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-commerce-metadata{
    grid-template-columns:1fr;
    gap:4px;
  }
  .gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-delivery{
    text-align:left;
  }
}