/* brewing.com — component styles. Depends on tokens in base.css. */

/* ---------- Type helpers ---------- */
.brewing-eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--copper);
	margin: 0 0 var(--sp-2);
}
.brewing-eyebrow--green { color: var(--hop-green); }
.brewing-meta { font-size: var(--fs-meta); color: var(--ash); margin: 0; }
.brewing-card-title { font-family: var(--font-display); font-size: var(--fs-card-title); font-weight: 500; line-height: 1.3; margin: 0 0 var(--sp-2); }
.brewing-card-small { font-family: var(--font-display); font-size: var(--fs-card-sm); font-weight: 500; margin: 0 0 var(--sp-1); }
.brewing-body-sm { font-size: var(--fs-ui); color: var(--ash); line-height: 1.5; margin: 0; }
.brewing-label-placeholder { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ash); }

/* ---------- Buttons ---------- */
.brewing-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	min-height: 48px; padding: 0 22px; border-radius: var(--radius);
	font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 600;
	border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.brewing-btn--dense { min-height: 44px; }
.brewing-btn--primary { background: var(--copper); color: var(--paper); }
.brewing-btn--primary:hover, .brewing-btn--primary:focus-visible { background: var(--copper-hover); }
.brewing-btn--commerce { background: var(--charcoal); color: var(--paper); }
.brewing-btn--commerce:hover, .brewing-btn--commerce:focus-visible { background: var(--copper); }
.brewing-btn--directory { background: var(--hop-green); color: var(--paper); }
.brewing-btn--directory:hover, .brewing-btn--directory:focus-visible { background: var(--hop-green-hover); }
.brewing-btn--outline { background: transparent; color: var(--charcoal); border: 1.5px solid var(--charcoal); }
.brewing-btn--outline:hover, .brewing-btn--outline:focus-visible { background: var(--charcoal); color: var(--paper); }
.brewing-btn--full { width: 100%; }

.brewing-pill {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-4);
	border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--paper);
	font-size: var(--fs-ui); font-weight: 500; color: var(--charcoal); cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.brewing-pill[aria-pressed="true"], .brewing-pill--active { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }
.brewing-pill:hover:not([aria-pressed="true"]) { border-color: var(--charcoal); }

/* ---------- Cards ---------- */
.brewing-card {
	display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: var(--sp-5); transition: border-color 0.15s ease;
}
a.brewing-card:hover, a.brewing-card:focus-visible { border-color: var(--copper); }

.brewing-editorial-card { padding: 0; overflow: hidden; }
.brewing-editorial-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--parchment); overflow: hidden; }
.brewing-editorial-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brewing-editorial-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.brewing-card-excerpt { font-size: var(--fs-ui); color: var(--ash); line-height: 1.55; margin: var(--sp-2) 0 0; }
.brewing-card-cta { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); font-size: var(--fs-ui); font-weight: 600; color: var(--copper); }
.brewing-card-cta svg { width: 16px; height: 16px; }

/* ---------- Badges ---------- */
.brewing-badge {
	position: absolute; top: var(--sp-3); left: var(--sp-3);
	padding: var(--sp-1) var(--sp-3); border-radius: var(--radius);
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--paper);
}
.brewing-badge--copper { background: var(--copper); }
.brewing-badge--charcoal { background: var(--charcoal); }
.brewing-badge--hop-green { background: var(--hop-green); }

/* ---------- Photo placeholders (dev/staging only; production always uses real images) ---------- */
.brewing-photo-placeholder {
	width: 100%; height: 100%; min-height: 80px;
	background: repeating-linear-gradient(45deg, var(--parchment), var(--parchment) 10px, var(--paper) 10px, var(--paper) 20px);
	display: flex; align-items: center; justify-content: center;
	color: var(--ash); font-family: var(--font-mono); font-size: var(--fs-label);
}
.brewing-photo-placeholder--square { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }

/* ---------- Disclosure ---------- */
.brewing-disclosure-sentence { font-size: var(--fs-meta); color: var(--ash); }
.brewing-disclosure-sentence a { text-decoration: underline; }
.brewing-disclosure-chip {
	display: inline-block; background: var(--parchment); border-radius: var(--radius);
	padding: var(--sp-3) var(--sp-4); font-size: 13px; color: var(--ash);
}
.brewing-disclosure-chip a { text-decoration: underline; color: var(--charcoal); }

/* ---------- Product modules ---------- */
.brewing-product-compact {
	display: grid; grid-template-columns: 88px 1fr auto; gap: var(--sp-4); align-items: center;
	background: var(--paper); border-left: 3px solid var(--copper); border-radius: var(--radius);
	padding: var(--sp-4); margin: var(--sp-5) 0;
}
.brewing-product-compact__media img,
.brewing-product-compact__media .brewing-photo-placeholder { width: 88px; height: 88px; border-radius: var(--radius); object-fit: contain; background: var(--parchment); }
@media (max-width: 640px) {
	.brewing-product-compact { grid-template-columns: 64px 1fr; }
	.brewing-product-compact .brewing-btn { grid-column: 1 / -1; }
}

/* ---------- Single post layout ---------- */
@media (max-width: 900px) {
	.brewing-single-layout { grid-template-columns: 1fr !important; gap: var(--sp-6) !important; }
	.brewing-single-sidebar { order: 2; }
}

/* ---------- Product module, full ---------- */
.brewing-product-full {
	display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-5);
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: var(--sp-5); margin: var(--sp-5) 0;
}
.brewing-product-full__media { display: flex; align-items: flex-start; justify-content: center; }
.brewing-product-full__media img { width: 100%; max-width: 220px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: var(--radius); }
.brewing-product-full__name { font-family: var(--font-display); font-size: var(--fs-section-sm); font-weight: 500; line-height: 1.25; margin: 0 0 var(--sp-4); }
.brewing-product-full__reasons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.brewing-label { font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash); margin: 0 0 var(--sp-1); }
.brewing-label--green { color: var(--green-text); }
.brewing-product-full__action { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.brewing-product-full__price { display: flex; flex-direction: column; }
.brewing-price { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.brewing-price-sub { font-size: var(--fs-eyebrow); color: var(--ash); }
.brewing-product-full__direct { margin: var(--sp-3) 0 0; font-size: var(--fs-meta); }
.brewing-product-full__direct a { text-decoration: underline; }
@media (max-width: 768px) {
	.brewing-product-full { grid-template-columns: 1fr; }
	.brewing-product-full__media img { max-width: 160px; }
	.brewing-product-full__reasons { grid-template-columns: 1fr; gap: var(--sp-4); }
	.brewing-product-full__action { flex-direction: column; align-items: stretch; }
	.brewing-product-full__action .brewing-btn { width: 100%; }
}

.brewing-featured-slot .brewing-product-full,
.brewing-single-sidebar .brewing-product-full { grid-template-columns: 1fr; }
.brewing-featured-slot .brewing-product-full__reasons { grid-template-columns: 1fr; }
.brewing-featured-slot .brewing-product-full__media img { max-width: 180px; margin: 0 auto; }

/* ---------- Article body ---------- */
.brewing-article { max-width: 68ch; }
.brewing-article p { font-size: var(--fs-body); line-height: 1.65; }
.brewing-article h2 { font-size: var(--fs-section-sm); margin: var(--sp-6) 0 var(--sp-3); }
.brewing-article h3 { font-size: var(--fs-card-title); margin: var(--sp-5) 0 var(--sp-2); }
.brewing-article ul, .brewing-article ol { padding-left: var(--sp-5); }
.brewing-article li { margin-bottom: var(--sp-2); }
.brewing-article a { color: var(--copper); text-decoration: underline; }
.brewing-article img { border-radius: var(--radius); }

.brewing-breadcrumb { font-size: var(--fs-meta); color: var(--ash); margin-bottom: var(--sp-3); }
.brewing-breadcrumb a { text-decoration: none; }
.brewing-breadcrumb a:hover { text-decoration: underline; }

.brewing-details-row {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-4);
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	padding: var(--sp-4) 0; margin: var(--sp-5) 0;
}
.brewing-details-row dt { font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash); }
.brewing-details-row dd { margin: var(--sp-1) 0 0; font-size: 17px; }

/* ---------- Filter bar (browse) ---------- */
.brewing-filter-bar {
	position: sticky; top: 0; z-index: 30; background: var(--cream);
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	padding: var(--sp-3) 0; margin-bottom: var(--sp-5);
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.brewing-filter-pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.brewing-filter-pills .brewing-pill { min-height: 40px; font-size: var(--fs-meta); }
.brewing-filter-pills .brewing-pill span { color: var(--ash); margin-left: var(--sp-1); }
.brewing-filter-pills .brewing-pill--active span { color: inherit; opacity: 0.7; }

/* ---------- Brewery finder ---------- */
.brewing-finder-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.brewing-finder-map { height: 620px; border-radius: var(--radius); border: 1px solid var(--line); position: sticky; top: var(--sp-5); background: var(--green-tint); }
.brewing-finder-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.brewing-brewery-card { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); }
.brewing-brewery-card__photo { width: 96px; height: 96px; border-radius: var(--radius); background: var(--parchment); display: flex; align-items: center; justify-content: center; color: var(--ash); font-size: 28px; }
.brewing-brewery-card h3 { font-family: var(--font-display); font-size: var(--fs-card-title); margin: 0 0 var(--sp-1); }
.brewing-tag-chip { display: inline-block; background: var(--green-tint); color: var(--green-text); border-radius: var(--radius-pill); padding: 2px var(--sp-3); font-size: var(--fs-eyebrow); font-weight: 600; margin-right: var(--sp-1); }
.brewing-brewery-card__links { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-meta); }
.brewing-brewery-card__links a { color: var(--green-text); text-decoration: underline; font-weight: 600; }
@media (max-width: 900px) {
	.brewing-finder-layout { grid-template-columns: 1fr; }
	.brewing-finder-map { height: 340px; position: static; order: -1; }
	.brewing-brewery-card { grid-template-columns: 64px 1fr; }
	.brewing-brewery-card__photo { width: 64px; height: 64px; font-size: 22px; }
}

/* ---------- Email capture ---------- */
.brewing-email-form { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.brewing-email-form input[type="email"] {
	flex: 1; min-width: 0; height: 48px; padding: 0 var(--sp-4);
	border: 1px solid var(--input-border); border-radius: var(--radius);
	font-size: var(--fs-ui); font-family: var(--font-body); background: var(--paper); color: var(--charcoal);
}
.brewing-email-form__status { font-size: var(--fs-meta); margin-top: var(--sp-2); min-height: 1.2em; }
.brewing-email-form__status[data-state="ok"] { color: var(--hop-green); }
.brewing-email-form__status[data-state="error"] { color: var(--copper); }
@media (max-width: 480px) { .brewing-email-form { flex-direction: column; } }

/* ---------- Header ---------- */
.brewing-site-header { background: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.brewing-site-header__bar {
	max-width: var(--content-max); margin: 0 auto; padding: var(--sp-3) var(--sp-5);
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
.brewing-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--charcoal); }
.brewing-wordmark span { color: var(--copper); }
.brewing-primary-nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.brewing-primary-nav a {
	display: inline-flex; align-items: center; height: 44px; padding: 0 var(--sp-3);
	border-radius: var(--radius); font-size: var(--fs-ui); font-weight: 500; color: var(--charcoal);
}
.brewing-primary-nav a:hover, .brewing-primary-nav a:focus-visible { background: var(--parchment); }
.brewing-header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.brewing-icon-btn {
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); color: var(--charcoal);
}
.brewing-icon-btn:hover, .brewing-icon-btn:focus-visible { border-color: var(--copper); }
.brewing-menu-toggle { display: none; }
.brewing-mobile-menu { display: none; }

@media (max-width: 768px) {
	.brewing-primary-nav { display: none; }
	.brewing-menu-toggle { display: inline-flex; }
	.brewing-mobile-menu.is-open { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
	.brewing-mobile-menu a { display: flex; align-items: center; height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-ui); border-bottom: 1px solid var(--line); }
}

/* ---------- Footer ---------- */
.brewing-site-footer { background: var(--parchment); border-top: 1px solid var(--line); padding-block: var(--sp-7); }
.brewing-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-6); }
.brewing-footer-grid h4 { font-family: var(--font-body); font-size: var(--fs-meta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ash); margin-bottom: var(--sp-3); }
.brewing-footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.brewing-footer-grid a { font-size: var(--fs-ui); color: var(--charcoal); }
.brewing-footer-grid a:hover { color: var(--copper); }
.brewing-footer-legal { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-meta); color: var(--ash); }
@media (max-width: 768px) { .brewing-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .brewing-footer-grid { grid-template-columns: 1fr; } }

/* ---------- Homepage sections (inline 2-col grids collapse to 1 col on mobile) ---------- */
@media (max-width: 768px) {
	.brewing-hero { grid-template-columns: 1fr !important; }
	.brewing-hero form { flex-direction: column; }
	.brewing-hero form button { width: 100%; }
	.brewing-container[style*="grid-template-columns:1.4fr"],
	.brewing-container[style*="grid-template-columns:1.2fr"] {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- Editor placeholder (wp-admin only) ---------- */
.brewing-editor-placeholder {
	border: 1px dashed var(--input-border); border-radius: var(--radius); padding: var(--sp-4);
	background: var(--parchment); font-family: var(--font-body); font-size: var(--fs-ui);
}

/* ---------- Recipe card ---------- */
.brewing-recipe-card {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: var(--sp-6); margin: var(--sp-7) 0;
}
.brewing-recipe-card__head {
	display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4);
	flex-wrap: wrap; border-bottom: 2px solid var(--charcoal); padding-bottom: var(--sp-4);
}
.brewing-recipe-card__head h2 { font-size: var(--fs-section); margin: 0 0 var(--sp-2); }
.brewing-recipe-card__body {
	display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--sp-6); margin-top: var(--sp-5);
}
.brewing-ingredients, .brewing-steps { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.brewing-ingredients li {
	display: grid; grid-template-columns: 72px 1fr; gap: var(--sp-3);
	padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-ui);
}
.brewing-ingredients .qty { font-weight: 600; font-variant-numeric: tabular-nums; }
.brewing-steps li {
	display: grid; grid-template-columns: 36px 1fr; gap: var(--sp-3);
	margin-bottom: var(--sp-4); font-size: var(--fs-body); line-height: 1.6;
}
.brewing-steps .n { font-family: var(--font-display); font-size: 22px; color: var(--copper); line-height: 1.2; }
.brewing-recipe-card__notes { margin-top: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.brewing-recipe-card__notes ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); font-size: var(--fs-ui); }
.brewing-recipe-card__notes li { margin-bottom: var(--sp-2); }
@media (max-width: 768px) {
	.brewing-recipe-card { padding: var(--sp-4); }
	.brewing-recipe-card__body { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* Comparison table — the at-a-glance summary at the top of a buying guide, so
   the reader can compare picks without scrolling through every product block. */
.brewing-comparison { margin: var(--sp-7) 0; }
.brewing-comparison__caption {
	font-family: var(--font-display); font-size: var(--fs-section-sm);
	margin-bottom: var(--sp-4);
}
/* Only the table scrolls sideways on a narrow screen, never the page. */
.brewing-comparison__scroll {
	overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--paper);
}
.brewing-comparison__table {
	width: 100%; border-collapse: collapse; font-size: var(--fs-ui);
	min-width: 640px; /* below this the columns stop being readable, so scroll */
}
.brewing-comparison__table th,
.brewing-comparison__table td {
	text-align: left; padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--line); vertical-align: top;
}
.brewing-comparison__table thead th {
	font-family: var(--font-body); font-size: var(--fs-label);
	letter-spacing: .08em; text-transform: uppercase; color: var(--ash);
	border-bottom: 2px solid var(--charcoal); white-space: nowrap;
}
.brewing-comparison__table tbody th {
	font-family: var(--font-display); font-size: var(--fs-card-sm);
	font-weight: 500; color: var(--charcoal);
}
.brewing-comparison__table tbody tr:last-child th,
.brewing-comparison__table tbody tr:last-child td { border-bottom: 0; }
.brewing-comparison__table tbody tr:nth-child(even) { background: var(--cream); }
.brewing-comparison__price-col { white-space: nowrap; font-variant-numeric: tabular-nums; }
.brewing-comparison__note {
	font-size: var(--fs-meta); color: var(--ash); margin: var(--sp-3) 0 0;
}
@media (max-width: 768px) {
	.brewing-comparison__table th,
	.brewing-comparison__table td { padding: var(--sp-2) var(--sp-3); }
}

/* Equipment list — what a method requires, kept visibly separate from what
   merely makes it nicer, so a beginner can see the shortest path to a batch. */
.brewing-equipment {
	background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
	padding: var(--sp-5) var(--sp-6); margin: var(--sp-7) 0;
}
.brewing-equipment__title { font-size: var(--fs-section-sm); margin: 0 0 var(--sp-4); }
.brewing-equipment__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.brewing-equipment__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.brewing-equipment__list li {
	padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
	font-size: var(--fs-ui); line-height: 1.5;
}
.brewing-equipment__list li:last-child { border-bottom: 0; }
.brewing-equipment__list a { color: var(--copper); text-decoration: underline; text-underline-offset: 2px; }
.brewing-equipment__list a:hover { color: var(--copper-hover); }
.brewing-equipment__note { display: block; color: var(--ash); font-size: var(--fs-meta); }
@media (max-width: 768px) {
	.brewing-equipment { padding: var(--sp-4); }
	.brewing-equipment__cols { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* Seasonal hub list — curated in Appearance > Menus, absent entirely when the
   menu is empty, because out of season the right amount of chrome is none. */
.brewing-seasonal {
	border-left: 3px solid var(--copper); padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
	margin: var(--sp-7) 0;
}
.brewing-seasonal__title { font-size: var(--fs-section-sm); margin: 0 0 var(--sp-2); }
.brewing-seasonal__intro { color: var(--ash); font-size: var(--fs-ui); margin: 0 0 var(--sp-4); }
.brewing-seasonal__list { list-style: none; margin: 0; padding: 0; }
.brewing-seasonal__list li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.brewing-seasonal__list li:last-child { border-bottom: 0; }
.brewing-seasonal__list a {
	font-family: var(--font-display); font-size: var(--fs-card-sm); color: var(--charcoal);
	text-decoration: none;
}
.brewing-seasonal__list a:hover { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }
.brewing-seasonal__note { display: block; color: var(--ash); font-size: var(--fs-meta); }

/* 404 — offers a route back into the directory rather than a bare apology. */
.brewing-404 { padding-block: var(--sp-7); max-width: 640px; }
.brewing-404 h1 { font-size: var(--fs-display); margin: 0 0 var(--sp-4); }
.brewing-404 .brewing-lede { font-size: var(--fs-body); color: var(--ash); margin: 0 0 var(--sp-6); }
.brewing-404__links { list-style: none; margin: 0 0 var(--sp-7); padding: 0; }
.brewing-404__links li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.brewing-404__links a {
	font-family: var(--font-display); font-size: var(--fs-card-sm);
	color: var(--charcoal); text-decoration: none;
}
.brewing-404__links a:hover { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }
.brewing-404__search { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-end; }
.brewing-404__search label { flex-basis: 100%; }
.brewing-404__search input {
	flex: 1 1 220px; padding: var(--sp-3); border: 1px solid var(--input-border);
	border-radius: var(--radius); font-size: var(--fs-ui); background: var(--paper);
}

/* Browse the directory — the finder's outbound paths into the 12,882 listings.
   Counts are right-aligned so the column reads as a ranking at a glance. */
.brewing-browse { padding-block: var(--sp-7); border-top: 1px solid var(--line); }
.brewing-browse h2 { font-size: var(--fs-section); margin: 0 0 var(--sp-2); }
.brewing-browse > .brewing-meta { margin: 0 0 var(--sp-6); }
.brewing-browse h3 { margin: var(--sp-6) 0 var(--sp-3); }
.brewing-browse__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-1) var(--sp-5);
}
.brewing-browse__grid a {
	display: flex; justify-content: space-between; gap: var(--sp-3);
	padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
	color: var(--charcoal); text-decoration: none; font-size: var(--fs-ui);
}
.brewing-browse__grid a:hover { color: var(--copper); }
.brewing-browse__grid span { color: var(--ash); font-variant-numeric: tabular-nums; }
.brewing-browse p:last-child { margin-top: var(--sp-6); }

/* Gear index — the recommendations as a buyable list rather than as paragraphs
   buried in articles. Price column is fixed-width so the column scans. */
.brewing-gear__tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-6) 0 var(--sp-5); }
.brewing-pill--on { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }
.brewing-gear__list { list-style: none; margin: 0; padding: 0; }
.brewing-gear__item {
	display: grid; grid-template-columns: 120px 1fr 200px; gap: var(--sp-5);
	padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); align-items: start;
}
.brewing-gear__item:last-child { border-bottom: 0; }
.brewing-gear__media img { width: 120px; height: 120px; object-fit: contain; }
.brewing-gear__body h2 { font-size: var(--fs-card-title); margin: 0 0 var(--sp-2); }
.brewing-gear__body .brewing-body-sm { margin: 0 0 var(--sp-2); }
.brewing-gear__caveat { font-size: var(--fs-meta); color: var(--ash); margin: 0 0 var(--sp-2); }
.brewing-gear__buy { text-align: right; }
.brewing-gear__price {
	font-family: var(--font-display); font-size: var(--fs-section-sm);
	margin: 0 0 var(--sp-3); font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) {
	.brewing-gear__item { grid-template-columns: 88px 1fr; gap: var(--sp-4); }
	.brewing-gear__media img { width: 88px; height: 88px; }
	.brewing-gear__buy { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: var(--sp-4); }
	.brewing-gear__price { margin: 0; }
}

/* Category header. Was an inline two-column grid on a class with no CSS, so it
   never stacked: at 390px the search form pushed the page body to 573px. */
.brewing-cat-head {
	display: grid; grid-template-columns: 1.4fr 1fr;
	gap: var(--sp-6); align-items: end;
}
.brewing-cat-head__form { display: flex; gap: var(--sp-2); }
.brewing-cat-head__input {
	flex: 1;
	/* Without this, flexbox's min-width:auto refuses to shrink the field below
	   the width of its own placeholder text. */
	min-width: 0;
	height: 48px; padding: 0 var(--sp-4);
	border: 1px solid var(--input-border); border-radius: var(--radius);
	background: var(--paper); font-size: var(--fs-ui);
}
@media (max-width: 768px) {
	.brewing-cat-head { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* Gear rows: the price and the call to action share a line on a phone, and the
   button's label is long enough to push past the viewport on its own. */
@media (max-width: 860px) {
	.brewing-gear__buy { flex-wrap: wrap; }
	.brewing-gear__buy .brewing-btn { min-width: 0; }
}

/* Brewery page layout. The two-column grid was an inline style on a class with
   no CSS, so the sidebar never stacked and sat half off a 390px screen. These
   are the pages that carry the site's search traffic, so they have to be right
   on a phone first. */
.brewery-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-top: 10px; }
@media (max-width: 860px) {
	.brewery-grid { grid-template-columns: 1fr; }
}
/* Leaflet draws tiles larger than the viewport and relies on the container to
   clip them. Without this the map pushed the whole page sideways. */
.leaflet-container { max-width: 100%; overflow: hidden; }

/* Sourcing links — a named ingredient in prose that you can actually go and
   get. Dotted underline so it reads as a reference rather than as navigation,
   and so it is visibly different from the commerce buttons. */
.brewing-sourcing-link {
	color: var(--copper);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}
.brewing-sourcing-link:hover { color: var(--copper-hover); text-decoration: underline solid; }

/* Article hero. It was rendering at its natural height — 872px on a 1280px
   screen — which is most of a viewport of stock photography sitting between
   the headline and the picks. On a buying guide the reader came for the picks.
   Capped to a banner, cropped from the centre. */
.brewing-article-hero { margin: var(--sp-6) 0 0; }
.brewing-article-hero img {
	display: block; width: 100%; height: auto;
	max-height: 380px; object-fit: cover; object-position: center;
	border-radius: var(--radius);
}
@media (max-width: 768px) {
	.brewing-article-hero img { max-height: 220px; }
}

/* Amazon display requirements. The price stamp and the link-level disclosure
   have to be adjacent to the price and the link respectively, and they have to
   be noticeable rather than hidden, so they are quiet but never tucked away. */
.brewing-price-note,
.brewing-paid-link {
	display: block;
	font-size: 12px;
	color: var(--ash);
	line-height: 1.4;
	margin-top: var(--sp-1);
}
.brewing-price-note a { color: var(--ash); text-decoration: underline; text-underline-offset: 2px; }
.brewing-price-note a:hover { color: var(--copper); }
.brewing-product-compact__buy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.brewing-comparison__price-col .brewing-price-note,
.brewing-comparison__price-col .brewing-paid-link { white-space: normal; max-width: 150px; }

.brewing-amazon-notice {
	border-top: 1px solid var(--line);
	padding-block: var(--sp-5);
	font-size: var(--fs-meta);
	color: var(--ash);
}
.brewing-amazon-notice p { margin: 0 0 var(--sp-2); }
.brewing-as-is { font-size: 11px; letter-spacing: .01em; }

/* Directory search. Present on every listing page, because the directory is
   where the traffic lands and making someone navigate elsewhere to narrow it
   down is the extra click this redesign is meant to remove. */
.brewery-search { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-2); }
.brewery-search__input {
	flex: 1 1 240px;
	min-width: 0;            /* flexbox otherwise refuses to shrink past the placeholder */
	height: 48px; padding: 0 var(--sp-4);
	border: 1px solid var(--input-border); border-radius: var(--radius);
	background: var(--paper); font-size: var(--fs-ui); color: var(--charcoal);
}
.brewery-search__note { font-size: 13px; color: var(--ash); margin: 0 0 var(--sp-5); }
@media (max-width: 560px) {
	.brewery-search .brewing-btn { flex: 1 1 auto; }
}

/* Ordinary pages. A document, not a listing: one readable column, nothing
   competing with the text. */
.brewing-page { max-width: 68ch; }
.brewing-page > header { margin-bottom: var(--sp-6); }
.brewing-page h1 { font-size: var(--fs-display); margin: var(--sp-3) 0 0; }
.brewing-page .brewing-lede { font-size: 18px; color: var(--ash); margin: var(--sp-3) 0 0; }
.brewing-page .brewing-article h2 {
	font-size: var(--fs-section-sm); margin: var(--sp-7) 0 var(--sp-3);
	padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
}
.brewing-page .brewing-article h3 { font-size: var(--fs-card-title); margin: var(--sp-6) 0 var(--sp-2); }
.brewing-page .brewing-article p { margin: 0 0 var(--sp-4); }
.brewing-page .brewing-article ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.brewing-page .brewing-article li { margin-bottom: var(--sp-2); }
.brewing-page .brewing-article a { color: var(--copper); text-decoration: underline; text-underline-offset: 2px; }