/**
 * CC Product Options — frontend.
 * Todo vive bajo .ccpo-fields para no tocar el resto del tema.
 */

.ccpo-fields {
	--ccpo-line: rgba(0, 0, 0, .14);
	--ccpo-line-strong: rgba(0, 0, 0, .55);
	--ccpo-radius: 10px;
	--ccpo-gap: 18px;
	margin: 0 0 24px;
	display: block;
	width: 100%;
}

/* Convivencia con constructores que ponen form.cart en flex.
   El widget "Add to Cart" de Elementor declara form.cart como flex en fila.
   Con dos hijos (cantidad y boton) se ve bien, pero al insertar los campos
   el navegador los acomoda en fila: la paleta se aplasta y el boton se
   estira a toda la altura. Solo se corrige cuando los campos estan dentro
   del formulario, asi que un producto sin opciones no cambia en nada. */

form.cart:has(> .ccpo-fields) {
	display: block !important;
}

form.cart > .ccpo-fields {
	flex: none !important;
}

form.cart:has(> .ccpo-fields) .quantity {
	display: inline-block !important;
	height: auto !important;
	margin: 0 12px 0 0 !important;
	vertical-align: middle !important;
	float: none !important;
}

form.cart:has(> .ccpo-fields) .single_add_to_cart_button {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	flex: none !important;
	vertical-align: middle !important;
}

.ccpo-field {
	margin: 0 0 var(--ccpo-gap);
}

.ccpo-field[hidden] {
	display: none !important;
}

.ccpo-label {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 6px;
}

.ccpo-req {
	border: 0;
	color: #c0392b;
	text-decoration: none;
}

.ccpo-help {
	display: block;
	font-size: .86em;
	opacity: .72;
	margin: 0 0 8px;
}

.ccpo-help--price {
	margin-top: 6px;
	opacity: 1;
	font-weight: 600;
}

.ccpo-input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--ccpo-line);
	border-radius: var(--ccpo-radius);
	background: #fff;
	font: inherit;
	line-height: 1.4;
}

.ccpo-input:focus {
	outline: 2px solid var(--ccpo-line-strong);
	outline-offset: 1px;
}

.ccpo-chars,
.ccpo-counter {
	display: block;
	font-size: .78em;
	opacity: .7;
	margin-top: 5px;
}

.ccpo-counter.is-done {
	opacity: 1;
	font-weight: 600;
}

/* Seleccion unica y multiple ------------------------------------------- */

.ccpo-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ccpo-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 13px;
	border: 1px solid var(--ccpo-line);
	border-radius: var(--ccpo-radius);
	cursor: pointer;
	line-height: 1.3;
}

.ccpo-choice:has(input:checked) {
	border-color: var(--ccpo-line-strong);
	box-shadow: inset 0 0 0 1px var(--ccpo-line-strong);
}

.ccpo-choice__price {
	font-weight: 600;
	opacity: .8;
}

/* Tarjetas con imagen --------------------------------------------------- */

.ccpo-cards {
	display: grid;
	grid-template-columns: repeat(var(--ccpo-cols, 4), minmax(0, 1fr));
	gap: 12px;
}

.ccpo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	margin: 0;
	padding: 10px 8px;
	border: 1px solid var(--ccpo-line);
	border-radius: var(--ccpo-radius);
	cursor: pointer;
	line-height: 1.25;
}

.ccpo-card:has(input:checked) {
	border-color: var(--ccpo-line-strong);
	box-shadow: inset 0 0 0 1px var(--ccpo-line-strong);
}

.ccpo-card__media {
	display: block;
	width: 100%;
}

.ccpo-card__img,
.ccpo-card__ph {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0 auto;
	border-radius: 6px;
}

.ccpo-card__ph {
	background: rgba(0, 0, 0, .06);
}

.ccpo-card__name {
	font-size: .9em;
	font-weight: 600;
}

.ccpo-card__desc {
	font-size: .8em;
	opacity: .7;
}

.ccpo-card__price {
	font-size: .88em;
	font-weight: 700;
}

/* Paleta de colores ----------------------------------------------------- */

.ccpo-palette {
	display: grid;
	grid-template-columns: repeat(var(--ccpo-cols, 7), minmax(0, 1fr));
	gap: 10px 8px;
}

.ccpo-color {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 2px;
	border-radius: var(--ccpo-radius);
	cursor: pointer;
	text-align: center;
}

.ccpo-color input,
.ccpo-card input,
.ccpo-choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.ccpo-choice input {
	position: static;
	opacity: 1;
	width: auto;
	height: auto;
	pointer-events: auto;
}

.ccpo-color__name {
	font-size: .72em;
	line-height: 1.25;
	opacity: .75;
}

/* Nombres solo al pasar el cursor.
   El globito queda limpio y la paleta ocupa bastante menos alto. Se aplica
   unicamente donde hay cursor real: en pantallas tactiles, donde nadie puede
   "pasar por encima", los nombres siguen debajo de cada globo como siempre. */

@media (hover: hover) and (pointer: fine) {

	.ccpo-palette--names-hover .ccpo-color__name {
		position: absolute;
		bottom: 100%;
		left: 50%;
		z-index: 3;
		transform: translate(-50%, -4px);
		padding: 4px 8px;
		border-radius: var(--ccpo-radius);
		background: var(--ccpo-line-strong);
		color: #fff;
		font-size: .72em;
		line-height: 1.2;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity .15s ease;
	}

	.ccpo-palette--names-hover .ccpo-color:hover .ccpo-color__name,
	.ccpo-palette--names-hover .ccpo-color:focus-within .ccpo-color__name {
		opacity: 1;
	}

	.ccpo-palette--names-hover .ccpo-color:has(input:checked) .ccpo-color__name {
		opacity: 1;
		font-weight: 700;
	}
}

.ccpo-color:has(input:checked) {
	background: rgba(0, 0, 0, .06);
	box-shadow: inset 0 0 0 2px var(--ccpo-line-strong);
}

.ccpo-color:has(input:checked) .ccpo-color__name {
	opacity: 1;
	font-weight: 700;
}

.ccpo-color input:focus-visible ~ .ccpo-swatch {
	outline: 2px solid var(--ccpo-line-strong);
	outline-offset: 3px;
}

.ccpo-color.is-blocked {
	opacity: .38;
}

/* Globo dibujado por CSS ------------------------------------------------ */

.ccpo-swatch {
	position: relative;
	display: block;
	width: 100%;
	max-width: 62px;
	aspect-ratio: 1 / 1.16;
	margin: 0 auto;
}

.ccpo-swatch--circle {
	aspect-ratio: 1 / 1;
	max-width: 34px;
	border-radius: 50%;
	background: var(--ccpo-c);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.ccpo-swatch--balloon {
	border-radius: 50% 50% 48% 48% / 46% 46% 56% 56%;
	background:
		radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 38%),
		radial-gradient(circle at 74% 80%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 52%),
		var(--ccpo-c);
	box-shadow: inset 0 -4px 10px rgba(0, 0, 0, .12);
}

/* Nudo del globo. */
.ccpo-swatch--balloon::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 9px;
	height: 8px;
	transform: translateX(-50%);
	background: var(--ccpo-c);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	filter: brightness(.88);
}

.ccpo-swatch--photo img {
	display: block;
	width: 100% !important;
	height: auto !important;
	margin: 0 auto;
}

/* Acabados. */
.ccpo-finish-matte {
	background-image:
		radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 42%),
		radial-gradient(circle at 72% 82%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 55%);
}

.ccpo-finish-pearl {
	background-image:
		radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 46%),
		radial-gradient(circle at 78% 72%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 40%),
		radial-gradient(circle at 70% 86%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 55%);
}

.ccpo-finish-chrome {
	background-image:
		linear-gradient(105deg, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, .78) 34%, rgba(255, 255, 255, 0) 44%),
		radial-gradient(circle at 26% 20%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 32%),
		radial-gradient(circle at 76% 80%, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 58%);
}

.ccpo-finish-jewel {
	background-image:
		radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .78), rgba(255, 255, 255, .1) 54%),
		radial-gradient(circle at 68% 76%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 44%);
	box-shadow: inset 0 0 14px rgba(255, 255, 255, .5), inset 0 -3px 10px rgba(0, 0, 0, .08);
	opacity: .93;
}

.ccpo-finish-agate {
	background-image:
		repeating-linear-gradient(118deg, rgba(255, 255, 255, .5) 0 7px, rgba(255, 255, 255, 0) 7px 17px),
		radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 40%),
		radial-gradient(circle at 74% 80%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 55%);
}

.ccpo-finish-neon {
	background-image:
		radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%);
	filter: saturate(1.5);
	box-shadow: 0 0 12px -2px var(--ccpo-c), inset 0 -4px 10px rgba(0, 0, 0, .1);
}

/* Total y avisos -------------------------------------------------------- */

.ccpo-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 18px 0 10px;
	padding-top: 14px;
	border-top: 1px solid var(--ccpo-line);
}

.ccpo-total__label {
	font-weight: 600;
}

.ccpo-total__value {
	font-size: 1.45em;
	font-weight: 700;
	line-height: 1.1;
}

.ccpo-alert {
	margin: 0 0 12px;
	padding: 9px 12px;
	border-radius: var(--ccpo-radius);
	background: rgba(192, 57, 43, .09);
	color: #8e2a20;
	font-size: .9em;
}

/* Movil ----------------------------------------------------------------- */

@media (max-width: 640px) {

	.ccpo-palette {
		grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
	}

	.ccpo-cards {
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	}
}

/* Respaldo para navegadores sin :has() ---------------------------------- */

.ccpo-color.is-checked {
	background: rgba(0, 0, 0, .06);
	box-shadow: inset 0 0 0 2px var(--ccpo-line-strong);
}

.ccpo-card.is-checked,
.ccpo-choice.is-checked {
	border-color: var(--ccpo-line-strong);
	box-shadow: inset 0 0 0 1px var(--ccpo-line-strong);
}