/* ============================================================
   PRODUCT CARD — shared component
   Styles the woocommerce/content-product.php partial used
   everywhere WooCommerce renders a product loop: shop, category
   archives, related products, upsells/cross-sells, search results.
   Loaded site-wide (see blocksy_child_enqueue_assets) so it never
   depends on which page happens to trigger the loop.
   ============================================================ */

/* The whole <li> is the visual card (one border, one set of rounded
   corners, one hover state) so the image, text and button read as a
   single unit instead of a floating link with a button stuck below it. */
.bm-product-card {
	position: relative;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bms-border);
	border-radius: var(--bms-radius-lg);
	overflow: hidden;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bm-product-card:hover {
	border-color: var(--bms-text);
	box-shadow: var(--bms-shadow-md);
	transform: translateY(-2px);
}
.bm-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.bm-card-media {
	aspect-ratio: 1 / 1;
	background: var(--bms-bg-alt);
	overflow: hidden;
}
.bm-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.bm-product-card:hover .bm-card-media img {
	transform: scale(1.04);
}
.bm-card-body {
	padding: 14px 16px 4px;
}
.bm-card-cats {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bms-text-light);
	margin-bottom: 6px;
}
.bm-card-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bms-text);
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bm-card-price {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: var(--bms-text);
}
.bm-card-price del { color: var(--bms-text-light); font-weight: 500; font-size: 13px; margin-right: 6px; }
.bm-card-price ins { text-decoration: none; color: var(--bms-red); }
.bm-card-price .woocommerce-Price-currencySymbol { font-size: .82em; }
.bm-card-vat { font-size: 11px; font-weight: 600; color: var(--bms-text-light); margin-left: 4px; }

/* ---------- Footer / add to cart ----------
   Selector is padded with repeated/extra classes on purpose: this page
   also carries older, unrelated `.button` rules scoped to specific
   templates (e.g. related products) with high specificity of their
   own. Matching or beating that here keeps the button's look
   consistent no matter which template rendered this card. */
.bm-card-footer {
	margin-top: auto;
	padding: 10px 16px 16px;
}
.woocommerce li.product.bm-product-card .bm-card-footer a.button.button {
	display: block;
	width: 100%;
	margin: 0 !important;
	text-align: center;
	cursor: pointer;
	background: #fff !important;
	border: 1.5px solid var(--bms-red) !important;
	color: var(--bms-red) !important;
	border-radius: var(--bms-radius-md) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 9px 12px !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce li.product.bm-product-card .bm-card-footer a.button.button:hover,
.woocommerce li.product.bm-product-card .bm-card-footer a.button.button:focus-visible {
	background: var(--bms-red) !important;
	border-color: var(--bms-red) !important;
	color: #fff !important;
}
/* Add-to-cart feedback on the button itself. WooCommerce toggles
   `.loading` during the AJAX request, then `.added` once it's in the
   basket — so we show a spinner, then a green tick, in place. The
   separate "View basket" link is hidden, so the card never reflows
   (the header basket, top-right, is where you go to the basket). */
.woocommerce li.product.bm-product-card .bm-card-footer a.added_to_cart {
	display: none !important;
}

/* Processing: hide the label and spin a brand-red loader in its place. */
.woocommerce li.product.bm-product-card .bm-card-footer a.add_to_cart_button.loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.woocommerce li.product.bm-product-card .bm-card-footer a.add_to_cart_button.loading::after {
	content: "" !important;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 15px;
	margin: -8.5px 0 0 -8.5px;
	border: 2px solid var(--bms-red);
	border-top-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	animation: bm-cart-spin .6s linear infinite;
	opacity: 1;
}
@keyframes bm-cart-spin { to { transform: rotate(360deg); } }

/* Added: solid secondary-grey button with a centred white tick. */
.woocommerce li.product.bm-product-card .bm-card-footer a.add_to_cart_button.added {
	position: relative;
	color: transparent !important;
	background: var(--bms-grey-dark) !important;
	border-color: var(--bms-grey-dark) !important;
	pointer-events: none;
}
.woocommerce li.product.bm-product-card .bm-card-footer a.add_to_cart_button.added::after {
	content: "\2713" !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

/* ---------- Sale badge ---------- */
.bm-product-card .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--bms-text);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-radius: 5px;
	padding: 4px 9px;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
	margin: 0;
	z-index: 1;
}

@media (max-width: 720px) {
	.bm-card-body { padding: 12px 12px 4px; }
	.bm-card-footer { padding: 4px 12px 14px; }
}