/* ==========================================================================
   Kondido Configurator — widget styling
   ==========================================================================
   Enqueued only on pages containing [kondido_configurator], or a
   configurable product's Single Product page (see
   kondido_configurator_enqueue_assets() in kondido-configurator.php).

   Reuses the theme's own design tokens and component classes (colors,
   type, spacing, radius, shadows, .btn/.btn-solid/.btn-outline,
   .section-label-text) defined globally in the theme's style.css — this
   file never invents a parallel design system, only configurator-specific
   layout (the two-column .kc-layout, step cards, progress header, price/
   nav action bar) built from those same tokens.
   ========================================================================== */

.kondido-configurator {
	max-width: 1180px;
	margin: 0 auto;
}

/* ============================================================
   TWO-COLUMN EDITORIAL LAYOUT
   .kc-visual (left, standalone entry flow only — see render_wizard()'s
   $show_visual param) + .kc-panel (right, the wizard itself). On Single
   Product, .kc-layout has only .kc-panel as a child and simply behaves as
   a single column — WooCommerce's own gallery already sits to the left of
   the whole summary column.
   ============================================================ */
.kc-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	align-items: start;
}
.kondido-configurator.kc-has-visual .kc-layout {
	grid-template-columns: 5fr 7fr;
}
.kc-visual,
.kc-panel {
	min-width: 0;
}

/* ---- Visual pane (product image + identity) ----
   Sticky on desktop only, matching the exact same safe pattern already
   used for the Single Product summary column (single-product.css) — this
   pane's containing block is .kc-layout itself, nothing taller shares it,
   so it cannot escape into unrelated content the way the earlier
   gallery/tabs bug did before that fix. */
.kc-visual {
	position: sticky;
	top: calc(var(--nav-h-solid) + 32px);
}
.kc-visual-media {
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	background: var(--cream-deep);
	/* Reserved for a future live visual preview (e.g. a canvas reflecting
	   the current selections) — the product image is today's content for
	   this pane, but the pane itself is already structured to host it. */
}
.kc-visual-media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.kc-visual-body {
	margin-top: 24px;
}
.kc-visual-body .section-label-text {
	display: block;
	margin-bottom: 10px;
}
.kc-visual-title {
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.2;
	margin-bottom: 12px;
}
.kc-visual-desc {
	color: var(--text-muted);
	font-size: var(--text-md);
	line-height: 1.75;
	max-width: 46ch;
}

/* ============================================================
   SINGLE PRODUCT — OPTIONAL MODE TOGGLE
   .kc-standard-panel (WooCommerce's own title/price/excerpt/add-to-cart,
   wrapped by Kondido_Configurator_Single_Product_Integration) and
   .kc-configurator-panel (this wizard) are siblings inside the summary
   column; assets/js/configurator.js toggles which is hidden. Neither
   needs its own visual treatment beyond that — each renders using
   whatever already styles its contents (WooCommerce/theme CSS for the
   former, the rules below for the latter).
   ============================================================ */
.kc-configure-toggle {
	margin-top: 14px;
}

/* ---- Fit the first viewport (desktop only — see CORE PRINCIPLE: the
   product must stay immediately purchasable above the fold, and the
   configurator, once activated, must be usable without scrolling the
   page). Scoped to configurable products only via the body class added
   by Kondido_Configurator_Single_Product_Integration::add_body_class() —
   an ordinary Single Product page is untouched. 150px matches this
   theme's own nav-clearance padding-top (single-product.css); the
   remaining ~100px covers the breadcrumb and a comfortable bottom
   margin, so this is intentionally a little conservative rather than
   exact — "approximately" fits, never clips content, and mobile (where
   this requirement doesn't apply) simply scrolls as normal below. */
@media (min-width: 901px) {
	body.kondido-configurable-product .kondido-product-top {
		min-height: calc(100svh - 250px);
		align-items: center;
	}
}

/* ============================================================
   PRODUCT-SELECTION GRID (entry flow A, no product chosen yet)
   ============================================================ */
.kondido-configurator-grid {
	max-width: 1200px;
	margin: 0 auto;
}
.kc-product-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}
.kc-product-card {
	border-radius: var(--r);
	background: var(--white);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kc-product-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}
.kc-product-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.kc-product-card-image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cream);
}
.kc-product-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 800ms var(--ease);
}
.kc-product-card:hover .kc-product-card-image img {
	transform: scale(1.05);
}
.kc-product-card-badge {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	padding: 5px 12px;
	border-radius: 30px;
	background: var(--white);
	color: var(--accent-deep);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.kc-product-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 24px 26px;
}
.kc-product-card-title {
	font-size: clamp(20px, 2vw, 23px);
	margin: 0 0 8px;
}
.kc-product-card-desc {
	margin: 0 0 20px;
	color: var(--text-muted);
	font-size: var(--text-sm);
	line-height: 1.6;
	flex: 1;
}
.kc-product-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--border-soft);
}
.kc-product-card-price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--text-md);
	color: var(--ink);
}
.kc-product-card-price-prefix {
	font-family: inherit;
	font-weight: 500;
	font-size: var(--text-xs);
	color: var(--text-muted);
	text-transform: lowercase;
}
/* Compound selector (two classes) so this override wins regardless of
   whether the theme's style.css or this stylesheet prints last. */
.btn-solid.kc-product-card-cta {
	padding: 10px 22px;
	font-size: var(--text-sm);
}

/* ---- Shop / Related Products loop — optional-mode secondary CTA ----
   A quiet text link appended after WooCommerce's own native Add to Cart
   button (see class-kondido-configurator-loop-integration.php) — never a
   second competing button. Generic enough to work inside either the Shop
   archive card or the Related Products card without depending on either
   stylesheet's own card rules. */
.kc-loop-configure-link {
	display: block;
	margin: 6px 24px 22px;
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--dur-fast);
}
.kc-loop-configure-link:hover {
	color: var(--accent-deep);
}
@media (max-width: 768px) {
	.kc-loop-configure-link {
		margin: 6px 18px 18px;
	}
}

/* ============================================================
   WIZARD PANEL — shared chrome (demo notice, back link, progress)
   ============================================================ */
.kc-back-to-grid {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	color: var(--text-muted);
	font-size: var(--text-sm);
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: color var(--dur-fast);
}
.kc-back-to-grid:hover {
	color: var(--accent-deep);
}

.kc-demo-notice {
	margin: 0 0 24px;
	padding: 10px 16px;
	border: 1px dashed var(--border-soft);
	border-radius: var(--r);
	background: var(--cream);
	color: var(--text-muted);
	font-size: var(--text-xs);
	letter-spacing: 0.01em;
}

/* ---- Progress header ----
   Replaces the old horizontally-scrolling 8-item step list entirely: a
   minimal eyebrow count, an optional "what's next" hint, and a thin
   progress line — no per-step labels laid out side by side, so there is
   never a horizontal scrollbar here at any viewport width. Text content
   and the fill width are set by assets/js/configurator.js on every step
   change (updateProgressHeader()); nothing here depends on JS for the
   static layout, only for the live values. */
.kc-progress-header {
	margin-bottom: 32px;
}
.kc-progress-toprow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}
.kc-progress-count {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-deep);
}
.kc-progress-count-mobile {
	display: none;
}
.kc-progress-next {
	font-size: var(--text-sm);
	color: var(--text-muted);
}
.kc-progress-next:empty {
	display: none;
}
.kc-progress-track {
	position: relative;
	width: 100%;
	height: 1px;
	background: var(--border-soft);
}
.kc-progress-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	background: var(--accent-deep);
	width: 12.5%;
	transition: width var(--dur) var(--ease);
}

/* ============================================================
   STEPS
   ============================================================ */
.kc-step {
	display: none;
}
.kc-step.active {
	display: block;
	animation: kc-fade 300ms var(--ease);
}
@keyframes kc-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.kc-step-title {
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.15;
	margin-bottom: 10px;
}
.kc-step-help {
	color: var(--text-muted);
	font-size: var(--text-md);
	line-height: 1.6;
	max-width: 52ch;
	margin: 0 0 28px;
}

/* ---- Choice option cards ----
   Refined selectable cards, not generic form controls: strong label
   hierarchy (display-serif primary label), secondary meta info, a subtle
   border that only deepens/tints on selection — no checkbox/radio-style
   iconography, in keeping with the site's restrained visual language. */
.kc-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}
.kc-option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 24px 22px;
	border: 1px solid var(--border-soft);
	border-radius: var(--r);
	background: var(--white);
	cursor: pointer;
	text-align: start;
	transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.kc-option:hover {
	border-color: var(--accent);
}
.kc-option:focus-visible {
	outline: 2px solid var(--accent-deep);
	outline-offset: 2px;
}
.kc-option.selected {
	border-color: var(--accent-deep);
	background: var(--cream);
	box-shadow: inset 3px 0 0 var(--accent-deep);
}
.kc-option-label {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
}
.kc-option-meta {
	font-size: var(--text-xs);
	letter-spacing: 0.02em;
	color: var(--text-muted);
}

/* Color swatches: a circle painted with the option's own color sits
   above the label, so "Gold"/"Ivory" etc. read visually, not just as
   text. */
.kc-option-swatch {
	align-items: center;
	text-align: center;
}
.kc-option-swatch::before {
	content: "";
	width: 38px;
	height: 38px;
	border-radius: 50%;
	margin-bottom: 8px;
	background: var(--kc-swatch, var(--cream-deep));
	box-shadow: inset 0 0 0 1px var(--border-soft);
}
.kc-option-swatch.selected::before {
	box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--accent-deep);
}
.kc-option-swatch.selected {
	box-shadow: none;
}

/* ---- Taste-profile scales ---- */
.kc-scale + .kc-scale {
	margin-top: 30px;
}
.kc-scale-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
}
.kc-scale-head label {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 500;
	color: var(--ink);
}
.kc-scale-value {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--accent-deep);
}
.kc-scale input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 3px;
	background: var(--border-soft);
	outline: none;
}
.kc-scale input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent-deep);
	border: 2px solid var(--white);
	box-shadow: 0 0 0 1px var(--accent-deep);
	cursor: pointer;
}
.kc-scale input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 2px solid var(--white);
	border-radius: 50%;
	background: var(--accent-deep);
	box-shadow: 0 0 0 1px var(--accent-deep);
	cursor: pointer;
}
.kc-scale-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: var(--text-xs);
	color: var(--text-muted);
}

/* ---- Summary step ----
   A compact, grouped two-column grid (label above value per cell) rather
   than a long single-column table — keeps the final step's height close
   to every other step's instead of growing into a tall list. */
.kc-summary-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 28px;
	margin: 0 0 20px;
}
.kc-summary-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 0;
	border-bottom: 1px solid var(--border-soft);
}
.kc-summary-row dt {
	font-size: var(--text-xs);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.kc-summary-row dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
}

/* "Donya empfiehlt" — a quiet, non-alarming note (background tint + a
   thin accent rule, mirroring .order-promise/.about-quote elsewhere in
   the theme), never styled as an error/warning. */
.kc-recommendations:empty {
	display: none;
}
.kc-recommendations {
	margin-bottom: 20px;
	padding: 18px 20px;
	border-radius: var(--r);
	background: var(--cream);
	border-inline-start: 2px solid var(--accent-deep);
}
.kc-recommendations h3 {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-deep);
	margin-bottom: 8px;
}
.kc-recommendations ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.kc-recommendations li {
	font-size: var(--text-base);
	color: var(--text-muted);
}

.kc-incompatibilities:empty {
	display: none;
}
.kc-incompatibilities {
	margin-bottom: 20px;
	padding: 18px 20px;
	border-radius: var(--r);
	background: var(--cream);
	border-inline-start: 3px solid var(--rose-deep);
}
.kc-incompatibilities ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.kc-incompatibilities li {
	font-size: var(--text-base);
	color: var(--ink);
}

/* ---- Inline validation feedback ---- */
.kc-feedback {
	min-height: 1.2em;
	margin: 4px 0 0;
	font-size: var(--text-sm);
}
.kc-feedback-error {
	color: var(--rose-deep);
}

/* ---- Add-to-cart success ---- */
.kc-cart-success {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-top: 16px;
	padding: 18px 22px;
	border-radius: var(--r);
	background: var(--cream);
	border-inline-start: 3px solid var(--accent-deep);
}
.kc-cart-success[hidden] {
	display: none;
}
.kc-cart-success p {
	margin: 0;
	font-size: var(--text-md);
	font-weight: 500;
	color: var(--ink);
}

/* ============================================================
   ACTION BAR — price + Back/Weiter/In den Warenkorb as one designed unit
   ============================================================ */
.kc-action-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px 28px;
	margin-top: 44px;
	padding: 26px 30px;
	border: 1px solid var(--border-soft);
	border-radius: var(--r);
	background: var(--cream-soft);
}
.kc-action-price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kc-price-label {
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.kc-price-value {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 32px;
	color: var(--ink);
}
.kc-action-nav {
	display: flex;
	align-items: center;
	gap: 14px;
}
.btn[hidden] {
	display: none;
}

.kc-unavailable {
	text-align: center;
	color: var(--text-muted);
	padding: 40px 20px;
}

/* ============================================================
   COMPACT MODE — Single Product embed (required-mode immediate wizard,
   or the optional-mode toggle). Reuses :not(.kc-has-visual) — the same
   flag that already means "no left-hand visual pane of its own, because
   this is embedded beside WooCommerce's gallery" — to also mean "keep
   every step's height tight," since this context shares the viewport
   with the gallery/standard panel and must fit above the fold (see the
   SINGLE PRODUCT — OPTIONAL MODE TOGGLE section above). The standalone
   [kondido_configurator] page keeps its more generous, unhurried spacing.
   ============================================================ */
.kondido-configurator:not(.kc-has-visual) .kc-demo-notice {
	margin-bottom: 10px;
	padding: 7px 14px;
}
.kondido-configurator:not(.kc-has-visual) .kc-back-to-grid {
	margin-bottom: 8px;
}
.kondido-configurator:not(.kc-has-visual) .kc-progress-header {
	margin-bottom: 14px;
}
.kondido-configurator:not(.kc-has-visual) .kc-step-title {
	font-size: clamp(21px, 2.2vw, 26px);
	margin-bottom: 6px;
}
.kondido-configurator:not(.kc-has-visual) .kc-step-help {
	margin-bottom: 16px;
}
.kondido-configurator:not(.kc-has-visual) .kc-options {
	gap: 10px;
}
.kondido-configurator:not(.kc-has-visual) .kc-option {
	padding: 14px 16px;
}
.kondido-configurator:not(.kc-has-visual) .kc-option-label {
	font-size: 18px;
}
.kondido-configurator:not(.kc-has-visual) .kc-scale + .kc-scale {
	margin-top: 16px;
}
/* The summary step is the tallest (2-column grid + a possible
   recommendation/incompatibility note on top of the usual progress
   header + action bar), so it gets the most aggressive tightening here. */
.kondido-configurator:not(.kc-has-visual) .kc-summary-list {
	margin-bottom: 12px;
}
.kondido-configurator:not(.kc-has-visual) .kc-summary-row {
	padding: 6px 0;
}
.kondido-configurator:not(.kc-has-visual) .kc-recommendations,
.kondido-configurator:not(.kc-has-visual) .kc-incompatibilities {
	padding: 12px 16px;
	margin-bottom: 12px;
}
.kondido-configurator:not(.kc-has-visual) .kc-action-bar {
	margin-top: 14px;
	padding: 16px 20px;
}
.kondido-configurator:not(.kc-has-visual) .kc-price-value {
	font-size: 24px;
}

/* ============================================================
   RESPONSIVE
   Desktop >= 1200: full two-column editorial layout (.kc-has-visual).
   1024/tablet: single column, unhurried spacing, no cramped controls.
   Mobile (<=640): product visual first (DOM order already puts .kc-visual
   before .kc-panel), configuration second, compact progress format, full
   width action bar — never a horizontal scrollbar or overflow.
   ============================================================ */
@media (max-width: 1199px) {
	.kondido-configurator.kc-has-visual .kc-layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.kc-visual {
		position: static;
	}
	.kc-visual-media img {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 900px) {
	.kc-options {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

@media (max-width: 640px) {
	.kc-progress-count-desktop {
		display: none;
	}
	.kc-progress-count-mobile {
		display: inline;
	}
	.kc-progress-next {
		display: none;
	}
	.kc-options {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.kc-option {
		padding: 16px 14px;
	}
	.kc-option-label {
		font-size: 18px;
	}
	.kc-step-title {
		margin-bottom: 8px;
	}
	.kc-step-help {
		margin-bottom: 22px;
	}
	.kc-action-bar {
		padding: 20px;
	}
	.kc-action-nav {
		width: 100%;
	}
	/* flex:1 alone isn't enough here: the global .btn class sets
	   white-space:nowrap with generous padding, and a flex item's default
	   min-width:auto uses that nowrap text's full intrinsic width as its
	   floor — on a narrow viewport two such buttons side by side (e.g.
	   "Zurück" + "In den Warenkorb") don't actually shrink to fit, they
	   overflow past the viewport edge (silently, since html has
	   overflow-x:clip site-wide, so it never shows as a scrollbar — easy
	   to miss without explicitly checking element bounds). min-width:0
	   lets flexbox shrink the item to its track; allowing the label to
	   wrap onto a second line keeps the text fully readable instead of
	   being clipped once it no longer fits on one line. */
	.kc-action-nav .btn {
		flex: 1;
		min-width: 0;
		padding: 14px 12px;
		white-space: normal;
		text-align: center;
		line-height: 1.25;
	}
	.kc-price-value {
		font-size: 26px;
	}
	.kc-product-cards {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.kc-visual-media img {
		aspect-ratio: 4 / 3;
	}
	.kc-summary-list {
		grid-template-columns: 1fr;
	}
}