/* Category pages: hero search button, sub-category bento, latest updates rows, sort, pagination, request strip. */
.ct-hero .hp-search button {
	height: 40px;
	padding: 0 20px;
	border: 0;
	border-radius: 6px;
	background: var(--ink);
	color: #fff;
	font: 600 12px/1 inherit;
	font-family: inherit;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s;
}

.ct-hero .hp-search button:hover {
	background: var(--accent);
}

.ct-hero {
	padding-bottom: 72px;
}

.ct-subs-s,
.ct-up-s,
.ct-all-s {
	padding: 112px 0;
}

.ct-subs-s .bw-cat-w,
.ct-up-s .bw-cat-w,
.ct-all-s .bw-cat-w {
	margin-top: 48px;
}

.ct-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(210px, auto);
	gap: 1px;
	background: rgba(9, 9, 11, .07);
	border: 1px solid rgba(9, 9, 11, .07);
	border-radius: var(--radius);
	overflow: hidden;
}

.ct-sub {
	display: flex;
	flex-direction: column;
	padding: 28px;
	background: var(--bg);
	transition: background-color .55s;
}

.ct-sub.big {
	grid-column: span 2;
	grid-row: span 2;
	background: var(--ink);
	color: #fff;
}

.ct-n {
	font: 400 12px/16px var(--mono);
	color: rgba(9, 9, 11, .25);
}

.ct-sub h3 {
	margin: 12px 0 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
	transition: color .55s;
}

.ct-sub.big h3 {
	font-size: 40px;
	letter-spacing: -.02em;
}

.ct-k {
	margin-top: 6px;
	font: 500 12px/16px var(--mono);
	color: rgba(9, 9, 11, .45);
	transition: color .55s;
}

.ct-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 18px;
}

.ct-chips em {
	padding: 4px 9px;
	border: 1px solid rgba(9, 9, 11, .12);
	border-radius: 999px;
	font-style: normal;
	font-size: 11px;
	color: rgba(9, 9, 11, .6);
	transition: all .55s;
}

.ct-go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 20px;
	font-size: 13px;
	color: rgba(9, 9, 11, .5);
	transition: color .55s;
}

.ct-go i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(9, 9, 11, .15);
	border-radius: 6px;
	transition: all .2s;
}

.ct-go i svg {
	width: 9px;
	height: 9px;
}

.ct-sub.big .ct-n,
.ct-sub:hover .ct-n {
	color: rgba(255, 255, 255, .3);
}

.ct-sub.big .ct-k,
.ct-sub:hover .ct-k {
	color: #ff8a8f;
}

.ct-sub.big .ct-chips em,
.ct-sub:hover .ct-chips em {
	border-color: rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .75);
}

.ct-sub.big .ct-go,
.ct-sub:hover .ct-go {
	color: #fff;
}

.ct-sub.big .ct-go i,
.ct-sub:hover .ct-go i {
	border-color: var(--accent);
	background: var(--accent);
	color: #fff;
}

.ct-sub:hover {
	background: var(--ink);
	color: #fff;
}

.ct-uprow {
	display: grid;
	grid-template-columns: minmax(0, 2fr) 120px minmax(0, 1fr) 80px auto;
	gap: 20px;
	align-items: center;
	padding: 18px 32px;
	position: relative;
	transition: background-color .2s;
}

.ct-uprow + .ct-uprow::before {
	content: "";
	position: absolute;
	top: 0;
	left: 32px;
	right: 32px;
	height: 1px;
	background-image: var(--dash);
}

.ct-uprow:hover {
	background: rgba(255, 255, 255, .55);
}

.ct-uprow b {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ct-uprow .v {
	font: 500 13px/1 var(--mono);
	color: var(--ink);
}

.ct-uprow .c {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(9, 9, 11, .4);
}

.ct-uprow .t {
	font: 400 12px/1 var(--mono);
	color: rgba(9, 9, 11, .4);
}

.ct-uprow .bw-more {
	margin-top: 0;
}

.ct-uprow:hover .bw-more {
	color: var(--ink);
}

.ct-uprow:hover .bw-more i {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.ct-sort {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: rgba(255, 255, 255, .35);
	border: 1px solid var(--ink-08);
	border-radius: var(--radius);
}

.ct-sort button {
	padding: 8px 14px;
	border: 0;
	border-radius: 6px;
	background: none;
	font: 500 13px/1 inherit;
	font-family: inherit;
	color: rgba(9, 9, 11, .5);
	cursor: pointer;
}

.ct-sort button.on {
	background: var(--ink);
	color: #fff;
}

.ct-pg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
	font: 500 13px/1 var(--mono);
}

.ct-pg > a:not(.bw-more),
.ct-pg > span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border: 1px solid rgba(9, 9, 11, .12);
	border-radius: 6px;
	color: rgba(9, 9, 11, .6);
}

.ct-pg > span:not(.on) {
	border: 0;
}

.ct-pg .on {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

.ct-pg .bw-more {
	margin: 0 0 0 12px;
	font-family: inherit;
}

.ct-req {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding: 24px 32px;
	background: var(--bg-2);
	border: 1px solid var(--ink-08);
	border-radius: var(--radius);
	font-size: 18px;
	font-weight: 600;
}

.ct-req .bw-more {
	margin-top: 0;
}

@media(max-width: 1023px) {
	.ct-bento {
		grid-template-columns: 1fr 1fr;
	}

	.ct-sub.big {
		grid-column: span 2;
		grid-row: auto;
	}

	.ct-uprow {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	.ct-uprow .c,
	.ct-uprow .t {
		display: none;
	}
}

@media(max-width: 767px) {
	.ct-subs-s,
	.ct-up-s,
	.ct-all-s {
		padding: 64px 0;
	}

	.ct-bento {
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-sub.big {
		grid-column: auto;
	}

	.ct-sub.big h3 {
		font-size: 30px;
	}

	.ct-uprow {
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 16px 20px;
	}

	.ct-uprow .bw-more span {
		display: none;
	}

	.ct-req {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
	}

	.ct-pg a:nth-child(3),
	.ct-pg span:nth-child(4) {
		display: none;
	}
}

/* SEO layer: breadcrumb, updated line, guide H3 rows, brand links, related links */
.ct-bc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	font: 500 12px/1.4 var(--mono);
	letter-spacing: .04em;
	color: rgba(9, 9, 11, .45);
}

.ct-bc a {
	color: inherit;
	text-decoration: none;
}

.ct-bc a:hover {
	color: var(--accent);
}

.ct-bc [aria-current] {
	color: rgba(9, 9, 11, .75);
}

.ct-guide h3.lb {
	margin: 0;
	font-weight: 500;
}

.ct-guide .bw-row p + p {
	margin-top: 14px;
}

.ct-guide .bw-row a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 3px;
}

.ct-brands {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid var(--ink-10);
	border-radius: 4px;
	overflow: hidden;
}

.ct-brands a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 2px 12px;
	padding: 20px 22px;
	border-right: 1px solid var(--ink-10);
	border-bottom: 1px solid var(--ink-10);
	color: var(--ink);
	text-decoration: none;
	transition: background .2s;
}

.ct-brands a:nth-child(4n) {
	border-right: 0;
}

.ct-brands a:nth-last-child(-n+4) {
	border-bottom: 0;
}

.ct-brands b {
	font-size: 16px;
	font-weight: 600;
}

.ct-brands span {
	grid-column: 1;
	font: 500 11px var(--mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(9, 9, 11, .45);
}

.ct-brands i {
	grid-row: 1/3;
	grid-column: 2;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(9, 9, 11, .2);
	border-radius: 4px;
	color: rgba(9, 9, 11, .5);
}

.ct-brands i svg {
	width: 10px;
}

.ct-brands a:hover {
	background: rgba(255, 255, 255, .5);
}

.ct-brands a:hover i {
	color: var(--accent);
	border-color: var(--accent);
}

@media(max-width: 900px) {
	.ct-brands {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ct-brands a:nth-child(4n) {
		border-right: 1px solid var(--ink-10);
	}

	.ct-brands a:nth-child(2n) {
		border-right: 0;
	}

	.ct-brands a:nth-last-child(-n+4) {
		border-bottom: 1px solid var(--ink-10);
	}

	.ct-brands a:nth-last-child(-n+2) {
		border-bottom: 0;
	}
}

/* Filter bar: sticky glass bar with type chips (sub-category links), brand and sort dropdowns; grid below */
.ct-fb-s {
	padding-bottom: 64px;
}

.ct-fb {
	position: sticky;
	top: var(--ct-top, 0px);
	z-index: 20;
	margin-bottom: 28px;
	background: rgba(240, 239, 235, .86);
	border-top: 1px dashed var(--ink-15, rgba(9, 9, 11, .15));
	border-bottom: 1px dashed var(--ink-15, rgba(9, 9, 11, .15));
}

.ct-fb-in {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.ct-chips-row {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
	mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.ct-chips-row::-webkit-scrollbar {
	display: none;
}

.ct-fb-l {
	flex: none;
	margin-right: 6px;
	font: 500 11px var(--mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
}

.ct-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border: 1px solid rgba(9, 9, 11, .14);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(9, 9, 11, .75);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .2s, color .2s, background .2s;
}

.ct-chip em {
	font: 500 11px var(--mono);
	font-style: normal;
	color: rgba(9, 9, 11, .4);
}

.ct-chip:hover {
	border-color: rgba(9, 9, 11, .35);
	color: var(--ink);
}

.ct-chip.on {
	border-color: var(--ink);
	color: var(--ink);
	background: rgba(255, 255, 255, .7);
	box-shadow: inset 0 -2px 0 var(--accent);
}

.ct-fb-r {
	flex: none;
	display: flex;
	gap: 8px;
}

.ct-dd {
	position: relative;
}

.ct-dd summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 12px 0 14px;
	border: 1px solid rgba(9, 9, 11, .14);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	background: rgba(255, 255, 255, .4);
}

.ct-dd summary::-webkit-details-marker {
	display: none;
}

.ct-dd summary span {
	color: rgba(9, 9, 11, .45);
	font-weight: 400;
}

.ct-dd summary svg {
	width: 10px;
	height: 10px;
	transition: transform .2s;
}

.ct-dd[open] summary svg {
	transform: rotate(180deg);
}

.ct-dd[open] summary {
	border-color: var(--ink);
}

.ct-dd-p {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 220px;
	display: grid;
	padding: 8px;
	background: var(--bg-2, #f6f5f2);
	border: 1px solid rgba(9, 9, 11, .12);
	border-radius: 6px;
	box-shadow: 0 20px 40px -20px rgba(9, 9, 11, .3);
}

.ct-dd-p label,
.ct-dd-p a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 4px;
	font-size: 14px;
	color: rgba(9, 9, 11, .75);
	text-decoration: none;
	cursor: pointer;
}

.ct-dd-p label:hover,
.ct-dd-p a:hover {
	background: rgba(9, 9, 11, .04);
	color: var(--ink);
}

.ct-dd-p input {
	accent-color: var(--accent);
}

.ct-dd-sort a.on {
	color: var(--ink);
	font-weight: 600;
	box-shadow: inset 2px 0 0 var(--accent);
}

.ct-meta {
	margin: 0 0 18px;
	font: 500 12px var(--mono);
	letter-spacing: .04em;
	color: rgba(9, 9, 11, .45);
}

@media(max-width: 767px) {
	.ct-fb-in {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.ct-fb-l {
		display: none;
	}

	.ct-fb-r .ct-dd {
		flex: 1;
	}

	.ct-fb-r .ct-dd summary {
		width: 100%;
		justify-content: space-between;
	}

	.ct-dd-p {
		left: 0;
		right: auto;
	}
}

/* Updated line: one flowing line instead of squeezed flex columns */

/* Filter section: top line uses the site's --dash divider like every other section; no lines below the bar, between cards or from the page guides */
.ct-fb-s {
	position: relative;
	background: var(--bg);
}

.ct-fb {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 0;
}

.ct-fb-s .bw-cat > .rcell.rcell {
	border: 0;
}

/* More room between the section divider and the chips: divider moves to the section top, 40px above the bar */
.ct-fb::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-image: var(--dash);
	pointer-events: none;
	content: none;
}

.ct-fb-s {
	z-index: 11;
	padding-top: 40px;
}

.ct-fb-s::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-image: var(--dash);
	pointer-events: none;
}

.ct-fb-in.bw-cat-w {
	margin-top: 0;
}

/* Category page rhythm: every section after the hero gets the same site divider and the same tighter 72px spacing (was 112px, brands/related had none) */
.ct-page > section.dashed-border-t {
	padding-top: 72px;
	padding-bottom: 72px;
}

.ct-page > section.ct-fb-s {
	padding-top: 40px;
	padding-bottom: 72px;
}

.ct-page > section .bw-cat-hd {
	margin-bottom: 40px;
}

@media(max-width: 767px) {
	.ct-page > section.dashed-border-t {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.ct-page > section.ct-fb-s {
		padding-top: 28px;
	}
}

/* Type chip arrows: only shown when the row overflows; fades follow which side has more */
.ct-chips-w {
	flex: 1;
	min-width: 0;
	position: relative;
	display: flex;
	align-items: center;
}

.ct-chips-w .ct-chips-row {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent);
}

.ct-chips-w.at-start .ct-chips-row {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

.ct-chips-w.at-end .ct-chips-row {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px);
	mask-image: linear-gradient(90deg, transparent 0, #000 48px);
}

.ct-chips-w.at-start.at-end .ct-chips-row {
	-webkit-mask-image: none;
	mask-image: none;
}

.ct-arr {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	padding: 0;
	border: 1px solid rgba(9, 9, 11, .18);
	border-radius: 50%;
	background: var(--bg-2, #f6f5f2);
	color: rgba(9, 9, 11, .7);
	cursor: pointer;
	box-shadow: 0 4px 12px -6px rgba(9, 9, 11, .3);
	transition: border-color .2s, color .2s;
}

.ct-arr[hidden] {
	display: none;
}

.ct-arr svg {
	width: 12px;
	height: 12px;
}

.ct-arr:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.ct-arr.prev {
	left: 0;
}

.ct-arr.next {
	right: 0;
}

@media(max-width: 767px) {
	.ct-arr {
		display: none!important;
	}
}

/* real pages + update feed */
.ct-h1pg {
	display: block;
	margin-top: .6rem;
	font: 600 12px var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-40);
}

.ct-up-all {
	margin-top: 18px;
}

.ct-pg span:not(.on) {
	color: var(--ink-35);
}

/* Category page title: smaller than the shared section heading, with room to stay on two lines */
.ct-hero .bw-h2 {
	font-size: clamp(1.875rem, 1.5rem + 1.7vw, 3rem);
	letter-spacing: -.025em;
}

.ct-hero .bw-cat-hd > div:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.ct-hero .bw-cat-hr {
	flex: 0 1 320px;
}

/* Laptops and tablets: the intro text moves under the title so the title gets the full width */
@media (max-width: 1199px) {
	.ct-hero .bw-cat-hd {
		flex-direction: column;
		align-items: flex-start;
	}

	.ct-hero .bw-cat-hr {
		flex-basis: auto;
		align-items: flex-start;
	}

	.ct-hero .bw-cat-hd p {
		max-width: 560px;
		text-align: left;
	}
}

/* Phones: no forced break, the words wrap evenly */
@media (max-width: 767px) {
	.ct-hero .bw-h2 {
		font-size: 1.75rem;
		text-wrap: balance;
	}

	.ct-hero .bw-h2 br {
		display: none;
	}
}