/*
Theme Name: Hello Elementor Memento Child
Theme URI: https://mementoheritage.com/
Description: Child theme of Hello Elementor for Memento Heritage. Card design matches the Elementor "product loop card" template: centered Manrope typography, ACF category|material meta line, red Add to Cart button.
Author: Memento Heritage
Author URI: https://mementoheritage.com/
Template: hello-elementor
Version: 1.3.7
Text Domain: hello-elementor-memento-child
*/

/* ============================================================
 * Memento Heritage — Product card
 * Styles match the Elementor template specs from the JSON:
 *   - Manrope font family for all text
 *   - Title 27/500/30/0.5 — centered
 *   - Meta 15/400/22 — accent color, "|" divider
 *   - Price 21/400 uppercase — centered
 *   - Cart button: red bg, white text, border-radius 1px
 * High-specificity selectors + !important to override Hello
 * Elementor and WooCommerce default loop styles.
 * ============================================================ */

/* Grid container — force equal-height rows so cards stay aligned
 * even when one card has a missing image / shorter content.
 * grid-auto-rows: 1fr makes ALL rows equal height across the grid,
 * not just cards within the same row. */
ul.products,
.woocommerce ul.products,
.mpf-grid ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	grid-auto-rows: 1fr !important;
	gap: 32px 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Disable WooCommerce/theme clearfix pseudo-elements that
 * occupy grid cells and shift cards to wrong positions. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.mpf-grid ul.products::before,
.mpf-grid ul.products::after {
	content: none !important;
	display: none !important;
}

@media (max-width: 900px) {
	ul.products,
	.woocommerce ul.products,
	.mpf-grid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px 16px !important;
	}
}

@media (max-width: 600px) {
	ul.products,
	.woocommerce ul.products,
	.mpf-grid ul.products {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
}

/* Card root — vertical flex, centered, full height of grid cell */
ul.products li.product.memento-card,
.products .memento-card,
li.memento-card {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
	clear: none !important;
	background: transparent !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	text-align: center !important;
	height: 100% !important;
	min-height: 100% !important;
}

/* Title/meta/price block grows to push button to bottom of card,
 * keeping bottom button aligned across all cards in a row. */
ul.products li.product.memento-card .memento-card-text-link,
.memento-card .memento-card-text-link {
	flex: 0 0 auto !important;
}

ul.products li.product.memento-card .memento-card-bottom-cart-btn,
.memento-card .memento-card-bottom-cart-btn {
	margin-top: auto !important;
}

/* ============================================================
 * Image area — 1:1 square, contain (no crop), off-white background
 * ============================================================ */

.memento-card .memento-card-image-wrap {
	position: relative !important;
	overflow: hidden !important;
	background: #fafaf7 !important;
	margin: 0 0 16px !important;
	width: 100% !important;
	display: block !important;
}

.memento-card .memento-card-image-link {
	display: block !important;
	color: inherit !important;
	text-decoration: none !important;
}

.memento-card .memento-card-image {
	position: relative !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	background: #fafaf7 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

.memento-card .memento-card-image img,
.memento-card .memento-card-image .attachment-woocommerce_thumbnail,
ul.products li.product.memento-card .memento-card-image img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: opacity 0.3s ease !important;
}

.memento-card:hover .memento-card-image img {
	opacity: 0.92 !important;
}

/* ============================================================
 * Hover overlay — full coverage with View Product + Add to Cart
 * ============================================================ */

.memento-card .memento-card-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	padding: 24px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 12px !important;
	background: rgba(0, 0, 0, 0.55) !important;
	opacity: 0 !important;
	transition: opacity 0.25s ease !important;
	pointer-events: none !important;
	z-index: 5 !important;
	box-sizing: border-box !important;
}

.memento-card .memento-card-image-wrap:hover .memento-card-overlay,
.memento-card:hover .memento-card-overlay {
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* On touch devices hover is unreliable — hide overlay buttons */
@media (hover: none) {
	.memento-card .memento-card-overlay {
		display: none !important;
	}
}

/* Overlay buttons — transparent with white border, fill on hover */
.memento-card .memento-card-btn {
	display: inline-block !important;
	width: 100% !important;
	max-width: 220px !important;
	padding: 11px 18px !important;
	font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	text-decoration: none !important;
	color: #ffffff !important;
	background: transparent !important;
	border: 1px solid #ffffff !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	line-height: 1.2 !important;
	min-height: auto !important;
}

.memento-card .memento-card-btn:hover {
	background: #ffffff !important;
	color: #000000 !important;
	border-color: #ffffff !important;
}

/* Hide the "View cart" link WC injects after .added_to_cart event */
.memento-card .added_to_cart {
	display: none !important;
}

/* ============================================================
 * Title — Manrope 27/500/30/0.5, centered
 * ============================================================ */

.memento-card .memento-card-text-link {
	display: block !important;
	color: inherit !important;
	text-decoration: none !important;
	padding: 0 !important;
}

.memento-card .memento-card-text-link:hover {
	color: inherit !important;
	text-decoration: none !important;
}

.memento-card .memento-card-title,
.memento-card h2.memento-card-title,
.memento-card h2.woocommerce-loop-product__title,
ul.products li.product.memento-card .memento-card-title {
	font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
	font-size: 27px !important;
	font-weight: 500 !important;
	line-height: 30px !important;
	letter-spacing: 0.5px !important;
	text-transform: none !important;
	text-align: center !important;
	color: #000000 !important;
	margin: 0 0 13px !important;
	padding: 0 !important;
}

/* ============================================================
 * Meta line — ACF category | ACF material
 * Manrope 15/400/22, accent color, centered, with vertical divider
 * ============================================================ */

.memento-card .memento-card-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 0 !important;
	font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 22px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-align: center !important;
	color: #B21F24 !important;
	margin: 0 0 11px !important;
	padding: 0 !important;
}

.memento-card .memento-card-meta-item {
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Vertical "|" separator between meta items via pseudo-element so the
 * spacing is controlled exactly (not flex-gap doubled around the divider). */
.memento-card .memento-card-meta-item:not(:first-child)::before {
	content: '|' !important;
	display: inline-block !important;
	margin: 0 12px !important;
	color: inherit !important;
	opacity: 0.55 !important;
	font-weight: 400 !important;
}

/* The dedicated separator span is no longer needed (kept hidden for
 * backward compatibility if a cached template still emits it). */
.memento-card .memento-card-meta-sep {
	display: none !important;
}

/* ============================================================
 * Price — Manrope 21/400 uppercase, centered
 * ============================================================ */

.memento-card .memento-card-price {
	font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
	font-size: 21px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	text-align: center !important;
	color: #000000 !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
}

.memento-card .memento-card-price .woocommerce-Price-amount {
	color: #000000 !important;
	font-weight: 400 !important;
}

.memento-card .memento-card-price .woocommerce-Price-currencySymbol {
	color: #000000 !important;
}

.memento-card .memento-card-price ins {
	background: transparent !important;
	text-decoration: none !important;
	color: #B21F24 !important;
	font-weight: 600 !important;
}

.memento-card .memento-card-price del {
	opacity: 0.5 !important;
	margin-right: 6px !important;
}

/* ============================================================
 * Bottom Add to cart button — red bg, white text, border-radius 1
 * ============================================================ */

.memento-card .memento-card-bottom-cart-btn,
.memento-card a.memento-card-bottom-cart-btn,
ul.products li.product.memento-card a.memento-card-bottom-cart-btn,
ul.products li.product.memento-card .memento-card-bottom-cart-btn {
	align-self: center !important;
	display: inline-block !important;
	padding: 11px 28px !important;
	font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: center !important;
	color: #ffffff !important;
	background: #B21F24 !important;
	border: 1px solid #B21F24 !important;
	border-radius: 1px !important;
	cursor: pointer !important;
	margin: 0 !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
	box-sizing: border-box !important;
	min-height: auto !important;
	width: auto !important;
	min-width: 140px !important;
}

.memento-card .memento-card-bottom-cart-btn:hover {
	background: #1a1a1a !important;
	border-color: #1a1a1a !important;
	color: #ffffff !important;
}

.memento-card .memento-card-bottom-cart-btn.added,
.memento-card .memento-card-bottom-cart-btn.added::after {
	background: #1a1a1a !important;
	border-color: #1a1a1a !important;
	color: #ffffff !important;
}

.memento-card .memento-card-bottom-cart-btn.loading {
	opacity: 0.65 !important;
	cursor: wait !important;
}

/* ============================================================
 * Mobile responsive — slightly smaller typography
 * ============================================================ */

@media (max-width: 600px) {
	.memento-card .memento-card-title {
		font-size: 22px !important;
		line-height: 26px !important;
	}
	.memento-card .memento-card-meta {
		font-size: 13px !important;
		line-height: 19px !important;
		gap: 14px !important;
	}
	.memento-card .memento-card-price {
		font-size: 18px !important;
	}
	.memento-card .memento-card-bottom-cart-btn {
		font-size: 15px !important;
		padding: 10px 24px !important;
	}
}