/**
 * Curatery shared components — the rebrand.
 *
 * Small pieces several redesigned pages use, from the mockup's browse.css: the
 * red eyebrow label, breadcrumbs, a full-width section with a centered column,
 * a section heading with a link beside it, and filter chips. Loaded on every
 * page; uses the --cur- tokens from tokens.css.
 */

/* ── Eyebrow: the small red label above a heading ─────────────── */

.cur-eyebrow {
	margin: 0;
	color: var(--cur-tomato);
	font: 700 0.72rem/1.5 var(--cur-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ── Breadcrumbs ───────────────────────────────────────────── */

.cur-crumbs {
	padding: 1.2rem var(--cur-gutter);
	color: var(--cur-ink-muted);
	font: 700 0.7rem/1.5 var(--cur-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cur-crumbs__inner {
	max-width: var(--cur-max-width);
	margin: 0 auto;
}

.cur-crumbs a {
	border-bottom: 1px solid currentColor;
	color: inherit;
	text-decoration: none;
}

.cur-crumbs a:hover,
.cur-crumbs a:focus-visible {
	color: var(--cur-tomato);
}

/* ── Sections ──────────────────────────────────────────────── */

.cur-section {
	padding: 4.8rem var(--cur-gutter) 5.5rem;
}

.cur-section__inner {
	max-width: var(--cur-max-width);
	margin: 0 auto;
}

.cur-section-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 2rem;
	margin-bottom: 1.8rem;
}

.cur-section-head h2 {
	margin: 0.35rem 0;
	color: inherit;
	font: 400 2.8rem/1 var(--cur-serif);
	letter-spacing: -0.02em;
}

.cur-section-head p {
	max-width: 470px;
	margin: 0;
	color: var(--cur-ink-muted);
}

/* ── Tiny link: "Browse all goods →" ───────────────────────── */

.cur-tiny-link {
	border-bottom: 1px solid currentColor;
	color: inherit;
	font: 700 0.72rem/1.4 var(--cur-sans);
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.cur-tiny-link:hover,
.cur-tiny-link:focus-visible {
	color: var(--cur-tomato);
}

/* ── Chips: filter buttons ─────────────────────────────────── */

.cur-chip {
	min-height: 0;
	margin: 0;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--cur-line);
	border-radius: 24px;
	background: var(--cur-paper);
	box-shadow: none;
	color: var(--cur-ink);
	font: 700 0.7rem/1.2 var(--cur-sans);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.cur-chip:hover {
	border-color: var(--cur-ink);
	background: var(--cur-paper);
	color: var(--cur-ink);
}

.cur-chip[aria-pressed="true"] {
	border-color: var(--cur-green);
	background: var(--cur-green);
	color: #ffffff;
}

/* A chip can also be a link to the current choice. */
a.cur-chip {
	display: inline-block;
	text-decoration: none;
}

.cur-chip[aria-current="page"] {
	border-color: var(--cur-green);
	background: var(--cur-green);
	color: #ffffff;
}

.cur-chip:focus-visible {
	outline: 2px solid var(--cur-ink);
	outline-offset: 2px;
}

/* ── Scallop: the paper edge hanging over a colored hero ───── */

.cur-scallop {
	position: relative;
	z-index: 2;
	height: 22px;
	margin-top: -21px;
	background: radial-gradient(circle at 22px -2px, transparent 22px, var(--cur-paper) 23px);
	background-size: 44px 23px;
}

/* ── Page hero: peach, with a picture on the right ─────────── */

.cur-page-hero {
	position: relative;
	overflow: hidden;
	padding: 4.8rem var(--cur-gutter) 4.4rem;
	background: var(--cur-peach);
	color: var(--cur-ink);
}

.cur-page-hero__image {
	position: absolute;
	top: 0;
	right: 0;
	width: 45%;
	height: 100%;
	object-fit: cover;
	opacity: 0.68;
}

.cur-page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--cur-max-width);
	margin: 0 auto;
}

.cur-page-hero .cur-page-hero__title {
	max-width: 760px;
	margin: 0.5rem 0 1rem;
	color: inherit;
	font: 400 clamp(3.7rem, 7vw, 7rem)/0.9 var(--cur-serif);
	letter-spacing: -0.045em;
}

.cur-page-hero__intro {
	max-width: 580px;
	margin: 0;
	font-size: 1.05rem;
}

.cur-page-hero__count {
	display: inline-block;
	margin: 1.4rem 0 0;
	padding: 0.45rem 0.75rem;
	border-radius: 20px;
	background: var(--cur-paper);
	font: 700 0.72rem/1.5 var(--cur-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ── Filter panel: chips on the left, a sort menu on the right ── */

.cur-filter-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 2.2rem;
	padding: 1.2rem 1.3rem;
	border: 1px solid rgba(36, 27, 22, 0.1);
	border-radius: var(--cur-radius-panel);
	background: var(--cur-butter);
}

.cur-filter-panel__chips,
.cur-filter-panel__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
}

.cur-select {
	min-height: 0;
	height: auto;
	padding: 0.7rem 2.2rem 0.7rem 1rem;
	border: 1px solid var(--cur-line);
	border-radius: 26px;
	background-color: var(--cur-cream);
	box-shadow: none;
	color: var(--cur-ink);
	font: 700 0.8rem/1.2 var(--cur-sans);
}

.cur-select:focus {
	border-color: var(--cur-mustard);
	outline: 2px solid var(--cur-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(237, 189, 67, 0.35);
}

.cur-apply {
	min-height: 0;
	padding: 0.7rem 1.1rem;
	border: 0;
	border-radius: 26px;
	background: var(--cur-ink);
	color: #ffffff;
	font: 700 0.72rem/1.2 var(--cur-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.cur-apply:hover,
.cur-apply:focus-visible {
	background: var(--cur-tomato);
	color: #ffffff;
}

@media (max-width: 950px) {
	.cur-page-hero__image {
		width: 55%;
		opacity: 0.35;
	}
}

@media (max-width: 650px) {
	.cur-page-hero {
		padding: 3.5rem 6vw;
	}

	.cur-page-hero__image {
		display: none;
	}

	.cur-page-hero .cur-page-hero__title {
		font-size: 3.7rem;
	}

	.cur-filter-panel,
	.cur-filter-panel__tools {
		align-items: stretch;
		flex-direction: column;
	}
}

/* ── Pagination ────────────────────────────────────────────── */

.cur-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.45rem;
	margin-top: 3rem;
}

.cur-pagination a,
.cur-pagination span {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--cur-line);
	border-radius: 50%;
	background: var(--cur-paper);
	color: var(--cur-ink);
	font: 700 0.8rem/1 var(--cur-sans);
	text-decoration: none;
}

.cur-pagination a:hover,
.cur-pagination a:focus-visible {
	border-color: var(--cur-ink);
	color: var(--cur-ink);
}

.cur-pagination [aria-current="page"] {
	border-color: var(--cur-tomato);
	background: var(--cur-tomato);
	color: #ffffff;
}

/* ── Report: the small flag link and form on a collection ─────── */

.cur-report {
	margin-top: 1.2rem;
	font-size: 0.78rem;
}

.cur-report summary {
	display: inline-block;
	color: var(--cur-ink-muted);
	border-bottom: 1px solid currentColor;
	cursor: pointer;
}

.cur-report summary:hover,
.cur-report summary:focus-visible {
	color: var(--cur-tomato);
}

.cur-report form {
	display: grid;
	gap: 0.5rem;
	max-width: 420px;
	margin-top: 0.8rem;
}

.cur-report label span {
	color: var(--cur-ink-muted);
}

.cur-report textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--cur-line);
	border-radius: 8px;
	background: var(--cur-paper);
	color: var(--cur-ink);
	font: 0.85rem/1.5 var(--cur-sans);
}

.cur-report button {
	justify-self: start;
	min-height: 0;
	padding: 0.6rem 1rem;
	border: 0;
	border-radius: 20px;
	background: var(--cur-ink);
	color: #ffffff;
	font: 700 0.7rem/1.2 var(--cur-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.cur-report--sent {
	color: var(--cur-green);
	font-weight: 700;
}

.cur-report__rules {
	margin: 0;
	color: var(--cur-ink-muted);
}

.cur-report__rules a {
	color: inherit;
	text-decoration: underline;
}

/* Under a review or a comment, where it sits closer to the text. */
.glsr-review .cur-report,
.nook-comment__panel > .cur-report {
	display: block;
	margin-top: 0.6rem;
}

@media (max-width: 650px) {
	.cur-section {
		padding: 3.5rem 6vw 4rem;
	}

	.cur-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.cur-section-head h2 {
		font-size: 2.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cur-chip {
		transition: none;
	}
}


/* ── Advert slots placed in the page flow (Curatery Core's 073) ── */
.cur-page-ad,
.cur-home__ad {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	text-align: center;
}

/* Nothing to show — no advert set, or a Club member or admin, who see none
   (Curatery Core's 073). Without this the empty slot leaves a pale strip in
   the page's own paper color, which at the foot of a page is the backdrop the
   footer's scallops hang over, instead of the last section's color. */
.cur-page-ad:empty,
.cur-home__ad:empty {
	display: none;
}

/* The one above the whole header. */
.cur-header-ad {
	padding: 0.6rem var(--cur-gutter);
	background: var(--cur-paper);
	text-align: center;
}

.cur-header-ad .curatery-ad-preview {
	margin: 0 auto;
}