/* Sweet ti Product UI v1.1.1 — visual layer only */

body.sti-ui { --sti-c: var(--sti-cols, 3); }

/* ---------- Grid ---------- */
body.sti-ui ul.products:not(.elementor-grid),
body.sti-ui .wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(var(--sti-c), minmax(0, 1fr)) !important;
	gap: clamp(22px, 3vw, 40px) clamp(14px, 2.4vw, 30px);
	margin: 0 0 2em !important;
	padding: 0;
	list-style: none;
	width: 100%;
	box-sizing: border-box;
}
body.sti-ui ul.products,
body.sti-ui .wc-block-grid__products {
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body.sti-ui ul.products::before,
body.sti-ui ul.products::after { display: none !important; content: none !important; }

body.sti-ui.sti-has-bg ul.products,
body.sti-ui.sti-has-bg .wc-block-grid__products {
	background: var(--sti-bg);
	padding: clamp(16px, 3.2vw, 40px);
	border-radius: clamp(16px, 2vw, 24px);
}

/* ---------- Card ---------- */
body.sti-ui ul.products li.product,
body.sti-ui .wc-block-grid__product {
	position: relative;
	float: none !important;
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	background: transparent;
	border: 0;
	box-shadow: none;
	box-sizing: border-box;
}
body.sti-ui ul.products li.product :is(p, span, div, h2, h3, a):not(.button):not(.sti-heart) { text-align: center; }

/* wrappers between the card and its image are forced to full width (JS adds .sti-fill) */
body.sti-ui .sti-fill {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
}
body.sti-ui .sti-media { position: relative; }

body.sti-ui ul.products li.product a.woocommerce-LoopProduct-link,
body.sti-ui .wc-block-grid__product-link {
	display: block;
	width: 100%;
	text-decoration: none;
}

/* ---------- Image ---------- */
body.sti-ui ul.products li.product a img,
body.sti-ui ul.products li.product img.attachment-woocommerce_thumbnail,
body.sti-ui ul.products li.product img.wp-post-image,
body.sti-ui .wc-block-grid__product-image img {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--sti-card);
	border-radius: var(--sti-radius);
	margin: 0 0 clamp(12px, 1.6vw, 18px) !important;
	padding: 0;
	box-shadow: none;
	transition: transform .35s ease, box-shadow .35s ease;
}
body.sti-ui .wc-block-grid__product-image { width: 100%; margin: 0; }

@media (hover: hover) {
	body.sti-ui ul.products li.product:hover a img,
	body.sti-ui .wc-block-grid__product:hover .wc-block-grid__product-image img {
		transform: translateY(-4px);
		box-shadow: 0 14px 30px rgba(60, 30, 10, .10);
	}
}

/* theme's own overlay quick-add icon (duplicate of the bottom button) */
body.sti-ui .sti-dup { display: none !important; }

/* ---------- Title ---------- */
body.sti-ui ul.products li.product .woocommerce-loop-product__title,
body.sti-ui ul.products li.product h2,
body.sti-ui ul.products li.product h3,
body.sti-ui .wc-block-grid__product-title {
	margin: 0 !important;
	padding: 0 4px 6px !important;
	font-family: inherit;
	font-size: clamp(13px, 1.1vw + 6px, 15px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--sti-title);
	overflow-wrap: anywhere;
}

/* ---------- Category / meta line (shown by some themes) ---------- */
body.sti-ui ul.products li.product :is(.ast-woo-product-category, .woocommerce-loop-product__category, .product-category, .posted_in, .product-cat, .product_cat, .product-categories) {
	display: block;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 400;
	color: #a39a92;
}

/* ---------- Price ---------- */
body.sti-ui ul.products li.product .price,
body.sti-ui .wc-block-grid__product-price {
	display: block;
	width: 100%;
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-family: inherit;
	font-size: clamp(12px, .6vw + 8px, 13px);
	font-weight: 500;
	color: var(--sti-price);
}
body.sti-ui ul.products li.product .price del,
body.sti-ui .wc-block-grid__product-price del { opacity: .5; margin-right: 6px; }
body.sti-ui ul.products li.product .price ins,
body.sti-ui .wc-block-grid__product-price ins { background: none; text-decoration: none; font-weight: 700; }

/* ---------- Rating ---------- */
body.sti-ui ul.products li.product .star-rating { margin: 0 auto 8px; font-size: 12px; float: none; }

/* ---------- Add to cart / Select options pill ---------- */
body.sti-ui ul.products li.product .button:not(.sti-dup),
body.sti-ui ul.products li.product a.add_to_cart_button:not(.sti-dup),
body.sti-ui .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: auto;
	max-width: 100%;
	margin: auto auto 0 !important;
	padding: 7px 18px !important;
	background: var(--sti-btn) !important;
	color: var(--sti-btn-text) !important;
	font-family: inherit;
	font-size: 11px !important;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .1px;
	text-transform: none;
	text-align: center;
	white-space: nowrap;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none;
	transition: transform .2s ease, filter .2s ease;
}
body.sti-ui ul.products li.product .button:hover,
body.sti-ui .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	filter: brightness(.95);
	transform: translateY(-1px);
}
body.sti-ui .wc-block-grid__product-add-to-cart { margin: 0; text-align: center; }
body.sti-ui ul.products li.product a.added_to_cart {
	align-self: center;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--sti-title);
	text-decoration: underline;
}

/* ---------- Sale badge ---------- */
body.sti-ui ul.products li.product .onsale,
body.sti-ui .wc-block-grid__product-onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	right: auto;
	z-index: 2;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 6px 12px;
	background: var(--sti-btn);
	color: var(--sti-btn-text);
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	border: 0;
	border-radius: 999px;
}

/* ---------- Heart (visual wishlist) ---------- */
.sti-heart {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #2a2a2a;
	cursor: pointer;
	line-height: 1;
	transition: transform .2s ease, color .2s ease;
}
.sti-heart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sti-heart:hover { transform: scale(1.12); }
.sti-heart.is-active { color: #e0556a; }
.sti-heart.is-active svg { fill: currentColor; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	body.sti-cols-5 { --sti-c: 4; }
}
@media (max-width: 1024px) {
	body.sti-cols-4, body.sti-cols-5 { --sti-c: 3; }
}
@media (max-width: 768px) {
	body.sti-ui { --sti-c: 2 !important; }
	.sti-heart { top: 8px; right: 8px; width: 34px; height: 34px; }
	body.sti-ui ul.products li.product .button:not(.sti-dup),
	body.sti-ui .wc-block-grid__product-add-to-cart .wp-block-button__link { padding: 8px 14px !important; }
}
@media (max-width: 380px) {
	body.sti-ui.sti-has-bg ul.products,
	body.sti-ui.sti-has-bg .wc-block-grid__products { padding: 12px; }
	body.sti-ui ul.products li.product .button:not(.sti-dup) { padding: 7px 10px !important; font-size: 10px !important; }
}

/* color swatches container (found by JS) */
body.sti-ui .sti-swatches {
	justify-content: center !important;
	align-items: center;
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}