/* HW Landingpages 1.49.1 – Filterleiste über dem Raster, Kategorie-Chips, breitere Darstellung.
   Farben und Schriften wie hw-plp (CD: Braun #B08E75, Anthrazit #263039, Creme #FBF2ED). */

body.hw-bar-on {
	--hwb-anth: #263039;
	--hwb-brown: #B08E75;
	--hwb-brown-text: #8A6A52;
	--hwb-cream: #FBF2ED;
	--hwb-line: #E5D6CA;
	--hwb-muted: #5F6B75;
	--hwb-display: "HW Barlow Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
	--hwb-body: "HW Barlow", "Barlow", Arial, sans-serif;
}

/* ---------- Breite: wie die Einkaufswelt bis 1680 px, mittig; weiter drei Spalten ---------- */
@media (min-width: 1240px) {
	body.hw-plpwide #primary.content-area {
		--hw-plp-w: min(1680px, calc(100vw - 64px));
		float: none;
		width: var(--hw-plp-w) !important;
		max-width: none !important;
		margin-right: calc(50% - var(--hw-plp-w) / 2);
		margin-left: calc(50% - var(--hw-plp-w) / 2);
	}
}

/* Beschreibungstext und „Weitere Kategorien“ so breit wie das Raster (stehen bei Atomion unter #primary) */
@media (min-width: 1240px) {
	body.hw-plpwide.hw-plp .term-description,
	body.hw-plpwide.hw-plp .hw-plp-after {
		--hw-plp-w: min(1680px, calc(100vw - 64px));
		width: var(--hw-plp-w);
		max-width: none;
		margin-right: calc(50% - var(--hw-plp-w) / 2);
		margin-left: calc(50% - var(--hw-plp-w) / 2);
	}
}
/* Text in Themenblöcken (je Zwischenüberschrift, vom Skript gebildet), ab 1200 px zweispaltig */
@media (min-width: 1200px) {
	body.hw-bar-on .term-description.hw-desc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 64px; align-items: start; }
}
body.hw-bar-on .term-description .hw-desc-part { min-width: 0; }
body.hw-bar-on .term-description .hw-desc-part > h2:first-child { margin-top: 0; }
body.hw-bar-on .term-description .hw-desc-part + .hw-desc-part { margin-top: 18px; }
@media (min-width: 1200px) {
	body.hw-bar-on .term-description.hw-desc-cols .hw-desc-part:nth-child(2) { margin-top: 0; }
}

/* Panoramas im Raster: nie breiter als die Originaldatei (max-width kommt aus den Bildmetadaten), mittig */
body.hw-plp li.product.hw-plp-pano a.atomion-product-image img { display: block; margin-right: auto; margin-left: auto; }

/* ---------- Ohne Seitenleiste (erst wenn das Skript Filter und Kundenstimmen verschoben hat) ---------- */
body.hw-plpbar-ready #shop-sidebar { display: none !important; }
body.hw-plpbar-ready .sidebar-active div > ul.products,
body.hw-plpbar-ready #primary ul.products {
	float: none !important;
	width: 100% !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* Atomion stellt #primary am Handy auf eine Flex-Spalte mit Reihenfolgen um (Kopfzeile 1, Raster 5):
   Chips und Leiste nach Kopfzeile und Einkaufswelt, vor dem Raster */
body.hw-bar-on .hw-plpcats,
body.hw-bar-on .hw-plpbar { order: 1; }

/* ---------- Kategorien als Chips ---------- */
.hw-plpcats { clear: both; margin: 0 0 14px; min-width: 0; }
body.hw-bar-on .hw-plpcats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.hw-bar-on .hw-plpcats__list li { margin: 0; padding: 0; list-style: none; }
body.hw-bar-on .hw-plpcats__list li::marker { content: none; }
body.hw-bar-on a.hw-plpcats__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--hwb-line);
	border-radius: 10px 0 10px 0;
	background: #fff;
	color: var(--hwb-anth);
	font-family: var(--hwb-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
body.hw-bar-on a.hw-plpcats__chip:hover { border-color: var(--hwb-brown); color: var(--hwb-anth); }
body.hw-bar-on a.hw-plpcats__chip:focus-visible { outline: 2px solid var(--hwb-brown-text); outline-offset: 2px; }
body.hw-bar-on a.hw-plpcats__chip.is-current { background: var(--hwb-anth); border-color: var(--hwb-anth); color: #fff; }
body.hw-bar-on a.hw-plpcats__chip--back { background: var(--hwb-cream); border-color: var(--hwb-cream); }
.hw-plpcats__count { font-weight: 400; color: var(--hwb-muted); }
.hw-plpcats__chip.is-current .hw-plpcats__count { color: #D9C9BC; }
@media (max-width: 768px) {
	body.hw-bar-on .hw-plpcats__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 2px 28px 4px 2px;
		margin: -2px 0 0 -2px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
	}
	body.hw-bar-on .hw-plpcats__list::-webkit-scrollbar { display: none; }
	body.hw-bar-on .hw-plpcats__list li { flex: none; scroll-snap-align: start; }
}

/* ---------- Leiste: Filter, gewählte Filter, Ergebniszahl, Sortierung ---------- */
.hw-plpbar { clear: both; margin: 0 0 22px; }
.hw-plpbar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 12px 0;
	border-top: 1px solid var(--hwb-line);
	border-bottom: 1px solid var(--hwb-line);
}
body.hw-bar-on button.hw-plpbar__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 10px 0 10px 0;
	background: var(--hwb-anth);
	color: #fff;
	font-family: var(--hwb-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: none;
	cursor: pointer;
}
body.hw-bar-on button.hw-plpbar__toggle[hidden] { display: none; }
body.hw-bar-on button.hw-plpbar__toggle:hover { background: #33414D; }
body.hw-bar-on button.hw-plpbar__toggle:focus-visible { outline: 2px solid var(--hwb-brown-text); outline-offset: 2px; }
body.hw-bar-on button.hw-plpbar__toggle[aria-expanded="true"] { background: var(--hwb-brown-text); }
.hw-plpbar__badge {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--hwb-cream);
	color: var(--hwb-anth);
	font-family: var(--hwb-body);
	font-size: 13px;
	letter-spacing: 0;
}
.hw-plpbar__badge[hidden] { display: none; }
.hw-plpbar__active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
body.hw-bar-on a.hw-plpbar__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px;
	border-radius: 10px 0 10px 0;
	background: var(--hwb-cream);
	color: var(--hwb-anth);
	font-family: var(--hwb-body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
body.hw-bar-on a.hw-plpbar__chip:hover { background: #F1E2D7; }
body.hw-bar-on a.hw-plpbar__reset { color: var(--hwb-brown-text); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.hw-plpbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-left: auto; }
body.hw-bar-on .hw-plpbar__tools .woocommerce-result-count { float: none; margin: 0; padding: 0; color: var(--hwb-muted); font-size: 14px; }
body.hw-bar-on .hw-plpbar__tools form.woocommerce-ordering { float: none; width: auto; margin: 0; padding: 0; }
body.hw-bar-on .hw-plpbar__tools select.orderby {
	min-height: 44px;
	width: auto;
	margin: 0;
	padding: 0 40px 0 14px;
	border: 1px solid var(--hwb-line);
	border-radius: 10px 0 10px 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23263039' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
	color: var(--hwb-anth);
	font-family: var(--hwb-body);
	font-size: 15px;
	font-weight: 600;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* ---------- Aufgeklappte Filter ---------- */
.hw-plpbar__panel[hidden] { display: none !important; }
.hw-plpbar__sheet {
	margin-top: 14px;
	padding: clamp(18px, 2.4vw, 30px);
	border-radius: 22px 0 22px 0;
	background: var(--hwb-cream);
}
.hw-plpbar__sheet-head, .hw-plpbar__sheet-foot { display: none; }
body.hw-bar-on .hw-plpbar__fe .wpc-filters-open-button-container,
body.hw-bar-on .hw-plpbar__fe .wpc-filter-header,
body.hw-bar-on .hw-plpbar__fe .wpc-filter-search-wrapper,
body.hw-bar-on .hw-plpbar__fe .wpc-filters-widget-controls-container,
body.hw-bar-on .hw-plpbar__fe .wpc-widget-close-container,
body.hw-bar-on .hw-plpbar__fe .wpc-filter-set-widget-title,
body.hw-bar-on .hw-plpbar__fe .wpc-widget-popup-title,
body.hw-bar-on .hw-plpbar__fe .wpc-inner-widget-chips-wrapper,
body.hw-bar-on .hw-plpbar__fe .wpc-filter-chips-list,
body.hw-bar-on .hw-plpbar__fe .wpc-spinner,
body.hw-bar-on .hw-plpbar__fe .wpc-posts-found { display: none !important; }
body.hw-bar-on .hw-plpbar__fe .wpc-filters-widget-content,
body.hw-bar-on .hw-plpbar__fe .wpc-filters-widget-wrapper,
body.hw-bar-on .hw-plpbar__fe .wpc-filters-section,
body.hw-bar-on .hw-plpbar__fe .wpc-filter-content {
	display: block !important;
	position: static !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	overflow: visible !important;
}
body.hw-bar-on .hw-plpbar__fe .wpc-filter-content {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px 32px;
}
.hw-plpbar__group { min-width: 0; }
body.hw-bar-on p.hw-plpbar__group-title {
	margin: 0 0 10px;
	font-family: var(--hwb-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hwb-brown-text);
}
body.hw-bar-on ul.hw-plpbar__list {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	list-style: none;
}
body.hw-bar-on ul.hw-plpbar__list li.wpc-term-item { display: block; margin: 0 !important; padding: 0 !important; list-style: none; }
body.hw-bar-on ul.hw-plpbar__list li.wpc-term-item[hidden] { display: none !important; }
body.hw-bar-on ul.hw-plpbar__list li::marker { content: none; }
body.hw-bar-on ul.hw-plpbar__list .wpc-term-item-content-wrapper { display: block; margin: 0; padding: 0; }
body.hw-bar-on ul.hw-plpbar__list .atomion-checkbox-style {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}
body.hw-bar-on ul.hw-plpbar__list label {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 1px solid var(--hwb-line);
	border-radius: 10px 0 10px 0;
	background: #fff;
	color: var(--hwb-anth);
	font-family: var(--hwb-body);
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
body.hw-bar-on ul.hw-plpbar__list label:hover { border-color: var(--hwb-brown); }
body.hw-bar-on ul.hw-plpbar__list label a,
body.hw-bar-on ul.hw-plpbar__list label a:hover { color: inherit !important; font-weight: 600; text-decoration: none !important; }
body.hw-bar-on ul.hw-plpbar__list .wpc-term-count { width: auto !important; color: var(--hwb-muted); font-size: 13px; }
body.hw-bar-on ul.hw-plpbar__list .wpc-term-count-brackets-open,
body.hw-bar-on ul.hw-plpbar__list .wpc-term-count-brackets-close { display: none; }
body.hw-bar-on ul.hw-plpbar__list li.wpc-term-selected label { border-color: var(--hwb-anth); background: var(--hwb-anth); color: #fff; }
body.hw-bar-on ul.hw-plpbar__list li.wpc-term-selected .wpc-term-count { color: #D9C9BC; }
/* Farbpunkte */
body.hw-bar-on ul.hw-plpbar__list li.hw-sw-wandbilder-rot label::before,
body.hw-bar-on ul.hw-plpbar__list li.hw-sw-wandbilder-gelb label::before,
body.hw-bar-on ul.hw-plpbar__list li.hw-sw-wandbilder-gruen label::before,
body.hw-bar-on ul.hw-plpbar__list li.hw-sw-wandbilder-blau label::before,
body.hw-bar-on ul.hw-plpbar__list li.hw-sw-monochrom label::before,
body.hw-bar-on ul.hw-plpbar__list li.hw-sw-chromakey label::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
body.hw-bar-on li.hw-sw-wandbilder-rot label::before { background: #C0392B; }
body.hw-bar-on li.hw-sw-wandbilder-gelb label::before { background: #E8B90C; }
body.hw-bar-on li.hw-sw-wandbilder-gruen label::before { background: #3C8D50; }
body.hw-bar-on li.hw-sw-wandbilder-blau label::before { background: #2F6DB5; }
body.hw-bar-on li.hw-sw-monochrom label::before { background: linear-gradient(90deg, #111 50%, #fff 50%); }
body.hw-bar-on li.hw-sw-chromakey label::before { background: conic-gradient(#111 0 50%, #fff 0 75%, #E8B90C 0); }

/* ---------- Handy: Blatt von unten ---------- */
@media (max-width: 768px) {
	.hw-plpbar__row { gap: 10px; }
	.hw-plpbar__tools { margin-left: auto; }
	/* Motivzahl steht schon in den Vorteilen unter der H1 */
	body.hw-bar-on .hw-plpbar__tools .woocommerce-result-count { display: none; }
	.hw-plpbar__panel {
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: flex;
		align-items: flex-end;
		background: rgba(26, 34, 41, 0.55);
	}
	.hw-plpbar__sheet {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-height: 88vh;
		margin: 0;
		padding: 0;
		overflow: hidden;
		border-radius: 22px 0 0 0;
		background: #fff;
	}
	.hw-plpbar__sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 20px;
		border-bottom: 1px solid var(--hwb-line);
	}
	.hw-plpbar__sheet-title { font-family: var(--hwb-display); font-size: 22px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hwb-anth); }
	body.hw-bar-on button.hw-plpbar__close {
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--hwb-anth);
		font-size: 30px;
		line-height: 1;
		cursor: pointer;
	}
	.hw-plpbar__groups { flex: 1 1 auto; padding: 18px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	body.hw-bar-on .hw-plpbar__fe .wpc-filter-content { grid-template-columns: 1fr; }
	.hw-plpbar__sheet-foot { display: block; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hwb-line); }
	body.hw-bar-on button.hw-plpbar__done {
		width: 100%;
		min-height: 48px;
		margin: 0;
		border: 0;
		border-radius: 10px 0 10px 0;
		background: var(--hwb-anth);
		color: #fff;
		font-family: var(--hwb-display);
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		cursor: pointer;
	}
	body.hw-plpbar-sheet { overflow: hidden; }
}

/* ---------- Kundenstimmen unter dem Raster ---------- */
.hw-plp-quotes { margin-top: clamp(24px, 3vw, 40px); }
.hw-plp-quotes .widget { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	body.hw-bar-on a.hw-plpcats__chip,
	body.hw-bar-on ul.hw-plpbar__list label { transition: none; }
}