/**
 * JezPress Woo Related Products — Frontend
 *
 * Breakpoints, gap, and alignment are injected as inline styles by JWRP_Frontend
 * and JWRP_Shortcode so they stay editable from the admin settings.
 */

.jwrp-related-wrapper {
	margin: 30px 0;
}

.jwrp-related-group + .jwrp-related-group {
	margin-top: 40px;
}

.jwrp-related-group__title {
	margin: 0 0 20px;
	font-size: 1.5em;
	line-height: 1.2;
}

/* WooCommerce's default `.products::before/::after` is a `display:table` clearfix
 * for its float layout. With CSS Grid those pseudo-elements become *grid items*
 * that occupy real cells, pushing real products off the first row. Suppress them
 * on our grid only. Higher-specificity selector for sites that wrap in .woocommerce. */
.woocommerce ul.products.jwrp-related-grid::before,
.woocommerce ul.products.jwrp-related-grid::after,
ul.products.jwrp-related-grid::before,
ul.products.jwrp-related-grid::after {
	display: none;
	content: none;
}

/* Override WooCommerce's float layout with CSS Grid that respects our
 * --jwrp-cols-* custom properties. Inline styles set them per shortcode. */
ul.products.jwrp-related-grid {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card layout for each product item. Box shadow is on by default — themes can
 * override with their own `.jwrp-related-grid > li.product` rules. */
ul.products.jwrp-related-grid > li.product {
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;

	background: #fff;
	border: 1px solid #e7e7e7;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	padding: 14px 12px 18px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;

	/* Drives alignment of name, price, stock, SKU, button. Set on the grid
	 * via inline `--jwrp-align` (left|center|right); cascades to children. */
	text-align: var(--jwrp-align, center);
}

ul.products.jwrp-related-grid > li.product:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
	transform: translateY(-2px);
}

/* Image — make it respect text-align so it follows the chosen alignment. */
ul.products.jwrp-related-grid > li.product img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	margin-left: 0;
	margin-right: 0;
	float: none;
}

/* Title, price, rating, stock, SKU, button — let text-align cascade. The rules
 * below normalise float/display from common WC themes so alignment actually wins. */
ul.products.jwrp-related-grid > li.product .woocommerce-loop-product__title,
ul.products.jwrp-related-grid > li.product h2,
ul.products.jwrp-related-grid > li.product h3,
ul.products.jwrp-related-grid > li.product .price,
ul.products.jwrp-related-grid > li.product .star-rating,
ul.products.jwrp-related-grid > li.product .button,
ul.products.jwrp-related-grid > li.product .add_to_cart_button,
ul.products.jwrp-related-grid > li.product .stock,
ul.products.jwrp-related-grid > li.product .sku {
	float: none;
}

ul.products.jwrp-related-grid > li.product .star-rating {
	display: inline-block;
}

ul.products.jwrp-related-grid > li.product .button,
ul.products.jwrp-related-grid > li.product .add_to_cart_button {
	display: inline-block;
}

/* Pin Add-to-cart to the bottom of every card so buttons line up across a row
 * when products have different amounts of meta. Toggled by the
 * "Add to cart button" setting via the --button-bottom modifier class.
 *
 * `align-items` follows the chosen alignment via --jwrp-flex-align (mapped
 * from left/center/right to flex-start/center/flex-end in PHP) so the flex
 * items themselves position consistently with the text alignment. */
ul.products.jwrp-related-grid--button-bottom > li.product {
	display: flex;
	flex-direction: column;
	align-items: var(--jwrp-flex-align, center);
}

ul.products.jwrp-related-grid--button-bottom > li.product > .button,
ul.products.jwrp-related-grid--button-bottom > li.product > .add_to_cart_button {
	margin-top: auto;
}

/* Wrapped-button case: themes that wrap the button in a `.product-actions`
 * (or similar) div — push the wrapping element to the bottom instead. */
ul.products.jwrp-related-grid--button-bottom > li.product > .product-actions,
ul.products.jwrp-related-grid--button-bottom > li.product > .add-to-cart-wrapper {
	margin-top: auto;
}