/**
 * 2026 product-card skin for LISTS (owner request 2026-07-27: the
 * homepage card look - frame + always-visible big add-to-cart - in the
 * catalog and every product-list page). CSS-only layer over wolmart's
 * loop markup (div.product-loop); no template overrides, so quick-view,
 * wishlist and sliders keep working. The store-hours gate keeps its
 * authority: when closed (or out of stock) WooCommerce renders no
 * add-to-cart button and the fallback link is styled neutrally.
 */

.product-loop {
	border: 2px solid #ddd7c9;
	background: #fff;
	/* 14px = --ng-sg-radius, the Vinde Aur reference (owner
	   consistency pass 2026-07-27); 9px on the button below. */
	border-radius: 14px;
	padding: 1.4rem 1.4rem 1.6rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow 0.2s ease;
}
.product-loop:hover {
	box-shadow: 0 6px 18px rgba(99, 6, 6, 0.08);
}

/* the media block breathes inside the frame */
.product-loop .product-media {
	margin-bottom: 1rem;
}

/* details fill the card so buttons align across a row */
.product-loop .product-details {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* wolmart hides this block until hover - keep it always visible */
.product-loop .product-hide-details {
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	max-height: none !important;
	overflow: visible !important;
	/* !important pair: wolmart's resting-state rule zeroes both and its
	   :hover rule restores them - that asymmetry made the button JUMP
	   down only on hover (owner report). Same value in every state. */
	margin-top: auto !important;
	padding-top: 2rem !important; /* owner: clear breathing room below lei/gram */
	/* wolmart centers .product-details as a flex column - unpinned from
	   its absolute position this block shrank to min-content (a 2px
	   button!). Stretch the whole chain back to the card width. */
	width: 100% !important;
	align-self: stretch;
}
.product-loop .product-action {
	position: static !important;
	opacity: 1 !important;
	transform: none !important;
	display: block;
	width: 100% !important;
}

/* the big button, homepage style */
.product-loop .product-action .btn-product {
	border-radius: 9px;
	display: flex !important; /* theme forces block */
	align-items: center;
	justify-content: center;
	text-align: center; /* belt for any block fallback */
	width: 100%;
	min-height: 44px;
	padding: 0.9rem 1rem !important; /* theme zeroes it */
	border: 1px solid #630606;
	/* !important: wolmart's .btn-product ships a transparent background
	   with heavier specificity - this is a deliberate theme override. */
	background: #fff !important;
	color: #630606;
	font-weight: 700;
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.2;
	transition: background 0.2s, color 0.2s;
}
.product-loop .product-action .btn-product:hover {
	background: #630606 !important;
	color: #fff !important;
}

/* wolmart's animated ::after underline (a 211x3px block) became a flex
   ITEM inside our flex button, squeezing the label into an 80px box -
   the wrapped left-stuck text the owner saw. Kill both pseudos. */
.product-loop .product-action .btn-product::before,
.product-loop .product-action .btn-product::after {
	display: none !important;
	content: none !important;
}

/* wolmart hover choreography hides the price to slide the (formerly
   hidden) details over it - with the button always visible the price
   must simply stay put. */
.product-loop:hover .price,
.product-loop:hover .ng-pr {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* non-purchasable (store closed / out of stock): neutral outline.
   !important on color: the theme repainted the label maroon on list
   cards while the homepage read-more stayed grey (owner consistency
   report 2026-07-27) - one muted pair everywhere. */
.product-loop .product-action .btn-product:not(.add_to_cart_button) {
	border-color: #c9c2b2 !important;
	color: #7a7468 !important;
}
.product-loop .product-action .btn-product:not(.add_to_cart_button):hover {
	background: #f1eee6 !important;
	color: #4a4438 !important;
}

/* slider/carousel contexts: slightly tighter frame */
.owl-carousel .product-loop,
.slider-wrapper .product-loop {
	padding: 1rem 1rem 1.2rem;
}