/* Taula de producte variable */

.pd-vpt {
	width: 100%;
	margin: 20px 0;
}

.pd-vpt-head,
.pd-vpt-row {
	display: grid;
	/* Columnes de quantitat i botó FIXES: així capçalera i files s'alineen sempre
	   (amb "auto" cada fila és un grid independent i es descol·loquen). */
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) 132px 210px;
	align-items: center;
	gap: 16px;
	padding: 14px 4px;
}

.pd-vpt-head {
	font-weight: 700;
	text-transform: uppercase;
	font-size: .82em;
	letter-spacing: .02em;
	padding-bottom: 8px;
}

.pd-vpt-row {
	border-top: 1px solid #e6e6e6;
	margin: 0;
	/* Les files porten la classe .cart; el tema hi posa margin-block-end:30px. L'anul·lem. */
	margin-block-end: 0 !important;
}

/* Quantitat i botó centrats a la seva columna (capçalera i files alineades) */
.pd-vpt-c-qty,
.pd-vpt-c-btn {
	text-align: center;
}

/* Stepper */
.pd-vpt-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #e0e0e0;
}

.pd-vpt-step {
	width: 34px;
	border: 0;
	background: #f7f7f7;
	color: #be8915;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.pd-vpt-step:hover {
	background: #f0f0f0;
}

.pd-vpt-qty-input {
	width: 46px;
	text-align: center;
	border: 0;
	border-left: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.pd-vpt-qty-input::-webkit-outer-spin-button,
.pd-vpt-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Botó */
.pd-vpt-add.button {
	white-space: nowrap;
	background: #b4a269;
	color: #fff;
	border: 1px solid #b4a269;
	padding: 10px 22px;
	border-radius: 3px;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.pd-vpt-add.button:hover {
	background: #003A70;
	border-color: #003A70;
	color: #fff;
}

/* Loader minimalista mentre s'afegeix a la cistella */
.pd-vpt-add.loading {
	color: transparent !important;
	position: relative;
	pointer-events: none;
}

.pd-vpt-add.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: #004a87;
	opacity: .9;
	animation: pd-vpt-spin .7s linear infinite;
}

@keyframes pd-vpt-spin {
	to { transform: rotate(360deg); }
}

/* Amaga el botó "Visualitza la cistella" injectat (el carret ja el mostra) */
.pd-vpt-c-btn a,
.pd-vpt-row .added_to_cart,
.pd-vpt-row a.wc-forward {
	display: none !important;
}

/* Sense estoc */
.pd-vpt-oos {
	opacity: .6;
}

.pd-vpt-oos-label {
	font-style: italic;
	color: #b3261e;
}

/* Mòbil */
@media (max-width: 680px) {
	.pd-vpt-head {
		display: none;
	}
	.pd-vpt-row {
		grid-template-columns: 1fr 1fr;
		gap: 25px 16px;
	}

	/* Preu alineat a la dreta a mòbil */
	.pd-vpt-c-price {
		text-align: right;
	}

	/* Etiquetes de columna (Mida / Preu) a cada fila, ja que la capçalera s'amaga */
	.pd-vpt-c-attr::before,
	.pd-vpt-c-price::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 3px;
		font-size: .72em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .02em;
		color: #888;
	}

	/* Quantitat: ample complet, amb el número expandit entre − i + */
	.pd-vpt-c-qty {
		grid-column: 1 / -1;
		text-align: left;
	}
	.pd-vpt-qty {
		display: flex;
		width: 100%;
	}
	.pd-vpt-qty-input {
		flex: 1 1 auto;
		width: auto;
	}

	.pd-vpt-c-btn {
		grid-column: 1 / -1;
	}
	.pd-vpt-add.button {
		width: 100%;
	}
}