/**
 * Ficha de producto (bloques WooCommerce): layout tipo mockup Pensar Verde.
 */

/* ==========================================================================
   Galería de producto (Flexslider de Woo)
   ========================================================================== */

.pv-single-product .woocommerce-product-gallery {
	margin: 0;
	position: relative;
}

/* Caso A — con Flexslider: el clip lo hace .flex-viewport (la "ventana"). */
.pv-single-product .woocommerce-product-gallery .flex-viewport {
	border-radius: 20px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.25);
}

/* Caso B — sin slider (galería con 1 sola imagen): el wrapper SÍ es el contenedor visible. */
.pv-single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	border-radius: 20px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.25);
}

/* Si el wrapper está dentro de .flex-viewport (caso A), es el carril móvil:
   no debe llevar fondo, borde ni radius — sólo se desliza. */
.pv-single-product .woocommerce-product-gallery .flex-viewport > .woocommerce-product-gallery__wrapper {
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

.pv-single-product .woocommerce-product-gallery__image {
	background: transparent;
}

.pv-single-product .woocommerce-product-gallery__image a,
.pv-single-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

.pv-single-product .woocommerce-product-gallery__image img {
	transition: transform 0.45s ease;
}

.pv-single-product .woocommerce-product-gallery__image:hover img {
	transform: scale(1.02);
}

/* Botón de zoom (lupa): pill turquesa en lugar del default. */
.pv-single-product .woocommerce-product-gallery__trigger {
	top: 0.85rem !important;
	right: 0.85rem !important;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 999px;
	background: #ffffff;
	color: #00a99d;
	border: 2px solid #00a99d;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 4px 12px -6px rgba(0, 169, 157, 0.45);
	transition: background-color 0.18s ease, color 0.18s ease,
		transform 0.18s ease;
	z-index: 5;
}

.pv-single-product .woocommerce-product-gallery__trigger:hover,
.pv-single-product .woocommerce-product-gallery__trigger:focus-visible {
	background: #00a99d;
	color: #ffffff;
	transform: translateY(-1px);
	outline: none;
}

/* Thumbnails: rejilla con tarjetitas redondeadas alineadas a las pills. */
.pv-single-product .flex-control-nav.flex-control-thumbs {
	list-style: none;
	margin: 1rem 0 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 0.65rem !important;
	width: 100%;
	float: none !important;
}

.pv-single-product .flex-control-nav.flex-control-thumbs li {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
	list-style: none;
	cursor: pointer;
}

.pv-single-product .flex-control-nav.flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	border: 2px solid transparent;
	background: #ffffff;
	opacity: 0.7;
	transition: opacity 0.18s ease, border-color 0.18s ease,
		transform 0.18s ease, box-shadow 0.18s ease;
}

.pv-single-product .flex-control-nav.flex-control-thumbs li:hover img {
	opacity: 1;
	transform: translateY(-2px);
}

/* Estado activo: solo borde turquesa. */
.pv-single-product .flex-control-nav.flex-control-thumbs li img.flex-active,
.pv-single-product .flex-control-nav.flex-control-thumbs li.flex-active img,
.pv-single-product .flex-control-nav.flex-control-thumbs li img:focus-visible {
	opacity: 1;
	border-color: #00a99d;
	box-shadow: 0 6px 14px -8px rgba(0, 169, 157, 0.4);
	outline: none;
}

@media (max-width: 480px) {
	.pv-single-product .flex-control-nav.flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 0.5rem !important;
	}

	.pv-single-product .flex-control-nav.flex-control-thumbs li img {
		border-radius: 10px;
	}

	.pv-single-product .woocommerce-product-gallery .flex-viewport,
	.pv-single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		border-radius: 16px;
	}
}

/* Título */
.pv-single-product .pv-single-product__title,
.pv-single-product h1.wp-block-post-title {
	color: #00a99d !important;
	font-weight: 800 !important;
	font-size: clamp(1.75rem, 2.5vw, 2.35rem) !important;
	line-height: 1.1 !important;
	margin: 0 0 0.65rem !important;
}

/* Precio */
.pv-single-product .pv-single-product__price,
.pv-single-product .wp-block-woocommerce-product-price {
	margin: 0 0 1.25rem !important;
}

.pv-single-product .wp-block-woocommerce-product-price .wc-block-components-product-price,
.pv-single-product .wp-block-woocommerce-product-price {
	color: #3d3d3d !important;
	font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
	font-weight: 700 !important;
}

/* Formulario compra: contador en píldora + «Comprar» debajo (como mockup) */
.pv-single-product .pv-single-product__purchase,
.pv-single-product .wp-block-woocommerce-add-to-cart-form {
	margin-bottom: 0;
	width: 100%;
	max-width: 320px;
}

/* Sustituir la rejilla de Woo por columna: primero cantidad, luego botón */
.pv-single-product .wp-block-woocommerce-add-to-cart-form form.cart,
.pv-single-product .wc-block-add-to-cart-form form.cart {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 1rem !important;
	width: 100% !important;
	grid-template-columns: none !important;
	grid-auto-flow: initial !important;
}

.pv-single-product .wp-block-woocommerce-add-to-cart-form form.cart .quantity,
.pv-single-product .wp-block-woocommerce-add-to-cart-form form.cart div.wc-block-components-quantity-selector.quantity {
	grid-column: unset !important;
	margin: 0 !important;
	margin-right: 0 !important;
	align-self: flex-start !important;
}

/* Variaciones: bloque añadir al carrito también en columna */
.pv-single-product .woocommerce-variation-add-to-cart,
.pv-single-product .woocommerce-variation-add-to-cart.variations_button {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 1rem !important;
	width: 100% !important;
}

.pv-single-product .woocommerce-variation-add-to-cart .quantity,
.pv-single-product .woocommerce-variation-add-to-cart .wc-block-components-quantity-selector {
	margin: 0 !important;
}

/* Contador tipo píldora (stepper de bloques + clásico .quantity) */
.pv-single-product .wc-block-components-quantity-selector,
.pv-single-product .quantity:not(.hidden) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 2px solid #00a99d;
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
	min-height: 3rem;
	padding: 0 0.2rem;
	box-sizing: border-box;
}

.pv-single-product .wc-block-components-quantity-selector__button,
.pv-single-product .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--minus,
.pv-single-product .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--plus,
.pv-single-product .quantity button.minus,
.pv-single-product .quantity button.plus {
	color: #00a99d !important;
	background: transparent !important;
	border: none !important;
	font-size: 1.35rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 0.45rem 1rem !important;
	min-width: 2.5rem;
	cursor: pointer;
	box-shadow: none !important;
}

.pv-single-product .wc-block-components-quantity-selector__button:hover,
.pv-single-product .quantity button.minus:hover,
.pv-single-product .quantity button.plus:hover {
	opacity: 0.75;
}

.pv-single-product .wc-block-components-quantity-selector input[type="number"],
.pv-single-product .wc-block-components-quantity-selector .input-text.qty,
.pv-single-product .quantity input.qty {
	border: none !important;
	box-shadow: none !important;
	text-align: center;
	font-weight: 700 !important;
	font-size: 1.1rem !important;
	color: #00a99d !important;
	min-width: 2.25rem;
	max-width: 3.25rem;
	background: transparent !important;
	-moz-appearance: textfield;
}

.pv-single-product .wc-block-components-quantity-selector input[type="number"]::-webkit-outer-spin-button,
.pv-single-product .wc-block-components-quantity-selector input[type="number"]::-webkit-inner-spin-button,
.pv-single-product .quantity input.qty::-webkit-outer-spin-button,
.pv-single-product .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Botón Comprar (clásico + bloques) */
.pv-single-product .wc-block-add-to-cart-form button[type="submit"],
.pv-single-product .wc-block-add-to-cart-form .wc-block-components-button,
.pv-single-product .wc-block-components-product-button .wc-block-components-button,
.pv-single-product .single_add_to_cart_button,
.pv-single-product button[type="submit"].single_add_to_cart_button,
.pv-single-product .wp-block-button__link.wc-block-components-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	max-width: none !important;
	padding: 0.9rem 1.75rem !important;
	border-radius: 999px !important;
	border: none !important;
	background: #00a99d !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: clamp(1.05rem, 1.2vw, 1.25rem) !important;
	line-height: 1.2 !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 14px rgba(0, 169, 157, 0.35);
	grid-column: unset !important;
	justify-self: stretch !important;
}

.pv-single-product .wc-block-add-to-cart-form button[type="submit"]:hover,
.pv-single-product .wc-block-add-to-cart-form .wc-block-components-button:hover,
.pv-single-product .wc-block-components-product-button .wc-block-components-button:hover,
.pv-single-product .single_add_to_cart_button:hover {
	background: #008e84 !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 169, 157, 0.4);
	color: #fff !important;
}

/* Variaciones: tabla de selectores en filas que envuelven (2 o 3 por fila) */
.pv-single-product .variations_form .variations {
	display: block !important;
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1rem;
	background: transparent;
}

.pv-single-product .variations_form .variations colgroup,
.pv-single-product .variations_form .variations thead,
.pv-single-product .variations_form .variations tfoot {
	display: none !important;
}

.pv-single-product .variations_form .variations tbody {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 0.75rem 1rem !important;
	width: 100%;
}

.pv-single-product .variations_form .variations tr {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.3rem !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	flex: 0 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
}

.pv-single-product .variations_form .variations th,
.pv-single-product .variations_form .variations td {
	display: block !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	width: auto !important;
}

.pv-single-product .variations_form .variations th.label label {
	color: #00a99d;
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
}

.pv-single-product .variations_form .variations td.value {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: nowrap;
}

/* Selects (clásicos y de bloques) — anchos compactos que se adaptan al contenido */
.pv-single-product .variations_form select,
.pv-single-product .wc-block-components-product-add-to-cart select,
.pv-single-product .wc-block-components-product-add-to-cart .wc-block-components-select select {
	width: auto;
	min-width: 7rem;
	max-width: 100%;
	border-radius: 999px !important;
	border: 2px solid #00a99d !important;
	background: #fff !important;
	padding: 0.45rem 2rem 0.45rem 0.9rem !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	color: #0d6154 !important;
	line-height: 1.2 !important;
	cursor: pointer;
	box-shadow: none !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%2300a99d' d='M5.5 7.5l4.5 5 4.5-5z'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.7rem center !important;
	background-size: 1rem !important;
}

.pv-single-product .variations_form select:focus,
.pv-single-product .wc-block-components-product-add-to-cart select:focus {
	outline: none !important;
	border-color: #008e84 !important;
	box-shadow: 0 0 0 3px rgba(0, 169, 157, 0.18) !important;
}

/* Link «Limpiar» — WC lo muestra/oculta vía JS según haya selección */
.pv-single-product .reset_variations {
	color: #00a99d !important;
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
}

.pv-single-product .reset_variations:hover {
	text-decoration: underline;
}

/* Precio dinámico de la variación seleccionada */
.pv-single-product .single_variation_wrap .woocommerce-variation {
	margin: 0 0 1rem;
}

.pv-single-product .woocommerce-variation-price,
.pv-single-product .woocommerce-variation-price .price,
.pv-single-product .woocommerce-variation-price .price .amount,
.pv-single-product .woocommerce-variation-price bdi {
	color: #0d6154 !important;
	font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
}

.pv-single-product .woocommerce-variation-price del {
	color: #8a8a8a !important;
	font-size: 0.7em !important;
	font-weight: 500 !important;
	margin-right: 0.5rem;
}

.pv-single-product .woocommerce-variation-price ins {
	background: transparent !important;
	text-decoration: none !important;
}

/* Mensaje de stock/disponibilidad de la variación */
.pv-single-product .woocommerce-variation-availability {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	color: #5a6a66;
}

/* Cuando hay variación seleccionada, atenuar el rango de arriba */
.pv-single-product .single_variation_wrap .woocommerce-variation:not(:empty) ~ .woocommerce-variation-add-to-cart {
	margin-top: 0;
}

/* Responsive: en mobile que cada selector ocupe toda la fila */
@media (max-width: 540px) {
	.pv-single-product .variations_form .variations tr {
		flex: 1 1 100%;
	}

	.pv-single-product .variations_form select {
		width: 100%;
		min-width: 0;
	}
}

/* Separador turquesa */
.pv-single-product .pv-single-product__divider,
.pv-single-product hr.wp-block-separator.pv-single-product__divider {
	border: none;
	border-top: 2px solid #00a99d;
	margin: 1.75rem 0 1.5rem !important;
	opacity: 1;
	max-width: 100%;
}

/* Descripción (contenido del producto) */
.pv-single-product .pv-single-product__description {
	color: #3d3d3d;
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	line-height: 1.55;
}

.pv-single-product .pv-single-product__description > *:first-child {
	margin-top: 0;
}

.pv-single-product .pv-single-product__description p {
	margin: 0 0 1rem;
}

/* Migas */
.pv-single-product .wc-block-breadcrumbs,
.pv-single-product .woocommerce-breadcrumb {
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
	color: #5a6a66;
}

/* Columnas responsive */
@media (max-width: 781px) {
	.pv-single-product .pv-single-product__columns {
		flex-direction: column !important;
	}

	.pv-single-product .pv-single-product__columns .wp-block-column {
		flex-basis: 100% !important;
	}

	.pv-single-product .woocommerce-product-gallery {
		margin-bottom: 1.5rem;
	}
}

/* Relacionados: título de sección */
.pv-single-product--related .pv-related-products-title,
.pv-single-product .pv-related-products-title {
	color: #00a99d !important;
	font-weight: 800 !important;
	font-size: clamp(1.35rem, 1.8vw, 1.75rem) !important;
	margin: 0 0 1.25rem !important;
	border: none;
	padding: 0;
}
