/**
 * CIE global product card.
 * Structure and dynamic fields come from Elementor Loop Item 57298.
 * Presentation for every WooCommerce product loop is owned here.
 */
:root {
	--cie-product-card-grid-gap: clamp(20px, 1.5625vw, 30px);
	--cie-product-card-carousel-gap: clamp(12px, 0.833vw, 16px);
	--cie-card-title-size: clamp(16px, 1.0417vw, 20px);
	--cie-card-title-line: clamp(24px, 1.5625vw, 30px);
	--cie-card-copy-size: clamp(14px, 0.9375vw, 18px);
	--cie-card-copy-line: clamp(22px, 1.5625vw, 30px);
}

body .woocommerce ul.products:has(.cie-elementor-product-card),
body.woocommerce-page ul.products:has(.cie-elementor-product-card),
body ul.products:has(.cie-elementor-product-card),
body .products:has(.cie-elementor-product-card),
body .elementor-loop-container:has(.cie-elementor-product-card),
body .e-loop-container:has(.cie-elementor-product-card),
body .cie-sp-related ul.products:has(.cie-elementor-product-card),
body .cie-sp-linked-products-section .cie-product-card-grid,
body .cie-product-card-grid:has(.cie-elementor-product-card),
body .cie-product-card-grid:has(.cie-product-card) {
	gap: var(--cie-product-card-grid-gap) !important;
	row-gap: var(--cie-product-card-grid-gap) !important;
	column-gap: var(--cie-product-card-grid-gap) !important;
}

/* Let each grid/carousel gap token own the visible spacing around global product cards. */
body li.product > .elementor.e-loop-item.elementor-57298 {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-inline: 0 !important;
}

/* Prevent Astra's plain 1fr archive grid from expanding brand cards to min-content width. */
@media (min-width: 1025px) {
	body.tax-product_brand ul.products:has(.cie-elementor-product-card) {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* Keep the Shop bestseller products in one Figma-style horizontal row. */
body.ast-woo-shop-archive #bestsellerblock .cie-shop-results__grid ul.products {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	grid-template-rows: auto !important;
	grid-auto-flow: row !important;
	grid-auto-columns: auto !important;
	gap: var(--cie-product-card-grid-gap) !important;
	row-gap: var(--cie-product-card-grid-gap) !important;
	column-gap: var(--cie-product-card-grid-gap) !important;
	justify-content: center !important;
	overflow: visible !important;
}

body.ast-woo-shop-archive #bestsellerblock .cie-shop-results__grid ul.products > li.product {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

body.ast-woo-shop-archive #bestsellerblock .cie-shop-results__grid ul.products > li.product > .elementor,
body.ast-woo-shop-archive #bestsellerblock .cie-shop-results__grid ul.products > li.product .e-loop-item,
body.ast-woo-shop-archive #bestsellerblock .cie-shop-results__grid .cie-elementor-product-card {
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
}

body.ast-woo-shop-archive #bestsellerblock .cie-shop-results__grid ul.products > li.product > .elementor.e-loop-item {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-inline: 0 !important;
}

body.ast-woo-shop-archive #bestsellerblock .cie-shop-results__pagination {
	display: none !important;
}

@media (max-width: 1024px) {
	body.ast-woo-shop-archive #bestsellerblock .cie-shop-results__grid ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767px) {
	body.ast-woo-shop-archive #bestsellerblock .cie-shop-results__grid ul.products {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

.cie-elementor-product-card {
	--cie-card-green: #a6ce39;
	--cie-card-teal: #465961;
	--cie-card-inline: clamp(16px, 1.0417vw, 20px);
	--cie-card-gap: clamp(12px, 0.8334vw, 16px);
	--cie-card-bottom: clamp(14px, 1.0417vw, 20px);
	--cie-card-media-height: clamp(150px, 10.4167vw, 200px);
	--cie-card-media-safe-inline: clamp(26px, 2.2917vw, 44px);
	--cie-card-media-safe-block: clamp(24px, 2.0834vw, 40px);
	--cie-card-brand-height: clamp(38px, 2.5vw, 48px);
	--cie-card-brand-gap: clamp(8px, 0.5209vw, 10px);
	--cie-card-brand-width: clamp(72px, 4.4271vw, 85px);
	--cie-card-brand-logo-height: clamp(21px, 1.3021vw, 25px);
	--cie-card-brand-logo-scale: 1;
	--cie-card-brand-logo-offset-x: 0px;
	--cie-card-action-gap: clamp(14px, 1.0417vw, 20px);
	--cie-card-title-slot: clamp(24px, 1.5625vw, 30px);
	--cie-card-copy-slot: clamp(22px, 1.5625vw, 30px);
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 0 0 var(--cie-card-bottom);
	padding-block-end: var(--cie-card-bottom);
	border: 2px solid transparent;
	border-radius: 30px;
	background: #fff;
	color: #292929;
	box-sizing: border-box;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.custom-product-item.cie-elementor-loop-product .cie-elementor-product-card {
	padding-bottom: var(--cie-card-bottom);
	padding-block-end: var(--cie-card-bottom);
}

.cie-elementor-product-card:hover,
.cie-elementor-product-card:focus-within {
	border-color: var(--cie-card-teal);
}

.cie-elementor-product-card .cie-loop-card-media {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: var(--cie-card-media-height);
	min-height: var(--cie-card-media-height);
	margin: 0 0 clamp(2px, 0.20834vw, 4px);
	padding: var(--cie-card-media-safe-block) var(--cie-card-media-safe-inline);
	box-sizing: border-box;
	overflow: visible;
	flex: 0 0 var(--cie-card-media-height);
}

.cie-elementor-product-card .cie-loop-card-media .elementor-widget,
.cie-elementor-product-card .cie-loop-card-media .elementor-widget-container {
	width: 100%;
	height: 100%;
}

.cie-elementor-product-card .cie-loop-card-media .elementor-widget-container {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.cie-elementor-product-card .cie-loop-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0 auto;
	object-fit: contain;
	object-position: center bottom;
}

.cie-elementor-product-card .cie-loop-card-media img[src*="/dpa" i] {
	object-position: 50% calc(100% + clamp(4px, 0.3125vw, 6px));
}

/* Keep the global renderer authoritative over Astra's Woo loop image rule. */
.custom-product-item.cie-elementor-loop-product .cie-elementor-product-card .cie-loop-card-media img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0 auto;
	object-fit: contain;
	object-position: center bottom;
}

.custom-product-item.cie-elementor-loop-product .cie-elementor-product-card .cie-loop-card-media img[src*="/dpa" i] {
	object-position: 50% calc(100% + clamp(4px, 0.3125vw, 6px));
}

.cie-elementor-product-card .cie-loop-card-brand {
	display: flex;
	align-items: center;
	height: var(--cie-card-brand-height);
	min-height: var(--cie-card-brand-height);
	max-height: var(--cie-card-brand-height);
	margin: 0 var(--cie-card-inline) var(--cie-card-brand-gap);
	margin-block-end: var(--cie-card-brand-gap);
	flex: 0 0 var(--cie-card-brand-height);
}

.custom-product-item.cie-elementor-loop-product .cie-elementor-product-card .cie-loop-card-brand {
	margin-bottom: var(--cie-card-brand-gap);
	margin-block-end: var(--cie-card-brand-gap);
}

.cie-elementor-product-card .cie-loop-card-brand .elementor-widget-container {
	display: flex;
	align-items: center;
}

.cie-elementor-product-card .cie-loop-card-brand .cie-product-brand-logo {
	display: block;
	width: var(--cie-card-brand-width);
	height: var(--cie-card-brand-logo-height);
	min-width: var(--cie-card-brand-width);
	max-width: var(--cie-card-brand-width);
	min-height: var(--cie-card-brand-logo-height);
	max-height: var(--cie-card-brand-logo-height);
	object-fit: contain;
	object-position: left center;
	transform: translateX(var(--cie-card-brand-logo-offset-x)) scale(var(--cie-card-brand-logo-scale));
	transform-origin: left center;
}

/* Akuvox's source SVG contains a tightly centred logo inside a large empty canvas. */
.cie-elementor-product-card .cie-loop-card-brand .cie-product-brand-logo[alt="Akuvox" i] {
	--cie-card-brand-logo-scale: 2.3;
	--cie-card-brand-logo-offset-x: clamp(-37px, -1.9271vw, -31px);
}

.cie-elementor-product-card .cie-loop-card-brand .cie-product-brand-logo[alt="2N" i] {
	--cie-card-brand-width: clamp(43px, 2.5vw, 48px);
	--cie-card-brand-logo-height: clamp(20px, 1.1459vw, 22px);
}

.cie-elementor-product-card .cie-loop-card-media + .cie-loop-card-title {
	margin-top: calc(var(--cie-card-brand-height) + var(--cie-card-brand-gap));
}

.cie-elementor-product-card .cie-loop-card-title {
	display: flex;
	align-items: center;
	height: var(--cie-card-title-slot);
	min-height: var(--cie-card-title-slot);
	max-height: var(--cie-card-title-slot);
	margin: 0 var(--cie-card-inline) var(--cie-card-gap);
	overflow: hidden;
	flex: 0 0 var(--cie-card-title-slot);
}

.cie-elementor-product-card .cie-loop-card-title .elementor-heading-title,
.cie-elementor-product-card .cie-loop-card-title .elementor-heading-title a {
	display: block;
	margin: 0;
	overflow: hidden;
	color: #292929;
	font-family: "Source Sans Pro", Arial, sans-serif;
	font-size: var(--cie-card-title-size);
	font-weight: 400;
	line-height: var(--cie-card-title-line);
	text-decoration: none;
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-line-clamp: unset;
}

.cie-elementor-product-card .cie-loop-card-title .elementor-heading-title {
	width: 100%;
}

.cie-elementor-product-card .cie-loop-card-subtitle {
	width: 100%;
	max-width: 100%;
	height: var(--cie-card-copy-slot);
	min-height: var(--cie-card-copy-slot);
	max-height: var(--cie-card-copy-slot);
	margin: 0;
	padding-inline: var(--cie-card-inline);
	overflow: hidden;
	box-sizing: border-box;
	flex: 0 0 var(--cie-card-copy-slot);
}

.cie-elementor-product-card .cie-loop-card-subtitle .elementor-widget-container,
.cie-elementor-product-card .cie-loop-card-subtitle .elementor-post__excerpt,
.cie-elementor-product-card .cie-loop-card-subtitle p {
	margin: 0;
}

.cie-elementor-product-card .cie-loop-card-subtitle,
.cie-elementor-product-card .cie-loop-card-subtitle .elementor-widget-container,
.cie-elementor-product-card .cie-loop-card-subtitle .elementor-post__excerpt,
.cie-elementor-product-card .cie-loop-card-subtitle p {
	display: block;
	overflow: hidden;
	color: var(--cie-card-teal);
	font-family: "Source Sans Pro", Arial, sans-serif;
	font-size: var(--cie-card-copy-size);
	font-weight: 600;
	line-height: var(--cie-card-copy-line);
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-line-clamp: unset;
}

/* Legacy linked-product markup consumes the same global typography as Loop Item 57298. */
body .cie-product-card .cie-product-card__title,
body .cie-product-card .cie-product-card__text {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
	overflow: hidden !important;
	font-family: "Source Sans Pro", Arial, sans-serif !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	-webkit-line-clamp: unset !important;
}

body .cie-product-card .cie-product-card__title {
	color: #292929 !important;
	font-size: var(--cie-card-title-size) !important;
	font-weight: 400 !important;
	line-height: var(--cie-card-title-line) !important;
	text-decoration: none !important;
}

body .cie-product-card .cie-product-card__text {
	color: #465961 !important;
	font-size: var(--cie-card-copy-size) !important;
	font-weight: 600 !important;
	line-height: var(--cie-card-copy-line) !important;
}

.cie-elementor-product-card .cie-loop-card-actions-widget {
	width: 100%;
	max-width: 100%;
	margin: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-top: var(--cie-card-action-gap);
	padding-inline: var(--cie-card-inline);
	padding-block-start: var(--cie-card-action-gap);
	box-sizing: border-box;
	flex: 0 0 auto;
}

.custom-product-item.cie-elementor-loop-product .cie-elementor-product-card .cie-loop-card-actions-widget {
	margin: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-top: var(--cie-card-action-gap);
	padding-inline: var(--cie-card-inline);
	padding-block-start: var(--cie-card-action-gap);
}

.cie-elementor-product-card .cie-loop-card-action-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 35px;
	align-items: center;
	gap: 9px;
	min-height: 35px;
}

.cie-elementor-product-card .cie-loop-card-primary,
body .cie-elementor-product-card a.cie-loop-card-primary.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(7.5px, 0.46875vw, 9px);
	width: 100%;
	max-width: 196px;
	min-width: 0;
	min-height: 0;
	padding: clamp(8px, 0.52084vw, 10px) clamp(10px, 1.25vw, 24px);
	border: 0;
	border-radius: 60px;
	background: var(--cie-card-green);
	color: #000;
	font-family: "Source Sans Pro", Arial, sans-serif;
	font-size: clamp(11px, 0.72917vw, 14px);
	font-weight: 600;
	line-height: clamp(14px, 0.9375vw, 18px);
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	box-sizing: border-box;
}

.cie-elementor-product-card .cie-loop-card-primary svg {
	width: 18px;
	height: 15px;
	flex: 0 0 auto;
}

.cie-elementor-product-card .cie-loop-card-login svg {
	width: 16px;
	height: 12px;
}

.cie-elementor-product-card .cie-loop-card-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: var(--cie-card-teal);
	color: #fff;
	text-decoration: none;
}

.cie-elementor-product-card .cie-loop-card-arrow svg {
	width: 8px;
	height: 14px;
}

@media (max-width: 767px) {
	.cie-elementor-product-card .cie-loop-card-title {
		width: calc(100% - var(--cie-card-inline) - var(--cie-card-inline)) !important;
		min-width: 0 !important;
		max-width: calc(100% - var(--cie-card-inline) - var(--cie-card-inline)) !important;
	}

	.cie-elementor-product-card .cie-loop-card-title .elementor-heading-title,
	.cie-elementor-product-card .cie-loop-card-title .elementor-heading-title a,
	.cie-elementor-product-card .cie-loop-card-subtitle,
	.cie-elementor-product-card .cie-loop-card-subtitle .elementor-widget-container,
	.cie-elementor-product-card .cie-loop-card-subtitle .elementor-post__excerpt,
	.cie-elementor-product-card .cie-loop-card-subtitle p {
		min-width: 0;
		max-width: 100%;
	}

	.cie-elementor-product-card .cie-loop-card-primary {
		max-width: 100%;
	}
}