/* =============================================================================
 * CarParts — Modern product cards (minimal-clean)
 * Scoped to ul.products li.product — works in shop, category, home carousels,
 * related products. Plays nice with equal-height / guarantee / watermark.
 * ========================================================================== */

.woocommerce ul.products li.product {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	min-height: 0;
	background: #ffffff !important;
	border: 0 !important;
	border-radius: 16px !important;
	overflow: hidden;                       /* clip image zoom + round the corners */
	box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 36px rgba(16, 16, 16, .13);
}

.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	min-height: 0;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	border: 0 !important;
	border-bottom: 0 !important;
	text-align: center;
}

/* image: subtle zoom on hover */
.woocommerce ul.products li.product .xtra-product-thumbnail {
	position: relative !important;
	flex: 0 0 auto;
	overflow: hidden;
	border: 0 !important;
	border-bottom: 0 !important;
}
.woocommerce ul.products li.product .xtra-product-thumbnail img {
	display: block;
	border: 0 !important;
	border-bottom: 0 !important;
	transition: transform .4s ease;
}
.woocommerce ul.products li.product:hover .xtra-product-thumbnail img {
	transform: scale(1.05);
}

/* sale/new badges live inside the positioned image wrapper */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .cz_new_badge {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	z-index: 12 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	border: 0 !important;
	border-radius: 9px !important;
	padding: 4px 8px !important;
	font-size: 10px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
	color: #fff !important;
	background: rgba(235, 37, 0, .92) !important;
	box-shadow: 0 6px 16px rgba(235, 37, 0, .22), 0 1px 2px rgba(16, 16, 16, .12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.woocommerce ul.products li.product .cp-sale-percent {
	min-width: 34px;
}
.woocommerce ul.products li.product .cz_new_badge {
	display: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	width: 100% !important;
	min-height: 3.6em !important;
	margin: 14px 0 4px !important;
	padding: 0 14px !important;
	box-sizing: border-box !important;
	text-align: right !important;
	/* !important is load-bearing: xtra-child's kaputbala_custom_loop_product_title()
	   hardcodes style="font-size:16px" on the h3, which no plain rule can beat */
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	direction: rtl;
}
.woocommerce ul.products li.product .cp-loop-cat {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 0 14px !important;
	box-sizing: border-box;
	color: #8a8a8a !important;
	font-size: 12px !important;
	line-height: 1.5;
	text-align: right;
	direction: rtl;
}
.woocommerce ul.products li.product .cp-card__body {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
	align-items: flex-start !important;
	width: 100%;
	min-height: 0;
	text-align: right !important;
	direction: rtl;
	border: 0 !important;
	border-bottom: 0 !important;
}
.woocommerce ul.products li.product .xtra-product-thumbnail .cp-guarantee--loop {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	z-index: 10 !important;
	margin: 0 !important;
	max-width: calc(100% - 20px) !important;
}

/* wishlist / hover icons → rounded chip.
   The customizer pins this chip at top:10px/left:10px — the same corner the
   guarantee pill occupies — so start it below the pill instead. */
.woocommerce ul.products li.product .xtra-product-icons {
	top: 50px !important;
	border-radius: 12px !important;
	overflow: hidden;
}

/* Footer: old price → new price → full-width CTA, always pinned to bottom. */
.woocommerce ul.products li.product .cp-card__footer {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	margin-top: auto !important;
	border: 0 !important;
	border-top: 0 !important;
	box-shadow: none !important;
	text-align: left !important;
	align-items: flex-end !important;
	direction: rtl;
}
.woocommerce ul.products li.product > .price,
.woocommerce ul.products li.product > a.woocommerce-loop-product__link > .price,
.woocommerce ul.products li.product .cp-card__body > .price {
	display: none !important;
}
.woocommerce ul.products li.product .cp-card__footer .price {
	display: flex !important;
}
.woocommerce ul.products li.product .price {
	position: static !important;
	z-index: 9 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: flex-end !important;
	gap: 3px;
	width: 100% !important;
	margin: 0 !important;
	padding: 14px 14px 12px !important;
	box-sizing: border-box !important;
	color: #101010 !important;
	background: transparent !important;
	text-align: left !important;
	white-space: normal !important;
	direction: rtl;
	border: 0 !important;
	border-top: 0 !important;
	box-shadow: none !important;
}
.woocommerce ul.products li.product .price del {
	order: 1;
	display: block;
	color: #a0a0a0 !important;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	opacity: 1 !important;
}
/* price in near-black: weight/size carry the emphasis; red stays
   exclusive to the sale badge so it keeps its meaning */
.woocommerce ul.products li.product .price ins {
	order: 2;
	display: block;
	color: #101010 !important;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	text-decoration: none !important;
}
.woocommerce ul.products li.product .price > .woocommerce-Price-amount {
	order: 2;
	color: #101010 !important;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
}
/* «تومان» smaller + lighter than the digits (mirrors the PDP treatment) */
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
	font-size: .65em;
	font-weight: 600;
	color: #8a8f98;
	margin-inline-start: 4px;
}
.woocommerce ul.products li.product .price del .woocommerce-Price-currencySymbol {
	color: inherit;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button[class*="product_type_"] {
	position: static !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 50px !important;
	margin: 0 !important;
	padding: 14px 16px !important;
	box-sizing: border-box !important;
	border: 0 !important;
	border-radius: 0 !important;
	/* dark by default so red stays reserved for price + sale badge;
	   red on hover (matches the header category button) */
	background: #101010 !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color .2s ease !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover,
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product .button[class*="product_type_"]:hover {
	background: #eb2500 !important;
}

/* ---------------------------------------------------------------------------
 * Archive grid: replace WooCommerce's float layout (which snags — «3 in a row,
 * then 1») with a clean CSS grid. Scoped to shop / category / tag archives so
 * the homepage Slick carousel and the single-product related slider are untouched.
 * Grid rows auto-equalise card height too.
 * ------------------------------------------------------------------------- */
.woocommerce-shop ul.products,
.tax-product_cat ul.products,
.tax-product_tag ul.products,
.post-type-archive-product ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));   /* minmax(0,…) lets tracks shrink (no overflow) */
	justify-items: stretch;
	align-items: stretch;
	gap: 24px;
	margin: 0 0 30px;
	width: 100% !important;
}
/* grid items must be allowed to shrink below their content's min-width */
.woocommerce-shop ul.products li.product,
.tax-product_cat ul.products li.product,
.tax-product_tag ul.products li.product,
.post-type-archive-product ul.products li.product { min-width: 0; }
.woocommerce-shop ul.products::before, .woocommerce-shop ul.products::after,
.tax-product_cat ul.products::before, .tax-product_cat ul.products::after,
.tax-product_tag ul.products::before, .tax-product_tag ul.products::after,
.post-type-archive-product ul.products::before, .post-type-archive-product ul.products::after {
	content: none !important;
	display: none !important;
}
.woocommerce-shop ul.products li.product,
.tax-product_cat ul.products li.product,
.tax-product_tag ul.products li.product,
.post-type-archive-product ul.products li.product {
	width: 100% !important;
	max-width: 100% !important;
	justify-self: stretch;
	box-sizing: border-box !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}
@media (max-width: 1024px) {
	.woocommerce-shop ul.products,
	.tax-product_cat ul.products,
	.tax-product_tag ul.products,
	.post-type-archive-product ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 680px) {
	.woocommerce-shop ul.products,
	.tax-product_cat ul.products,
	.tax-product_tag ul.products,
	.post-type-archive-product ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; }
}

/* ---------------------------------------------------------------------------
 * Pagination — modern rounded buttons, centred (replaces the theme's sharp,
 * bordered, oddly-wrapping squares). Scoped to the WooCommerce archive nav.
 * ------------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination {
	text-align: center;
	margin: 6px 0 44px;
	border: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li {
	display: inline-flex !important;
	margin: 0 !important;
	border: 0 !important;
	overflow: visible !important;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
	min-width: 44px;
	height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	background: #fff !important;
	color: #101010 !important;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	border: 1.5px solid #e9e9e9 !important;
	border-radius: 12px !important;
	box-sizing: border-box;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
	border-color: #eb2500 !important;
	color: #eb2500 !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
	background: #eb2500 !important;
	border-color: #eb2500 !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(235, 37, 0, .28);
}
.woocommerce nav.woocommerce-pagination ul li a.next.page-numbers,
.woocommerce nav.woocommerce-pagination ul li a.prev.page-numbers {
	font-size: 18px;
	color: #6b6b6b !important;
}

/* Slick carousels clip the card hover shadow at the viewport edge (a hard
   rectangle appears around the hovered card). Pad the clip box and pull the
   layout back with a negative margin — same geometry, room for the shadow. */
.woocommerce ul.products.slick-initialized .slick-list {
	padding: 24px !important;
	margin: -24px !important;
}
/* ≤480px codevz makes carousel .slick-list overflow:visible + scale(.9) (the
   mobile peek effect) — the hover-shadow clearance above is then (a) unneeded
   and (b) harmful: in RTL the extra 48px of list width lands on the LEFT side,
   so the active card sits ~20px right of centre (left neighbor peeks ~66px,
   right one only ~28px). Keep vertical clearance, zero the horizontal. */
@media (max-width: 480px) {
	.woocommerce ul.products.slick-initialized .slick-list {
		padding: 24px 0 !important;
		margin: -24px 0 !important;
		/* Elementor's per-widget CSS widens the list by the slide gap
		   (width: calc(100% + Npx)) to offset the ±N/2 margins we zero out —
		   in RTL that surplus width all lands on the LEFT and off-centres the
		   active card. Pin the list to its container. */
		width: 100% !important;
		/* codevz also scales the list to .9 here — that shrinks every card font
		   10% AND (with RTL slick's right-anchored track) leaves the active card
		   off-centre. Kill the scale: cards render full-size, and the neighbor
		   peek comes from the body's own side gutters instead. */
		transform: none !important;
	}
	/* Elementor's per-widget gap gives each slide `margin: 0 10px`, but slick
	   doesn't subtract margins from its track math (codevz's compensating rule
	   `margin: 0 -calc(...)` is invalid CSS and gets dropped), so with 1 slide
	   per view the active card ends up 10-20px off-centre. Zero the gap: the
	   slide fills the container exactly and neighbors peek evenly in the
	   page gutters. */
	.woocommerce ul.products.slick-initialized .slick-slide {
		margin: 0 !important;
	}
}