/* poppsee-category-page.css
 * The furniture every category page shares: the grey title band with the four
 * brand dots, and the artwork grid under the filters.
 *
 * Six sub-category pages each shipped their own copy of both — .tp-titlebar,
 * .bk-titlebar, .ar-titlebar, .ct-titlebar, .lr-titlebar, .bedroom-titlebar,
 * and six matching product grids. Geometry measured off those, which agree
 * with each other and with the deck: 26px band, 32px Quicksand 500, four 14px
 * dots on a 9px gutter, four-column grid at 24px.
 *
 * New pages use these classes so the count stops growing. The existing six can
 * be moved across without any visual change, since this IS their shared
 * geometry.
 */

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

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

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

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

/* Pink, orange, teal, coral — the four brand dots, in deck order. */
.pcat-dots span:nth-child(1) { background: #ff66c4; }
.pcat-dots span:nth-child(2) { background: #ff914d; }
.pcat-dots span:nth-child(3) { background: #03989e; }
.pcat-dots span:nth-child(4) { background: #ff5757; }

/* ---------- Product grid ---------- */
.pcat-products {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
	margin-bottom: 70px;
}

.pcat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.pcat-card {
	display: block;
	text-decoration: none;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .25s ease, transform .2s ease;
}
.pcat-card:hover {
	box-shadow: 0 6px 24px rgba(60, 50, 40, .12);
	transform: translateY(-3px);
}

.pcat-card__img-wrap {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	/* Tinted, not white. A white product on a white tile is invisible; that was
	   the apparel defect fixed in PR #271 and it applies to bedding too. */
	background: #faf8f5;
}
.pcat-card__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .25s ease;
}
.pcat-card:hover .pcat-card__img-wrap img { opacity: .92; }

@media (max-width: 768px) {
	.pcat-titlebar h1 { font-size: 27px; }
	.pcat-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
	.pcat-products { margin-bottom: 50px; }
}

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