/* GP527 – Merken/Vergleichen sichtbar aktiv halten und
 * Produkt-Loopcards nochmals luftiger und gleichmäßiger ausrichten. */

:root {
  --gp-library-active-bg:#eef7ea;
  --gp-library-active-border:#9fc38f;
  --gp-library-active-color:#4f8534;
  --gp-library-hover-bg:#f7fbf7;
  --gp-library-hover-border:#bfd4c4;
  --gp-library-hover-color:#2f5f44;
}

:where([data-gp-favorite-toggle],[data-gp-compare-toggle]).gp-library-button {
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
:where([data-gp-favorite-toggle],[data-gp-compare-toggle]).gp-library-button:hover,
:where([data-gp-favorite-toggle],[data-gp-compare-toggle]).gp-library-button:focus-visible {
  background:var(--gp-library-hover-bg)!important;
  border-color:var(--gp-library-hover-border)!important;
  color:var(--gp-library-hover-color)!important;
}
:where([data-gp-favorite-toggle],[data-gp-compare-toggle]).gp-library-button:is(.is-active,[aria-pressed="true"],[data-gp-selected="true"]) {
  background:var(--gp-library-active-bg)!important;
  border-color:var(--gp-library-active-border)!important;
  color:var(--gp-library-active-color)!important;
  box-shadow:none!important;
}
:where([data-gp-favorite-toggle],[data-gp-compare-toggle]).gp-library-button:is(.is-active,[aria-pressed="true"],[data-gp-selected="true"]) .gp-library-button__icon svg {
  fill:currentColor;
  stroke:currentColor;
}

/* Oberes Herz in Loopcards: etwas kleiner, ruhiger und im aktiven Zustand dauerhaft sichtbar. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-favorite,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-top-favorite {
  top:10px;
  right:10px;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #d7e1db!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.98)!important;
  color:#355f4d!important;
  box-shadow:0 1px 4px rgba(21,46,34,.06)!important;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-favorite .gp-library-button__icon,
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-favorite svg,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-top-favorite .gp-library-button__icon,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-top-favorite svg {
  width:13px;
  height:13px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-favorite:is(.is-active,[aria-pressed="true"],[data-gp-selected="true"]),
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-top-favorite:is(.is-active,[aria-pressed="true"],[data-gp-selected="true"]) {
  background:var(--gp-library-active-bg)!important;
  border-color:var(--gp-library-active-border)!important;
  color:var(--gp-library-active-color)!important;
  box-shadow:0 1px 4px rgba(21,46,34,.07)!important;
}

/* Loopcards etwas luftiger; der untere Commerce-Bereich wird leicht nach oben gezogen. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-card,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-card {
  border-radius:18px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-main,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-main {
  gap:6px;
  padding:13px 14px 3px;
}
.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="4"] .gp-product-loop-title {
  margin-bottom:1px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-description,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-description {
  margin-bottom:2px;
  line-height:1.44;
}
.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="4"] .gp-product-loop-commerce {
  margin-top:-16px;
  gap:5px;
  padding:0 14px 14px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-commerce-metadata,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-commerce-metadata {
  min-height:18px;
  margin:0;
  gap:3px 10px;
  align-items:center;
  line-height:1.18;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-price,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-price {
  gap:1px 8px;
  min-height:0;
  margin-top:-1px;
  line-height:1.02;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-price strong,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-price strong {
  line-height:1;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-main-actions,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .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,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-main-actions .gp-product-loop-button {
  min-height:40px;
  padding:8px 11px;
}

/* Untere Utility-Buttons sauber zentrieren. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-side-actions,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-side-actions {
  gap:8px;
  align-items:stretch;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-side-actions .gp-library-button,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-side-actions .gp-library-button {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px;
  min-height:36px;
  padding:6px 8px!important;
  font-size:10px!important;
  font-weight:730!important;
  line-height:1.08;
  letter-spacing:-.01em;
  white-space:nowrap;
  text-align:center;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-side-actions .gp-library-button__icon,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-side-actions .gp-library-button__icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:13px;
  height:13px;
  flex:0 0 13px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-side-actions .gp-library-button__icon svg,
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-side-actions .gp-library-button__icon svg {
  width:13px;
  height:13px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-side-actions .gp-library-button [data-gp-label],
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-side-actions .gp-library-button [data-gp-label] {
  position:relative;
  top:-.01em;
}

@container gp-products (max-width:980px) {
  .gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-commerce {
    margin-top:-10px;
  }
  .gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-side-actions .gp-library-button {
    font-size:10.5px!important;
  }
}