/* Home & Living landing page.
   NOTE: this is the one header category with no mockup in the Monday hand-off.
   Rather than invent a layout, it reuses the "shop by category" mosaic Lisa
   already signed off on (page-shop_template.php), minus the Fur Babies and
   Little Poppers tiles, which are their own header categories.
   The cell ratios are the ones the shipped assets fit without over-cropping —
   the client's June 19 note on /kitchen-dining/ was "the images have been
   cropped too much and you dont see the product". */

.hl-redesign {
	font-family: Quicksand, sans-serif;
	color: #333;
}

.hl-redesign * {
	box-sizing: border-box;
}

.hl-redesign img {
	display: block;
}

.hl-section {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 1. Title bar */
.hl-titlebar {
	background: #f8f8f8;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 26px 20px;
}

.hl-titlebar h1 {
	font-family: Quicksand, sans-serif;
	font-weight: 500;
	font-size: 32px;
	line-height: 1;
	color: #2e2a26;
	margin: 0;
	letter-spacing: 0.01em;
}

.hl-dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 12px;
}

.hl-dots span {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: block;
}

.hl-dot-1 { background: #ff66c4; }
.hl-dot-2 { background: #ff914d; }
.hl-dot-3 { background: #03989e; }
.hl-dot-4 { background: #ff5757; }

/* 2. Shop by category mosaic */
.hl-cats {
	margin-top: 44px;
	margin-bottom: 64px;
}

.hl-section-title {
	font-family: Quicksand, sans-serif;
	font-weight: 400;
	font-size: 22px;
	text-align: center;
	color: #2e2a26;
	margin: 0 0 19px;
}

.hl-cat-grid {
	display: grid;
	grid-template-columns: 288fr 311fr;
	grid-template-areas:
		"living bath"
		"bedroom bath"
		"kitchen kitchen";
	gap: 29px;
	max-width: 908px;
	margin: 0 auto;
}

.hl-cat-tile {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: #2e2a26;
}

.hl-cat-tile img {
	width: 100%;
	object-fit: cover;
	border-radius: 8px;
	transition: opacity 0.25s ease;
}

.hl-cat-tile:hover img {
	opacity: 0.93;
}

.hl-cat-tile span {
	font-family: Quicksand, sans-serif;
	font-size: 15px;
	text-align: center;
	margin-top: 10px;
}

.hl-cat-living { grid-area: living; }
.hl-cat-bedroom { grid-area: bedroom; }
.hl-cat-bath { grid-area: bath; }
.hl-cat-kitchen { grid-area: kitchen; }

.hl-cat-living img,
.hl-cat-bedroom img { aspect-ratio: 1.933; }
.hl-cat-kitchen img { aspect-ratio: 4.18; }

/* Bathroom spans both rows: it stretches into the row height rather than
   declaring a ratio, which would make it taller than the two stacked tiles. */
.hl-cat-bath img {
	flex: 1;
	min-height: 0;
	height: 100%;
}

/* 3. Product grid */
.hl-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: 1140px;
	margin: 0 auto 72px;
	padding: 0 20px;
}

.hl-product-card {
	display: block;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.hl-product-card:hover {
	transform: translateY(-3px);
}

.hl-product-card__img-wrap {
	border-radius: 8px;
	overflow: hidden;
	background: #f4ede4;
}

.hl-product-card img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

@media (max-width: 900px) {
	.hl-cat-grid {
		grid-template-columns: 1fr;
		grid-template-areas: "living" "bedroom" "bath" "kitchen";
		max-width: 520px;
	}

	/* height:100% has nothing to stretch into once each tile owns its row. */
	.hl-cat-bath img {
		flex: none;
		height: auto;
		aspect-ratio: 0.928;
	}

	.hl-cat-kitchen img { aspect-ratio: 2.2; }
	.hl-product-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (max-width: 580px) {
	.hl-product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}