/*
 * Saatmall — product cards on shop / category / brand / tag archives.
 *
 * Scope: only the archive grid (ul.product-box li.product). Product carousels
 * and Elementor widgets on other pages use different wrappers and are not
 * affected.
 *
 * Why the selectors are long and carry !important: the theme's general.css
 * (443 KB) and the site's Customizer "Additional CSS" both style these cards,
 * and the Customizer block prints *after* every enqueued stylesheet with its
 * own !important rules (fixed 84px title box, fixed 446px card height, 222px
 * image cap, floated price, absolutely positioned cart button). Every rule
 * here is written to outrank those on specificity so the file stays a drop-in
 * override — delete it and the old look comes back untouched.
 *
 * No JS, no fonts, no images. ~5 KB before minification.
 */

body ul.product-box {
	--card-radius: 16px;
	--card-line: #e9e9ec;
	--card-line-strong: #d9d9de;
	--card-ink: #1b1b1f;
	--card-muted: #6f6f76;
	--card-accent: #007f23;
	--card-accent-ink: #005f1a;

	display: grid;
	gap: 16px;
	padding: 2px 0 8px;
	border: 0 !important;
	align-items: stretch;
}

/* ---------- Card ---------- */

body ul.product-box li.product {
	position: relative;
	display: block;
	height: auto !important;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid var(--card-line);
	border-radius: var(--card-radius);
	box-shadow: 0 1px 2px rgba(20, 20, 30, .04);
	text-align: right;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body ul.product-box li.product:hover {
	transform: translateY(-3px);
	border-color: var(--card-line-strong);
	box-shadow: 0 12px 28px rgba(20, 20, 30, .08);
	z-index: 11;
}

body ul.product-box li.product .product-box-inner {
	height: 100%;
	border-radius: var(--card-radius);
}

body ul.product-box li.product .info-product {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 12px 12px 14px;
	box-sizing: border-box;
}

/* ---------- Image ---------- */

body ul.product-box li.product .thumb-pro {
	position: relative;
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 1 / 1;
	margin: 0 auto 6px !important;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

body ul.product-box li.product .thumb-pro img {
	display: block;
	/* Product photos carry generous white margins; rendering the image 6%
	   larger than its box (clipped by .thumb-pro) shows the watch bigger
	   without cropping it. Done with layout width rather than a transform:
	   a resting transform scales the rasterized bitmap on the GPU and
	   visibly softens it; a layout size is resampled from the source. */
	width: 106%;
	max-width: 106% !important;
	height: auto;
	margin: -3%;
	transform: none;
	transition: transform .35s ease;
}

body ul.product-box li.product:hover .thumb-pro img {
	transform: scale(1.05);
}

/* The theme swaps to a second image on hover (and hides the first one). That
   second image costs an extra lazy-loaded request per card; it is dropped in
   favour of the zoom above. display:none keeps the lazy-loader from ever
   fetching it. */
body ul.product-box li.product .thumb-pro img.second-img {
	display: none !important;
}

body ul.product-box li.product:hover .thumb-pro img:first-child,
body ul.product-box li.product:hover .thumb-pro.hover-image img:first-child {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ---------- Title ---------- */

body ul.product-box li.product .index-title-pro {
	padding: 0;
	margin: 0;
}

body ul.product-box li.product .index-title-pro h2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height: auto !important;
	min-height: calc(2 * 1.85em);
	margin: 6px 0 10px !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.85 !important;
	color: var(--card-ink) !important;
	text-align: right;
	letter-spacing: -.1px;
}

body ul.product-box li.product .index-title-pro h2 a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}

body ul.product-box li.product .index-title-pro h2 a:hover {
	color: var(--card-accent);
}

/* Empty helper rows the theme prints between title and price. */
body ul.product-box li.product .stock_box:empty,
body ul.product-box li.product .author-Original {
	display: none !important;
	margin: 0;
	height: 0;
}

/* ---------- Price row (divider + price + cart button) ---------- */

body ul.product-box li.product .index-prices-pro {
	display: flex;
	align-items: center;
	justify-content: flex-end;   /* RTL: price sits on the left */
	float: none !important;
	width: 100%;
	height: auto !important;
	min-height: 40px;
	margin: auto 0 0 !important; /* pinned to the bottom of the card */
	padding: 10px 50px 0 0;      /* right side reserved for the cart button */
	box-sizing: border-box;
	border-top: 1px solid var(--card-line);
}

body ul.product-box li.product .index-prices-pro > div {
	text-align: left;
}

body ul.product-box li.product .index-prices-pro span.woocommerce-Price-amount {
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.5;
	color: var(--card-ink) !important;
}

body ul.product-box li.product .index-prices-pro span.woocommerce-Price-amount .woocommerce-Price-currencySymbol {
	font-size: 12px;
	font-weight: 500;
	color: var(--card-muted);
	margin-right: 4px;
}

body ul.product-box li.product .index-prices-pro del {
	margin: 0;
}

body ul.product-box li.product .index-prices-pro del span.woocommerce-Price-amount {
	font-size: 12px !important;
	font-weight: 400;
	color: #a0a0a6 !important;
	text-decoration: line-through;
}

body ul.product-box li.product .index-prices-pro ins {
	display: block;
	margin-top: 2px;
	text-decoration: none;
}

body ul.product-box li.product .index-prices-pro .index-discount-pro {
	float: none;
	margin: 0 8px 0 0;
	padding: 1px 7px;
	font-size: 12px;
	line-height: 18px;
	border-radius: 8px;
}

/* Cart button: anchored to the bottom-right corner, centred on the price row. */
body ul.product-box li.product .quick_add2cart.button,
body ul.product-box li.product a.button.quick_add2cart {
	position: absolute !important;
	right: 12px !important;
	bottom: 14px !important;
	left: auto !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--card-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 12px rgba(0, 127, 35, .22);
	font-size: 18px !important;
	line-height: 1 !important;
	opacity: 1 !important;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

body ul.product-box li.product .quick_add2cart.button:hover,
body ul.product-box li.product a.button.quick_add2cart:hover {
	background: var(--card-accent-ink) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 127, 35, .3);
	opacity: 1 !important;
}

body ul.product-box li.product .quick_add2cart.button i {
	line-height: 1;
}

/* ---------- Responsive ---------- */

@media (max-width: 990px) {
	body ul.product-box {
		gap: 12px;
	}

	body ul.product-box li.product {
		height: auto !important;
		padding: 0 !important;
		border: 1px solid var(--card-line) !important;
		border-radius: 14px !important;
	}

	body ul.product-box li.product .info-product {
		padding: 8px 10px 10px !important;
	}

	body ul.product-box li.product .thumb-pro {
		max-width: 100% !important;
		margin: 0 auto 4px !important;
	}

	body ul.product-box li.product .index-title-pro h2 {
		font-size: 13px !important;
		line-height: 1.8 !important;
		min-height: calc(2 * 1.8em);
		margin: 4px 0 8px !important;
		padding: 0 !important;
	}

	body ul.product-box li.product .index-prices-pro {
		min-height: 34px;
		margin: auto 0 0 !important;
		padding: 8px 42px 0 0 !important;
	}

	body ul.product-box li.product .index-prices-pro span.woocommerce-Price-amount {
		font-size: 14px !important;
	}

	body ul.product-box li.product .index-prices-pro span.woocommerce-Price-amount .woocommerce-Price-currencySymbol {
		font-size: 11px;
	}

	body ul.product-box li.product .quick_add2cart.button,
	body ul.product-box li.product a.button.quick_add2cart {
		width: 34px !important;
		height: 34px !important;
		right: 10px !important;
		bottom: 10px !important;
		border-radius: 10px !important;
		font-size: 16px !important;
	}
}

@media (max-width: 640px) {
	body ul.product-box {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px;
	}

	body ul.product-box li.product .index-title-pro h2 {
		font-size: 12.5px !important;
	}
}

/* Hover lift/zoom are motion; keep the layout, drop the movement. */
@media (prefers-reduced-motion: reduce) {
	body ul.product-box li.product,
	body ul.product-box li.product .thumb-pro img,
	body ul.product-box li.product .quick_add2cart.button {
		transition: none !important;
	}

	body ul.product-box li.product:hover {
		transform: none;
	}

	body ul.product-box li.product:hover .thumb-pro img {
		transform: none;
	}
}