/**
 * Mobile PDP colour/image swatch summary + slide-up "CHOOSE YOUR COLOUR" panel.
 *
 * Paired with js/konte-pdp-color-summary.js. The compact summary (3 chips +
 * "+N Colours" + a right-aligned "Choose a colour" label) sits at the top of the
 * summary column on mobile only — directly under the gallery image and above the
 * product title. Tapping a chip selects that colour; tapping "+N Colours" or
 * "Choose a colour" opens the bottom sheet. The full inline WCBoost swatch row is
 * left to style.css. Desktop is untouched.
 *
 * @package Konte Child
 */

/* Summary hidden on desktop — base rule outside the media query. */
.kgp-color-summary {
	display: none;
}

@media (max-width: 767.98px) {


	.kcp-sheet {
		    height: 30vh !important;
	}


	/* Hide the full inline colour/image swatch row (the variations-table row that
	   lists every swatch) on mobile — colour is chosen via the summary chips + the
	   slide-up "CHOOSE YOUR COLOUR" sheet instead. The row is only display:none, so
	   the real <li>s stay in the DOM and summary/sheet taps still select them. The
	   size row (--label / .kss) is left visible. */
	body.konte-variable-pdp .variations tr:has(.wcboost-variation-swatches--color),
	body.konte-variable-pdp .variations tr:has(.wcboost-variation-swatches--image) {
		/* !important beats the parent theme's floated `.variations tr{display:block}`
		   (konte/woocommerce.css), which otherwise out-weighs this rule. */
		display: none !important;
	}

	/* Compact summary at the top of the summary column (above the title): chips +
	   "+N Colours" on the left, "Choose a colour" pushed to the far right, all on
	   ONE non-wrapping row spanning the panel width. */
	body.konte-variable-pdp .kgp-color-summary {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		width: 100%;
		margin: 12px 0 14px;
	}

	/* The chips container is a clone of the WCBoost swatch group, so chip size,
	   border and colour/image fill all come from style.css / the plugin CSS. The
	   chips are tappable (select the colour). */
	body.konte-variable-pdp .kgp-color-summary__chips {
		margin: 0;
		cursor: pointer;
	}

	body.konte-variable-pdp .kgp-color-summary__chips .wcboost-variation-swatches__wrapper {
		margin: 0;
		flex-wrap: nowrap;
	}

	body.konte-variable-pdp .kgp-color-summary .wcboost-variation-swatches__item {
		margin: 0;
		list-style: none;
		cursor: pointer;
	}

	/* "+N Colours" and the selected-colour-name label — plain-text buttons, both
	   opening the slide-up panel. Type matches the reference (and .ksp-trigger in
	   css/pdp-size-summary.css): var(--font2) 14px/300, var(--ink_text), no underline. */
	body.konte-variable-pdp .kgp-color-summary__more,
	body.konte-variable-pdp .kgp-color-summary__choose {
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--ink_text);
		font-family: var(--font2);
		font-size: 14px;
		font-weight: 300;
		line-height: 1.2;
		letter-spacing: 0.02em;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
	}

	/* Pin the label to the far right of the row, whatever the chip/"+N" width.
	   The text is now a colour name rather than a fixed string, so it is allowed to
	   shrink and ellipsise rather than push the non-wrapping row past the viewport
	   on a narrow phone. Inert at the name lengths in the current catalogue. */
	body.konte-variable-pdp .kgp-color-summary__choose {
		flex: 0 1 auto;
		min-width: 0;
		margin-left: auto;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	body.konte-variable-pdp .kgp-color-summary__more[hidden] {
		display: none;
	}
}

/* ================================================================== *
 * Slide-up "CHOOSE YOUR COLOUR" bottom sheet (opened by JS on mobile).
 * Mirrors the Quick Shop sheet mechanics with dedicated .kcp-* classes.
 * ================================================================== */
.kcp-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.kcp-overlay[hidden] {
	display: none;
}

.kcp-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.kcp-overlay.is-open .kcp-backdrop {
	opacity: 1;
}

.kcp-sheet {
	position: relative;
	width: 100%;
	max-width: 640px;
	height: 22vh;
	display: flex;
	flex-direction: column;
	background: var(--bg_clr1);
	border-radius: 16px 16px 0 0;
	padding: 9.34% 4.97%;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	will-change: transform;
	outline: none;
	overflow: hidden;
}

.kcp-overlay.is-open .kcp-sheet {
	transform: translateY(0);
}

/* Absolutely positioned so it doesn't consume a row — the three visible rows are
   heading / colour name / swatches. */
.kcp-close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink_text);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

/* Row 1 — heading. */
.kcp-title {
	margin: 0 0 8px;
	color: var(--ink_text);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-family: var(--font2) !important;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}

/* Row 2 — selected colour name (updates on selection). */
.kcp-name {
	margin: 0 0 25px;
	color: var(--ink_text);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-family: var(--font2);
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

/* Row 3 — swatches; fills the remaining panel height and scrolls if needed. */
.kcp-swatches {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* All colours; the clone carries the --color/--image class so the plugin CSS
   fills colour / shows the term image. We set the chip box here (larger than the
   compact summary chips) since the sheet lives outside the .woocommerce scope. */
.kcp-swatches .wcboost-variation-swatches__wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kcp-swatches .wcboost-variation-swatches__item {
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid #d9d9d9;
	border-radius: 0;
	overflow: hidden;
	list-style: none;
	cursor: pointer;
}

.kcp-swatches .wcboost-variation-swatches__item.selected {
	border-color: #d9d9d9;
	outline: 1.5px solid var(--ink_text);
	outline-offset: 2px;
}

.kcp-swatches .wcboost-variation-swatches__name {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
}

.kcp-swatches .wcboost-variation-swatches__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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