/**
 * Bold-Frame Product Layout
 * Grouped-list (iOS-style) design for the product tabs once relocated below the
 * add-to-cart button: one rounded card with hairline dividers between the rows.
 * Everything is scoped to .bfpl-relocated-tabs so no other page is affected.
 */

/* ---- Gallery as a rounded collage grid -------------------------------- */
/* The FlexSlider is disabled in PHP (remove_theme_support), so all gallery
   images render stacked; we lay them out in a grid: first image full width,
   the rest two per row – with soft corners and even gaps, like the reference. */

/* Hide the sale label on the single-product photo. */
body.single-product .woo-image-part .onsale {
	display: none !important;
}

.woo-image-part .woocommerce-product-gallery {
	opacity: 1 !important;
}

.woo-image-part .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	width: 100% !important;
	margin: 0 !important;
	transform: none !important;
}

.woo-image-part .woocommerce-product-gallery__image {
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	overflow: hidden;
	border-radius: 14px;
	aspect-ratio: 4 / 5;
}

/* First image spans the full width, like the example. */
.woo-image-part .woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
}

.woo-image-part .woocommerce-product-gallery__image > a,
.woo-image-part .woocommerce-product-gallery__image picture {
	display: block;
	width: 100%;
	height: 100%;
}

.woo-image-part .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover;
	display: block;
	border-radius: 14px;
}

/* No slider navigation is needed in the grid. */
.woo-image-part .flex-control-nav,
.woo-image-part .flex-control-thumbs {
	display: none !important;
}

/* ---- Product video slide --------------------------------------------- */
/* Injected by JS with the gallery-image class, so it already inherits the
   collage cell, 4/5 ratio and 14px corners above. These rules just make the
   <video> fill the cell (the img rules target <img>, not <video>). */
.woo-image-part .bfpl-video-slide {
	position: relative;
	background: #f2f2f2;
}

.woo-image-part .bfpl-video-slide .bfpl-video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	border-radius: 14px;
	background: #f2f2f2;
}

/* Make the product-video close (X) button clearly visible. It is rendered by the
   separate "produktu-vaizdo-galerija" (bf-pvo) plugin as `.bf-pvo-inline-close`,
   which defaults to a small 36px chip at only 55% black with no ring — so it fades
   into the light oak video. We enlarge it, deepen the background and add a white
   ring + shadow so the × reads on any frame. Styled from here because this plugin's
   stylesheet already loads on every product page (bf-pvo's own source lives on the
   server only). If that plugin is ever edited directly, move this rule into it. */
.bf-pvo-inline-close {
	width: 40px !important;
	height: 40px !important;
	line-height: 40px !important;
	font-size: 26px !important;
	color: #fff !important;
	background: rgba(0, 0, 0, 0.78) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 0 0 1.5px rgba(255, 255, 255, 0.55) !important;
	opacity: 1 !important;
}

.bf-pvo-inline-close:hover,
.bf-pvo-inline-close:focus {
	background: #000 !important;
}

/* Mobile pause/play toggle (JS-built) shown once the native control bar is stripped
   on phones. Bottom-right so it clears the bottom-left slider dots and the top-right
   mute/close. Translucent dark chip + white icon + ring = legible on any frame. */
.bf-pvo-ratio-box .bfpl-vid-btn {
	display: none;
}

@media (max-width: 767px) {
	.bf-pvo-ratio-box .bfpl-vid-btn {
		position: absolute;
		right: 10px;
		bottom: 10px;
		z-index: 43;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background: rgba(0, 0, 0, 0.62);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
	}

	.bf-pvo-ratio-box .bfpl-vid-btn:active {
		transform: scale(0.94);
	}

	.bf-pvo-ratio-box .bfpl-vid-btn svg {
		width: 22px;
		height: 22px;
		display: block;
	}
}

/* Dots (built by JS) – only used on mobile. */
.woo-image-part .bfpl-gallery-dots {
	display: none;
}

/* ---- Mobile: swipeable slider with dots, like the reference ----------- */
@media (max-width: 767px) {
	.woo-image-part .woocommerce-product-gallery__wrapper {
		display: flex !important;
		grid-template-columns: none !important;
		gap: 0 !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		border-radius: 14px;
		/* Without this, flicking past the first/last slide lets the swipe gesture
		   "chain" into the page behind it, shifting the whole site sideways
		   (seen in Clarity recordings). Contain it to this carousel only. */
		overscroll-behavior-x: contain;
	}

	.woo-image-part .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
		display: none;
	}

	/* Never-ending loop clones (JS: syncInfiniteGallery) - only ever glimpsed
	   for a single frame while the real slide swaps in behind them, so they
	   must never be independently tappable/focusable. */
	.woo-image-part .woocommerce-product-gallery__image.bfpl-clone {
		pointer-events: none;
	}

	.woo-image-part .woocommerce-product-gallery__image,
	.woo-image-part .woocommerce-product-gallery__image:first-child {
		flex: 0 0 100% !important;
		width: 100% !important;
		grid-column: auto;
		/* Shorter than the desktop 4:5: ~345px instead of ~431px on a 375px phone.
		   See the object-position rule below — the height comes off the TOP only. */
		aspect-ratio: 1 / 1;
		scroll-snap-align: center;
		/* Stop at EVERY slide: one swipe = one image, never skipping two or three
		   even on a fast flick. */
		scroll-snap-stop: always;
		border-radius: 14px;
	}

	/* Take the removed height off the TOP of the photo, not off both ends.
	   object-fit:cover defaults to a centred anchor, so a shorter box trims the
	   ceiling AND the floor — which cuts the legs off a console table. Anchoring
	   the bottom edge keeps the product whole and takes the crop out of the empty
	   wall above it. */
	.woo-image-part .woocommerce-product-gallery__image img,
	.woo-image-part .woocommerce-product-gallery__image video,
	.woo-image-part .bfpl-video-slide .bfpl-video {
		object-position: center bottom;
	}

	/* Dots overlay the image, bottom-left, in a frosted-glass pill. */
	.woo-image-part .bfpl-gallery-dots {
		position: absolute;
		left: 14px;
		bottom: 14px;
		z-index: 3;
		display: flex;
		align-items: center;
		gap: 5px;
		margin: 0;
		padding: 6px 8px;
		border-radius: 20px;
		background: rgba(255, 255, 255, .55);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}

	.woo-image-part .bfpl-gallery-dots button {
		width: 6px;
		height: 6px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(28, 28, 30, .3);
		cursor: pointer;
		transition: width .2s ease, background-color .2s ease;
	}

	.woo-image-part .bfpl-gallery-dots button.is-active {
		width: 18px;
		border-radius: 3px;
		background: #1c1c1e;
	}
}

/* ---- Even vertical rhythm in the product summary ---------------------- */
/* The theme's Customizer CSS gives every block a different bottom margin
   (30px / 35px / 19px / 10em …). Normalise the whole column to one 16px gap. */

.summary.entry-summary .re_wooinner_info {
	margin-bottom: 16px !important;
}

.summary.entry-summary .woocommerce-product-details__short-description {
	margin-bottom: 0 !important;
}

.summary.entry-summary p.stock.in-stock {
	margin-bottom: 16px !important;
}

/* "Ihr Preis" box – equal gap above and below. */
.summary.entry-summary .tc-price-wrap {
	margin-top: 16px !important;
	margin-bottom: 16px !important;
}

/* Add-to-cart group hands off cleanly; the tabs card owns the gap below it. */
.summary.entry-summary .re_wooinner_cta_wrapper,
.summary.entry-summary .woo-button-area {
	margin-bottom: 0 !important;
}

/* ---- Block wrapper ---------------------------------------------------- */
/* margin:16px 0 0 also cancels the theme's `.wc-tabs-wrapper{margin-bottom:10em}`. */
.summary .bfpl-relocated-tabs {
	clear: both;
	width: 100%;
	margin: 16px 0 0 0 !important;
}

/* Only one "Beschreibung" tab exists – the tab bar is redundant here. */
.summary .bfpl-relocated-tabs ul.tabs.wc-tabs {
	display: none;
}

/* Neutralise the theme / WPBakery structural chrome so the card sits flush. */
.summary .bfpl-relocated-tabs .woocommerce-Tabs-panel,
.summary .bfpl-relocated-tabs .vc_row,
.summary .bfpl-relocated-tabs .vc_column_container,
.summary .bfpl-relocated-tabs .vc_column-inner,
.summary .bfpl-relocated-tabs .wpb_column,
.summary .bfpl-relocated-tabs .wpb_wrapper {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/* ---- The grouped card (class added by JS to the toggles' wrapper) ----- */
.summary .bfpl-relocated-tabs .bfpl-group {
	border: 1px solid #e8e8ea !important;
	border-radius: 16px !important;
	background: #fff !important;
	overflow: hidden;
}

/* Intro paragraph = quiet card header. */
.summary .bfpl-relocated-tabs .bfpl-group > article.post {
	margin: 0 !important;
	padding: 15px 18px !important;
	border-bottom: 1px solid #efeff1 !important;
	color: #52525b;
	font-size: 14px;
	line-height: 1.6;
}

.summary .bfpl-relocated-tabs .bfpl-group > article.post p {
	margin: 0;
}

.summary .bfpl-relocated-tabs .bfpl-group > article.post strong {
	color: #1c1c1e;
	font-weight: 600;
}

/* ---- Rows ------------------------------------------------------------- */
.summary .bfpl-relocated-tabs .vc_toggle {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #efeff1 !important;
	border-radius: 0 !important;
	background: none !important;
}

.summary .bfpl-relocated-tabs .vc_toggle:last-child {
	border-bottom: 0 !important;
}

/* Title row. */
.summary .bfpl-relocated-tabs .vc_toggle_title {
	position: relative;
	margin: 0 !important;
	padding: 16px 44px 16px 18px !important;
	cursor: pointer;
	transition: background-color .15s ease;
}

.summary .bfpl-relocated-tabs .vc_toggle_title:hover,
.summary .bfpl-relocated-tabs .vc_toggle_active .vc_toggle_title {
	background: #fafafa;
}

.summary .bfpl-relocated-tabs .vc_toggle_title h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #1c1c1e;
	letter-spacing: -.1px;
}

/* iOS-style chevron: points right, rotates down when the row is open. */
.summary .bfpl-relocated-tabs .vc_toggle_icon {
	display: none !important;
}

.summary .bfpl-relocated-tabs .vc_toggle_title::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid #c0c0c6;
	border-bottom: 2px solid #c0c0c6;
	border-radius: 1px;
	transform: rotate(-45deg);
	transition: transform .22s ease, border-color .15s ease;
}

.summary .bfpl-relocated-tabs .vc_toggle_title:hover::after {
	border-color: #1c1c1e;
}

.summary .bfpl-relocated-tabs .vc_toggle_active .vc_toggle_title::after {
	margin-top: -3px;
	transform: rotate(45deg);
	border-color: #1c1c1e;
}

/* ---- Content ---------------------------------------------------------- */
.summary .bfpl-relocated-tabs .vc_toggle_content {
	margin: 0 !important;
	padding: 0 18px 16px !important;
	color: #52525b;
	font-size: 14px;
	line-height: 1.7;
}

.summary .bfpl-relocated-tabs .vc_toggle_content p {
	margin: 0 0 10px;
}

.summary .bfpl-relocated-tabs .vc_toggle_content p:last-child,
.summary .bfpl-relocated-tabs .vc_toggle_content ul:last-child {
	margin-bottom: 0;
}

/* FAQ sub-headings. */
.summary .bfpl-relocated-tabs .vc_toggle_content h3 {
	margin: 16px 0 5px;
	font-size: 14px;
	font-weight: 600;
	color: #1c1c1e;
}

.summary .bfpl-relocated-tabs .vc_toggle_content h3:first-child {
	margin-top: 0;
}

/* Lists (Lieferung & Rückgabe). */
.summary .bfpl-relocated-tabs .vc_toggle_content ul {
	margin: 0 0 10px;
	padding-left: 18px;
}

.summary .bfpl-relocated-tabs .vc_toggle_content li {
	margin: 0 0 5px;
}

/* Specs table (Eigenschaften & Maße) – clean, borderless rows. */
.summary .bfpl-relocated-tabs .vc_toggle_content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.summary .bfpl-relocated-tabs .vc_toggle_content th,
.summary .bfpl-relocated-tabs .vc_toggle_content td {
	padding: 9px 0;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid #f1f1f3;
}

.summary .bfpl-relocated-tabs .vc_toggle_content tr:first-child th,
.summary .bfpl-relocated-tabs .vc_toggle_content tr:first-child td {
	padding-top: 0;
}

.summary .bfpl-relocated-tabs .vc_toggle_content tr:last-child th,
.summary .bfpl-relocated-tabs .vc_toggle_content tr:last-child td {
	border-bottom: 0;
	padding-bottom: 0;
}

.summary .bfpl-relocated-tabs .vc_toggle_content th {
	width: 45%;
	padding-right: 12px;
	font-weight: 600;
	color: #1c1c1e;
}

.summary .bfpl-relocated-tabs .vc_toggle_content td {
	color: #52525b;
}

/* ---- Reviews: compact card + right-side drawer ------------------------ */

/* Compact summary card shown under the product info. */
.summary .bfpl-reviews-card {
	display: flex;
	flex-direction: column;
	margin-top: 16px;
	padding: 18px;
	border: 1px solid #ececec;
	border-radius: 16px;
	background: #fff;
}

.bfpl-reviews-card .bfpl-rc-title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 600;
	color: #1c1c1e;
}

.bfpl-reviews-card .bfpl-rc-score {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bfpl-reviews-card .bfpl-rc-num {
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	color: #1c1c1e;
}

.bfpl-reviews-card .bfpl-rc-max {
	font-size: 14px;
	color: #8a8a8a;
}

.bfpl-reviews-card .rh_woo_star {
	text-align: left;
}

.bfpl-reviews-card .bfpl-rc-count {
	margin-top: 8px;
	font-size: 13px;
	color: #8a8a8a;
}

.bfpl-reviews-card .bfpl-rc-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-end;
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	color: #1c1c1e;
	transition: opacity .15s ease;
}

.bfpl-reviews-card .bfpl-rc-btn:hover {
	opacity: .65;
}

.bfpl-reviews-card .bfpl-rc-btn span {
	font-size: 19px;
	line-height: 1;
}

/* Drawer. */
.bfpl-reviews-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
}

.bfpl-reviews-drawer.is-open {
	visibility: visible;
}

.bfpl-reviews-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .4);
	opacity: 0;
	transition: opacity .3s ease;
}

.bfpl-reviews-drawer.is-open .bfpl-reviews-backdrop {
	opacity: 1;
}

.bfpl-reviews-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 440px;
	max-width: 92vw;
	display: flex;
	flex-direction: column;
	background: #f3f3f3;
	box-shadow: -8px 0 30px rgba(0, 0, 0, .12);
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}

.bfpl-reviews-drawer.is-open .bfpl-reviews-panel {
	transform: translateX(0);
}

.bfpl-reviews-header {
	position: relative;
	flex-shrink: 0;
	padding: 18px 52px;
	text-align: center;
	background: #fff;
	border-bottom: 1px solid #ececec;
	font-size: 17px;
	font-weight: 600;
	color: #1c1c1e;
}

.bfpl-reviews-close {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	color: #555;
	transition: color .15s ease;
}

.bfpl-reviews-close:hover {
	color: #000;
}

.bfpl-reviews-body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 16px;
}

/* Reviews always visible + single column inside the narrow drawer. */
.bfpl-reviews-body #reviews {
	display: block !important;
	margin: 0 !important;
}

.bfpl-reviews-body .dg-reviews-grid {
	grid-template-columns: 1fr !important;
	gap: 16px !important;
}

/* Lock the page behind the open drawer. */
body.bfpl-drawer-open {
	overflow: hidden;
}

/* ---- Mobile: breadcrumb on one line, product name truncated with … ----- */
@media (max-width: 767px) {
	p#breadcrumbs {
		display: block;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		max-width: 100%;
	}
}

/* ---- Delivery & returns block: framed list with heading (JS-rebuilt) - */
/* Amazon-style stacked list under the button: a heading, then truck + delivery
   date, returns window, free shipping. Framed like the other info boxes. JS
   empties p.stock and appends the heading + rows; we drop the theme's single
   ::before truck so only the per-row icons show. */
.summary .stock.in-stock.bfpl-delivery,
.woo-button-area .stock.in-stock.bfpl-delivery {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 9px !important;
	border: 1px solid #e3e2e2 !important;
	border-radius: 10px !important;
	background: transparent !important;
	padding: 14px 16px !important;
	margin: 4px 0 16px !important;
}

.summary .stock.in-stock.bfpl-delivery::before,
.woo-button-area .stock.in-stock.bfpl-delivery::before {
	display: none !important; /* hide the theme's single ::before truck icon */
}

/* Heading above the icon rows. */
.bfpl-d-title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: #1c1c1e;
	letter-spacing: .2px;
	padding-bottom: 11px;
}

.bfpl-d-row {
	display: flex;
	align-items: flex-start; /* icon top-aligns with the first text line, even when it wraps */
	gap: 9px;
	font-size: 13px;
	line-height: 1.35;
	color: #333;
}

.bfpl-d-icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 1px; /* optical alignment with the first line of text */
	color: #555;
}

.bfpl-d-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

.bfpl-d-text strong {
	font-weight: 700;
	color: #1c1c1e;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- "Maße & Material" spec block (PHP-rendered, JS-positioned) ------- */
.summary .bfpl-specs {
	box-sizing: border-box;
	width: 100%;
	margin: 4px 0 16px;
	padding: 22px 24px;
	border: 1px solid #e6e4e1;
	border-radius: 16px;
	background: #fff;
	color: #1c1c1e;
}

.bfpl-specs-title {
	margin: 0 0 18px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: #14110e;
}

/* Dimensions: equal columns with hairline dividers between them. */
.bfpl-specs-dims {
	display: flex;
	align-items: stretch;
}

.bfpl-specs-dim {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 10px;
}

.bfpl-specs-dim:first-child {
	padding-left: 0;
}

.bfpl-specs-dim + .bfpl-specs-dim {
	border-left: 1px solid #ececea;
}

.bfpl-specs-dim-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.bfpl-specs-ico {
	flex: 0 0 auto;
	display: inline-flex;
	color: #c99362; /* oak accent */
}

.bfpl-specs-ico svg {
	display: block;
}

.bfpl-specs-dim-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8a8580;
}

.bfpl-specs-dim-val {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.15;
	color: #14110e;
	white-space: nowrap; /* keep e.g. "70–120 cm" on one line in narrow columns */
}

.bfpl-specs-sep {
	border: 0;
	border-top: 1px solid #ececea;
	margin: 20px 0;
}

.bfpl-specs-mat-label {
	margin-bottom: 12px;
	font-size: 13px;
	color: #8a8580;
}

.bfpl-specs-mats {
	display: flex;
	gap: 24px;
}

.bfpl-specs-mat {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

.bfpl-specs-swatch {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.bfpl-specs-swatch--wood {
	background: linear-gradient(135deg, #e2c39d, #c99362 55%, #a9713f);
}

.bfpl-specs-mat-txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bfpl-specs-mat-name {
	font-size: 14px;
	line-height: 1.3;
	color: #6b6560;
}

.bfpl-specs-mat-val {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #14110e;
}

.bfpl-specs-note {
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 1.4;
	color: #9a948e;
}

@media (max-width: 767px) {
	.summary .bfpl-specs {
		padding: 18px;
		border-radius: 14px;
	}

	.bfpl-specs-title {
		margin-bottom: 16px;
		font-size: 19px;
	}

	.bfpl-specs-dim {
		padding: 0 8px;
	}

	.bfpl-specs-dim-label {
		font-size: 11px;
	}

	.bfpl-specs-dim-val {
		font-size: 15px;
	}

	.bfpl-specs-ico svg {
		width: 18px;
		height: 18px;
	}

	/* Materials stack on phones. */
	.bfpl-specs-mats {
		flex-direction: column;
		gap: 16px;
	}
}

/* Klarna teaser ("Sofort, später oder in Raten bezahlen.") — injected by a
   theme snippet; hidden on request. */
.bf-klarna-row {
	display: none !important;
}

/* Breadcrumb: equal 10px gap above and below on desktop. The theme puts 20px
   content-wrap padding + 5px above (=25) and 30px below; we pull the breadcrumb
   up and trim the bottom so both sides read as 10px. */
@media (min-width: 768px) {
	#breadcrumbs {
		margin-top: -10px !important;
		margin-bottom: 10px !important;
	}
}

/* ---- Quantity + add-to-cart button on ONE row (all viewports) ---------- */
/* The form is a flex row that wraps. Every other direct child (EPO options,
   totals, the trust block) is forced to a full-width line of its own, so the
   only two items that ever share a line are .quantity and the button — on
   mobile exactly like on desktop, no media query needed.
   align-items:stretch makes the input exactly as tall as the button, whatever
   padding the theme gives the button. */
.summary form.cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
}

.summary form.cart > * {
	flex: 0 0 100%;
	max-width: 100%;
	min-width: 0;
}

.summary form.cart .quantity {
	flex: 0 0 88px !important;
	display: flex !important;
	width: 88px !important;
	max-width: 88px !important;
	float: none !important;
	margin: 0 10px 0 0 !important;
}

/* The .screen-reader-text label inside is position:absolute, so the input is
   the only in-flow child and stretches to the row height. */
.summary form.cart .quantity input.qty {
	flex: 1 1 auto !important;
	width: 100% !important;
	height: auto !important;
	min-height: 56px !important;
	padding: 0 6px !important;
	border: 1px solid #e2e2e2 !important;
	border-radius: 10px !important;
	background: #fff !important;
	font-size: 16px !important; /* >= 16px: iOS must not zoom the page on focus */
	line-height: normal !important;
	text-align: center !important;
	box-shadow: none !important;
}

/* ---- Add-to-cart button: fills the rest of the row -------------------- */
/* The theme caps the button at max-width:90% via an inline rule
   `.woocommerce form.cart:not(.external-cart) .single_add_to_cart_button`
   (specificity 0,4,1), so this selector is deliberately one class more specific
   (0,5,1) to win — a plain `.summary form.cart …` !important rule loses. */
.woocommerce .summary form.cart:not(.external-cart) .single_add_to_cart_button {
	flex: 1 1 auto !important;
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	float: none !important;
	border-radius: 10px !important;
}

/* ---- PayPal express button (PPCP) directly under the button ----------- */
/* The PayPal plugin prints .ppcp-button-container on
   woocommerce_after_add_to_cart_form at priority 1 — i.e. immediately after the
   form, which is exactly where we want it: under the quantity+button row and
   above the trust block (that one moved to the same hook at prio 5).
   NEVER re-parent this container in JS: the button renders inside a PayPal
   iframe and moving the node makes the browser reload it. Spacing only.
   The black button stays the primary CTA — PayPal is the secondary path. */
.summary .ppcp-button-container {
	clear: both;
	width: 100%;
	margin: 10px 0 0 !important;
}

.summary .ppcp-button-container > div {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

/* The theme adds 30px under .woo-button-area; the trust block already carries
   its own 16px top margin, so no extra gap is needed above it. */
.summary .ppcp-button-container + .bfpl-trust {
	margin-top: 14px !important;
}

/* Narrow phones: keep the button readable by trimming the quantity column. */
@media (max-width: 420px) {
	.summary form.cart .quantity {
		flex: 0 0 72px !important;
		width: 72px !important;
		max-width: 72px !important;
		margin-right: 8px !important;
	}

	.woocommerce .summary form.cart:not(.external-cart) .single_add_to_cart_button {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* Payment reassurance line under the button: small, muted, no icons, the two
   items split by a small grey bubble. */
.bfpl-trust .bfpl-payinfo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: .2px;
	color: #888;
}

.bfpl-trust .bfpl-payinfo .bfpl-dot {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #c4c4c4;
}

/* ---- Material and urgency badges overlaid on the gallery ------------- */
.woo-image-part .bfpl-craft-badge,
.woo-image-part .bfpl-urgency-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border-radius: 20px;
	background: rgba(28, 28, 30, .82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .2px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	pointer-events: none;
	animation: bfpl-badge-in .35s ease both;
}

.woo-image-part .bfpl-craft-badge {
	box-sizing: border-box;
	max-width: calc(100% - 28px);
	line-height: 1.3;
}

/* Override the gift plugin's inline position while preserving its gift badge. */
.woo-image-part .bfpl-urgency-badge {
	top: var(--bfpl-urgency-top, 14px) !important;
	left: var(--bfpl-urgency-left, 14px) !important;
}

.woo-image-part .bfpl-craft-dot,
.woo-image-part .bfpl-urgency-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff5a3c;
	box-shadow: 0 0 0 0 rgba(255, 90, 60, .6);
	animation: bfpl-badge-pulse 1.8s ease-out infinite;
}

.woo-image-part .bfpl-craft-dot {
	flex-shrink: 0;
	background: #4caf50;
	box-shadow: 0 0 0 0 rgba(76, 175, 80, .6);
	animation-name: bfpl-craft-pulse;
}

@keyframes bfpl-craft-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(76, 175, 80, .55); }
	70%  { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
	100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

@keyframes bfpl-badge-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes bfpl-badge-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 90, 60, .55); }
	70%  { box-shadow: 0 0 0 8px rgba(255, 90, 60, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.woo-image-part .bfpl-craft-badge,
	.woo-image-part .bfpl-craft-dot,
	.woo-image-part .bfpl-urgency-badge,
	.woo-image-part .bfpl-urgency-dot {
		animation: none;
	}
}

@media (max-width: 767px) {
	.woo-image-part .bfpl-craft-badge,
	.woo-image-part .bfpl-urgency-badge {
		top: 10px;
		left: 10px;
		padding: 6px 10px;
		font-size: 11.5px;
	}
	.woo-image-part .bfpl-craft-badge {
		max-width: calc(100% - 20px);
	}
	.woo-image-part .bfpl-urgency-badge {
		top: var(--bfpl-urgency-top, 10px) !important;
		left: var(--bfpl-urgency-left, 10px) !important;
	}
}

/* ---- Category / shop card badges (JS-injected onto loop thumbnails) ------ */
/* Stacked top-left of each product-card image (the sale flash sits top-right,
   so they never clash). Self-contained here because the gift plugin's own CSS
   only loads on single product pages. */
.bfpl-cat-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	/* Leave room for the top-right discount pill so the two never overlap. */
	max-width: calc(100% - 84px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}

/* Full/short label toggle — the short variant shows on phones only. */
.bfpl-t-short {
	display: none;
}

.bfpl-cat-badge {
	max-width: 100%;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	border-radius: 16px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: .2px;
	box-shadow: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bfpl-cat-gift {
	background: rgba(250, 246, 240, .96);
	border: 1px solid #e8d8c6;
	color: #4a3527;
}

.bfpl-cat-urgency {
	background: rgba(28, 28, 30, .82);
	color: #fff;
}

.bfpl-cat-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff5a3c;
	flex-shrink: 0;
	animation: bfpl-badge-pulse 1.8s ease-out infinite;
}

.bfpl-cat-urgency-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
	.bfpl-cat-dot {
		animation: none;
	}
}

@media (max-width: 767px) {
	.bfpl-cat-badges {
		top: 8px;
		left: 8px;
		right: 8px;
		gap: 5px;
	}

	.bfpl-cat-badge {
		font-size: 10px;
		padding: 4px 8px;
	}
}

/* ================================================================= *
 *  Product-card redesign (category / shop / home grids).
 *  White card · hairline border · equal height · 4:5 cover image ·
 *  compact top-left badges · top-right % discount · left title/rating ·
 *  price · green "Versandkostenfrei" · full-width "Produkt ansehen"
 *  button pinned to the bottom (flex column + margin-top:auto).
 *  Visual only — links, prices, add-to-cart and the gift plugin are
 *  untouched. Heavy use of !important to override the theme's own
 *  card styling that already targets these classes.
 * ================================================================= */

/* Grid: real flex so cards in a row share a height. Column widths stay
   whatever the Rehub col classes set — we never touch those. */
.grid_woo.products,
.woocommerce .products.grid_woo {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch !important;
}

/* Card shell */
.grid_woo .product.col_item,
.woocommerce .products .product.col_item {
	display: flex !important;
	flex-direction: column;
	box-sizing: border-box;
	height: auto;
	background: #fff !important;
	border: 1px solid #e6e6e6 !important;
	border-radius: 6px !important;
	overflow: hidden;
	padding: 0 0 14px !important;
	box-shadow: none !important;
	transition: border-color .15s ease;
}

.grid_woo .product.col_item:hover,
.woocommerce .products .product.col_item:hover {
	border-color: #cfcfcf !important;
	box-shadow: none !important;
}

/* Image — full-bleed 4:5 cover; the card's overflow rounds the top corners */
.grid_woo .product.col_item figure,
.woocommerce .products .product.col_item figure {
	position: relative;
	margin: 0 0 14px !important;
	padding: 0 !important;
	width: 100% !important;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 0 !important;
}

.grid_woo .product.col_item figure > a,
.woocommerce .products .product.col_item figure > a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
}

.grid_woo .product.col_item figure img,
.woocommerce .products .product.col_item figure img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	border-radius: 0 !important;
}

/* Hide the native euro sale flash — replaced by the % badge */
.grid_woo .product.col_item .onsale,
.woocommerce .products .product.col_item .onsale {
	display: none !important;
}

/* Top-right % discount (JS-injected into the figure). Light pill matching the
   gift badge; sits clear of the top-left badges, which are width-capped below. */
.grid_woo .product.col_item .bfpl-cat-discount,
.woocommerce .products .product.col_item .bfpl-cat-discount {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	background: rgba(250, 246, 240, .96);
	border: 1px solid #e8d8c6;
	color: #4a3527;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 16px;
	letter-spacing: .3px;
	white-space: nowrap;
	pointer-events: none;
}

/* Title — left, max two lines, equal-height block */
.grid_woo .product.col_item h3,
.woocommerce .products .product.col_item h3 {
	margin: 0 0 8px !important;
	padding: 0 15px !important;
	text-align: left !important;
	font-size: 15px !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
	min-height: 2.7em; /* two lines */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.grid_woo .product.col_item h3 a,
.woocommerce .products .product.col_item h3 a {
	color: #111 !important;
}

/* Rating row — stars + "N Bewertungen", left aligned */
.grid_woo .product.col_item .bfpl-cat-rating,
.woocommerce .products .product.col_item .bfpl-cat-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 15px;
	margin: 0 0 8px;
}

.grid_woo .product.col_item .bfpl-cat-rating .rh_woo_star,
.woocommerce .products .product.col_item .bfpl-cat-rating .rh_woo_star {
	text-align: left !important;
	margin: 0 !important;
	white-space: nowrap;
}

.bfpl-cat-reviews {
	font-size: 12px;
	color: #7a7a7a;
	white-space: nowrap;
}

/* Price block — static (not absolute), no divider */
.grid_woo .product.col_item .abposbot,
.woocommerce .products .product.col_item .abposbot {
	position: static !important;
	border-top: none !important;
	display: block !important;
	padding: 0 15px !important;
	margin: 0 !important;
}

.grid_woo .product.col_item .price_for_grid,
.woocommerce .products .product.col_item .price_for_grid {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	color: #000 !important;
}

.grid_woo .product.col_item .btn_for_grid,
.woocommerce .products .product.col_item .btn_for_grid {
	display: none !important; /* old grid add-to-cart (already hidden site-wide) */
}

.grid_woo .product.col_item .price,
.woocommerce .products .product.col_item .price {
	display: block;
	line-height: 1.2;
}

.grid_woo .product.col_item .price del,
.woocommerce .products .product.col_item .price del {
	display: block;               /* old price on its own line, above the sale price */
	color: #9a9a9a !important;
	opacity: 1 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-decoration: line-through !important;
	margin: 0 0 4px !important;
}

.grid_woo .product.col_item .price del .amount,
.woocommerce .products .product.col_item .price del .amount {
	color: #9a9a9a !important;
	font-weight: 400 !important;
}

.grid_woo .product.col_item .price ins,
.woocommerce .products .product.col_item .price ins {
	display: block;               /* big bold sale price on the next line */
	text-decoration: none;
	color: #000 !important;
	font-weight: 800 !important;
	font-size: 26px !important;
	line-height: 1.1 !important;
}

.grid_woo .product.col_item .price ins .amount,
.woocommerce .products .product.col_item .price ins .amount {
	color: #000 !important;
	font-weight: 800 !important;
	font-size: 26px !important;
}

/* Non-sale price (plain amount / range) — still bold black */
.grid_woo .product.col_item .price > .amount,
.woocommerce .products .product.col_item .price > .amount {
	color: #000 !important;
	font-weight: 800 !important;
	font-size: 22px;
}

/* "Von: " prefix on range products — quiet, above the price */
.grid_woo .product.col_item .price .from,
.woocommerce .products .product.col_item .price .from {
	display: inline-block;
	color: #9a9a9a !important;
	font-size: 13px !important;
	font-weight: 400 !important;
}

/* Bottom row (JS-injected), pinned to the card bottom: green free-shipping on the
   left, a plain "Produkt ansehen →" text link on the right — no button/background. */
.grid_woo .product.col_item .bfpl-cat-foot,
.woocommerce .products .product.col_item .bfpl-cat-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding: 12px 15px 0;
}

.bfpl-cat-free {
	color: #1c8a4e;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.grid_woo .product.col_item .bfpl-cat-view,
.woocommerce .products .product.col_item .bfpl-cat-view {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: #111 !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .15s ease;
}

.grid_woo .product.col_item .bfpl-cat-view:hover,
.woocommerce .products .product.col_item .bfpl-cat-view:hover {
	color: #000 !important;
	text-decoration: underline !important;
}

.bfpl-cat-arrow {
	font-weight: 600;
}

/* Phones/tablets — TWO cards per row (the theme forces one per row ≤767px, so we
   match its class specificity + add .grid_woo/.products to outrank it) and a bigger
   vertical gap between rows. */
@media (max-width: 767px) {
	.grid_woo .product.col_item.woo_grid_compact.two_column_mobile.type-product,
	.woocommerce .products .product.col_item.woo_grid_compact.two_column_mobile.type-product {
		width: 48% !important;
		max-width: 48% !important;
		flex: 0 0 48% !important;
		margin: 0 1% 20px !important;
		aspect-ratio: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
}

/* Two cards per row on phones — tighter padding, shorter labels */
@media (max-width: 575px) {
	.grid_woo .product.col_item h3,
	.woocommerce .products .product.col_item h3 {
		font-size: 13px !important;
		padding: 0 10px !important;
	}

	.grid_woo .product.col_item .bfpl-cat-rating,
	.woocommerce .products .product.col_item .bfpl-cat-rating,
	.grid_woo .product.col_item .abposbot,
	.woocommerce .products .product.col_item .abposbot,
	.grid_woo .product.col_item .bfpl-cat-foot,
	.woocommerce .products .product.col_item .bfpl-cat-foot {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.grid_woo .product.col_item .price ins,
	.woocommerce .products .product.col_item .price ins,
	.grid_woo .product.col_item .price ins .amount,
	.woocommerce .products .product.col_item .price ins .amount {
		font-size: 21px !important;
	}

	.grid_woo .product.col_item .price > .amount,
	.woocommerce .products .product.col_item .price > .amount {
		font-size: 18px !important;
	}

	.grid_woo .product.col_item .price del,
	.woocommerce .products .product.col_item .price del {
		font-size: 13px !important;
	}

	.bfpl-cat-free {
		font-size: 12px;
	}

	.grid_woo .product.col_item .bfpl-cat-view,
	.woocommerce .products .product.col_item .bfpl-cat-view {
		font-size: 13px;
	}

	/* Keep stars + the (N) count on one line */
	.grid_woo .product.col_item .bfpl-cat-rating,
	.woocommerce .products .product.col_item .bfpl-cat-rating {
		flex-wrap: nowrap;
	}

	/* Narrow two-per-row cards can't fit "Versandkostenfrei" and the view link
	   side by side (the link overflowed / clipped "Ansehen"), so stack them:
	   each on its own left-aligned line. */
	.grid_woo .product.col_item .bfpl-cat-foot,
	.woocommerce .products .product.col_item .bfpl-cat-foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding-top: 10px !important;
	}

	/* Bigger bottom gap between the two-per-row cards */
	.grid_woo .product.col_item,
	.woocommerce .products .product.col_item {
		margin-bottom: 20px !important;
	}

	/* Shorter labels on phones: badges + the view link */
	.bfpl-t-full {
		display: none;
	}

	.bfpl-t-short {
		display: inline;
	}
}

/* ---- Play button: position + same look as the badge --------------------- */
/* The vertical position (top) is set dynamically in JS (positionPlayButton):
   pinned an 8px gap below the lowest badge above it — the gift badge, the
   "Beliebt …" urgency badge, whichever sits lower (same gap as between those two
   badges) — or at the badge top position when there is no badge, so it never
   floats in empty space. top:14px here is only a pre-JS fallback. */
.woo-image-part .bf-pvo-play-button {
	top: 14px !important;
	bottom: auto !important;
	left: 14px !important;
	right: auto !important;
	/* bf-pvo centres the button on its top with translateY(-50%); kill it so
	   `top` means the real top edge (horizontal uses left:36px, not transform). */
	transform: none !important;
	background: rgba(28, 28, 30, .82) !important;
	backdrop-filter: blur(6px) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
}

/* Mobile: no play button — the manufacturing video is shown as its own
   auto-playing second slide instead (see insertMobileVideoSlide in the JS). */
@media (max-width: 767px) {
	.woo-image-part .bf-pvo-play-button {
		display: none !important;
	}

	/* Gift + urgency fade after the first slide; the material badge stays visible
	   across the gallery (JS toggles .bfpl-badges-off on scroll). */
	.woo-image-part .bfpg-gift-badge,
	.woo-image-part .bfpl-urgency-badge {
		transition: opacity .15s ease;
	}

	.woo-image-part.bfpl-badges-off .bfpg-gift-badge,
	.woo-image-part.bfpl-badges-off .bfpl-urgency-badge {
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Smaller, lighter product title on phones. Beats the theme's inline
	   `h1{font-size:20px!important}` via a more specific selector. */
	.summary .re_wooinner_title_compact .product_title,
	.summary .product_title.entry-title {
		font-size: 16px !important;
		font-weight: 500 !important;
		line-height: 1.35 !important;
	}
}

/* ---- "Rückgabe & Umtausch" trust line under the review stars --------- */
/* The rating carries a 20px bottom margin; zero it and give the trust line a
   fixed 13px top padding so the gap to the stars is exactly 13px. */
.summary .woocommerce-product-rating {
	margin-bottom: 0 !important;
}

.summary .bfpl-returns {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 0;
	padding-top: 13px;
	font-size: 13px;
	line-height: 1.3;
	color: #4a4a4a;
}

/* ---- Bold labels above the EPO dropdowns (colour + size) ------------- */
.tm-extra-product-options .tm-epo-element-label,
.tm-extra-product-options .tc-epo-element-label-text {
	font-weight: 700 !important;
}

.summary .bfpl-returns .bfpl-returns-check {
	flex: 0 0 auto;
	color: #12a594; /* teal check, matching the reference */
}

/* ---- EPO dropdowns (size + oak tone): shorter box -------------------- */
/* The theme/EPO pad these selects 20px top & bottom (≈62px tall). Trim to
   10px / 10px for a tighter control. More specific than the theme's
   `… .tmcp-field-wrap … select` rule and !important, so it wins. (These selects
   carry `transition:all`, so the change is instant on load — only a live JS
   tweak would animate.) */
.summary select.tmcp-select,
.tm-extra-product-options select.tmcp-select {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* Mobile: the dropdowns match the "Ihr Preis" box under them ------------ */
/* That box is EPO's own `span.tc-price-wrap` (#f9f9f9, 15px padding, 6px
   radius) and renders 60px tall. The select carries a 13px font, so padding
   alone can never reach the same height — an explicit height is the only way to
   make the pair read as one set of equally tall controls. Phone only; the
   desktop column keeps the tighter 42px box. */
@media (max-width: 767px) {
	.summary select.tmcp-select,
	.tm-extra-product-options select.tmcp-select {
		height: 60px !important;
		min-height: 60px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* ---- Scarcity line above the price (JS-inserted) --------------------- */
/* "Nur noch X auf Lager und in Y Warenkörben" — red, sits just above the price
   as the first child of .woo-price-area. flex-basis:100% so it takes its own
   full-width row even if the price area is a flex container. */
.woo-price-area .bfpl-scarcity {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .2px;
	color: #d32f2f;
}

/* ---- Price: UVP + "ab" + savings badge (JS-decorated, EPO-rendered) ----- */
/* Only styling — EPO owns the numbers. Order in the DOM is: UVP, <del>, "ab",
   <ins>, badge → reads "UVP 489 €  ab 342 €  −30 %". */
.woo-price-area p.price.bfpl-priced {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	color: #1c1c1e !important;
}

.woo-price-area p.price.bfpl-priced .bfpl-uvp-label {
	font-size: 12.5px;
	font-weight: 400;
	color: #9a9a9a;
	letter-spacing: .2px;
	text-decoration: line-through;
}

/* Muted, small struck UVP — the theme colours the amount black, so override
   the wrapper, the amount and the € symbol together with !important. */
.woo-price-area p.price.bfpl-priced del,
.woo-price-area p.price.bfpl-priced del .amount,
.woo-price-area p.price.bfpl-priced del .woocommerce-Price-currencySymbol,
.woo-price-area p.price.bfpl-priced del bdi {
	color: #9a9a9a !important;
	font-weight: 400 !important;
	text-decoration: line-through;
}

.woo-price-area p.price.bfpl-priced del .amount {
	font-size: 15px !important;
}

.woo-price-area p.price.bfpl-priced .bfpl-ab {
	font-size: 14px;
	font-weight: 400;
	color: #555;
}

.woo-price-area p.price.bfpl-priced ins {
	text-decoration: none;
	color: #1c1c1e !important;
}

.woo-price-area p.price.bfpl-priced ins .amount,
.woo-price-area p.price.bfpl-priced ins bdi {
	font-size: 24px !important;
	font-weight: 700 !important;
	color: #1c1c1e !important;
}

.woo-price-area p.price.bfpl-priced .bfpl-save {
	align-self: center;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: #a32d2d;
	background: #fcebeb;
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;
}

/* The theme leaves an empty <small> at the end of the price — hide it so it can
   never add a stray "–". */
.woo-price-area p.price.bfpl-priced small:empty {
	display: none;
}

/* ---- Benefit bullets: collapse to the first two rows ------------------- */
/* JS hides rows beyond the first two and appends a "Mehr anzeigen" toggle
   inside the bordered box in the short description. Scoped so nothing else on
   the page is affected; if the JS never runs, all rows just stay visible. */

.woocommerce-product-details__short-description .bfpl-benefit-row-hidden {
	display: none !important;
}

.woocommerce-product-details__short-description .bfpl-benefit-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	padding: 4px 0;
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .2px;
	color: #c99362;              /* oak accent, matches the ✓ marks */
	-webkit-tap-highlight-color: transparent;
}

.woocommerce-product-details__short-description .bfpl-benefit-toggle:hover,
.woocommerce-product-details__short-description .bfpl-benefit-toggle:focus-visible {
	color: #a97b4e;
	text-decoration: underline;
}

.woocommerce-product-details__short-description .bfpl-benefit-chevron {
	flex: 0 0 auto;
	transition: transform .2s ease;
}

.woocommerce-product-details__short-description .bfpl-benefit-toggle.is-open .bfpl-benefit-chevron {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Mobile buy-box hoist
   The price block and the title/rating block are moved above the gallery on
   phones (see hoistBuyBox in product-layout.js) so they are visible without
   scrolling. Desktop never gets this element — the script removes it above
   767 px — but the display:none keeps it harmless if the script is delayed.
   --------------------------------------------------------------------------- */
.bfpl-mobile-buybox {
	display: none;
}

@media (max-width: 767px) {
	.bfpl-mobile-buybox {
		display: block;
		/* Lives outside .summary, so the opacity:0 reveal of the summary column
		   does not apply here: these blocks paint immediately. */
		opacity: 1;
		margin: 0 0 14px;
	}

	/* One rhythm for the whole block. The theme hands these pieces 5px, 26px and
	   11px bottom margins, which reads as random spacing on a phone; every gap in
	   the hoisted area — and the one down to the gallery — is 14px.
	   The two known blocks are named explicitly rather than relying on `> *`:
	   .woo-price-area carries a 26px bottom margin from a more specific rule that
	   a single-class child selector loses to. */
	.bfpl-mobile-buybox > * {
		margin-top: 0 !important;
		margin-bottom: 14px !important;
	}

	/* `.woo-price-area.mb10{margin-bottom:26px!important}` sits at the same
	   (0,2,0) specificity further down the cascade and therefore wins on order.
	   The [class] attribute selector lifts this to (0,3,0) so it wins whatever
	   the order — and without hard-coding the theme's mb10 utility class, which
	   a later theme update could rename. */
	.bfpl-mobile-buybox > .woo-price-area[class] {
		margin-bottom: 14px !important;
	}

	.bfpl-mobile-buybox > *:last-child {
		margin-bottom: 0 !important;
	}

	/* Same 14px above the price block, so breadcrumb → price → title read as one
	   evenly spaced stack (the theme gives the breadcrumb 11px). */
	div.product > p:first-of-type {
		margin-bottom: 14px !important;
	}

	/* The theme sizes the H1 for the narrow right-hand column; above the gallery
	   it has the full width, so keep it tight enough not to push the image down. */
	/* !important is required, not decorative: the theme ships a bare
	   `h1{font-size:20px!important}`, and an !important declaration beats any
	   specificity without one. The previous 20px here never actually applied —
	   it only happened to match the value the theme was forcing. */
	.bfpl-mobile-buybox .product_title {
		font-size: 16px !important;
		line-height: 1.35 !important;
	}

	/* The title is 14px here, so the rating steps down to 13px to stay visibly
	   secondary — at equal size only weight and colour separated the two, and the
	   size hierarchy disappeared. Three classes deep on purpose: the general
	   rating rule below is also (0,2,0) and sits later in the file, so a
	   two-class selector would lose on order. Desktop keeps 14px, where the
	   theme's own 20px heading already provides the contrast. */
	.bfpl-mobile-buybox .re_wooinner_title_compact .woocommerce-product-rating::before,
	.bfpl-mobile-buybox .re_wooinner_title_compact .bfpl-rating-value,
	.bfpl-mobile-buybox .re_wooinner_title_compact .woocommerce-review-link,
	.bfpl-mobile-buybox .re_wooinner_title_compact .woocommerce-review-link .count {
		font-size: 13px;
	}

	/* Price and the legal line on ONE row wherever the width allows. The theme
	   stacks them in a flex column with a 6px gap; this turns the block into a
	   wrapping row so the two run on together. Full disclosure on the limit: the
	   price row alone measures 239px and "inkl. MwSt., versandkostenfrei" another
	   181px at 12px, against 345px of usable width on a 375px phone — so on a
	   phone the legal line still falls to a second row, but tight against the
	   price instead of separated. The scarcity line keeps its own row. */
	.bfpl-mobile-buybox .woo-price-area {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 8px;
		row-gap: 0;
	}

	.bfpl-mobile-buybox .woo-price-area .bfpl-scarcity {
		flex: 0 0 100%;
	}

	/* !important on both: the theme prints this span with inline styles
	   (font-size:14px; margin-top:6px; width:100%; display:block), and an inline
	   style beats any stylesheet rule that is not !important. width/display are
	   overridden too, otherwise the span claims the whole row and the price line
	   can never share it. */
	.bfpl-mobile-buybox .woo-price-area .legal-info-de {
		display: inline !important;
		width: auto !important;
		flex-basis: auto !important;
		margin-top: 0 !important;
		font-size: 12px !important;
	}

	/* The trust line now sits directly under the image (JS: placeReturnsLine), so
	   it is addressed as the gallery's sibling. Everything the theme gave it lives
	   behind `.summary .bfpl-returns{…}`, which cannot reach it out here — hence
	   the layout, size and colour are restated rather than only the spacing. */
	.woo-image-part + .bfpl-returns {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 5px;
		margin: 0 0 14px !important;
		padding-top: 0 !important;
		/* 12px, not the desktop 13px: with the shipping note appended the row
		   measured 346px against 345px of width and wrapped over a single pixel.
		   12px leaves ~22px of headroom, so it also survives a slightly wider
		   rendering of the font on another device. */
		font-size: 12px;
		line-height: 1.3;
		color: #4a4a4a;
	}

	.woo-image-part + .bfpl-returns .bfpl-returns-check {
		flex: 0 0 auto;
		color: #12a594;          /* teal check, same as the desktop trust line */
	}

	/* "versandkostenfrei" moved down here from the price line (JS:
	   moveShippingNote). The theme puts a 5px inline margin on that span; the
	   flex gap already handles the spacing, so the middot is the only separator. */
	.woo-image-part + .bfpl-returns .bfpl-shipping-note {
		margin-left: 0 !important;
	}

	.woo-image-part + .bfpl-returns .bfpl-shipping-note::before {
		content: '·';
		margin-right: 4px;
		color: #4a4a4a;
		font-weight: 400;
	}

	/* Close the rhythm: the gallery keeps the same 14px down to the size selector. */
	.woo-image-part {
		margin-bottom: 14px !important;
	}

	/* WooCommerce puts a 20px bottom margin on .woocommerce-product-gallery. With
	   no padding or border on .woo-image-part that margin collapses straight
	   through the container, so the gap below the image measured 20px whatever the
	   container's own margin said. Zero it and let the container own the rhythm —
	   containing it instead (flow-root/overflow) only moved the 20px inside and
	   made the gallery box 20px taller. */
	.woo-image-part .woocommerce-product-gallery {
		margin-bottom: 0 !important;
	}
}

/* ---------------------------------------------------------------------------
   Rating under the title: numeric average, no stars
   The star glyphs are hidden by the critical <head> CSS (so they never flash)
   and JS prepends .bfpl-rating-value with the average read from the theme's own
   title="Rated 4.97 out of 5". Scoped to .re_wooinner_title_compact rather than
   .summary, because on phones this block is hoisted out of .summary and sits
   above the gallery — a .summary-scoped rule would silently stop applying.
   --------------------------------------------------------------------------- */
/* The rating runs on in the SAME line as the title: the headline ends and the
   grey "4,97 (31 Kundenrezensionen)" continues straight after it, wrapping
   naturally. Done by making both inline rather than by moving the rating into
   the <h1> — that would drop the review text into the heading itself, where it
   does not belong for search engines or screen readers. */
.re_wooinner_title_compact .product_title {
	display: inline;
}

.re_wooinner_title_compact .woocommerce-product-rating {
	display: inline;
	margin: 0 !important;
	padding: 0;
	text-align: left;
	/* The theme's markup carries a real space between the (now hidden) stars and
	   the review link, which rendered as a stray ~4px. font-size:0 collapses it;
	   the children set their own size below. */
	font-size: 0;
}

/* A real space, NOT a margin. The markup has no whitespace between </h1> and
   this block, and a margin creates no line-break opportunity — so the title's
   last word and the whole rating behaved as one unbreakable run. On a narrow
   phone that run no longer fitted, and "NATURA" was pushed onto a line of its
   own while half of the line above stayed empty. A space lets the text flow. */
.re_wooinner_title_compact .woocommerce-product-rating::before {
	content: ' ';
}

.re_wooinner_title_compact .woocommerce-product-rating::before,
.re_wooinner_title_compact .bfpl-rating-value,
.re_wooinner_title_compact .woocommerce-review-link,
.re_wooinner_title_compact .woocommerce-review-link .count {
	font-size: 14px;
	font-weight: 400;
	/* Deliberately quiet, but still #767676 = 4.5:1 on white, the lowest grey
	   that stays legible for small text. */
	color: #767676;
	letter-spacing: 0;
	text-decoration: none;
	border: 0;
}

/* The theme pads the review link with 5px either side. The number and the count
   should read as one short phrase, so the only gap left is the 4px after it. */
.re_wooinner_title_compact .woocommerce-review-link {
	margin: 0 !important;
	/* Free to move to the next line, but never to break inside — "(31" on one
	   line and "Kundenrezensionen)" on the next would read as broken. */
	white-space: nowrap;
}

.re_wooinner_title_compact .bfpl-rating-value {
	margin-right: 4px;
}

.re_wooinner_title_compact .woocommerce-review-link:hover,
.re_wooinner_title_compact .woocommerce-review-link:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
 *  Category SEO text below the product grid (includes/category-seo.php).
 *  Konsolentische carries the same spacing as term-71 rules from wp-admin;
 *  this gives the other categories the same.
 * ========================================================================== */
.tax-product_cat .woo_cat_sec_description {
	padding-top: 40px;
}

/* Wide tables scroll inside themselves instead of widening the page. */
.tax-product_cat .woo_cat_sec_description table {
	display: block;
	overflow-x: auto;
}

/* Fallback for the toggles when WPBakery is not active. */
.bfpl-cs-toggle {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e5e5e5;
}

.bfpl-cs-toggle summary {
	cursor: pointer;
	font-weight: 600;
}

/* ==========================================================================
 *  Category hero for the categories that have no hero of their own in wp-admin
 *  (Küche, Deko, Garderoben, …), rendered by includes/category-seo.php.
 *  Same palette, Georgia title and brown button as the wp-admin heroes
 *  (Couchtische etc.), but the photo sits in its own right-hand column: these
 *  are product photos, so text must never be laid over them.
 * ========================================================================== */
.bfpl-ch-hero {
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 54%);
	min-height: 540px;
	margin: 0 0 32px;
	background: #eee8df;
	color: #151513;
	overflow: hidden;
}

.bfpl-ch-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 6% 48px 7%;
	box-sizing: border-box;
}

.bfpl-ch-crumb {
	margin: 0 0 36px;
	font: 14px/1.4 Arial, sans-serif;
	color: #68645f;
}

.bfpl-ch-crumb a {
	color: #151513 !important;
	text-decoration: none !important;
}

.bfpl-ch-crumb span {
	margin: 0 10px;
}

.bfpl-ch-label {
	margin: 0 0 22px !important;
	font: 15px/1.5 Arial, sans-serif !important;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #41403c;
}

h1.bfpl-ch-title {
	margin: 0 0 24px !important;
	font: 400 clamp(38px, 4.2vw, 68px)/1.05 Georgia, 'Times New Roman', serif !important;
	letter-spacing: -1.5px !important;
	color: #111 !important;
}

p.bfpl-ch-intro {
	max-width: 480px;
	margin: 0 0 30px !important;
	font: 400 clamp(16px, 1.3vw, 20px)/1.55 Arial, sans-serif !important;
	color: #464440 !important;
}

.bfpl-ch-cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 17px;
	min-height: 52px;
	padding: 17px 25px;
	box-sizing: border-box;
	border-radius: 4px;
	background: #a27a59;
	color: #fff !important;
	font: 16px/1.35 Arial, sans-serif;
	text-decoration: none !important;
}

.bfpl-ch-cta:hover {
	background: #856144;
}

.bfpl-ch-cta:focus-visible {
	outline: 3px solid #33271d;
	outline-offset: 4px;
}

.bfpl-ch-media {
	position: relative;
	min-height: 100%;
}

.bfpl-ch-image {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
}

.bfpl-ch-target {
	scroll-margin-top: 110px;
}

/* The hero carries its own breadcrumb; hide the theme's duplicate above it. */
body.bfpl-has-ch-hero .woocommerce-breadcrumb {
	display: none;
}

@media (min-width: 768px) and (max-width: 1100px) {
	.bfpl-ch-hero {
		min-height: 460px;
	}

	.bfpl-ch-copy {
		padding: 36px 5%;
	}
}

@media (max-width: 767px) {
	.bfpl-ch-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.bfpl-ch-copy {
		padding: 25px 24px 28px;
	}

	.bfpl-ch-crumb {
		margin-bottom: 24px;
		font-size: 12px;
	}

	.bfpl-ch-label {
		margin-bottom: 14px !important;
		font-size: 11px !important;
		letter-spacing: 3px;
	}

	h1.bfpl-ch-title {
		margin-bottom: 18px !important;
		font-size: clamp(34px, 9vw, 52px) !important;
		letter-spacing: -1px !important;
	}

	p.bfpl-ch-intro {
		margin-bottom: 22px !important;
		font-size: 16px !important;
	}

	.bfpl-ch-cta {
		padding: 14px 20px;
		font-size: 15px;
	}

	.bfpl-ch-media {
		min-height: 0;
		aspect-ratio: 1.35 / 1;
	}
}


/* ---- BFPL v1.43.0: long specifications and mobile price ------------- */
.bfpl-specs-dim-val {
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
	text-wrap: balance;
	line-height: 1.3;
}

.woo-price-area p.price:not(.bfpl-priced) {
	display: inline-flex !important;
	align-items: baseline;
	gap: 6px;
	overflow: visible !important;
	color: #1c1c1e !important;
}

.woo-price-area p.price:not(.bfpl-priced) .from {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: #555 !important;
}

.woo-price-area p.price:not(.bfpl-priced) .amount,
.woo-price-area p.price:not(.bfpl-priced) bdi,
.woo-price-area p.price:not(.bfpl-priced) .woocommerce-Price-currencySymbol {
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #1c1c1e !important;
}

@media (max-width: 767px) {
	.bfpl-specs-dim-val {
		font-size: 14px;
		line-height: 1.3;
	}

	.bfpl-mobile-buybox .woo-price-area p.price:not(.bfpl-priced) {
		font-size: 16px !important;
		line-height: 1.2 !important;
	}

	.bfpl-mobile-buybox .woo-price-area .legal-info-de {
		font-size: 13px !important;
		line-height: 1.35 !important;
	}
}

/* Option selector and "Ihr Preis" use one consistent control height. */
.summary select.tmcp-select,
.tm-extra-product-options select.tmcp-select,
.summary .tc-price-wrap {
	height: 60px !important;
	min-height: 60px !important;
	box-sizing: border-box;
}

.summary select.tmcp-select,
.tm-extra-product-options select.tmcp-select {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


/* ---- BFPL v1.44.0+: mobile sticky buy bar + options sheet ------------- */
/* JS: buildBuyBar. The bar shows while the real add-to-cart button is off
   screen: price + choice, an options link that opens a bottom sheet, and
   PayPal checkout. Phones only. Button rules carry !important because the
   theme styles every <button> globally. */
.bfpl-buybar {
	display: none;
}

.bfpl-paypal-slot {
	position: relative;
	flex: 0 0 auto;
	width: 112px;
	height: 50px;
}

.bfpl-paypal-sdk {
	position: absolute;
	inset: 0;
	visibility: hidden;
}

/* Size the SDK's outer wrapper to this single-wallet slot; leave its iframe intact. */
.bfpl-paypal-sdk > .paypal-buttons {
	min-width: 0 !important;
	width: 100% !important;
}

.bfpl-paypal-slot.is-ready:not(.needs-choice) > .bfpl-paypal-sdk {
	visibility: visible;
}

.bfpl-paypal-slot.is-ready:not(.needs-choice) > button,
.bfpl-paypal-slot[hidden],
.bfpl-sheet .bfpl-sheet-apply[hidden] {
	display: none !important;
}

.bfpl-sheet-paypal {
	flex: 1 1 auto;
	width: auto;
	height: 52px;
}

.bfpl-sheet-status:empty {
	display: none;
}

.bfpl-sheet .bfpl-sheet-status {
	margin: 0;
	padding: 8px 16px;
	font-size: 13px;
	line-height: 1.4;
	color: #555;
}

@media (max-width: 767px) {
	.bfpl-buybar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 990; /* Below the menu, cookie banner, drawers and cart popup. */
		display: flex;
		align-items: center;
		gap: 8px;
		box-sizing: border-box;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid #ebe7e2;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .05);
		transform: translateY(110%);
		visibility: hidden;
		transition: transform .22s ease, visibility 0s linear .22s;
	}

	.bfpl-buybar.is-visible {
		transform: none;
		visibility: visible;
		transition: transform .22s ease;
	}

	.bfpl-buybar-info {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-width: 0;
	}

	.bfpl-buybar-price {
		font-size: 20px;
		font-weight: 700;
		line-height: 1.15;
		color: #1c1c1e;
		white-space: nowrap;
	}

	.bfpl-buybar-from {
		font-size: 14px;
		font-weight: 400;
		color: #555;
	}

	.bfpl-buybar-sel {
		display: -webkit-box;
		margin-top: 2px;
		overflow: hidden;
		font-size: 13px;
		line-height: 1.25;
		color: #767676;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.bfpl-buybar-sel:empty {
		display: none;
	}

	/* Options link — plain text, not a second big button. */
	.bfpl-buybar .bfpl-buybar-opts {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 6px;
		height: 50px !important;
		margin: 0 !important;
		padding: 0 2px !important;
		border: 0 !important;
		border-radius: 8px !important;
		background: transparent !important;
		box-shadow: none !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		line-height: 1.25 !important;
		letter-spacing: 0 !important;
		text-align: left;
		text-transform: none !important;
		color: #1c1c1e !important;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.bfpl-buybar .bfpl-buybar-opts[hidden] {
		display: none !important;
	}

	.bfpl-buybar-opts-text {
		max-width: 88px;
	}

	.bfpl-buybar-opts svg {
		flex: 0 0 auto;
	}

	.bfpl-paypal-slot .bfpl-buybar-btn {
		display: inline-flex;
		flex: 0 0 auto;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 50px !important;
		margin: 0 !important;
		padding: 0 14px !important;
		border: 0 !important;
		border-radius: 12px !important;
		background: #ffc439 !important;
		box-shadow: none !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1.2 !important;
		letter-spacing: 0 !important;
		white-space: normal !important;
		text-transform: none !important;
		color: #003087 !important;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.bfpl-buybar-paypal-label {
		font-size: 12px;
		line-height: 14px;
	}

	.bfpl-buybar-paypal-logo {
		display: block;
		width: 76px;
		height: 24px;
		background: url("pay/paypal-wordmark.svg") center / contain no-repeat;
	}

	.bfpl-buybar .bfpl-buybar-opts:active,
	.bfpl-buybar .bfpl-buybar-btn:active {
		transform: scale(.98);
	}

	.bfpl-buybar .bfpl-buybar-opts:focus-visible,
	.bfpl-buybar .bfpl-buybar-btn:focus-visible {
		outline: 2px solid #1c1c1e;
		outline-offset: 2px;
	}

	/* Keep the footer's last lines clear of the bar. */
	body.bfpl-has-buybar {
		padding-bottom: calc(76px + env(safe-area-inset-bottom));
	}
}

/* Small phones (≤360px): drop the options icon and tighten everything. */
@media (max-width: 360px) {
	.bfpl-buybar {
		gap: 6px;
		padding-right: 10px;
		padding-left: 10px;
	}

	.bfpl-buybar-price {
		font-size: 17px;
	}

	.bfpl-buybar-from {
		font-size: 12px;
	}

	.bfpl-buybar-opts-icon {
		display: none;
	}

	.bfpl-buybar .bfpl-buybar-opts {
		font-size: 12px !important;
	}

	.bfpl-buybar-opts-text {
		max-width: 80px;
	}

	.bfpl-buybar .bfpl-paypal-slot {
		width: 100px;
	}

	.bfpl-buybar .bfpl-buybar-btn {
		padding: 0 10px !important;
		font-size: 14px !important;
	}
}

/* ---- Options sheet ----------------------------------------------------- */
/* Mirrors the EPO options; every tap clicks the real EPO input on the page. */
.bfpl-sheet {
	position: fixed;
	inset: 0;
	z-index: 99990; /* Above the bar, below the cookie banner, colour guide, cart popup. */
}

.bfpl-sheet[hidden] {
	display: none;
}

body.bfpl-sheet-open {
	overflow: hidden !important;
}

.bfpl-sheet-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 18, 16, .42);
	opacity: 0;
	transition: opacity .25s ease;
}

.bfpl-sheet.is-open .bfpl-sheet-backdrop {
	opacity: 1;
}

.bfpl-sheet-panel {
	position: absolute;
	right: 0;
	bottom: var(--bfpl-sheet-bottom, 0px);
	left: 0;
	display: flex;
	flex-direction: column;
	max-height: 88vh;
	max-height: 88dvh;
	max-height: min(88dvh, var(--bfpl-sheet-height, 88dvh));
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom);
	background: #fff;
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
	transform: translateY(100%);
	transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.bfpl-sheet.is-open .bfpl-sheet-panel {
	transform: none;
}

.bfpl-sheet-head,
.bfpl-sheet-handle { flex-shrink: 0; }

.bfpl-sheet.is-keyboard .bfpl-sheet-panel {
	max-height: var(--bfpl-sheet-height);
	padding-bottom: 0;
}

.bfpl-sheet.is-keyboard .bfpl-custom-heading,
.bfpl-sheet.is-keyboard .bfpl-custom-intro > p {
	display: none;
}

.bfpl-sheet-handle {
	width: 40px;
	height: 4px;
	margin: 8px auto 0;
	border-radius: 2px;
	background: #d9d5cf;
}

.bfpl-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 8px 4px 16px;
}

.bfpl-sheet .bfpl-sheet-heading {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #1c1c1e !important;
}

.bfpl-sheet .bfpl-sheet-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #1c1c1e !important;
	cursor: pointer;
}

.bfpl-sheet-body {
	min-height: 0;
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 0 16px 12px;
}

.bfpl-sheet-group {
	padding: 14px 0;
	border-top: 1px solid #f0ece7;
}

.bfpl-sheet-group:first-child {
	border-top: 0;
}

.bfpl-sheet .bfpl-sheet-number {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #ddd8d2;
	border-radius: 8px;
	background: #fff;
	color: #1c1c1e;
	font-size: 16px;
}

.bfpl-sheet .bfpl-sheet-number-error {
	margin: 6px 0 0;
	color: #b42318;
	font-size: 12px;
	line-height: 1.4;
}

.bfpl-sheet .bfpl-sheet-number-error:empty {
	display: none;
}

/* Made-to-measure numeric length fields only; EPO keeps pricing and validation. */
.bfpl-custom-length .tm-epo-element-label,
.bfpl-custom-length .tm-element-description,
.bfpl-custom-length > .bfpl-sheet-title {
	display: none !important;
}
.bfpl-custom-heading {
	display: flex;
	align-items: center;
	gap: 14px;
}
.bfpl-custom-heading svg {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	color: #987a57;
}
.bfpl-custom-heading span {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.1px;
	color: #9297a0;
}
.bfpl-custom-heading strong {
	display: block;
	font-size: 21px;
	line-height: 1.3;
	color: #131b22;
}
.bfpl-custom-length .bfpl-custom-intro > p {
	margin: 10px 0 20px !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: #606773;
}
.bfpl-custom-length .bfpl-custom-label {
	display: block;
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #131b22;
}
.bfpl-custom-length .bfpl-custom-input {
	position: relative;
	width: 100%;
}
.bfpl-custom-length .bfpl-custom-input input {
	box-sizing: border-box;
	width: 100% !important;
	height: 58px;
	min-height: 58px;
	margin: 0 !important;
	padding: 14px 58px 14px 16px !important;
	border: 1px solid #cecece !important;
	border-radius: 5px !important;
	background: #fff !important;
	box-shadow: 0 0 0 1px rgba(0,0,0,.025);
	font-size: 18px !important;
	color: #252b32;
	appearance: textfield;
	-moz-appearance: textfield;
}
.bfpl-custom-input input::-webkit-inner-spin-button,
.bfpl-custom-input input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.bfpl-custom-input input::placeholder { color: #989da6; opacity: 1; }
.bfpl-custom-input input:focus { outline: 2px solid #987a57; outline-offset: 2px; }
.bfpl-custom-input > span {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: #9297a0;
	pointer-events: none;
}
.bfpl-custom-length .bfpl-custom-hint {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: #606773;
}
@media (max-width: 767px) {
	.bfpl-custom-heading strong { font-size: 19px; }
	.bfpl-custom-length .bfpl-custom-intro > p { font-size: 14px !important; margin-bottom: 16px !important; }
}

.bfpl-sheet-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #1c1c1e;
}

.bfpl-sheet .bfpl-sheet-guide {
	margin: 0 !important;
	padding: 0 0 1px !important;
	border: 0 !important;
	border-bottom: 1px solid #bbb3ac !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	color: #514d49 !important;
	cursor: pointer;
}

.bfpl-sheet-list.is-swatches {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
}

.bfpl-sheet-list.is-chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.bfpl-sheet-list.is-checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bfpl-sheet .bfpl-sheet-opt {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	box-sizing: border-box;
	min-width: 0;
	min-height: 52px;
	margin: 0 !important;
	padding: 6px 4px !important;
	border: 1px solid #ddd8d2 !important;
	border-radius: 10px !important;
	background: #fff !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #1c1c1e !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.bfpl-sheet .bfpl-sheet-opt[aria-pressed="true"] {
	border: 2px solid #1c1c1e !important;
	background: #faf8f5 !important;
}

.bfpl-sheet .bfpl-sheet-opt:disabled {
	opacity: .4;
	cursor: default;
}

.bfpl-sheet .bfpl-sheet-opt:focus-visible {
	outline: 2px solid #1c1c1e;
	outline-offset: 2px;
}

.bfpl-sheet-optname {
	font-weight: 600;
}

.bfpl-sheet-optprice {
	font-size: 12px;
	color: #767676;
}

/* Colour swatches: round image, name underneath, ring when selected. */
.bfpl-sheet .is-swatches .bfpl-sheet-opt,
.bfpl-sheet .is-swatches .bfpl-sheet-opt[aria-pressed="true"] {
	min-height: 0;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.bfpl-sheet-swatch {
	display: block;
	width: 40px;
	height: 40px;
	margin: 3px auto 4px;
	border-radius: 50%;
	object-fit: cover;
}

.bfpl-sheet .is-swatches .bfpl-sheet-opt[aria-pressed="true"] .bfpl-sheet-swatch {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1c1c1e;
}

/* 10.5px keeps "Salbeigrün" on one line in a sixth of a 375px phone. */
.bfpl-sheet .is-swatches .bfpl-sheet-optname {
	font-size: 10.5px;
	font-weight: 500;
	text-align: center;
	color: #555;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

.bfpl-sheet .is-swatches .bfpl-sheet-opt[aria-pressed="true"] .bfpl-sheet-optname {
	font-weight: 700;
	color: #1c1c1e;
}

/* Extras (checkboxes): one row each — box, name, price on the right. */
.bfpl-sheet .is-checks .bfpl-sheet-opt {
	flex-direction: row;
	justify-content: flex-start;
	gap: 12px;
	min-height: 48px;
	padding: 0 14px !important;
	text-align: left;
}

.bfpl-sheet .is-checks .bfpl-sheet-optname {
	flex: 1 1 auto;
	font-weight: 500;
}

.bfpl-sheet-box {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1.5px solid #b9b3ad;
	border-radius: 5px;
}

.bfpl-sheet [aria-pressed="true"] .bfpl-sheet-box {
	border-color: #1c1c1e;
	background: #1c1c1e;
}

.bfpl-sheet [aria-pressed="true"] .bfpl-sheet-box::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 6px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.bfpl-sheet-foot {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-top: 1px solid #ebe7e2;
	background: #fff;
}

.bfpl-sheet-total {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	color: #767676;
}

.bfpl-sheet-price {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	color: #1c1c1e;
	white-space: nowrap;
}

.bfpl-sheet .bfpl-sheet-apply {
	flex: 1 1 auto;
	height: 52px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: #111 !important;
	box-shadow: none !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #fff !important;
	cursor: pointer;
}

@media (max-width: 360px) {
	.bfpl-sheet-list.is-chips {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bfpl-sheet-swatch {
		width: 34px;
		height: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bfpl-buybar,
	.bfpl-buybar.is-visible,
	.bfpl-sheet-backdrop,
	.bfpl-sheet-panel {
		transition: none;
	}
}