/* ===== WooCommerce — Marien-Branding ===== */

.woocommerce-breadcrumb {
	display: none;
}

/* ----- Produktseite ----- */

.woocommerce div.product {
	max-width: 1440px;
	margin: 32px auto 0;
	padding: 0 24px;
	display: grid !important;
	grid-template-columns: 1.15fr 0.85fr !important;
	gap: 48px;
	align-items: start;
}

.woocommerce div.product div.images {
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
	cursor: default;
}

.woocommerce div.product div.images img {
	width: 100% !important;
	height: auto;
	display: block;
	border-radius: 10px;
	border: 1px solid #ececec;
}

/* Statisches Bild ohne Zoom/Lightbox — Lupen-Icon & Zoom-Cursor ausblenden */
.woocommerce div.product div.images a {
	cursor: default;
	pointer-events: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* Lange Produktbeschreibung unten auf der Seite (statt Tab), volle Breite.
   grid-column nötig, weil das Element selbst ein Kind des Produkt-Grids ist
   (woocommerce_after_single_product_summary feuert INNERHALB von div.product). */
.gm-product-description {
	grid-column: 1 / -1;
	width: 100%;
	max-width: none;
	margin: 48px 0 0;
	padding: 32px 24px;
	border-top: 1px solid #ececec;
	color: #4a4a4a;
	font-size: 16px;
	line-height: 1.8;
	clear: both;
}

.woocommerce div.product .summary {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.woocommerce div.product .product_title {
	font-size: 32px;
	font-weight: 700;
	color: #141414;
	margin: 0 0 16px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--gm-primary);
	font-size: 26px;
	font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	width: 100%;
	max-width: none;
	color: #4a4a4a;
	font-size: 17px;
	line-height: 1.75;
	margin: 18px 0;
}

/* Betrag-/Empfänger-Felder: Preis (.open_preis, eigenes div) und Empfänger-
   Name/-Email (.woo-vou-recipient-fields, eine Tabelle) kommen aus zwei
   verschiedenen Plugins mit unterschiedlichem Markup — hier auf identisches
   Aussehen gebracht: Label fett oben, Eingabefeld darunter, gleiche Breite,
   gleiche hellgraue Umrandung. */
.woocommerce div.product form.cart {
	margin-top: 22px;
}

.woocommerce div.product .open_preis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.woocommerce div.product .open_preis label.name_your_price {
	width: 100%;
}

.woocommerce div.product .open_preis .alg_open_price {
	flex: 1;
}

.woocommerce div.product .open_preis .popfwc-currency-symbol {
	flex-shrink: 0;
}

.woocommerce div.product .open_preis label.name_your_price {
	display: block;
	font-weight: 600;
	color: #141414;
	margin-bottom: 6px;
}

/* Empfänger-Tabelle in gestapelte Blöcke auflösen (statt Tabellenzeilen nebeneinander) */
.woocommerce div.product .woo-vou-recipient-fields,
.woocommerce div.product .woo-vou-recipient-fields tbody,
.woocommerce div.product .woo-vou-recipient-fields tr,
.woocommerce div.product .woo-vou-recipient-fields td {
	display: block;
	width: 100%;
}

.woocommerce div.product .woo-vou-recipient-fields tr {
	margin-bottom: 18px;
}

.woocommerce div.product .woo-vou-recipient-fields td.label label {
	display: block;
	font-weight: 600;
	color: #141414;
	margin-bottom: 6px;
}

.woocommerce div.product .woo-vou-recipient-fields td.value {
	padding: 0;
}

/* Gleiche Breite/Umrandung für alle drei Felder — volle Blockbreite statt
   fester px-Breite. !important nötig, weil das Preisfeld ein Inline-
   style="width:75px" vom Plugin mitbringt. */
.woocommerce div.product .alg_open_price,
.woocommerce div.product .woo-vou-recipient-details {
	width: 100% !important;
	max-width: 100%;
	text-align: left !important;
	border: 1px solid #d6d6d6 !important;
	border-radius: 6px;
	padding: 11px 14px !important;
	font-size: 15px;
}

/* Menge nicht veränderbar — immer genau 1 Gutschein pro Zeile */
.woocommerce div.product .quantity {
	display: none;
}

.woocommerce div.product .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--gm-primary);
	border: none;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 14px;
	padding: 14px 28px;
	border-radius: 4px;
	cursor: pointer;
}

.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--gm-primary-dark);
	color: #fff;
}

/* Buttons innerhalb von Meldungen (z. B. "Warenkorb anzeigen" bei "Produkt
   schon im Warenkorb") sollen klein/dezent bleiben, nicht die große
   Standard-Button-Größe übernehmen. */
.woocommerce-error a.button,
.woocommerce-message a.button,
.woocommerce-info a.button {
	flex-shrink: 0;
	padding: 8px 16px !important;
	font-size: 12px !important;
	white-space: nowrap;
}

/* ----- Warenkorb ----- */

/* Seitentitel "Warenkorb"/"Kasse" (kommen aus index.php) zentrieren */
body.woocommerce-cart main h1,
body.woocommerce-checkout main h1 {
	text-align: center;
}

.woocommerce-cart .woocommerce {
	max-width: 1440px;
	margin: 32px auto 64px;
	padding: 0 24px;
}

.woocommerce-checkout .woocommerce {
	max-width: 1100px;
	margin: 32px auto 64px;
	padding: 0 24px;
}

/* Anzahl-Spalte raus — Menge ist sowieso fest auf 1 */
.woocommerce-cart table.shop_table th.product-quantity,
.woocommerce-cart table.shop_table td.product-quantity {
	display: none !important;
}

/* Ohne Mengenänderung gibt es nichts zu aktualisieren. !important, weil
   woocommerce-smallscreen.css (lädt nach unserem Stylesheet) den Button in
   seinen eigenen Breakpoints sonst wieder sichtbar macht. */
.woocommerce-cart button[name="update_cart"] {
	display: none !important;
}

/* Gutschein-Eingabe und Button exakt gleich breit, untereinander */
.woocommerce-cart .coupon {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 300px;
	max-width: 100%;
}

.woocommerce-cart .coupon #coupon_code,
.woocommerce-cart .coupon button[name="apply_coupon"] {
	width: 100%;
	margin: 0;
}

/* Warenkorb-Summe über die volle Breite, wie die Tabelle darüber */
.cart-collaterals,
.cart-collaterals .cart_totals {
	width: 100% !important;
	float: none !important;
}

.woocommerce table.shop_table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #ececec;
	border-radius: 8px;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--gm-black);
	color: #fff;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 14px;
	text-align: left;
}

.woocommerce table.shop_table td {
	padding: 16px 14px;
	border-bottom: 1px solid #f0f0f0;
}

.woocommerce td.product-name a {
	color: #141414;
	font-weight: 600;
}

/* Recipient Name/Email in Warenkorb & Kasse: <dd> und das darin verschachtelte
   <p> bringen Standard-Browserabstände mit (dd-Einzug + p-Absatzabstand), das
   zieht den Wert sichtbar nach unten/rechts statt sauber neben das Label.
   Label (dt) + Wert (dd) auf eine Zeile, nächstes Paar auf eine neue Zeile. */
dl.variation dt,
dl.variation dd {
	display: inline;
	margin: 0;
	padding: 0;
}

dl.variation dt {
	font-weight: 600;
}

dl.variation dd p {
	display: inline;
	margin: 0;
}

dl.variation dd::after {
	content: "";
	display: block;
	margin-bottom: 6px;
}

/* Größeres Produktbild, mehr Platz für Name/Empfänger-Angaben, dafür
   Preis-/Summe-Spalten schmaler (sie brauchen nur kurze Zahlen).
   WICHTIG: table-layout:fixed + eine width:auto-Spalte hat die Tabelle auf
   die Summe der festen Spalten zusammenschrumpfen lassen (Rest blieb leer,
   die Tabelle sah "abgeschnitten" aus) — Prozentbreiten im normalen
   (auto) Table-Layout funktionieren zuverlässig und füllen die volle Breite. */
.woocommerce-cart table.shop_table .product-thumbnail {
	width: 110px;
}

.woocommerce-cart table.shop_table .product-thumbnail img {
	width: 90px !important;
	height: auto;
	border-radius: 6px;
}

.woocommerce-cart table.shop_table .product-price,
.woocommerce-cart table.shop_table .product-subtotal {
	width: 14%;
	white-space: nowrap;
}

.woocommerce-cart table.shop_table .product-remove {
	width: 40px;
}

.woocommerce .cart-subtotal .amount,
.woocommerce .order-total .amount {
	color: var(--gm-primary);
	font-weight: 700;
}

.woocommerce-cart-form .coupon .input-text {
	padding: 11px 12px;
	border: 1px solid #d6d6d6;
	border-radius: 6px;
}

.cart_totals h2 {
	font-size: 20px;
	border-bottom: 2px solid var(--gm-primary);
	padding-bottom: 10px;
}

.wc-proceed-to-checkout .checkout-button,
a.checkout-button {
	background: var(--gm-primary) !important;
	color: #fff !important;
}

.wc-proceed-to-checkout .checkout-button:hover,
a.checkout-button:hover {
	background: var(--gm-primary-dark) !important;
}

/* ----- Kasse -----
   Achtung: .woocommerce-checkout ist eine BODY-Klasse, kein Form-Wrapper —
   ".woocommerce-checkout h3" allein hätte auch die Footer-Überschriften
   erwischt (sind weiß, wurden dadurch grau). Immer zusätzlich auf .woocommerce
   scopen, das sitzt nur um das Checkout-Formular, nicht um den Footer. */

.woocommerce-checkout .woocommerce h3 {
	font-size: 19px;
	color: #141414;
	margin-top: 28px;
}

.woocommerce-checkout .woocommerce .form-row label {
	font-weight: 600;
	color: #2a2a2a;
	font-size: 14px;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	border: 1px solid #d6d6d6;
	border-radius: 6px;
	padding: 11px 12px;
	width: 100%;
}

#order_review,
.woocommerce-checkout-review-order {
	background: #fafafa;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 24px;
}

/* Tabelle darf nicht breiter werden als ihr Container — ohne table-layout:fixed
   zwingt lange Recipient-Name/-Email-Angaben die Tabelle (und damit die ganze
   Kasse) über den Viewport hinaus (auf Mobil gesehen: 25px Overflow). */
.woocommerce-checkout-review-order-table {
	table-layout: fixed;
	width: 100%;
}

.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
	overflow-wrap: break-word;
	word-break: break-word;
}

#order_review table.shop_table th,
.woocommerce-checkout-review-order-table th {
	background: transparent;
	color: #141414;
	border-bottom: 2px solid var(--gm-primary);
}

.woocommerce-checkout #payment {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
}

.woocommerce-checkout #payment div.payment_box {
	background: #f6f6f6;
}

#place_order,
.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order {
	width: 100%;
	padding: 16px;
	font-size: 15px;
	background: var(--gm-primary) !important;
	border-color: var(--gm-primary) !important;
	color: #fff !important;
}

#place_order:hover {
	background: var(--gm-primary-dark) !important;
}

/* ----- Allgemeine Hinweise/Meldungen (Fehler/Erfolg/Info) -----
   Gleiche Breite/Außenabstand wie der restliche Seiteninhalt (.gm-container,
   max 1440px) statt über die volle Bildschirmbreite. Der Gutter (24px zum
   Viewport-Rand) muss auf dem WRAPPER sitzen — bei max-width:1440px UND
   margin:auto bleibt bei genau 1440px Viewportbreite kein Platz mehr für die
   Zentrierung übrig, der Rand würde direkt an der Kante kleben. */
.woocommerce-notices-wrapper {
	max-width: 1440px;
	margin: 0 auto !important;
	padding: 0 24px;
}

/* WooCommerce setzt per JS den Fokus auf die Meldung (tabindex="-1", für
   Screenreader) — das triggert den dicken schwarzen Browser-Default-Outline,
   der nach dem nächsten Klick (Fokusverlust) wieder verschwindet. Eigener
   roter Rand ist schon da, Default-Outline ist nur störend. */
.woocommerce-error:focus,
.woocommerce-message:focus,
.woocommerce-info:focus {
	outline: none;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	width: 100%;
	max-width: none;
	margin: 24px 0 !important;
	padding: 18px 24px !important;
	list-style: none;
	background: #fff;
	border: 1px solid #ececec;
	border-left: 4px solid var(--gm-primary);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	font-size: 15px;
	color: #2a2a2a;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
	content: none;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	margin: 0;
	list-style: none;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
}

.woocommerce-error a.button,
.woocommerce-message a.button,
.woocommerce-info a.button {
	margin-left: auto;
	order: 2;
}

@media (max-width: 860px) {
	/* Mobile Tabellen-Darstellung von WooCommerce setzt die Spaltenbeschriftung
	   per ::before davor — ohne Abstand klebt "Preis:100,00 €" zusammen. */
	.woocommerce-cart table.shop_table td::before {
		margin-right: 6px;
	}

	/* !important nötig — die Desktop-Regel oben ist selbst !important, eine
	   normale Regel (selbst in der passenderen Media Query) kann sie sonst
	   nicht überschreiben. Deshalb griff das 1-Spalten-Layout auf Mobil
	   bisher nie. */
	.woocommerce div.product {
		grid-template-columns: 1fr !important;
		gap: 28px;
		padding: 0 14px;
	}

	.woocommerce div.product .product_title {
		font-size: 24px;
	}

	.woocommerce div.product .woocommerce-product-details__short-description {
		font-size: 15px;
	}

	.gm-product-description {
		padding: 24px 14px;
		font-size: 15px;
	}
}

@media (max-width: 600px) {
	/* Gleicher kompakter Seitenrand (14px) wie .gm-container auf Mobil —
	   diese Container benutzen ihr eigenes Padding statt .gm-container. */
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout .woocommerce,
	.woocommerce-notices-wrapper {
		padding: 0 14px;
	}

	#order_review,
	.woocommerce-checkout-review-order {
		padding: 16px;
	}

	.woocommerce-error,
	.woocommerce-message,
	.woocommerce-info {
		padding: 14px 16px !important;
	}
}