/*
 * Product card titles, badges, and equal-height layout in catalogue listings.
 *
 * Ported and adapted from fasttoner-react to ensure cards are equal in height,
 * images are consistently proportioned, titles clamp uniformly, and prices
 * align to the bottom across all rows.
 */

/* ==========================================================================
   1. Grid / Row stretching
   ========================================================================== */
.products,
.products.jas-row,
.site-content .products:not(.jas-carousel):not(.slick-slider),
.site-search-grid .products,
.site-search-layout .products {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
}

/* Specific 4-column responsive grid on catalog listing and archive pages */
.ft-listing-results .products,
.ft-listing .products.jas-row,
.ft-facets-archive .products,
.ft-facets-archive .products.jas-row {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 20px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	align-items: stretch !important;
}

.ft-listing-results .products > .product,
.ft-listing .products.jas-row > .product,
.ft-facets-archive .products > .product,
.ft-facets-archive .products.jas-row > .product,
.ft-facets-archive .products > [class*="jas-col-"] {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

@media (max-width: 1200px) {
	.ft-listing-results .products,
	.ft-listing .products.jas-row,
	.ft-facets-archive .products,
	.ft-facets-archive .products.jas-row {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
}

@media (max-width: 768px) {
	.ft-listing-results .products,
	.ft-listing .products.jas-row,
	.ft-facets-archive .products,
	.ft-facets-archive .products.jas-row {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}
}

/* Wide desktop catalogue: use the extra horizontal room without inflating
   four cards across the whole viewport. This mirrors the React catalogue's
   wide-screen column breakpoint. */
@media (min-width: 1650px) {
	.ft-listing-results .products,
	.ft-listing .products.jas-row,
	.ft-facets-archive .products,
	.ft-facets-archive .products.jas-row {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}
}

/* ==========================================================================
   2. Column / Item Container
   ========================================================================== */
.products .product,
.products > [class*="jas-col-"].product,
.site-content .products .product,
.replica-product {
	display: flex !important;
	flex-direction: column !important;
	box-sizing: border-box !important;
	margin-bottom: 24px !important;
}

/* ==========================================================================
   3. Card Inner (.product-inner) - Equal height & Clean box style
   ========================================================================== */
.products .product > .product-inner,
.products .product .product-inner,
.replica-product > .product-inner,
.replica-product .product-inner {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	height: 100% !important;
	flex: 1 1 auto !important;
	border: 1px solid var(--fx-line, #e2e8f0) !important;
	border-radius: var(--fx-radius, 8px) !important;
	padding: 12px !important;
	background: #fff !important;
	box-sizing: border-box !important;
	position: relative !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.products .product:hover .product-inner,
.replica-product:hover .product-inner {
	border-color: var(--fx-accent-line, #3b82f6) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   4. Product Image Container & Normalized Image Heights
   ========================================================================== */
.products .product .product-image,
.replica-product .product-image {
	position: relative !important;
	width: 100% !important;
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #fff !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	margin-bottom: 6px !important;
}

.products .product .product-image > a,
.replica-product .product-image > a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	aspect-ratio: 1 / 1.05 !important;
	height: 180px !important;
	text-decoration: none !important;
}

@supports (aspect-ratio: 1 / 1.05) {
	.products .product .product-image > a,
	.replica-product .product-image > a {
		height: auto !important;
	}
}

.products .product .product-image img,
.products .product .product-image > a img,
.replica-product .product-image img,
.replica-product .product-image > a img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1.05 !important;
	object-fit: contain !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 auto !important;
	transition: transform 0.25s ease !important;
}

.products .product:hover .product-image img,
.replica-product:hover .product-image img {
	transform: scale(1.03) !important;
}

/* ==========================================================================
   5. Product Info Section
   ========================================================================== */
.products .product .product-info,
.replica-product .product-info {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	margin-top: auto !important;
	padding: 8px 0 0 !important;
	box-sizing: border-box !important;
	text-align: left !important;
}

/* ==========================================================================
   6. Badges and Brand Meta
   ========================================================================== */
.fx-card-meta,
.ft-card-meta,
.products .product .fx-card-meta,
.products .product .ft-card-meta,
.replica-product .fx-card-meta,
.replica-product .ft-card-meta {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 6px !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	margin: 0 0 6px !important;
	min-height: 26px !important;
	height: 26px !important;
	overflow: hidden !important;
}

.fx-card-brand,
.ft-card-brand,
.products .product .fx-card-brand,
.products .product .ft-card-brand,
.replica-product .fx-card-brand,
.replica-product .ft-card-brand {
	display: inline-flex !important;
	align-items: center !important;
	flex: 0 0 auto !important;
	height: 24px !important;
	margin-right: 4px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	color: #1c1c1c !important;
	text-transform: uppercase !important;
}

.ft-card-brand-img,
.fx-card-brand img,
.ft-card-brand img,
.products .product .fx-card-brand img,
.products .product .ft-card-brand img,
.replica-product .fx-card-brand img,
.replica-product .ft-card-brand img {
	display: block !important;
	width: auto !important;
	max-width: 68px !important;
	height: auto !important;
	max-height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	object-fit: contain !important;
}

.ft-card-brand--own {
	color: #dd3333 !important;
}

.ft-badge,
.fx-badge,
.products .product .ft-badge,
.products .product .fx-badge,
.replica-product .ft-badge,
.replica-product .fx-badge {
	display: inline-flex !important;
	align-items: center !important;
	padding: 2px 7px !important;
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: #4a4a4a !important;
	background: #f0f0f0 !important;
	border-radius: 4px !important;
	white-space: nowrap !important;
}

.ft-badge--original,
.fx-badge-original {
	color: #7a5200 !important;
	background: #fdf1d6 !important;
	border: 1px solid #ebd095 !important;
}

.ft-badge--compatible,
.fx-badge-compatible {
	color: #9c2020 !important;
	background: #fdeaea !important;
	border: 1px solid #f4c4c4 !important;
}

.ft-badge--rental {
	color: #1f5d3a !important;
	background: #e6f4ec !important;
}

/* ==========================================================================
   7. Product Title - Clamped to 2 lines with consistent fixed height
   ========================================================================== */
.products .product .product-title,
.products .product h3.product-title,
.replica-product .product-title,
.replica-product h3.product-title {
	display: block !important;
	min-height: 2.85em !important;
	max-height: 2.85em !important;
	line-height: 1.4 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	overflow: hidden !important;
	font-size: 13.5px !important;
	text-align: left !important;
	width: 100% !important;
}

.products .product .product-title a,
.replica-product .product-title a {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.4 !important;
	max-height: 2.85em !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--fx-ink, #1e293b) !important;
	text-decoration: none !important;
	text-align: left !important;
}

.products .product .product-title a:hover,
.replica-product .product-title a:hover {
	color: var(--fx-accent, #0088cc) !important;
}

.ft-card-title {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.25rem !important;
	margin: 0.5rem 0 !important;
	text-align: left !important;
	width: 100% !important;
}

.ft-card-title__short {
	display: block !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: #1c1c1c !important;
}

.ft-card-title__full {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
	overflow: hidden !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: #6b6b6b !important;
}

.ft-card-title__full--only {
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	color: inherit !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
}

/* ==========================================================================
   8. Price - Pinned to bottom with consistent height and alignment

   No colour is set here on purpose. enhance.css owns one price colour for the
   whole site (--fx-price); the card used to override it to the accent blue,
   which left grid cards disagreeing with the product page and the upsell
   carousel, and tinted the digits without the currency symbol following.
   ========================================================================== */
.products .product .product-info .price,
.products .product .price,
.replica-product .product-info .price,
.replica-product .price {
	margin-top: auto !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	align-content: flex-start !important;
	justify-content: flex-start !important;
	gap: 4px 6px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 3.4em !important;
	height: 3.4em !important;
	max-height: 3.4em !important;
	overflow: hidden !important;
	line-height: 1.3 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	padding-top: 6px !important;
	border-top: 1px solid #f1f5f9 !important;
	text-align: left !important;
}

/* Keep every supporting line inside a product card centred as well. This
   shared rule covers the home shelves, catalogue, product archives, search,
   related products and upsells without changing ordinary page copy. */
.products .product :is(.fx-card-fits, .ft-card-fits, .product-description),
.replica-product :is(.fx-card-fits, .ft-card-fits, .product-description) {
	width: 100% !important;
	text-align: left !important;
}

.products .product .price del,
.replica-product .price del {
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #94a3b8 !important;
	opacity: 0.85 !important;
}

.products .product .price ins,
.replica-product .price ins {
	text-decoration: none !important;
	font-weight: 700 !important;
}

.products .product .price .amount,
.replica-product .price .amount {
	font-weight: 700 !important;
	color: inherit !important;
}

/* ==========================================================================
   9. Slick Carousel support (Homepage carousels)
   ========================================================================== */
.products.jas-carousel .slick-track {
	display: flex !important;
	align-items: stretch !important;
}

/* Centre short homepage shelves instead of leaving the unused carousel slots
   as empty space on the right. Longer shelves still scroll normally. */
body.home #jas-content .jas-sc-products .products.jas-carousel {
	justify-content: center !important;
}

body.home #jas-content .jas-sc-products .products.jas-carousel .slick-list {
	width: 100% !important;
}

body.home #jas-content .jas-sc-products .products.jas-carousel .slick-slide {
	flex: 0 0 auto !important;
	max-width: none !important;
}

body.home #jas-content .jas-sc-products .products.jas-carousel .slick-track {
	margin-right: auto !important;
	margin-left: auto !important;
}

body.home #jas-content .jas-sc-products .products.jas-carousel:not(.slick-initialized) > .product {
	float: none !important;
}

/* Desktop homepage content uses the available viewport instead of the old
   fixed 1170px container. Keep a calm gutter at both edges. */
@media (min-width: 1200px) {
	body.home #jas-content .elementor-widget-text-editor .jas-container {
		box-sizing: border-box !important;
		width: calc(100% - 64px) !important;
		max-width: none !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}
}
.products.jas-carousel .slick-slide {
	height: auto !important;
	display: flex !important;
	flex-direction: column !important;
}
.products.jas-carousel .slick-slide > div {
	display: flex !important;
	flex: 1 1 auto !important;
	height: 100% !important;
	width: 100% !important;
}
.products.jas-carousel .product {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	margin-bottom: 0 !important;
}

/* One card system for every WooCommerce surface. Keep every card stretched to
   its row/track height and make the inner layout consume the same space on the
   homepage, archives, search, catalogue, related and upsell sections. */
.site-content .products > .product,
.site-content .products .slick-track > .product,
.site-content .replica-products > .replica-product,
.site-content .ft-product-grid > .replica-product,
.site-content .site-search-grid .product {
	align-self: stretch !important;
	height: auto !important;
}

.site-content .products > .product > .product-inner,
.site-content .products .slick-track > .product > .product-inner,
.site-content .replica-products > .replica-product > .product-inner,
.site-content .ft-product-grid > .replica-product > .product-inner,
.site-content .site-search-grid .product > .product-inner {
	min-height: 100% !important;
	height: 100% !important;
}

/* Keep the native Slick product rows in Slick's block formatting context.
 * The generic product grid is flex-based, but applying flex to the slider
 * itself makes WebKit calculate an oversized track and lets portrait product
 * artwork spill outside its card on narrow iPhones. */
#jas-content .products.jas-carousel.slick-slider {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex-wrap: nowrap !important;
}

#jas-content .products.jas-carousel.slick-slider .slick-list {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow: hidden !important;
}

#jas-content .products.jas-carousel.slick-slider .slick-track {
	display: flex !important;
	align-items: stretch !important;
}

#jas-content .products.jas-carousel.slick-slider .slick-slide {
	display: flex !important;
	flex: 0 0 auto !important;
	flex-direction: column !important;
	float: none !important;
	height: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

#jas-content .products.jas-carousel.slick-slider .slick-slide > .product-inner,
#jas-content .products.jas-carousel.slick-slider .product-image,
#jas-content .products.jas-carousel.slick-slider .product-image > a {
	min-width: 0 !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

#jas-content .products.jas-carousel.slick-slider .product-image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
}

/* Keep the two-column phone carousel compact. Portrait source artwork must not
 * inherit a near-square full-card height, and its brand/type metadata must wrap
 * instead of being cropped by the narrower card. */
@media (max-width: 480px) {
	html body #jas-content .products.jas-carousel.slick-slider .product-image > a {
		height: clamp(120px, 38vw, 140px) !important;
		min-height: 0 !important;
		max-height: 140px !important;
		aspect-ratio: auto !important;
	}

	html body #jas-content .products.jas-carousel.slick-slider .product-image > a img {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
		object-position: center !important;
	}

	html body #jas-content .products.jas-carousel.slick-slider .fx-card-meta,
	html body #jas-content .products.jas-carousel.slick-slider .ft-card-meta {
		flex-wrap: wrap !important;
		align-content: center !important;
		justify-content: flex-start !important;
		gap: 3px !important;
		height: 52px !important;
		min-height: 52px !important;
		overflow: hidden !important;
	}

	html body #jas-content .products.jas-carousel.slick-slider .fx-card-brand,
	html body #jas-content .products.jas-carousel.slick-slider .ft-card-brand {
		width: 100% !important;
		height: 22px !important;
		margin: 0 !important;
		justify-content: flex-start !important;
	}

	html body #jas-content .products.jas-carousel.slick-slider .fx-card-brand img,
	html body #jas-content .products.jas-carousel.slick-slider .ft-card-brand img {
		max-width: 58px !important;
		max-height: 21px !important;
	}

	html body #jas-content .products.jas-carousel.slick-slider .fx-badge,
	html body #jas-content .products.jas-carousel.slick-slider .ft-badge {
		max-width: 100% !important;
		padding: 2px 5px !important;
		font-size: 9px !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
}

@media (min-width: 481px) and (max-width: 767px) {
	html body #jas-content .products.jas-carousel.slick-slider .product-image > a {
		height: 150px !important;
		min-height: 0 !important;
		max-height: 150px !important;
		aspect-ratio: auto !important;
	}

	html body #jas-content .products.jas-carousel.slick-slider .product-image > a img {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
		object-position: center !important;
	}
}

.site-content .products .slick-track > .product.slick-slide {
	display: flex !important;
	flex-direction: column !important;
}