/* Wax Source Related Products — frontend styles.
   Every visual choice below is driven by a CSS variable set from the plugin
   settings (WooCommerce → Related Sections). Colors left empty in settings
   fall back to the theme's inherited styles. */

.wsrp-section {
	clear: both;
	margin: 2em 0;
}

/* -------- Section heading -------- */
.wsrp-heading {
	color: var(--wsrp-heading, inherit);
	font-size: var(--wsrp-title-size, 22px);
	font-weight: var(--wsrp-title-weight, 700);
	text-align: var(--wsrp-title-align, left);
	line-height: 1.2;
	margin: 0 0 1em;
}

/* Full underline under the whole heading */
.wsrp-title-underline .wsrp-heading {
	padding-bottom: 0.4em;
	border-bottom: 2px solid var(--wsrp-accent, currentColor);
}

/* Short accent bar under the heading text */
.wsrp-title-accent .wsrp-heading {
	position: relative;
	padding-bottom: 0.5em;
}

.wsrp-title-accent .wsrp-heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: var(--wsrp-accent, currentColor);
}

/* Position the accent bar to match the title's alignment */
.wsrp-align-left .wsrp-heading::after {
	left: 0;
}
.wsrp-align-center .wsrp-heading::after {
	left: 50%;
	transform: translateX(-50%);
}
.wsrp-align-right .wsrp-heading::after {
	right: 0;
}

/* -------- Products container -------- */
.wsrp-products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
}

/* Grid layout */
.wsrp-layout-grid .wsrp-products {
	grid-template-columns: repeat(var(--wsrp-columns, 4), 1fr);
}

/* Horizontal row layout (scrollable) */
.wsrp-layout-row .wsrp-products {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}

.wsrp-layout-row .wsrp-product {
	flex: 0 0 calc((100% - 20px * (var(--wsrp-columns, 4) - 1)) / var(--wsrp-columns, 4));
	scroll-snap-align: start;
}

/* -------- Product card -------- */
.wsrp-product {
	background: var(--wsrp-card-bg, transparent);
	border: var(--wsrp-card-border, none);
	border-radius: var(--wsrp-card-radius, 8px);
	box-shadow: var(--wsrp-card-shadow, 0 2px 8px rgba(0, 0, 0, 0.06));
	overflow: hidden;
	text-align: var(--wsrp-card-text-align, left);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wsrp-product:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.wsrp-link {
	display: block;
	text-decoration: none;
}

.wsrp-image {
	position: relative;
	display: block;
}

.wsrp-image img {
	display: block;
	width: 100%;
	height: auto;
}

.wsrp-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--wsrp-badge, #e2401c);
	color: #fff;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wsrp-out-of-stock .wsrp-image img {
	opacity: 0.6;
}

.wsrp-name {
	display: block;
	color: var(--wsrp-name, inherit);
	font-size: var(--wsrp-name-size, 16px);
	font-weight: 600;
	line-height: 1.3;
	margin: 0.6em 0.7em 0.2em;
}

.wsrp-price {
	display: block;
	color: var(--wsrp-price, inherit);
	font-size: var(--wsrp-price-size, 15px);
	margin: 0 0.7em 0.8em;
}

.wsrp-price .woocommerce-Price-amount {
	color: inherit;
}

/* -------- Responsive -------- */
@media (max-width: 992px) {
	.wsrp-layout-grid .wsrp-products {
		grid-template-columns: repeat(3, 1fr);
	}
	.wsrp-layout-row .wsrp-product {
		flex-basis: calc((100% - 40px) / 3);
	}
}

@media (max-width: 600px) {
	.wsrp-layout-grid .wsrp-products {
		grid-template-columns: repeat(2, 1fr);
	}
	.wsrp-layout-row .wsrp-product {
		flex-basis: calc((100% - 20px) / 2);
	}
}