/* GP523 – kompaktere Favoriten-Icons und sauber ausgerichtete Kartenaktionen.
 * Baut auf 522 auf und ändert nur die Loopcards im Produktarchiv. */

/* Das kleine Herz oben rechts wirkt ruhiger, bleibt aber gut klickbar.
   Aktivzustand färbt sich sanft grün ein; Hover/Fokus reagieren ebenfalls. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-favorite {
  top:10px;
  right:10px;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  padding:4px!important;
  border:1px solid #dbe6de!important;
  background:rgba(255,255,255,.97)!important;
  color:#355e4d!important;
  box-shadow:0 1px 5px rgba(21,46,34,.08)!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-favorite:hover,
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-favorite:focus-visible {
  background:#f4f9f5!important;
  border-color:#bcd2c3!important;
  color:#2f5f44!important;
  box-shadow:0 2px 8px rgba(21,46,34,.10)!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 {
  width:16px;
  height:16px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-favorite.is-active,
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-favorite[aria-pressed="true"] {
  background:#edf6ea!important;
  border-color:#9fc68d!important;
  color:#4f8534!important;
  box-shadow:0 1px 6px rgba(79,133,52,.10)!important;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-favorite:active {
  transform:scale(.97);
}

/* Damit die Kategorie links und das Herz rechts optisch in einer Reihe sitzen,
   begrenzen wir die verfügbare Chipbreite sauber neu. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-chips {
  inset:10px auto auto 10px;
  max-width:calc(100% - 52px);
}
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-chips {
  inset:10px auto auto 10px;
  max-width:calc(100% - 50px);
}
.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="4"] .gp-product-loop-top-favorite {
  top:10px;
  right:10px;
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  min-height:31px!important;
}

/* Unterer Kartenbereich: alle Zeilen wirken ruhiger und stehen zueinander
   sauber auf einem Raster. */
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-commerce {
  gap:8px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-commerce-metadata {
  align-items:center;
  min-height:20px;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-price {
  align-items:baseline;
  gap:3px 8px;
  min-height:2.05rem;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-main-actions .gp-product-loop-button {
  min-height:40px;
  padding:8px 10px;
}
.gp-product-archive .gp-product-list.is-grid-view .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 {
  min-height:38px;
  padding:7px 6px!important;
  border:1px solid #dfe8e3!important;
  border-radius:8px;
  background:#fff!important;
}
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-side-actions .gp-library-button [data-gp-label] {
  position:relative;
  top:-.01em;
}

/* Auf schmaleren Breiten die Buttons minimal lockern, damit nichts drückt. */
@container gp-products (max-width:980px) {
  .gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-side-actions .gp-library-button {
    font-size:10.8px;
  }
}