/* Product cards, shared by the collection pages and any product loop placed
   on the home page. Extracted from zk-plp.css so a single file governs the
   card wherever the loop appears. */

:root {
	--zk-ink: #2e2338;
	--zk-muted: #7a7282;
	--zk-accent: #3f7a6a;
	--zk-hairline: #e8e3da;
}

/* Cards share a baseline. Titles run one to three lines, which pushed the
   price and the button to different heights across a row. The title is
   clamped to two lines of Karla (19.5px each, plus its 4px padding) and the
   price block is pushed to the foot of the card. CommerceKit wraps the price
   in .cgkit-as-variation-price, so there is no bare .price child to target. */
.content-area ul.products li.product .woocommerce-card__header {
	display: flex;
	flex-direction: column;
}

.content-area ul.products li.product .woocommerce-loop-product__title {
	min-height: 47px;
}

.content-area ul.products li.product .woocommerce-loop-product__title > a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.content-area ul.products li.product .cgkit-as-variation-price { margin-top: auto; }

@media (min-width: 993px) {
	/* Above the mobile breakpoint the theme lifts the add-to-cart button out
	   of the flow (absolute, bottom 0) and reveals it on hover, counting on
	   the card to reserve its 40px. Block 2 zeroed that padding, so the button
	   landed on the price. Below 993px the button stays in the flow and needs
	   no reserve. */
	.content-area ul.products li.product { padding-bottom: 52px; }

	/* The button sits on bottom: 0, flush against the card border. Lifting it
	   keeps the card from looking cut off on hover. */
	.content-area ul.products li.product a.add_to_cart_button { bottom: 12px; }
}