/**
 * WooCommerce single product page — matches design-mockup/producto.html.
 */

/* The mockup resets every margin to 0 globally; without it the browser's
   default <p>/<figure>/<h2> margins leaked into the gallery and tab panels.
   :where() on both sides keeps this at zero specificity so every explicit
   margin rule below (and in 11-shop.css) still wins. */
:where(.single-product #gea-shop-app) :where(p, h1, h2, h3, h4, figure, ul, ol, li, table) {
	margin: 0;
}

.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
}

.page-banner .woocommerce-breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
}

.page-banner .woocommerce-breadcrumb a:hover {
	color: #fff;
}

.single-product .product {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	column-gap: clamp(32px, 5vw, 72px);
	row-gap: 0; /* tabs/related share this grid; their own margins set the spacing */
	align-items: start;
}

/* WooCommerce prints the tabs + related-products sections INSIDE the same
   #product-X element as the gallery/summary (content-single-product.php),
   so without this they'd land as extra grid items squeezed into a single
   column instead of spanning the full width below the gallery+summary row. */
.single-product .product > .woocommerce-tabs,
.single-product .product > .gea-models,
.single-product .product > .related.products {
	grid-column: 1 / -1;
}

/* Grid items default to min-width:auto, so the widest child (the tab row)
   stretched the single mobile column to ~480px on a 375px screen. */
.single-product .product > * {
	min-width: 0;
}

.woocommerce-product-gallery {
	position: relative;
	display: grid;
	gap: 12px;
}

/* WooCommerce's lightbox zoom button (wc-product-gallery-lightbox). The
   mockup has no such control; as a grid child it took its own row and
   pushed the photo 40px down, so it floats over the photo's corner instead. */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	font-size: 0;
}

.woocommerce-product-gallery__trigger span,
.woocommerce-product-gallery__trigger::before {
	font-size: 15px;
}

.woocommerce-product-gallery__image {
	aspect-ratio: 4 / 3;
	border-radius: var(--r-img, 22px);
	overflow: hidden;
	background: var(--mist-warm);
}

.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.flex-control-thumbs li {
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.55;
	border: 2px solid transparent;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.flex-control-thumbs li.is-active,
.flex-control-thumbs li:hover {
	opacity: 1;
	border-color: var(--ink);
}

.flex-control-thumbs img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.summary .label {
	margin: 0 0 16px;
	font-size: clamp(16px, 1.3vw, 19px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--ink);
}

.product_title {
	font-size: clamp(32px, 3.6vw, 46px);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}

.woocommerce-product-details__short-description {
	font-size: 16.5px;
	color: var(--slate);
}

/* The ficha técnica takes the photo gallery's place (design-mockup
   producto.html): pages shown whole on a sand tile, linking to the PDF. */
a.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image {
	display: block;
	background: var(--white);
	border: 1px solid var(--mist-warm);
}

.woocommerce-product-gallery__image img {
	object-fit: contain;
	padding: 8%;
	mix-blend-mode: multiply;
}

.woocommerce-product-gallery.is-ficha .woocommerce-product-gallery__image {
	aspect-ratio: auto;
	background: var(--mist-warm);
	cursor: zoom-in;
}

.woocommerce-product-gallery.is-ficha .woocommerce-product-gallery__image img {
	height: auto;
	max-height: min(78vh, 980px);
	padding: clamp(16px, 3vw, 32px);
	mix-blend-mode: normal;
}

.woocommerce-product-gallery.is-ficha .flex-control-thumbs li {
	aspect-ratio: 3 / 4;
	background: var(--mist-warm);
}

.woocommerce-product-gallery.is-ficha .flex-control-thumbs img {
	object-fit: contain;
	padding: 8px;
}

.flex-control-thumbs button {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* `.elementor img { height:auto }`-style resets would undo the thumbnails' fill */
.flex-control-thumbs button img {
	height: 100%;
}

/* Features list */
.product__features {
	list-style: none;
	display: grid;
	gap: 8px;
	margin: 24px 0 28px;
	padding: 20px 0 0;
	border-top: 1px solid var(--mist-warm);
}

.product__features li {
	position: relative;
	padding-left: 18px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink);
}

.product__features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--accent);
}

.gea-quote {
	display: grid;
	gap: 12px;
	padding: 26px;
	background: var(--white);
	border: 1px solid var(--mist-warm);
	border-radius: var(--r-card, 16px);
}

.gea-quote__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.gea-quote__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--slate);
}

.product_meta {
	margin-top: 22px;
	display: grid;
	gap: 6px;
	font-size: 13px;
	color: var(--slate);
}

.gea-quote__models {
	justify-self: start;
}

/* design-mockup .link-arrow */
.gea-quote .link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.product_meta a,
.product_meta > span > span {
	color: var(--ink);
	font-weight: 500;
	text-decoration: none;
}

/* Quantity stepper (visual only for now) */
.quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mist-warm);
	border-radius: 999px;
	background: var(--white);
	overflow: hidden;
}

/* Elementor's Kit gives every <button> a 15px/28px padding (Site Settings →
   Buttons), which blew these up to 56px wide. */
#gea-shop-app .quantity button {
	padding: 0;
}

.quantity button {
	width: 40px;
	height: 44px;
	font-size: 18px;
	color: var(--slate);
	background: none;
	border: 0;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.quantity button:hover {
	background: var(--mist-warm);
	color: var(--ink);
}

.quantity input.qty {
	width: 48px;
	height: 44px;
	text-align: center;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	border: 0;
	background: transparent;
	-moz-appearance: textfield;
}

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

.quantity input.qty:focus {
	outline: none;
}

/* btn--ghost, only needed here so far */
.btn--ghost {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	border: 1px solid var(--ink);
	color: var(--ink);
	text-decoration: none;
}

.btn--ghost:hover {
	background: var(--ink);
	color: #fff;
}

/* Tabs — markup/JS come from WooCommerce's native jQuery UI tabs, this is styling only */
.woocommerce-tabs {
	margin-top: clamp(56px, 7vw, 88px);
}

.wc-tabs {
	list-style: none;
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--mist-warm);
	overflow-x: auto;
}

.wc-tabs a {
	display: block;
	padding: 12px 18px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--slate);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
}

.wc-tabs li.active a,
.wc-tabs li.ui-tabs-active a {
	color: var(--ink);
	border-color: var(--ink);
}

.woocommerce-Tabs-panel {
	display: none;
	padding: 32px 0 8px;
	max-width: 760px;
	color: var(--slate);
	font-size: 16px;
	gap: 14px;
}

.woocommerce-Tabs-panel.is-active {
	display: grid;
}

/* WooCommerce adds a 24px bottom margin to .panel and .summary; the mockup
   has neither. */
#gea-shop-app .woocommerce-Tabs-panel,
#gea-shop-app .summary {
	margin: 0;
}

.woocommerce-Tabs-panel h2 {
	font-size: 22px;
	font-weight: 400;
	color: var(--ink);
	margin: 0;
}

.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.shop_attributes th,
.shop_attributes td {
	text-align: left;
	padding: 12px 0;
	border-bottom: 1px solid var(--mist-warm);
	vertical-align: top;
}

.shop_attributes th {
	width: 220px;
	font-weight: 500;
	color: var(--ink);
	padding-right: 16px;
}

/* Related products — carousel of full catalog cards (ul.products/li.product
   card CSS from 11-shop.css), four per view across the section's width.
   Drag/fling/snap + arrows come from assets/js/slider.js. */
.related.products {
	margin-top: clamp(64px, 8vw, 104px);
}

.related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}

.related__head h2 {
	margin: 0;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 300;
	letter-spacing: -0.02em;
}

.related__head .slider__nav {
	display: flex;
	gap: 10px;
	margin: 0;
}

.related__head .circle-btn {
	/* raw <button>: reset the Kit's global button padding/background */
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 0;
	border: 1px solid var(--accent);
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-family: inherit;
	font-size: 17px;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.related__head .circle-btn:hover {
	background: #fff;
	border-color: var(--accent);
	color: var(--accent);
}

ul.products.related__track {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
}

ul.products.related__track::-webkit-scrollbar {
	display: none;
}

ul.products.related__track.is-grabbing {
	cursor: grabbing;
	user-select: none;
}

/* `.single-product .product` (the gallery/summary 2-column grid) also
   matches these li.product cards — restore the catalog card's own layout. */
.single-product ul.products.related__track > li.product {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - 3 * 18px) / 4);
	min-width: 0;
	column-gap: 0;
	scroll-snap-align: start;
}

ul.products.related__track img {
	-webkit-user-drag: none;
	user-select: none;
}

@media (max-width: 900px) {
	.single-product ul.products.related__track > li.product {
		flex-basis: calc((100% - 18px) / 2);
	}
}

@media (max-width: 600px) {
	ul.products.related__track {
		gap: 12px;
	}

	.single-product ul.products.related__track > li.product {
		flex-basis: 78%;
	}
}

@media (max-width: 900px) {
	.single-product .product {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The ficha fills a whole screen: name and description go first, then the
	   gallery, with the gap the desktop column-gap gave. */
	.single-product .product .summary {
		order: -1;
	}

	.single-product .product .woocommerce-product-gallery {
		margin-top: clamp(32px, 5vw, 72px);
	}
}

@media (max-width: 640px) {
	.flex-control-thumbs {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================================================
   Large screens (≥1800 px: QHD, 4K, ultra-wide) — design-mockup's
   "PANTALLAS GRANDES" layer. Below 1800 px nothing changes. Elementor
   content uses its own Widescreen breakpoint (Kit, 1800 px).
   ============================================================ */
@media (min-width: 1800px) {
	.summary .label {
		font-size: clamp(19px, 0.95vw, 24px);
	}

	.product_title {
		font-size: clamp(46px, 2.4vw, 60px);
	}
}