/* KnorrTec Quote Request – frontend styles
   Neutral baseline that inherits the active theme's typography. */

.knorrtec-qr-on-request {
	font-style: italic;
	color: #555;
}

/* ================================================================
   Single product page (kt-ps-* markup, rendered by ProductSummary's
   [kt_product_summary] shortcode). CSS ported 1:1 from the reference
   site's own <style> block -- see class-product-summary.php doc comment.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
	--kt-ps-ink: #1a1a1a;
	--kt-ps-gray-100: #e5e7eb;
	--kt-ps-gray-200: #d4d4d4;
	--kt-ps-gray-500: #6b7280;
	--kt-ps-gray-700: #374151;
	--kt-ps-brand: #1e50a3;
	--kt-ps-brand-50: #eef4fb;
	--kt-ps-brand-700: #174080;
	--kt-ps-bg-soft: #f5f7fa;
}
.kt-ps { font-family: 'Inter', system-ui, sans-serif; color: var(--kt-ps-ink); max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.kt-ps svg { display: inline-block; vertical-align: middle; }
.kt-ps svg[stroke="currentColor"],
.kt-ps svg[stroke="currentColor"] path { stroke: currentColor; fill: none; }

.kt-ps-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 0; font: 500 12px/1.4 'Inter'; color: var(--kt-ps-gray-500); border-bottom: 1px solid var(--kt-ps-gray-100); }
.kt-ps-crumbs a { color: inherit; text-decoration: none; }
.kt-ps-crumbs a:hover { color: var(--kt-ps-brand); }
.kt-ps-crumbs-sep { color: #ccc; }
.kt-ps-crumbs .is-current { color: var(--kt-ps-ink); font-weight: 700; }

.kt-ps-hero { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; padding: 40px 0; border-bottom: 1px solid var(--kt-ps-gray-100); }

.kt-ps-gallery-main { position: relative; border: 1px solid var(--kt-ps-gray-100); background: #fff; aspect-ratio: 4/3; overflow: hidden; }
.kt-ps-gallery-item { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; margin: 0; }
.kt-ps-gallery-item.is-active { display: flex; }
.kt-ps-gallery-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kt-ps-gallery-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--kt-ps-gray-500); font: 500 13px/1 'Inter'; }
.kt-ps-gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.kt-ps-gallery-thumb { aspect-ratio: 1; background: #fff; border: 1px solid var(--kt-ps-gray-200); cursor: pointer; padding: 8px; transition: border-color .15s, transform var(--kt-t-fast) var(--kt-ease-out); }
.kt-ps-gallery-thumb:hover, .kt-ps-gallery-thumb.is-active { border-color: var(--kt-ps-ink); border-width: 2px; }
.kt-ps-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.kt-ps-info { display: flex; flex-direction: column; gap: 22px; }
.kt-ps-meta-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kt-ps-meta-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kt-ps-cat-chip { font: 600 11px/1 'Inter'; letter-spacing: .12em; text-transform: uppercase; color: var(--kt-ps-gray-500); }
.kt-ps-meta-actions { display: flex; gap: 4px; }
.kt-ps-icon-btn {
	width: 38px !important; height: 38px !important;
	background: #fff !important;
	border: 1px solid var(--kt-ps-gray-200) !important;
	display: inline-flex !important;
	align-items: center !important; justify-content: center !important;
	cursor: pointer; padding: 0 !important;
	transition: border-color .15s, transform var(--kt-t-fast) var(--kt-ease-out);
	color: var(--kt-ps-gray-500) !important;
	flex-shrink: 0;
	text-decoration: none !important;
}
.kt-ps-icon-btn:hover, .kt-ps-icon-btn:focus, .kt-ps-icon-btn:active, .kt-ps-icon-btn:visited, .kt-ps-icon-btn:focus-visible {
	background: #fff !important;
	color: var(--kt-ps-gray-500) !important;
	outline: none !important;
	text-decoration: none !important;
}
.kt-ps-icon-btn:hover { border-color: var(--kt-ps-ink) !important; color: var(--kt-ps-ink) !important; }
.kt-ps-icon-btn svg {
	width: 18px !important; height: 18px !important;
	min-width: 18px !important; min-height: 18px !important;
	display: block !important;
	fill: none !important;
	stroke: var(--kt-ps-gray-500) !important;
	overflow: visible;
}
.kt-ps-icon-btn svg path { stroke: var(--kt-ps-gray-500) !important; fill: none !important; stroke-width: 1.8; }
.kt-ps-icon-btn:hover svg,
.kt-ps-icon-btn:hover svg path { stroke: var(--kt-ps-ink) !important; }

.kt-ps-title-wrap { display: flex; flex-direction: column; gap: 12px; }
.kt-ps-title { font: 800 32px/1.1 'Inter'; letter-spacing: -.01em; margin: 0; color: var(--kt-ps-ink); }
.kt-ps-sku-row { display: flex; align-items: center; gap: 14px; margin: 0; flex-wrap: wrap; font: 500 13px/1 'Inter'; }
.kt-ps-sku-item { display: flex; align-items: center; gap: 8px; }
.kt-ps-sku-item dt { font: 700 10px/1 'Inter'; letter-spacing: .18em; text-transform: uppercase; color: var(--kt-ps-gray-500); margin: 0; }
.kt-ps-sku-item dd { font: 600 13px/1 'SF Mono', 'Consolas', monospace; margin: 0; color: var(--kt-ps-ink); }

.kt-ps-lead { font: 400 15px/1.6 'Inter'; color: var(--kt-ps-gray-700); margin: 0; }

.kt-ps-length-selector { margin-top: 4px; }
.kt-ps-ls-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; position: relative; }
.kt-ps-ls-label, .kt-ps-ls-special { font: 700 10px/1 'Inter'; letter-spacing: .18em; text-transform: uppercase; color: var(--kt-ps-gray-500); }
.kt-ps-ls-special { color: var(--kt-ps-brand); text-decoration: none; transition: color .15s, transform var(--kt-t-fast) var(--kt-ease-out); cursor: pointer; }
.kt-ps-ls-special:hover { color: var(--kt-ps-ink); }
.kt-ps-ls-special-form { display: none; align-items: center; gap: 6px; }
.kt-ps-ls-special-form[data-open] { display: inline-flex; }
.kt-ps-ls-special-input {
	width: 100px; padding: 6px 10px;
	border: 1px solid var(--kt-ps-ink); background: #fff;
	font: 700 12px/1 'Inter'; color: var(--kt-ps-ink);
	outline: none; border-radius: 0;
}
.kt-ps-ls-special-input::placeholder { color: var(--kt-ps-gray-500); font-weight: 500; }
.kt-ps-ls-special-btn {
	padding: 7px 12px; background: var(--kt-ps-ink); color: #fff; border: 0;
	font: 700 10px/1 'Inter'; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
	transition: background .15s, transform var(--kt-t-fast) var(--kt-ease-out);
}
.kt-ps-ls-special-btn:hover { background: var(--kt-ps-brand); }
.kt-ps-ls-special-cancel {
	width: 24px; height: 24px; background: transparent; border: 0; cursor: pointer;
	font: 400 18px/1 'Inter'; color: var(--kt-ps-gray-500); padding: 0;
	transition: color .15s, transform var(--kt-t-fast) var(--kt-ease-out);
}
.kt-ps-ls-special-cancel:hover { color: var(--kt-ps-ink); }
.kt-ps-ls-pills { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 6px !important; }
.kt-ps-pill {
	padding: 10px 10px;
	background: #fff !important;
	border: 1px solid var(--kt-ps-gray-200) !important;
	font: 700 12px/1 'Inter';
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s, transform var(--kt-t-fast) var(--kt-ease-out);
	color: var(--kt-ps-ink) !important;
}
.kt-ps-pill:hover { background: var(--kt-ps-bg-soft) !important; border-color: var(--kt-ps-ink) !important; color: var(--kt-ps-ink) !important; }
.kt-ps-pill.is-active { background: var(--kt-ps-ink) !important; color: #fff !important; border-color: var(--kt-ps-ink) !important; }
.kt-ps-pill.is-active:hover { background: var(--kt-ps-brand) !important; border-color: var(--kt-ps-brand) !important; color: #fff !important; }
.kt-ps-ls-active { font: 500 11px/1.4 'Inter'; color: var(--kt-ps-gray-500); margin: 8px 0 0; }
.kt-ps-ls-active strong { color: var(--kt-ps-ink); font-weight: 700; }
.kt-ps-ls-sku { font-family: 'SF Mono', 'Consolas', monospace; color: var(--kt-ps-ink); }

.kt-ps-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; border-top: 1px solid var(--kt-ps-gray-100); border-bottom: 1px solid var(--kt-ps-gray-100); margin: 4px 0 0; }
.kt-ps-spec { padding: 12px 0; border-bottom: 1px solid var(--kt-ps-gray-100); }
.kt-ps-spec:nth-last-child(-n+2) { border-bottom: 0; }
.kt-ps-spec dt { font: 700 10px/1 'Inter'; letter-spacing: .18em; text-transform: uppercase; color: var(--kt-ps-gray-500); margin: 0; }
.kt-ps-spec dd { font: 600 14px/1.3 'Inter'; color: var(--kt-ps-ink); margin: 4px 0 0; }

.kt-ps-cta { display: flex; flex-direction: column; gap: 12px; margin: 0; position: relative; }
.kt-ps-cta-qty { display: flex; align-items: center; gap: 14px; }
.kt-ps-cta-qty-label { font: 700 10px/1 'Inter'; letter-spacing: .18em; text-transform: uppercase; color: var(--kt-ps-gray-500); }
.kt-ps-qty-stepper { display: inline-flex !important; align-items: center; border: 1px solid var(--kt-ps-gray-200); border-radius: 0 !important; width: auto !important; flex: 0 0 auto !important; overflow: hidden; }
.kt-ps-qty-btn {
	width: 36px !important; height: 38px !important;
	background: #fff !important;
	border: 0 !important; border-radius: 0 !important;
	cursor: pointer;
	font: 700 18px/1 'Inter';
	color: var(--kt-ps-gray-500) !important;
	padding: 0 !important;
	-webkit-appearance: none; appearance: none;
	box-shadow: none !important;
	transition: transform var(--kt-t-fast) var(--kt-ease-out);
}
.kt-ps-qty-btn:hover, .kt-ps-qty-btn:focus, .kt-ps-qty-btn:active, .kt-ps-qty-btn:focus-visible {
	background: #fff !important; color: var(--kt-ps-gray-500) !important; outline: none !important; box-shadow: none !important;
}
.kt-ps-qty-input {
	width: 44px !important; text-align: center;
	border: 0 !important;
	border-left: 1px solid var(--kt-ps-gray-200) !important;
	border-right: 1px solid var(--kt-ps-gray-200) !important;
	border-radius: 0 !important;
	height: 38px !important;
	font: 700 14px/1 'Inter';
	outline: 0 !important; box-shadow: none !important; padding: 0 !important;
	background: #fff !important; color: var(--kt-ps-ink) !important;
	-webkit-appearance: textfield; appearance: textfield; -moz-appearance: textfield;
}
.kt-ps-qty-input:focus, .kt-ps-qty-input:active, .kt-ps-qty-input:focus-visible {
	outline: none !important; box-shadow: none !important;
	border-left: 1px solid var(--kt-ps-gray-200) !important;
	border-right: 1px solid var(--kt-ps-gray-200) !important;
}
.kt-ps-qty-input::-webkit-outer-spin-button,
.kt-ps-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kt-ps-cta-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 16px; background: var(--kt-ps-ink); color: #fff; border: 0; font: 700 13px/1 'Inter'; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transition: background .15s, transform var(--kt-t-fast) var(--kt-ease-out); }
.kt-ps-cta-btn:hover { background: var(--kt-ps-brand); }
.kt-ps-cta-btn svg { width: 16px; height: 16px; }
.kt-ps-cta-secondary { display: grid; grid-template-columns: 1fr 1fr; }
.kt-ps-cta-sec { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: #fff !important; border: 1px solid var(--kt-ps-gray-200); color: var(--kt-ps-ink) !important; text-decoration: none; font: 700 11px/1 'Inter'; letter-spacing: .15em; text-transform: uppercase; transition: border-color .15s, transform var(--kt-t-fast) var(--kt-ease-out); }
.kt-ps-cta-sec + .kt-ps-cta-sec { border-left: 0; }
.kt-ps-cta-sec:hover, .kt-ps-cta-sec:focus, .kt-ps-cta-sec:active, .kt-ps-cta-sec:visited {
	background: #fff !important; color: var(--kt-ps-ink) !important; outline: none !important; text-decoration: none !important;
}
.kt-ps-cta-sec:hover { border-color: var(--kt-ps-ink) !important; }
.kt-ps-cta-sec svg { width: 14px; height: 14px; }

.kt-ps-trust { list-style: none; margin: 12px 0 0; padding: 16px 0 0; border-top: 1px solid var(--kt-ps-gray-100); display: flex; flex-direction: column; gap: 8px; }
.kt-ps-trust li { display: flex; align-items: flex-start; gap: 10px; font: 500 13px/1.4 'Inter'; color: var(--kt-ps-gray-700); }
.kt-ps-trust li svg { width: 16px; height: 16px; color: var(--kt-ps-brand); flex-shrink: 0; margin-top: 1px; }
.kt-ps-trust strong { color: var(--kt-ps-ink); font-weight: 700; }

.kt-ps-desc { padding: 48px 0; border-bottom: 1px solid var(--kt-ps-gray-100); }
.kt-ps-desc-title { font: 700 20px/1.3 'Inter'; margin: 0 0 16px; color: var(--kt-ps-ink); letter-spacing: -.005em; }
.kt-ps-desc-body, .kt-ps-desc-body p { font: 400 15px/1.7 'Inter'; color: var(--kt-ps-gray-700); }

@media (max-width: 900px) {
	.kt-ps-hero { grid-template-columns: 1fr; gap: 24px; }
	.kt-ps-title { font-size: 26px; }
}
@media (max-width: 600px) {
	.kt-ps-specs { grid-template-columns: 1fr; }
	.kt-ps-cta-secondary { grid-template-columns: 1fr; }
	.kt-ps-cta-sec + .kt-ps-cta-sec { border-left: 1px solid var(--kt-ps-gray-200); border-top: 0; }
}

/* Header "Anfragekorb" mini widget -- Vorschlag E3 from
   design/mockups/anfragekorb-button-vorschlaege.html (outline button, 2px
   brand border, always-blue icon, badge only once the cart holds
   something). Custom CSS, not Tailwind utilities -- see the doc comment on
   QuoteForm::render_mini_widget() for why. */
.knorrtec-qr-mini {
	position: relative; display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
	padding: 10px 16px 10px 12px; border: 2px solid var(--kt-brand); background: #fff; color: var(--kt-ink);
	text-decoration: none; white-space: nowrap;
	font: 700 12px/1 'Inter', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em;
	transition: border-color var(--kt-t-fast) var(--kt-ease-out), transform var(--kt-t-fast) var(--kt-ease-out);
}
.knorrtec-qr-mini:hover { border-color: var(--kt-brand-500); color: var(--kt-ink); text-decoration: none; }
.knorrtec-qr-mini:active { transform: scale(.97); }
.knorrtec-qr-mini-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--kt-brand); display: block; }

.knorrtec-qr-mini .count {
	position: absolute; top: -9px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	border-radius: 999px; background: var(--kt-brand); color: #fff; font: 700 11px/1 'Inter'; text-align: center;
	transform: scale(0); opacity: 0;
	transition: transform var(--kt-t-base) var(--kt-ease-out), opacity var(--kt-t-base) var(--kt-ease-out);
}
.knorrtec-qr-mini .count.is-visible { transform: scale(1); opacity: 1; }
.knorrtec-qr-mini .count.kt-pulse { transform: scale(1.3); }

.knorrtec-qr-mini-ping {
	position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 999px;
	border: 2px solid var(--kt-brand); opacity: 0; pointer-events: none;
}
.knorrtec-qr-mini-ping.go { animation: kt-mini-ping 550ms var(--kt-ease-out); }
@keyframes kt-mini-ping { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) {
	.knorrtec-qr-mini-ping.go { animation: none; }
}

/* FAQ accordion (Branche pages, native <details>/<summary> -- see
   fix_branche_faq_accordion.py). quote.js progressively wraps the answer
   <p> in .kt-faq-a-wrap/-inner at runtime (no change to the stored page
   content) so it can grid-rows-animate instead of snapping open/closed;
   the chevron already rotated smoothly before this (transition-transform
   in the deployed markup), just re-targeted from details[open] to this
   class so both stay in sync through the animated close too. */
.kt-faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--kt-t-base) var(--kt-ease-out); }
details.kt-faq-open .kt-faq-a-wrap { grid-template-rows: 1fr; }
.kt-faq-a-inner { overflow: hidden; }
details.kt-faq-open .faq-chevron { transform: rotate(180deg); }

/* Flash toast */
.knorrtec-qr-flash {
	display: inline-block;
	margin-left: .75em;
	padding: .2em .6em;
	background: #e6f4ea;
	color: #1e6e1e;
	border-radius: 3px;
	font-size: .9em;
}
.knorrtec-qr-flash.is-error {
	background: #fbeaea;
	color: #9b1c1c;
}

/* "Added to quote" toast (Vorschlag C in
   design/mockups/anfragekorb-animation-vorschlaege.html) -- replaces the
   inline .knorrtec-qr-flash chip for the add-to-quote success case only
   (errors and the Anfragekorb "Aktualisiert" confirmation still use the
   plain inline flash() above, both page-local actions with no product to
   show a thumbnail for). Fixed bottom-right so it stays visible even once
   the clicked button has scrolled out of view, which a chip right next to
   the button can't do on a long product list. */
.kt-add-toast {
	position: fixed; right: 20px; bottom: 20px; z-index: 9999;
	display: flex; align-items: center; gap: 12px;
	background: var(--kt-ink); color: #fff; padding: 14px 16px;
	max-width: 320px; box-sizing: border-box;
	transform: translateY(16px); opacity: 0;
	transition: transform var(--kt-t-base) var(--kt-ease-out), opacity var(--kt-t-base) var(--kt-ease-out);
}
.kt-add-toast.show { transform: translateY(0); opacity: 1; }
.kt-add-toast-thumb { width: 40px; height: 40px; flex-shrink: 0; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }
.kt-add-toast-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kt-add-toast-text { font: 600 13px/1.4 'Inter'; }
.kt-add-toast-text small { display: block; font: 400 11.5px/1.4 'Inter'; color: #b8bdc9; margin-top: 3px; font-weight: 400; }

@media (max-width: 480px) {
	.kt-add-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ================================================================
   Anfragekorb page (kt-* markup, rendered by templates/cart-page.php).
   CSS ported 1:1 from the reference site's own Anfragekorb <style> block
   (a real WooCommerce cart there, our own QuoteSession here -- see
   cart-page.php doc comment for why). Var namespace kept separate from
   the product page's --kt-ps-* (the reference itself uses two slightly
   different ink/brand shades between the two pages, not a typo).
   ================================================================ */
:root {
	--kt-ink: #0a0e1a;
	--kt-ink-50: #f5f5f5;
	--kt-ink-100: #e8e8e8;
	--kt-ink-200: #d4d4d4;
	--kt-ink-900: #14192a;
	--kt-brand: #1e50a3;
	--kt-brand-50: #eef4fb;
	--kt-brand-500: #3b6fc7;
	--kt-gray-500: #6b7280;
	--kt-gray-600: #4b5563;
	--kt-gray-700: #374151;
	--kt-content: 1320px;

	/* Shared motion vocabulary -- see design/mockups/animations-vorschlaege.html
	   for the audit these values come from. Used by every transform/opacity
	   transition added below; never invent a parallel duration/easing. */
	--kt-ease-out: cubic-bezier(.23,1,.32,1);
	--kt-t-fast: 150ms;
	--kt-t-base: 220ms;
}
@media (prefers-reduced-motion: reduce) {
	:root { --kt-t-fast: 80ms; --kt-t-base: 120ms; }
}

/* Press feedback -- every real action button site-wide gets a brief press
   scale (never the main nav, pagination or other high-frequency/page-nav
   controls, see the rejected list in the animations audit). Most
   selectors below already declare their own transition: line (either
   extended with "transform var(--kt-t-fast) var(--kt-ease-out)"
   individually above, or an existing "all .15s/.2s" that already covers
   transform) -- only #brxe-c5cf619 (the header search icon, a bare Bricks
   element with no prior transition at all) needs one declared here. Do
   NOT add a second shorthand transition: for the others, it would
   replace their existing one instead of merging with it. */
#brxe-c5cf619 {
	transition: transform var(--kt-t-fast) var(--kt-ease-out);
}
.knorrtec-qr-add:active, .kt-ps-gallery-thumb:active, .kt-ps-icon-btn:active, .kt-ps-ls-special:active,
.kt-ps-ls-special-btn:active, .kt-ps-ls-special-cancel:active, .kt-ps-pill:active, .kt-ps-qty-btn:active,
.kt-ps-cta-btn:active, .kt-ps-cta-sec:active, .kt-form-submit:active, .kt-summary-cta:active,
.kt-cat-grid ul.products li.product .button:active, .kt-view-toggle-btn:active,
.kt-search-bar-close:active, #brxe-c5cf619:active,
.kt-chip:active, .kt-as-up:active, .knorrtec-qr-remove:active, .kt-cart-area .actions button[name="update_cart"]:active
{
	transform: scale(.97);
}

.knorrtec-qr-page { max-width: var(--kt-content); margin: 0 auto; padding: 0 24px; font-family: 'Inter', system-ui, sans-serif; color: var(--kt-ink); }
.knorrtec-qr-page .knorrtec-qr-success,
.knorrtec-qr-page .knorrtec-qr-error {
	padding: 1em 1.25em;
	border-radius: 4px;
	margin-bottom: 1.5em;
}
.knorrtec-qr-page .knorrtec-qr-success { background: #e6f4ea; color: #1e6e1e; }
.knorrtec-qr-page .knorrtec-qr-error   { background: #fbeaea; color: #9b1c1c; }

/* Header: eyebrow/h1/lead + stats */
.kt-header-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: end; padding: 24px 0; border-bottom: 1px solid var(--kt-ink-100); margin-bottom: 32px; }
.kt-header-stats { border-left: 1px solid var(--kt-ink-200); padding-left: 24px; }
.kt-eyebrow-brand { font: 700 11px/1 'Inter'; letter-spacing: .25em; text-transform: uppercase; color: var(--kt-brand); margin: 0 0 12px; }
.kt-h1 { font: 700 clamp(26px,4vw,40px)/1.05 'Inter'; letter-spacing: -.01em; color: var(--kt-ink); margin: 0 0 16px; }
.kt-lead { font: 400 15px/1.6 'Inter'; color: var(--kt-gray-700); max-width: 560px; margin: 0; }
.kt-lead strong { color: var(--kt-ink); font-weight: 600; }

.kt-stat-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--kt-ink-200); align-items: baseline; }
.kt-stat-row:last-child { border-bottom: none; }
.kt-stat-key { font: 500 11px/1 'Inter'; letter-spacing: .15em; text-transform: uppercase; color: var(--kt-gray-600); margin: 0; }
.kt-stat-val { font: 700 17px/1.2 'Inter'; color: var(--kt-ink); margin: 0; }

/* Main 2-col layout */
.kt-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
.kt-col { display: flex; flex-direction: column; gap: 40px; min-width: 0; }

/* Section title bar (e.g. "01 · Artikel") */
.kt-section-bar { display: flex; align-items: baseline; gap: 10px; padding: 0 0 12px; margin: 0 0 20px; border-bottom: 2px solid var(--kt-ink); }
.kt-section-num { font: 700 11px/1 'Inter'; letter-spacing: .2em; color: var(--kt-brand); }
.kt-section-dot { font: 700 11px/1 'Inter'; color: var(--kt-gray-500); }
.kt-section-title { font: 700 11px/1 'Inter'; letter-spacing: .2em; color: var(--kt-ink); text-transform: uppercase; }

/* === Cart table === */
.kt-cart-area table.cart { border: none; background: transparent; margin: 0; width: 100%; border-collapse: collapse; }
.kt-cart-area table.cart tbody tr.cart_item {
	display: grid; grid-template-columns: 72px 1fr auto 36px; column-gap: 16px;
	align-items: start; padding: 18px 0; border-bottom: 1px solid var(--kt-ink-100);
}
.kt-cart-area table.cart tbody tr.cart_item td { border: none; padding: 0; }
.kt-cart-area td.product-thumbnail { width: 72px; }
.kt-cart-area td.product-thumbnail a { display: flex; width: 72px; height: 72px; border: 1px solid var(--kt-ink-100); padding: 6px; align-items: center; justify-content: center; }
.kt-cart-area td.product-thumbnail img { width: 100%; height: auto; max-width: 56px; max-height: 56px; object-fit: contain; margin: 0; }
.kt-cart-area td.product-name { min-width: 0; }
.kt-cart-area td.product-name a { font: 700 15px/1.35 'Inter'; color: var(--kt-ink); text-decoration: none; display: block; margin-bottom: 4px; }
.kt-cart-area td.product-name a:hover { color: var(--kt-brand); }
.kt-cart-area td.product-quantity .quantity { display: inline-flex; align-items: center; border: 1px solid var(--kt-ink-200); }
.kt-cart-area td.product-quantity input.knorrtec-qr-qty { width: 56px; padding: 8px; border: none; text-align: center; font: 600 13px/1 'Inter'; outline: none; }
.kt-cart-area td.product-remove a.knorrtec-qr-remove {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
	border: 1px solid var(--kt-ink-200); color: var(--kt-gray-600); text-decoration: none; font-size: 15px;
	background: transparent; transition: all .2s; cursor: pointer;
}
.kt-cart-area td.product-remove a.knorrtec-qr-remove:hover { background: var(--kt-ink); color: #fff; border-color: var(--kt-ink); }

.kt-cart-area .actions { padding: 14px 0 0; }
.kt-cart-area .actions button[name="update_cart"] {
	display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--kt-ink);
	border: 1px solid var(--kt-ink-200); padding: 9px 18px; cursor: pointer;
	font: 700 10px/1 'Inter'; letter-spacing: .15em; text-transform: uppercase; transition: all .2s;
}
.kt-cart-area .actions button[name="update_cart"]:hover:not(:disabled) { border-color: var(--kt-ink); background: var(--kt-ink); color: #fff; }
.kt-cart-area .actions button[name="update_cart"]:disabled { opacity: .4; cursor: default; }

.kt-cart-area .cart-empty { padding: 32px 20px; text-align: center; background: var(--kt-ink-50); border: 1px dashed var(--kt-ink-200); font: 400 14px/1.5 'Inter'; color: var(--kt-gray-700); }
.kt-cart-area .return-to-shop { margin-top: 14px; }
.kt-cart-area .return-to-shop a {
	display: inline-flex; align-items: center; gap: 8px; background: var(--kt-ink); color: #fff; border: none;
	padding: 12px 24px; font: 700 11px/1 'Inter'; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; transition: background .2s;
}
.kt-cart-area .return-to-shop a:hover { background: var(--kt-brand); }

/* Notiz-Toggle (natives <details>/<summary>) */
.kt-cart-note { margin: 8px 0 0; display: block; }
.kt-cart-note > summary { display: inline-block; font: 700 10px/1 'Inter'; letter-spacing: .16em; text-transform: uppercase; color: var(--kt-brand); cursor: pointer; list-style: none; user-select: none; }
.kt-cart-note > summary::-webkit-details-marker { display: none; }
.kt-cart-note > summary::marker { content: ''; }
.kt-cart-note > summary:hover { color: var(--kt-ink); }
.kt-cart-note-input { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--kt-ink-200); background: #fff; color: var(--kt-ink); font: 400 12px/1.5 'Inter'; outline: none; resize: vertical; }
.kt-cart-note-input:focus { border-color: var(--kt-ink); }

/* === Form === */
.kt-form-section { display: flex; align-items: baseline; gap: 10px; margin: 32px 0 20px; padding: 0 0 12px; border-bottom: 2px solid var(--kt-ink); }
.kt-form-section:first-child { margin-top: 0; }
.kt-form-section-num { font: 700 11px/1 'Inter'; letter-spacing: .2em; color: var(--kt-brand); }
.kt-form-section-dot { font: 700 11px/1 'Inter'; color: var(--kt-gray-500); }
.kt-form-section-title { font: 700 11px/1 'Inter'; letter-spacing: .2em; color: var(--kt-ink); text-transform: uppercase; }
.kt-form-subsection { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 6px; }
.kt-form-subsection-title { font: 700 9px/1 'Inter'; letter-spacing: .2em; color: var(--kt-gray-700); text-transform: uppercase; }
.kt-form-subsection-opt { font: 500 9px/1 'Inter'; letter-spacing: .1em; color: var(--kt-gray-500); }

.kt-form-fields { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.kt-field { padding: 0 7px; margin-bottom: 20px; }
.kt-field.col-100 { width: 100%; }
.kt-field.col-50 { width: 50%; }
.kt-field.col-33 { width: 33.333%; }
.kt-field label { display: block; font: 700 10px/1 'Inter'; letter-spacing: .15em; text-transform: uppercase; color: var(--kt-ink); margin: 0 0 7px; }
.kt-field.required label::after { content: ' *'; color: var(--kt-brand); }
.kt-field input[type=text], .kt-field input[type=email], .kt-field input[type=tel],
.kt-field input[type=date], .kt-field select, .kt-field textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--kt-ink-200); background: #fff; color: var(--kt-ink);
	font: 400 13px/1.4 'Inter'; outline: none; transition: border-color .2s; border-radius: 0;
}
.kt-field input:focus, .kt-field select:focus, .kt-field textarea:focus { border-color: var(--kt-ink); }
.kt-field textarea { resize: vertical; }

.kt-field-acceptance { display: flex; align-items: flex-start; gap: 8px; }
.kt-field-acceptance input[type=checkbox] { width: 15px; height: 15px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--kt-brand); }
.kt-field-acceptance label { display: block; margin: 0; flex: 1 1 auto; font: 400 13px/1.55 'Inter'; text-transform: none; letter-spacing: 0; color: var(--kt-gray-700); cursor: pointer; }
.kt-field-acceptance a { color: var(--kt-brand); text-decoration: underline; }

.kt-field-upload input[type=file] {
	width: 100%; display: block; padding: 0; border: 2px dashed var(--kt-ink-200); background: transparent; cursor: pointer;
	color: transparent; font-size: 0; transition: border-color .2s, background .2s;
}
.kt-field-upload input[type=file]:hover { border-color: var(--kt-ink); background: var(--kt-ink-50); }
.kt-field-upload input[type=file]::file-selector-button {
	display: block; width: 100%; padding: 28px 20px; margin: 0; background: transparent; color: var(--kt-ink);
	border: none; cursor: pointer; font: 700 11px/1 'Inter'; letter-spacing: .15em; text-transform: uppercase; text-align: center; transition: color .2s;
}
.kt-field-upload input[type=file]::file-selector-button:hover { color: var(--kt-brand); }

.kt-form-submit {
	width: 100%; padding: 16px 24px; background: var(--kt-ink); color: #fff; border: none; cursor: pointer;
	font: 700 12px/1 'Inter'; letter-spacing: .15em; text-transform: uppercase;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s, transform var(--kt-t-fast) var(--kt-ease-out);
}
.kt-form-submit:hover { background: var(--kt-brand); }

/* === Sidebar: dark summary box === */
.kt-sidebar-stack { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.kt-summary { background: var(--kt-ink-900); color: #fff; padding: 24px; border-left: 4px solid var(--kt-brand); display: flex; flex-direction: column; gap: 16px; }
.kt-summary-eyebrow { font: 700 10px/1 'Inter'; letter-spacing: .22em; text-transform: uppercase; color: #fff; margin: 0; }
.kt-summary-text { font: 400 13px/1.6 'Inter'; color: #d1d5db; margin: 0; }
.kt-summary-cta {
	width: 100%; padding: 14px 20px; background-color: #fff; color: var(--kt-ink); border: none;
	display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 12px/1 'Inter';
	letter-spacing: .15em; text-transform: uppercase; text-decoration: none; transition: background-color .2s, color .2s, transform var(--kt-t-fast) var(--kt-ease-out);
}
.kt-summary-cta:hover { background-color: var(--kt-brand-500); color: #fff; }
.kt-summary-cta svg { width: 13px; height: 13px; }
.kt-summary-trust-list { list-style: none; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); margin: 0; display: flex; flex-direction: column; gap: 9px; }
.kt-summary-trust-list li { display: flex; align-items: center; gap: 8px; font: 400 12px/1.4 'Inter'; color: #d1d5db; }
.kt-summary-trust-list li svg { width: 13px; height: 13px; color: var(--kt-brand); flex-shrink: 0; }

@media (max-width: 900px) {
	.kt-main-grid { grid-template-columns: 1fr; gap: 32px; }
	.kt-header-grid { grid-template-columns: 1fr; gap: 20px; }
	.kt-header-stats { border-left: none; border-top: 1px solid var(--kt-ink-200); padding: 20px 0 0; }
	.kt-sidebar-stack { position: static; }
	.kt-cart-area table.cart tbody tr.cart_item { grid-template-columns: 56px 1fr; }
	.kt-cart-area td.product-quantity, .kt-cart-area td.product-remove { grid-column: 2; }
	.kt-field.col-50, .kt-field.col-33 { width: 100%; }
}

/* ================================================================
   Category archive (kt-breadcrumbs/kt-cathero/kt-chips-row, rendered by
   CategoryArchive's [kt_category_hero] shortcode) + the native Bricks
   "woocommerce-products" grid (kt-cat-grid), restyled to match the
   reference's real category-archive page. CSS ported 1:1 from that
   reference page's own <style> block -- see class-category-archive.php doc
   comment. Reuses the --kt-ink/--kt-brand/--kt-content custom properties
   already declared above for the Anfragekorb page.
   ================================================================ */
.kt-content { max-width: var(--kt-content); width: 100%; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }

.kt-breadcrumbs { background: var(--kt-ink-50); border-bottom: 1px solid var(--kt-ink-100); padding: 10px 0; }
.kt-breadcrumbs-in { font: 400 12px/1.4 'Inter'; color: var(--kt-gray-600); letter-spacing: .02em; }
.kt-breadcrumbs-in a { color: var(--kt-gray-600); text-decoration: none; }
.kt-breadcrumbs-in a:hover { color: var(--kt-brand); }
.kt-breadcrumbs-in strong { color: var(--kt-ink); font-weight: 700; }

.kt-cathero { padding: 40px 0; border-bottom: 1px solid var(--kt-ink-100); }
.kt-cathero-eyebrow { font: 700 11px/1 'Inter'; letter-spacing: .25em; text-transform: uppercase; color: var(--kt-brand); margin: 0 0 12px; }
.kt-archive-title { font: 700 clamp(28px,4vw,48px)/1.05 'Inter'; letter-spacing: -.01em; color: var(--kt-ink); margin: 0; }
.kt-cathero-desc { font: 400 16px/1.65 'Inter'; color: var(--kt-gray-700); max-width: 640px; margin: 16px 0 0; }

.kt-chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--kt-ink-100); }
.kt-chips-label { font: 700 11px/1 'Inter'; letter-spacing: .22em; text-transform: uppercase; color: var(--kt-gray-500); margin: 0 8px 0 0; }
.kt-chip { display: inline-block; padding: 8px 16px; font: 700 11px/1 'Inter'; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--kt-ink-200); background: #fff; color: var(--kt-ink); text-decoration: none; transition: all .15s; }
.kt-chip:hover { border-color: var(--kt-ink); background: var(--kt-ink-50); }
.kt-chip.is-active { background: var(--kt-ink); color: #fff; border-color: var(--kt-ink); }

.kt-products-area { padding: 40px 0; }
.kt-cat-grid .bricks-products-widgets { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.kt-cat-grid .woocommerce-result-count { font: 400 13px/1 'Inter'; color: var(--kt-gray-600); margin: 0; }
.kt-cat-grid .woocommerce-ordering select { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; border: 1px solid var(--kt-ink-200); padding: 8px 12px; border-radius: 0; background: #fff; }

.kt-cat-grid ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border-left: 1px solid var(--kt-ink-100); border-top: 1px solid var(--kt-ink-100); }
.kt-cat-grid ul.products li.product { width: auto !important; margin: 0 !important; padding: 24px !important; border-right: 1px solid var(--kt-ink-100); border-bottom: 1px solid var(--kt-ink-100); background: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.kt-cat-grid ul.products li.product::before {
	content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 0;
	background: var(--kt-brand); transition: width .3s ease; z-index: 2;
}
.kt-cat-grid ul.products li.product:hover::before { width: 100%; }
.kt-cat-grid ul.products li.product a.woocommerce-loop-product__link { text-decoration: none; color: inherit; display: block; }
.kt-cat-grid ul.products li.product img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: contain; transform: scale(.9); margin: 0 0 16px; display: block; }
.kt-cat-grid ul.products li.product .woocommerce-loop-product__title { font: 700 14px/1.4 'Inter'; color: var(--kt-ink); margin: 0 0 8px; padding: 0; }
.kt-cat-grid ul.products li.product .price { display: none !important; }
.kt-cat-grid ul.products li.product .button {
	display: inline-flex !important; align-items: center; justify-content: space-between;
	width: 100%; margin-top: auto;
	padding: 12px 0 !important; border: none !important; background: transparent !important;
	border-top: 1px solid var(--kt-ink-100) !important; border-radius: 0 !important;
	font: 700 11px/1 'Inter'; letter-spacing: .22em; text-transform: uppercase; color: var(--kt-ink);
	transition: color .2s, transform var(--kt-t-fast) var(--kt-ease-out); text-decoration: none; cursor: pointer;
}
.kt-cat-grid ul.products li.product:hover .button { color: var(--kt-brand); }
.kt-cat-grid ul.products li.product .button::after { content: ' →'; margin-left: 8px; }

.kt-cat-grid .woocommerce-pagination ul { display: flex; gap: 0; margin: 32px 0 0; padding: 0; list-style: none; }
.kt-cat-grid .woocommerce-pagination ul li { margin: 0; }
.kt-cat-grid .woocommerce-pagination ul li a, .kt-cat-grid .woocommerce-pagination ul li span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--kt-ink-200); margin: 0 -1px 0 0;
	font: 600 13px/1 'Inter'; color: var(--kt-ink); background: #fff; text-decoration: none;
}
.kt-cat-grid .woocommerce-pagination ul li span.current { background: var(--kt-ink); color: #fff; border-color: var(--kt-ink); }
.kt-cat-grid .woocommerce-pagination ul li a:hover { background: var(--kt-ink-50); }

@media (max-width: 980px) { .kt-cat-grid ul.products { grid-template-columns: repeat(2, 1fr) !important; } }

/* ----------------------------------------------------------------
   Sidebar nav for leaf categories (kt_category_sidebar shortcode,
   inserted as a sibling of kt-cat-grid inside the same kt-content
   wrapper) -- :has() switches that wrapper from 1 to 2 columns only
   when the sidebar actually rendered something (top-level categories
   render none, see CategoryArchive::sidebar()).
   ---------------------------------------------------------------- */
/* minmax(0, 1fr), not plain 1fr -- a bare 1fr track won't shrink below
   its content's min-content width, so the product grid (long list-view
   rows etc.) would push this wider than the viewport on narrow screens. */
/* align-items: stretch (the grid default), not start -- the sidebar isn't
   a direct grid item itself, it's nested one level inside the shortcode's
   own wrapper div, so the special case where CSS Grid gives a
   *directly-sticky* grid item the full row height regardless of
   align-items doesn't apply here. With "start" that wrapper only grew to
   the sidebar's own content height, leaving position: sticky on
   .kt-archive-sidebar nowhere to actually stick within -- confirmed live,
   it silently scrolled away with the page instead of staying put. */
.kt-products-area .kt-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: stretch; }
.kt-products-area .kt-content:has(.kt-archive-sidebar) { grid-template-columns: 220px minmax(0, 1fr); }

/* The full-tree sidebar (see CategoryArchive::sidebar()) can easily run
   taller than the viewport -- one level alone (e.g. Systemverkabelung) can
   have a dozen+ siblings. Without a height cap + its own scrollbar here,
   "sticky" only pins the TOP of a too-tall box: the rest still scrolls out
   of view with the page, so the overview this tree exists for can itself
   need scrolling to see completely. Capping it to the viewport height (minus
   the sticky offset) makes it independently scrollable instead -- it stays
   in view, and only the categories (not the whole page) scroll inside it. */
.kt-archive-sidebar { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; border-right: 1px solid var(--kt-ink-100); padding-right: 20px; font-size: 13.5px; }
.kt-as-up {
	display: flex; align-items: center; gap: 7px;
	font: 700 11.5px/1 'Inter'; letter-spacing: .02em; color: var(--kt-ink);
	text-decoration: none; margin: 0 0 22px; padding: 10px 12px;
	border: 1px dashed var(--kt-ink-200); background: var(--kt-ink-50);
	transition: all .15s;
}
.kt-as-up:hover { border-color: var(--kt-brand); color: var(--kt-brand); background: var(--kt-brand-50); }
.kt-as-up-arrow { font-size: 14px; line-height: 1; }
/* One <details class="kt-as-group"> per tree depth now (see
   CategoryArchive::sidebar_levels()) -- only the current term's own level
   (and "Unterkategorien") opens by default, ancestor levels collapse to
   just their label/summary, expandable on click, so browsing deep into the
   tree doesn't leave the sidebar permanently taller than the viewport. */
.kt-as-group + .kt-as-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kt-ink-100); }
.kt-as-label {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	font: 800 10px/1 'Inter'; letter-spacing: .14em; text-transform: uppercase; color: var(--kt-gray-500);
	margin: 0 0 10px; cursor: pointer; list-style: none;
}
.kt-as-label::-webkit-details-marker { display: none; }
.kt-as-label::after {
	content: ''; width: 7px; height: 7px; flex-shrink: 0;
	border-right: 1.5px solid var(--kt-gray-500); border-bottom: 1.5px solid var(--kt-gray-500);
	transform: rotate(45deg); transition: transform .15s;
}
details[open] > .kt-as-label::after { transform: rotate(-135deg); }
details:not([open]) > .kt-as-label:hover { color: var(--kt-ink); }
.kt-as-list { list-style: none; margin: 0; padding: 0; }
.kt-as-list li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; color: var(--kt-ink); text-decoration: none; font-size: 13.5px; }
.kt-as-list li a:hover { color: var(--kt-brand); }
/* The current term has no <a> (nothing to link a page to itself) -- just
   a bold name + count directly in the <li>, so the <li> itself needs to be
   the flex row here instead of an <a>. Without this it was two block-level
   children (name, count) stacking on top of each other instead of sitting
   side by side like every linked row does -- confusing next to the rest of
   the list. */
.kt-as-list li.is-active:not(:has(a)) { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 13.5px; }
/* On the active path at an ancestor depth (still a link -- jump to that
   branch's own archive) or the current term itself (the final, non-link
   depth, bold+brand like the old standalone "current" block was). */
.kt-as-list li.is-active a, .kt-as-list li.is-active strong { color: var(--kt-brand); font-weight: 800; }
.kt-as-count { font: 400 11.5px/1 'Inter'; color: var(--kt-gray-500); flex-shrink: 0; }

.kt-archive-sidebar-mobile { display: none; }
.kt-archive-sidebar-mobile .kt-chips-row + .kt-chips-row { margin-top: 8px; }
.kt-chip-back { color: var(--kt-gray-500); border-style: dashed; }
.kt-chip-onpath { border-color: var(--kt-brand); color: var(--kt-brand); }

@media (max-width: 860px) {
	.kt-products-area .kt-content:has(.kt-archive-sidebar) { grid-template-columns: minmax(0, 1fr); }
	.kt-archive-sidebar { display: none; }
	.kt-archive-sidebar-mobile { display: block; }
	.kt-archive-sidebar-mobile .kt-chips-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 0; padding-bottom: 16px; }
	.kt-archive-sidebar-mobile .kt-chip { flex-shrink: 0; }
}

/* ----------------------------------------------------------------
   Liste/Kacheln view toggle (quote.js) -- pure CSS relayout of the
   SAME WooCommerce loop markup, no separate list template, so it
   works unchanged with the Bricks-native woocommerce-products
   element. Default view stays "Kacheln" (today's unchanged look)
   unless the visitor explicitly switches (persisted via
   localStorage) -- see quote.js.
   ---------------------------------------------------------------- */
.kt-cat-grid { transition: opacity var(--kt-t-fast) var(--kt-ease-out); }
.kt-cat-grid.is-switching { opacity: 0; }

.kt-view-toggle { display: flex; gap: 8px; margin: 0 0 16px; }
.kt-view-toggle-btn { font: 700 10.5px/1 'Inter'; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--kt-ink-200); background: #fff; padding: 8px 14px; cursor: pointer; transition: transform var(--kt-t-fast) var(--kt-ease-out); }
.kt-view-toggle-btn.is-active { background: var(--kt-ink); color: #fff; border-color: var(--kt-ink); }

/* Groups the native WooCommerce sort dropdown with the new per-page select
   (quote.js) so they read as one control cluster on the right, instead of
   the per-page select throwing off .bricks-products-widgets' own
   space-between balance against the result-count text on the left. */
.kt-widgets-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kt-per-page { display: flex; align-items: center; gap: 8px; }
.kt-per-page label { font: 400 13px/1 'Inter'; color: var(--kt-gray-600); }
.kt-per-page-select { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; border: 1px solid var(--kt-ink-200); padding: 8px 10px; border-radius: 0; background: #fff; color: var(--kt-ink); cursor: pointer; }

.kt-cat-grid-excerpt { display: none; }

.kt-cat-grid.view-list ul.products { display: flex !important; flex-direction: column; border-right: 1px solid var(--kt-ink-100); }
.kt-cat-grid.view-list ul.products li.product { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 20px !important; }
.kt-cat-grid.view-list ul.products li.product::before { display: none; }
.kt-cat-grid.view-list ul.products li.product .woocommerce-loop-product__link { display: flex !important; align-items: center; gap: 16px; flex: 1 1 260px; min-width: 0; }
.kt-cat-grid.view-list ul.products li.product img { width: 56px; height: 56px; flex: 0 0 56px; aspect-ratio: 1; margin: 0; }
.kt-cat-grid.view-list ul.products li.product .woocommerce-loop-product__title { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-cat-grid.view-list ul.products li.product .kt-cat-grid-excerpt { display: block; flex: 1 1 120px; min-width: 0; font: 400 12.5px/1.5 'Inter'; color: var(--kt-gray-600); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-cat-grid.view-list ul.products li.product .price { display: none !important; }
.kt-cat-grid.view-list ul.products li.product .button { flex: 0 0 auto; width: auto; margin: 0 0 0 auto; border-top: 0 !important; white-space: nowrap; }

/* flex-wrap above already drops the button to its own line once a row
   runs out of space (no page-level horizontal scroll at any width) --
   this just declutters further by hiding the excerpt on very small
   screens, where a truncated single line adds little. */
@media (max-width: 480px) {
	.kt-cat-grid.view-list ul.products li.product .kt-cat-grid-excerpt { display: none; }
}

/* ================================================================
   Search results (kt-sr-*, rendered by SearchResults's
   templates/search-results.php via template_include). Reuses
   kt-breadcrumbs/kt-cathero/kt-chips-row/kt-cat-grid from the category
   archive block above for the hero, filter tabs and product grid --
   only the plain-list layout for non-product results (pages, documents)
   and a shared pagination style are new.
   ================================================================ */
/* Quieter Alle/Produkte/Dokumente tabs on the search page specifically --
   .kt-chip/.kt-chips-row are the shared category-archive filter-sidebar
   chip component too, so this is scoped under .kt-sr-page rather than
   restyling that base class everywhere. Plain understated tabs (no filled
   pill background, underline for the active one) read as a secondary
   control under the result count/view toggle instead of competing with
   the hero heading above them for attention. */
.kt-sr-page .kt-chips-row { border-bottom: 0; padding: 0 0 20px; gap: 4px; }
.kt-sr-page .kt-chip {
	padding: 6px 4px; margin-right: 14px;
	font: 600 12px/1 'Inter'; letter-spacing: .01em; text-transform: none;
	border: 0; border-bottom: 2px solid transparent; background: transparent;
	color: var(--kt-gray-600); border-radius: 0;
}
.kt-sr-page .kt-chip:hover { color: var(--kt-ink); background: transparent; }
.kt-sr-page .kt-chip.is-active { color: var(--kt-ink); font-weight: 700; border-bottom-color: var(--kt-brand); background: transparent; }

.kt-sr-empty { padding: 48px 0; text-align: center; font: 400 15px/1.6 'Inter'; color: var(--kt-gray-600); }
.kt-sr-fuzzy-hint { font: 400 13px/1.5 'Inter'; color: var(--kt-gray-600); margin: 0 0 16px; }
.kt-sr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kt-ink-100); }
.kt-sr-item { display: block; padding: 20px 0; border-bottom: 1px solid var(--kt-ink-100); text-decoration: none; }
.kt-sr-item-type { display: inline-block; font: 700 10px/1 'Inter'; letter-spacing: .15em; text-transform: uppercase; color: var(--kt-brand); margin: 0 0 8px; }
.kt-sr-item-title { font: 700 17px/1.3 'Inter'; color: var(--kt-ink); margin: 0 0 6px; }
.kt-sr-item:hover .kt-sr-item-title { color: var(--kt-brand); }
.kt-sr-item-excerpt { font: 400 13px/1.6 'Inter'; color: var(--kt-gray-600); max-width: 760px; margin: 0; }

.kt-sr-pagination ul { display: flex; flex-wrap: wrap; gap: 0; margin: 32px 0 0; padding: 0; list-style: none; }
.kt-sr-pagination ul li { margin: 0; }
.kt-sr-pagination ul li a, .kt-sr-pagination ul li span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--kt-ink-200); margin: 0 -1px 0 0;
	font: 600 13px/1 'Inter'; color: var(--kt-ink); background: #fff; text-decoration: none;
}
.kt-sr-pagination ul li span.current { background: var(--kt-ink); color: #fff; border-color: var(--kt-ink); }
.kt-sr-pagination ul li a:hover { background: var(--kt-ink-50); }

/* ================================================================
   Header live search bar (kt-search-bar-*, toggled from the header's
   search icon via quote.js). Second iteration -- first tried Bricks'
   native full-screen "Icon & Overlay" search (felt disconnected from
   the page), then a small popover anchored under the icon (review
   feedback: should read as a row under the nav, not a corner box, and
   sized to the same boxed content width as the rest of the site, not
   edge-to-edge). Inserted as a real sibling right after #brx-header
   (normal flow, pushes content down -- no header-height guessing), its
   own box sized exactly like .kt-content (reuses --kt-content) so it
   lines up with the breadcrumb/hero/grid boxes above and below it.
   Shows live AJAX suggestions (SearchResults::suggest()) as you type
   instead of only submitting to the full results page.
   ================================================================ */
.kt-search-bar {
	display: grid; grid-template-rows: 0fr; border-width: 0; overflow: hidden;
	max-width: var(--kt-content); width: 100%; margin: 0 auto;
	box-sizing: border-box;
	background: var(--kt-ink-50); border-style: solid; border-color: var(--kt-ink-100);
	transition: grid-template-rows var(--kt-t-base) var(--kt-ease-out), border-width var(--kt-t-base) var(--kt-ease-out);
}
.kt-search-bar.is-open { grid-template-rows: 1fr; border-width: 0 1px 1px; }
/* No padding on THIS element, deliberately -- a box's own padding is a hard
   floor under its rendered height (border-box or not, padding can't overlap
   itself), so with padding here the 0fr row could never reach true 0: the
   closed bar sat at a persistent ~40px (exactly the 20px+20px vertical
   padding) instead of collapsing, a grey strip under the header on every
   page. The visual padding moves to the two children below instead, so this
   wrapper's own box can shrink to nothing while closed. */
.kt-search-bar-inner { overflow: hidden; min-height: 0; box-sizing: border-box; opacity: 0; transition: opacity var(--kt-t-fast) var(--kt-ease-out); }
.kt-search-bar.is-open .kt-search-bar-inner { opacity: 1; transition-delay: var(--kt-t-fast); }
.kt-search-bar-row { display: flex; align-items: center; gap: 12px; padding: 20px 24px 0; }
.kt-search-bar-input {
	flex: 1 1 auto; min-width: 0; padding: 12px 16px; border: 1px solid var(--kt-ink-200);
	font: 400 15px/1.4 'Inter', system-ui, sans-serif; color: var(--kt-ink);
	outline: none; box-sizing: border-box; background: #fff;
}
.kt-search-bar-input:focus { border-color: var(--kt-brand); }
.kt-search-bar-close {
	flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--kt-ink-200); background: #fff;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	font-size: 20px; line-height: 1; color: var(--kt-gray-600); padding: 0;
	transition: border-color .15s, color .15s, transform var(--kt-t-fast) var(--kt-ease-out);
}
.kt-search-bar-close:hover { border-color: var(--kt-ink); color: var(--kt-ink); }
.kt-search-bar-results { margin-top: 16px; padding: 0 24px 20px; }
.kt-search-bar-hint, .kt-search-bar-empty { font: 400 13px/1.5 'Inter'; color: var(--kt-gray-500); margin: 0; }
.kt-search-bar-fuzzy-hint { font: 400 13px/1.5 'Inter'; color: var(--kt-gray-500); margin: 0 0 10px; }
.kt-search-bar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.kt-search-bar-item {
	display: flex; align-items: center; gap: 12px; padding: 10px;
	background: #fff; border: 1px solid var(--kt-ink-100); text-decoration: none;
}
.kt-search-bar-item:hover { border-color: var(--kt-brand); }
.kt-search-bar-item-thumb {
	width: 44px; height: 44px; flex-shrink: 0; background: var(--kt-ink-50);
	display: flex; align-items: center; justify-content: center;
}
.kt-search-bar-item-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kt-search-bar-item-title { font: 600 13px/1.3 'Inter'; color: var(--kt-ink); }
.kt-search-bar-item:hover .kt-search-bar-item-title { color: var(--kt-brand); }
.kt-search-bar-more {
	display: inline-block; margin-top: 14px;
	font: 700 11px/1 'Inter'; letter-spacing: .12em; text-transform: uppercase;
	color: var(--kt-brand); text-decoration: none;
}
.kt-search-bar-more:hover { color: var(--kt-ink); }

@media (max-width: 480px) {
	.kt-search-bar-row { padding: 16px 16px 0; }
	.kt-search-bar-results { padding: 0 16px 16px; }
	.kt-search-bar-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) { .kt-cat-grid ul.products { grid-template-columns: 1fr !important; } }

/* Konfigurierte Position aus dem Leitungskonfigurator */
.kt-cart-config { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.45; color: #4b5563; }
.kt-cart-config-sku { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: #1e50a3; }