/* ===========================================================================
 * product.css -- Produktseite (Eugen, Phase 3, 15.09.2026).
 *
 * Werte nur aus tokens.css. Andres Aufteilung (Galerie 40 %, Designer 60 %)
 * liegt in style.css und bleibt; die Produktseite selbst ist Phase 4. Hier
 * nur, was das Erscheinungsbild an den Rest des Shops angleicht.
 *
 *   div.product-gallery > div.woocommerce-product-gallery
 *     div.product-gallery-slider (Flickity) > div.woocommerce-product-gallery__image > a > img
 *     div.product-thumbnails > div.col > a > img
 * ======================================================================== */

/* Vorschaubild und Miniaturen in Kartenrundung wie die Kacheln (Eugen,
   15.09.2026). Die Rundung sitzt am Bild UND am Rahmen, weil Flatsome den
   Slider mit overflow hidden schneidet und das Bild sonst eckig bleibt. */
.product-gallery .woocommerce-product-gallery__wrapper,
.product-gallery .product-gallery-slider,
.product-gallery .woocommerce-product-gallery__image,
.product-gallery .woocommerce-product-gallery__image img {
	border-radius: var(--ams-r-card);
	overflow: hidden;
}

.product-gallery .product-thumbnails img {
	border-radius: var(--ams-r-image);
}

/* -- Hinweis ueber der Motivwahl bei ?anlass= (Plugin ams-shop,
   includes/anlass-seiten.php, 16.09.2026) ----------------------------------- */
.single-product .ams-anlass-hinweis {
	margin: 0 0 var(--ams-s-3);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ams-ink-3);
}

.single-product .ams-anlass-hinweis a {
	color: var(--ams-ink-2);
	text-decoration: underline;
}

/* w2p-Designer: Zwischenüberschrift „Texte" über den Eingabefeldern weg (Eugen, 23.09.2026).
   Sie kommt aus w2p (formular.js, Schlüssel designer_texte) und ist über die Übersetzungen
   nicht leer zu setzen; bei Reiter-Layout steht dort nur das eine Wort. Nur die Karte der
   Eingabefelder — die Titel „Raster" und „Farbe" bleiben, und die der Listenkarten („Spruch auf
   der Rückseite", „Linke Innenseite"), erkennbar an ihrer Auswahlliste (01.10.2026). */
.w2p-d-karte[data-kartenseite]:not(:has(> select[data-liste])) > h4 { display: none; }

/* Listenkarten („Spruch auf der Rückseite — wählen —") wie die übrigen Felder: Titel über der
   Liste, Liste in voller Breite. w2p/produktseite.css stellt den Titel in eine 13-em-Spalte
   links neben die Liste (Kurschat-Optik) und lässt die Liste auf Inhaltsbreite. */
.w2p-shop-designer .w2p-d-karte:has(> select[data-liste]) { display: block; }
.w2p-shop-designer .w2p-d-karte:has(> select[data-liste]) > h4 { margin: 0 0 6px; }
.w2p-d-karte > select[data-liste] { width: 100%; }

/* Titel der Wahlen (Layout, Raster, Farbe) wie die Feldbeschriftungen; Abstand zwischen
   den Eingabefeldern wie zwischen den Karten (Eugen, 01.10.2026). */
.w2p-d-karte > h4,
.w2p-motivwahl-titel {
	margin: 0 0 6px;
	font: 600 16px/1.4 var(--ams-font);
	color: var(--ams-ink);
}

.w2p-d-eingabe + .w2p-d-eingabe { margin-top: var(--ams-s-4); }

/* Variantenwahl (Motiv, Größe, Blattanzahl) VOR den Designer (Eugen, 01.10.2026). WooCommerce
   setzt die Tabelle in sein Warenkorb-Formular, und das steht unter dem Designer — das Motiv
   einer Klappkarte war damit die letzte Wahl. Das Formular bleibt im DOM, wo es ist (seine
   Ereignisse hängen daran); nur die Darstellung ordnet um: Zusammenfassung als Spalte, das
   Formular löst sich in seine Kinder auf, die Tabelle rückt vor den Designer, der Rest
   (Preis, Papier, Menge, Knopf) bleibt dahinter. Nur bei variablen Produkten. */
.single-product .product-info.summary:has(> form.cart.variations_form) {
	display: flex;
	flex-direction: column;
}

/* Auch die Hülle des Designers löst sich auf (Hülle, Wurzel, Lage, Formular), damit die
   Variantenwahl ZWISCHEN Bühne und Felder rückt — unter den Mehrseiten-Hinweis, wo bei den
   Vorlagenfamilien die Motivleiste steht (Eugen, 01.10.2026). Bühne und Formular stehen in
   dieser Spalte ohnehin untereinander. */
.single-product .product-info.summary:has(> form.cart.variations_form) > form.cart.variations_form,
.single-product .product-info.summary:has(> form.cart.variations_form) > .w2p-shop-designer,
.single-product .product-info.summary:has(> form.cart.variations_form) > .w2p-shop-designer #w2p-designer,
.single-product .product-info.summary:has(> form.cart.variations_form) > .w2p-shop-designer .w2p-paket.is-einzeln,
.single-product .product-info.summary:has(> form.cart.variations_form) > .w2p-shop-designer .w2p-paket.is-einzeln > .w2p-paket-abschnitt,
.single-product .product-info.summary:has(> form.cart.variations_form) > .w2p-shop-designer .w2p-d-lage,
.single-product .product-info.summary:has(> form.cart.variations_form) > .w2p-shop-designer #w2p-d-form {
	display: contents;
}

/* Nur bei variablen Produkten — bei einfachen ist .w2p-d-lage selbst eine Flex-Spalte, und ein
   order an .w2p-d-links schob dort die Bühne hinter das Formular (01.10.2026, Wandkalender). */
.single-product .product-info.summary:has(> form.cart.variations_form) > .w2p-shop-designer .w2p-d-links { order: 2; margin-bottom: var(--ams-s-4); }
.single-product .product-info.summary:has(> form.cart.variations_form) > .w2p-shop-designer #w2p-d-form > * { order: 5; }
.single-product .product-info.summary:has(> form.cart.variations_form) > .w2p-shop-designer #w2p-d-form > .w2p-d-hinweis { order: 3; }
.single-product .product-info.summary > form.cart.variations_form > .variations {
	order: 4;
	width: auto;   /* Flatsome: width 100 % — die Tabelle ragte 15 px über die Spalte hinaus; als Flex-Kind dehnt sie sich von selbst */
	margin-bottom: var(--ams-s-5);
}
.single-product .product-info.summary > form.cart.variations_form > :not(.variations) { order: 6; }
.single-product .product-info.summary > .w2p-shop-designer ~ :not(form) { order: 7; }

/* Mehrseiten-Hinweis: gleich viel Luft oben wie unten (16 px); w2p setzt margin mit !important
   und schlug damit auch die 70/30-Ränder der Spalte (der Hinweis stand 113 px zu weit links). */
@media (min-width: 850px) {
	.single-product .product-info:has(> form.cart.variations_form) > .w2p-shop-designer #w2p-d-form > .w2p-d-hinweis {
		margin: 0 max(var(--ams-s-8), calc((100% - 720px) * 0.3)) var(--ams-s-4) max(var(--ams-s-8), calc((100% - 720px) * 0.7)) !important;
	}
}
.single-product #w2p-d-form > .w2p-d-hinweis { margin-top: 0 !important; margin-bottom: var(--ams-s-4) !important; }

/* Variantenwahl wie die übrigen Felder: Titel über der Liste, Liste in voller Breite —
   Flatsome stellt die Tabelle mit Beschriftung links daneben. „Zurücksetzen" darunter rechts. */
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations th,
.single-product table.variations td { display: block; width: 100%; padding: 0; border: 0; background: none; }
.single-product table.variations th.label { margin: 0 0 6px; font: 600 16px/1.4 var(--ams-font); color: var(--ams-ink); text-align: left; }
.single-product table.variations th.label label { font: inherit; color: inherit; }
.single-product table.variations td.value select { width: 100%; margin: 0; }
.single-product table.variations { position: relative; }
.single-product table.variations .reset_variations { position: absolute; right: 0; top: 2px; margin: 0; }

/* Papier (ams-shop/includes/papier.php): Titel wie die Feldbeschriftungen, 6 px zur Liste
   statt Zeilenumbruch plus Absatz. */
/* Erklaerzeile "Eigenes Motiv · eigene Texte · Serienbrief" unter dem Titel (individuell.php, 08.10.2026). */
.single-product .product-info .ams-individuell-zeile { margin: calc(-1 * var(--ams-s-2)) 0 var(--ams-s-3); font-size: 14px; color: var(--ams-ink-3); }

/* Reihenfolge im Kaufformular (produktform.js, 08.10.2026): Papier, Empfaengerliste, Umschlag, Preis.
   Gleiche Luft zwischen den Bloecken (--ams-s-4) und gleiche Titel wie bei der Papierwahl. */
.single-product .ams-papier { margin: 0 0 var(--ams-s-4); }
.single-product form.cart .w2p-serie-block { margin: 0 0 var(--ams-s-4); }
.single-product form.cart .w2p-serie-block .w2p-serie-titel { margin: 0 0 6px; }
.single-product form.cart .w2p-serie-block .w2p-serie-titel strong { font: 600 16px/1.4 var(--ams-font); color: var(--ams-ink); }
.single-product form.cart .w2p-serie-block .w2p-serie-erklaerung { display: block; margin: 0 0 6px; }
.single-product form.cart .w2p-paket-knoepfe { margin: 0 0 var(--ams-s-4); }
.single-product form.cart .woocommerce-variation-add-to-cart { margin-top: var(--ams-s-4); }
.single-product .ams-papier p { margin: 0; }
.single-product .ams-papier-wahl label { display: block; margin: 0 0 6px; font: 600 16px/1.4 var(--ams-font); color: var(--ams-ink); }
.single-product .ams-papier-wahl label + br { display: none; }
.single-product .ams-papier-wahl select { width: 100%; margin: 0; }

/* -- Designer und Kaufzeile im A&M-Stil (Eugen, 01.10.2026, wie Kurschat „rundlich"): Rundung der
   Kontaktformular-Felder (--ams-r-image) statt der 3 px der WordPress-Verwaltung, Rahmen in
   Linienfarbe statt Admin-Grau. w2p setzt an den Kacheln !important. */
.single-product .product-info select,
.single-product .product-info input[type="text"],
.single-product .product-info input[type="number"],
.single-product .w2p-d-dropfeld,
.single-product .w2p-d-thumbpfeil {
	border-radius: var(--ams-r-image);
	border-color: var(--ams-line);
}

.single-product .w2p-d-thumb { border-radius: var(--ams-r-image) !important; }
.single-product .w2p-d-thumb:not(.aktiv) { border-color: var(--ams-line) !important; }
.single-product .w2p-d-farbflaeche { border-radius: calc(var(--ams-r-image) - 3px); }

.single-product .w2p-d-leistenreihe {
	border-color: var(--ams-line);
	border-radius: var(--ams-r-image) var(--ams-r-image) 0 0;
}

.single-product .w2p-d-editor {
	border-color: var(--ams-line);
	border-radius: 0 0 var(--ams-r-image) var(--ams-r-image);
}

/* Mengenfeld: die Gruppe aus Minus, Zahl, Plus als eine abgerundete Form. */
.single-product .ux-quantity .ux-quantity__button--minus { border-radius: var(--ams-r-image) 0 0 var(--ams-r-image); }
.single-product .ux-quantity .ux-quantity__button--plus { border-radius: 0 var(--ams-r-image) var(--ams-r-image) 0; }
.single-product .ux-quantity input.qty { border-radius: 0; }

/* -- Breite der Fusszeile (Tabs, Praesente-Abschnitt, "Aehnliche Produkte"): wie Kopf,
 * Sektionen und die Produktzeile darueber -- Seitenbreite minus 30 px, zentriert (so rechnet
 * Flatsome .row). Bis 08.10.2026 stand hier testweise 1410 px wie Kurschat (25.09.2026) mit
 * eigenem linken Versatz (30.09.2026); Eugen: zu schmal, gemessen 1920 px: 111-1329 statt
 * 111-1809. Nur der aeussere Container, der von "Aehnliche Produkte" liegt darin. */
.single-product .product-footer > .container,
.single-product .product-footer .related > .container {
	max-width: calc(var(--ams-container-max) - 30px);
	margin-left: auto;
	margin-right: auto;
}

/* Galerie und Designer: die Zeile bleibt so breit wie Header und Footer, die
 * Galerie-Spalte höchstens 600 px (Eugen 25.09.2026: „etwas breiter" als die 512 der 1410-px-Zeile), die rechte Spalte
 * nimmt den Rest und zentriert ihren Inhalt (Designer, Kaufknopf, Texte) mit
 * bis zu 720 px Breite — gleich viel Luft links und rechts (Eugen, 25.09.2026). */
@media (min-width: 850px) {
	/* Höhere Spezifität als Flatsomes Customizer-Regel (Bildspalte 40 % !important). */
	body.single-product .product-main .row > .product-gallery.col.large-6 {
		flex: 0 1 600px !important;                /* unter 1280 px wieder 40 %, sonst bricht die Designer-Spalte um */
		width: auto !important;
		max-width: min(600px, 40%) !important;
	}
	.single-product .product-main .product-info {
		flex: 1 1 0% !important;      /* Flatsome setzt .col-fit/.summary mit !important */
		width: auto !important;
		max-width: none !important;
		padding-left: 0;
		padding-right: 0;
	}
	/* Freie Fläche neben dem Inhalt 70 % links, 30 % rechts, mindestens 64 px (Eugen, 25.09.2026).
	   Auch für die Kinder des aufgelösten Variantenformulars (display: contents, siehe oben). */
	.single-product .product-main .product-info > *,
	.single-product .product-main .product-info > form.cart.variations_form > *,
	.single-product .product-main .product-info:has(> form.cart.variations_form) > .w2p-shop-designer .w2p-d-links,
	.single-product .product-main .product-info:has(> form.cart.variations_form) > .w2p-shop-designer #w2p-d-form > * {
		max-width: 720px;
		margin-left: max(var(--ams-s-8), calc((100% - 720px) * 0.7));
		margin-right: max(var(--ams-s-8), calc((100% - 720px) * 0.3));
	}
}

/* -- Staffelpreise (Tabelle aus ams-shop/includes/staffelpreise.php) ------
 * Sitzt unter der Galerie in der Bildspalte. Aussehen wie bei Kurschat, Farben
 * und Abstände aus tokens.css (Eugen, 25.09.2026). */
.ams-staffel { clear: both; margin-top: var(--ams-s-8); }
.ams-staffel__titel { margin: 0 0 var(--ams-s-2); color: var(--ams-ink); font: var(--ams-t-h4); }
.ams-staffel__tabelle { width: 100%; margin: 0; border-collapse: collapse; }
.ams-staffel__tabelle th {  /* Zeilen mit 8 px Luft statt 4 (Eugen, 25.09.2026: „zu eng") */
	padding: var(--ams-s-2) var(--ams-s-3); border-bottom: 1px solid var(--ams-line);
	color: var(--ams-ink-3); font: var(--ams-t-small); font-weight: 400; text-align: left; text-transform: none;
}
/* Text innen statt buendig mit der Zeilenflaeche (Eugen, 08.10.2026). */
.ams-staffel__tabelle td { padding: var(--ams-s-2) var(--ams-s-3); border-bottom: 1px solid var(--ams-line); background: none; color: var(--ams-ink); }
.ams-staffel__tabelle tr:last-child td { border-bottom: 0; }
.ams-staffel__tabelle td:last-child, .ams-staffel__tabelle th:last-child { text-align: right; font-weight: 700; }
.ams-staffel__hinweis { margin: var(--ams-s-2) 0 0; color: var(--ams-ink-2); font: var(--ams-t-small); }

/* -- Teilen-Knöpfe: rund statt oval (Flatsome setzt keine feste Breite; die
 * Höhe kommt sonst aus Zeilenhöhe plus Rahmen). X statt Twitter ist eine
 * Flatsome-Einstellung (Customizer social_icons, Eugen 25.09.2026). */
.single-product .share-icons .icon.button.circle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; min-width: 0; min-height: 0; padding: 0; margin: 0 var(--ams-s-2) 0 0;
	box-sizing: border-box; line-height: 1; border-radius: 50%;
}
/* Das Icon ohne eigene Zeilenhöhe und Ränder, sonst sitzt es im Kreis nach unten versetzt (Eugen, 25.09.2026). */
.single-product .share-icons .icon.button.circle i { display: block; font-size: 16px; line-height: 1; margin: 0; width: auto; height: auto; }

/* -- Galerie füllt ihre Spalte. w2p/produktseite.css setzt der Galerie 38 % mit
 * !important (gedacht für Themes ohne Spaltenlayout); in Flatsomes 40-%-Spalte
 * war das Bild damit nur 212 px breit (gemessen 25.09.2026, `fuer-andre.md`). */
@media (min-width: 850px) {
	body.w2p-produkt.single-product .product-main .product-gallery div.images.woocommerce-product-gallery {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* -- „Ähnliche Produkte" im Stil des Katalogs (Eugen, 30.09.2026, Vorbild Kurschat24).
 * Die Kacheln kommen aus product-card.css. Hier die Überschrift wie die
 * Sektionsköpfe der Startseite statt Flatsomes grauer Versalzeile, und der
 * Schlitten ohne Fokusschatten (Flickity fokussiert ihn beim Wischen per
 * Skript; die Kachel-Links zeigen ihren eigenen Fokus). */
.related-products-wrapper .product-section-title {
	margin: var(--ams-s-7) 0 var(--ams-s-4);
	padding: 0;
	font: var(--ams-t-h3);
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--ams-ink);
}

/* Das erste Bild steht in der Flucht der Überschrift: die Reihe rückt um das
   Polster der Karte (12 px) nach links, zu Flatsomes 10 px Spaltenpolster dazu.
   Der Hover-Rahmen der Karte ragt dafür über die Flucht hinaus. */
.related-products-wrapper > .row {
	margin-left: calc(-10px - var(--ams-s-3)) !important;
}

.related-products-wrapper .row-slider.flickity-enabled:focus {
	box-shadow: none;
}