/*
 * SportingZone product-media contract.
 *
 * WooCommerce card thumbnails are generated at 4:3. Custom studio images use
 * their original 3:2 files. Product photography is never cropped or rescaled
 * at a breakpoint. Tightly composed source files receive an explicit,
 * product-slug calibration so visible subjects remain consistent without
 * modifying the media asset. Decorative editorial photography is outside
 * this contract.
 */

/* WooCommerce product collections outside the dedicated archive layout. */
body:not(.nw-product-archive) .wc-block-product-template > li.product .wc-block-components-product-image {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
	background: #efefef;
}

body:not(.nw-product-archive) .wc-block-product-template > li.product .wc-block-components-product-image > a {
	display: block;
	width: 100%;
	height: 100%;
}

body:not(.nw-product-archive) .wc-block-product-template > li.product .wc-block-components-product-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: contain !important;
	object-position: 50% 50%;
	transform: none !important;
	transform-origin: 50% 50%;
	background: #efefef;
}

/* Custom cards use full-size 3:2 studio photography. */
.gf-cats .gf-cat__img,
.gf-picks .gf-pick__shot {
	aspect-ratio: 3 / 2 !important;
	overflow: hidden;
	background: #efefef !important;
}

.gf-cats .gf-cat__img img,
.gf-picks .gf-pick__shot img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 50%;
	transform: none !important;
	transform-origin: 50% 50%;
	background: #efefef;
	transition: none;
}

/*
 * These two source files place the bike against virtually the full canvas.
 * The other homepage bikes occupy about 82.5% of it, so normalise the image
 * element itself rather than cropping, transforming, or editing the asset.
 */
.gf-picks .gf-pick:is(
	[href*="/product/cube-reaction-hybrid-performance-600/"],
	[href*="/product/cube-reaction-hybrid-pro-800/"]
) .gf-pick__shot {
	display: grid;
	place-items: center;
	background: #fff !important;
}

.gf-picks .gf-pick:is(
	[href*="/product/cube-reaction-hybrid-performance-600/"],
	[href*="/product/cube-reaction-hybrid-pro-800/"]
) .gf-pick__shot img {
	width: 82.5% !important;
	height: 82.5% !important;
}

/* Finder cards keep their store-owned product cutouts fully visible. */
body.page-id-39 main .entry-content > .gf-cards:nth-of-type(1) .gf-card__shot img {
	object-fit: contain !important;
	object-position: 50% 50%;
	transform: none !important;
	transform-origin: 50% 50%;
	mix-blend-mode: normal !important;
	filter: none !important;
	transition: none;
}

body.page-id-39 main .entry-content > .gf-cards:nth-of-type(1) > .gf-card:first-child .gf-card__shot,
body.page-id-39 main .entry-content > .gf-cards:nth-of-type(1) > .gf-card:first-child .gf-card__shot img {
	background: #eeeeee !important;
}

body.page-id-39 main .entry-content > .gf-cards:nth-of-type(1) > .gf-card:last-child .gf-card__shot,
body.page-id-39 main .entry-content > .gf-cards:nth-of-type(1) > .gf-card:last-child .gf-card__shot img {
	background: #ffffff !important;
}

/* Theme-owned editorial photography fills guide stages from one safe crop. */
body.page-id-39 main .entry-content > .gf-cards:nth-of-type(2) .gf-card__shot img,
body.page-id-39 main .entry-content > .gf-cards:nth-of-type(3) .gf-card__shot img {
	object-fit: cover !important;
	object-position: 50% 50%;
	transform: none !important;
	transform-origin: 50% 50%;
	background: transparent;
	mix-blend-mode: normal !important;
	filter: none !important;
	transition: none;
}

/* The Store API supplies the original 3:2 studio image to the mini-cart. */
.wc-block-mini-cart__drawer table.wc-block-mini-cart-items .wc-block-cart-item__image a {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	background: #efefef;
}

.wc-block-mini-cart__drawer table.wc-block-mini-cart-items .wc-block-cart-item__image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: contain !important;
	object-position: 50% 50%;
	transform: none !important;
	background: #efefef;
}

/* Related-product cards use WooCommerce's generated 4:3 thumbnails. Keep
 * the card stage on that same ratio so the thumbnail fills the stage without
 * side bars or a crop. The badge follows the product-gallery sale marker. */
:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-components-product-image {
	position: relative;
	aspect-ratio: 4 / 3 !important;
	background: #fff !important;
	overflow: hidden;
}

/* Related products are full cards, not free-floating image and text pairs. */
:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-product-template > li.wc-block-product {
	box-sizing: border-box;
	background: #f1f2f2;
	border: 1px solid #d9e0e1;
	border-radius: 16px;
	overflow: hidden;
	padding: 0 0 20px;
}

:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-components-product-image > a {
	display: block;
	width: 100%;
	height: 100%;
}

:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-components-product-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 50%;
	background: #fff !important;
}

/* Trek source artwork is framed more tightly than the established catalogue
 * photography. A small visual reduction and upward focal-point shift
 * normalise the apparent bike size while keeping the image fully visible in
 * related/cross-sell stages. */
.wc-block-product-template > li:is(
	.post-8416,
	.post-8459,
	.post-8425,
	.post-8436,
	.post-8442
) .wc-block-components-product-image > a,
.wc-block-grid__products > li:is(
	.post-8416,
	.post-8459,
	.post-8425,
	.post-8436,
	.post-8442
) .wc-block-components-product-image > a {
	display: grid;
	place-items: center;
}

.wc-block-product-template > li:is(
	.post-8416,
	.post-8459,
	.post-8425,
	.post-8436,
	.post-8442
) .wc-block-components-product-image img,
.wc-block-grid__products > li:is(
	.post-8416,
	.post-8459,
	.post-8425,
	.post-8436,
	.post-8442
) .wc-block-components-product-image img {
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	transform: translateY(-10%) scale(0.9) !important;
	transform-origin: 50% 50%;
}

/* The single-product base image rule has higher specificity than the shared
 * collection rule above. Re-assert the same scale inside related products so
 * Trek cards do not revert to the unnormalised transform there. */
:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-product-template > li:is(
	.post-8416,
	.post-8459,
	.post-8425,
	.post-8436,
	.post-8442
) .wc-block-components-product-image img,
:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-grid__products > li:is(
	.post-8416,
	.post-8459,
	.post-8425,
	.post-8436,
	.post-8442
) .wc-block-components-product-image img {
	transform: translateY(-10%) scale(0.9) !important;
	transform-origin: 50% 50%;
}

:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-product-template > li:is(
	.post-8436,
	.post-8442
) .wc-block-components-product-image img,
:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-grid__products > li:is(
	.post-8436,
	.post-8442
) .wc-block-components-product-image img {
	transform: translateY(-13%) scale(0.9) !important;
}

:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-product-template > li.wc-block-product > .wp-block-post-title {
	margin: 16px 20px 8px !important;
}

:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-price {
	margin: 0 20px !important;
}

/* Match the product-page offer treatment in related and cross-sell cards.
 * The Store API emits the regular price first; flex ordering puts the live
 * sale price first without changing the accessible source order. */
:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-price > .wc-block-components-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.45rem;
	color: #0f1f24;
}
:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-price > .wc-block-components-product-price ins {
	order: -1;
	color: #0f1f24;
	font-weight: 850;
	text-decoration: none;
}

:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-price > .wc-block-components-product-price del {
	order: 0;
	color: #65767b;
	font-weight: 650;
	text-decoration: line-through;
}

:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-price ins .woocommerce-Price-amount,
:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-product-template > li.wc-block-product > .wp-block-woocommerce-product-price del .woocommerce-Price-amount {
	color: inherit;
}

:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-components-product-sale-badge {
	position: absolute;
	z-index: 2;
	top: 1rem;
	left: 1rem;
	right: auto;
	display: inline-flex;
	width: auto;
	min-height: 0;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: 999px;
	background: #123c47;
	box-shadow: none;
	color: #fff;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
}

:is(.single-product .gf-related, .nw-cart-recommendations) .wc-block-components-product-sale-badge__text {
	color: inherit;
}

/* Keep every imported product image inside the gallery frame. Trek's
 * supplied assets use a 4:3 canvas while the gallery stage is 3:2; forcing
 * both dimensions to the stage lets contain preserve the complete bike
 * without the intrinsic image height being clipped by the slide. */
.single-product .gf-carousel__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.single-product .gf-carousel__slide img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
	object-position: 50% 50%;
	/* Do not shrink the primary image inside the stage. The older gallery
	 * rule applied a scale transform and left large empty bands above and
	 * below the bike. */
	transform: none !important;
}

/* Remove the empty facet paragraph that otherwise contributes a full
 * margin block between the key specs and the variation controls. */
.single-product .gf-summary > p:has(.gf-facet) {
	display: none !important;
	margin: 0 !important;
}

/* Keep the purchase controls and payment methods tightly grouped. */
.single-product .gf-offer > .wp-block-add-to-cart-form {
	margin-top: 0 !important;
}

.single-product .gf-offer > .wp-block-add-to-cart-form > form + div {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* The detail photos are supplied as 4:3 assets. Match that canvas and remove
 * the per-column padding from the image shell so all three cards align. */
.single-product .gf-details .entry-content > .gf-comp--rich > .gf-comp__c {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.single-product .gf-details .entry-content > .gf-comp--rich .gf-comp__sh {
	aspect-ratio: 4 / 3 !important;
	background: #f1f1ef;
}

.single-product .gf-details .entry-content > .gf-comp--rich .gf-comp__sh img {
	object-fit: contain !important;
}

/* Use the full product image in comparison headers and keep its complete
 * canvas visible instead of letterboxing a square thumbnail into a short box. */
.single-product .gf-details .gf-compare .nw-compare__image {
	height: auto !important;
	aspect-ratio: 4 / 3;
}

.single-product .gf-details .gf-compare .nw-compare__image img {
	object-fit: contain !important;
}

/* The mobile sticky bar inherits the same current-first sale treatment as the
 * product price and comparison table. */
.single-product .gf-stickybuy__price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
}

.single-product .gf-stickybuy__price ins {
	font-weight: 700;
	text-decoration: none;
}

.single-product .gf-stickybuy__price del {
	color: #77878a;
	font-size: 0.9em;
}

/* Thumbnail images must use the same complete canvas as their gallery slides.
 * WooCommerce can otherwise provide a hard-cropped square thumbnail. */
.single-product .gf-carousel__thumb img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
}

/* Native empty-basket recommendation buttons share the card's inset. */
.nw-cart-recommendations .wp-block-woocommerce-product-button {
	margin: 12px 20px 0;
}

.nw-cart-recommendations .wp-block-post-title {
	font-weight: 700;
}

.nw-cart-recommendations .wp-block-woocommerce-product-button .wp-block-button__link {
	width: 100%;
	border-radius: 8px;
}

/* Product zoom: show transparent artwork on white without editing source
 * images. Invert only PhotoSwipe's existing white UI sprites, never photos. */
.single-product .pswp__bg,
.single-product .pswp__img {
	background: #fff;
}

.single-product .pswp .pswp__top-bar,
.single-product .pswp .pswp__caption {
	background-color: rgba(255, 255, 255, 0.96);
}

.single-product .pswp__counter,
.single-product .pswp__caption__center,
.single-product .pswp__caption small {
	color: #0f1f24;
}

.single-product .pswp__button,
.single-product .pswp__preloader {
	filter: invert(1);
}

.single-product .pswp__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}