/* ---------- Shop page ---------- */

/* "High Grown Long Leaf Premium Black Tea": the forced break after
   "Long Leaf" keeps this on exactly two lines - "High Grown Long Leaf"
   then "Premium Black Tea" - on both desktop and mobile; mobile just
   needs a smaller size so each half actually fits its own line. */
.er-section__title.er-section__title--60.er-shop-feature__title {
	font-size: 50px;
}
@media (max-width: 900px) {
	.er-section__title.er-section__title--60.er-shop-feature__title {
		font-size: 30px;
	}
}

.er-shop-lead {
	color: var(--er-text);
	line-height: 1.7;
	margin: 0 0 8px;
}

/* This page's card design differs from the homepage's: sage badge text,
   larger card radius, smaller/lighter title+price, tighter grid gap -
   matches the original woolentor-product-grid-modern widget exactly. */
.er-product-grid--shop {
	gap: 25px;
	max-width: 1140px;
}
.er-product-grid--shop .er-product-card {
	border-radius: 20px;
}
.er-product-grid--shop .er-product-card__badge {
	color: var(--er-sage);
	font-size: 12px;
	padding: 6px 14px;
	border-radius: 6px;
}
.er-product-grid--shop .er-product-card .woocommerce-loop-product__title {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: #1F2937;
}
.er-product-grid--shop .er-product-card img {
	border-radius: 10px;
}
.er-product-grid--shop .er-product-card .price {
	font-size: 16px;
	font-weight: 400;
	color: #1F2937;
}

/* High Grown Long Leaf Premium Black Tea: two images (25% each) + text (50%) */
.er-shop-feature {
	display: flex;
	gap: 20px;
	align-items: center;
}
.er-shop-feature__images {
	display: flex;
	gap: 20px;
	flex: 0 0 50%;
}
.er-shop-feature__images img {
	flex: 1;
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.er-shop-feature .er-two-col__text {
	flex: 1;
}
.er-shop-feature__label {
	font-size: 18px;
	font-weight: 600;
	color: var(--er-sage) !important;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	font-family: 'Nunito', sans-serif;
	margin: 16px 0 10px;
}

@media (max-width: 900px) {
	.er-shop-feature {
		flex-direction: column;
		/* Stacked: the cross axis is now horizontal, so centring would
		   shrink each block to its content width instead of full width. */
		align-items: stretch;
	}
	.er-shop-feature__images {
		order: -1;
		flex-direction: column;
	}
	.er-shop-feature__images img {
		flex: none;
		height: 300px;
	}
}