/* category-bathroom.css
 * Bathroom category landing page styles.
 * Matches "bathroom category page layout mock up.png" mockup.
 *
 * Brand tokens:
 *   teal   #a2d8d6  (var(--pop-teal))
 *   blush  #f1e9e3
 *   cream  #f4ede4  (var(--pop-cream))
 *   ink    #1c3a39  (var(--pop-ink))
 */

/* ---- Reset / scope ---- */
.bathroom-category { font-family: Quicksand, sans-serif; color: #333; }
.bathroom-category *, .bathroom-category *::before, .bathroom-category *::after { box-sizing: border-box; }
.bathroom-category img { display: block; max-width: 100%; height: auto; }

/* ---- Wrapper ---- */
.bathroom-section { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

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

/* ============================ */
/*  2. Sub-category grid        */
/* ============================ */
.bathroom-cats { margin-top: 40px; margin-bottom: 50px; }

.bathroom-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 24px;
}

.bathroom-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: #2e2a26;
	transition: transform 0.2s ease;
}
.bathroom-card:hover { transform: translateY(-3px); }

.bathroom-card__media {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--pop-cream, #f4ede4);
}
.bathroom-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.25s ease;
}
.bathroom-card:hover .bathroom-card__media img { opacity: 0.92; }

.bathroom-card__label {
	display: block;
	margin-top: 10px;
	font-family: Quicksand, sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: #2e2a26;
	text-align: center;
}

/* ============================ */
/*  3. Collections filter       */
/* ============================ */
/*
 * The filter band is the SHARED component — poppsee_render_category_filters()
 * in inc/poppsee-category-filters.php, styled by css/poppsee-category-filters.css.
 * It renders .pfilters / .pfilters__chip / .pfilters__swatch, and this page calls
 * it from bathroom_template.php.
 *
 * A per-page copy used to live here: .bathroom-collections, .bathroom-filter-row,
 * .bathroom-tag, .bathroom-color-dot, .bathroom-search — 86 lines of CSS for
 * markup no template ever emitted, which is exactly why the missing band looked
 * finished to anyone reading the stylesheet. Deleted. Do not re-add a per-page
 * filter bar here; change the shared component instead.
 */

/* ============================ */
/*  4. Product artwork grid     */
/* ============================ */
.bathroom-products { margin-bottom: 60px; }

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

.bathroom-product-tile {
	position: relative;
	display: block;
	text-decoration: none;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.2s;
}
.bathroom-product-tile:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

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

.bathroom-product-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;
}
.bathroom-product-tile:hover .bathroom-product-pin { opacity: 1; }
.bathroom-product-pin svg { flex-shrink: 0; }

/* Placeholders */
.bathroom-product-placeholder { cursor: default; }
.bathroom-product-placeholder img { border: 1px solid #ece5dc; }

/* ============================ */
/*  Responsive                  */
/* ============================ */
@media (max-width: 768px) {
	.bathroom-titlebar h1 { font-size: 27px; }
	.bathroom-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
	.bathroom-product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 480px) {
	.bathroom-titlebar { padding: 20px 16px; }
	.bathroom-titlebar h1 { font-size: 24px; }
	.bathroom-dots span { width: 11px; height: 11px; }
	.bathroom-section { padding: 0 14px; }
	.bathroom-card__label { font-size: 13px; }
	.bathroom-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
	.bathroom-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.bathroom-product-pin { bottom: 6px; right: 6px; font-size: 11px; padding: 4px 8px; }
}