/*
 * Main stylesheet — loaded without blocking render.
 *
 * Tokens come from critical.css, which is inlined before this arrives.
 */

/* --- layout & rhythm ---------------------------------------------------- */
.tcgt-main {
	min-height: 60vh;
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

.tcgt-front {
	padding-block: 0;
}

/* One value drives every gap between homepage sections, so the rhythm is a
   decision rather than an accident of whatever margins each block brought. */
.tcgt-front > .tcgt-content > * {
	max-width: var(--tcgt-wide);
	margin-inline: auto;
	padding-inline: var(--tcgt-pad);
	margin-block: var(--tcgt-section);
}

.tcgt-front > .tcgt-content > *:first-child {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.tcgt-page-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin-bottom: 1.5rem;
}

.tcgt-content > * + * { margin-top: 1rem; }
.tcgt-page .tcgt-content { max-width: 760px; }
.tcgt-empty { color: var(--tcgt-muted); }

/* --- section heads ------------------------------------------------------ */
.tcgt-section-head {
	margin-bottom: 1.5rem;
}

.tcgt-section-head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.tcgt-section-head__eyebrow {
	margin: 0 0 0.375rem;
	color: var(--tcgt-accent);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.tcgt-section-head__title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	letter-spacing: -0.04em;
}

/* --- release showcase: banner ------------------------------------------- */
.tcgt-showcase {
	position: relative;
}

.tcgt-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(240px, 30vw, 340px);
	margin-bottom: 1.25rem;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border: 1px solid var(--tcgt-line);
	border-radius: var(--tcgt-radius-lg);
	overflow: hidden;
	isolation: isolate;
	/* Keyed to the release's hue. A shop with no banner uploaded still gets a
	   composed, set-specific header instead of a grey box — which on a real shop
	   is the normal case, not the edge case. */
	background:
		radial-gradient(80% 130% at 85% 115%, hsl(var(--tcgt-accent-h) 78% 52% / 0.42), transparent 62%),
		radial-gradient(60% 100% at 8% -10%, hsl(var(--tcgt-accent-h) 70% 60% / 0.22), transparent 60%),
		linear-gradient(135deg, hsl(var(--tcgt-accent-h) 45% 18%), #101219 62%);
}

.tcgt-banner__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim under the copy, so a bright banner never eats the headline. */
.tcgt-banner.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(12, 13, 17, 0.92) 12%, rgba(12, 13, 17, 0.55) 55%, transparent 88%);
}

/* The set name, oversized and ghosted. Carries the TCG feel and gives the banner
   something to be about when there is no artwork. */
.tcgt-banner__ghost {
	position: absolute;
	right: -0.06em;
	bottom: -0.28em;
	z-index: -1;
	max-width: 100%;
	font-size: clamp(3.5rem, 11vw, 9rem);
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: 0.8;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	color: hsl(var(--tcgt-accent-h) 90% 85% / 0.09);
	-webkit-text-stroke: 1px hsl(var(--tcgt-accent-h) 85% 72% / 0.14);
	pointer-events: none;
	user-select: none;
}

.tcgt-banner.has-image .tcgt-banner__ghost { display: none; }

.tcgt-banner__body {
	position: relative;
	max-width: 46ch;
}

.tcgt-banner__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.625rem;
	color: var(--tcgt-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tcgt-banner__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.375rem;
	font-size: clamp(1.875rem, 4.2vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 1;
}

.tcgt-banner__symbol {
	width: clamp(32px, 3.4vw, 44px);
	height: clamp(32px, 3.4vw, 44px);
	object-fit: contain;
	flex: none;
}

.tcgt-banner__date {
	margin: 0 0 1.125rem;
	color: var(--tcgt-muted);
	font-size: 0.875rem;
}

.tcgt-banner__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

/* --- release showcase: set rail ----------------------------------------- */
.tcgt-rail-nav {
	overflow-x: auto;
	/* Explicit. overflow-x:auto silently computes overflow-y to auto as well —
	   CSS refuses to leave one axis visible when the other scrolls — which turns
	   this into a box that clips vertically. */
	overflow-y: hidden;

	/* The reason the hover lift used to vanish: the chips lift upward, and there
	   was zero room above them inside that scroll box, so the lift was clipped
	   the instant it started. The padding gives the lift somewhere to go; the
	   negative margin keeps the section's rhythm unchanged. Do not remove one
	   without the other. */
	padding-block: 16px;
	/* Bottom gap is deliberately generous: the selector and the products it
	   drives are two different things, and 12px read as one crowded block. The
	   -16px on each side cancels the padding above, so these are real visual
	   gaps of 1.5rem above and 2.75rem below. */
	margin-block: calc(1.5rem - 16px) calc(2.75rem - 16px);

	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;

	/* Horizontal only, full height: fades the right edge so the rail reads as
	   scrollable, without masking the lift at the top. */
	-webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
	mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.tcgt-rail-nav__list {
	display: flex;
	gap: 0.625rem;
	margin: 0;
	padding: 0 2rem 0 0;
	list-style: none;
}

.tcgt-setcard {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 210px;
	padding: 0.5rem 0.875rem 0.5rem 0.5rem;
	border: 1px solid var(--tcgt-line);
	border-radius: 999px;
	background: linear-gradient(180deg, var(--tcgt-surface-2), var(--tcgt-surface));
	transition:
		border-color var(--tcgt-ease),
		transform var(--tcgt-ease),
		box-shadow var(--tcgt-ease),
		background var(--tcgt-ease);
}

.tcgt-setcard:hover,
.tcgt-setcard:focus-visible {
	transform: translateY(-3px);
	border-color: hsl(var(--tcgt-accent-h) 70% 60% / 0.6);
	box-shadow: 0 10px 24px -8px hsl(var(--tcgt-accent-h) 70% 20% / 0.9);
	text-decoration: none;
}

.tcgt-setcard.is-current {
	border-color: hsl(var(--tcgt-accent-h) 80% 62% / 0.85);
	background: linear-gradient(180deg, hsl(var(--tcgt-accent-h) 50% 24%), var(--tcgt-surface));
	box-shadow:
		0 0 0 1px hsl(var(--tcgt-accent-h) 80% 62% / 0.35),
		0 8px 22px -10px hsl(var(--tcgt-accent-h) 75% 25% / 0.9);
}

/* The selected set gets a marker under the rail, so the active state survives
   even when several chips are tinted similar colours. */
.tcgt-setcard.is-current::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 22px;
	height: 3px;
	border-radius: 3px;
	background: hsl(var(--tcgt-accent-h) 85% 62%);
	transform: translateX(-50%);
}

.tcgt-setcard__art {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: radial-gradient(circle at 30% 25%, hsl(var(--tcgt-accent-h) 70% 45%), #14161d);
	border: 1px solid hsl(var(--tcgt-accent-h) 60% 50% / 0.4);
}

.tcgt-setcard__art img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.tcgt-setcard__initial {
	font-size: 1rem;
	font-weight: 900;
	color: hsl(var(--tcgt-accent-h) 90% 88%);
}

.tcgt-setcard__body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.tcgt-setcard__serie {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tcgt-muted);
}

.tcgt-setcard__name {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tcgt-setcard .tcgt-status {
	align-self: flex-start;
	margin-top: 0.125rem;
}

/* --- release showcase: filter bar --------------------------------------- */
.tcgt-showcase__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--tcgt-line);
}

.tcgt-filters {
	display: flex;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcgt-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--tcgt-line);
	border-radius: 999px;
	background: var(--tcgt-surface);
	color: var(--tcgt-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
	transition: color var(--tcgt-ease), border-color var(--tcgt-ease), background var(--tcgt-ease);
}

.tcgt-filter:hover {
	color: var(--tcgt-text);
	border-color: var(--tcgt-muted);
	text-decoration: none;
}

.tcgt-filter.is-active {
	background: var(--tcgt-text);
	border-color: var(--tcgt-text);
	color: var(--tcgt-ink);
}

/* The count is the point of the chip — it does the selling before anything is
   clicked. */
.tcgt-filter__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1;
}

.tcgt-filter.is-active .tcgt-filter__count {
	background: rgba(0, 0, 0, 0.14);
}

.tcgt-showcase__meta {
	margin: 0;
	color: var(--tcgt-muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.tcgt-showcase__bar .tcgt-link-more {
	margin-left: auto;
}

.tcgt-link-more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--tcgt-accent);
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

.tcgt-link-more::after {
	content: "→";
	transition: transform var(--tcgt-ease);
}

.tcgt-link-more:hover { text-decoration: none; }
.tcgt-link-more:hover::after { transform: translateX(3px); }

/* --- product card ------------------------------------------------------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.tcgt-card__meta {
	padding: 0.875rem 0.9375rem 0.5rem;
	flex: 1;
}

/* Type first: a customer scanning a grid is looking for a product kind before a
   name, and the name usually repeats the set anyway. */
.tcgt-card__type {
	margin: 0 0 0.3rem;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsl(var(--tcgt-card-h, 40) 70% 72%);
}

.tcgt-card__title {
	margin: 0 0 0.25rem;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--tcgt-text);
	/* Two lines then ellipsis: long set names must not push prices out of
	   alignment across a row. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tcgt-card__release {
	margin: 0;
	font-size: 0.75rem;
	color: var(--tcgt-muted);
}

.tcgt-card__ship {
	margin: 0.375rem 0 0;
	font-size: 0.75rem;
	color: var(--tcgt-preorder);
	font-weight: 700;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0;
	padding: 0 0.9375rem 0.75rem;
	color: var(--tcgt-text);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.woocommerce ul.products li.product .price del {
	color: var(--tcgt-muted);
	font-weight: 500;
	font-size: 0.8125rem;
	margin-right: 0.375rem;
}

.woocommerce ul.products li.product .price ins {
	background: none;
	color: var(--tcgt-accent);
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-size: inherit;
}

/* Woo's own sale flash duplicates the badge system. */
.woocommerce span.onsale { display: none; }

/* --- buttons (woo) ------------------------------------------------------ */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.125rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--tcgt-accent-hi), var(--tcgt-accent));
	color: var(--tcgt-ink);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: filter var(--tcgt-ease), transform var(--tcgt-ease);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	color: var(--tcgt-ink);
	filter: brightness(1.07);
}

.woocommerce .button:active { transform: translateY(1px); }

.woocommerce a.button.tcgt-btn--add {
	width: 100%;
	margin: 0;
	border-radius: 0;
	padding: 0.75rem 1rem;
}

/* Sold out: present, but visibly not a call to action. */
.woocommerce ul.products li.product.outofstock a.button {
	background: var(--tcgt-surface-2);
	color: var(--tcgt-muted);
	border-top: 1px solid var(--tcgt-line);
}

/* --- category tiles ----------------------------------------------------- */
.tcgt-tiles__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--tcgt-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcgt-tile__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: linear-gradient(180deg, var(--tcgt-surface-2), var(--tcgt-surface));
	border: 1px solid var(--tcgt-line);
	border-radius: var(--tcgt-radius);
	overflow: hidden;
	transition: transform var(--tcgt-ease), border-color var(--tcgt-ease), box-shadow var(--tcgt-ease);
}

.tcgt-tile__link:hover {
	transform: translateY(-4px);
	border-color: hsl(var(--tcgt-accent-h) 70% 60% / 0.6);
	box-shadow: var(--tcgt-shadow);
	text-decoration: none;
}

.tcgt-tile__media {
	position: relative;
	aspect-ratio: 5 / 3;
	display: grid;
	place-items: center;
	overflow: hidden;
	background:
		radial-gradient(90% 130% at 50% 118%, hsl(var(--tcgt-accent-h) 75% 52% / 0.5), transparent 66%),
		linear-gradient(150deg, hsl(var(--tcgt-accent-h) 48% 22%), #12141a 68%);
}

.tcgt-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--tcgt-ease-slow);
}

.tcgt-tile__link:hover .tcgt-tile__img { transform: scale(1.06); }

/* Two-letter monogram behind the tile, for shops with no category artwork. */
.tcgt-tile__ghost {
	position: relative;
	font-size: 2.75rem;
	font-weight: 900;
	letter-spacing: -0.06em;
	text-transform: uppercase;
	color: hsl(var(--tcgt-accent-h) 90% 88% / 0.16);
	-webkit-text-stroke: 1px hsl(var(--tcgt-accent-h) 85% 75% / 0.2);
}

.tcgt-tile__media.has-image .tcgt-tile__ghost { display: none; }

.tcgt-tile__body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.875rem 0.9375rem 1rem;
}

.tcgt-tile__name {
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: -0.025em;
}

.tcgt-tile__meta {
	font-size: 0.75rem;
	color: var(--tcgt-muted);
	font-variant-numeric: tabular-nums;
}

.tcgt-tile__cta {
	margin-top: 0.5rem;
	color: var(--tcgt-accent);
	font-size: 0.8125rem;
	font-weight: 700;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--tcgt-ease), transform var(--tcgt-ease);
}

.tcgt-tile__link:hover .tcgt-tile__cta {
	opacity: 1;
	transform: none;
}

/* --- release switcher panels -------------------------------------------- */
/* Height is animated by release-switcher.js on switch, then released back to
   auto. The transition only bites while .is-animating is set, so a resize or a
   no-JS load never fights a fixed height. */
.tcgt-showcase__panels.is-animating {
	overflow: hidden;
	transition: height 260ms cubic-bezier(0.2, 0, 0.2, 1);
}

.tcgt-showcase__panel[hidden] {
	display: none;
}

/* Fades in on switch. Deliberately short and cheap — a slow crossfade on a
   product grid reads as lag, not polish. */
.tcgt-showcase__panel:not([hidden]) {
	animation: tcgt-panel-in 240ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes tcgt-panel-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* --- fanned packs ------------------------------------------------------- */
.tcgt-fan-section {
	position: relative;
	padding-block: clamp(2rem, 5vw, 3.5rem);
	border-block: 1px solid var(--tcgt-line);
	background:
		radial-gradient(75% 120% at 50% 115%, rgba(245, 185, 66, 0.12), transparent 62%),
		linear-gradient(180deg, #101219, var(--tcgt-bg));
	overflow: hidden;
}

.tcgt-fan-section__head {
	max-width: 52ch;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}

.tcgt-fan-section__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	letter-spacing: -0.045em;
}

.tcgt-fan-section__intro {
	margin: 0;
	color: var(--tcgt-muted);
}

.tcgt-fan {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 0 auto;
	/* Top padding is the hovered pack's headroom. The section above clips, so
	   without this the lift would be cut off exactly like the rail's was. */
	padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 4vw, 3rem);
	list-style: none;
	min-height: clamp(320px, 34vw, 440px);
	perspective: 1400px;
}

/*
 * Two layers, and the split is the whole point.
 *
 * The item owns the fan geometry: rotation around a pivot far below itself,
 * which is what arcs the hand. The anchor owns the interaction: lift and scale
 * around its own centre.
 *
 * They used to be one element, and hovering straightened the pack to 0deg. With
 * the pivot ~1.15x the pack's height below its centre, unwinding 9.75deg drags
 * the pack roughly 44px sideways — out from under the cursor. :hover then drops,
 * it snaps back, re-enters, and the thing flickers. Splitting the layers means
 * hover never touches rotation, so there is nothing left to slide.
 */
.tcgt-fan__item {
	position: relative;
	z-index: var(--pack-z, 1);
	/* The overlap, and it is a balance rather than a taste.
	   At -3.4vw the narrowest pack owned a 77px strip of cursor space and hovering
	   across the hand was a fight; at -1.6vw the hand read as too spread out. This
	   sits between them and keeps every strip comfortably above ~100px. Tighten it
	   further only while watching those strips — below roughly 90px the hover gets
	   fiddly again. */
	margin-inline: clamp(-34px, -2.4vw, -18px);
	transform: rotate(var(--pack-rot, 0deg));
	transform-origin: 50% 165%;
}

.tcgt-pack {
	display: block;
	width: clamp(112px, 11vw, 152px);
	/* Centre origin: scale grows the pack in place instead of throwing it away
	   from a pivot two hundred pixels below. */
	transform-origin: 50% 50%;
	transform: translateY(0) scale(1);
	transition:
		transform 220ms cubic-bezier(0.2, 0, 0.2, 1),
		filter 200ms ease,
		opacity 200ms ease;
	will-change: transform;
}

.tcgt-pack__body {
	position: relative;
	display: block;
	aspect-ratio: 5 / 8;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid hsl(var(--tcgt-accent-h) 60% 55% / 0.45);
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.5),
		0 18px 36px -12px rgba(0, 0, 0, 0.7);
	background:
		radial-gradient(85% 60% at 50% 0%, hsl(var(--tcgt-accent-h) 85% 62% / 0.55), transparent 62%),
		linear-gradient(165deg, hsl(var(--tcgt-accent-h) 62% 34%), hsl(var(--tcgt-accent-h) 55% 14%) 68%, #0d0f14);
}

.tcgt-pack__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcgt-pack__art {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 0.5rem;
}

/* The crimped foil seam along the top of a real booster pack. */
.tcgt-pack__crimp {
	position: absolute;
	inset: 0 0 auto 0;
	height: 16px;
	background: linear-gradient(180deg, hsl(var(--tcgt-accent-h) 70% 58% / 0.9), hsl(var(--tcgt-accent-h) 60% 34% / 0.4));
	-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 8px);
	mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 8px);
	opacity: 0.75;
}

.tcgt-pack__emblem {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, hsl(var(--tcgt-accent-h) 90% 72%), hsl(var(--tcgt-accent-h) 70% 32%));
	box-shadow: 0 0 22px hsl(var(--tcgt-accent-h) 90% 60% / 0.5);
}

.tcgt-pack__emblem img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.tcgt-pack__initial {
	font-size: 1.375rem;
	font-weight: 900;
	color: #12141a;
}

.tcgt-pack__wordmark {
	font-size: 0.625rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	color: hsl(var(--tcgt-accent-h) 95% 92% / 0.9);
	text-shadow: 0 1px 6px hsl(var(--tcgt-accent-h) 80% 20% / 0.9);
}

/* Foil sweep. Parked off-frame; it crosses the pack on hover. */
.tcgt-pack__sheen {
	position: absolute;
	inset: -40% -120%;
	background: linear-gradient(
		75deg,
		transparent 42%,
		rgba(255, 255, 255, 0.42) 50%,
		transparent 58%
	);
	transform: translateX(-60%);
	transition: transform 620ms cubic-bezier(0.2, 0, 0.2, 1);
	pointer-events: none;
	mix-blend-mode: screen;
}

.tcgt-pack__label {
	display: block;
	margin-top: 0.75rem;
	text-align: center;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 200ms ease, transform 200ms ease;
	pointer-events: none;
}

.tcgt-pack__name {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.tcgt-pack__meta {
	display: block;
	font-size: 0.6875rem;
	color: var(--tcgt-muted);
	white-space: nowrap;
}

/* Hovering the hand dims every pack; the one under the cursor stays lit. This is
   what makes it read as picking one out rather than a row lighting up.
   Deliberately gentle — at 0.5 the neighbours went muddy and the hand stopped
   looking like a hand. */
.tcgt-fan:hover .tcgt-pack,
.tcgt-fan:focus-within .tcgt-pack {
	opacity: 0.62;
	filter: saturate(0.7);
}

/* Same treatment for hover and keyboard focus — a fan you cannot tab through is
   a fan half the visitors cannot use. */
.tcgt-fan .tcgt-pack:hover,
.tcgt-fan .tcgt-pack:focus-visible {
	opacity: 1;
	filter: none;
	/* Lift and scale only. No rotation: the item owns that, and touching it here
	   is what used to drag the pack out from under the cursor. The lift follows
	   the pack's own tilt, which reads as sliding one card out of a hand. */
	transform: translateY(-26px) scale(1.07);
	outline: none;
}

.tcgt-fan__item:has(.tcgt-pack:hover),
.tcgt-fan__item:has(.tcgt-pack:focus-visible) {
	z-index: 40;
}

.tcgt-pack:hover .tcgt-pack__body,
.tcgt-pack:focus-visible .tcgt-pack__body {
	border-color: hsl(var(--tcgt-accent-h) 90% 70%);
	box-shadow:
		0 0 0 1px hsl(var(--tcgt-accent-h) 90% 70% / 0.6),
		0 26px 50px -10px hsl(var(--tcgt-accent-h) 80% 30% / 0.75),
		0 0 44px hsl(var(--tcgt-accent-h) 90% 55% / 0.35);
}

.tcgt-pack:hover .tcgt-pack__sheen,
.tcgt-pack:focus-visible .tcgt-pack__sheen {
	transform: translateX(60%);
}

.tcgt-pack:hover .tcgt-pack__label,
.tcgt-pack:focus-visible .tcgt-pack__label {
	opacity: 1;
	transform: none;
}

/* :has() is what raises the hovered pack above its neighbours. Without it the
   pack still lifts and lights up, it just cannot climb over the pack to its
   right — degraded, not broken. */
@supports not selector(:has(*)) {
	.tcgt-fan .tcgt-pack:hover,
	.tcgt-fan .tcgt-pack:focus-visible {
		transform: translateY(-20px) scale(1.05);
	}
}

/* Mobile: a fan of nine in 380px is a smear. Scroll it, keep a light tilt so it
   still reads as packs rather than a row of cards. */
@media (max-width: 860px) {
	.tcgt-fan {
		justify-content: flex-start;
		overflow-x: auto;
		/* Same trap as the rail: overflow-x:auto clips vertically too, so the
		   lift needs room inside the scroll box rather than outside it. */
		overflow-y: hidden;
		min-height: 0;
		padding-inline: var(--tcgt-pad);
		padding-block: 2.5rem 2.5rem;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.tcgt-fan::-webkit-scrollbar { display: none; }

	.tcgt-fan__item {
		/* Barely overlapped on a touch screen: a thumb is a far blunter pointer
		   than a cursor, and there is horizontal room to scroll into anyway. */
		margin-inline: -8px;
		scroll-snap-align: center;
		flex: none;
		/* Halved: the full fan angle throws the outer packs off a phone. */
		transform: rotate(calc(var(--pack-rot, 0deg) / 2));
	}

	.tcgt-pack {
		width: clamp(104px, 30vw, 128px);
	}

	/* No hover on touch — dimming the hand on tap-and-hold would just look
	   broken. The label rides along permanently instead. */
	.tcgt-fan:hover .tcgt-pack,
	.tcgt-fan:focus-within .tcgt-pack {
		opacity: 1;
		filter: none;
	}

	.tcgt-pack__label {
		opacity: 1;
		transform: none;
	}

	.tcgt-fan .tcgt-pack:hover,
	.tcgt-fan .tcgt-pack:focus-visible {
		transform: translateY(-10px) scale(1.04);
	}
}

/* --- product rail ------------------------------------------------------- */
.tcgt-rail__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.tcgt-rail__heading {
	margin: 0;
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	letter-spacing: -0.035em;
}

/* Same cards, different container: the rail scrolls, the shop grid wraps. Card
   CSS is written once. */
.tcgt-rail__track ul.products {
	display: flex;
	gap: var(--tcgt-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.tcgt-rail__track ul.products li.product {
	flex: 0 0 clamp(160px, 40vw, 220px);
	scroll-snap-align: start;
}

/* --- brand block -------------------------------------------------------- */
.tcgt-brandblock {
	border-top: 1px solid var(--tcgt-line);
	background:
		radial-gradient(60% 120% at 15% 0%, rgba(245, 185, 66, 0.07), transparent 62%),
		linear-gradient(180deg, var(--tcgt-surface), var(--tcgt-bg));
}

.tcgt-brandblock__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	max-width: var(--tcgt-wide);
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4rem) var(--tcgt-pad);
}

.tcgt-brandblock__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	letter-spacing: -0.04em;
}

.tcgt-brandblock__text {
	margin: 0 0 1.25rem;
	max-width: 58ch;
	color: var(--tcgt-muted);
}

.tcgt-brandblock__list {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.tcgt-brandblock__list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.tcgt-brandblock__list li::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--tcgt-accent);
	box-shadow: 0 0 0 3px rgba(245, 185, 66, 0.16);
}

.tcgt-brandblock__card {
	padding: 1.5rem;
	border: 1px solid var(--tcgt-line);
	border-radius: var(--tcgt-radius-lg);
	background:
		radial-gradient(80% 120% at 80% 0%, rgba(245, 185, 66, 0.14), transparent 62%),
		linear-gradient(180deg, var(--tcgt-surface-2), var(--tcgt-surface));
	box-shadow: var(--tcgt-shadow);
}

.tcgt-brandblock__card-label {
	margin: 0 0 0.25rem;
	color: var(--tcgt-muted);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tcgt-brandblock__card-value {
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--tcgt-accent);
}

.tcgt-brandblock__card-text {
	margin: 0 0 0.875rem;
	color: var(--tcgt-muted);
	font-size: 0.875rem;
}

@media (max-width: 900px) {
	.tcgt-brandblock__inner { grid-template-columns: minmax(0, 1fr); }
}

/* --- shop chips --------------------------------------------------------- */
.tcgt-chips {
	margin-bottom: 1.5rem;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.tcgt-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcgt-chip {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--tcgt-line);
	border-radius: 999px;
	background: var(--tcgt-surface);
	color: var(--tcgt-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
	transition: color var(--tcgt-ease), border-color var(--tcgt-ease), background var(--tcgt-ease);
}

.tcgt-chip:hover {
	color: var(--tcgt-text);
	border-color: var(--tcgt-muted);
	text-decoration: none;
}

.tcgt-chip.is-active {
	background: var(--tcgt-accent);
	border-color: var(--tcgt-accent);
	color: var(--tcgt-ink);
}

@media (max-width: 782px) {
	.tcgt-chips__list { flex-wrap: nowrap; }
	.tcgt-showcase__bar .tcgt-link-more { margin-left: 0; }
}

.tcgt-block-empty {
	padding: 2rem;
	border: 1px dashed var(--tcgt-line);
	border-radius: var(--tcgt-radius);
	color: var(--tcgt-muted);
	text-align: center;
}

/*
 * Storefront pages (shop, single product, cart, checkout, account) are styled in
 * assets/css/shop.css, which loads only in a WooCommerce context. Keeping it out
 * of main.css means the homepage does not ship checkout CSS.
 *
 * Only pagination stays here: it is shared with the blog/post archive, which is
 * not a WooCommerce context.
 */

/* --- pagination --------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul,
.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 0.25rem;
	margin-top: 2rem;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--tcgt-line);
	border-radius: var(--tcgt-radius-sm);
	background: var(--tcgt-surface);
	color: var(--tcgt-muted);
	font-weight: 700;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--tcgt-accent);
	border-color: var(--tcgt-accent);
	color: var(--tcgt-ink);
}

/* --- mini cart drawer --------------------------------------------------- */
/* Site-wide: the homepage rails use AJAX add-to-cart too, so the drawer must be
   able to open there. Kept in main.css rather than shop.css for that reason. */
.tcgt-minicart[hidden] { display: none; }

.tcgt-minicart {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.tcgt-minicart__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 9, 12, 0.6);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity var(--tcgt-ease);
}

.tcgt-minicart.is-open .tcgt-minicart__backdrop { opacity: 1; }

.tcgt-minicart__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(400px, 90vw);
	height: 100%;
	background: var(--tcgt-surface);
	border-left: 1px solid var(--tcgt-line);
	box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.8);
	transform: translateX(100%);
	transition: transform 280ms cubic-bezier(0.2, 0, 0.2, 1);
}

.tcgt-minicart.is-open .tcgt-minicart__panel { transform: none; }

.tcgt-minicart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.125rem 1.25rem;
	border-bottom: 1px solid var(--tcgt-line);
}

.tcgt-minicart__title {
	margin: 0;
	font-size: 1rem;
	letter-spacing: -0.02em;
}

.tcgt-minicart__close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--tcgt-surface-2);
	border: 1px solid var(--tcgt-line);
	border-radius: 50%;
	color: var(--tcgt-muted);
	font-size: 1.375rem;
	line-height: 1;
	transition: color var(--tcgt-ease), background var(--tcgt-ease);
}

.tcgt-minicart__close:hover { color: var(--tcgt-text); background: var(--tcgt-line); }

.tcgt-minicart__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.tcgt-minicart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin: auto;
	padding: 2rem;
	text-align: center;
	color: var(--tcgt-muted);
}

.tcgt-minicart__list {
	margin: 0;
	padding: 0.5rem 0.75rem;
	list-style: none;
	flex: 1;
}

.tcgt-minicart__item {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--tcgt-line);
}

.tcgt-minicart__thumb img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: var(--tcgt-radius-sm);
	border: 1px solid var(--tcgt-line);
}

.tcgt-minicart__info { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }

.tcgt-minicart__name {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tcgt-text);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.tcgt-minicart__name:hover { color: var(--tcgt-accent); }

.tcgt-minicart__qty { font-size: 0.75rem; color: var(--tcgt-muted); }

.tcgt-minicart__remove {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tcgt-surface-2);
	border: 1px solid var(--tcgt-line);
	color: var(--tcgt-muted);
	font-size: 0.9375rem;
	line-height: 1;
	text-decoration: none;
	transition: color var(--tcgt-ease), background var(--tcgt-ease), border-color var(--tcgt-ease);
}

.tcgt-minicart__remove:hover {
	background: rgba(248, 81, 73, 0.16);
	border-color: rgba(248, 81, 73, 0.5);
	color: var(--tcgt-danger);
}

.tcgt-minicart__foot {
	position: sticky;
	bottom: 0;
	padding: 1rem 1.25rem 1.25rem;
	border-top: 1px solid var(--tcgt-line);
	background: var(--tcgt-surface);
}

.tcgt-minicart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.875rem;
	font-size: 0.9375rem;
}

.tcgt-minicart__subtotal strong { font-size: 1.125rem; font-weight: 900; letter-spacing: -0.02em; }

.tcgt-minicart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.tcgt-minicart__actions .tcgt-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.tcgt-minicart__panel,
	.tcgt-minicart__backdrop { transition: none; }
}

/* --- footer CTA band ---------------------------------------------------- */
.tcgt-footer-cta {
	border-top: 1px solid var(--tcgt-line);
	background:
		radial-gradient(60% 140% at 12% 0%, rgba(245, 185, 66, 0.16), transparent 60%),
		radial-gradient(50% 120% at 90% 100%, rgba(79, 141, 255, 0.12), transparent 62%),
		linear-gradient(180deg, #12141a, var(--tcgt-surface));
}

.tcgt-footer-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	max-width: var(--tcgt-wide);
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3rem) var(--tcgt-pad);
}

.tcgt-footer-cta__title {
	margin: 0 0 0.375rem;
	font-size: clamp(1.375rem, 3vw, 2rem);
	letter-spacing: -0.04em;
}

.tcgt-footer-cta__text {
	margin: 0;
	max-width: 52ch;
	color: var(--tcgt-muted);
}

/* --- footer ------------------------------------------------------------- */
.tcgt-footer {
	margin-top: 0;
	border-top: 1px solid var(--tcgt-line);
	background: var(--tcgt-surface);
}

.tcgt-footer .tcgt-usps {
	justify-content: flex-start;
	padding: 1rem 0 0;
}

.tcgt-footer__col .tcgt-footer__list a { text-transform: none; }

.tcgt-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
	max-width: var(--tcgt-wide);
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3rem) var(--tcgt-pad);
}

.tcgt-footer__text {
	color: var(--tcgt-muted);
	font-size: 0.875rem;
	margin-top: 0.75rem;
	max-width: 34ch;
}

.tcgt-footer__list,
.tcgt-footer__legal-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcgt-footer__list a {
	display: block;
	padding: 0.25rem 0;
	color: var(--tcgt-muted);
	font-size: 0.875rem;
}

.tcgt-footer__list a:hover { color: var(--tcgt-text); text-decoration: none; }

.tcgt-footer__widget-title {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tcgt-muted);
}

.tcgt-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--tcgt-wide);
	margin-inline: auto;
	padding: 1rem var(--tcgt-pad);
	border-top: 1px solid var(--tcgt-line);
}

.tcgt-footer__copy { margin: 0; font-size: 0.75rem; color: var(--tcgt-muted); }

.tcgt-footer__legal-list { display: flex; gap: 1rem; font-size: 0.75rem; }
.tcgt-footer__legal-list a { color: var(--tcgt-muted); }

/* --- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}