/**
 * Modern product cards — archives, PDP grids, and [mdt_products] shortcode.
 * Scoped to .mdt-modern-cards so every product loop looks identical.
 */

:root {
	--mdt-gold: #d9b54a;
	--mdt-black: #111111;
}

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

.mdt-modern-cards ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mdt-modern-cards ul.products li.product {
	list-style: none;
	position: relative;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-bottom: 0 !important;
}

.mdt-modern-cards ul.products li.product:not(.product-category):hover {
	border-color: #d5d5d5;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

/* One link per card — overlay anchor covers image + body (archives + shortcode) */
.mdt-modern-cards ul.products li.product:not(.product-category) .mdt-loop-card-link {
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	text-decoration: none;
	color: transparent;
}

body.mdt-modern-cards #primary ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
body.mdt-modern-cards .related.products ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
body.mdt-modern-cards .upsells.products ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
body.mdt-modern-cards .cross-sells ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
body.mdt-modern-cards .wc-prl-recommendations ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
body.mdt-modern-cards .mdt-product-grid ul.products li.product:not(.product-category) .woocommerce-loop-product__title {
	display: block;
	overflow: hidden;
	-webkit-box-orient: unset;
	-webkit-line-clamp: unset;
}

.mdt-modern-cards ul.products li.product:not(.product-category) .mdt-loop-product__title-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	word-break: break-word;
}

.mdt-modern-cards ul.products li.product:not(.product-category) .woocommerce-card__header {
	padding: 0.5rem 0.85rem 0.6rem;
}

.mdt-modern-cards ul.products li.product:not(.product-category) .price {
	margin-top: 0.2rem;
	padding: 0;
	padding-right: 3.25rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--mdt-black);
	display: block;
	line-height: 1.25;
}

/* Gift card range prices use <ins>; Kirki colors them gold on loop cards */
.mdt-modern-cards ul.products li.product.post-12821 .price,
.mdt-modern-cards ul.products li.product.post-12821 .price ins,
.mdt-modern-cards ul.products li.product.post-12821 .price .woocommerce-Price-amount,
.mdt-modern-cards ul.products li.product.post-12821 .price bdi,
.mdt-modern-cards ul.products li.product-type-wgm_gift_card .price,
.mdt-modern-cards ul.products li.product-type-wgm_gift_card .price ins,
.mdt-modern-cards ul.products li.product-type-wgm_gift_card .price .woocommerce-Price-amount,
.mdt-modern-cards ul.products li.product-type-wgm_gift_card .price bdi {
	color: var(--mdt-black) !important;
	text-decoration: none;
}

/* Hide category labels + tax-suffix + GZD info on cards */
.mdt-modern-cards ul.products li.product .product__categories,
.mdt-modern-cards ul.products li.product .posted-in,
.mdt-modern-cards ul.products li.product p.wc-gzd-additional-info,
.mdt-modern-cards ul.products li.product .price .woocommerce-price-suffix {
	display: none !important;
}

.mdt-modern-cards ul.products li.product:not(.product-category) .woocommerce-loop-product__title {
	flex: 0 0 auto;
	min-height: calc(0.9375rem * 1.35 * 2);
	margin: 0 0 0.2rem;
	padding: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mdt-black);
}

/* -------------------------------------------------------------------------
   Image area overlays — full-bleed top section
   ------------------------------------------------------------------------- */

.mdt-modern-cards ul.products li.product .woocommerce-image__wrapper {
	position: relative;
	width: 100%;
	margin: 0;
	background: #fff;
	border-radius: 10px 10px 0 0;
	padding: 0.6rem 0.85rem 0.5rem;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.mdt-modern-cards ul.products li.product .woocommerce-image__wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.mdt-modern-cards ul.products li.product .button,
.mdt-modern-cards ul.products li.product a.add_to_cart_button {
	z-index: 6;
	pointer-events: auto;
}

.mdt-stock-badge {
	position: absolute;
	left: 0.65rem;
	bottom: 0.65rem;
	z-index: 3;
	padding: 0.3rem 0.55rem;
	border-radius: 4px;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}

.mdt-stock-badge--in-stock {
	background: #e8f7ec;
	color: #1f7a34;
}

/* Sale / discount badge on product cards (-32%, etc.) */
.mdt-modern-cards ul.products li.product .product-label.sale-item,
.mdt-modern-cards ul.products li.product .sale-item.product-label {
	position: absolute;
	top: 0.65rem;
	left: 0.65rem;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
	padding: 0.28rem 0.55rem !important;
	background: #3bb54a !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 100px !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.02em;
	box-shadow: none !important;
}

.mdt-modern-cards ul.products li.product .product-label.sale-item::before,
.mdt-modern-cards ul.products li.product .sale-item.product-label::before {
	display: none !important;
	content: none !important;
}

.mdt-modern-cards ul.products li.product .product-out-of-stock {
	left: 0.65rem;
	bottom: 0.65rem;
	top: auto;
	right: auto;
	transform: none;
	width: auto;
	border-radius: 4px;
	font-size: 0.625rem;
	padding: 0.3rem 0.55rem;
}

/* Wishlist fully removed — hide any residual YITH output */
.mdt-loop-wishlist,
.yith-wcwl-add-to-wishlist,
.yith-wcwl-add-button,
.yith-wcwl-wishlistaddedbrowse,
.yith-wcwl-wishlistexistsbrowse {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Variation pills — compact attribute swatches in the card
   ------------------------------------------------------------------------- */

.mdt-variation-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.35rem 0 1rem;
}

.mdt-variation-pill {
	position: relative;
	z-index: 5;
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.18rem 0.60rem;
	border-radius: 100px;
	border: unset;
	background: #f7f7f7;
	color: var(--mdt-black);
	font-size: 0.725rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}

.mdt-variation-pill:hover {
	border: unset;
	background: var(--mdt-gold);
	color: var(--mdt-black);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Add to cart button (static CTA)
   ------------------------------------------------------------------------- */

.mdt-modern-cards ul.products li.product .added_to_cart {
	display: none;
}

.mdt-modern-cards ul.products li.product .button,
.mdt-modern-cards ul.products li.product a.add_to_cart_button {
	position: absolute;
	right: 0.85rem;
	bottom: 0.85rem;
	z-index: 6;
	width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0;
	border-radius: 8px;
	background: var(--mdt-black);
	color: #fff;
	border: 0;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	opacity: 1;
	transform: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.mdt-modern-cards ul.products li.product .button::before,
.mdt-modern-cards ul.products li.product a.add_to_cart_button::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	margin: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.mdt-modern-cards ul.products li.product .button:hover,
.mdt-modern-cards ul.products li.product a.add_to_cart_button:hover {
	background: var(--mdt-gold);
	color: var(--mdt-black);
}

@media (max-width: 992px) {
	.mdt-modern-cards ul.products li.product:not(.product-category) .woocommerce-card__header {
		padding: 0.45rem 0.7rem 0.55rem;
	}

	.mdt-modern-cards ul.products li.product:not(.product-category) .woocommerce-loop-product__title {
		min-height: calc(0.875rem * 1.35 * 2);
		margin-bottom: 0.15rem;
		font-size: 0.875rem;
	}

	.mdt-modern-cards ul.products li.product:not(.product-category) .price {
		font-size: 0.9375rem;
		margin-top: 0.15rem;
		padding-right: 2.85rem;
	}

	.mdt-modern-cards ul.products li.product .button,
	.mdt-modern-cards ul.products li.product a.add_to_cart_button {
		right: 0.75rem;
		bottom: 0.75rem;
	}

	.mdt-variation-pills {
		gap: 0.3rem;
		margin: 0.25rem 0 0.85rem;
	}

	.mdt-variation-pill {
		padding: 0.15rem 0.45rem;
		font-size: 0.7rem;
	}
}

/* -------------------------------------------------------------------------
   [mdt_products] shortcode grid
   ------------------------------------------------------------------------- */

.mdt-product-grid {
	width: 100%;
}

.mdt-product-grid ul.products {
	display: grid;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	column-gap: 12px;
	row-gap: 12px;
}

.mdt-product-grid ul.products li.product {
	float: none;
	width: 100% !important;
	margin: 0 !important;
	align-self: stretch;
}

@media (max-width: 767px) {
	.mdt-product-grid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.mdt-product-grid ul.products.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mdt-product-grid ul.products.columns-4,
	.mdt-product-grid ul.products.columns-5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.mdt-product-grid ul.products.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mdt-product-grid ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.mdt-product-grid ul.products.columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}