/* =========================================================================
   GRAND THEFT PLANET – SHOP (Uebersicht + Produktseite)
   ========================================================================= */

/* =========================================================================
   GRAND THEFT PLANET – SHOP (ZIELAUSWAHL)

   Aufbau:
   1. Seiten-Grundlage + WooCommerce-Resets
   2. HUD-Statusblock
   3. Sortierleiste
   4. Produktkarten (Dossier-Karten mit Ziel-Klammern)
   5. Hinweise, Pagination
   6. Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. SEITEN-GRUNDLAGE + RESETS
   Wichtig: vertikale Abstände hängen an EIGENEN Elementen, nicht an
   geratenen Theme-Wrappern. Wrapper werden nur neutralisiert.
   ---------------------------------------------------------------------- */

body.gtp-shop-page {
	background: var(--gtp-ink, #060606) !important;
	overflow-x: hidden;
}

body.gtp-shop-page #primary,
body.gtp-shop-page #content,
body.gtp-shop-page .content-area,
body.gtp-shop-page .site-main,
body.gtp-shop-page .site-content,
body.gtp-shop-page .woocommerce {
	background: transparent !important;
	max-width: 100% !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	box-sizing: border-box;
}

/* Theme-eigene Titel/Breadcrumbs ausblenden – wir liefern einen eigenen HUD-Block */
body.gtp-shop-page .woocommerce-products-header,
body.gtp-shop-page .page-title,
body.gtp-shop-page .entry-header,
body.gtp-shop-page .woocommerce-breadcrumb,
body.gtp-shop-page .term-description {
	display: none !important;
}



/* -------------------------------------------------------------------------
   2. HUD-STATUSBLOCK
   ---------------------------------------------------------------------- */

























/* -------------------------------------------------------------------------
   3. SORTIERLEISTE
   ---------------------------------------------------------------------- */

body.gtp-shop-page .woocommerce-notices-wrapper,
body.gtp-shop-page .woocommerce-ordering {
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 0 28px;
	box-sizing: border-box;
}

body.gtp-shop-page .woocommerce-ordering {
	padding-top: 30px;
	padding-bottom: 26px;
	display: flex;
	justify-content: flex-end;
	float: none !important;
}

body.gtp-shop-page .woocommerce-ordering select {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 4px;
	padding: 11px 16px;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

body.gtp-shop-page .woocommerce-ordering select:hover,
body.gtp-shop-page .woocommerce-ordering select:focus {
	border-color: var(--gtp-blue, #1684dd) !important;
	outline: none;
}

/* -------------------------------------------------------------------------
   4. PRODUKTKARTEN
   ---------------------------------------------------------------------- */

body.gtp-shop-page ul.products {
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 0 28px 90px !important;
	box-sizing: border-box;
	list-style: none !important;
	/* auto-fit (nicht auto-fill): bei wenigen Produkten bleiben keine
	   unsichtbaren Leerspalten stehen, die Karten schmal quetschen. */
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	counter-reset: gtpcard;
}

body.gtp-shop-page ul.products::before,
body.gtp-shop-page ul.products::after {
	display: none !important;
}

body.gtp-shop-page ul.products li.product {
	position: relative;
	counter-increment: gtpcard;
	/* WooCommerce-Standard (float + prozentuale Breite + margin-right)
	   vollständig zurücksetzen, sonst kollidiert es mit dem Grid. */
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 16px 16px 20px !important;
	display: flex !important;
	flex-direction: column;
	background:
		radial-gradient(120% 90% at 15% 100%, rgba(148, 190, 114, 0.12) 0%, rgba(148, 190, 114, 0) 55%),
		radial-gradient(120% 90% at 100% 0%, rgba(22, 132, 221, 0.16) 0%, rgba(22, 132, 221, 0) 55%),
		#0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

body.gtp-shop-page ul.products li.product:hover {
	transform: translateY(-6px);
	border-color: rgba(22, 132, 221, 0.5);
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5);
}

/* Laufende Nummer – gleiche Sprache wie die Navigation im Header */
body.gtp-shop-page ul.products li.product::before {
	content: counter(gtpcard, decimal-leading-zero);
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	padding: 4px 8px;
	background: rgba(6, 6, 6, 0.75);
	border-radius: 3px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--gtp-blue, #1684dd) !important;
}

/* ---------- Bildbereich + Ziel-Klammern ---------- */

.gtp-card__media {
	position: relative;
	display: block;
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: 3px;
	background: #0d0d0d;
}

body.gtp-shop-page ul.products li.product .gtp-card__media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 !important;
	border-radius: 3px;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

body.gtp-shop-page ul.products li.product:hover .gtp-card__media img {
	transform: scale(1.05);
}

/* Zwei gegenüberliegende Ecken-Klammern, die beim Hover einrasten –
   dieselbe visuelle Idee wie der Klammer-Cursor in der Hauptnavigation. */
.gtp-card__reticle::before,
.gtp-card__reticle::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	border-color: var(--gtp-blue, #1684dd);
	border-style: solid;
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gtp-card__reticle::before {
	top: 10px;
	left: 10px;
	border-width: 2px 0 0 2px;
	transform: translate(-7px, -7px);
}

.gtp-card__reticle::after {
	right: 10px;
	bottom: 10px;
	border-width: 0 2px 2px 0;
	transform: translate(7px, 7px);
}

body.gtp-shop-page ul.products li.product:hover .gtp-card__reticle::before,
body.gtp-shop-page ul.products li.product:hover .gtp-card__reticle::after {
	opacity: 1;
	transform: translate(0, 0);
}

/* ---------- Sale-Badge (oben rechts, damit es die Nummer nicht trifft) ---------- */

body.gtp-shop-page span.onsale {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 3;
	margin: 0 !important;
	padding: 5px 10px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1.4 !important;
	background: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
	border-radius: 3px !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------- Texte in der Karte ---------- */

body.gtp-shop-page ul.products li.product a {
	text-decoration: none !important;
}

body.gtp-shop-page ul.products li.product .woocommerce-loop-product__title {
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: 1.25rem !important;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}

body.gtp-shop-page ul.products li.product .star-rating {
	margin: 0 0 8px !important;
	color: var(--gtp-blue, #1684dd) !important;
	font-size: 0.8rem;
}

body.gtp-shop-page ul.products li.product .price {
	display: block;
	margin: 0 0 auto !important;
	padding-bottom: 16px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: #ffffff !important;
}

body.gtp-shop-page ul.products li.product .price del {
	color: rgba(255, 255, 255, 0.58) !important;
	font-weight: 400;
	opacity: 1;
	margin-right: 6px;
}

body.gtp-shop-page ul.products li.product .price ins {
	color: #ffffff !important;
	text-decoration: none !important;
	font-weight: 600;
}

/* ---------- Button ---------- */

body.gtp-shop-page ul.products li.product a.button,
body.gtp-shop-page ul.products li.product a.add_to_cart_button {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 12px 14px !important;
	box-sizing: border-box;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
	font-weight: 600;
	font-size: 0.72rem;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.gtp-shop-page ul.products li.product a.button:hover,
body.gtp-shop-page ul.products li.product a.button:focus-visible,
body.gtp-shop-page ul.products li.product a.add_to_cart_button:hover,
body.gtp-shop-page ul.products li.product a.add_to_cart_button:focus-visible {
	background: var(--gtp-blue-solid, #1479ca) !important;
	border-color: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
}

body.gtp-shop-page ul.products li.product a.button.loading {
	opacity: 0.6;
}

body.gtp-shop-page ul.products li.product a.added_to_cart {
	display: block;
	margin-top: 9px !important;
	text-align: center;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gtp-green, #94be72) !important;
}

/* -------------------------------------------------------------------------
   5. HINWEISE + PAGINATION
   ---------------------------------------------------------------------- */

body.gtp-shop-page .woocommerce-info,
body.gtp-shop-page .woocommerce-message,
body.gtp-shop-page .woocommerce-error {
	max-width: 1320px;
	margin: 0 auto 24px !important;
	padding: 16px 22px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-top: 2px solid var(--gtp-blue, #1684dd) !important;
	border-radius: 4px;
	color: rgba(255, 255, 255, 0.78) !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.85rem;
	list-style: none;
}

/* Hinweisboxen als Flex-Zeile.
   Vorher war der Punkt ein inline-block-Element im Textfluss - sobald der
   Text umbrach, rutschte er auf eine eigene Zeile ueber den ersten
   Buchstaben ("Have a coupon?"). Mit Flex sitzt er garantiert links
   daneben, unabhaengig von der Textlaenge. */
body.gtp-shop-page .woocommerce-info a,
body.gtp-shop-page .woocommerce-message a {
	color: var(--gtp-blue-light, #d0e6f8) !important;
}

body.gtp-shop-page nav.woocommerce-pagination {
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 0 28px 90px !important;
	box-sizing: border-box;
}

body.gtp-shop-page nav.woocommerce-pagination ul {
	display: flex !important;
	justify-content: center;
	gap: 8px;
	background: transparent !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.gtp-shop-page nav.woocommerce-pagination ul li {
	border: none !important;
	margin: 0 !important;
	overflow: visible !important;
}

body.gtp-shop-page nav.woocommerce-pagination ul li a,
body.gtp-shop-page nav.woocommerce-pagination ul li span {
	display: block;
	min-width: 40px;
	padding: 10px 12px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 4px;
	color: rgba(255, 255, 255, 0.8) !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	text-align: center;
	transition: border-color 0.2s ease, color 0.2s ease;
}

body.gtp-shop-page nav.woocommerce-pagination ul li a:hover {
	border-color: var(--gtp-blue, #1684dd) !important;
	color: #ffffff !important;
}

body.gtp-shop-page nav.woocommerce-pagination ul li span.current {
	background: var(--gtp-blue-solid, #1479ca) !important;
	border-color: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   6. RESPONSIVE
   ---------------------------------------------------------------------- */



@media (max-width: 560px) {
	body.gtp-shop-page ul.products {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 14px;
	}
	body.gtp-shop-page ul.products li.product {
		padding: 12px 12px 16px !important;
	}
	body.gtp-shop-page ul.products li.product .woocommerce-loop-product__title {
		font-size: 1rem !important;
	}
	body.gtp-shop-page ul.products li.product a.button,
	body.gtp-shop-page ul.products li.product a.add_to_cart_button {
		font-size: 0.65rem;
		letter-spacing: 0.08em;
		padding: 11px 8px !important;
	}
	.gtp-card__reticle::before,
	.gtp-card__reticle::after {
		width: 16px;
		height: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.gtp-shop-page ul.products li.product,
	body.gtp-shop-page ul.products li.product .gtp-card__media img,
	.gtp-card__reticle::before,
	.gtp-card__reticle::after {
		transition: none !important;
	}
	body.gtp-shop-page ul.products li.product:hover {
		transform: none;
	}
	body.gtp-shop-page ul.products li.product:hover .gtp-card__media img {
		transform: none;
	}
}


/* =========================================================================
   GRAND THEFT PLANET – PRODUKTSEITE (DOSSIER)

   Aufbau:
   1. Seiten-Grundlage + WooCommerce-Resets
   2. Galerie + Ziel-Klammern
   3. Dossier-Panel (Kopf, Titel, Preis, Specs, Kauf, Signale)
   4. Reiter
   5. Verwandte Produkte
   6. Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. SEITEN-GRUNDLAGE + RESETS
   ---------------------------------------------------------------------- */

body.gtp-product-page {
	background: var(--gtp-ink, #060606) !important;
	overflow-x: hidden;
}

body.gtp-product-page #primary,
body.gtp-product-page #content,
body.gtp-product-page .content-area,
body.gtp-product-page .site-main,
body.gtp-product-page .site-content,
body.gtp-product-page .woocommerce {
	background: transparent !important;
	max-width: 100% !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	box-sizing: border-box;
}

/* Body reserviert den Kopfabstand jetzt sitewide (siehe Header-Plugin) -
   dieser Spacer bleibt im Markup (harmlos), reserviert aber selbst
   keinen zusätzlichen Platz mehr, um doppelten Abstand zu vermeiden. */
.gtp-product-top {
	height: 0;
}

body.gtp-product-page .woocommerce-breadcrumb {
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 0 28px 22px !important;
	box-sizing: border-box;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58) !important;
}

body.gtp-product-page h1:not(.product_title) {
	display: none !important;
}

body.gtp-product-page .woocommerce-breadcrumb a {
	color: rgba(255, 255, 255, 0.72) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

body.gtp-product-page .woocommerce-breadcrumb a:hover {
	color: #ffffff !important;
}

body.gtp-product-page div.product {
	position: relative;
	max-width: 1320px;
	margin: 0 auto !important;
	padding: 0 28px 90px !important;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 60px;
	align-items: start;
	color: rgba(255, 255, 255, 0.85);
}

/* WooCommerce setzt auf Galerie und Zusammenfassung standardmäßig
   float + prozentuale Breite (klassisches Layout ohne Grid). Das muss
   weg, sonst kollidiert es mit dem Grid oben. */
body.gtp-product-page div.product .woocommerce-product-gallery,
body.gtp-product-page div.product .summary,
body.gtp-product-page div.product .entry-summary {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}

body.gtp-product-page div.product::before,
body.gtp-product-page div.product::after {
	display: none !important;
}

/* -------------------------------------------------------------------------
   2. GALERIE + ZIEL-KLAMMERN
   ---------------------------------------------------------------------- */

body.gtp-product-page .woocommerce-product-gallery {
	position: relative;
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	padding: 14px !important;
	box-sizing: border-box;
}

/* Klammern hier permanent sichtbar – das Ziel ist erfasst. */
.gtp-product__reticle {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}

.gtp-product__reticle::before,
.gtp-product__reticle::after {
	content: "";
	position: absolute;
	width: 26px;
	height: 26px;
	border-color: var(--gtp-blue, #1684dd);
	border-style: solid;
}

.gtp-product__reticle::before {
	top: -1px;
	left: -1px;
	border-width: 2px 0 0 2px;
}

.gtp-product__reticle::after {
	right: -1px;
	bottom: -1px;
	border-width: 0 2px 2px 0;
}

body.gtp-product-page .woocommerce-product-gallery__wrapper {
	margin: 0 !important;
	background: transparent !important;
}

body.gtp-product-page .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

/* Zoom-Lupe */
body.gtp-product-page .woocommerce-product-gallery__trigger {
	position: absolute !important;
	top: 26px !important;
	right: 26px !important;
	z-index: 5;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(6, 6, 6, 0.8) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 4px !important;
	color: #ffffff !important;
	text-indent: 0 !important;
	font-size: 0.9rem;
	box-shadow: none !important;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

body.gtp-product-page .woocommerce-product-gallery__trigger:hover {
	border-color: var(--gtp-blue, #1684dd) !important;
	background: rgba(22, 132, 221, 0.25) !important;
}

/* WooCommerce liefert selbst kein Icon-Markup, sondern setzt sein
   Lupen-Symbol per CSS über ::before (Dashicon-Schriftart). Die wird auf
   vielen Themes im Frontend nicht geladen -> leere Box. Eigenes,
   garantiert sichtbares SVG-Icon statt Font-Abhängigkeit. */
body.gtp-product-page .woocommerce-product-gallery__trigger::after {
	display: none !important;
}

body.gtp-product-page .woocommerce-product-gallery__trigger::before {
	content: "" !important;
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='white' stroke-width='2'/%3E%3Cpath d='m21 21-4.3-4.3' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	font-size: 0 !important;
}

/* Thumbnails */
body.gtp-product-page .flex-control-thumbs,
body.gtp-product-page ol.flex-control-thumbs {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.gtp-product-page .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.gtp-product-page .flex-control-thumbs li img {
	width: 66px;
	height: 66px;
	object-fit: cover;
	border-radius: 3px;
	opacity: 0.5;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

body.gtp-product-page .flex-control-thumbs li img.flex-active,
body.gtp-product-page .flex-control-thumbs li img:hover {
	opacity: 1;
	border-color: var(--gtp-blue, #1684dd) !important;
}

/* Sale-Badge an der Galerie */
body.gtp-product-page div.product span.onsale {
	position: absolute !important;
	top: 26px !important;
	left: 26px !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 5;
	margin: 0 !important;
	padding: 6px 12px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1.4 !important;
	background: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
	border-radius: 3px !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   3. DOSSIER-PANEL
   ---------------------------------------------------------------------- */

.gtp-product__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
}

.gtp-product__ref {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.gtp-product__ref-label {
	color: rgba(255, 255, 255, 0.58) !important;
}

.gtp-product__ref-value {
	color: rgba(255, 255, 255, 0.72) !important;
	font-variant-numeric: tabular-nums;
}

.gtp-product__collection {
	display: inline-block;
	max-width: 100%;
	padding: 6px 16px;
	background: rgba(22, 132, 221, 0.14) !important;
	border: 1px solid rgba(22, 132, 221, 0.55) !important;
	border-radius: 999px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--gtp-blue-light, #d0e6f8) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.gtp-product__collection:hover {
	background: rgba(22, 132, 221, 0.26) !important;
	border-color: var(--gtp-blue, #1684dd) !important;
}

body.gtp-product-page .product_title {
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: clamp(2rem, 3.8vw, 3.2rem);
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	word-break: break-word;
}

body.gtp-product-page div.product p.price,
body.gtp-product-page div.product .woocommerce-variation-price .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 20px !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 1.45rem !important;
	font-weight: 600;
	color: #ffffff !important;
}

body.gtp-product-page div.product p.price del {
	font-size: 1rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.58) !important;
	opacity: 1;
}

body.gtp-product-page div.product p.price ins {
	text-decoration: none !important;
	color: #ffffff !important;
	font-weight: 600;
}

body.gtp-product-page .woocommerce-product-details__short-description {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.92rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.72) !important;
	margin: 0 0 26px !important;
	padding-bottom: 26px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.gtp-product-page .woocommerce-product-details__short-description p {
	margin: 0 0 10px;
}

/* ---------- Spec-Readout ---------- */

.gtp-product__specs {
	margin: 0 0 26px;
}

.gtp-product__specs-title {
	display: block;
	margin-bottom: 14px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58) !important;
}

.gtp-product__specs-list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	overflow: hidden;
}

.gtp-product__spec {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 12px 16px;
	background: #0d0d0d;
}

.gtp-product__spec dt {
	margin: 0;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58) !important;
	flex-shrink: 0;
}

.gtp-product__spec dd {
	margin: 0;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.85rem;
	color: #ffffff !important;
	text-align: right;
}

/* ---------- Varianten ---------- */

body.gtp-product-page table.variations {
	width: 100%;
	margin: 0 0 22px !important;
	border: none !important;
	background: transparent !important;
}

body.gtp-product-page table.variations tbody,
body.gtp-product-page table.variations tr,
body.gtp-product-page table.variations td,
body.gtp-product-page table.variations th {
	display: block;
	width: auto !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

body.gtp-product-page table.variations tr {
	margin-bottom: 16px;
}

body.gtp-product-page table.variations label {
	display: block;
	margin-bottom: 9px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65) !important;
}

body.gtp-product-page table.variations select {
	width: 100%;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 4px;
	padding: 13px 15px;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

body.gtp-product-page table.variations select:hover,
body.gtp-product-page table.variations select:focus {
	border-color: var(--gtp-blue, #1684dd) !important;
	outline: none;
}

body.gtp-product-page a.reset_variations {
	display: inline-block;
	margin-top: 10px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.65) !important;
}

body.gtp-product-page .woocommerce-variation-availability p {
	margin: 0;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.8rem;
	color: var(--gtp-green, #94be72) !important;
}

/* ---------- Menge + Kauf-Button ---------- */

body.gtp-product-page form.cart {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 0 0 8px !important;
}

body.gtp-product-page form.cart::before,
body.gtp-product-page form.cart::after {
	display: none !important;
}

body.gtp-product-page .quantity {
	display: flex;
	margin: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 4px;
	overflow: hidden;
}

body.gtp-product-page .quantity .qty {
	width: 62px;
	height: 54px;
	background: rgba(255, 255, 255, 0.04) !important;
	border: none !important;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
}

body.gtp-product-page .quantity .qty::-webkit-inner-spin-button,
body.gtp-product-page .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.gtp-product-page button.single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
	height: 54px;
	margin: 0 !important;
	padding: 0 28px !important;
	background: transparent !important;
	border: 2px solid #ffffff !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.gtp-product-page button.single_add_to_cart_button:hover,
body.gtp-product-page button.single_add_to_cart_button:focus {
	background: var(--gtp-blue-solid, #1479ca) !important;
	border-color: var(--gtp-blue-solid, #1479ca) !important;
	color: #ffffff !important;
}

body.gtp-product-page button.single_add_to_cart_button.disabled,
body.gtp-product-page button.single_add_to_cart_button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

body.gtp-product-page button.single_add_to_cart_button.loading {
	opacity: 0.6;
	cursor: wait;
}

body.gtp-product-page div.product .stock {
	width: 100%;
	margin: 6px 0 0 !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.65) !important;
}

body.gtp-product-page div.product .stock.in-stock {
	color: var(--gtp-green, #94be72) !important;
}

/* ---------- Signal-Zeilen ---------- */

.gtp-product__signals {
	list-style: none !important;
	margin: 26px 0 0 !important;
	padding: 22px 0 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.gtp-product__signals li {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.72) !important;
}

.gtp-product__signal-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gtp-green, #94be72) !important;
	box-shadow: 0 0 6px rgba(148, 190, 114, 0.8);
	flex-shrink: 0;
}

/* ---------- Meta ---------- */

body.gtp-product-page .product_meta {
	margin-top: 24px !important;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.58) !important;
}

body.gtp-product-page .product_meta > span {
	display: block;
	margin-bottom: 6px;
}

body.gtp-product-page .product_meta a {
	color: rgba(255, 255, 255, 0.72) !important;
	text-decoration: none !important;
}

body.gtp-product-page .product_meta a:hover {
	color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   4. REITER
   WICHTIG: WooCommerce gibt dem aktiven Reiter standardmäßig einen weißen
   Hintergrund. Zusammen mit weißer Schrift war der Text unsichtbar –
   deshalb hier alle Hintergründe, Rahmen und Pseudo-Elemente neutralisiert.
   ---------------------------------------------------------------------- */

body.gtp-product-page .woocommerce-tabs {
	grid-column: 1 / -1;
	margin: 20px 0 0 !important;
	padding: 34px 0 0 !important;
	background: transparent !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.gtp-product-page .woocommerce-tabs ul.tabs {
	display: flex !important;
	flex-wrap: wrap;
	gap: 28px;
	margin: 0 0 28px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	list-style: none !important;
}

body.gtp-product-page .woocommerce-tabs ul.tabs::before,
body.gtp-product-page .woocommerce-tabs ul.tabs::after,
body.gtp-product-page .woocommerce-tabs ul.tabs li::before,
body.gtp-product-page .woocommerce-tabs ul.tabs li::after {
	/* WooCommerce setzt auf dieses Pseudo-Element ein position:absolute
	   mit top/left. Ohne die naechsten drei Zeilen bleibt der Punkt absolut
	   positioniert und liegt mitten im Text statt daneben. */
	position: static !important;
	top: auto !important;
	left: auto !important;
	display: none !important;
	content: none !important;
}

body.gtp-product-page .woocommerce-tabs ul.tabs li,
body.gtp-product-page .woocommerce-tabs ul.tabs li.active {
	margin: 0 !important;
	padding: 0 0 13px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body.gtp-product-page .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--gtp-blue, #1684dd) !important;
}

body.gtp-product-page .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0 !important;
	background: transparent !important;
	color: rgba(255, 255, 255, 0.65) !important;
	text-decoration: none !important;
	text-shadow: none !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

body.gtp-product-page .woocommerce-tabs ul.tabs li a:hover {
	color: rgba(255, 255, 255, 0.75) !important;
}

body.gtp-product-page .woocommerce-tabs ul.tabs li.active a {
	color: #ffffff !important;
}

body.gtp-product-page .woocommerce-tabs .panel,
body.gtp-product-page .woocommerce-Tabs-panel {
	max-width: 760px;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.92rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.72) !important;
}

body.gtp-product-page .woocommerce-Tabs-panel h2 {
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #ffffff !important;
	margin: 0 0 16px !important;
}

body.gtp-product-page .woocommerce-Tabs-panel p {
	color: rgba(255, 255, 255, 0.72) !important;
}

/* Bewertungen */
body.gtp-product-page #reviews .commentlist {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.gtp-product-page #reviews .comment_container {
	background: #0d0d0d !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 4px;
	padding: 18px !important;
}

body.gtp-product-page #reviews .woocommerce-review__author {
	color: #ffffff !important;
}

body.gtp-product-page #reviews .star-rating,
body.gtp-product-page .woocommerce-product-rating .star-rating {
	color: var(--gtp-blue, #1684dd) !important;
}

body.gtp-product-page #review_form input[type="text"],
body.gtp-product-page #review_form input[type="email"],
body.gtp-product-page #review_form textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 4px;
	padding: 12px 14px;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
}

body.gtp-product-page #review_form .comment-form label,
body.gtp-product-page #review_form .comment-notes {
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.72) !important;
}

body.gtp-product-page #review_form input[type="submit"] {
	padding: 13px 30px !important;
	background: transparent !important;
	border: 2px solid #ffffff !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.gtp-product-page #review_form input[type="submit"]:hover {
	background: var(--gtp-blue-solid, #1479ca) !important;
	border-color: var(--gtp-blue-solid, #1479ca) !important;
}

/* -------------------------------------------------------------------------
   5. VERWANDTE PRODUKTE / UPSELLS
   (eigene Kopie der Kartenoptik, damit dieses Plugin unabhängig vom
   Shop-Plugin funktioniert)
   ---------------------------------------------------------------------- */

body.gtp-product-page .related.products,
body.gtp-product-page .upsells.products {
	grid-column: 1 / -1;
	margin: 50px 0 0 !important;
	padding: 40px 0 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.gtp-product-page .related.products > h2,
body.gtp-product-page .upsells.products > h2 {
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #ffffff !important;
	margin: 0 0 28px !important;
}

body.gtp-product-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.gtp-product-page ul.products::before,
body.gtp-product-page ul.products::after {
	display: none !important;
}

body.gtp-product-page ul.products li.product {
	position: relative;
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 14px 14px 18px !important;
	display: flex !important;
	flex-direction: column;
	background:
		radial-gradient(120% 90% at 15% 100%, rgba(148, 190, 114, 0.12) 0%, rgba(148, 190, 114, 0) 55%),
		radial-gradient(120% 90% at 100% 0%, rgba(22, 132, 221, 0.16) 0%, rgba(22, 132, 221, 0) 55%),
		#0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

body.gtp-product-page ul.products li.product:hover {
	transform: translateY(-5px);
	border-color: rgba(22, 132, 221, 0.5);
}

body.gtp-product-page ul.products li.product a {
	text-decoration: none !important;
}

body.gtp-product-page ul.products li.product img {
	width: 100%;
	height: auto;
	margin: 0 0 14px !important;
	border-radius: 3px;
}

body.gtp-product-page ul.products li.product .woocommerce-loop-product__title {
	font-family: "Pricedown", "Anton", sans-serif;
	font-size: 1.15rem !important;
	line-height: 1.15;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}

body.gtp-product-page ul.products li.product .price {
	display: block;
	margin: 0 0 auto !important;
	padding-bottom: 14px;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.86rem;
	font-weight: 600;
	color: #ffffff !important;
}

body.gtp-product-page ul.products li.product .price del {
	color: rgba(255, 255, 255, 0.58) !important;
	font-weight: 400;
	opacity: 1;
	margin-right: 6px;
}

body.gtp-product-page ul.products li.product .price ins {
	text-decoration: none !important;
	color: #ffffff !important;
}

body.gtp-product-page ul.products li.product a.button,
body.gtp-product-page ul.products li.product a.add_to_cart_button {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 11px 12px !important;
	box-sizing: border-box;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font-family: "Archivo", Arial, sans-serif;
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.gtp-product-page ul.products li.product a.button:hover,
body.gtp-product-page ul.products li.product a.button:focus-visible,
body.gtp-product-page ul.products li.product a.add_to_cart_button:hover,
body.gtp-product-page ul.products li.product a.add_to_cart_button:focus-visible {
	background: var(--gtp-blue-solid, #1479ca) !important;
	border-color: var(--gtp-blue-solid, #1479ca) !important;
}

body.gtp-product-page ul.products li.product a.added_to_cart {
	display: block;
	margin-top: 8px !important;
	text-align: center;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gtp-green, #94be72) !important;
}

body.gtp-product-page ul.products li.product span.onsale {
	top: 10px !important;
	left: auto !important;
	right: 10px !important;
	font-size: 0.58rem;
	padding: 4px 9px !important;
}

/* ---------- Hinweisboxen ---------- */

body.gtp-product-page .woocommerce-info,
body.gtp-product-page .woocommerce-message,
body.gtp-product-page .woocommerce-error {
	max-width: 1320px;
	margin: 0 auto 24px !important;
	padding: 16px 22px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-top: 2px solid var(--gtp-blue, #1684dd) !important;
	border-radius: 4px;
	color: rgba(255, 255, 255, 0.78) !important;
	font-family: "Archivo", Arial, sans-serif;
	font-size: 0.85rem;
	list-style: none;
}

/* Hinweisboxen als Flex-Zeile.
   Vorher war der Punkt ein inline-block-Element im Textfluss - sobald der
   Text umbrach, rutschte er auf eine eigene Zeile ueber den ersten
   Buchstaben ("Have a coupon?"). Mit Flex sitzt er garantiert links
   daneben, unabhaengig von der Textlaenge. */
/* -------------------------------------------------------------------------
   6. RESPONSIVE
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	body.gtp-product-page .woocommerce-breadcrumb {
		padding: 0 18px 18px !important;
	}
	body.gtp-product-page div.product {
		grid-template-columns: 1fr;
		gap: 34px;
		padding: 0 18px 70px !important;
	}
}

@media (max-width: 480px) {
	body.gtp-product-page form.cart {
		flex-direction: column;
	}
	body.gtp-product-page .quantity {
		align-self: flex-start;
	}
	body.gtp-product-page button.single_add_to_cart_button {
		width: 100%;
		min-width: 0;
	}
	.gtp-product__spec {
		flex-direction: column;
		gap: 5px;
	}
	.gtp-product__spec dd {
		text-align: left;
	}
	body.gtp-product-page ul.products {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.gtp-product-page ul.products li.product {
		transition: none !important;
	}
	body.gtp-product-page ul.products li.product:hover {
		transform: none;
	}
}


/* =========================================================================
   MOBILE KORREKTUREN – PRODUKTSEITE
   ========================================================================= */

@media (max-width: 640px) {
	/* Der Kaufbutton war auf dem Handy zu flach. Apple und Google
	   empfehlen mindestens 44px Hoehe fuer Tippziele; der wichtigste
	   Button im ganzen Shop sollte deutlich darueber liegen. */
	body.gtp-product-page button.single_add_to_cart_button {
		min-height: 58px !important;
		height: auto !important;
		padding: 18px 24px !important;
		font-size: 0.86rem !important;
		letter-spacing: 0.14em !important;
		line-height: 1.3 !important;
	}

	/* Mengenfeld auf gleiche Hoehe, damit die Zeile ruhig wirkt */
	body.gtp-product-page .quantity .qty {
		height: 58px !important;
		width: 72px !important;
		font-size: 1.05rem !important;
	}

	body.gtp-product-page form.cart {
		gap: 10px;
	}

	/* Auch die Buttons im Produktraster grosszuegiger */
	body.gtp-shop-page ul.products li.product a.button,
	body.gtp-shop-page ul.products li.product a.add_to_cart_button {
		min-height: 48px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
}


/* =========================================================================
   PRODUKTSEITE – FESTE RASTERPLATZIERUNG

   Derselbe Fehler wie an der Kasse: div.product ist ein zweispaltiges
   Raster, aber die Zahl seiner Kinder ist nicht fest. WooCommerce legt
   dort je nach Lage zusaetzliche Elemente ab (Meldungen nach dem
   Hinzufuegen zum Warenkorb, Hinweise bei nicht vorraetigen Varianten),
   und wir selbst fuegen die Ziel-Klammern ein.

   Ohne feste Zuweisung verschiebt jedes zusaetzliche Kind das ganze
   Layout - genau das passierte an der Kasse beim Klick auf "Complete
   order". Hier wird es vorbeugend ausgeschlossen.
   ========================================================================= */

body.gtp-product-page div.product {
	grid-template-rows: auto auto;
}

/* Meldungen ueber die volle Breite, ganz oben */
body.gtp-product-page div.product > .woocommerce-notices-wrapper,
body.gtp-product-page div.product > .woocommerce-message,
body.gtp-product-page div.product > .woocommerce-info,
body.gtp-product-page div.product > .woocommerce-error {
	grid-column: 1 / -1 !important;
	grid-row: 1 !important;
	margin-bottom: 24px !important;
}

/* Galerie links, Zusammenfassung rechts – beide in Zeile 2 */
body.gtp-product-page div.product > .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 2;
}

body.gtp-product-page div.product > .summary,
body.gtp-product-page div.product > .entry-summary {
	grid-column: 2;
	grid-row: 2;
}

/* Reiter und verwandte Produkte ueber die volle Breite darunter */
body.gtp-product-page div.product > .woocommerce-tabs,
body.gtp-product-page div.product > .related,
body.gtp-product-page div.product > .upsells {
	grid-column: 1 / -1;
	grid-row: auto;
}

/* Die Ziel-Klammern sind reine Dekoration und duerfen keinen Rasterplatz
   belegen - sonst reissen sie eine leere Zelle auf. */
body.gtp-product-page div.product > .gtp-product__reticle {
	position: absolute;
	grid-column: 1;
	grid-row: 2;
	pointer-events: none;
}

@media (max-width: 900px) {
	/* Einspaltig: Platzierung aufheben, sonst bleiben Luecken */
	body.gtp-product-page div.product > .woocommerce-product-gallery,
	body.gtp-product-page div.product > .summary,
	body.gtp-product-page div.product > .entry-summary,
	body.gtp-product-page div.product > .woocommerce-tabs,
	body.gtp-product-page div.product > .related,
	body.gtp-product-page div.product > .upsells,
	body.gtp-product-page div.product > .woocommerce-notices-wrapper,
	body.gtp-product-page div.product > .woocommerce-message,
	body.gtp-product-page div.product > .woocommerce-info,
	body.gtp-product-page div.product > .woocommerce-error {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
}



/* =========================================================================
   WOOCOMMERCE-HINWEISBOXEN – POSITIONIERUNG ZURUECKSETZEN

   WooCommerce setzt auf .woocommerce-info::before / -message / -error sein
   eigenes Icon MIT position:absolute (top:1em, left:1.5em). Wir ersetzen
   nur den Inhalt durch unseren Signal-Punkt - die absolute Positionierung
   blieb aber bestehen, weshalb der Punkt mitten im ersten Buchstaben lag
   ("Have a coupon?", "Sorry, it seems...").

   Diese Regeln stehen bewusst am Dateiende und ohne body-Praefix, damit
   sie in jedem Kontext greifen und zuletzt gewinnen.
   ========================================================================= */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	position: relative;
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	padding-left: 22px !important;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	content: '' !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	display: block !important;
	flex-shrink: 0;
	width: 6px !important;
	height: 6px !important;
	min-width: 6px;
	margin: 0.55em 0 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 0 !important;
	line-height: 0 !important;
	background: var(--gtp-blue, #1684dd) !important;
	color: transparent !important;
}

/* Auf der Bestellbestaetigung ist Gruen die Leitfarbe */
body.gtp-order-page .woocommerce-info::before,
body.gtp-order-page .woocommerce-message::before,
body.gtp-order-page .woocommerce-error::before {
	/* WooCommerce setzt auf dieses Pseudo-Element ein position:absolute
	   mit top/left. Ohne die naechsten drei Zeilen bleibt der Punkt absolut
	   positioniert und liegt mitten im Text statt daneben. */
	position: static !important;
	top: auto !important;
	left: auto !important;
	background: var(--gtp-green, #94be72) !important;
}


/* =========================================================================
   GALERIE-LIGHTBOX (PhotoSwipe)

   WooCommerce haengt die Lightbox ans Ende des <body>, ausserhalb unserer
   Container - Regeln mit body.gtp-Praefix greifen dort nicht. Sie war
   deshalb komplett ungestylt und waere beim Klick auf die Lupe in
   WooCommerce-Standardoptik aufgegangen. Bewusst globale Regeln.
   ========================================================================= */

.pswp {
	z-index: 500 !important;
}

.pswp__bg {
	background: rgba(6, 6, 6, 0.96) !important;
}

.pswp__caption,
.pswp__top-bar {
	background: transparent !important;
}

.pswp__caption__center {
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.85rem !important;
	color: rgba(255, 255, 255, 0.72) !important;
	text-align: center !important;
}

.pswp__counter {
	font-family: 'Archivo', Arial, sans-serif !important;
	font-size: 0.7rem !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.65) !important;
	opacity: 1 !important;
}

.pswp__button {
	opacity: 0.8 !important;
	transition: opacity 0.2s ease;
}

.pswp__button:hover,
.pswp__button:focus-visible {
	opacity: 1 !important;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	background-color: rgba(6, 6, 6, 0.7) !important;
	border-radius: 4px;
}

.pswp__preloader__donut {
	border-color: var(--gtp-blue, #1684dd) !important;
	border-bottom-color: transparent !important;
	border-right-color: transparent !important;
}

/* =========================================================================
   LADE-OVERLAY (blockUI)

   WooCommerce blendet beim Neuberechnen ein halbtransparent-weisses
   Overlay ein. Auf dunklem Grund wirkte das wie ausgegrauter, kaum
   lesbarer Inhalt. Bewusst global, weil das Overlay je nach Aktion an
   unterschiedliche Elemente gehaengt wird.
   ========================================================================= */

.blockUI.blockOverlay {
	background: rgba(6, 6, 6, 0.75) !important;
	opacity: 1 !important;
}

.blockUI.blockOverlay::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-top-color: var(--gtp-blue, #1684dd);
	border-radius: 50%;
	animation: gtpBlockSpin 0.8s linear infinite;
	background: none;
}

@keyframes gtpBlockSpin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.blockUI.blockOverlay::before {
		animation: none;
	}
}