/**
 * Portrait-Archiv Photostore - Frontend-Styles.
 *
 * Framework-frei, mobile-first, auf die Plugin-Container gescoped. Die Galerie
 * bricht bewusst aus der (oft schmalen) Theme-Spalte auf volle Breite aus, um
 * die Bilder wirken zu lassen. Farbakzent per CSS-Variable anpassbar.
 */

[data-pawps-gallery],
[data-pawps-public-list],
[data-pawps-basket],
[data-pawps-appearance-preview] {
	--pawps-accent: #2d6cdf;
	--pawps-ink: #16181d;
	--pawps-muted: #6b7280;
	--pawps-line: #e6e6e8;
	--pawps-card: #f3f3f2;
	/* Kachelgrund der Vorschaubilder - eigenes Token, damit „transparent“
	   (Einstellung „Darstellung“) nicht auch die Warenkorb-Streifen trifft. */
	--pawps-tile: var( --pawps-card );
	/* Schriftfarbe AUF dem Akzent. Wird bei eigener Akzentfarbe serverseitig
	   aus deren Helligkeit neu bestimmt - sonst waere weiss auf gelb unlesbar. */
	--pawps-accent-ink: #ffffff;
	/* Gesperrte Eingabefelder: durchscheinender Schleier statt fester Farbe,
	   damit der Zustand auf JEDEM Zeilenhintergrund erkennbar ist (die
	   Warenkorb-Tabelle ist gestreift). Im Dark-Mode ueberschrieben - ein
	   schwarzer Schleier waere dort unsichtbar. */
	--pawps-disabled-fill: rgba( 0, 0, 0, 0.05 );
	--pawps-disabled-line: rgba( 0, 0, 0, 0.07 );
	/* Geometrie in vier Stufen, alle ueber „Darstellung“ auf 0 stellbar:
	   radius = Kacheln/Panels, sm = Buttons/Felder, xs = kleine Elemente,
	   pill = Chips und Pagination. */
	--pawps-radius: 14px;
	--pawps-radius-sm: 10px;
	--pawps-radius-xs: 8px;
	--pawps-pill: 999px;
	--pawps-gap: clamp( 0.5rem, 1.4vw, 1.25rem );
	/* Vorschaubilder: Zuschnitt und Rastergroesse (Einstellung „Darstellung“).
	   „Ganzes Foto zeigen“ setzt ratio auf auto, fit auf contain und richtet
	   die Kacheln oben aus. */
	--pawps-thumb-ratio: 1 / 1;
	--pawps-thumb-fit: cover;
	/* Platzhalter-Geometrie. BEWUSST eigene Variable: bei „Ganzes Foto zeigen“
	   ist `--pawps-thumb-ratio` = auto, und ein leerer Platzhalter mit
	   `aspect-ratio: auto` waere 0 Pixel hoch - also unsichtbar. Vor dem Laden
	   ist das echte Seitenverhaeltnis unbekannt, deshalb haelt der Platzhalter
	   ein Quadrat frei. */
	--pawps-skeleton-ratio: 1 / 1;
	--pawps-thumb-min: clamp( 130px, 22%, 240px );
	--pawps-grid-align: stretch;

	box-sizing: border-box;
	color: var( --pawps-ink );
	font-feature-settings: "kern";
}

[data-pawps-gallery] *,
[data-pawps-public-list] *,
[data-pawps-basket] * {
	box-sizing: border-box;
}

/* --- Container: buendig zur Content-Breite (kein Ausbruch) --------------- */

[data-pawps-gallery],
[data-pawps-public-list],
[data-pawps-basket] {
	width: 100%;
}

/* --- Kopfzeile ----------------------------------------------------------- */

.pawps-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var( --pawps-line );
}

.pawps-header__titles {
	min-width: 0;
}

[data-pawps-gallery] h1 {
	font-size: clamp( 1.4rem, 2.5vw, 2.1rem );
	font-weight: 600;
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin: 0 0 0.2rem;
}

.pawps-subtitle {
	margin: 0;
	color: var( --pawps-muted );
	font-size: 0.95rem;
}

.pawps-subtitle a {
	color: var( --pawps-accent );
	text-decoration: none;
}

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

.pawps-cart {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: nowrap;
	white-space: nowrap;
	padding: 0.55rem 0.95rem;
	border: 1px solid var( --pawps-line );
	border-radius: var( --pawps-pill );
	background: #fff;
	color: var( --pawps-ink );
	text-decoration: none;
	font-weight: 500;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.pawps-cart:hover {
	border-color: var( --pawps-accent );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.1 );
}

.pawps-cart__icon {
	color: var( --pawps-accent );
	flex: none;
}

.pawps-cart__sep {
	color: var( --pawps-muted );
}

.pawps-cart__sum {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* --- Unterordner als Pills ---------------------------------------------- */

.pawps-folders {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var( --pawps-gap );
}

.pawps-folders:empty {
	display: none;
}

.pawps-folder {
	padding: 0.45rem 0.95rem;
	border: 1px solid var( --pawps-line );
	border-radius: var( --pawps-pill );
	background: #fff;
	color: var( --pawps-ink );
	font: inherit;
	cursor: pointer;
	transition: all 0.15s ease;
}

.pawps-folder:hover {
	border-color: var( --pawps-accent );
	color: var( --pawps-accent );
}

.pawps-folder.is-active {
	background: var( --pawps-accent );
	border-color: var( --pawps-accent );
	color: var( --pawps-accent-ink );
}

.pawps-folder:focus-visible {
	outline: 3px solid var( --pawps-accent );
	outline-offset: 2px;
}

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

#images,
[data-pawps-public-list] {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var( --pawps-thumb-min ), 1fr ) );
	align-items: var( --pawps-grid-align );
	gap: var( --pawps-gap );
	margin: var( --pawps-gap ) 0;
	padding: 0;
	list-style: none;
}

/* Alte Bootstrap-Spaltenklassen im generierten Markup neutralisieren. */
#images > [class*="col-"] {
	width: auto;
	max-width: none;
	padding: 0;
	float: none;
}

.pawps-thumb,
.pawps-listcard {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var( --pawps-radius );
	overflow: hidden;
	background: var( --pawps-tile );
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.06 );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pawps-thumb img,
.pawps-listcard__img img {
	display: block;
	width: 100%;
	aspect-ratio: var( --pawps-thumb-ratio );
	object-fit: var( --pawps-thumb-fit );
	transition: transform 0.35s ease;
}

/* Platzhalter-Kachel: haelt die Geometrie der echten Kachel frei, damit das
   Layout beim Eintreffen der Bilder nicht springt. Gilt sowohl fuer die
   Platzhalter VOR der Antwort als auch fuer eine Kachel, deren Bild noch
   laedt. */
.pawps-thumb.is-skeleton {
	aspect-ratio: var( --pawps-skeleton-ratio );
	/* Neutrales Grau statt `--pawps-tile`: die Kachelflaeche laesst sich auf
	   „transparent“ stellen, dann waere vom Verlauf nichts zu sehen. */
	background: linear-gradient(
		90deg,
		rgba( 128, 128, 128, 0.10 ) 0%,
		rgba( 128, 128, 128, 0.22 ) 50%,
		rgba( 128, 128, 128, 0.10 ) 100%
	);
	background-size: 200% 100%;
	animation: pawps-skeleton 1.4s ease-in-out infinite;
	cursor: default;
	box-shadow: none;
}

/* Das noch ladende Bild bleibt unsichtbar, sonst blitzt es halb auf. */
.pawps-thumb.is-skeleton img {
	opacity: 0;
}

.pawps-thumb.is-skeleton:hover {
	box-shadow: none;
	transform: none;
}

@keyframes pawps-skeleton {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

.pawps-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.28 ), rgba( 0, 0, 0, 0 ) 42% );
	opacity: 0;
	transition: opacity 0.2s ease;
}

.pawps-thumb:hover,
.pawps-listcard:hover {
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.16 );
	transform: translateY( -3px );
}

.pawps-thumb:hover img,
.pawps-listcard:hover img {
	transform: scale( 1.06 );
}

.pawps-thumb:hover::after {
	opacity: 1;
}

.pawps-thumb:focus-visible,
.pawps-listcard:focus-visible,
.pawps-page:focus-visible {
	outline: 3px solid var( --pawps-accent );
	outline-offset: 2px;
}

/* Platzhalter des Titelbilds: die Karte steht sofort im HTML, das Bild kommt
   nachgeladen. Ohne reservierte Hoehe wuerde die Liste beim Eintreffen der
   Bilder springen. `:empty` greift nur, solange noch kein <img> darin haengt -
   danach bestimmt das Bild die Hoehe (und in „ganzes Foto zeigen" darf es das
   auch). */
.pawps-listcard__img {
	display: block;
}

.pawps-listcard__img:empty {
	aspect-ratio: 1 / 1;
	background: var( --pawps-tile );
}

.pawps-listcard__title {
	display: block;
	padding: 0.7rem 0.85rem;
	font-weight: 600;
}

/* --- Pagination ---------------------------------------------------------- */

#pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

#pagination li {
	list-style: none;
}

.pawps-page {
	min-width: 2.6rem;
	padding: 0.45rem 0.7rem;
	border: 1px solid var( --pawps-line );
	border-radius: var( --pawps-pill );
	background: #fff;
	color: var( --pawps-ink );
	cursor: pointer;
	font: inherit;
	line-height: 1;
	transition: all 0.15s ease;
}

.pawps-page:hover {
	border-color: var( --pawps-accent );
	color: var( --pawps-accent );
}

.pawps-page.is-active {
	background: var( --pawps-accent );
	border-color: var( --pawps-accent );
	color: var( --pawps-accent-ink );
}

/* --- Lightbox ------------------------------------------------------------ */

body.pawps-lb-open {
	overflow: hidden;
}

/* Overlays haengen an document.body (ausserhalb der Container) und brauchen
   die Akzentfarbe daher selbst - sonst waeren z. B. Buttons weiss auf weiss. */
.pawps-lb,
.pawps-setcfg,
.pawps-imgview {
	--pawps-accent: #2d6cdf;
	--pawps-accent-ink: #ffffff;
	--pawps-ink: #16181d;
	--pawps-muted: #6b7280;
	--pawps-line: #e6e6e8;
	--pawps-radius: 14px;
	--pawps-radius-sm: 10px;
	--pawps-radius-xs: 8px;
	--pawps-pill: 999px;
}

.pawps-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 0.5rem, 2vw, 2rem );
	background: rgba( 10, 10, 12, 0.92 );
	backdrop-filter: blur( 4px );
	animation: pawps-fade 0.2s ease;
}

@keyframes pawps-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.pawps-lb__stage {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 260px, 340px );
	gap: 1.5rem;
	width: 100%;
	max-width: 1200px;
	max-height: 90vh;
	align-items: center;
}

.pawps-lb__figure {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.pawps-lb__figure img {
	max-width: 100%;
	max-height: 88vh;
	object-fit: contain;
	border-radius: var( --pawps-radius-xs );
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.6 );
}

.pawps-lb__panel {
	color: #f4f4f5;
	align-self: center;
	/* Solider Karten-Hintergrund, damit die Texte/Preise immer klar lesbar sind
	   und nicht auf dem durchscheinenden, geblurrten Foto "schwimmen". */
	background: rgba( 24, 26, 32, 0.97 );
	padding: 1.25rem 1.4rem;
	border-radius: var( --pawps-radius-sm );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	box-shadow: 0 16px 48px rgba( 0, 0, 0, 0.55 );
	max-height: 88vh;
	overflow-y: auto;
}

.pawps-lb__title {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 1.25rem;
	/* Explizit hell: die Lightbox haengt an document.body, sonst faerbt das
	   Theme die <h3>-Ueberschrift dunkel ein -> unlesbar auf dunklem Panel. */
	color: #fff;
}

.pawps-lb__label {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #a9adb6;
	margin-bottom: 0.35rem;
}

.pawps-lb__product,
.pawps-lb__qty {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-radius: var( --pawps-radius-sm );
	background: rgba( 255, 255, 255, 0.06 );
	color: #fff;
	font: inherit;
}

/* Optionen UND Kategorie-Gruppenlabels dunkel (native Dropdowns rendern auf
   hellem Grund) – gemeinsame Textfarbe, damit nichts doppelt gepflegt wird. */
.pawps-lb__product option,
.pawps-lb__product optgroup {
	color: #16181d;
}

/* Kategorie-Gruppenlabels zusaetzlich hervorheben, damit die Gruppierung im
   geoeffneten Select klar erkennbar ist. */
.pawps-lb__product optgroup {
	background: #fff;
	font-weight: 700;
}

.pawps-lb__row {
	margin-top: 1rem;
}

.pawps-lb__qty {
	max-width: 6rem;
}

.pawps-lb__price {
	margin: 1.1rem 0;
	font-size: 1.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pawps-lb__tiers {
	margin: -0.4rem 0 1.1rem;
	padding: 0.6rem 0.8rem;
	/* Auf dem dunklen Lightbox-Panel: helle statt schwarzer Kontur/Fuellung,
	   sonst waere die Box quasi unsichtbar (dunkel auf dunkel). */
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-radius: var( --pawps-radius-sm );
	background: rgba( 255, 255, 255, 0.05 );
	font-size: 0.86rem;
}

.pawps-lb__tiers-title {
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.pawps-lb__tier-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-variant-numeric: tabular-nums;
}

.pawps-lb__tier {
	display: flex;
	justify-content: space-between;
	padding: 0.1rem 0;
	opacity: 0.75;
}

.pawps-lb__tier.is-active {
	opacity: 1;
	font-weight: 700;
	color: var( --pawps-accent );
}

.pawps-lb__tiers-nudge {
	margin-top: 0.4rem;
	font-weight: 600;
	color: var( --pawps-accent );
}

.pawps-lb__add {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 0;
	border-radius: var( --pawps-radius-sm );
	background: var( --pawps-accent );
	color: var( --pawps-accent-ink );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.pawps-lb__add:hover {
	filter: brightness( 1.08 );
}

.pawps-lb__add:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Erfolgs-Zustand: der Button wird kurz selbst zur Bestaetigung. Die
   Rueckmeldung erscheint damit genau am Blickpunkt - die frueher genutzte
   Meldung am unteren Fensterrand wurde regelmaessig uebersehen. */
.pawps-lb__add.is-added {
	background: #17803d;
	filter: none;
}

/* Persistenter Warenkorb-Stand unter dem Button. Feste Farben statt
   CSS-Variablen: die Lightbox haengt an document.body, ausserhalb der
   Plugin-Container, in denen --pawps-* definiert sind. */
.pawps-lb__cart {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 0.75rem;
	margin-top: 0.9rem;
	padding-top: 0.8rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.14 );
	font-size: 0.95rem;
}

.pawps-lb__cart[hidden] {
	display: none;
}

.pawps-lb__cart-state {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #d7dae0;
}

.pawps-lb__cart-icon {
	flex: none;
	opacity: 0.8;
}

.pawps-lb__cart-sum {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.pawps-lb__cart-sum::before {
	content: "\00b7";
	margin: 0 0.4rem 0 0.15rem;
	font-weight: 400;
	opacity: 0.55;
}

/* Versandhinweis der Bildansicht: eigene, ruhige Zeile - er soll informieren,
   nicht mit dem Preis konkurrieren. `flex-basis: 100%` bricht ihn unter die
   Zeile aus Anzahl und Summe. */
.pawps-lb__cart-shipping {
	flex-basis: 100%;
	color: #b9bec7;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.pawps-lb__cart-shipping:empty {
	display: none;
}

.pawps-lb__cart-link {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	font-weight: 600;
	white-space: nowrap;
}

.pawps-lb__cart-link:hover,
.pawps-lb__cart-link:focus {
	text-decoration-thickness: 2px;
}

/* Nur fuer Screenreader (Ansage der Warenkorb-Bestaetigung). */
.pawps-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.pawps-lb__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 2.6rem;
	height: 2.6rem;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.pawps-lb__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.pawps-lb__nav:hover,
.pawps-lb__close:hover {
	background: rgba( 255, 255, 255, 0.22 );
}

.pawps-lb__prev { left: 1rem; }
.pawps-lb__next { right: 1rem; }

.pawps-lb.is-loading .pawps-lb__figure { opacity: 0.4; }

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

[data-pawps-basket-box] {
	padding: 0.9rem 1rem;
	border: 1px solid var( --pawps-line );
	border-radius: var( --pawps-radius );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
}

[data-pawps-basket-box] a {
	font-weight: 600;
	color: var( --pawps-accent );
	text-decoration: none;
}

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

[data-pawps-basket] table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}

[data-pawps-basket] th,
[data-pawps-basket] td {
	padding: 0.7rem 0.6rem;
	border-bottom: 1px solid var( --pawps-line );
	text-align: left;
	vertical-align: middle;
}

[data-pawps-basket] th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --pawps-muted );
}

[data-pawps-basket] img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var( --pawps-radius-xs );
	cursor: zoom-in;
}

[data-pawps-basket] .pawps-qty {
	width: 4.5rem;
	padding: 0.4rem 0.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Nicht editierbare Menge: dasselbe Feld, nur deaktiviert (digitaler Download
   = je Foto genau 1x). Die Geometrie ist zwangsweise identisch, weil es
   dieselbe Klasse ist.

   Zurueck tritt bewusst nur der KASTEN (kein Feld-Hintergrund), nicht der
   Wert: ein `opacity` auf dem Feld daempft beides und macht die Zahl schlecht
   lesbar. WebKit faerbt deaktivierte Felder ausserdem eigenmaechtig grau und
   ignoriert dabei `color` - daher `-webkit-text-fill-color` explizit. Farbe
   ueber das Token, damit der Dark-Mode mitkommt. */
[data-pawps-basket] .pawps-qty:disabled {
	cursor: default;
	opacity: 1;
	color: var( --pawps-ink );
	-webkit-text-fill-color: var( --pawps-ink );
	background: var( --pawps-disabled-fill );
	border-color: var( --pawps-disabled-line );
}

/* Einfaches Bild-Overlay (z.B. Klick aufs Warenkorb-Bild) */
.pawps-imgview {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 0.5rem, 2vw, 2rem );
	background: rgba( 10, 10, 12, 0.92 );
	cursor: zoom-out;
}

.pawps-imgview img {
	max-width: 100%;
	max-height: 90vh;
	border-radius: var( --pawps-radius-xs );
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.6 );
}

[data-pawps-basket] .text-right,
[data-pawps-basket] .text-center {
	font-variant-numeric: tabular-nums;
}

[data-pawps-basket] .text-right { text-align: right; }
[data-pawps-basket] .text-center { text-align: center; }

[data-pawps-basket] form {
	display: grid;
	gap: 0.8rem;
	max-width: 640px;
}

[data-pawps-basket] input,
[data-pawps-basket] select,
[data-pawps-basket] textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var( --pawps-line );
	border-radius: var( --pawps-radius-sm );
	font: inherit;
}

[data-pawps-basket] .btn,
[data-pawps-basket] button[type="submit"],
[data-pawps-basket] input[type="submit"] {
	padding: 0.75rem 1.3rem;
	border: 0;
	border-radius: var( --pawps-radius-sm );
	background: var( --pawps-accent );
	color: var( --pawps-accent-ink );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

[data-pawps-basket] .btn-danger {
	background: #d1435b;
	padding: 0.3rem 0.6rem;
	border-radius: var( --pawps-radius-xs );
	line-height: 1;
}

/* --- Checkout-Formular (Adresse) ----------------------------------------- */

.pawps-checkout-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.25rem;
	max-width: 680px;
	margin-top: 1rem;
}

.pawps-checkout-form .pawps-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	max-width: none;
}

.pawps-checkout-form .pawps-field--wide {
	grid-column: 1 / -1;
}

/* Direkte Kinder, die keine Feldgruppe sind (Vertrauenshinweis, Zahlungsart,
   Absende-Button), gehoeren ueber die ganze Breite. Ohne diese Regel belegen
   sie je eine einzelne Rasterzelle und stehen nebeneinander statt
   untereinander - die Zahlungsart landete so neben dem Vertrauenshinweis. */
.pawps-checkout-form > :not(.pawps-field) {
	grid-column: 1 / -1;
}

.pawps-checkout-form .pawps-field > label {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --pawps-muted );
}

.pawps-checkout-form input,
.pawps-checkout-form select {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var( --pawps-line );
	border-radius: var( --pawps-radius-sm );
	background: #fff;
	font: inherit;
}

.pawps-checkout-form input:focus,
.pawps-checkout-form select:focus {
	outline: none;
	border-color: var( --pawps-accent );
	box-shadow: 0 0 0 3px rgba( 45, 108, 223, 0.15 );
}

.pawps-inline {
	display: flex;
	gap: 0.6rem;
}

.pawps-inline > input {
	flex: 1;
}

.pawps-inline .pawps-nr {
	flex: none;
	width: 6rem;
}

.pawps-inline .pawps-zip {
	flex: none;
	width: 7rem;
}

.pawps-check {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	color: var( --pawps-ink );
	font-size: 0.95rem;
	cursor: pointer;
}

.pawps-check input {
	width: auto;
}

/* Datenschutz-Hinweis (Information, keine Zustimmung – daher kein Kaestchen). */
.pawps-privacy-note {
	margin: 0;
	color: var( --pawps-muted );
	font-size: 0.9rem;
}

.pawps-agb {
	margin-top: 0.4rem;
}

.pawps-agb summary {
	cursor: pointer;
	color: var( --pawps-accent );
	font-size: 0.9rem;
}

.pawps-agb__text {
	max-height: 220px;
	overflow-y: auto;
	margin-top: 0.6rem;
	padding: 0.9rem 1rem;
	border: 1px solid var( --pawps-line );
	border-radius: var( --pawps-radius-sm );
	background: #fafafa;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var( --pawps-muted );
}

.pawps-checkout-submit {
	grid-column: 1 / -1;
	justify-self: start;
	padding: 0.85rem 1.7rem;
	border: 0;
	border-radius: var( --pawps-radius-sm );
	background: var( --pawps-accent );
	color: var( --pawps-accent-ink );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.pawps-checkout-submit:hover {
	filter: brightness( 1.06 );
}

.pawps-checkout-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

@media ( max-width: 600px ) {
	.pawps-checkout-form {
		grid-template-columns: 1fr;
	}
}

/* --- Bestellbestaetigung ------------------------------------------------- */

.pawps-confirm {
	max-width: 560px;
	margin: 2rem auto;
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.pawps-confirm__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: #e7f6ec;
	color: #1f9d55;
	font-size: 2rem;
	line-height: 1;
}

.pawps-confirm__title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	font-weight: 600;
	text-wrap: balance;
}

.pawps-confirm__nr {
	margin: 0 0 0.75rem;
	font-variant-numeric: tabular-nums;
}

.pawps-confirm__hint {
	margin: 0;
	color: var( --pawps-muted );
}

/* --- Toast --------------------------------------------------------------- */

.pawps-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translate( -50%, 1rem );
	z-index: 100001;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: #16181d;
	color: #fff;
	font-weight: 500;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.3 );
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.pawps-toast.is-visible {
	opacity: 1;
	transform: translate( -50%, 0 );
}

/* --- Responsiv ----------------------------------------------------------- */

@media ( max-width: 720px ) {
	.pawps-lb__stage {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		max-height: 92vh;
		overflow-y: auto;
	}

	.pawps-lb__figure img {
		max-height: 55vh;
	}

	[data-pawps-basket] th:first-child,
	[data-pawps-basket] td:first-child {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pawps-thumb,
	.pawps-thumb img,
	.pawps-listcard,
	.pawps-listcard img,
	.pawps-toast {
		transition: none;
	}
	.pawps-lb__add {
		transition: none;
	}
	.pawps-lb { animation: none; }
	/* Platzhalter bleiben ruhig grau, statt zu flimmern. */
	.pawps-thumb.is-skeleton {
		animation: none;
		background: rgba( 128, 128, 128, 0.14 );
	}
}

/* --- Dark-Theme des Themes respektieren (Karten-Grund) ------------------- */

@media ( prefers-color-scheme: dark ) {
	[data-pawps-gallery],
	[data-pawps-public-list],
	[data-pawps-basket],
	[data-pawps-appearance-preview] {
		--pawps-ink: #ececed;
		--pawps-muted: #9aa0aa;
		--pawps-line: #33363d;
		--pawps-card: #1c1e24;
		--pawps-disabled-fill: rgba( 255, 255, 255, 0.07 );
		--pawps-disabled-line: rgba( 255, 255, 255, 0.09 );
	}

	.pawps-page { background: #1c1e24; }
	#folder { background: #1c1e24; color: var( --pawps-ink ); }
}

/* --- Oeffentliche Galerie-Liste (eventList) ------------------------------- */
.pawps-listwrap { margin: 0 auto; }

.pawps-list {
	display: grid;
	/* auto-fit + Obergrenze statt 1fr: mit 1fr dehnen sich die Karten ueber die
	   ganze Zeile, wodurch eine einzelne Galerie riesig und eine halb gefuellte
	   letzte Zeile linksbuendig wirkte. So behalten die Karten ihre Groesse und
	   die Reihe wird zentriert - bei einer Galerie steht sie mittig, bei zwei
	   eben die zwei. min() haelt sie auf schmalen Bildschirmen im Rahmen. */
	grid-template-columns: repeat( auto-fit, minmax( min( 220px, 100% ), 320px ) );
	justify-content: center;
	gap: var( --pawps-gap );
}

/* Blaetterung der oeffentlichen Liste. Nutzt dieselben .pawps-page-Chips wie
   die Galerie; als <a>/<span> brauchen sie ausdruecklich inline-block. */
.pawps-listpager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	align-items: center;
	margin: 1.5rem 0 0;
}

.pawps-listpager .pawps-page {
	display: inline-block;
	text-align: center;
	text-decoration: none;
}

.pawps-listpager__gap {
	color: var( --pawps-muted );
}

/* --- Utilities (ersetzen Bootstrap text-right/-center) -------------------- */

/* Bewusst zusaetzlich auf die Plugin-Container gescoped. Die Basisregel fuer
   Warenkorb-Zellen (`[data-pawps-basket] th, [data-pawps-basket] td`) richtet
   links aus und hat Spezifitaet 0,1,1 - sie hat die ungescopten Utilities
   (0,1,0) stillschweigend geschlagen. Folge: SAEMTLICHE Preis- und
   Mengenspalten im Warenkorb standen linksbuendig, obwohl die Templates die
   Klassen setzen. Beim Aendern der Selektoren die Spezifitaet mitdenken -
   `CartQuantityAlignmentTest` rechnet sie nach. */
.pawps-right,
[data-pawps-gallery] .pawps-right,
[data-pawps-public-list] .pawps-right,
[data-pawps-basket] .pawps-right { text-align: right; }

.pawps-center,
[data-pawps-gallery] .pawps-center,
[data-pawps-public-list] .pawps-center,
[data-pawps-basket] .pawps-center { text-align: center; }

/* --- Buttons (ersetzen Bootstrap btn/btn-primary/btn-danger) -------------- */
.pawps-btn {
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: var( --pawps-radius-sm );
	background: var( --pawps-accent );
	color: var( --pawps-accent-ink );
	font-weight: 600;
	cursor: pointer;
}

.pawps-btn:hover { filter: brightness( 1.06 ); }
.pawps-btn:disabled { opacity: 0.6; cursor: default; }

.pawps-remove {
	border: 0;
	border-radius: var( --pawps-radius-xs );
	background: #d33a2c;
	color: #fff;
	width: 1.9rem;
	height: 1.9rem;
	line-height: 1;
	cursor: pointer;
}

.pawps-remove:hover { filter: brightness( 1.08 ); }

/* --- Warenkorb-Seite (warenkorbList) ------------------------------------- */
.pawps-cartpage__title,
.pawps-orderarea__title { margin: 0 0 1rem; }

.pawps-carttable {
	width: 100%;
	border-collapse: collapse;
}

.pawps-carttable th,
.pawps-carttable td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var( --pawps-line );
	vertical-align: middle;
}

.pawps-carttable thead th {
	text-align: left;
	color: var( --pawps-muted );
	font-weight: 600;
}

/* Preise mit gleich breiten Ziffern: sonst wandern die Kommastellen, sobald
   ein Preis zweistellig wird, und die Spalte sieht unruhig aus. */
.pawps-carttable td.pawps-right,
.pawps-carttable__sums td {
	font-variant-numeric: tabular-nums;
}

.pawps-carttable #productList tr:nth-child( odd ) { background: var( --pawps-card ); }

.pawps-carttable img {
	max-width: 64px;
	height: auto;
	border-radius: var( --pawps-radius-xs );
	cursor: pointer;
}

.pawps-carttable__sums td { border-bottom: 0; }

.pawps-orderarea { margin-top: 2.5rem; }

/* --- Zahlungsart-Auswahl ------------------------------------------------- */

/* Hatte bisher keine einzige Regel: der Browser zeichnete ein Default-
   Fieldset, und weil <label> inline ist, liefen Radio, Beschriftung und
   Beschreibung als ein Textfluss durcheinander. */
.pawps-payment {
	margin: 1.75rem 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.pawps-payment legend {
	padding: 0;
	margin-bottom: 0.6rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var( --pawps-muted );
}

/* Zwei Spalten: Radio links, Beschriftung UND Beschreibung rechts daneben
   gestapelt. Bei einspaltigem Fluss landet die Beschreibung unter dem Radio
   statt unter ihrer Beschriftung - genau das sah falsch aus. */
.pawps-payment__option {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.65rem;
	align-items: start;
	padding: 0.85rem 0.95rem;
	border: 1px solid var( --pawps-line );
	border-radius: var( --pawps-radius-sm );
	background: var( --pawps-card );
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.pawps-payment__option + .pawps-payment__option {
	margin-top: 0.5rem;
}

.pawps-payment__option:hover {
	border-color: var( --pawps-accent );
}

/* Gewaehlte Zahlart klar hervorheben (Aufschlag als Innenkontur, damit die
   Kachel nicht springt). */
.pawps-payment__option:has( input:checked ) {
	border-color: var( --pawps-accent );
	box-shadow: inset 0 0 0 1px var( --pawps-accent );
}

.pawps-payment__option input {
	margin: 0.2rem 0 0;
}

.pawps-payment__label {
	font-weight: 600;
}

.pawps-payment__hint {
	grid-column: 2;
	margin-top: 0.2rem;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var( --pawps-muted );
}

/* --- Bankverbindung der Bestellbestaetigung ------------------------------ */

/* Ebenfalls ohne eigene Regeln: eine <dl> ohne Darstellung ist eine Folge
   eingerueckter Zeilen, in der Label und Wert nicht zusammenfinden. */
.pawps-confirm__bank {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1.25rem;
	margin: 1rem 0 0;
	max-width: 34rem;
}

.pawps-confirm__bank dt {
	font-size: 0.9rem;
	color: var( --pawps-muted );
}

.pawps-confirm__bank dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media ( prefers-color-scheme: dark ) {
	.pawps-carttable #productList tr:nth-child( odd ) { background: #1c1e24; }
}

/* --- Teilen-Button + Vertrauens-Zeile ------------------------------------ */
.pawps-share {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var( --pawps-accent );
	cursor: pointer;
	text-decoration: underline;
}
.pawps-share:hover { text-decoration: none; }

.pawps-trust {
	margin: 0.6rem 0 1rem;
	font-size: 0.85rem;
	opacity: 0.75;
}

/* --- Produktsets (Bundles): Info in der Lightbox --------------------------- */

.pawps-lb__setinfo {
	margin: -0.2rem 0 0.6rem;
	font-size: 0.86rem;
	opacity: 0.85;
	line-height: 1.35;
}

/* --- Set-Konfigurator (Motiv-Zuordnung je Produkt) ------------------------- */

.pawps-setcfg {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba( 0, 0, 0, 0.6 );
}

.pawps-setcfg__box {
	position: relative;
	width: min( 820px, 100% );
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	color: #111;
	border-radius: var( --pawps-radius );
	padding: 1.4rem 1.4rem 1.1rem;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.35 );
}

.pawps-setcfg__close {
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: #666;
}

.pawps-setcfg__title {
	margin: 0 1.5rem 0.3rem 0;
	font-size: 1.15rem;
}

.pawps-setcfg__hint {
	margin: 0 0 0.9rem;
	font-size: 0.9rem;
	opacity: 0.8;
}

/* Grosse Vorschau des Fotos am aktiven Produkt. */
.pawps-setcfg__preview {
	margin-bottom: 0.7rem;
	text-align: center;
	background: rgba( 0, 0, 0, 0.04 );
	border-radius: var( --pawps-radius-sm );
	padding: 0.4rem;
}

.pawps-setcfg__preview img {
	max-width: 100%;
	max-height: 34vh;
	object-fit: contain;
	border-radius: var( --pawps-radius-xs );
}

/* Produktzeilen: je Produkt des Sets eine Zeile mit zugeordnetem Foto. */
.pawps-setcfg__products {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}

.pawps-setrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	border: 2px solid rgba( 0, 0, 0, 0.12 );
	border-radius: var( --pawps-radius-sm );
	background: #fafafa;
	padding: 0.4rem 0.6rem;
	cursor: pointer;
	text-align: left;
	font: inherit;
}

.pawps-setrow.is-active {
	border-color: var( --pawps-accent );
	background: #fff;
}

.pawps-setrow__img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: var( --pawps-radius-xs );
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.06 );
}

.pawps-setrow__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pawps-setrow__name {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 0.9rem;
}

.pawps-setrow__change {
	flex: 0 0 auto;
	font-size: 0.8rem;
	color: var( --pawps-accent );
	font-weight: 600;
}

.pawps-setcfg__count {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.6rem;
}

.pawps-setcfg__count.is-over {
	color: #c0392b;
}

.pawps-setcfg__pick {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var( --pawps-accent );
}

/* Foto-Auswahlstreifen. */
.pawps-setcfg__strip {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 108px, 1fr ) );
	gap: 0.5rem;
	max-height: 46vh;
	overflow: auto;
	padding: 0.4rem;
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: var( --pawps-radius-sm );
	margin-bottom: 0.9rem;
}

.pawps-setcfg__thumb {
	position: relative;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	border-radius: var( --pawps-radius-xs );
	overflow: hidden;
	aspect-ratio: 1 / 1;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color 0.12s ease;
}

.pawps-setcfg__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Bereits verwendetes Foto: umrandet + Haken. */
.pawps-setcfg__thumb.is-used {
	outline-color: var( --pawps-accent );
}

.pawps-setcfg__thumb-check {
	position: absolute;
	top: 4px;
	right: 4px;
	display: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var( --pawps-accent );
	color: var( --pawps-accent-ink );
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	font-weight: 700;
}

.pawps-setcfg__thumb.is-used .pawps-setcfg__thumb-check {
	display: block;
}

/* Foto des aktuell bearbeiteten Produkts zusaetzlich hervorheben. */
.pawps-setcfg__thumb.is-current {
	outline-color: var( --pawps-accent );
	outline-width: 3px;
}

/* Aktionen stehen nun direkt unter den Artikeln (vor der Foto-Auswahl);
   der Trenner grenzt Set-Zusammenstellung von der Foto-Auswahl ab. */
.pawps-setcfg__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
	margin: 0.2rem 0 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
}

/* Unterordner-Auswahl (wie in der Galerie), auf die helle Box abgestimmt. */
.pawps-setcfg__folders {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.7rem;
}

.pawps-setcfg__folders:empty {
	display: none;
}

.pawps-setcfg__folder {
	padding: 0.4rem 0.85rem;
	border: 1px solid rgba( 0, 0, 0, 0.18 );
	border-radius: var( --pawps-pill );
	background: #fff;
	color: #333;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.15s ease;
}

.pawps-setcfg__folder:hover {
	border-color: var( --pawps-accent );
	color: var( --pawps-accent );
}

.pawps-setcfg__folder.is-active {
	background: var( --pawps-accent );
	border-color: var( --pawps-accent );
	color: var( --pawps-accent-ink );
}

/* Seitenblaettern der Foto-Auswahl. */
.pawps-setcfg__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin-bottom: 0.4rem;
}

.pawps-setcfg__pagination:empty {
	display: none;
}

.pawps-setcfg__pagebtn {
	min-width: 2.4rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid rgba( 0, 0, 0, 0.18 );
	border-radius: var( --pawps-pill );
	background: #fff;
	color: #333;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: all 0.15s ease;
}

.pawps-setcfg__pagebtn:hover {
	border-color: var( --pawps-accent );
	color: var( --pawps-accent );
}

.pawps-setcfg__pagebtn.is-active {
	background: var( --pawps-accent );
	border-color: var( --pawps-accent );
	color: var( --pawps-accent-ink );
}

.pawps-setcfg__cancel,
.pawps-setcfg__confirm {
	padding: 0.7rem 1.1rem;
	border-radius: var( --pawps-radius-sm );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.pawps-setcfg__cancel {
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	background: transparent;
	color: #333;
}

.pawps-setcfg__confirm {
	border: 0;
	background: var( --pawps-accent );
	color: var( --pawps-accent-ink );
}

.pawps-setcfg__confirm:disabled {
	opacity: 0.5;
	cursor: default;
}

/* --- Warenkorb: Aufstellung eines Sets mit Foto je Bestandteil ------------- */

.pawps-basket-setcaption {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0.8;
}

.pawps-basket-setitems {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.3rem;
}

.pawps-basket-setitem {
	width: 70px;
	text-align: center;
}

.pawps-basket-setitem__img {
	display: block;
	width: 70px;
	height: 70px;
	border-radius: var( --pawps-radius-xs );
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.06 );
}

.pawps-basket-setitem__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pawps-basket-setitem__label {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.72rem;
	line-height: 1.2;
}

/* --- QR-Code-Veranstaltungen (Schul-/Kindergartenfotografie) -------------
   Die .pawps-codeform-Varianten geben den serverseitig gerenderten Formularen
   (Galeriecode, Gastkennwort) dieselbe Karten-Optik. Vorher waren das nackte
   <form>-Elemente mit der Adminklasse "button-primary", die im Frontend gar
   nicht existiert - entsprechend sahen sie aus wie Browser-Standard. */
.pawps-qr {
	margin: 0 0 1.25rem;
}
.pawps-qr__form,
.pawps-codeform {
	max-width: 32rem;
	margin: 0 auto;
	padding: 1.5rem;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: var( --pawps-radius-sm );
	background: rgba( 0, 0, 0, 0.02 );
	text-align: center;
}
.pawps-qr__title,
.pawps-codeform__title {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
}
.pawps-qr__intro,
.pawps-codeform__intro {
	margin: 0 0 1rem;
	font-size: 0.92rem;
	line-height: 1.4;
	opacity: 0.85;
}
.pawps-qr__row,
.pawps-codeform__row {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
}
.pawps-qr__input,
.pawps-codeform__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.6rem 0.75rem;
	font-size: 1rem;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	border-radius: var( --pawps-radius-xs );
}
.pawps-qr__submit,
.pawps-qr__add,
.pawps-qr__reset,
.pawps-codeform__submit {
	padding: 0.6rem 1.1rem;
	font-size: 0.95rem;
	border: 0;
	border-radius: var( --pawps-radius-xs );
	cursor: pointer;
	background: var( --pawps-accent );
	color: var( --pawps-accent-ink );
}
.pawps-qr__reset {
	background: transparent;
	color: inherit;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
}
.pawps-qr__error,
.pawps-codeform__error {
	margin: 0.75rem 0 0;
	color: #b00020;
	font-size: 0.9rem;
}
.pawps-qr__bar {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

/* Hinweis an Fotos, die der Fotograf erst nach der Bestellung bearbeitet.
   Informierend, nicht warnend: der Kunde soll wissen, warum es etwas laenger
   dauert - nicht abgeschreckt werden. */
.pawps-lb__unedited {
	margin: -0.2rem 0 1rem;
	padding: 0.6rem 0.8rem;
	/* Auf dem dunklen Lightbox-Panel: helle Kontur/Fuellung, sonst waere die
	   Box dunkel auf dunkel praktisch unsichtbar (wie .pawps-lb__tiers). */
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-left: 3px solid var( --pawps-accent );
	border-radius: var( --pawps-radius-sm );
	background: rgba( 255, 255, 255, 0.05 );
	font-size: 0.86rem;
	line-height: 1.45;
}

.pawps-cart-unedited {
	margin: 0.9rem 0 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --pawps-line );
	border-left: 3px solid var( --pawps-accent );
	border-radius: var( --pawps-radius-sm );
	background: var( --pawps-card );
	color: var( --pawps-ink );
	font-size: 0.92rem;
	line-height: 1.45;
}

/* Zielland an der Versandzeile: erklaerender Zusatz, deshalb leiser als das
   Label selbst. */
.pawps-shipping-country {
	color: var( --pawps-muted );
	font-weight: 400;
}

.pawps-shipping-country:empty {
	display: none;
}

/* Versand in das gewaehlte Land nicht moeglich - der Kunde muss das sehen,
   bevor er auf „Bestellen“ drueckt. */
.pawps-shipping-error {
	margin: 0.9rem 0 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --pawps-line );
	border-left: 3px solid #b3261e;
	border-radius: var( --pawps-radius-sm );
	background: var( --pawps-card );
	color: var( --pawps-ink );
	font-size: 0.92rem;
	line-height: 1.45;
}

/* Leerer Warenkorb: ruhige Aussage statt leerer Tabelle mit Null-Summen. */
.pawps-cart-empty {
	margin: 1.5rem 0;
	padding: 1.1rem 1.2rem;
	border: 1px solid var( --pawps-line );
	border-radius: var( --pawps-radius );
	background: var( --pawps-card );
	color: var( --pawps-muted );
	font-size: 1rem;
}

/* --- Kundenkarten (Schuelerausweise): Konfigurator ----------------------- */

/* Aufbau bewusst wie der Set-Konfigurator, damit beide Dialoge gleich wirken.
   Zweispaltig: links die Eingaben, rechts die serverseitig gerenderte
   Vorschau - so sieht der Kunde beim Tippen, was auf der Karte landet. */
.pawps-cardcfg {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba( 0, 0, 0, 0.6 );
}

.pawps-cardcfg__box {
	position: relative;
	width: min( 820px, 100% );
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	color: #111;
	border-radius: var( --pawps-radius );
	padding: 1.4rem 1.4rem 1.1rem;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.35 );
}

.pawps-cardcfg__close {
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	border: 0;
	background: none;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: #555;
}

.pawps-cardcfg__title {
	margin: 0 1.5rem 0.2rem 0;
	font-size: 1.15rem;
}

.pawps-cardcfg__hint {
	margin: 0 0 1rem;
	color: #555;
	font-size: 0.9rem;
}

.pawps-cardcfg__main {
	display: grid;
	/* Die Vorschau bekommt etwas mehr Breite als die Eingaben - sie ist der
	   Grund fuer den Dialog, und die Karte ist im Querformat entsprechend
	   platzhungrig. */
	grid-template-columns: minmax( 0, 0.85fr ) minmax( 0, 1.15fr );
	gap: 1.4rem;
	align-items: start;
}

/* Auf schmalen Schirmen untereinander - die Vorschau zuerst, damit sie beim
   Tippen auf dem Handy nicht unter der Tastatur verschwindet. */
@media ( max-width: 640px ) {
	.pawps-cardcfg__main {
		grid-template-columns: minmax( 0, 1fr );
	}

	.pawps-cardcfg__preview {
		order: -1;
	}
}

.pawps-cardfield {
	display: block;
	margin-bottom: 0.85rem;
}

.pawps-cardfield__name {
	display: block;
	margin-bottom: 0.2rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.pawps-cardfield__input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.45rem 0.6rem;
	border: 1px solid #bbb;
	border-radius: var( --pawps-radius-xs );
	font-size: 1rem;
}

.pawps-cardfield.is-invalid .pawps-cardfield__input {
	border-color: #c0392b;
}

.pawps-cardfield__error {
	display: block;
	min-height: 1.1em;
	margin-top: 0.15rem;
	color: #c0392b;
	font-size: 0.8rem;
}

.pawps-cardcfg__preview {
	margin: 0;
	text-align: center;
}

.pawps-cardcfg__preview img {
	max-width: 100%;
	height: auto;
	border-radius: var( --pawps-radius-xs );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.2 );
	background: #f3f3f3;
}

.pawps-cardcfg__previewnote {
	margin-top: 0.4rem;
	color: #666;
	font-size: 0.78rem;
}

.pawps-cardcfg__pages {
	display: flex;
	gap: 0.4rem;
	margin: 0.8rem 0 0;
}

.pawps-cardcfg__page {
	padding: 0.3rem 0.8rem;
	border: 1px solid #bbb;
	border-radius: var( --pawps-pill );
	background: #fff;
	cursor: pointer;
	font-size: 0.85rem;
}

.pawps-cardcfg__page.is-active {
	border-color: var( --pawps-accent );
	background: var( --pawps-accent );
	color: var( --pawps-accent-ink );
}

.pawps-cardcfg__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
	margin-top: 1rem;
}

.pawps-cardcfg__cancel,
.pawps-cardcfg__confirm {
	padding: 0.5rem 1rem;
	border-radius: var( --pawps-radius-xs );
	border: 1px solid #bbb;
	background: #fff;
	cursor: pointer;
}

.pawps-cardcfg__confirm {
	border-color: var( --pawps-accent );
	background: var( --pawps-accent );
	color: var( --pawps-accent-ink );
	font-weight: 600;
}

.pawps-cardcfg__confirm:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Angaben einer Kundenkarte im Warenkorb - der Kunde muss vor dem Bestellen
   pruefen koennen, was gedruckt wird. */
.pawps-basket-cardfields {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.1rem 0.5rem;
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	color: #555;
}

.pawps-basket-cardfields dt {
	font-weight: 600;
}

.pawps-basket-cardfields dd {
	margin: 0;
}