/*
 * Layout safeguards for the native Kadence product scenes.
 * Typography, colors, spacing and backgrounds remain editable in Kadence.
 */
.encuero-product-scene {
	position: sticky;
	top: 0;
	min-width: 0;
}

.encuero-products-scroll .encuero-product-scene {
	position: sticky;
	top: 0;
}

.encuero-product-scene > .kt-inside-inner-col,
.encuero-product-scene > .kt-inside-inner-col > .wp-block-kadence-column,
.encuero-product-scene > .kt-inside-inner-col > .wp-block-kadence-column > .kt-inside-inner-col,
.encuero-product-scene .encuero-products-content {
	box-sizing: border-box;
	min-width: 0;
}

/* Kadence stores the scene background on this inner column. Give it a real box. */
.encuero-product-scene > .kt-inside-inner-col > .wp-block-kadence-column:not(.encuero-products-content) {
	align-self: stretch;
}

.encuero-product-scene > .kt-inside-inner-col > .wp-block-kadence-column:not(.encuero-products-content) > .kt-inside-inner-col {
	height: 100%;
	min-height: 100%;
	width: 100%;
}

.encuero-product-scene .encuero-products-content,
.encuero-product-scene .encuero-products-content .kt-inside-inner-col {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Dynamically rendered WooCommerce variation controls. */
.encuero-product-variations {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-block: 1rem;
}

.encuero-product-variation-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	max-width: 100%;
}

.encuero-product-variation-group + .encuero-product-variation-group {
	margin-top: 0.75rem;
}

.encuero-product-variation-label {
  color: #fff;
	flex: 0 0 100%;
	font: inherit;
  font-weight: 600;
}

.encuero-product-variation-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: 100%;
}

.encuero-product-variation-option {
	max-width: 100%;
	padding: 0.45rem 0.7rem;
	border-radius: 0;
	background: #fff;
	color: #161616;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
}

/* Color variations use accessible circular swatches instead of text buttons. */
.encuero-product-variation-option[data-encuero-swatch="color"] {
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--encuero-swatch-fill, var(--encuero-color-desconocido, #b8b0a8));
	box-shadow: 0 0 0 1px rgba(22, 22, 22, 0.45);
	font-size: 0;
	line-height: 1;
}

.encuero-product-variation-option[data-encuero-swatch="color"]:hover,
.encuero-product-variation-option[data-encuero-swatch="color"]:focus-visible {
	background: var(--encuero-swatch-fill, var(--encuero-color-desconocido, #b8b0a8)) !important;
	transform: scale(1.08);
}

.encuero-product-variation-option[data-encuero-swatch="color"][aria-pressed="true"] {
	background: var(--encuero-swatch-fill, var(--encuero-color-desconocido, #b8b0a8)) !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #161616;
}

.encuero-product-variation-option:hover,
.encuero-product-variation-option:focus-visible,
.encuero-product-variation-option[aria-pressed="true"] {
	background: #161616;
	color: #fff;
}

/* Desktop keeps Kadence's intended editorial 1/3 + 2/3 composition. */
.encuero-product-scene > .kt-inside-inner-col > .encuero-products-content {
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.encuero-product-scene > .kt-inside-inner-col > .wp-block-kadence-column:not(.encuero-products-content) {
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

.encuero-product-scene
.encuero-products-content > .kt-inside-inner-col {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

@media (max-width: 1024px) {
	.encuero-products-scroll .encuero-product-scene {
		min-height: 100svh;
		height: auto;
	}

	.encuero-product-scene > .kt-inside-inner-col {
		flex-direction: column !important;
		min-height: 100svh;
		height: auto;
	}

	.encuero-product-scene > .kt-inside-inner-col > .wp-block-kadence-column {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		flex: 0 0 auto !important;
	}

	/* Keep Kadence's visual column before the product data on narrow screens. */
	.encuero-product-scene > .kt-inside-inner-col > .wp-block-kadence-column:not(.encuero-products-content) {
		order: 1 !important;
		min-height: clamp(16rem, 48svh, 31rem);
	}

	.encuero-product-scene > .kt-inside-inner-col > .wp-block-kadence-column:not(.encuero-products-content) > .kt-inside-inner-col {
		min-height: clamp(16rem, 48svh, 31rem);
		height: auto;
	}

	.encuero-product-scene > .kt-inside-inner-col > .encuero-products-content {
		order: 2 !important;
		flex-basis: auto !important;
	}

	/* Keep the whole Kadence background visible before the text starts. */
	.encuero-product-scene > .kt-inside-inner-col > .wp-block-kadence-column:not(.encuero-products-content) > .kt-inside-inner-col {
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
	}
}

@media (max-width: 600px) {
	.encuero-product-scene > .kt-inside-inner-col {
		padding-inline: clamp(1rem, 5vw, 1.5rem);
	}

	.encuero-product-scene > .kt-inside-inner-col > .wp-block-kadence-column:not(.encuero-products-content) {
		min-height: clamp(14rem, 42svh, 23rem);
	}

	.encuero-product-scene > .kt-inside-inner-col > .wp-block-kadence-column:not(.encuero-products-content) > .kt-inside-inner-col {
		min-height: clamp(14rem, 42svh, 23rem);
	}

	.encuero-product-scene .encuero-products-content,
	.encuero-product-scene .encuero-products-content .kt-inside-inner-col {
		width: 100%;
	}

	.encuero-product-scene .encuero-products-content h2,
	.encuero-product-scene .encuero-products-content p,
	.encuero-product-scene .encuero-products-content .kb-buttons-wrap {
		max-width: 100%;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.encuero-products-scroll .encuero-product-scene {
		min-height: 100svh;
	}
}
