/* ==========================================================================
   WorkStyle — Single product page: product carousels
   "Related products" + "You may also like…" (up-sells), and any other
   .wd-products slider WoodMart renders on the product page.

   Goal: every card the same height, media area the same size regardless of
   the source image ratio, meta rows (swatches / title / price) aligned.
   Mirrors the treatment already used on shop-archive.css.
   Loaded only on single product pages (see functions.php -> is_product()).
   ========================================================================== */

:root {
	--wds-pdp-media-bg: #F4F4F5;
	--wds-pdp-media-ratio: 1 / 1.14;
}

/* --------------------------------------------------------------------------
   Equal-height slides / grid cells
   -------------------------------------------------------------------------- */

.single-product .wd-products .wd-carousel-wrap {
	align-items: stretch;
}

.single-product .wd-products .wd-carousel-item {
	height: auto;
}

.single-product .wd-products .wd-product {
	text-align: left;
}

.single-product .wd-products .wd-product .wd-product-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* --------------------------------------------------------------------------
   Uniform media area — fixes short / portrait images (e.g. white-bg shots)
   sitting at a different height than the square lifestyle photos.
   -------------------------------------------------------------------------- */

.single-product .wd-products .wd-product .wd-product-thumb {
	position: relative;
	aspect-ratio: var(--wds-pdp-media-ratio);
	overflow: hidden;
	background: var(--wds-pdp-media-bg);
	margin-bottom: 14px;
}

.single-product .wd-products .wd-product .wd-product-thumb > a.wd-product-img-link,
.single-product .wd-products .wd-product .wd-product-thumb > .product-image-link {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.single-product .wd-products .wd-product .wd-product-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

/* --------------------------------------------------------------------------
   Meta rows — keep swatches / title / price on the same baseline
   -------------------------------------------------------------------------- */

/* Reserve the swatch row so cards without swatches don't ride up */
.single-product .wd-products .wd-product .wd-swatches-product {
	min-height: 24px;
	margin-top: 0;
	margin-bottom: 6px;
}

/* Title always occupies two lines' worth of space */
.single-product .wd-products .wd-product .wd-entities-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	margin-bottom: 6px;
}

/* Price / "Select options" pinned to the bottom of every card */
.single-product .wd-products .wd-product .price {
	margin-top: auto;
	padding-top: 6px;
}

.single-product .wd-products .wd-product .wd-add-btn {
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Carousel prev / next arrows
   WoodMart centres them on 50% of the whole card row. Now that the cards are
   taller (reserved swatch + 2-line title + price), 50% lands down near the
   swatches. Nudge them up with WoodMart's own --wd-arrow-offset-v so they sit
   on the middle of the product image, and pull them a touch inward so the
   right arrow never overflows the full-bleed layout.
   -------------------------------------------------------------------------- */

.single-product .wd-products .wd-nav-arrows.wd-pos-sep {
	--wd-arrow-offset-v: 54px;
	--wd-arrow-offset-h: -6px;
}

@media (max-width: 1024px) {
	.single-product .wd-products .wd-nav-arrows.wd-pos-sep {
		--wd-arrow-offset-v: 46px;
		--wd-arrow-offset-h: 2px;
	}
}

@media (max-width: 575.98px) {
	.single-product .wd-products .wd-nav-arrows.wd-pos-sep {
		--wd-arrow-offset-v: 40px;
	}
}