/* =========================================================================
   PP Modern Product Page — Apple-inspiriert, CI-Farben aus Logo
   Farben werden per :root Inline-Style gesetzt (Fallbacks hier).
   ========================================================================= */

.pp-wrap {
	--pp-blue: #00A3FF;
	--pp-blue-dark: #0033A0;
	--pp-green: #6FBE44;
	--pp-green-dark: #4E9E2E;
	--pp-ink: #1d1d1f;
	--pp-gray: #6e6e73;
	--pp-line: #e6e6ea;
	--pp-bg-soft: #f5f6f8;
	--pp-radius: 22px;
	--pp-radius-sm: 14px;
	--pp-shadow: 0 10px 40px rgba(15, 23, 42, .08);
	--pp-shadow-hover: 0 18px 60px rgba(15, 23, 42, .14);
	--pp-ease: cubic-bezier(.22, 1, .36, 1);

	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--pp-ink);
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 20px 40px;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}

.pp-wrap *,
.pp-sticky *,
.pp-lightbox * {
	box-sizing: border-box;
}

/* ---------- Grid ---------- */
.pp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 56px;
	align-items: start;
	padding: 20px 0 10px;
}

@media (max-width: 900px) {
	.pp-grid { grid-template-columns: 1fr; gap: 28px; }
	.pp-wrap { padding: 8px 16px 32px; }
}

/* =========================================================================
   Galerie
   ========================================================================= */
.pp-col-media { position: sticky; top: 90px; }
@media (max-width: 900px) { .pp-col-media { position: static; } }

.pp-gallery { position: relative; }

.pp-badges {
	position: absolute;
	top: 16px; left: 16px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
.pp-badge {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .2px;
	color: rgba(255,255,255,.92);
	padding: 7px 13px;
	border-radius: 100px;
	backdrop-filter: saturate(140%) blur(6px);
	box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
/* Galerie-Badge (z. B. "Research Purpose Only!") dezent in Grau + transparent */
.pp-badge--blue,
.pp-badge--green {
	background: rgba(60, 60, 67, .42);
	color: rgba(255,255,255,.92);
}

.pp-gallery-main {
	position: relative;
	background: var(--pp-bg-soft);
	border-radius: var(--pp-radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-in;
}
.pp-main-img {
	width: 100%; height: 100%;
	object-fit: contain;
	transition: transform .6s var(--pp-ease);
	will-change: transform;
}
.pp-gallery-main:hover .pp-main-img { transform: scale(1.06); }
.pp-noimg { color: var(--pp-gray); font-weight: 600; font-size: 20px; }

.pp-zoom-btn {
	position: absolute;
	right: 14px; bottom: 14px;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.85);
	color: var(--pp-ink);
	display: grid; place-items: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.12);
	transition: transform .25s var(--pp-ease), background .25s;
}
.pp-zoom-btn:hover { transform: scale(1.08); background:#fff; }

.pp-thumbs {
	display: flex;
	gap: 12px;
	margin-top: 16px;
	flex-wrap: wrap;
}
.pp-thumb {
	width: 76px; height: 76px;
	border-radius: var(--pp-radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--pp-bg-soft);
	padding: 4px;
	cursor: pointer;
	transition: border-color .2s, transform .2s var(--pp-ease);
}
.pp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pp-thumb:hover { transform: translateY(-2px); }
.pp-thumb.is-active { border-color: var(--pp-blue); }

/* =========================================================================
   Buy-Box
   ========================================================================= */
.pp-buybox { padding-top: 6px; }

.pp-title {
	font-size: clamp(31px, 4.2vw, 46px);
	font-weight: 900;
	letter-spacing: -.025em;
	line-height: 1.06;
	margin: 0 0 7px;
}
.pp-title-opts {
	font-size: 16px;
	font-weight: 400;
	color: var(--pp-gray);
	letter-spacing: 0;
	white-space: nowrap;
	margin-left: 4px;
}

/* Mini-Überschrift + Badges ÜBER dem Titel */
.pp-tags-block { margin: 0 0 16px; }
.pp-tags-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 10px;
}
.pp-tags-head-line {
	flex: 0 0 34px;
	height: 1px;
	background: var(--pp-line);
}
.pp-tags-head-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--pp-blue-dark);
	white-space: nowrap;
}

/* Kompakte Badges, zentriert, mit laufendem Verlauf + pulsierendem Punkt */
.pp-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
}
.pp-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	padding: 6px 14px;
	border-radius: 100px;
	line-height: 1.2;
	box-shadow: 0 3px 10px rgba(15,23,42,.14);
	background-size: 200% 100%;
	animation: pp-shimmer 3.5s linear infinite;
}
.pp-tag--green { background-image: linear-gradient(120deg, var(--pp-green), var(--pp-green-dark), var(--pp-green)); }
.pp-tag--blue { background-image: linear-gradient(120deg, var(--pp-blue), var(--pp-blue-dark), var(--pp-blue)); }
.pp-tag-dot {
	width: .5em; height: .5em;
	border-radius: 50%;
	background: #fff;
	position: relative;
	flex: none;
}
.pp-tag-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #fff;
	animation: pp-pulse-white 1.6s ease-out infinite;
}
@keyframes pp-shimmer {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
@keyframes pp-pulse-white {
	0% { transform: scale(1); opacity: .7; }
	70% { transform: scale(2.6); opacity: 0; }
	100% { opacity: 0; }
}

/* Lieferstatus mit pulsierendem Punkt */
.pp-stock {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	margin: 10px 0 20px;
}
.pp-stock--in { color: var(--pp-green-dark); }
.pp-stock--out { color: var(--pp-gray); }
.pp-stock-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--pp-green);
	position: relative;
	flex: none;
}
.pp-stock--out .pp-stock-dot { background: var(--pp-gray); }
.pp-stock--in .pp-stock-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--pp-green);
	animation: pp-pulse 1.6s ease-out infinite;
}
@keyframes pp-pulse {
	0% { transform: scale(1); opacity: .7; }
	70% { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

.pp-price {
	font-size: 26px;
	font-weight: 650;
	letter-spacing: -.01em;
	color: var(--pp-ink);
}
.pp-price del { color: var(--pp-gray); font-weight: 400; font-size: .8em; margin-right: 8px; }
.pp-price ins { text-decoration: none; }
.pp-price .amount { white-space: nowrap; }
.pp-price-tax {
	font-size: 14px;
	font-weight: 400;
	color: var(--pp-gray);
	margin-left: 8px;
	white-space: nowrap;
}

.pp-price-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 10px 0 22px;
	color: var(--pp-gray);
	font-size: 14px;
}
.pp-note { display: inline-flex; align-items: center; gap: 6px; }
.pp-note--ship { color: var(--pp-green-dark); font-weight: 500; }

.pp-short {
	position: relative;
	font-size: 16px;
	line-height: 1.6;
	color: #3a3a3d;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--pp-line);
}
.pp-short p { margin: 0 0 .7em; }
.pp-short p:last-child { margin-bottom: 0; }

/* Auf 2 Zeilen gekürzt, mit weichem Verlauf als Hinweis. */
.pp-short.is-clamped { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp-short.is-clamped .pp-short-inner {
	max-height: 3.2em; /* 2 Zeilen bei line-height 1.6 */
	overflow: hidden;
	transition: max-height .4s var(--pp-ease);
}
.pp-short.is-clamped.is-open .pp-short-inner { max-height: 80em; }
.pp-short.is-clamped::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: 24px;
	height: 2.1em;
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%);
	pointer-events: none;
	opacity: 1;
	transition: opacity .3s ease;
}
.pp-short.is-clamped.is-open::after { opacity: 0; }
.pp-short.is-clamped:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 4px; border-radius: 6px; }

/* ---------- Native WooCommerce Add-to-Cart, Apple-Style ---------- */
/* Native "Vorrätig"-Text ausblenden — wir zeigen eigenen Lieferstatus. */
.pp-addtocart .stock.in-stock,
.pp-addtocart .woocommerce-variation-availability .in-stock { display: none; }
.pp-addtocart .stock.out-of-stock,
.pp-addtocart .woocommerce-variation-availability .out-of-stock { font-size: 14px; color: var(--pp-gray); }

/* Varianten: Überschrift ÜBER den Optionen statt daneben */
.pp-addtocart table.variations,
.pp-addtocart table.variations tbody,
.pp-addtocart table.variations tr,
.pp-addtocart table.variations th,
.pp-addtocart table.variations td {
	display: block;
	width: 100%;
	border: none;
	vertical-align: top;
}
.pp-addtocart table.variations { margin: 0 0 8px; }
.pp-addtocart table.variations tr { margin-bottom: 18px; }
.pp-addtocart table.variations th.label { padding: 0 0 8px; text-align: left; }
.pp-addtocart table.variations td.value { padding: 0; }
.pp-addtocart table.variations th.label label {
	font-weight: 700;
	font-size: 13px;
	color: var(--pp-ink);
	margin: 0;
}

/* Standard-<select> versteckt, wenn Pills aktiv (JS ergänzt .pp-has-pills) */
.pp-addtocart .value { position: relative; }
.pp-addtocart select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 13px 42px 13px 16px;
	border: 1px solid var(--pp-line);
	border-radius: 12px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
	font-size: 15px;
	color: var(--pp-ink);
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
}
.pp-addtocart select:focus {
	outline: none;
	border-color: var(--pp-blue);
	box-shadow: 0 0 0 3px rgba(21,159,217,.15);
}
.pp-has-pills select.pp-hidden-select { position: absolute; opacity: 0; pointer-events: none; height: 0; }

/* Varianten-Pills — Karten-Look wie WPC-Swatches (Reihe 1), mit grünem Haken */
.pp-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.pp-pill {
	position: relative;
	border: 1.5px solid var(--pp-line);
	background: #fff;
	border-radius: 14px;
	padding: 12px 18px;
	min-width: 68px;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--pp-ink);
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(15,23,42,.10);
	transition: border-color .2s var(--pp-ease), transform .15s var(--pp-ease), box-shadow .2s, color .2s;
}
.pp-pill:hover {
	transform: translateY(-2px);
	border-color: var(--pp-blue);
	box-shadow: 0 8px 20px rgba(15,23,42,.14);
}
.pp-pill.is-active {
	border-color: var(--pp-blue);
	color: var(--pp-blue-dark);
	box-shadow: 0 0 0 1px var(--pp-blue), 0 8px 20px rgba(21,159,217,.16);
}
/* Grüner Haken oben rechts bei Auswahl */
.pp-pill.is-active::after {
	content: "";
	position: absolute;
	top: -8px; right: -8px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--pp-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.pp-pill[disabled] { opacity: .4; cursor: not-allowed; }

/* Ausverkaufte Dosierung: ausgegraut + Tooltip beim Hover */
.pp-pill--oos {
	opacity: .5;
	cursor: not-allowed;
	color: var(--pp-gray);
	box-shadow: none;
}
.pp-pill--oos .pp-tag-dot { display: none; }
.pp-pill--oos:hover {
	transform: none;
	border-color: var(--pp-line);
	box-shadow: none;
}
.pp-pill--oos::after {
	content: attr(data-oos);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--pp-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	padding: 5px 9px;
	border-radius: 7px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
	z-index: 6;
}
.pp-pill--oos::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--pp-ink);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease;
	z-index: 6;
}
.pp-pill--oos:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.pp-pill--oos:hover::before { opacity: 1; }

/* WPC-Swatches: ausverkauft ausgrauen */
.pp-addtocart .variable-item.disabled,
.pp-addtocart .variable-item.out-of-stock {
	opacity: .5 !important;
	box-shadow: none !important;
}

.pp-addtocart .reset_variations {
	display: inline-block;
	font-size: 13px;
	color: var(--pp-gray);
	margin-top: 6px;
}

/* ---------- Vorhandene Variation-Swatches (Theme/Plugin) an CI angleichen ---------- */
.pp-addtocart .variable-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 2px 0 6px;
	padding: 0;
	list-style: none;
}
.pp-addtocart .variable-item,
.pp-addtocart li.variable-item {
	margin: 0 !important;
	border: 1.5px solid var(--pp-line) !important;
	border-radius: 14px !important;
	padding: 9px 14px !important;
	min-width: auto !important;
	min-height: auto !important;
	box-shadow: 0 4px 12px rgba(15,23,42,.10) !important;
	font-weight: 600;
	color: var(--pp-ink);
	background: #fff !important;
	transition: border-color .2s var(--pp-ease), transform .15s var(--pp-ease), box-shadow .2s;
}
.pp-addtocart .variable-item:hover {
	transform: translateY(-2px);
	border-color: var(--pp-blue) !important;
	box-shadow: 0 8px 20px rgba(15,23,42,.14) !important;
}
.pp-addtocart .variable-item.selected,
.pp-addtocart .variable-item[aria-checked="true"] {
	border-color: var(--pp-blue) !important;
	box-shadow: 0 0 0 2px var(--pp-blue), 0 8px 20px rgba(0,163,255,.16) !important;
	color: var(--pp-blue-dark);
}
.pp-addtocart .variable-item .variable-item-span { padding: 0 !important; font-weight: 600; }

.pp-addtocart .woocommerce-variation-price { margin: 6px 0 14px; font-size: 22px; font-weight: 650; }

/* Buy-Box gestapelt: Zubehör → Menge → Preis (zwischen Linien) → Button. */
.pp-addtocart form.cart:not(.variations_form),
.pp-addtocart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin-top: 20px;
}
.pp-qty-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--pp-ink);
	margin: 0 0 8px;
}
.pp-addtocart .quantity {
	align-self: flex-start;
	width: clamp(132px, 40vw, 158px);
	max-width: 100%;
	height: 52px;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--pp-line);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	padding: 0 6px;
}

/* Preis zwischen zwei Linien */
.pp-buy-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 20px 0 16px;
	padding: 14px 2px;
	border-top: 1px solid var(--pp-line);
	border-bottom: 1px solid var(--pp-line);
}
.pp-buy-price-lbl { font-size: 15px; font-weight: 600; color: var(--pp-gray); }
.pp-buy-price-val { font-size: 24px; font-weight: 750; color: var(--pp-ink); letter-spacing: -.01em; }
.pp-buy-price-val del { color: var(--pp-gray); font-weight: 400; font-size: .75em; margin-right: 6px; }
.pp-buy-price-val ins { text-decoration: none; }
/* Native Variations-Anzeige (Preis/Verfügbarkeit) ausblenden –
   wir zeigen stattdessen unsere eigene Preis-Zeile. */
.pp-addtocart .woocommerce-variation-price,
.pp-addtocart .woocommerce-variation.single_variation,
.pp-addtocart .single_variation { display: none !important; }

/* ---------- Zubehör-Optionen ---------- */
.pp-addons { display: flex; flex-direction: column; gap: 18px; margin: 0 0 20px; }
.pp-addon-title { font-size: 13px; font-weight: 700; color: var(--pp-ink); margin-bottom: 8px; }
.pp-addon-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-addon-opt { display: inline-flex; cursor: pointer; }
.pp-addon-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-addon-pill {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1.5px solid var(--pp-line);
	background: #fff;
	border-radius: 12px;
	padding: 11px 15px;
	font-size: 14px; font-weight: 600;
	color: var(--pp-ink);
	transition: border-color .2s, box-shadow .2s, transform .14s var(--pp-ease), color .2s;
}
.pp-addon-opt:hover .pp-addon-pill { border-color: var(--pp-blue); transform: translateY(-1px); }
.pp-addon-opt input:checked + .pp-addon-pill {
	border-color: var(--pp-blue);
	color: var(--pp-blue-dark);
	box-shadow: 0 0 0 2px var(--pp-blue), 0 8px 18px rgba(0,163,255,.14);
}
.pp-addon-price { font-weight: 700; color: var(--pp-green-dark); white-space: nowrap; }
.pp-addon-free {
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 11px;
	background: rgba(111,190,68,.14);
	color: var(--pp-green-dark);
	padding: 3px 8px;
	border-radius: 100px;
}
.pp-addon-opt.is-oos { cursor: not-allowed; }
.pp-addon-opt.is-oos .pp-addon-pill { opacity: .45; }
.pp-addtocart .quantity input.qty {
	flex: 1 1 auto;
	align-self: stretch;
	width: auto;
	min-width: 0;
	height: 100%;
	border: none;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: none;
	background: transparent;
}
.pp-addtocart .quantity input.qty::-webkit-outer-spin-button,
.pp-addtocart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-qty-btn {
	width: 44px; height: 50px;
	border: none; background: transparent;
	font-size: 22px; color: var(--pp-gray);
	cursor: pointer; line-height: 1;
	transition: color .2s, background .2s;
}
.pp-qty-btn:hover { color: var(--pp-blue); background: var(--pp-bg-soft); }

/* Vom Theme gelieferte +/- Buttons ebenfalls an den runden Look angleichen */
.pp-addtocart .quantity .plus,
.pp-addtocart .quantity .minus,
.pp-addtocart .quantity button,
.pp-addtocart .quantity [class*="plus"],
.pp-addtocart .quantity [class*="minus"] {
	width: 44px; height: 50px;
	border: none !important;
	background: transparent !important;
	color: var(--pp-gray) !important;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 !important;
	transition: color .2s, background .2s;
}
.pp-addtocart .quantity .plus:hover,
.pp-addtocart .quantity .minus:hover,
.pp-addtocart .quantity button:hover {
	color: var(--pp-blue) !important;
	background: var(--pp-bg-soft) !important;
}

/* Einheitlicher CTA-Look für Warenkorb-Button UND Sticky-Bar.
   Hohe Spezifität + !important, um Theme-Overrides zu neutralisieren,
   damit beide Buttons exakt dieselbe CI-Farbe zeigen. */
.pp-wrap .pp-addtocart form.cart button.single_add_to_cart_button,
.pp-wrap .pp-addtocart button.single_add_to_cart_button,
.pp-sticky .pp-btn--primary {
	flex: 1 1 auto;
	min-width: 200px;
	border: none !important;
	background: linear-gradient(135deg, var(--pp-blue), var(--pp-blue-dark)) !important;
	background-color: var(--pp-blue) !important;
	color: #fff !important;
	font-size: 22px;
	font-weight: 650;
	letter-spacing: .2px;
	line-height: 1.2;
	padding: 16px 28px;
	border-radius: 14px !important;
	cursor: pointer;
	text-shadow: none;
	box-shadow: 0 8px 24px rgba(0,51,160,.28) !important;
	transition: transform .18s var(--pp-ease), box-shadow .25s, filter .2s;
}
.pp-wrap .pp-addtocart button.single_add_to_cart_button:hover,
.pp-sticky .pp-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(21,159,217,.42) !important;
	filter: brightness(1.04);
}
.pp-wrap .pp-addtocart button.single_add_to_cart_button:active,
.pp-sticky .pp-btn--primary:active { transform: translateY(0); }
.pp-wrap .pp-addtocart .single_add_to_cart_button.disabled { opacity: .5; box-shadow: none !important; }
/* Haupt-Warenkorb-Button über die volle Breite (unter der Preis-Zeile). */
.pp-wrap .pp-addtocart button.single_add_to_cart_button {
	flex: 0 0 auto;
	min-width: 0;
	width: 100%;
	min-height: 58px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
	white-space: nowrap;
}

/* COA-Button */
.pp-coa {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 20px;
	padding: 12px 20px;
	border-radius: 14px;
	border: 1.5px solid var(--pp-green);
	color: var(--pp-green-dark);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	transition: background .2s, transform .18s var(--pp-ease);
}
.pp-coa:hover { background: rgba(111,190,68,.08); transform: translateY(-2px); }

/* Kompakte Variante unter dem Warenkorb-Button */
.pp-coa--sm {
	margin-top: 14px;
	padding: 8px 14px;
	font-size: 13px;
	border-width: 1px;
	border-radius: 10px;
	gap: 7px;
}

/* Rabatt-Slot — transparenter Container, damit die Karten deines
   [pp_staffelpreise]-Shortcodes ohne "Box-in-Box" stehen. */
.pp-discount {
	margin-top: 26px;
	animation: pp-fade-up .5s var(--pp-ease) both;
}
.pp-discount-head {
	font-size: 17px; font-weight: 700; margin-bottom: 12px;
	display: inline-flex; align-items: center; gap: 8px;
}
.pp-discount-head::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%;
	background: var(--pp-green);
}
.pp-discount-sub { font-size: 13px; color: var(--pp-gray); margin: 12px 0 0; }

/* Generische Belebung der Rabatt-Karten des Fremd-Shortcodes */
.pp-discount-body > * { transition: transform .2s var(--pp-ease), box-shadow .25s; }
.pp-discount-body [class*="tier"]:hover,
.pp-discount-body [class*="stufe"]:hover,
.pp-discount-body li:hover { transform: translateY(-2px); }

/* =========================================================================
   Sektionen allgemein
   ========================================================================= */
.pp-section {
	margin-top: 64px;
	scroll-margin-top: 100px;
}
.pp-h2 {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 24px;
}

/* Spezifikationen im Tab: schmal, untereinander */
.pp-specs-list { display: flex; flex-direction: column; }
.pp-spec-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--pp-line);
}
.pp-spec-row:last-child { border-bottom: none; }
.pp-spec-k {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--pp-gray);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.pp-spec-v {
	flex: 1 1 auto;
	text-align: right;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--pp-ink);
	word-break: break-word;
}
@media (max-width: 520px) {
	.pp-spec-row { flex-direction: column; gap: 3px; padding: 10px 0; }
	.pp-spec-v { text-align: left; }
}

/* Beschreibung */
.pp-desc-inner {
	font-size: 17px;
	color: #33333a;
	line-height: 1.75;
	max-width: 820px;
}
.pp-desc-inner h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 40px 0 14px; }
.pp-desc-inner h3 { font-size: 20px; font-weight: 650; margin: 30px 0 10px; }
.pp-desc-inner p { margin: 0 0 18px; }
.pp-desc-inner a { color: var(--pp-blue-dark); text-decoration: none; border-bottom: 1px solid rgba(21,159,217,.35); }
.pp-desc-inner a:hover { border-color: var(--pp-blue); }
.pp-desc-inner table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.pp-desc-inner th, .pp-desc-inner td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--pp-line); }
.pp-desc-inner img { max-width: 100%; height: auto; border-radius: var(--pp-radius-sm); }

/* FAQ Akkordeon */
/* Tabs: jede Sektion eine eigenständige Karte mit Abstand – kein Rahmen,
   sondern eine weiche Schattierung für den 3D-Effekt. */
.pp-accordion {
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	overflow: visible;
	max-width: 860px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
/* Schatten bewusst eng gehalten, damit jeder Tab einzeln plastisch wirkt
   und die Schatten benachbarter Tabs nicht ineinanderlaufen. */
.pp-acc-item {
	background: rgb(248, 250, 252);
	border: none !important;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16,40,80,.10), 0 3px 6px rgba(16,40,80,.07);
	transition: box-shadow .25s, transform .18s var(--pp-ease);
}
.pp-acc-item:hover { box-shadow: 0 1px 3px rgba(16,40,80,.12), 0 5px 10px rgba(16,40,80,.09); }
.pp-acc-item[open] { box-shadow: 0 2px 4px rgba(16,40,80,.13), 0 6px 12px rgba(16,40,80,.10); }
.pp-acc-q {
	list-style: none;
	background: transparent;
	padding: 18px 20px;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--pp-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	transition: background .2s, color .2s;
	-webkit-tap-highlight-color: transparent;
}
.pp-acc-q::-webkit-details-marker { display: none; }
.pp-acc-q::marker { content: ""; }
/* Überschriften in den Tabs (SEO-Struktur) optisch wie normaler Text */
.pp-acc-h {
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}
.pp-acc-q:hover { background: #eef2f7; }
.pp-acc-q svg { flex: none; transition: transform .3s var(--pp-ease); color: var(--pp-blue); }
/* Geöffneter Tab in CI-Blau */
.pp-acc-item[open] > .pp-acc-q {
	background: linear-gradient(135deg, var(--pp-blue), var(--pp-blue-dark));
	color: #fff;
}
.pp-acc-item[open] > .pp-acc-q svg { transform: rotate(180deg); color: #fff; }
.pp-acc-item[open] > .pp-acc-q:hover { filter: brightness(1.04); background: linear-gradient(135deg, var(--pp-blue), var(--pp-blue-dark)); }

/* Hervorgehobener Tab (Mengenrabatt): immer im CI-Blau-Verlauf */
.pp-acc-item--accent { border: none !important; box-shadow: 0 1px 3px rgba(0,51,160,.20), 0 5px 10px rgba(0,51,160,.16); }
.pp-acc-item--accent > .pp-acc-q {
	background: linear-gradient(135deg, var(--pp-blue), var(--pp-blue-dark));
	color: #fff;
}
.pp-acc-item--accent > .pp-acc-q svg { color: #fff; }
.pp-acc-item--accent > .pp-acc-q:hover {
	filter: brightness(1.04);
	background: linear-gradient(135deg, var(--pp-blue), var(--pp-blue-dark));
}
.pp-acc-a { overflow: hidden; animation: pp-acc-open .3s var(--pp-ease); }
.pp-acc-a-inner { padding: 18px 20px 20px; color: #4a4a50; font-size: 15.5px; line-height: 1.7; background: #fff; }

/* Info-Tabs: Listen + RUO-Absätze */
.pp-tab-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.pp-tab-list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	font-size: 15.5px;
	line-height: 1.6;
	list-style: none !important;
}
/* Theme-Bullets sicher entfernen – nur unsere grünen Punkte */
.pp-tab-list li::marker { content: "" !important; color: transparent !important; font-size: 0 !important; }
.pp-tab-list li::before {
	content: "";
	position: absolute;
	left: 2px; top: .62em;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--pp-green);
}
.pp-tab-ruo p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; }
.pp-tab-ruo p:last-child { margin-bottom: 0; }
@keyframes pp-acc-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Trust-Leiste */
.pp-trustbar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 64px;
	padding: 30px 24px;
	background: var(--pp-bg-soft);
	border-radius: var(--pp-radius);
}
.pp-trust { display: flex; align-items: center; gap: 12px; justify-content: center; font-weight: 600; font-size: 15px; }
.pp-trust svg { color: var(--pp-green-dark); flex: none; }
@media (max-width: 720px) { .pp-trustbar { grid-template-columns: 1fr; text-align: left; } .pp-trust { justify-content: flex-start; } }

/* Ähnliche Produkte */
/* Ähnliche Produkte – gleiches Karten-Design wie [pp_products] */
.pp-related-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
@media (min-width: 620px) { .pp-related-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 900px) { .pp-related-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.pp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: none;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(16,40,80,.07);
	transition: transform .2s var(--pp-ease), box-shadow .26s;
}
.pp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16,40,80,.13); }
/* Ausverkauft unten rechts im Bild – kollidiert nicht mit anderen Badges */
.pp-card-oos {
	position: absolute; bottom: 9px; right: 9px; top: auto; z-index: 3;
	font-size: 10.5px; font-weight: 700; color: #fff;
	padding: 4px 9px; border-radius: 100px;
	background: rgba(45,45,50,.72);
}
.pp-card-img {
	position: relative;
	display: grid; place-items: center;
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle at 50% 42%, #f2f6fc, var(--pp-bg-soft));
	padding: 12px;
}
.pp-card-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s var(--pp-ease); }
.pp-card:hover .pp-card-img img { transform: scale(1.05); }
.pp-card.is-oos .pp-card-img img { opacity: .5; filter: grayscale(.3); }

.pp-card-body { padding: 11px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.pp-card-title { font-size: 14.5px; font-weight: 700; color: var(--pp-ink); text-decoration: none; line-height: 1.2; }
.pp-card-title:hover { color: var(--pp-blue-dark); }
.pp-card-hint { font-size: 11.5px; color: var(--pp-gray); margin-top: 3px; }
.pp-card-foot {
	margin-top: auto;
	padding-top: 11px;
	border-top: 1px solid var(--pp-line);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
@media (min-width: 620px) {
	.pp-card-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
	.pp-card-foot .pp-card-price { flex: 1 1 auto; min-width: 0; }
	.pp-card-foot .pp-card-btn { flex: none; }
}
.pp-card-price { display: block; font-size: 14px; font-weight: 700; color: var(--pp-ink); line-height: 1.25; }
.pp-card-price del { color: var(--pp-gray); font-weight: 400; font-size: .8em; margin-right: 4px; }
.pp-card-price ins { text-decoration: none; }
.pp-card-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 5px;
	padding: 8px 14px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--pp-blue), var(--pp-blue-dark));
	color: #fff !important;
	font-size: 12px; font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 5px 14px rgba(0,51,160,.22);
	transition: transform .16s var(--pp-ease), box-shadow .22s, filter .2s;
}
.pp-card-btn svg { flex: none; transition: transform .18s var(--pp-ease); }
.pp-card:hover .pp-card-btn svg { transform: translateX(3px); }
.pp-card-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(0,51,160,.30); filter: brightness(1.04); }

/* =========================================================================
   Sticky Buy-Bar
   ========================================================================= */
.pp-sticky {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9990;
	transform: translateY(120%);
	transition: transform .4s var(--pp-ease);
	background: rgba(255,255,255,.82);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-top: 1px solid var(--pp-line);
	box-shadow: 0 -8px 30px rgba(0,0,0,.06);
}
.pp-sticky.is-visible { transform: translateY(0); }
.pp-sticky-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.pp-sticky-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pp-sticky-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: contain; background: var(--pp-bg-soft); flex: none; }
.pp-sticky-name { display: block; font-weight: 650; font-size: 15px; line-height: 1.2; }
.pp-sticky-price { display: block; font-size: 14px; color: var(--pp-gray); }
.pp-sticky-price .amount { color: var(--pp-ink); font-weight: 600; }
.pp-sticky-btn { flex: none; min-width: 0; padding: 12px 26px; }

.pp-sticky-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.pp-sticky-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--pp-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}
.pp-sticky-qty-btn {
	width: 40px; height: 46px;
	border: none; background: transparent;
	font-size: 20px; color: var(--pp-gray);
	cursor: pointer; line-height: 1;
	transition: color .2s, background .2s;
}
.pp-sticky-qty-btn:hover { color: var(--pp-blue); background: var(--pp-bg-soft); }
.pp-sticky-qty-input {
	width: 46px; border: none; text-align: center;
	font-size: 15px; font-weight: 600; background: transparent;
	-moz-appearance: textfield; padding: 12px 0;
}
.pp-sticky-qty-input::-webkit-outer-spin-button,
.pp-sticky-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 620px) {
	.pp-sticky-name { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.pp-sticky-price { display: none; }
	.pp-sticky-btn { padding: 12px 16px; font-size: 14px; }
	.pp-sticky-actions { gap: 8px; }
	.pp-sticky-qty-btn { width: 34px; height: 44px; }
	.pp-sticky-qty-input { width: 34px; }
}

/* =========================================================================
   Lightbox
   ========================================================================= */
.pp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(10,12,16,.86);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
	padding: 30px;
}
.pp-lightbox.is-open { opacity: 1; pointer-events: auto; }
.pp-lightbox-img {
	max-width: 92vw;
	max-height: 88vh;
	border-radius: 14px;
	transform: scale(.94);
	transition: transform .35s var(--pp-ease);
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.pp-lightbox.is-open .pp-lightbox-img { transform: scale(1); }
.pp-lightbox-close {
	position: absolute;
	top: 22px; right: 26px;
	width: 46px; height: 46px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.15);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.pp-lightbox-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }

/* =========================================================================
   Animationen
   ========================================================================= */
@keyframes pp-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

.pp-flash { animation: pp-flash 0.9s var(--pp-ease); }
@keyframes pp-flash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(21,159,217,0); }
	30% { box-shadow: 0 0 0 4px rgba(21,159,217,.25); border-radius: var(--pp-radius-sm); }
}

/* =========================================================================
   Mobile-Feinschliff
   ========================================================================= */
@media (max-width: 640px) {
	/* COA-Button horizontal mittig */
	.pp-coa { display: flex; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; justify-content: center; }
	/* Ähnliche Produkte: 2 pro Zeile */
	.pp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.pp-card-body { padding: 12px 12px 16px; }
	.pp-card-title { font-size: 14px; }
	.pp-card-img { padding: 12px; }

	.pp-qty-btn { width: 36px; }
	.pp-addtocart .quantity input.qty { font-size: 15px; }
	.pp-wrap .pp-addtocart button.single_add_to_cart_button { width: 100%; padding: 0 14px; white-space: nowrap; font-size: 19px; }
	.pp-buy-price-val { font-size: 21px; }
	.pp-addon-pill { padding: 10px 13px; font-size: 13.5px; }

	/* Badges IMMER in einer Zeile: schrumpfen statt umbrechen */
	.pp-tags { flex-wrap: nowrap; gap: 6px; }
	.pp-tag {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		white-space: nowrap;
		font-size: clamp(10px, 3vw, 12.5px);
		padding: 7px 6px;
	}
	.pp-tags-head-line { flex-basis: 20px; }
	.pp-tags-head-label { font-size: 10.5px; }
}
/* Der Sticherheit halber: −/Zahl/+ dürfen nie umbrechen */
.pp-addtocart .quantity { flex-wrap: nowrap; }

/* Xoo Side-Cart-Button nach oben schieben, solange die Sticky-Bar sichtbar ist */
.xoo-wsc-basket { transition: bottom .3s cubic-bezier(.22,1,.36,1); }
body.pp-sticky-visible .xoo-wsc-basket { bottom: 65px !important; }

@media (prefers-reduced-motion: reduce) {
	.pp-wrap *, .pp-sticky *, .pp-lightbox * {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}