/**
 * Producto individual — galería, resumen, selector de tamaño (variaciones),
 * campos de fecha/mensaje y relacionados.
 */

.gamur-product {
	padding-bottom: 60px;
}

.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

/* ---------- Galería ---------- */

.woocommerce div.product div.images {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	border-radius: var(--gamur-radius-hero);
	overflow: hidden;
	box-shadow: var(--gamur-shadow-media);
}

.woocommerce div.product div.images img {
	border-radius: 0;
	display: block;
	width: 100%;
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 12px;
	list-style: none;
	padding: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: var(--gamur-radius-lg);
	aspect-ratio: 1;
	object-fit: cover;
	opacity: .75;
	transition: opacity var(--gamur-duration) var(--gamur-ease);
}

.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	opacity: 1;
}

/* ---------- Resumen ---------- */

.woocommerce div.product div.summary {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product .product_title {
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.5rem);
	font-weight: 700;
	margin: 8px 0 10px;
	line-height: 1.05;
}

.gamur-product__eyebrow {
	font-size: var(--gamur-text-xs);
	color: var(--gamur-ink-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.woocommerce .star-rating span::before {
	color: var(--gamur-orange);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 2rem;
	font-weight: 700;
	color: var(--gamur-ink);
	margin-bottom: 20px;
}

.woocommerce div.product p.price del {
	order: 2;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--gamur-ink-faint);
	opacity: 1;
}

.woocommerce div.product p.price ins {
	order: 1;
	text-decoration: none;
	background: none;
	font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: var(--gamur-text-body);
	line-height: 1.65;
	color: var(--gamur-ink-soft);
	margin-bottom: 26px;
}

/* ---------- Selector de tamaño (tabla de variaciones) ---------- */

.woocommerce div.product form.variations_form .variations {
	margin-bottom: 20px;
	border: 0;
}

.woocommerce div.product form.variations_form .variations tr,
.woocommerce div.product form.variations_form .variations td {
	display: block;
	border: 0;
	padding: 0;
}

.woocommerce div.product form.variations_form .variations label {
	display: block;
	font-weight: 700;
	font-size: var(--gamur-text-sm);
	margin-bottom: 8px;
	color: var(--gamur-ink);
}

.woocommerce div.product form.variations_form .variations select {
	width: 100%;
	border: 1px solid var(--gamur-border);
	border-radius: var(--gamur-radius-md);
	padding: 13px 15px;
	background: var(--gamur-surface);
	font-size: 15px;
}

/* Los botones de tamaño reemplazan al <select> vía assets/js/product-fields.js.
   El <select> nativo queda oculto pero funcional para WooCommerce y sin JS. */
.gamur-size-options {
	display: flex;
	gap: 10px;
	margin-bottom: 4px;
}

.gamur-size-option {
	flex: 1;
	background: var(--gamur-surface);
	border: 1px solid var(--gamur-border);
	color: var(--gamur-ink);
	padding: 12px;
	border-radius: var(--gamur-radius-md);
	cursor: pointer;
	font-weight: 600;
	text-align: center;
	transition: border-color var(--gamur-duration) var(--gamur-ease),
	            background var(--gamur-duration) var(--gamur-ease);
}

.gamur-size-option:hover {
	border-color: var(--gamur-primary);
}

.gamur-size-option[aria-pressed="true"] {
	background: var(--gamur-blush);
	border-color: var(--gamur-primary);
	color: var(--gamur-primary-dark);
}

.gamur-size-option__price {
	display: block;
	font-size: var(--gamur-text-2xs);
	font-weight: 500;
	opacity: .8;
	margin-top: 2px;
}

.gamur-size-options + .variations select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.woocommerce div.product .woocommerce-variation-price {
	margin-bottom: 16px;
}

.woocommerce div.product .reset_variations {
	font-size: var(--gamur-text-xs);
	color: var(--gamur-ink-muted);
}

/* ---------- Campos personalizados (fecha + mensaje) ---------- */

.gamur-addon {
	margin-bottom: 20px;
}

.gamur-addon__hint {
	display: block;
	font-size: var(--gamur-text-2xs);
	color: var(--gamur-ink-muted);
	margin-top: 6px;
}

.gamur-addon__error {
	display: block;
	font-size: var(--gamur-text-2xs);
	color: var(--gamur-primary);
	margin-top: 6px;
}

/* ---------- Cantidad + añadir ---------- */

.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
}

.gamur-cart-actions {
	display: flex;
	gap: 14px;
	align-items: stretch;
}

.woocommerce div.product form.cart div.quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--gamur-border);
	border-radius: var(--gamur-radius-lg);
	background: var(--gamur-surface);
	float: none;
	margin: 0;
}

.gamur-qty-btn {
	width: 46px;
	height: 52px;
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--gamur-ink-muted);
	transition: color var(--gamur-duration) var(--gamur-ease);
}

.gamur-qty-btn:hover { color: var(--gamur-primary); }

.woocommerce div.product form.cart div.quantity input.qty {
	width: 44px;
	height: 52px;
	border: 0;
	background: none;
	text-align: center;
	font-weight: 700;
	padding: 0;
	-moz-appearance: textfield;
}

.woocommerce div.product form.cart div.quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart div.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1;
	font-size: 1.0625rem;
	border-radius: var(--gamur-radius-lg);
	padding: 15px 20px;
}

/* ---------- Reaseguros ---------- */

.gamur-reassurance {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: var(--gamur-text-xs);
	color: var(--gamur-ink-soft);
	padding-top: 8px;
}

/* ---------- Relacionados ---------- */

.woocommerce div.product .related,
.woocommerce div.product .up-sells {
	grid-column: 1 / -1;
	margin-top: 60px;
}

.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2 {
	font-size: 1.875rem;
	font-weight: 700;
	margin: 0 0 22px;
}

/* Los tabs nativos quedan a ancho completo bajo las dos columnas. */
.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 48px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 20px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--gamur-surface);
	border: 1px solid var(--gamur-border);
	border-radius: var(--gamur-radius-pill);
	padding: 0;
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 9px 18px;
	font-weight: 600;
	color: var(--gamur-ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--gamur-blush);
	border-color: var(--gamur-primary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--gamur-primary-dark);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 480px) {
	.gamur-size-options { flex-direction: column; }
	.gamur-cart-actions { flex-wrap: wrap; }
	.woocommerce div.product form.cart .single_add_to_cart_button { flex-basis: 100%; }
}