/* category-living-room.css — Living Room category landing page */

.lr-page {
	font-family: Quicksand, sans-serif;
	color: #2e2a26;
	line-height: 1.5;
}
.lr-page *, .lr-page *::before, .lr-page *::after { box-sizing: border-box; }
.lr-page img { display: block; max-width: 100%; height: auto; }
.lr-section { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Title bar */
.lr-titlebar {
	background: #f8f8f8;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 26px 20px;
}
.lr-titlebar h1 {
	font-family: Quicksand, sans-serif;
	font-weight: 500;
	font-size: 32px;
	line-height: 1;
	color: #2e2a26;
	margin: 0;
	letter-spacing: 0.01em;
}
.lr-dots { display: flex; justify-content: center; gap: 9px; margin-top: 12px; }
.lr-dot { width: 14px; height: 14px; border-radius: 50%; display: block; }
.lr-dot-1 { background: #ff66c4; }
.lr-dot-2 { background: #ff914d; }
.lr-dot-3 { background: #03989e; }
.lr-dot-4 { background: #ff5757; }

/* Hero banner */
/* The Living Room hero banner is gone: it duplicated the four sub-category
   photographs directly below it. See living_room_template.php. */

/* Sub-category cards */
.lr-subcats { margin-top: 32px; margin-bottom: 48px; }
.lr-subcat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lr-subcat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: #2e2a26;
	transition: transform 0.2s ease;
}
.lr-subcat-card:hover { transform: translateY(-4px); }
.lr-subcat-img-wrap {
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	background: var(--pop-cream, #f4ede4);
	aspect-ratio: 1.3;
}
.lr-subcat-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.25s ease;
}
.lr-subcat-card:hover .lr-subcat-img-wrap img { opacity: 0.9; }
.lr-subcat-label {
	display: block;
	margin-top: 10px;
	font-family: Quicksand, sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: #2e2a26;
	text-align: center;
}

/* Product gallery */
.lr-gallery { margin-bottom: 80px; margin-top: 48px; }
.lr-gallery-heading { font-family: Quicksand, sans-serif; font-weight: 500; font-size: 22px; color: #2e2a26; margin: 0 0 24px; text-align: center; }
.lr-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lr-gallery-item {
	position: relative;
	display: block;
	text-decoration: none;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.2s ease;
}
.lr-gallery-item:hover { box-shadow: 0 4px 20px rgba(60, 50, 40, 0.12); }
.lr-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.lr-gallery-pin {
	position: absolute;
	bottom: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(255, 255, 255, 0.92);
	color: #2e2a26;
	font-family: Quicksand, sans-serif;
	font-size: 12px;
	font-weight: 500;
	padding: 5px 10px;
	border-radius: 16px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.lr-gallery-item:hover .lr-gallery-pin { opacity: 1; }
.lr-gallery-pin svg { flex-shrink: 0; }
.lr-gallery-placeholder { cursor: default; }
.lr-gallery-placeholder img { border: 1px solid #ece5dc; }

/* Tablet */
@media (max-width: 768px) {
	.lr-titlebar h1 { font-size: 27px; }
	.lr-subcat-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
	.lr-subcat-label { font-size: 14px; }
	.lr-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.lr-gallery { margin-bottom: 60px; }
}

/* Mobile */
@media (max-width: 480px) {
	.lr-titlebar { padding: 20px 16px; }
	.lr-titlebar h1 { font-size: 24px; }
	.lr-dots { gap: 7px; margin-top: 10px; }
	.lr-dot { width: 11px; height: 11px; }
	.lr-subcat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
	.lr-subcat-img-wrap { border-radius: 8px; }
	.lr-subcat-label { margin-top: 8px; font-size: 13px; }
	.lr-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.lr-gallery-pin { bottom: 6px; right: 6px; font-size: 11px; padding: 4px 8px; }
	.lr-section { padding: 0 14px; }
	.lr-subcats { margin-top: 24px; margin-bottom: 36px; }
	.lr-gallery { margin-bottom: 48px; }
}