/* 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; }
.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;
	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; 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;
}
.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;
}
.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;
	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;
}
.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; }
.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; }
.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; }
}

/* Mini widget (header "Anfrage stellen" button + live counter) is styled
   entirely via Tailwind utility classes in the PHP markup itself -- see
   QuoteForm::render_mini_widget() -- not custom CSS here. */

/* 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;
}

/* ================================================================
   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-500: #3b6fc7;
	--kt-gray-500: #6b7280;
	--kt-gray-600: #4b5563;
	--kt-gray-700: #374151;
	--kt-content: 1320px;
}

.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;
}
.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;
}
.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; 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; } }
@media (max-width: 540px) { .kt-cat-grid ul.products { grid-template-columns: 1fr !important; } }