/* ============ CATEGORY STRIP ============
   The row of subcategory links between a category's heading and its listing
   (Elements/category-strip.ctp). It lines up with h1.lp-head above it and borrows the
   listing bar's button look (.lb-btn), so the two rows read as one set of controls.

   Not sticky on purpose: the listing bar under it already docks under the header, and a
   second docked row would eat a phone screen. It scrolls away with the page and leaves
   --hd-h / --page-pad untouched. */
.cat-strip {
	position: relative;
	width: 96%;
	max-width: 1400px;
	margin: -4px auto 14px;
	padding: 0 22px;
	font-family: 'Open Sans', sans-serif;
}
/* The scroller. The scrollbar is hidden because the arrows (desktop) and the chip cut off
   at the screen edge (touch) already say there is more. */
.cat-strip-track {
	position: relative; /* scripts.js reads chip offsets against the track */
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 1px 0; /* a scroller clips at its padding edge, which would shave the chip borders */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.cat-strip-track::-webkit-scrollbar {
	display: none;
}

/* colour is spelled out for every link state because `a:visited` forces #000 on anchors */
.cat-strip-chip,
.cat-strip-chip:link,
.cat-strip-chip:visited,
.cat-strip-chip:focus,
.cat-strip-chip:active {
	color: #1b1917;
	text-decoration: none;
}
.cat-strip-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid #e7e2da;
	border-radius: 10px;
	background-color: #ffffff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition:
		border-color 0.16s ease,
		background-color 0.16s ease,
		color 0.16s ease;
}
.cat-strip-chip:hover {
	border-color: #cb1544;
	color: #cb1544;
	text-decoration: none;
}
/* the page being viewed is filled, so it cannot be mistaken for a chip under the pointer */
.cat-strip-chip.is-active,
.cat-strip-chip.is-active:link,
.cat-strip-chip.is-active:visited,
.cat-strip-chip.is-active:hover,
.cat-strip-chip.is-active:focus {
	border-color: #1b1917;
	background-color: #1b1917;
	color: #ffffff;
	cursor: default;
}

/* Arrows: hidden until scripts.js finds more row that way (.can-prev / .can-next). Each sits
   on a white fade, so the chip it covers dissolves instead of being cut by a hard edge. The
   global `button, button:focus { display: inline-block; border: 0 }` outranks a single class,
   so display is repeated for :focus. */
.cat-strip-nav,
.cat-strip-nav:focus {
	display: none;
	border: 0;
}
.cat-strip-nav {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 72px;
	padding: 0;
	align-items: center;
	cursor: pointer;
}
.cat-strip-nav.prev {
	left: 22px;
	justify-content: flex-start;
	background: linear-gradient(to right, #ffffff 45%, rgba(255, 255, 255, 0));
}
.cat-strip-nav.next {
	right: 22px;
	justify-content: flex-end;
	background: linear-gradient(to left, #ffffff 45%, rgba(255, 255, 255, 0));
}
.cat-strip.can-prev .cat-strip-nav.prev,
.cat-strip.can-next .cat-strip-nav.next {
	display: flex;
}
.cat-strip-nav span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid #e7e2da;
	border-radius: 10px;
	background-color: #ffffff;
	color: #1b1917;
	transition:
		border-color 0.16s ease,
		color 0.16s ease;
}
.cat-strip-nav svg {
	display: block;
	width: 16px;
	height: 16px;
}
.cat-strip-nav:hover span {
	border-color: #cb1544;
	color: #cb1544;
}

/* Tablet / phone (the listing bar's breakpoint): no arrows, the row is swiped. It runs to the
   screen edges so a chip cut off at the side shows there is more, while the first chip still
   starts in line with the heading (the 2% side margin + 16px padding of h1.lp-head). */
@media only screen and (max-width: 1022px) {
	.cat-strip {
		width: 100%;
		margin: -2px 0 12px;
		padding: 0;
	}
	.cat-strip-track {
		padding: 1px calc(2% + 16px);
		scroll-padding: 0 calc(2% + 16px);
		scroll-snap-type: x proximity;
	}
	.cat-strip-chip {
		height: 34px;
		padding: 0 12px;
		font-size: 13px;
		scroll-snap-align: start;
	}
	.cat-strip.can-prev .cat-strip-nav.prev,
	.cat-strip.can-next .cat-strip-nav.next {
		display: none;
	}
}