/**
 * Swatch Cart - PROTTO
 * Barras de color con cantidad y boton de carrito por variacion.
 */

/* ---------------------------------------------------------------
   1. Contenedor con desplazamiento horizontal
   Las muestras se apilan en columnas y el usuario navega de
   izquierda a derecha. Filas configurables con --protto-rows.
   --------------------------------------------------------------- */
.cfvsw-swatches-container.protto-scroll {
	--protto-rows: 6;
	--protto-col: 250px;

	width: 100% !important;
	max-width: 100% !important;
	display: grid !important;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--protto-rows), auto);
	grid-auto-columns: var(--protto-col);
	gap: 10px;

	overflow-x: auto;
	overflow-y: hidden;
	padding: 4px 4px 14px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

/* Barra de desplazamiento discreta */
.cfvsw-swatches-container.protto-scroll::-webkit-scrollbar {
	height: 8px;
}

.cfvsw-swatches-container.protto-scroll::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.06);
	border-radius: 999px;
}

.cfvsw-swatches-container.protto-scroll::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.28);
	border-radius: 999px;
}

.cfvsw-swatches-container.protto-scroll::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------
   2. La muestra como barra
   El plugin base escribe la forma elegida en ajustes (circulo,
   cuadrado, redondeado) como estilo EN LINEA sobre cada muestra, y el
   estilo en linea gana a cualquier regla de clase. Por eso la
   geometria de la barra va con !important: aqui manda el rectangulo.
   Sube --protto-radius si las quieres con la esquina redondeada.
   --------------------------------------------------------------- */
.cfvsw-swatches-option.protto-has-cart {
	--protto-radius: 0px;
	--protto-bar-height: 58px;
	--protto-cart-size: 40px;

	display: flex;
	align-items: center;
	justify-content: space-between !important;
	gap: 10px;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-width: 0 !important;
	min-height: var( --protto-bar-height ) !important;
	margin: 0;
	padding: 8px 10px;

	border-radius: var( --protto-radius ) !important;
	overflow: hidden;
	scroll-snap-align: start;
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cfvsw-swatches-option.protto-has-cart:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Estado seleccionado del plugin */
.cfvsw-swatches-option.protto-has-cart.cfvsw-selected-swatch {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------
   3. Nombre del color
   flex:1 con min-width:0 es lo que evita que el texto invada
   los controles cuando el nombre es largo.
   --------------------------------------------------------------- */
.cfvsw-swatches-option.protto-has-cart .cfvsw-swatch-inner {
	flex: 1 1 auto;
	min-width: 0;

	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	white-space: normal;
	word-break: break-word;
	background: none !important;
	border: none !important;
}

.cfvsw-swatches-option.protto-has-cart .protto-label {
	flex: 1 1 auto;
	min-width: 0;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	white-space: normal;
	word-break: break-word;
}

/* Todo lo que no sea nuestra etiqueta o nuestro formulario se oculta.
   El color ya vive en el fondo de la propia opcion. */
.cfvsw-swatches-option.protto-has-cart > .protto-hidden {
	display: none !important;
}

.cfvsw-swatches-option.protto-has-cart .protto-label,
.cfvsw-swatches-option.protto-has-cart .protto-variation-button {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------
   4. Bloque de cantidad + carrito
   --------------------------------------------------------------- */
.cfvsw-swatches-option.protto-has-cart .protto-variation-button {
	flex: 0 0 auto;
}

.cfvsw-swatches-option.protto-has-cart form {
	margin: 0;
	padding: 0;
}

.protto-has-cart .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 8px;

	height: auto;
	margin: 0;
	padding: 0;
	background: none !important;
}

.protto-quantity-input {
	display: flex;
	align-items: center;
	gap: 2px;
	background: none;
	border: none;
	margin: 0;
}

.protto-quantity-input input::-webkit-inner-spin-button,
.protto-quantity-input input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.protto-quantity-input input.qty {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0;
	margin: 0;

	border: none;
	border-radius: 50%;
	background: #fff;
	color: #222;

	text-align: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 38px;

	-moz-appearance: textfield;
	appearance: textfield;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.protto-quantity-input button {
	flex: 0 0 auto;
	width: 22px;
	height: 34px;
	padding: 0;
	margin: 0;

	background: none;
	border: none;
	cursor: pointer;

	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	opacity: 0.9;
	transition: opacity 0.2s ease, transform 0.15s ease;
}

.protto-quantity-input button:hover {
	opacity: 1;
	transform: scale(1.15);
}

.protto-quantity-input button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Boton del carrito */
.protto-has-cart .single_add_to_cart_button.button.alt {
	display: flex;
	align-items: center;
	justify-content: center;

	width: var( --protto-cart-size );
	height: var( --protto-cart-size );
	min-height: var( --protto-cart-size );
	padding: 0;
	margin: 0;

	border: none !important;
	border-radius: 50%;
	background: #fff;
	color: #333;

	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.protto-has-cart .single_add_to_cart_button.button.alt::after {
	display: none !important;
}

/* Bootstrap Icons baja cada glifo con vertical-align: -.125em en su
   ::before. Dentro de un circulo de 40px eso son ~2px que se notan: el
   carrito quedaba bajo. Lo anulamos haciendo del <i> una caja que ocupa
   el boton entero, y del glifo un bloque, al que vertical-align ya no
   le afecta. */
.protto-has-cart .single_add_to_cart_button.button.alt i {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;

	font-size: 18px;
	line-height: 1;
}

.protto-has-cart .single_add_to_cart_button.button.alt i::before {
	display: block;
	vertical-align: 0;
	line-height: 1;
}

.protto-has-cart .single_add_to_cart_button.button.alt:hover:not(:disabled) {
	transform: translateY(2px);
	background: #fff;
}

/* Inactivo mientras la cantidad sea 0 */
.protto-has-cart .single_add_to_cart_button.button.alt:disabled,
.protto-has-cart .single_add_to_cart_button.button.alt.protto-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* ---------------------------------------------------------------
   5. Responsive
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
	.cfvsw-swatches-container.protto-scroll {
		--protto-rows: 5;
		--protto-col: 240px;
	}
}

@media (max-width: 767px) {
	.cfvsw-swatches-container.protto-scroll {
		--protto-rows: 4;
		--protto-col: 225px;
		gap: 8px;
	}

	.cfvsw-swatches-option.protto-has-cart {
		--protto-bar-height: 54px;
		--protto-cart-size: 36px;
		padding: 7px 9px;
		gap: 8px;
	}

	.cfvsw-swatches-option.protto-has-cart .protto-label {
		font-size: 12px;
	}

	.protto-quantity-input input.qty {
		width: 34px;
		height: 34px;
		line-height: 34px;
		font-size: 13px;
	}

	.protto-quantity-input button {
		width: 20px;
		font-size: 18px;
	}
}

@media (max-width: 420px) {
	.cfvsw-swatches-container.protto-scroll {
		--protto-col: 210px;
	}
}

/* ---------------------------------------------------------------
   6. Blindaje del contenido de la barra
   El tooltip del plugin base, un tema hijo o el propio WooCommerce
   pueden inyectar texto dentro de la muestra, y aparecia superpuesto
   al nombre. Aqui garantizamos que solo se vea lo nuestro, sin
   depender de que el JS haya llegado a marcarlo.
   --------------------------------------------------------------- */

/* Cualquier hijo que no sea nuestra etiqueta ni nuestro formulario. */
.cfvsw-swatches-option.protto-has-cart > *:not(.protto-label):not(.protto-variation-button) {
	display: none !important;
}

/* Mata el texto suelto que cuelgue directo de la opcion: sin tamano de
   fuente no se pinta. Todo lo visible declara el suyo mas arriba. */
.cfvsw-swatches-option.protto-has-cart {
	font-size: 0;
}

/* Contenido generado por temas hijos con content: attr(data-title). */
.cfvsw-swatches-option.protto-has-cart::after,
.cfvsw-swatches-option.protto-has-cart .protto-label::before,
.cfvsw-swatches-option.protto-has-cart .protto-label::after {
	content: none !important;
}

/* La cruz de "sin stock" se dimensiona en em: le damos un tamano fijo
   para que no la anule el font-size: 0 de la barra. */
.cfvsw-swatches-option.protto-has-cart::before {
	font-size: 20px;
}

/* ---------------------------------------------------------------
   7. Independencia del selector de variacion
   Al mover el formulario dentro de la muestra queda dentro del
   formulario de variaciones, y WooCommerce apaga todo boton de
   compra que encuentre ahi mientras no haya una variacion elegida
   en el desplegable. Cada barra ya lleva su propio variation_id,
   asi que ese estado no le aplica: manda unicamente la cantidad.
   --------------------------------------------------------------- */

.protto-has-cart .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled {
	display: flex !important;
	opacity: 1;
}

.protto-has-cart .single_add_to_cart_button.button.alt:not(:disabled):not(.protto-disabled) {
	opacity: 1 !important;
	cursor: pointer !important;
	pointer-events: auto !important;
}

/* Con cantidad 0 el boton sigue apagado, pero clicable para no
   confundir al lector de pantalla con pointer-events: none. */
.protto-has-cart .single_add_to_cart_button.button.alt:disabled,
.protto-has-cart .single_add_to_cart_button.button.alt.protto-disabled {
	pointer-events: auto;
}

/* ---------------------------------------------------------------
   8. Variaciones agotadas
   PHP no imprime formulario para lo que no hay en stock, y el JS
   marca la muestra que se queda sin pareja. Aqui desaparece.
   --------------------------------------------------------------- */
.cfvsw-swatches-container.protto-scroll .cfvsw-swatches-option.protto-sin-stock {
	display: none !important;
}

/* ---------------------------------------------------------------
   9. Nombre visible dentro de la barra
   Se muestra a la izquierda y los controles quedan a la derecha.
   Sobre imagen la legibilidad la resuelve la seccion 11 (blanco con
   sombra), porque ahi el contraste del fondo es imprevisible.
   Para ocultarlo otra vez, cambia las dos propiedades de abajo por
   la tecnica de "visually hidden" (position:absolute; clip-path:
   inset(50%)): conviene esconderlo asi y no con display:none, porque
   es lo que da nombre a los controles para un lector de pantalla.
   --------------------------------------------------------------- */
.cfvsw-swatches-option.protto-has-cart .protto-label {
	position: static;
	overflow: visible;
}

/* ---------------------------------------------------------------
   10. Desplazamiento horizontal real
   WooCommerce pinta las muestras dentro de un <td>. Una celda de
   tabla se ESTIRA con su contenido en vez de recortarlo, asi que el
   overflow-x del contenedor nunca llegaba a activarse: lo que crecia
   era la tabla entera, sacando la pagina de pantalla. Con
   table-layout: fixed la celda respeta el ancho disponible y el
   contenedor por fin se desplaza dentro de ella.
   --------------------------------------------------------------- */
table.variations.protto-variations-table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
}

table.variations.protto-variations-table td,
table.variations.protto-variations-table th {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.cfvsw-swatches-container.protto-scroll {
	max-width: 100%;
	scrollbar-width: thin;
}

/* ---------------------------------------------------------------
   11. Muestras de imagen
   El dibujo vive en .cfvsw-swatch-inner, el mismo elemento que
   ocultamos para quitar el nombre duplicado, asi que desaparecia con
   el. El JS lo rescata y lo pone de fondo de la barra; aqui lo
   encuadramos y resolvemos la legibilidad de los signos, que ahora
   caen sobre una imagen de contraste desconocido.
   --------------------------------------------------------------- */
.cfvsw-swatches-option.protto-has-cart.protto-con-imagen {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.protto-con-imagen .protto-quantity-input button {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.protto-con-imagen .protto-label {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* ---------------------------------------------------------------
   12. Convivencia con Divi
   Divi trae una regla para los botones de WooCommerce cuya lista de
   selectores termina en button.button:disabled[disabled]. Al sumar
   pseudo-clase y atributo, ese selector gana en especificidad al
   nuestro (4 clases + atributo contra 4 clases) e impone su
   border-radius: 3px... pero SOLO mientras el boton esta apagado,
   que es justo el estado inicial. De ahi que el circulo saliera
   cuadrado hasta pulsar el "+". Subimos nuestra especificidad por
   encima incluyendo la cadena completa de contenedores y el mismo
   estado, en vez de repartir !important por todas las propiedades.
   --------------------------------------------------------------- */
.cfvsw-swatches-option.protto-has-cart .protto-variation-button .single_add_to_cart_button.button.alt,
.cfvsw-swatches-option.protto-has-cart .protto-variation-button .single_add_to_cart_button.button.alt:disabled,
.cfvsw-swatches-option.protto-has-cart .protto-variation-button .single_add_to_cart_button.button.alt:disabled[disabled] {
	display: flex;
	align-items: center;
	justify-content: center;

	width: var( --protto-cart-size );
	height: var( --protto-cart-size );
	min-height: var( --protto-cart-size );
	max-width: var( --protto-cart-size );
	padding: 0;
	margin: 0;

	border: none;
	border-radius: 50%;
	background: #fff;
	color: #333;
	font-size: 0;
}