/**
 * Simple Product Grid – Frontend-Styles.
 *
 * Alle konfigurierbaren Werte kommen als CSS-Custom-Properties aus den
 * Design-Einstellungen (siehe SPG_Design::spec()).
 *
 * Zur Spezifität: Kacheln und Filter sind <button>-Elemente. Viele Themes
 * stylen Buttons global mit ihrer Markenfarbe und eigenen Abständen und
 * würden damit die Design-Einstellungen überschreiben. Deshalb sind die
 * Regeln bewusst als ".spg-wrap button.spg-card" geschrieben und setzen alle
 * Eigenschaften ausdrücklich zurück, die Themes üblicherweise anfassen.
 */

.spg-wrap {
	box-sizing: border-box;
}

.spg-wrap *,
.spg-wrap *::before,
.spg-wrap *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------- Raster */

.spg-wrap .spg-grid {
	display: grid;
	grid-template-columns: repeat(var(--spg-cols-d, 4), minmax(0, 1fr));
	gap: var(--spg-gap, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	.spg-wrap .spg-grid {
		grid-template-columns: repeat(var(--spg-cols-t, 3), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.spg-wrap .spg-grid {
		grid-template-columns: repeat(var(--spg-cols-m, 2), minmax(0, 1fr));
	}
}

/* ------------------------------------------------- Kategorie-Abschnitte */

.spg-wrap .spg-section + .spg-section {
	margin-top: var(--spg-group-spacing, 48px);
}

.spg-wrap .spg-section-title {
	margin: 0 0 20px;
	padding: 0 0 8px;
	color: var(--spg-group-color, #1f2937);
	font-size: var(--spg-group-size, 22px);
	font-weight: var(--spg-group-weight, 700);
	text-transform: var(--spg-group-transform, none);
	line-height: 1.25;
	border-bottom: var(--spg-group-line, 1px) solid var(--spg-card-border, #e2e5ea);
}

.spg-wrap .spg-section.spg-filtered-out {
	display: none;
}

/* ---------------------------------------------------------------- Kachel */

.spg-wrap button.spg-card {
	/* Reset gegen Theme-Button-Styles */
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	min-height: 0;
	min-width: 0;
	max-width: none;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	outline: none;

	/* Eigentliche Darstellung */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	padding: var(--spg-card-padding, 16px);
	background: var(--spg-card-bg, #fff);
	border: var(--spg-card-border-w, 1px) solid var(--spg-card-border, #e2e5ea);
	border-radius: var(--spg-card-radius, 10px);
	box-shadow: var(--spg-card-shadow, none);
	color: var(--spg-title-color, #1f2937);
	text-align: var(--spg-text-align, center);
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

/* Hover, Fokus und aktiver Zustand ausdrücklich setzen, damit Themes hier
   keine eigene Füllfarbe unterschieben können. */
.spg-wrap button.spg-card:hover,
.spg-wrap button.spg-card:focus,
.spg-wrap button.spg-card:focus-visible,
.spg-wrap button.spg-card:active {
	background: var(--spg-card-bg-hover, #fff);
	border-color: var(--spg-card-border-hover, #2563eb);
	color: var(--spg-title-color-hover, #1f2937);
}

.spg-wrap button.spg-card:focus-visible {
	outline: 2px solid var(--spg-card-border-hover, #2563eb);
	outline-offset: 2px;
}

.spg-wrap button.spg-card:hover .spg-card-title,
.spg-wrap button.spg-card:focus .spg-card-title {
	color: var(--spg-title-color-hover, #1f2937);
}

.spg-wrap button.spg-card:hover .spg-card-category,
.spg-wrap button.spg-card:focus .spg-card-category {
	color: var(--spg-cat-color-hover, #6b7280);
}

/* Bildbereich */

.spg-wrap .spg-card-media {
	display: block;
	width: 100%;
	background: var(--spg-image-bg, #fff);
	border-radius: var(--spg-image-radius, 6px);
	padding: var(--spg-image-padding, 0);
	margin-bottom: var(--spg-media-gap, 12px);
	overflow: hidden;
}

.spg-wrap .spg-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	aspect-ratio: var(--spg-image-ratio, 1 / 1);
	object-fit: var(--spg-image-fit, contain);
	border-radius: 0;
	transition: transform 0.25s ease;
}

.spg-wrap .spg-card-noimage {
	display: block;
	width: 100%;
	aspect-ratio: var(--spg-image-ratio, 1 / 1);
	background:
		linear-gradient(135deg, transparent 47%, rgba(0, 0, 0, 0.06) 47%, rgba(0, 0, 0, 0.06) 53%, transparent 53%),
		linear-gradient(45deg, transparent 47%, rgba(0, 0, 0, 0.06) 47%, rgba(0, 0, 0, 0.06) 53%, transparent 53%),
		rgba(0, 0, 0, 0.03);
}

/* Texte auf der Kachel */

.spg-wrap .spg-card-category {
	display: var(--spg-cat-display, block);
	margin: 0 0 2px;
	color: var(--spg-cat-color, #6b7280);
	font-size: var(--spg-cat-size, 13px);
	font-weight: var(--spg-cat-weight, 400);
	text-transform: var(--spg-cat-transform, none);
	line-height: 1.4;
	transition: color 0.18s ease;
}

.spg-wrap .spg-card-title {
	display: block;
	margin: 0;
	color: var(--spg-title-color, #1f2937);
	font-size: var(--spg-title-size, 16px);
	font-weight: var(--spg-title-weight, 600);
	line-height: var(--spg-title-lh, 1.35);
	transition: color 0.18s ease;
}

/* Hover-Varianten */

.spg-wrap.spg-hover-lift button.spg-card:hover,
.spg-wrap.spg-hover-lift button.spg-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--spg-card-shadow-hover, 0 6px 24px rgba(15, 23, 42, 0.18));
}

.spg-wrap.spg-hover-zoom button.spg-card:hover .spg-card-media img,
.spg-wrap.spg-hover-zoom button.spg-card:focus-visible .spg-card-media img {
	transform: scale(1.06);
}

.spg-wrap.spg-hover-shadow button.spg-card:hover,
.spg-wrap.spg-hover-shadow button.spg-card:focus-visible {
	box-shadow: var(--spg-card-shadow-hover, 0 6px 24px rgba(15, 23, 42, 0.18));
}

.spg-wrap.spg-hover-none button.spg-card:hover {
	box-shadow: var(--spg-card-shadow, none);
}

/* spg-hover-border braucht keine Extra-Regel: die Rahmenfarbe wird oben
   ohnehin gesetzt, alle anderen Effekte bleiben aus. */

/* ---------------------------------------------------------------- Filter */

.spg-wrap .spg-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
}

.spg-wrap button.spg-filter-btn {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	min-height: 0;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	font-family: inherit;
	line-height: 1.3;
	outline: none;

	padding: 7px 16px;
	border: 1px solid var(--spg-filter-border, #e2e5ea);
	border-radius: var(--spg-filter-radius, 999px);
	background: var(--spg-filter-bg, #fff);
	color: var(--spg-filter-text, #1f2937);
	font-size: var(--spg-filter-size, 14px);
	font-weight: var(--spg-filter-weight, 400);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.spg-wrap button.spg-filter-btn:hover,
.spg-wrap button.spg-filter-btn:focus {
	background: var(--spg-filter-bg, #fff);
	color: var(--spg-filter-text, #1f2937);
	border-color: var(--spg-filter-active-bg, #2563eb);
}

.spg-wrap button.spg-filter-btn.is-active,
.spg-wrap button.spg-filter-btn.is-active:hover,
.spg-wrap button.spg-filter-btn.is-active:focus {
	background: var(--spg-filter-active-bg, #2563eb);
	border-color: var(--spg-filter-active-bg, #2563eb);
	color: var(--spg-filter-active-text, #fff);
}

.spg-wrap button.spg-filter-btn:focus-visible {
	outline: 2px solid var(--spg-filter-active-bg, #2563eb);
	outline-offset: 2px;
}

.spg-wrap .spg-card.spg-filtered-out {
	display: none;
}

.spg-wrap .spg-empty {
	padding: 24px;
	text-align: center;
	opacity: 0.7;
}

/* ---------------------------------------------------------------- Pop-up */

.spg-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.spg-modal[hidden] {
	display: none;
}

.spg-modal-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	background: rgba(0, 0, 0, var(--spg-overlay-alpha, 0.6));
}

.spg-wrap .spg-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: min(85vh, 720px);
	overflow-y: auto;
	background: var(--spg-popup-bg, #fff);
	color: var(--spg-popup-text, #1f2937);
	border-radius: var(--spg-popup-radius, 14px);
	padding: var(--spg-popup-padding, 28px);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.spg-wrap button.spg-modal-close {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 10px;
	right: 12px;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.spg-wrap button.spg-modal-close:hover,
.spg-wrap button.spg-modal-close:focus {
	background: rgba(0, 0, 0, 0.07);
	color: inherit;
}

.spg-wrap button.spg-modal-close:focus-visible {
	outline: 2px solid var(--spg-btn-bg, #2563eb);
	outline-offset: 2px;
}

.spg-wrap .spg-modal-category {
	margin: 0 0 4px;
	color: var(--spg-cat-color, #6b7280);
	font-size: var(--spg-popup-cat-size, 13px);
	font-weight: var(--spg-popup-cat-weight, 400);
	text-transform: var(--spg-popup-cat-transform, uppercase);
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.spg-wrap .spg-modal-title {
	margin: 0 0 20px;
	padding: 0;
	color: inherit;
	font-size: var(--spg-popup-title-size, 22px);
	font-weight: var(--spg-popup-title-weight, 700);
	line-height: 1.3;
}

.spg-wrap .spg-modal-docs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.spg-wrap .spg-modal-nodocs {
	margin: 0;
	opacity: 0.7;
}

/* Dokument-Buttons */

.spg-wrap a.spg-doc-btn {
	display: block;
	padding: var(--spg-btn-padding, 11px) 16px;
	border-radius: var(--spg-btn-radius, 8px);
	font-family: inherit;
	font-size: var(--spg-btn-size, 15px);
	font-weight: var(--spg-btn-weight, 500);
	line-height: 1.3;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	word-break: break-word;
}

.spg-wrap.spg-btn-solid a.spg-doc-btn {
	background: var(--spg-btn-bg, #2563eb);
	color: var(--spg-btn-text, #fff);
	border: 1px solid var(--spg-btn-bg, #2563eb);
}

.spg-wrap.spg-btn-solid a.spg-doc-btn:hover,
.spg-wrap.spg-btn-solid a.spg-doc-btn:focus {
	background: var(--spg-btn-bg-hover, #1d4ed8);
	border-color: var(--spg-btn-bg-hover, #1d4ed8);
	color: var(--spg-btn-text-hover, #fff);
}

.spg-wrap.spg-btn-outline a.spg-doc-btn {
	background: transparent;
	color: var(--spg-btn-bg, #2563eb);
	border: 1px solid var(--spg-btn-bg, #2563eb);
}

.spg-wrap.spg-btn-outline a.spg-doc-btn:hover,
.spg-wrap.spg-btn-outline a.spg-doc-btn:focus {
	background: var(--spg-btn-bg-hover, #1d4ed8);
	border-color: var(--spg-btn-bg-hover, #1d4ed8);
	color: var(--spg-btn-text-hover, #fff);
}

.spg-wrap a.spg-doc-btn:focus-visible {
	outline: 2px solid var(--spg-btn-bg, #2563eb);
	outline-offset: 2px;
}

.spg-wrap .spg-doc-collection {
	border: 1px solid var(--spg-card-border, #e2e5ea);
	border-radius: var(--spg-btn-radius, 8px);
	padding: 12px;
}

.spg-wrap .spg-doc-collection-title {
	margin: 0 0 10px;
	font-size: var(--spg-coll-size, 15px);
	font-weight: var(--spg-coll-weight, 600);
	line-height: 1.3;
}

.spg-wrap .spg-doc-collection a.spg-doc-btn {
	margin-bottom: 8px;
}

.spg-wrap .spg-doc-collection a.spg-doc-btn:last-child {
	margin-bottom: 0;
}

/* Körper nicht scrollen, solange das Pop-up offen ist */

body.spg-modal-open {
	overflow: hidden;
}

/* Inline-Variante für die Vorschau im Backend */

.spg-modal-inline {
	position: static;
	padding: 0;
	display: block;
}

.spg-modal-inline .spg-modal-dialog {
	max-width: none;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* Reduzierte Bewegung respektieren */

@media (prefers-reduced-motion: reduce) {
	.spg-wrap button.spg-card,
	.spg-wrap .spg-card-media img,
	.spg-wrap button.spg-filter-btn,
	.spg-wrap a.spg-doc-btn,
	.spg-wrap .spg-card-title,
	.spg-wrap .spg-card-category {
		transition: none;
	}
	.spg-wrap.spg-hover-lift button.spg-card:hover,
	.spg-wrap.spg-hover-lift button.spg-card:focus-visible {
		transform: none;
	}
	.spg-wrap.spg-hover-zoom button.spg-card:hover .spg-card-media img,
	.spg-wrap.spg-hover-zoom button.spg-card:focus-visible .spg-card-media img {
		transform: none;
	}
}