/* Tea collection */

.collection {
	position: relative;
	z-index: var(--z-content);
	padding-bottom: clamp(48px, 8vw, 96px);
}

/* Controls */
.collection__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: clamp(24px, 4vw, 40px);
}

.collection__meta {
	display: flex;
	align-items: center;
	gap: 20px;
}

.collection__count {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
}
.collection__count b { color: var(--gold-deep); font-weight: 600; }

.collection__clear {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--burgundy);
	border-bottom: 1px solid rgba(114, 33, 33, 0.4);
	padding-bottom: 2px;
	transition: border-color 0.2s;
}
.collection__clear:hover { border-color: var(--burgundy); }

/* Layout */
.collection__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 0;
	margin-top: clamp(18px, 3vw, 26px);
	align-items: start;
}

/* Facets */
.facets__form { display: flex; flex-direction: column; }
.facets__group {
	margin: 0 0 22px;
	padding: 0 0 4px;
	border: 0;
}
.facets__legend {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	margin-bottom: 14px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
}
.facets__legend::before {
	content: "";
	width: 20px;
	height: 1px;
	background: var(--gold);
}
.facets__list { display: flex; flex-wrap: wrap; gap: 8px; }

.facet {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid rgba(20, 16, 11, 0.18);
	min-height: 44px;
	font-size: 14px;
	line-height: 1.45;
	letter-spacing: 0.04em;
	color: var(--ink-mute);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
	user-select: none;
}
.facet:hover { border-color: var(--ink); color: var(--ink); }
.facet__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.facet__count {
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--gold-deep);
}
.facet:has(.facet__input:checked) {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--gold-light);
}
.facet:has(.facet__input:checked) .facet__count { color: var(--gold-light); }
.facet:has(.facet__input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.facets__reset {
	align-self: flex-start;
	margin-top: 4px;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-deep);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.facets__reset:hover { border-color: var(--gold-deep); }

/* Results */
.collection__items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: clamp(28px, 5vw, 48px);
}

/* Tea card */
.tea-card {
	position: relative;
	transition: opacity 0.3s ease;
}
.tea-card[hidden] { display: none; }

.tea-card__link {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr auto auto;
	grid-template-areas: "stage stage" "body body" "origin formats" "cta cta";
	height: 100%;
	border: 1px solid rgba(20, 16, 11, 0.16);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(251, 246, 236, 0.55) 100%);
	transition: transform 0.4s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}
.tea-card__link:hover {
	transform: translateY(-6px);
	border-color: var(--gold);
	box-shadow: 0 30px 56px rgba(60, 40, 15, 0.12);
	color: inherit;
}

/* Packshot fan */
.tea-card__stage {
	grid-area: stage;
	position: relative;
	height: 256px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: radial-gradient(circle at 50% 48%, rgba(217, 168, 67, 0.12), transparent 66%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.tea-card__rings {
	position: absolute;
	inset: 0;
	background: repeating-radial-gradient(circle at center, transparent 0 24px, rgba(20, 16, 11, 0.04) 24px 25px);
	-webkit-mask-image: radial-gradient(circle, #000 46%, transparent 76%);
	mask-image: radial-gradient(circle, #000 46%, transparent 76%);
	animation: tea-rings-spin 120s linear infinite;
}
@keyframes tea-rings-spin { to { transform: rotate(360deg); } }

.tea-card__fan {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
}
.tea-card__pack {
	position: absolute;
	width: max-content;
	left: 50%;
	top: 50%;
	height: 76%;
	--mid: calc((var(--n) - 1) / 2);
	--off: calc(var(--i) - var(--mid));
	transform: translate(-50%, -50%);
	transform-origin: 50% 60%;
	z-index: calc(20 - var(--i));
	transition: transform 0.8s var(--ease-out), opacity 0.6s ease;
	filter: drop-shadow(0 20px 26px rgba(60, 40, 15, 0.22));
	will-change: transform, opacity;
}
.tea-card__pack img { height: 100%; width: auto; }
.tea-card__pack[hidden] { display: none; }
.tea-card__pack:not(.is-primary) { opacity: 0; }
.tea-card__link:hover .tea-card__pack {
	opacity: 1;
	transform: translate(-50%, -50%)
		translateX(calc(var(--off) * 96px))
		translateY(calc(var(--off) * var(--off) * -5px))
		rotate(calc(var(--off) * 5deg));
}

/* Card text */
.tea-card__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px 24px 0;
	border-top: 1px solid rgba(20, 16, 11, 0.1);
}
.tea-card__types {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 12px;
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold-deep);
}
.tea-card__type + .tea-card__type::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 10px 2px;
	background: var(--gold);
	transform: rotate(45deg);
}
.tea-card__name {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(23px, 2.6vw, 26px);
	letter-spacing: 0.03em;
	line-height: 1.08;
	color: var(--ink);
}
.tea-card__desc {
	margin: 9px 0 0;
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--ink-soft);
}

/* Card metadata */
.tea-card__origin {
	grid-area: origin;
	display: flex;
	align-items: center;
	margin-top: 18px;
	padding: 13px 0 14px 24px;
	border-top: 1px solid rgba(20, 16, 11, 0.12);
	font-size: var(--fs-meta);
	color: var(--ink-mute);
}
.tea-card__origin:empty::before { content: "—"; color: var(--ink-faint); }
.tea-card__formats {
	grid-area: formats;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 18px;
	padding: 13px 24px 14px 12px;
	border-top: 1px solid rgba(20, 16, 11, 0.12);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

/* Card link */
.tea-card__cta {
	grid-area: cta;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 13px 24px 15px;
	border-top: 1px solid rgba(20, 16, 11, 0.12);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
	transition: background 0.25s, color 0.25s;
}
.tea-card__arrow { color: var(--gold-deep); transition: transform 0.25s; }
.tea-card__link:hover .tea-card__cta { background: rgba(168, 126, 48, 0.06); color: var(--gold-deep); }
.tea-card__link:hover .tea-card__arrow { transform: translateX(4px); }

/* Empty state */
.collection__empty {
	padding: 80px 0;
	text-align: center;
	color: var(--ink-mute);
}

/* List mode */
.collection[data-mode="list"] .collection__items {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 14px;
}
.collection[data-mode="list"] .tea-card__link {
	grid-template-columns: 68px 1fr auto 28px;
	grid-template-rows: auto auto;
	grid-template-areas: "stage body formats cta" "stage body origin cta";
	column-gap: 12px;
	align-items: center;
	padding: 20px 6px;
	border: 0;
	border-bottom: 1px solid rgba(20, 16, 11, 0.08);
	background: transparent;
}
.collection[data-mode="list"] .tea-card:first-child .tea-card__link {
	border-top: 1px solid rgba(20, 16, 11, 0.16);
}
.collection[data-mode="list"] .tea-card__link:hover {
	transform: none;
	box-shadow: none;
	border-color: rgba(20, 16, 11, 0.08);
	background: transparent;
}
.collection[data-mode="list"] .tea-card:first-child .tea-card__link:hover {
	border-top-color: rgba(20, 16, 11, 0.16);
}

.collection[data-mode="list"] .tea-card__stage {
	width: 68px;
	height: 80px;
	background: none;
	-webkit-mask-image: none;
	mask-image: none;
}
.collection[data-mode="list"] .tea-card__rings { display: none; }
.collection[data-mode="list"] .tea-card__pack {
	height: 90%;
	transition: transform 0.4s var(--ease-out);
}
.collection[data-mode="list"] .tea-card__pack:not(.is-primary) { display: none; }
.collection[data-mode="list"] .tea-card__link:hover .tea-card__pack {
	transform: translate(-50%, -50%) scale(1.07) translateY(-2px);
}

.collection[data-mode="list"] .tea-card__body {
	margin-left: 6px;
	padding: 0;
	border: 0;
}
.collection[data-mode="list"] .tea-card__types { display: none; }
.collection[data-mode="list"] .tea-card__name {
	align-self: stretch;
	display: flex;
	align-items: baseline;
	font-size: 21px;
	line-height: 1.1;
}

/* List-row leader */
.collection[data-mode="list"] .tea-card__name::after {
	content: "";
	flex: 1;
	min-width: 36px;
	margin: 0 2px 0 14px;
	border-bottom: 1px dotted rgba(20, 16, 11, 0.3);
	transform: translateY(-5px);
	transition: border-color 0.3s;
}
.collection[data-mode="list"] .tea-card__link:hover .tea-card__name::after {
	border-color: rgba(168, 126, 48, 0.65);
}
.collection[data-mode="list"] .tea-card__desc {
	margin-top: 6px;
	font-family: var(--font-slogan);
	font-style: italic;
	font-weight: 500;
	font-size: var(--fs-slogan-sm);
	color: var(--ink-soft);
}

.collection[data-mode="list"] .tea-card__formats {
	display: block;
	align-self: start;
	margin: 0;
	padding: 5px 0 0;
	border: 0;
	letter-spacing: 0.16em;
	text-align: right;
}
.collection[data-mode="list"] .tea-card__origin {
	display: block;
	align-self: start;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	text-align: right;
}
.collection[data-mode="list"] .tea-card__cta {
	justify-self: end;
	margin: 0;
	padding: 0;
	border: 0;
}
.collection[data-mode="list"] .tea-card__link:hover .tea-card__cta { background: none; }
.collection[data-mode="list"] .tea-card__cta-label { display: none; }
.collection[data-mode="list"] .tea-card__arrow {
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.25s, transform 0.25s;
}
.collection[data-mode="list"] .tea-card__link:hover .tea-card__arrow {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 640px) {
	.collection[data-mode="list"] .tea-card__link {
		grid-template-columns: 56px 1fr 24px;
		grid-template-rows: auto;
		grid-template-areas: "stage body cta";
	}
	.collection[data-mode="list"] .tea-card__stage { width: 56px; height: 66px; }
	.collection[data-mode="list"] .tea-card__origin,
	.collection[data-mode="list"] .tea-card__formats { display: none; }
	.collection[data-mode="list"] .tea-card__name::after { display: none; }
}

/* Responsive layout */
@media (min-width: 620px) {
	.collection[data-mode="grid"] .collection__items {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

@media (min-width: 900px) {
	.collection__body { grid-template-columns: 264px 1fr; column-gap: clamp(28px, 4vw, 56px); }
	.facets {
		padding-right: 28px;
		border-right: 1px solid rgba(20, 16, 11, 0.12);
	}
	.facets__list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
	.facet {
		width: 100%;
		justify-content: space-between;
		padding: 10px 0;
		border: 0;
		border-bottom: 1px solid rgba(20, 16, 11, 0.08);
		font-size: 15px;
	}
	.facet:hover { background: transparent; }
	.facet .facet__label { flex: 1; }
	.facet:has(.facet__input:checked) {
		background: transparent;
		color: var(--burgundy);
		font-weight: 600;
	}
	.facet:has(.facet__input:checked) .facet__count { color: var(--gold-deep); }
}

@media (min-width: 1200px) {
	.collection[data-mode="grid"] .collection__items { grid-template-columns: repeat(3, 1fr); gap: 28px; }

	.collection__bar.container,
	.collection__body.container { --maxw: 1520px; }
}