/* GP570 – canonical product-catalog refinement replacing historical layers 564–569.
 * One coherent set of rules for category selectors, gallery thumbnails, action
 * icons, filter scroll spacing, promise illustrations and 2er/3er text balance.
 * Source product texts are NEVER changed. 4er text rule remains GP559.
 */



/* Filter layouts and active states are now owned by archive-filters631.css.
 * Former pre-628 filter overrides retired; card and action rules below are retained. */

/* 3. Top-actions: steady and neutral, sufficiently large targets, small internal SVGs. */


.gp-product-archive .gp-product-list .gp-product-loop-top-actions{
  top:11px;right:11px;height:33px;gap:6px;
}


.gp-product-archive .gp-product-list .gp-product-loop-top-actions>.gp-product-loop-top-action,
.gp-product-archive .gp-product-list.is-grid-view .gp-product-loop-top-actions>.gp-product-loop-top-action{
  position:static!important;
  flex:0 0 33px!important;
  box-sizing:border-box!important;
  width:33px!important;height:33px!important;
  min-width:33px!important;min-height:33px!important;
  max-width:33px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
  border:1px solid #d7e3dc!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 1px 3px rgba(21,46,34,.05)!important;
}


.gp-product-archive .gp-product-list .gp-product-loop-top-actions>.gp-product-loop-top-action .gp-library-button__icon,
.gp-product-archive .gp-product-list .gp-product-loop-top-actions>.gp-product-loop-top-action .gp-library-button__icon svg{
  width:13px!important;height:13px!important;
}


.gp-product-archive .gp-product-list .gp-product-loop-top-actions>.gp-product-loop-top-action:hover{
  background:#fff!important;
  border-color:#d7e3dc!important;
  box-shadow:0 1px 3px rgba(21,46,34,.05)!important;
}


.gp-product-archive .gp-product-list .gp-product-loop-top-actions>.gp-product-loop-top-action:is(.is-active,[aria-pressed="true"],[data-gp-selected="true"]){
  color:#356942!important;
  background:#f8fbf8!important;
  border-color:#a6c1b1!important;
}



/* 4. Thumbnails – unbroken outlines and a single active green. */


.gp-product-archive .gp-product-list .gp-product-loop-gallery-thumb{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;overflow:hidden;padding:3px;
  border:1px solid #dce7df;border-radius:9px;
  background:#fff;box-shadow:none;
}


.gp-product-archive .gp-product-list .gp-product-loop-gallery-thumb img{
  display:block;width:100%;height:100%;object-fit:contain;border-radius:6px;
}


.gp-product-archive .gp-product-list .gp-product-loop-gallery-thumb:is(.is-active,[aria-pressed="true"]){
  border-color:#61A143;background:#f6fbf5;
  box-shadow:inset 0 0 0 1px #61A143;
}



/* 5. Product promise icons: one outer enclosure, no nested geometry. */


.gp-product-archive .gp-product-promise403__icon{
  width:3.1rem;height:3.1rem;border-radius:.95rem;
  border:1px solid #dae9dd;background:#eaf4ed;
  display:grid;place-items:center;
}


.gp-product-archive .gp-product-promise403__icon>img.gp-site-illustration{
  display:block;width:92%!important;height:92%!important;object-fit:contain;margin:auto;
}


.gp-product-archive .gp-product-promise403__icon>img.gp-art-selected{
  width:90%!important;height:90%!important;
}


@media (max-width:48rem){
  
.gp-product-archive .gp-product-promise403__icon{width:2.7rem;height:2.7rem;border-radius:.8rem;}

}


/* Header & menu interaction surfaces remain visually quiet, keyboard focus stays visible. */


.gp-hf-header :is(.gp-hf-action,.gp-hf-menu-button):hover,
.gp-hf-header :is(.gp-hf-action,.gp-hf-menu-button):active,
.gp-hf-panel .gp-hf-close:hover,
.gp-hf-panel .gp-hf-scope-button:hover{
  background:#fff!important;border-color:#d9e4dc!important;
  box-shadow:none!important;transform:none!important;
}


.gp-hf-panel .gp-hf-panel-link:hover,
.gp-hf-panel .gp-hf-panel-legal a:hover{background:#fff!important;box-shadow:none!important;}



/* 6. Natural multi-line text balance – no calculated widths, no DOM mutation.
 * Full text in 2er/3er; four-column line clamp remains under GP559. */


.gp-product-archive .gp-product-list.is-grid-view:is([data-gp-columns="2"],[data-gp-columns="3"]) .gp-product-loop-description{
  display:block!important;
  box-sizing:border-box;
  width:100%!important;
  max-width:none!important;
  max-inline-size:none!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  -webkit-line-clamp:unset!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  text-wrap:balance;
}


/* Earlier 2er/3er commerce adjustment retained without touching 4er. */


.gp-product-archive .gp-product-list.is-grid-view:is([data-gp-columns="2"],[data-gp-columns="3"]) .gp-product-loop-main{
  padding-bottom:2px!important;gap:6px!important;
}


.gp-product-archive .gp-product-list.is-grid-view:is([data-gp-columns="2"],[data-gp-columns="3"]) .gp-product-loop-commerce{
  margin-top:2px!important;padding-top:2px!important;
}


.gp-product-archive .gp-product-list.is-grid-view:is([data-gp-columns="2"],[data-gp-columns="3"]) .gp-product-loop-main-actions{margin-top:1px!important;}




/* GP571 – Archiv-Feinschliff nach Live-QA.
 * Ziele: keine farbigen Aktiv-Hintergründe in Toolbar/Filterzeilen,
 * sauberere Listenkarte, bessere Textbalance in 2er/3er-Kacheln,
 * stimmiger Abstand der Pagination zum Footer.
 */



/* Historical filter-only state rules removed; archive-filters631.css owns filter focus/appearance. */

/* B) Toolbar: keine blau/grünen Flächen oder Fokus-Ringe beim Umschalten. */


.gp-product-archive .gp-directory-view-toggle{
  padding:.18rem!important;
  border:1px solid #d8e5d9!important;
  border-radius:.9rem!important;
  background:#fff!important;
  box-shadow:none!important;
}


.gp-product-archive .gp-directory-view-toggle button{
  position:relative;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#5e7369!important;
}


.gp-product-archive .gp-directory-view-toggle button:is(:hover,:focus,:focus-visible){
  background:transparent!important;
  color:#27493f!important;
  outline:none!important;
  box-shadow:none!important;
}


.gp-product-archive .gp-directory-view-toggle button:is(.is-active,[aria-pressed="true"]){
  background:transparent!important;
  color:#27493f!important;
  box-shadow:inset 0 -2px 0 #61A143!important;
}


.gp-product-archive .gp-directory-columns select,
.gp-product-archive .gp-directory-sort select{
  appearance:none;
  background-color:#fff!important;
  box-shadow:none!important;
  outline:none!important;
}


.gp-product-archive .gp-directory-columns select:is(:focus,:focus-visible),
.gp-product-archive .gp-directory-sort select:is(:focus,:focus-visible){
  border-color:#ccd9d1!important;
  box-shadow:none!important;
  outline:none!important;
}



/* C) Loopcard: Listenansicht klarer und ruhiger aufbauen. */





























/* D) 2er-/3er-Kacheln: ausgewogenere Zeilenumbrüche, ohne Quelldaten zu verändern. */


.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="2"] .gp-product-loop-description,
.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="3"] .gp-product-loop-description{
  text-wrap:pretty;
}


.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="2"] .gp-product-loop-title{max-inline-size:30ch;}


.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="2"] .gp-product-loop-description{max-inline-size:36ch;}


.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="3"] .gp-product-loop-title{max-inline-size:24ch;}


.gp-product-archive .gp-product-list.is-grid-view[data-gp-columns="3"] .gp-product-loop-description{max-inline-size:30ch;}



/* E) Pagination: näher an den Inhalt, aber mit sauberem Abschluss vor dem Footer. */


.gp-product-archive :is(.gp-product-pagination,.gp-product-client-pagination){
  margin-top:clamp(.82rem,1vw,1rem)!important;
  margin-bottom:clamp(1.18rem,1.7vw,1.45rem)!important;
  padding-bottom:0!important;
}


.gp-product-archive .gp-directory-layout{
  padding-bottom:clamp(.1rem,.3vw,.22rem)!important;
}