/* ============================================================
   MM Shop / Archive — product card styles
   Mirrors homepage.css (.mm-pcard) so the shop page looks
   identical to the homepage product cards.

   Brand colors: Green #01773D / Deep Green #0F4F3F /
                 Red #E41F21 / Gold #FFC947 / Cream #F5EFE6
   ============================================================ */

:root {
	--mm-green:        #0F4F3F;
	--mm-green-2:      #01773D;
	--mm-green-dark:   #093226;
	--mm-red:          #E41F21;
	--mm-red-dark:     #B81819;
	--mm-gold:         #FFC947;
	--mm-cream:        #F5EFE6;
	--mm-cream-2:      #FAF5EE;
	--mm-text:         #1a3a2e;
	--mm-text-soft:    #5a6b62;
	--mm-border:       #E8E2D8;
}

/* ── Override WooCommerce's default <ul> grid with our mm-pcard layout ── */

/* WooCommerce wraps cards in an <ul class="products">.
   Scoped to exclude single-product pages entirely: the "related"/"up-sells"
   carousels there are an inner <ul class="products"> nested inside an
   outer <section class="related …"> / <section class="up-sells …">, which
   keep Blocksy's native Flexy slider (flex + transform + its own
   gap/margin math via CSS vars). Forcing grid — or even just forcing this
   rule's gap/margin/padding — on top of Flexy fights that math (e.g. a
   real `gap` stacks on top of Flexy's own padding-based gutters), so the
   whole rule is kept off single-product pages instead of just `display`. */
body:not(.single-product) ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Each <li> acts as a transparent pass-through */
ul.products li.product {
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Stretch the inner mm-pcard to fill the li */
ul.products li.product .mm-pcard {
	height: 100%;
}

/* Flex/grid items paint in DOM order regardless of hover elevation, so a
   hovered card's shadow/scale can render underneath its next sibling.
   Force the hovered item to the top of the stack. */
ul.products li.product {
	position: relative;
	z-index: 1;
}
ul.products li.product:hover {
	z-index: 5;
}

/* ── Product card — identical to homepage .mm-pcard ── */
.mm-pcard {
	position: relative;
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid var(--mm-border);
	padding: 16px;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
	display: flex;
	flex-direction: column;
}
.mm-pcard:hover {
	border-color: var(--mm-green);
	box-shadow: 0 12px 32px rgba(15,79,63,0.12);
	transform: translateY(-3px);
}

/* Discount badge */
.mm-pcard-discount {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--mm-red);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 6px;
	z-index: 2;
}

/* Eye / view icon */
.mm-pcard-view {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--mm-green);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: background 0.2s, color 0.2s, transform 0.15s;
	text-decoration: none;
}
.mm-pcard-view:hover {
	background: var(--mm-green);
	color: #fff;
	transform: scale(1.05);
}

/* Variation option buttons (250g | 500g) — smaller size */
.mm-pcard-options {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 2px;
	margin-bottom: 2px;
	justify-content: center;
}
.mm-pcard-option {
	background: #ffffff;
	border: 1.5px solid var(--mm-border);
	color: var(--mm-text);
	font-size: 0.70rem;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	min-width: 40px;
	text-align: center;
	line-height: 1.3;
}
.mm-pcard-option:hover {
	border-color: var(--mm-green);
}
.mm-pcard-option.is-active {
	background: var(--mm-red);
	border-color: var(--mm-red);
	color: #fff;
}

/* Price + Add to Cart row */
.mm-pcard-foot {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
	padding-top: 8px;
}
.mm-pcard-foot .mm-pcard-price {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--mm-green);
}

/* Add to cart button */
.mm-pcard-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	background: var(--mm-red);
	color: #ffffff !important;
	font-weight: 700;
	font-size: 0.82rem;
	padding: 11px 12px;
	border-radius: 8px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}
.mm-pcard-cart:hover {
	background: var(--mm-red-dark);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(228,31,33,0.3);
}
.mm-pcard-cart svg { flex-shrink: 0; }
.mm-pcard-cart.loading { opacity: 0.7; pointer-events: none; }
.mm-pcard-cart.added { background: var(--mm-green); }
.mm-pcard-cart.added::before {
	content: '✓ ';
	font-weight: 800;
}

/* Product image */
.mm-pcard-img {
	display: block;
	background: #fff;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 12px;
	text-decoration: none;
}
.mm-pcard-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s ease;
	mix-blend-mode: multiply;
}
.mm-pcard:hover .mm-pcard-img img { transform: scale(1.06); }

/* Body */
.mm-pcard-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* Star rating */
.mm-pcard-rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--mm-gold);
	font-size: 0.78rem;
}
.mm-pcard-rating span { color: var(--mm-text-soft); }

/* Title */
.mm-pcard-title {
	font-size: 0.88rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.4;
	color: var(--mm-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mm-pcard-title a {
	color: var(--mm-text);
	text-decoration: none;
}
.mm-pcard-title a:hover { color: var(--mm-green); }

/* Price */
.mm-pcard-price {
	font-size: 1rem;
	font-weight: 800;
	color: var(--mm-green);
}
.mm-pcard-price del,
.mm-pcard-price del .amount {
	color: #aaa;
	font-weight: 400;
	font-size: 0.82rem;
	margin-left: 6px;
}
.mm-pcard-price ins { text-decoration: none; }

/* ── Responsive breakpoints ── */
@media (max-width: 1024px) {
	ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 768px) {
	ul.products { grid-template-columns: repeat(2, 1fr) !important; }
	.mm-pcard-cart { font-size: 0.75rem; padding: 9px 10px; }
	.mm-pcard-cart svg { width: 12px; height: 12px; }
}

@media (max-width: 480px) {
	ul.products:not(.related):not(.upsells) { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}