/* ChugCheck Category 2.4.0
 *
 * The page carries the homepage's class as well as its own, so the drink cards
 * and the palette are the homepage's. Only what is particular to a category is
 * here: the heading, the chips, the style tiles and the grid.
 */

/* Tells the browser the ground here is dark, so the parts it draws itself —
   scrollbars, the list a select drops down, focus rings — come back dark
   instead of the light default, which on this page showed up as white bars
   down the filter column. On the body as well as on the page, because the
   window's own scrollbar takes its cue from the body. */
body.chugcheck-category-page,
.cchc { color-scheme: dark; }

.cchc {
	--cchc-gutter: 16px;
	padding-bottom: 64px;
}

/* The column is the one thing that scrolls inside itself, so it is the one
   thing that needs a scrollbar of its own. Firefox takes the two colours;
   WebKit wants the parts named. Both end up as a pale thumb on no track. */
.cchc-cols__side {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--cch-ink) 26%, transparent) transparent;
}
.cchc-cols__side::-webkit-scrollbar { width: 11px; }
.cchc-cols__side::-webkit-scrollbar-track { background: transparent; }
.cchc-cols__side::-webkit-scrollbar-thumb {
	background-color: color-mix(in srgb, var(--cch-ink) 22%, transparent);
	border: 3px solid transparent;
	background-clip: content-box;
	border-radius: 999px;
}
.cchc-cols__side::-webkit-scrollbar-thumb:hover {
	background-color: color-mix(in srgb, var(--cch-ink) 36%, transparent);
}

.cchc__body {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--cchc-gutter);
}

.cchc-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ heading ---- */

.cchc-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	margin-bottom: 26px;
	overflow: hidden;
	isolation: isolate;
}

/* Height is the backdrop's job. With a photograph the heading is the page's
   opening shot and takes most of the first screen; without one there is
   nothing to give room to, and a tall coloured gradient reads as a picture
   that failed to load rather than as a deliberately quiet heading. */
.cchc-hero.has-image { min-height: min(56vh, 420px); }

.cchc-hero__back {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 140% at 18% 0%, color-mix(in srgb, var(--cchc-c, #C9A96A) 38%, transparent), transparent 62%),
		linear-gradient(180deg, color-mix(in srgb, var(--cchc-c, #C9A96A) 12%, var(--cch-ground)), var(--cch-ground));
}

.cchc-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Weight towards the top of the photograph: bottles and glasses are usually
	   in the upper half, and the lower half is where the words go. */
	object-position: 50% 35%;
}

/* Three layers of shade, each doing one job: the top one keeps the header
   legible, the left one keeps the heading legible over whatever the picture
   happens to be, and the bottom one melts the photograph into the page so it
   ends without a seam. */
.cchc-hero.has-image .cchc-hero__back::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18) 34%, transparent 52%),
		linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .30) 45%, transparent 72%),
		linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--cch-ground) 72%, transparent) 78%, var(--cch-ground) 100%);
}

.cchc-hero__in {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 38px var(--cchc-gutter) 26px;
}

/* Under a header that lies over the picture, the heading has to start below
   where that header is. */
body.chugcheck-category-backdrop .cchc-hero__in { padding-top: 96px; }

.cchc-hero__name {
	margin: 0;
	font-size: clamp(38px, 9vw, 68px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--cch-ink);
}
.cchc-hero.has-image .cchc-hero__name { text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }

.cchc-hero__count {
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--cch-accent);
}

.cchc-hero__intro {
	margin: 10px 0 0;
	max-width: 52ch;
	font-size: 16px;
	line-height: 1.5;
	color: var(--cch-text);
}
.cchc-hero.has-image .cchc-hero__intro { color: var(--cch-ink); opacity: .92; }

/* The search field is the homepage's, so cch-search already styles it; it only
   needs room of its own here and a ceiling so it does not run the full width
   of a wide screen. */
.cchc .cchc-search { margin-top: 22px; max-width: 620px; }

/* Once a filter is on, the heading is no longer the point of the page. */
.cchc-hero.is-narrow { min-height: 0; }
.cchc-hero.is-narrow .cchc-hero__in { padding-top: 34px; padding-bottom: 18px; }
.cchc-hero.is-narrow .cchc-hero__name { font-size: clamp(26px, 6vw, 38px); }

/* --------------------------------------------------------- what is on ---- */

.cchc-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}

.cchc-active__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cch-dim);
}

.cchc-off {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 7px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cch-accent) 18%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cch-accent) 45%, transparent);
	color: var(--cch-ink);
	text-decoration: none;
	font-size: 14px;
}
.cchc-off:hover { background: color-mix(in srgb, var(--cch-accent) 30%, transparent); }
.cchc-off__kind { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cch-accent); }
.cchc-off__name { font-weight: 600; }
.cchc-off__x { font-size: 16px; line-height: 1; opacity: .75; }

.cchc-active__clear {
	font-size: 13px;
	font-weight: 600;
	color: var(--cch-dim);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cchc-active__clear:hover { color: var(--cch-ink); }

/* ------------------------------------------------------- two columns ---- */

.cchc-cols { display: grid; gap: 22px; }

@media (min-width: 900px) {
	.cchc-cols {
		grid-template-columns: 248px minmax(0, 1fr);
		gap: 38px;
		align-items: start;
	}
	/* The column follows the reader down a long grid. 96px clears the site
	   header, which is sticky too.

	   This is the only thing on the page that scrolls inside itself. The
	   groups used to scroll as well, which put two scrollbars side by side
	   and made the reader choose which one their wheel meant. */
	.cchc-cols__side {
		position: sticky;
		top: 96px;
		max-height: calc(100vh - 116px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (min-width: 1200px) {
	.cchc-cols { grid-template-columns: 276px minmax(0, 1fr); gap: 48px; }
}

/* ----------------------------------------------------- the filter column ---- */

.cchc-side__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--cch-line);
}

.cchc-side__h {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cch-dim);
}

.cchc-side__clear {
	font-size: 13px;
	font-weight: 600;
	color: var(--cch-accent);
	text-decoration: none;
}
.cchc-side__clear:hover { text-decoration: underline; text-underline-offset: 3px; }

.cchc-group { border-bottom: 1px solid var(--cch-line); }

.cchc-group__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 2px;
	cursor: pointer;
	list-style: none;
	color: var(--cch-ink);
}
.cchc-group__head::-webkit-details-marker { display: none; }

.cchc-group__label { font-size: 15px; font-weight: 700; }

.cchc-group__on {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--cch-accent);
	color: #17130E;
	font-size: 11px;
	font-weight: 800;
}

/* The chevron, pushed to the end by the auto margin so it stays at the right
   however long the label is. */
.cchc-group__head::after {
	content: "";
	margin-left: auto;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .55;
	transition: transform .15s ease;
}
.cchc-group[open] > .cchc-group__head::after { transform: translateY(1px) rotate(-135deg); }

.cchc-find { padding: 0 0 10px; }

.cchc-side .cchc-find__input {
	width: 100%;
	height: 34px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: var(--cch-raised);
	box-shadow: inset 0 0 0 1px var(--cch-line);
	color: var(--cch-ink);
	font: inherit;
	font-size: 14px;
	-webkit-appearance: none;
	appearance: none;
}
.cchc-find__input::placeholder { color: var(--cch-dim); opacity: 1; }
.cchc-find__input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--cch-accent); }

/* No height of its own and no scroll: a long group simply makes the column
   longer, and the column is what scrolls. */
.cchc-opts {
	list-style: none;
	margin: 0;
	padding: 0 0 12px;
}

.cchc-opt { margin: 0; }
.cchc-opt[hidden] { display: none; }

/* The real checkbox is hidden from sight but not from the keyboard or from a
   screen reader; the square beside the label is drawn, and reads the input's
   state through :checked. */
.cchc-opt__box {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.cchc-opt__label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 2px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.3;
	color: var(--cch-text);
}
.cchc-opt__label:hover { color: var(--cch-ink); }

.cchc-opt__tick {
	flex: 0 0 auto;
	position: relative;
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: var(--cch-raised);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cch-ink) 26%, transparent);
	transition: background-color .12s ease, box-shadow .12s ease;
}
.cchc-opt__tick::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 4px;
	height: 9px;
	border-right: 2px solid #17130E;
	border-bottom: 2px solid #17130E;
	transform: rotate(45deg) scale(0);
	transition: transform .12s ease;
}

.cchc-opt__box:checked + .cchc-opt__label .cchc-opt__tick {
	background: var(--cch-accent);
	box-shadow: none;
}
.cchc-opt__box:checked + .cchc-opt__label .cchc-opt__tick::after { transform: rotate(45deg) scale(1); }
.cchc-opt__box:focus-visible + .cchc-opt__label .cchc-opt__tick { box-shadow: 0 0 0 2px var(--cch-accent); }
.cchc-opt__box:checked + .cchc-opt__label .cchc-opt__name { color: var(--cch-ink); font-weight: 600; }

.cchc-opt__name { flex: 1 1 auto; min-width: 0; }
.cchc-opt__n { flex: 0 0 auto; font-size: 12px; color: var(--cch-dim); font-variant-numeric: tabular-nums; }

.cchc-opts__more { margin: 0 0 12px; font-size: 12px; color: var(--cch-dim); }

/* Only needed when the script is not there to submit on its own. The [hidden]
   rule has to come first and by name: an author display beats the browser's
   own rule for the attribute, so without this the script hides the button and
   it stays on screen. This is the third time that has caught us. */
.cchc-side__apply[hidden] { display: none; }

.cchc-side__apply {
	display: block;
	width: 100%;
	margin-top: 18px;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--cch-accent);
	color: #17130E;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

/* ------------------------------------------------- the bar over the grid ---- */

.cchc-bar { margin-bottom: 20px; }

.cchc-bar__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 18px;
}

.cchc-bar__count { margin: 0; font-size: 14px; color: var(--cch-dim); }

.cchc-sort { display: flex; align-items: center; gap: 8px; }

.cchc-sort__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cch-dim);
}

.cchc .cchc-sort__select {
	height: 38px;
	margin: 0;
	padding: 0 34px 0 14px;
	border: 0;
	border-radius: 999px;
	background-color: var(--cch-raised);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 16px center, right 11px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	box-shadow: inset 0 0 0 1px var(--cch-line);
	color: var(--cch-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.cchc-sort__select:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--cch-accent); }
.cchc-sort__select option { background: var(--cch-raised); color: var(--cch-ink); }

.cchc .cchc-sort__go {
	height: 38px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--cch-accent);
	color: #17130E;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.cchc-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.cchc-off {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cch-accent) 18%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cch-accent) 45%, transparent);
	color: var(--cch-ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.cchc-off:hover { background: color-mix(in srgb, var(--cch-accent) 30%, transparent); }
.cchc-off__x { font-size: 16px; line-height: 1; opacity: .75; }

.cchc-active__clear {
	font-size: 13px;
	font-weight: 600;
	color: var(--cch-dim);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cchc-active__clear:hover { color: var(--cch-ink); }

/* ------------------------------------------------- the column on a phone ---- */

/* Shown by the script, which also turns the column into a panel. Without the
   script the column simply sits above the grid and the Apply button works. */
.cchc-open {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 20px;
	padding: 11px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--cch-raised);
	box-shadow: inset 0 0 0 1px var(--cch-line);
	color: var(--cch-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.cchc-open[hidden] { display: none; }
.cchc-open__n {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--cch-accent);
	color: #17130E;
	font-size: 11px;
	font-weight: 800;
}

/* The panel state, only ever set by the script. */
.cchc.is-panel .cchc-cols__side {
	position: fixed;
	inset: 0;
	z-index: 300;
	max-height: none;
	padding: 18px var(--cchc-gutter) 100px;
	background: var(--cch-ground);
	overflow-y: auto;
}
.cchc.is-panel:not(.is-open) .cchc-cols__side { display: none; }

.cchc.is-panel .cchc-side__apply {
	position: fixed;
	left: var(--cchc-gutter);
	right: var(--cchc-gutter);
	bottom: 18px;
	width: auto;
	margin: 0;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .9);
}

.cchc-panel__close {
	display: none;
	margin-left: auto;
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--cch-ink);
	font: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.cchc.is-panel .cchc-panel__close { display: block; }

/* ---------------------------------------------------------- the tabs ---- */

/* The two halves of a category. A rail under both, and the one you are in
   carries the colour — so the pair reads as one control with a position in it
   rather than as two links that happen to sit side by side. */
.cchc-tabs {
	display: flex;
	gap: 26px;
	margin: 0 0 30px;
	box-shadow: inset 0 -1px 0 var(--cch-line);
}

.cchc-tab {
	position: relative;
	padding: 0 2px 13px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--cch-dim);
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}
.cchc-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: transparent;
	transition: background-color .15s ease;
}
.cchc-tab:hover { color: var(--cch-ink); }
.cchc-tab.is-on { color: var(--cch-ink); }
.cchc-tab.is-on::after { background: var(--cch-accent); }

/* ------------------------------------------------------- style cards ---- */

/* A style card is the drink card's twin: the same width in the row and the
   same picture plate, so a row of styles and a row of drinks keep one rhythm. */
.cchc-style {
	flex: 0 0 116px;
	scroll-snap-align: start;
	color: var(--cch-text);
	text-decoration: none;
}

.cchc-style__img {
	position: relative;
	display: block;
	height: 116px;
	border-radius: 8px;
	overflow: hidden;
	background:
		radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--cchc-c, #C9A96A) 38%, transparent), transparent 70%),
		var(--cch-raised);
	box-shadow: inset 0 0 0 1px var(--cch-line);
}
/* A style card's picture is a mood, not a product shot, so it fills the square
   rather than being fitted inside it. Fitting a portrait photograph into a
   square leaves the plate showing down both sides, and a row of six of those
   is a row of bright rectangles rather than a row of drinks. */
.cchc-style__img.has-photo { box-shadow: none; }
.cchc-style__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* A shade over the photograph, so the name under it always has something to
   sit against whatever the picture happens to be. */
.cchc-style__img.has-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .45));
}
.cchc-style__img .cch-shape {
	position: absolute;
	left: 50%;
	bottom: 7%;
	height: 76%;
	width: auto;
	transform: translateX(-50%);
	/* Nothing about the drawing itself is set here. The homepage's .cch-shape
	   rule already makes it a dark bottle with a lit outline and a glow in the
	   type's colour; the card only has to hand it that colour, which it does
	   through --cch-c in the markup. Setting a colour here instead left the
	   fill untouched and the bottle a silhouette. */
}

.cchc-style__name {
	display: block;
	margin-top: 9px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cch-ink);
}
.cchc-style__n { display: block; margin-top: 1px; font-size: 11px; color: var(--cch-dim); }
.cchc-style:hover .cchc-style__name { color: var(--cch-accent); }

/* The homepage’s sections draw a rule above themselves to separate one row
   from the next. Under the tabs, which already end in a rail, that is a second
   line a few pixels below the first — so the first row here goes without. */
.cchc.is-landing .cch-sec:first-of-type {
	margin-top: 0;
	border-top: 0;
	padding-top: 4px;
}

/* --------------------------------------------------------- headings ---- */

.cchc-row { margin-bottom: 34px; }

.cchc-row__h {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--cch-ink);
}

/* --------------------------------------------------------------- list ---- */

.cchc-all__top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 18px;
	margin-bottom: 16px;
}
.cchc-all__top .cchc-row__h { margin: 0; }

.cchc-sort { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.cchc-sort__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cch-dim);
}
.cchc-sort__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--cch-text);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}
.cchc-sort__link:hover { color: var(--cch-ink); }
.cchc-sort__link.is-on { color: var(--cch-ink); border-bottom-color: var(--cch-accent); }

/* The cards are the homepage's, which sizes them to sit in a scrolling row.
   In a grid they are laid out by the grid instead, so the flex basis has to be
   released or every card keeps the row's width. */
/* Three across on a phone rather than two: twenty-two drinks two abreast is a
   very long page to thumb through, and the card is legible at this width
   because it is the width the homepage's rows already use. */
.cchc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
	gap: 22px 12px;
}
.cchc-grid .cch-card { flex: none; width: auto; }

.cchc-pages {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 34px;
}
.cchc-page {
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--cch-raised);
	box-shadow: inset 0 0 0 1px var(--cch-line);
	color: var(--cch-ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}
.cchc-page:hover { background: color-mix(in srgb, var(--cch-ink) 10%, var(--cch-raised)); }
.cchc-page__of { font-size: 13px; color: var(--cch-dim); font-variant-numeric: tabular-nums; }

.cchc-nothing {
	padding: 40px 0;
	color: var(--cch-text);
	font-size: 16px;
}
.cchc-nothing p { margin: 0 0 12px; }
.cchc-nothing__clear {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--cch-accent);
	color: #17130E;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
}

/* ------------------------------------------------------------ wide up ---- */

@media (min-width: 720px) {
	.cchc-style { flex-basis: calc((100% - 5 * 18px) / 6); }
	.cchc-style__img { height: auto; aspect-ratio: 1 / 1; border-radius: 10px; }
	.cchc-style__name { font-size: 16px; margin-top: 12px; }
	.cchc-style__n { font-size: 13px; }
	.cchc-tabs { gap: 32px; }
	.cchc-tab { font-size: 16px; }

	.cchc { --cchc-gutter: 24px; }
	.cchc-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
	.cchc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 22px; }
	.cchc-row__h { font-size: 24px; }
}

@media (min-width: 1100px) {
	.cchc-hero.has-image { min-height: min(62vh, 560px); }
	.cchc-hero__in { padding: 56px var(--cchc-gutter) 40px; }
	body.chugcheck-category-backdrop .cchc-hero__in { padding-top: 132px; }
	.cchc-hero__count { font-size: 15px; }
	.cchc-hero__intro { font-size: 18px; }
	.cchc-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cchc-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
}


/* ------------------------------------------------ the rest of a group ---- */

.cchc-rest { margin: -4px 0 12px; }

.cchc-rest__open {
	display: inline-block;
	padding: 4px 2px;
	cursor: pointer;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--cch-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cchc-rest__open::-webkit-details-marker { display: none; }
.cchc-rest[open] > .cchc-rest__open { margin-bottom: 4px; }
.cchc-rest .cchc-opts { padding-bottom: 0; }
.cchc-rest__open[hidden] { display: none; }

/* ------------------------------------------------- the count in a tab ---- */

.cchc-tab__n {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	margin-left: 3px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cch-ink) 12%, transparent);
	color: var(--cch-dim);
	font-size: 11px;
	font-weight: 800;
	vertical-align: 1px;
}
.cchc-tab.is-on .cchc-tab__n { background: color-mix(in srgb, var(--cch-accent) 22%, transparent); color: var(--cch-accent); }

/* The featured drink is the first thing under the tabs, so it goes without
   the rule the homepage's sections draw above themselves — the tabs already
   end in one. */
.cchc.is-landing .cchc-feat-sec { margin-top: 0; border-top: 0; padding-top: 8px; }

/* The week's drink is the same block the homepage uses, a little shorter:
   this is a category, not the front door. */
@media (min-width: 720px) {
	.cchc-feat-sec .cch-feat__img { min-height: 320px; }
	.cchc-feat-sec .cch-feat__body { padding: 36px 44px; }
	.cchc-feat-sec .cch-feat__name { font-size: 34px; }
}