/* Fowles — Home Product Category Rows
   Replicates the /carpet category-tile look (image on top 5/3, 2 cards
   across, title + count + swatch grid below) scoped under
   .home-pcat-rows-section so it does NOT depend on the WooCommerce
   archive body classes (`.woocommerce.archive`) the theme rules use.
   Two intentional deltas from /carpet per Jason's spec:
   - no `.range-point` bullet list (the renderer simply doesn't emit
     them, so no CSS needed here for that)
   - the swatch grid spans the full tile width (below the title +
     count header) and lays 8-across × 2 rows = 16 swatches. /carpet
     uses 3-up at 33% inside a narrow 40% right column; here we go
     full-width for a denser preview per Jason's spec.
   v1.3.0: LHS filter sidebar — shortcut-link list flanking the rows.
   v1.4.0: category-products-list moved to full tile width, 8-across × 2 rows.
   v1.4.1: nullify theme `.row::before/::after` clearfix pseudos on this
   row (they became extra flex items that pushed the layout past 100%
   and wrapped the sidebar above the tiles).
   v1.5.0: sidebar redesigned to match the /carpet WCPF widget. Each
   filter group is a native <details> with an uppercase summary +
   +/− toggle. Sections collapse by default. White card chrome around
   the whole sidebar removed (it was invisible against the white page
   and didn't match /carpet — /carpet has no card around its filters).
   Items render in a light-gray rounded container when expanded
   (matches /carpet's `.wcpf-checkbox-list` expanded state).
   v1.5.1: sidebar narrowed to 200px fixed (matches /carpet's
   `aside.site-secondary.col-4` rendered width). Was 33.333%; Jason
   flagged the gap. Main column now `flex: 1 1 0` to absorb the freed
   width without a hard %.
   v1.12.0: `.home-pcat-rows-heading` — optional group headings emitted
   between sibling ul.products lists.
   v1.13.0: `.home-pcat-rows-cta` — "View Full Carpet Range" button
   closing out the tile column.
   v1.13.1: `.home-pcat-rows-heading` colour set to #6C6C6C (was
   inheriting the theme's global heading blue #0A3E70).
   v1.13.2: `.home-pcat-rows-cta .button` background set to #6C6C6C (was
   inheriting the theme's global button blue #00529C). The hover/focus/
   active states are overridden too — the theme darkens `.button` to
   rgb(0,60.55,115.2) on those states, which would have flipped the
   button back to blue on hover. The theme also gives `.button` a
   `1px solid #00529C` border, so `border-color` is matched to the grey
   too — otherwise a blue ring stays around the grey pill (same pairing
   the theme uses for the /carpet category-tile buttons). */
/* v1.14.0: the LHS filter sidebar sticks to the viewport while the tall
   tile column scrolls past it (desktop ≥961px only — below that the
   sidebar is the collapsible "Filter +" panel and must stay in flow). */
/* v1.16.1: the "View Full Carpet Range" CTA is left-aligned on the tile
   column (was centred). The <=40em full-width block button keeps its own
   label centred. */

.home-pcat-rows-section { padding: 40px 0; }

/* When the section has the LHS sidebar, drop the row to a 2-col flex
   layout (sidebar | main) instead of the default centered container.
   Both columns live inside the existing .container > .row wrapper. */
.home-pcat-rows-section.has-sidebar .home-pcat-rows-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
}

/* The theme's `.row` carries Bootstrap-style clearfix pseudos
   (`::before` and `::after` with display:table). On a `display:flex`
   parent those become extra flex items and consume gap, pushing total
   width past 100% so the sidebar wraps above the main column. Kill
   them on this specific row. */
.home-pcat-rows-section.has-sidebar .home-pcat-rows-row::before,
.home-pcat-rows-section.has-sidebar .home-pcat-rows-row::after {
	content: none;
	display: none;
}

/* Sidebar width matches /carpet's `aside.site-secondary.col-4` — 200px
   fixed. v1.5.1: was calc(33.333% - 16px) ≈ 550px, which Jason flagged
   as wider than /carpet's. Main column now `flex: 1 1 0` so it takes
   the remaining row width minus the 24px gap. */
.home-pcat-rows-section.has-sidebar .home-pcat-rows-sidebar {
	flex: 0 0 200px;
	max-width: 200px;
	box-sizing: border-box;
}
.home-pcat-rows-section.has-sidebar .home-pcat-rows-main {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Sidebar chrome — no card around the whole thing (matches /carpet,
   which renders filter sections directly on the page surface). The
   sidebar itself is just a column; visual grouping comes from each
   <details> below. */
.home-pcat-rows-sidebar {
	background: transparent;
	border: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Mobile-only "Filter +" master toggle — kept for ≤960px breakpoint. */
.home-pcat-rows-sidebar-toggle {
	display: none;
	width: 100%;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 600;
	color: #383D41;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.home-pcat-rows-sidebar-toggle-icon { float: right; font-weight: 400; }

/* Each filter group is a native <details>. Sections collapse by
   default; clicking the summary toggles open. */
.home-pcat-rows-filters .home-filter-group {
	border-bottom: 1px solid #e6e6e6;
	margin: 0;
	padding: 0;
}
.home-pcat-rows-filters .home-filter-group:last-child {
	border-bottom: 0;
}

/* Summary = the clickable heading row. Match /carpet WCPF typography:
   14px, uppercase, weight 600, dark text. The +/− icon is a CSS pseudo
   so it doesn't depend on an icon font and flips when [open]. */
.home-pcat-rows-filters .home-filter-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #111;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.home-pcat-rows-filters .home-filter-title::-webkit-details-marker { display: none; }
.home-pcat-rows-filters .home-filter-title::marker { content: ''; }

.home-pcat-rows-filters .home-filter-title-text { flex: 1 1 auto; }

/* +/− toggle — pseudo-borders. + by default, − when section is open. */
.home-pcat-rows-filters .home-filter-title-icon {
	position: relative;
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}
.home-pcat-rows-filters .home-filter-title-icon::before,
.home-pcat-rows-filters .home-filter-title-icon::after {
	content: '';
	position: absolute;
	background: #111;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.home-pcat-rows-filters .home-filter-title-icon::before {
	width: 14px;
	height: 2px;
}
.home-pcat-rows-filters .home-filter-title-icon::after {
	width: 2px;
	height: 14px;
}
.home-pcat-rows-filters .home-filter-group[open] .home-filter-title-icon::after {
	display: none;
}

/* The expanded list — light-gray rounded container per /carpet's
   expanded state. Padding + max-height with scroll so 29 colours
   don't take over the page. */
.home-pcat-rows-filters .home-filter-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 10px 12px;
	background: #f5f7f8;
	border-radius: 8px;
	max-height: 320px;
	overflow-y: auto;
}
.home-pcat-rows-filters .home-filter-item { margin: 0; padding: 0; list-style: none; }
/* v1.16.0 (task 86d3yefq4): each row is now a <label> wrapping a real
   checkbox instead of an <a>. Same box metrics as the old link so the
   list geometry (and the 320px max-height) is unchanged. */
.home-pcat-rows-filters .home-filter-link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 8px;
	margin: 0 -4px;
	font-size: 14px;
	line-height: 1.3;
	color: #383D41;
	text-decoration: none;
	border-radius: 6px;
	cursor: pointer;
}
.home-pcat-rows-filters .home-filter-link:hover {
	background: #fff;
	color: #00529c;
	text-decoration: none;
}
.home-pcat-rows-filters .home-filter-checkbox {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin: 0;
	align-self: center;
	accent-color: #00529c;
	cursor: pointer;
}
.home-pcat-rows-filters .home-filter-name { flex: 1 1 auto; }
.home-pcat-rows-filters .home-filter-count {
	flex: 0 0 auto;
	color: #7C8B94;
	font-size: 12px;
}

/* Apply / reset row. On desktop the sidebar itself is the sticky scroll
   container (see the min-width:961px block at the bottom of this file),
   so this bar sticks to its bottom edge and stays reachable no matter
   how far down the open Colour Range list you are. */
.home-pcat-rows-filters .home-filter-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 0 2px;
	background: #fff;
}
.home-pcat-rows-filters .home-filter-apply,
.home-pcat-rows-filters .home-filter-clear {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 8px;
	padding: 11px 14px;
	cursor: pointer;
}
.home-pcat-rows-filters .home-filter-apply {
	flex: 1 1 auto;
	background: #00529c;
	border: 1px solid #00529c;
	color: #fff;
}
.home-pcat-rows-filters .home-filter-apply:hover,
.home-pcat-rows-filters .home-filter-apply:focus {
	background: #003f78;
	border-color: #003f78;
	color: #fff;
}
.home-pcat-rows-filters .home-filter-clear {
	flex: 0 0 auto;
	background: #fff;
	border: 1px solid #ccc;
	color: #383D41;
	font-weight: 400;
}
.home-pcat-rows-filters .home-filter-clear:hover:not(:disabled) {
	border-color: #7C8B94;
	color: #111;
}
.home-pcat-rows-filters .home-filter-clear:disabled {
	opacity: 0.45;
	cursor: default;
}

/* v1.12.0 (task 86d3uv97v): optional section headings between tile
   groups ("Featured Carpet" / "Carpet by Fibre" / "Carpet by Style").
   Each heading is emitted between two sibling `ul.products` lists, so
   size/weight come from the theme's global h2 (40px / 700, 28px on
   mobile) and only spacing + colour are overridden here — the
   theme's 0.25em/0.75em h2 margins stack with the tiles' own 20px top
   margin and read as a floating gap. `text-transform` is reset because
   the theme capitalizes every word, which would render the editor's
   "Carpet by Fibre" as "Carpet By Fibre". `color` overrides the theme's
   global heading blue (#0A3E70) with the grey Jason specified in
   v1.13.1 — the two-class selector (0,2,0) already beats the theme's
   `h1,h2,...` (0,0,1), so no !important is needed. */
.home-pcat-rows-section .home-pcat-rows-heading {
	margin: 32px 0 0;
	padding: 0;
	line-height: 1.2;
	text-transform: none;
	color: #6C6C6C;
}
.home-pcat-rows-section .home-pcat-rows-heading.is-first { margin-top: 0; }

@media screen and (max-width: 40em) {
	.home-pcat-rows-section .home-pcat-rows-heading { margin-top: 20px; }
}

/* The 2-card grid still emits ul.products — keep it flex-wrap so the
   same width:49% per tile works inside the narrower 8-col main. */
.home-pcat-rows-section ul.products {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-pcat-rows-section ul.products li a { color: #383D41; text-decoration: none; }
.home-pcat-rows-section ul.products li a:hover { text-decoration: none; }

.home-pcat-rows-section ul.products li.product-category {
	width: 49%;
	margin: 20px 2% 20px 0;
	position: relative;
	border: 1px solid #ccc;
	border-radius: 16px;
	padding: 0;
	background: #fff;
	overflow: hidden;
	list-style: none;
}
.home-pcat-rows-section ul.products li.product-category:nth-child(2n+2) { margin-right: 0; }

/* Clearfix the floats inside the tile. */
.home-pcat-rows-section .product-image-area::after,
.home-pcat-rows-section .product-category-right::after {
	content: "";
	display: block;
	clear: both;
}

/* Image on top — full width, 5/3 aspect, like /carpet. */
.home-pcat-rows-section .product-category-left {
	width: 100%;
	float: left;
}
.home-pcat-rows-section .product-category-left a {
	display: block;
	width: 100%;
}
.home-pcat-rows-section .product-category-left img {
	display: block;
	width: 100%;
	aspect-ratio: 5/3;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
}

/* Below the image: title left, count + swatches right. */
.home-pcat-rows-section .product-category-right {
	width: 100%;
	float: right;
	padding: 0 0 67px;             /* room for the absolute-positioned Explore pill */
}

/* Explore CTA — mirrors the /carpet tile's `.product-count.button`. */
.home-pcat-rows-section .product-count.button {
	position: absolute;
	bottom: 10px;
	right: 10px;
	margin: 0;
	padding: 10px 25px; /* v1.8.1: symmetric (was 10px 30px 10px 20px, arrow-icon padding /carpet uses) so the label centres in the pill */
	text-align: center;
	font-size: 16px;
	border-radius: 12px;
	color: #fff !important;
	background-color: #6C6C6C !important;
	border: 1px solid #6C6C6C !important;
	text-decoration: none;
	display: inline-block;
	line-height: 1;
}
.home-pcat-rows-section .product-count.button:hover { opacity: .92; }

.home-pcat-rows-section .product-inner-details {
	float: left;
	width: 60%;
	padding-right: 20px;
}
.home-pcat-rows-section .product-inner-details .category-tile-title {
	padding: 0.5em 0 0.5em 15px;
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	color: #383D41;
	min-height: 0;
	line-height: 1.2;
}

.home-pcat-rows-section .colours-available {
	color: #7C8B94;
	font-size: 14px;
	text-align: right;
	padding: 15px 10px 0;
	float: right;
	width: 40%;
	clear: none;
}

.home-pcat-rows-section .category-products-list {
	padding: 16px 15px 0;
	margin: 0;
	float: none;
	width: 100%;
	clear: both;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.home-pcat-rows-section .category-products-list li {
	width: 12.5%;           /* 8 across — full-width tile, 2 rows = 16 swatches */
	padding: 0 3px;
	float: none;
	line-height: 1;
	margin-bottom: 6px;
	list-style: none;
	box-sizing: border-box;
}
.home-pcat-rows-section .category-products-list li small { font-size: 11px; display: none; }
.home-pcat-rows-section .category-products-list li a { display: block; }
.home-pcat-rows-section .category-products-list li img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 0;
}

/* Narrow desktop — when the row main is too tight for two cards across,
   drop to 1-up earlier than the global mobile breakpoint. */
@media screen and (max-width: 960px) {
	.home-pcat-rows-section.has-sidebar .home-pcat-rows-row {
		display: block;
	}
	.home-pcat-rows-section.has-sidebar .home-pcat-rows-sidebar,
	.home-pcat-rows-section.has-sidebar .home-pcat-rows-main {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.home-pcat-rows-section.has-sidebar .home-pcat-rows-sidebar {
		margin-bottom: 24px;
	}
	.home-pcat-rows-sidebar-toggle { display: block; }
	.home-pcat-rows-filters {
		display: none;
		margin-top: 16px;
	}
	.home-pcat-rows-sidebar.is-open .home-pcat-rows-filters { display: block; }
}

/* Mobile — matches the theme's 40em (640px) breakpoint for /carpet
   tiles: stack to 1-up, body fields go full-width / left aligned. */
@media screen and (max-width: 40em) {
	.home-pcat-rows-section ul.products li.product-category {
		width: 100%;
		margin: 12px 0;
	}
	.home-pcat-rows-section .product-inner-details,
	.home-pcat-rows-section .category-products-list,
	.home-pcat-rows-section .colours-available {
		width: 100%;
		float: none;
		padding-right: 0;
		text-align: left;
	}
	.home-pcat-rows-section .colours-available { padding: 0 15px 4px; }
	.home-pcat-rows-section .category-products-list { padding: 12px 10px 0; }
	.home-pcat-rows-section .product-category-right { padding-bottom: 56px; }
}

/* v1.10.0 (task 86d3tr4nh): tiles that carry range points lay the swatch
   grid to the RIGHT of the title+range-points column (3-up, 40%) —
   mirroring /carpet's non-featured product-category tile — instead of
   full-width below it. The `.product-inner-details` column is already
   float:left 60% for every tile, and `.colours-available` already
   float:right 40%, so the swatch grid stacks under the count on the
   right, exactly like /carpet. Tiles WITHOUT range points are untouched:
   they keep the full-width 8-across grid from v1.4.0 ("leave the rest as
   is"). Scoped to `.has-range-points` so only range tiles change. */
.home-pcat-rows-section li.product-category.has-range-points .category-products-list {
	float: right;
	width: 40%;
	clear: none;
	padding: 20px 10px 0;
}
.home-pcat-rows-section li.product-category.has-range-points .category-products-list li {
	width: 33.3333%;
}
.home-pcat-rows-section li.product-category.has-range-points .category-products-list li:nth-child(3n+4) {
	clear: both;
}

/* Mobile: re-stack the swatch grid full-width under the text on
   has-range-points tiles too. The base 40em block above does this for
   plain tiles, but the has-range-points desktop rule outranks it on
   specificity — so repeat the reset at matching specificity here. */
@media screen and (max-width: 40em) {
	.home-pcat-rows-section li.product-category.has-range-points .category-products-list {
		float: none;
		width: 100%;
		clear: both;
		padding: 12px 10px 0;
	}
	.home-pcat-rows-section li.product-category.has-range-points .category-products-list li {
		width: 12.5%;
	}
}

/* v1.13.0 (task 86d3uvb0b): "View Full Carpet Range" CTA at the bottom of
   the tile column. Uses the theme's global `.button` pill (28px radius),
   with the background set to grey #6C6C6C in v1.13.2 (task 86d3xzfky) —
   matching the heading colour and the /carpet category-tile buttons
   rather than the theme's blue. `clear: both` because the last tile group's
   `ul.products` is flex but the tiles themselves float internally, and
   the sidebar column is a flex sibling — clearing keeps the button below
   the cards on every breakpoint. */
.home-pcat-rows-section .home-pcat-rows-cta {
	width: 100%;
	clear: both;
	margin: 36px 0 0;
	/* v1.16.1 (task 86d3yjgcp): left, was center. Aligns the pill with the
	   left edge of the tile grid / group headings above it. */
	text-align: left;
}
.home-pcat-rows-section .home-pcat-rows-cta .button {
	padding: 14px 34px;
	font-size: 18px;
	text-decoration: none;
	background-color: #6C6C6C;
	border-color: #6C6C6C;
}
.home-pcat-rows-section .home-pcat-rows-cta .button:hover,
.home-pcat-rows-section .home-pcat-rows-cta .button:focus,
.home-pcat-rows-section .home-pcat-rows-cta .button:active {
	background-color: #6C6C6C;
	border-color: #6C6C6C;
	color: #FFFFFF;
	opacity: .92;
}

@media screen and (max-width: 40em) {
	.home-pcat-rows-section .home-pcat-rows-cta { margin-top: 24px; }
	.home-pcat-rows-section .home-pcat-rows-cta .button {
		display: block;
		padding: 14px 20px;
		font-size: 16px;
		/* full-width block: label stays centred inside the pill even though
		   the container is now text-align:left (v1.16.1, task 86d3yjgcp) */
		text-align: center;
	}
}

/* v1.14.0 (task 86d3y05x6): float the LHS filter sidebar as you scroll.
   Desktop only (≥961px) — at ≤960px the sidebar collapses into the
   "Filter +" panel above the tiles and must stay in normal flow.

   `position: sticky` works here because:
   - the row is `display:flex; align-items:flex-start`, so the sidebar
     column is its own height (a stretched column can never stick), and
   - nothing between the sidebar and <body> sets overflow/transform/
     filter/contain (verified in-browser) — any of those would silently
     turn an ancestor into the sticky containing block and kill it.

   The sticky element scrolls along the row it lives in, so the sidebar
   releases at the bottom of the tile column rather than running over
   the section below.

   `max-height` + `overflow-y: auto` are the safety net for the
   all-groups-open case: Colour Range alone is 29 items and the three
   open groups measure ~1080px, taller than a 1000px viewport — without
   this the bottom of the list would be unreachable once pinned.

   v1.14.1 (task 86d3y0y5t): pin offset raised 24px → 106px so the
   panel clears the site header instead of tucking under it. The
   `max-height` moves with it — 106px above + the same 24px bottom
   gutter the 48px figure gave us = `calc(100vh - 130px)`. Keep the
   two in step: if `top` changes again, this must change by the same
   amount or the bottom of the open Colour Range list goes off-screen
   once pinned. */
@media screen and (min-width: 961px) {
	.home-pcat-rows-section.has-sidebar .home-pcat-rows-sidebar {
		position: -webkit-sticky;
		position: sticky;
		top: 106px;
		align-self: flex-start;
		max-height: calc(100vh - 130px);
		overscroll-behavior: contain;

		/* v1.16.0 (task 86d3yefq4): the scroll moved one level in — the
		   groups scroll, the Filter/Clear row below them does not, so the
		   button is always on screen even with all three groups open.
		   Before this the whole aside scrolled (`overflow-y: auto` here)
		   and an actions row at the bottom would have been off-screen in
		   exactly that case. Same outer max-height, same pin. */
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.home-pcat-rows-section.has-sidebar .home-pcat-rows-filters,
	.home-pcat-rows-section.has-sidebar .home-filter-form {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}
	.home-pcat-rows-section.has-sidebar .home-filter-groups {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.home-pcat-rows-section.has-sidebar .home-filter-actions {
		flex: 0 0 auto;
		border-top: 1px solid #e6e6e6;
	}
}