/* ============================================================
   MEMTCG Nieuwste-Set sectie
   Chrome voor [memtcg_newset]: hero, tabs/knoppen, header, filters,
   carousel, pijlen. Gescoped op .memtcg-newset.
   De productkaarten zelf zijn .memtcg-card en worden gestyled
   door memtcg-product-card.css; hier zetten we alleen hun
   breedte binnen de carousel.
   Tokens uit memtcg-global (met fallbacks).
   ============================================================ */


/* ============================================
   1. SECTIE-WRAPPER
   ============================================ */

.memtcg-newset {
	font-family: var(--font-body, 'Roboto', sans-serif);
	margin: 0 0 var(--gap-2xl, 48px);
}


/* ============================================
   2. HERO (vaste banner, nieuwste set)
   ============================================ */

.memtcg-newset .newset-hero {
	position: relative;
	height: 300px;
	border-radius: var(--r-lg, 12px);
	overflow: hidden;
	margin-bottom: 12px;
	background:
		linear-gradient(90deg,
			rgba(8, 12, 22, 0.92) 0%,
			rgba(8, 12, 22, 0.70) 28%,
			rgba(8, 12, 22, 0.32) 50%,
			rgba(8, 12, 22, 0.05) 75%,
			rgba(8, 12, 22, 0.00) 100%
		),
		var(--newset-hero-img, none),
		#0a1421;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid var(--c-accent-line, rgba(37, 150, 190, 0.18));
	isolation: isolate;
}

/* Logo-zijde rechts voor align="right" + gespiegelde gradient */
.memtcg-newset--right .newset-hero {
	background:
		linear-gradient(270deg,
			rgba(8, 12, 22, 0.92) 0%,
			rgba(8, 12, 22, 0.70) 28%,
			rgba(8, 12, 22, 0.32) 50%,
			rgba(8, 12, 22, 0.05) 75%,
			rgba(8, 12, 22, 0.00) 100%
		),
		var(--newset-hero-img, none),
		#0a1421;
	background-size: cover;
	background-position: center;
}

/* Geen afbeelding: subtiele accent-glow zodat de banner niet kaal is */
.memtcg-newset .newset-hero--no-image {
	background:
		radial-gradient(ellipse 80% 120% at 0% 50%, var(--c-accent-tint, rgba(37, 150, 190, 0.12)) 0%, transparent 70%),
		#0a1421;
}

.memtcg-newset--right .newset-hero--no-image {
	background:
		radial-gradient(ellipse 80% 120% at 100% 50%, var(--c-accent-tint, rgba(37, 150, 190, 0.12)) 0%, transparent 70%),
		#0a1421;
}

.memtcg-newset .newset-hero-logo {
	position: absolute;
	left: 48px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.memtcg-newset--right .newset-hero-logo {
	left: auto;
	right: 48px;
	text-align: right;
}

.memtcg-newset .newset-hero-eyebrow {
	font-family: var(--font-display, 'Poppins', sans-serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--c-accent-soft, rgba(116, 182, 210, 0.85));
	margin-bottom: 10px;
}

/* leeg na hero-swap (set zonder serie): geen lege regel/ruimte */
.memtcg-newset .newset-hero-eyebrow:empty {
	display: none;
}

.memtcg-newset .newset-hero-title {
	font-family: var(--font-display, 'Poppins', sans-serif);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 2.5px;
	color: var(--c-text-muted, rgba(255, 255, 255, 0.60));
	margin-bottom: 4px;
	text-transform: uppercase;
}

.memtcg-newset .newset-hero-name {
	font-family: var(--font-display, 'Poppins', sans-serif);
	font-weight: 900;
	font-size: 44px;
	letter-spacing: 2px;
	line-height: 0.95;
	color: var(--c-text-strong, #FFFFFF);
	text-transform: uppercase;
	text-shadow:
		0 0 30px rgba(37, 150, 190, 0.55),
		0 0 60px rgba(37, 150, 190, 0.25);
}

.memtcg-newset .newset-hero-cta {
	position: absolute;
	bottom: 18px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--r-md, 8px);
	color: var(--c-text-strong, #FFFFFF);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
	transition: all var(--t-med, 200ms ease);
	z-index: 3;
}

.memtcg-newset--right .newset-hero-cta {
	right: auto;
	left: 18px;
}

@media (hover: hover) {
	.memtcg-newset .newset-hero-cta:hover {
		background: var(--c-accent-glow, rgba(37, 150, 190, 0.40));
		border-color: var(--c-accent-line, rgba(37, 150, 190, 0.60));
		transform: translateY(-1px);
		color: var(--c-text-strong, #FFFFFF);
	}
}

.memtcg-newset .newset-hero-cta svg {
	width: 12px;
	height: 12px;
}

/* CTA-labels: volledige zin op desktop, korte zin op mobiel (toggle in media query) */
.memtcg-newset .newset-hero-cta-short {
	display: none;
}


/* ============================================
   3. TABS (N nieuwste sets)
   ============================================ */

.memtcg-newset .newset-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px;
	margin-bottom: 44px;
}

.memtcg-newset .newset-tab {
	position: relative;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--c-line, rgba(255, 255, 255, 0.08));
	border-radius: var(--r-md, 8px);
	padding: 14px 18px;
	cursor: pointer;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: all var(--t-med, 200ms ease);
	font-family: inherit;
	color: inherit;
}

@media (hover: hover) {
	.memtcg-newset .newset-tab:hover {
		border-color: rgba(37, 150, 190, 0.35);
		background: rgba(37, 150, 190, 0.04);
		transform: translateY(-1px);
	}
}

.memtcg-newset .newset-tab.active {
	background: rgba(37, 150, 190, 0.10);
	border-color: rgba(37, 150, 190, 0.55);
	box-shadow:
		0 0 0 1px rgba(37, 150, 190, 0.25),
		0 8px 24px -8px rgba(37, 150, 190, 0.35);
}

.memtcg-newset .newset-tab-eyebrow {
	font-family: var(--font-display, 'Poppins', sans-serif);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--c-text-faint, rgba(255, 255, 255, 0.42));
	margin-bottom: 6px;
}

.memtcg-newset .newset-tab.active .newset-tab-eyebrow {
	color: var(--c-accent-soft, rgba(116, 182, 210, 0.85));
}

.memtcg-newset .newset-tab-title {
	font-family: var(--font-display, 'Poppins', sans-serif);
	font-size: 16px;
	font-weight: 600;
	color: var(--c-text-strong, #FFFFFF);
	margin-bottom: 6px;
	line-height: 1.2;
	text-transform: none; /* Woodmart zet button-tekst anders in hoofdletters */
}

.memtcg-newset .newset-tab-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: var(--c-text-faint, rgba(255, 255, 255, 0.42));
	font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
	letter-spacing: 0.3px;
}

.memtcg-newset .newset-tab-badge {
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: var(--r-pill, 50px);
	line-height: 1.4;
}

.memtcg-newset .newset-tab-badge.new {
	background: rgba(37, 150, 190, 0.15);
	color: var(--c-accent-soft, #74B6D2);
	border: 1px solid rgba(37, 150, 190, 0.35);
}

.memtcg-newset .newset-tab-badge.low {
	background: rgba(224, 178, 82, 0.12);
	color: var(--c-low, #E0B252);
	border: 1px solid rgba(224, 178, 82, 0.30);
}

/* extra badge-states */
.memtcg-newset .newset-tab-badge.stock {
	background: rgba(107, 199, 109, 0.10);
	color: var(--c-stock, #6BC76D);
	border: 1px solid rgba(107, 199, 109, 0.28);
}

.memtcg-newset .newset-tab-badge.soon {
	background: rgba(255, 255, 255, 0.05);
	color: var(--c-text-muted, rgba(255, 255, 255, 0.55));
	border: 1px solid rgba(255, 255, 255, 0.14);
}


/* ============================================
   4. PER-SET BODY (toggle via tabs)
   ============================================ */

.memtcg-newset .newset-body[hidden] {
	display: none;
}


/* ============================================
   5. SECTION HEADER
   ============================================ */

/* gecombineerde rij: [filters] | meta ………… [Bekijk alles].
   De losse setnaam-titel is verwijderd (hero + tabs tonen de naam al). */
.memtcg-newset .newset-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	border-bottom: 1px solid var(--c-line, rgba(255, 255, 255, 0.08));
	padding-bottom: 18px;
	margin-bottom: 22px;
}

/* Meta-zin (aantal · op voorraad · vanaf-prijs), met scheidingslijntje ervóór */
.memtcg-newset .newset-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-size: 13px;
	color: var(--c-text-muted, rgba(255, 255, 255, 0.55));
	padding-left: 16px;
	border-left: 1px solid var(--c-line-strong, rgba(255, 255, 255, 0.12));
}

.memtcg-newset .newset-meta .sep {
	color: rgba(255, 255, 255, 0.20);
}

.memtcg-newset .newset-meta .num {
	color: var(--c-text-strong, #FFFFFF);
	font-weight: 600;
}

.memtcg-newset .newset-meta .price {
	color: var(--c-accent, #2596BE);
	font-weight: 700;
}

.memtcg-newset .newset-viewall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	color: var(--c-accent-soft, #74B6D2);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	padding: 8px 14px;
	border: 1px solid rgba(116, 182, 210, 0.30);
	border-radius: var(--r-pill, 50px);
	transition: all var(--t-med, 200ms ease);
}

.memtcg-newset .newset-viewall:hover {
	color: var(--c-text-strong, #FFFFFF);
	background: rgba(37, 150, 190, 0.15);
	border-color: rgba(116, 182, 210, 0.60);
}

.memtcg-newset .newset-viewall svg {
	width: 11px;
	height: 11px;
	transition: transform var(--t-med, 200ms ease);
}

.memtcg-newset .newset-viewall:hover svg {
	transform: translateX(3px);
}


/* ============================================
   6. FILTERS
   ============================================ */

.memtcg-newset .newset-filters {
	display: flex;
	gap: 8px;
	margin: 0;
	flex-wrap: wrap;
}

.memtcg-newset .newset-filter {
	background: transparent;
	border: 1px solid var(--c-line-strong, rgba(255, 255, 255, 0.12));
	color: var(--c-text, rgba(255, 255, 255, 0.70));
	padding: 8px 16px;
	border-radius: var(--r-pill, 50px);
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	transition: all var(--t-fast, 150ms ease);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.memtcg-newset .newset-filter:hover {
	border-color: rgba(255, 255, 255, 0.30);
	color: var(--c-text-strong, #FFFFFF);
}

.memtcg-newset .newset-filter.active {
	background: var(--c-accent, #2596BE);
	border-color: var(--c-accent, #2596BE);
	color: var(--c-text-strong, #FFFFFF);
}

.memtcg-newset .newset-filter .count {
	opacity: 0.65;
	font-weight: 400;
	font-size: 11.5px;
}

.memtcg-newset .newset-filter.active .count {
	opacity: 0.85;
}


/* ============================================
   7. CAROUSEL + KAARTBREEDTE
   ============================================ */

.memtcg-newset .newset-carousel-wrap {
	position: relative;
}

.memtcg-newset .newset-carousel {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 8px 2px;
	margin: 0;
	list-style: none;
	scroll-behavior: smooth;
}

.memtcg-newset .newset-carousel::-webkit-scrollbar {
	display: none;
}

/* De ECHTE plugin-kaart als carousel-item: alleen breedte + snap hier.
   Interne styling blijft van memtcg-product-card.css. 5-up op desktop. */
.memtcg-newset .newset-carousel > li.memtcg-card {
	flex: 0 0 calc((100% - 48px) / 5);
	scroll-snap-align: start;
	margin: 0;
}

/* Verborgen door een filter */
.memtcg-newset .newset-carousel > li.memtcg-card.is-filtered {
	display: none;
}


/* ============================================
   8. PIJLEN
   ============================================ */

.memtcg-newset .newset-arrow {
	position: absolute;
	top: 38%;
	width: 42px;
	height: 42px;
	background: rgba(15, 15, 15, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--c-line-strong, rgba(255, 255, 255, 0.10));
	border-radius: 50%;
	color: var(--c-text-strong, #FFFFFF);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: all var(--t-med, 200ms ease);
	font-family: inherit;
}

.memtcg-newset .newset-arrow:hover:not(:disabled) {
	background: var(--c-accent, rgba(37, 150, 190, 0.95));
	border-color: var(--c-accent-line, rgba(37, 150, 190, 0.7));
}

.memtcg-newset .newset-arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.memtcg-newset .newset-arrow.prev {
	left: -14px;
	transform: translateY(-50%);
}

.memtcg-newset .newset-arrow.next {
	right: -14px;
	transform: translateY(-50%);
}

.memtcg-newset .newset-arrow svg {
	width: 16px;
	height: 16px;
}


/* ============================================
   9. AFSLUITENDE BLURB
   ============================================ */

.memtcg-newset .newset-blurb {
	margin: 32px auto 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--c-line-soft, rgba(255, 255, 255, 0.06));
	text-align: center;
	font-size: 13.5px;
	color: var(--c-text-muted, rgba(255, 255, 255, 0.55));
	line-height: 1.7;
	max-width: 760px;
}


/* ============================================
   10. RESPONSIVE
   ============================================ */

@media (max-width: 1240px) {
	.memtcg-newset .newset-carousel > li.memtcg-card {
		flex: 0 0 calc((100% - 36px) / 4);
	}
}

@media (max-width: 1024px) {
	.memtcg-newset .newset-hero {
		height: 240px;
	}
	.memtcg-newset .newset-hero-name {
		font-size: 38px;
		letter-spacing: 1.5px;
	}
	.memtcg-newset .newset-hero-title {
		font-size: 13px;
		letter-spacing: 2px;
	}
	.memtcg-newset .newset-hero-logo {
		left: 36px;
	}
	.memtcg-newset--right .newset-hero-logo {
		left: auto;
		right: 36px;
	}
	.memtcg-newset .newset-carousel > li.memtcg-card {
		flex: 0 0 calc((100% - 24px) / 3);
	}
	.memtcg-newset .newset-arrow {
		width: 36px;
		height: 36px;
	}
	.memtcg-newset .newset-arrow.prev {
		left: -8px;
	}
	.memtcg-newset .newset-arrow.next {
		right: -8px;
	}
}

@media (max-width: 768px) {
	.memtcg-newset .newset-carousel > li.memtcg-card {
		/* ~30% smaller dan de oude 2-up (~49%): meer kaarten in beeld
		   + duidelijke peek die scrollbaarheid signaleert. */
		flex: 0 0 34%;
	}
	.memtcg-newset .newset-header {
		/* gestapeld: filters (3 gelijke kolommen, volle breedte) met
		   meta verborgen, en "Bekijk alles" eronder op volle breedte
		   (= dezelfde totale breedte als de 3 filters samen). */
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.memtcg-newset .newset-meta {
		display: none;
	}
	.memtcg-newset .newset-filters {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		width: 100%;
	}
	.memtcg-newset .newset-filter {
		justify-content: center;
		padding: 8px 6px;
		font-size: 11.5px;
		white-space: nowrap;
	}
	.memtcg-newset .newset-viewall {
		width: 100%;
		justify-content: center;
		margin-left: 0;
	}
	.memtcg-newset .newset-hero {
		height: 160px;
		background:
			linear-gradient(90deg,
				rgba(8, 12, 22, 0.85) 0%,
				rgba(8, 12, 22, 0.55) 45%,
				rgba(8, 12, 22, 0.25) 75%,
				rgba(8, 12, 22, 0.00) 100%
			),
			var(--newset-hero-img, none),
			#0a1421;
		background-size: cover;
		background-position: center;
	}
	.memtcg-newset--right .newset-hero {
		background:
			linear-gradient(270deg,
				rgba(8, 12, 22, 0.85) 0%,
				rgba(8, 12, 22, 0.55) 45%,
				rgba(8, 12, 22, 0.25) 75%,
				rgba(8, 12, 22, 0.00) 100%
			),
			var(--newset-hero-img, none),
			#0a1421;
		background-size: cover;
		background-position: center;
	}
	.memtcg-newset .newset-hero-name {
		font-size: 30px;
		letter-spacing: 1.2px;
	}
	.memtcg-newset .newset-hero-title {
		font-size: 12px;
		letter-spacing: 1.8px;
		text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
	}
	.memtcg-newset .newset-hero-eyebrow {
		text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
	}
	.memtcg-newset .newset-hero-logo {
		left: 24px;
	}
	.memtcg-newset--right .newset-hero-logo {
		left: auto;
		right: 24px;
	}
	.memtcg-newset .newset-arrow {
		display: none;
	}
	/* glow van de actieve set-tab uit op mobiel (zag er lelijk uit
	   na het aantikken van een set). bg + rand blijven, dus de actieve tab
	   blijft herkenbaar. Op desktop blijft de glow staan. */
	.memtcg-newset .newset-tab.active {
		box-shadow: none;
	}
	/* CTA op mobiel naar boven i.p.v. onderaan, zodat de (verticaal
	   gecentreerde) titel meer ademruimte onderin krijgt. Op tablet/desktop
	   blijft 'ie onderaan staan (daar is genoeg hoogte). */
	.memtcg-newset .newset-hero-cta {
		top: 12px;
		bottom: auto;
		right: 12px;
		padding: 7px 11px;
		font-size: 10.5px;
		gap: 6px;
	}
	.memtcg-newset .newset-hero-cta-full {
		display: none;
	}
	.memtcg-newset .newset-hero-cta-short {
		display: inline;
	}
	.memtcg-newset--right .newset-hero-cta {
		right: auto;
		left: 12px;
	}
	/* Tabs op mobiel: horizontale scroll-strip i.p.v. 2x2 raster.
	   Knoppen blijven naast elkaar; veeg horizontaal door alle sets.
	   Patroon = de carousel: overflow-x: auto, GEEN overflow-y (de combinatie
	   overflow-y: visible + overflow-x: auto breekt scroll op iOS Safari).
	   Bewust geen negatieve marge-bleed: container-padding is hier onbekend,
	   dus dat zou page-brede horizontale overflow kunnen veroorzaken. */
	.memtcg-newset .newset-tabs {
		display: flex;
		grid-template-columns: none; /* reset desktop auto-fit grid */
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin-bottom: 28px;
		padding-bottom: 4px;
	}
	.memtcg-newset .newset-tabs::-webkit-scrollbar {
		display: none;
	}
	.memtcg-newset .newset-tab {
		flex: 0 0 auto;
		width: 152px;
		scroll-snap-align: start;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 11px 13px;
		min-width: 0;
		overflow: hidden;
	}
	.memtcg-newset .newset-tab-eyebrow {
		font-size: 8px;
		letter-spacing: 0.8px;
		margin-bottom: 0;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.memtcg-newset .newset-tab-title {
		font-size: 13px;
		margin-bottom: 0;
		line-height: 1.15;
		overflow-wrap: anywhere;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: 2.3em; /* reserveer 2 regels -> alle tabs even hoog */
	}
	.memtcg-newset .newset-tab-meta {
		flex-wrap: nowrap;
		gap: 6px;
		width: 100%;
		font-size: 10px;
		margin-top: auto; /* code + badge onderaan -> uitgelijnd over alle tabs */
	}
	.memtcg-newset .newset-tab-badge {
		font-size: 8.5px;
		padding: 2px 6px;
		flex: 0 0 auto;
	}
}

@media (max-width: 480px) {
	.memtcg-newset .newset-carousel > li.memtcg-card {
		/* ~30% smaller (66% -> 46%): 2-up met peek; blijft onder de
		   320px container-query drempel -> compacte interne kaartvariant. */
		flex: 0 0 46%;
	}
	.memtcg-newset .newset-hero-name {
		font-size: 24px;
	}
	.memtcg-newset .newset-hero-cta {
		top: 10px;
		bottom: auto;
		right: 10px;
		padding: 6px 10px;
		font-size: 10px;
	}
	.memtcg-newset--right .newset-hero-cta {
		right: auto;
		left: 10px;
	}
}


/* ============================================
   11. TAALFILTER (taal-switcher)
   Bestaande regels hierboven zijn niet aangeraakt.
   ============================================ */

/* desktop-CTA van rechtsonder naar rechtsboven (mock v3 akkoord).
   Zelfde specificiteit, later in het bestand -> wint van de basisregel.
   Mobiel stond al rechtsboven (regel in de 768px-query) en wint
   daar alsnog op volgorde; gedrag mobiel blijft exact gelijk. */
.memtcg-newset .newset-hero-cta {
	top: 18px;
	bottom: auto;
}

/* Taalgroep-wrapper: inactieve talen verborgen */
.memtcg-newset .newset-langset[hidden] {
	display: none;
}

/* Taal-switcher in de hero (desktop/tablet), optie C:
   pill-rij in de logo-stack, onder de setnaam */
.memtcg-newset .newset-langs {
	display: flex;
	gap: 8px;
	margin-top: 18px;
}

/* align="right": logo-stack is rechts uitgelijnd -> pills ook */
.memtcg-newset--right .newset-langs {
	justify-content: flex-end;
}

.memtcg-newset .newset-lang {
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--c-text-muted, rgba(255, 255, 255, 0.55));
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--r-pill, 50px);
	padding: 7px 14px;
	cursor: pointer;
	transition: all var(--t-fast, 150ms ease);
}

@media (hover: hover) {
	.memtcg-newset .newset-lang:hover {
		color: var(--c-text-strong, #FFFFFF);
		border-color: rgba(255, 255, 255, 0.30);
	}
}

.memtcg-newset .newset-lang.active {
	background: var(--c-accent, #2596BE);
	border-color: var(--c-accent, #2596BE);
	color: var(--c-text-strong, #FFFFFF);
	box-shadow: 0 0 14px -2px var(--c-accent-glow, rgba(37, 150, 190, 0.4));
}

/* Mobiele taal-balk: op desktop verborgen */
.memtcg-newset .newset-langs-bar {
	display: none;
}

@media (max-width: 768px) {
	/* in-hero switcher uit op mobiel… */
	.memtcg-newset .newset-langs {
		display: none;
	}
	/* …code-balk onder de hero, boven de tabs (mock v2/v3 akkoord):
	   full-width segmenten, 40px hoog (touch target) */
	.memtcg-newset .newset-langs-bar {
		display: flex;
		gap: 2px;
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid var(--c-line, rgba(255, 255, 255, 0.08));
		border-radius: var(--r-pill, 50px);
		padding: 4px;
		margin-bottom: 12px;
	}
	.memtcg-newset .newset-langs-bar .newset-lang {
		flex: 1;
		min-height: 40px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 1px;
		padding: 6px 8px;
		text-align: center;
		/* reset van de desktop pill-stijl (optie C): in de balk
		   blijven knoppen vlak binnen de container, zoals goedgekeurd. */
		background: transparent;
		border: 0;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.memtcg-newset .newset-langs-bar .newset-lang.active {
		background: var(--c-accent, #2596BE);
	}
}


/* ============================================
   12. BUTTONS-WEERGAVE (twee knoppen i.p.v. set-tabs)
   Desktop: identiek aan de Pokémon-tabs (zelfde .newset-tab), 2-koloms.
   Mobiel: compacter en gecentreerd; twee gelijke vakken die samen de volledige
   breedte vullen, net als de taal-balk erboven. De eyebrow valt op mobiel weg
   om hoogte te besparen.
   ============================================ */
.memtcg-newset .newset-tabs--two {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
	.memtcg-newset .newset-tabs--two {
		/* De basis .newset-tabs wordt op mobiel flex met vaste-breedte tabs (152px)
		   voor de horizontaal scrollende Pokémon-tabs. De twee One Piece-knoppen
		   moeten grid blijven EN hun vaste breedte verliezen (zie .newset-tab
		   hieronder), anders vullen ze de breedte niet. */
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
		gap: 8px;
		margin-bottom: 24px;
	}

	.memtcg-newset .newset-tabs--two .newset-tab {
		align-items: flex-start;
		justify-content: center;
		text-align: left;
		padding: 9px 14px;
		gap: 2px;
		width: auto;
		min-width: 0;
	}

	.memtcg-newset .newset-tabs--two .newset-tab-eyebrow {
		margin: 0;
	}

	.memtcg-newset .newset-tabs--two .newset-tab-title {
		margin: 0;
	}

	.memtcg-newset .newset-tabs--two .newset-tab-meta {
		margin: 2px 0 0;
	}
}


/* ============================================
   13. HERO CROSSFADE
   De oude banner ligt als overlay bovenop en fadet uit, zodat de nieuwe
   (al ingestelde) banner eronder zichtbaar wordt. De gradient zit in beide
   lagen, dus de tekst blijft tijdens de overgang leesbaar. Geldt voor beide
   layouts (set-tabs en knoppen).
   ============================================ */
.memtcg-newset .newset-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg,
			rgba(8, 12, 22, 0.92) 0%,
			rgba(8, 12, 22, 0.70) 28%,
			rgba(8, 12, 22, 0.32) 50%,
			rgba(8, 12, 22, 0.05) 75%,
			rgba(8, 12, 22, 0.00) 100%
		),
		var(--newset-hero-img-prev, none),
		#0a1421;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
}

/* align="right": overlay-gradient gespiegeld zodat hij de basis-hero volgt */
.memtcg-newset--right .newset-hero::after {
	background-image:
		linear-gradient(270deg,
			rgba(8, 12, 22, 0.92) 0%,
			rgba(8, 12, 22, 0.70) 28%,
			rgba(8, 12, 22, 0.32) 50%,
			rgba(8, 12, 22, 0.05) 75%,
			rgba(8, 12, 22, 0.00) 100%
		),
		var(--newset-hero-img-prev, none);
}

.memtcg-newset .newset-hero.is-cf-instant::after {
	opacity: 1;
	transition: none;
}

.memtcg-newset .newset-hero.is-cf-fade::after {
	opacity: 0;
	transition: opacity 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.memtcg-newset .newset-hero.is-cf-fade::after {
		transition: none;
	}
}