/* =====================================================================
   GrowCologne – Produktkarte (B21) und Produkt-Raster
   Loop-Item „GC Produktkarte“ (scripts/relaunch/build/shop.php), genutzt im Produktarchiv, bei
   „Passt dazu“ auf der Produktseite und in Loop Grids auf Inhaltsseiten (Warengruppen, Suche).
   Lädt deshalb auf JEDER Seite (inc/assets.php) – nur Karte und Raster, nichts Woo-Seitenweites.

   Präfix `html:root body` vor jeder Regel: siehe Kopf von layout.css. Die Klassen stehen an
   Elementor-Containern und -Widgets; die Regeln greifen deshalb auf die innere Struktur
   (`.elementor-heading-title`, `.price`, `.button`).
   Germanized-Angaben (`p.wc-gzd-additional-info`) werden gestaltet, nie ausgeblendet. Leere
   Germanized-Widgets (kein Grundpreis, kein Pfand, keine Lieferzeit) haben keine Höhe und der
   Container `gc-pcard-legal` keinen Abstand (`gc-x`) – es entsteht keine Lücke.
   ===================================================================== */

/* ---------- Raster: `.gc-pgrid` am Loop-Grid-Widget ---------- */
html:root body .gc-pgrid{--grid-column-gap:var(--gc-gap);--grid-row-gap:var(--gc-gap)}
html:root body .gc-pgrid .elementor-loop-container{align-items:stretch}
/* Elementor gibt dem Loop-Item keine Höhe; die Karte füllt die Rasterzelle. */
html:root body .gc-pgrid .e-loop-item{display:flex;flex-direction:column;min-width:0}
html:root body .gc-pgrid .e-loop-item>.gc-pcard{flex:1 1 auto}

/* ---------- Karte ---------- */
html:root body .gc-pcard{position:relative;display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;min-width:0;height:100%;padding:6px 6px 12px;border-radius:var(--gc-r-m);background:#fff;box-shadow:var(--gc-sh);color:var(--gc-ink);font:400 .9375rem/1.45 var(--gc-sans);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:transform .2s var(--gc-ease),box-shadow .2s var(--gc-ease)}
html:root body .gc-pcard:hover{transform:translateY(-3px);box-shadow:var(--gc-sh-lg)}
/* Fokus: Healfio setzt `:focus{outline:none}` */
html:root body .gc-pcard :focus-visible{outline:3px solid var(--gc-nacht);outline-offset:2px}

/* Foto mit Sticker-Rand: der weiße Kartenrand ist die Sticker-Kante, das Foto hat den kleinen Radius */
html:root body .gc-pcard-media{position:relative;flex:none;border-radius:var(--gc-r-s);overflow:hidden;background:var(--gc-mint)}
html:root body .gc-pcard-img a{display:block}
/* Produktfotos sind freigestellt auf Weiß: ganz zeigen (contain) und das Weiß mit der Mint-Fläche verrechnen */
html:root body .gc-pcard-img img{display:block;width:100%;height:auto;aspect-ratio:1/1;padding:7%;object-fit:contain;border-radius:0;mix-blend-mode:multiply}
/* Produkt ohne Bild: Fläche bleibt quadratisch */
html:root body .gc-pcard-media:not(:has(img)){aspect-ratio:1/1}

/* Sticker auf dem Foto: Sale / Ausverkauft */
html:root body .gc-pflags{position:absolute;left:8px;top:8px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
html:root body .gc-pflag{display:inline-block;padding:.3em .62em .36em;border:3px solid #fff;border-radius:11px;background:var(--gc-neon);color:var(--gc-nacht);font:400 1.0625rem/1 var(--gc-hand);letter-spacing:.01em;white-space:nowrap;box-shadow:var(--gc-sh);transform:rotate(-4deg)}
html:root body .gc-pflag-out{background:var(--gc-beige);transform:rotate(-2deg)}
/* Ausverkauft: Foto zurücknehmen (`.outofstock` setzt Woo am Loop-Item) */
html:root body .outofstock .gc-pcard-img img{opacity:.55;filter:saturate(.6)}

/* Text */
html:root body .gc-pcard-body{flex:1 1 auto;display:flex;flex-direction:column;flex-wrap:nowrap;gap:6px;min-width:0;padding:12px 8px 0}
html:root body .gc-pbrand{margin:0;font:700 .75rem/1.2 var(--gc-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gc-gruen)}
html:root body .gc-pcard-title .elementor-heading-title{margin:0;font:700 1rem/1.25 var(--gc-sans);letter-spacing:-.01em;text-transform:none;color:var(--gc-ink);overflow-wrap:anywhere;hyphens:auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html:root body .gc-pcard-title .elementor-heading-title a{color:inherit;text-decoration:none}
html:root body .gc-pcard-title .elementor-heading-title a:hover{color:var(--gc-gruen);text-decoration:underline;text-underline-offset:.18em}

/* Preis + Pflichtangaben: unten in der Karte, direkt über dem Button */
html:root body .gc-pcard-buy{flex:none;margin-top:auto;padding-top:6px;gap:0}
html:root body .gc-pcard-price .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin:0;font:800 1.25rem/1.2 var(--gc-sans);letter-spacing:-.015em;color:var(--gc-gruen)}
html:root body .gc-pcard-price .price del{order:2;font-weight:500;font-size:.875rem;color:var(--gc-ink-2);opacity:1;text-decoration-thickness:1.5px}
html:root body .gc-pcard-price .price ins{order:1;text-decoration:none;background:none;color:inherit}
html:root body .gc-pcard-legal{gap:0;margin-top:2px}
html:root body .gc-pcard-legal :is(p,.wc-gzd-additional-info){margin:0;padding:0;font:400 .75rem/1.4 var(--gc-sans);letter-spacing:normal;color:var(--gc-ink-2)}
html:root body .gc-pcard-legal a{color:inherit;text-decoration:underline;text-underline-offset:.16em}
html:root body .gc-pcard-legal a:hover{color:var(--gc-gruen)}
html:root body .gc-pcard-legal .price-unit{font-weight:600;color:var(--gc-ink)}

/* In den Warenkorb (Loop-Button von Woo; nicht kaufbar = Link „Zum Produkt“) */
html:root body .gc-pcard-cart{flex:none;margin-top:10px}
/* Elementor Pro legt Formular und Hülle als Flex-Zeile an (Mengenfeld + Button); hier steht nur der Button, volle Breite */
html:root body .gc-pcard-cart.elementor-widget :is(.elementor-add-to-cart,.e-loop-add-to-cart-form-container,form.cart){display:block;width:100%;margin:0;padding:0}
/* Gegen Healfio/Woo: `.woocommerce a.button` (Fläche, Radius, Schatten, Großbuchstaben) */
html:root body .gc-pcard-cart.elementor-widget form.cart .button{position:relative;display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;min-height:44px;margin:0;padding:0 .9em;border:2px solid transparent;border-radius:999px;background:var(--gc-gruen);color:#fff;font:700 .875rem/1.15 var(--gc-sans);letter-spacing:normal;text-transform:none;text-decoration:none;text-align:center;box-shadow:none;opacity:1;cursor:pointer;transition:background-color .18s,transform .18s var(--gc-ease)}
html:root body .gc-pcard-cart.elementor-widget form.cart .button:hover{background:var(--gc-gruen-d);color:#fff}
/* Nicht kaufbar / Auswahl nötig: Linien-Button */
html:root body .gc-pcard-cart.elementor-widget form.cart .button:not(.add_to_cart_button),
html:root body .gc-pcard-cart.elementor-widget form.cart .button.product_type_variable{background:#fff;color:var(--gc-gruen);border-color:var(--gc-gruen)}
html:root body .gc-pcard-cart.elementor-widget form.cart .button:not(.add_to_cart_button):hover,
html:root body .gc-pcard-cart.elementor-widget form.cart .button.product_type_variable:hover{background:var(--gc-salbei);color:var(--gc-nacht)}
/* Zustände des AJAX-Buttons ohne Woos Icon-Schrift */
/* !important: Healfio blendet die Beschriftung mit `.woocommerce .button.loading/.added{color:transparent!important;background-color:…!important}` aus */
html:root body .gc-pcard-cart.elementor-widget form.cart .button:is(.loading,.added){color:#fff!important;background-color:var(--gc-gruen)!important}
html:root body .gc-pcard-cart.elementor-widget form.cart .button.loading{opacity:.7;pointer-events:none}
html:root body .gc-pcard-cart.elementor-widget form.cart .button.loading::after{content:"";position:static;flex:none;width:14px;height:14px;margin:0;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;font-size:0;animation:gc-spin .7s linear infinite}
html:root body .gc-pcard-cart.elementor-widget form.cart .button.added::after{content:"✓";position:static;display:inline-block;margin:0;font:700 1em/1 var(--gc-sans)}
@keyframes gc-spin{to{transform:rotate(360deg)}}
html:root body .gc-pcard-cart .added_to_cart{display:flex;align-items:center;justify-content:center;min-height:36px;margin:4px 0 -6px;padding:0;background:none;color:var(--gc-gruen);font:700 .8125rem/1.2 var(--gc-sans);text-decoration:underline;text-underline-offset:.18em}

@media (min-width:721px){
	html:root body .gc-pcard{padding:8px 8px 14px}
	html:root body .gc-pcard-body{padding:14px 10px 0;gap:7px}
	html:root body .gc-pcard-title .elementor-heading-title{font-size:1.0625rem}
	html:root body .gc-pcard-price .price{font-size:1.375rem}
	html:root body .gc-pcard-legal :is(p,.wc-gzd-additional-info){font-size:.8125rem}
	html:root body .gc-pcard-cart.elementor-widget form.cart .button{min-height:48px;font-size:.9375rem}
	html:root body .gc-pflags{left:10px;top:10px}
	html:root body .gc-pflag{font-size:1.1875rem}
}
@media (prefers-reduced-motion:reduce){
	html:root body .gc-pcard,html:root body .gc-pcard-cart.elementor-widget form.cart .button{transition:none}
	html:root body .gc-pcard:hover{transform:none}
	html:root body .gc-pcard-cart.elementor-widget form.cart .button.loading::after{animation-duration:2s}
}

/* ---------- Paginierung des Loop Grid ---------- */
html:root body .gc-pgrid .elementor-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:clamp(28px,1.2rem + 2vw,56px);font:700 .9375rem/1 var(--gc-sans)}
html:root body .gc-pgrid .elementor-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:0 12px;border-radius:999px;background:#fff;color:var(--gc-ink);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--gc-line)}
html:root body .gc-pgrid .elementor-pagination a.page-numbers:hover{background:var(--gc-salbei);color:var(--gc-nacht)}
html:root body .gc-pgrid .elementor-pagination .page-numbers.current{background:var(--gc-nacht);color:#fff;box-shadow:none}
html:root body .gc-pgrid .elementor-pagination .page-numbers.dots{min-width:0;padding:0 2px;background:none;box-shadow:none}
/* „Zurück“ auf Seite 1 / „Weiter“ auf der letzten Seite: Elementor gibt ein <span> ohne Link aus */
html:root body .gc-pgrid .elementor-pagination span.page-numbers:is(.prev,.next){opacity:.45}
html:root body .gc-pgrid .elementor-pagination :focus-visible{outline:3px solid var(--gc-nacht);outline-offset:2px}