/**
 * Mobil-Durchgang. Wird zuletzt geladen und überschreibt gezielt.
 * Breakpoints: 640 / 780 (SiteOrigin-Umbruch) / 900.
 */

/* ------------------------------------------------ Hero 780–899 px ------ */
/* SiteOrigin bricht Zeilen erst unter 780 px um. Die Hero-Korrekturen dürfen
   nur greifen, wenn die Zellen wirklich untereinander stehen. */
@media (min-width: 780px) and (max-width: 899px) {
	.pp-row--hero .panel-grid-cell:first-child { padding-right: var(--pp-space-6); }
	.pp-row--hero .panel-grid-cell:last-child { margin-left: 0 !important; }
}

@media (max-width: 779px) {
	/* SiteOrigin setzt unter jede umgebrochene Zelle 30 px Abstand. */
	.pp-row > .panel-grid-cell { margin-bottom: 0 !important; }
	.pp-row:not(.pp-row--trust):not(.pp-row--logos):not(.pp-row--hero) > .panel-grid-cell + .panel-grid-cell { margin-top: var(--pp-gap-cards) !important; }

	.pp-row--hero .panel-grid-cell:first-child {
		padding-block: var(--pp-space-8) var(--pp-space-6) !important;
		padding-right: var(--pp-gutter) !important;
	}
	/* Zeile hat links Gutter, rechts 0: Bild um den Gutter nach links ziehen
	   und genauso viel breiter machen, sonst bleibt rechts ein Streifen. */
	.pp-row--hero .panel-grid-cell:last-child {
		min-height: 0;
		aspect-ratio: 4 / 3;
		width: calc(100% + var(--pp-gutter)) !important;
		max-width: none !important;
		margin-left: calc(-1 * var(--pp-gutter)) !important;
	}
	.pp-row--hero h1 { max-width: none; }
	.pp-cta-row .pp-btn { flex: 1 1 auto; justify-content: center; }

	/* Vorteilsleiste 2 × 2 statt vier Zeilen untereinander */
	.pp-row--trust {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pp-space-3) var(--pp-space-4);
	}
	.pp-row--trust > .panel-grid-cell {
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
	}
	.pp-trust { font-size: 0.82rem; line-height: 1.35; }

	/* Referenzlogos 2 × 2 */
	.pp-row--logos {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pp-space-3);
	}
	.pp-row--logos > .panel-grid-cell { width: auto !important; }
	.pp-reflogo { height: 72px !important; }

	/* Ratgeber: Inhaltsverzeichnis einklappbar kompakt */
	.pp-toc { padding: var(--pp-space-4); }
}

/* ------------------------------------------------------ Header < 640 --- */
@media (max-width: 639px) {
	:root {
		--pp-logo-h:       40px;
		--pp-logo-h-small: 36px;
		--pp-header-h:     64px;
	}

	.pp-header__inner { gap: var(--pp-space-2); }
	.pp-header__actions { gap: 6px; }

	/* Suche steckt im Off-Canvas-Menü – im Header spart das 50 px. */
	.pp-header__actions .pp-search-toggle { display: none; }

	.pp-priceswitch { order: 0; }
	.pp-priceswitch__opt { padding: 0.4rem 0.5rem; font-size: 0.68rem; }

	.pp-breadcrumbs { padding-block: var(--pp-space-3); }
	/* Lange Pfade nicht umbrechen, sondern seitlich wischen. */
	.pp-breadcrumbs ol { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
	.pp-breadcrumbs ol::-webkit-scrollbar { display: none; }

	.pp-footer__cols { gap: var(--pp-space-6); }
}

/* Header ohne Menü (kein Burger): Suche trotzdem anbieten. */
@media (max-width: 639px) {
	.pp-header__actions:not(:has(.pp-burger)) .pp-search-toggle { display: grid; }
}

/* ------------------------------------------------- Produktraster < 640 - */
@media (max-width: 639px) {
	ul.products,
	.pp-wc-cart__cross ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--pp-space-3);
	}

	.pp-wc-card { border-radius: var(--pp-radius-s); }
	.pp-wc-card__body { padding: var(--pp-space-3); }
	.pp-wc-card__title { font-size: 0.85rem; }
	.pp-wc-card__foot { padding-top: var(--pp-space-3); }
	.pp-wc-card__price .price,
	.pp-wc-card__price > .amount { font-size: 1.05rem; }
	.pp-wc-card__price .wc-gzd-additional-info,
	.pp-wc-card__price .wc-gzd-additional-info-loop { font-size: 0.68rem; }

	.pp-wc-card__actions { margin-top: var(--pp-space-3); }
	.pp-wc-card__actions a.button,
	.pp-wc-card__actions button.button { padding: 0 var(--pp-space-2) !important; font-size: 0.78rem; }

	/* Schnellansicht auf dem Handy weglassen: die Produktseite ist einen Tipp entfernt. */
	.pp-wc-card__actions .pp-quickview-trigger { display: none; }

	/* Filter: eine wischbare Zeile pro Gruppe */
	.pp-wc-filters { gap: var(--pp-space-3); padding-block: var(--pp-space-3); }
	.pp-wc-filters__group { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; padding-bottom: 2px; }
	.pp-wc-filters__group::-webkit-scrollbar { display: none; }
	.pp-wc-filters__group legend { float: none; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
	.pp-chip { flex: 0 0 auto; min-height: var(--pp-tap); }
}

/* ------------------------------------------------ Produktseite < 640 --- */
@media (max-width: 639px) {
	.single-product .product_title { font-size: 1.6rem; }
	.single-product .flex-control-thumbs { grid-template-columns: repeat(5, 1fr); }

	/* Kaufleiste klebt unten – nur bei einfachen Produkten, Variantenformulare
	   sind zu hoch dafür. */
	.single-product form.variations_form.cart { position: static; }
	.single-product form.cart:not(.variations_form) {
		margin-inline: calc(-1 * var(--pp-gutter));
		padding-inline: var(--pp-gutter);
		border-top: var(--pp-border) solid var(--pp-line);
		box-shadow: 0 -8px 20px rgba(45, 42, 43, 0.06);
	}
}

/* ------------------------------------------------------ Schnellansicht - */
@media (max-width: 639px) {
	.pp-quickview__dialog {
		top: auto;
		bottom: 0;
		left: 0;
		transform: none;
		width: 100%;
		max-height: 92vh;
		border-radius: var(--pp-radius-l) var(--pp-radius-l) 0 0;
	}
	.pp-qv__media img { aspect-ratio: 4 / 3; height: auto; }
}

/* --------------------------------------------------- Warenkorb < 640 --- */
@media (max-width: 639px) {
	.pp-wc-cart .actions .coupon { max-width: none; flex-basis: 100%; }
	.woocommerce .pp-wc-cart .actions button[name="update_cart"] { width: 100%; }
	.cart_totals { padding: var(--pp-space-4); }
	.cart_totals table.shop_table th { width: auto; }
	.pp-wc-cart__cross .cross-sells > h2 { font-size: 1.25rem; }
}

/* ------------------------------------------------------ Kasse < 640 ---- */
@media (max-width: 639px) {
	.woocommerce-checkout .form-row { margin-bottom: var(--pp-space-3); }
	.woocommerce-checkout #payment .payment_box { padding: var(--pp-space-3); }
	.woocommerce-checkout #place_order { width: 100%; }
}