/* ──────────────────────────────────────────────────────────────────────────
   SHOP V2 — design/Shop V2 (IMPLEMENTATION.md + reference/Shop Tabs.dc.html)

   Laadt NA cubelegend-personal.css, want dit bestand vervangt de font-ladder
   die daar in §6 op .tabs-full staat. Die ladder verkleinde het label bij elke
   extra tab; bij zes tabs kwam hij op een 320px-scherm uit rond 6px. De shop
   heeft er zeven, dus de rail is hier niet meer op het AANTAL tabs geschaald
   maar op VIER ZICHTBARE tabs — het label staat vast op 11px en de rest bereik
   je door te vegen.

   Alle maten zijn geverifieerd op een ontwerpbreedte van 320px.
   ────────────────────────────────────────────────────────────────────────── */


/* ══ 0a · DE ONDERGROND ═══════════════════════════════════════════════════
   Dezelfde ondergrond als de inlogschermen: cbg0 onder een #0b0318-gradient,
   met de paarse gloed bovenin. Generiek staat er cbg2 vol op .top_overlayed:
   after met een zwarte laag van 50% erover, en die foto is te bont voor dit
   scherm — de vlekken kruisten dwars door de kaarten en de carrousel heen.

   Zelfde ingreep als #gamerprofile / #social / #chatthread in
   cubelegend-profile.css: de :after herschrijven en de :before uitzetten, want
   die zwarte laag hoort bij de foto die hier weggaat. De radiale gloed is wat
   deze ondergrond van de profielvariant onderscheidt, en precies wat de
   inlogschermen erover hebben.                                              */
#shop .top_overlayed:after
{
	background:
		radial-gradient(ellipse at 50% 8%, #9a00ff55, transparent 62%),
		linear-gradient(#0b0318cc, #0b0318f2),
		url(/public/img/cubelegend/cbg0.jpeg) center/cover no-repeat,
		#0b0318;
}
#shop .top_overlayed:before
{
	background:none;
}


/* ══ 0 · DE KOP ════════════════════════════════════════════════════════════
   De generieke .top_overlayed__header centreert z'n kinderen (align-items:
   center) en klemt zichzelf op max-height:10vw — 32px op een 320px-scherm.
   Daardoor kreeg de rail hoogte 0 en zocht hij z'n eigen breedte (381px op
   een scherm van 320) i.p.v. de volle kopbreedte. Zelfde recept als de
   factory-kop: stretchen en op inhoud laten groeien.                        */
#shop .top_overlayed__header
{
	align-items:stretch;
	max-height:unset;
	margin-bottom:0;
	gap:8px;
	padding:10px 10px 12px;
	padding-top: calc(10px + env(safe-area-inset-top));
}

/* De saldo-pillen in de kop. .inventorystat.right is voor een pil met het
   ICOON RECHTS gemaakt: hij haalt de linker-overhang weg en trekt met
   margin-right:-14px de waarde over het icoon heen. Hier staat het icoon
   links, dus dat levert een getal bovenop de diamant. */
#shop .top_overlayed__header .inventorystat
{
	width:auto;
	min-width:66px;
	justify-content:flex-start;
	gap:7px;
	padding:0 12px 0 0;
	box-sizing:border-box;
}
#shop .top_overlayed__header .inventorystat img
{
	margin-left:-8px;
	margin-right:0;
	width:30px;
	flex:0 0 auto;
}
#shop .top_overlayed__header .inventorystat span
{
	font-family:'headers';
	white-space:nowrap;
}

/* ══ 1 · TAB-RAIL ══════════════════════════════════════════════════════════ */

/* De witte glansstreep die élke rail in de app draagt (.tabs-full:after).
   Hij zit op een NIET-scrollende houder en niet op de rail zelf: als ::after
   binnen een overflow-x:auto-element zou hij met de tabs mee wegschuiven. */
/* De ZICHTBARE rail (rand, achtergrond, glans) zit op de niet-scrollende
   houder; de scrollende .shop-rail eronder begint 14px hóger dan de houder
   (negatieve marge + evenveel padding). overflow-x:auto knipt namelijk óók
   verticaal (overflow-y wordt dan impliciet auto), en een attention-badge op
   een tabicoon werd zo aan de bovenrand onthoofd. Met de scrollport 14px
   boven de rail steekt de badge nu gewoon boven de rail uit. */
.shop-rail__houder
{
	position:relative;
	border:1px solid #11004c;
	border-radius:5px;
	background:#2a1148;
}
.shop-rail__houder:after
{
	content:'';
	position:absolute;
	top:3px;
	left:3px;
	width:calc(100% - 6px);
	height:50%;
	background:#fff;
	opacity:.3;
	border-radius:3px;
	z-index:1;   /* onder de actieve tab (2) en de badges (4), boven de rest */
	pointer-events:none;
}

.shop-rail
{
	display:flex;
	width:100%;
	box-sizing:border-box;
	flex:0 0 auto;
	overflow-x:auto;
	scroll-snap-type: x mandatory;
	margin-top:-14px;
	padding-top:14px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width:none;
}
.shop-rail::-webkit-scrollbar
{
	height:0;
}

.shop-rail__tab
{
	flex:0 0 25%;      /* altijd vier zichtbaar, ongeacht het aantal tabs */
	/* box-sizing is hier VERPLICHT: zonder dit tellen padding en border bovenop
	   de 25% en wordt de vierde tab uit beeld geduwd */
	box-sizing:border-box;
	min-width:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:3px;
	padding:5px 2px 6px;
	border-left:1px solid #000;
	scroll-snap-align:start;
	cursor:pointer;
	position:relative;
	justify-content:center;
	min-height:48px;
}
.shop-rail__tab:first-child
{
	border-left:none;
}
.shop-rail__tab img
{
	width:23px;
	height:23px;
	object-fit:contain;
}
.shop-rail__tab span
{
	font-family:'headers';
	font-size:11px;   /* vast — schaalt nooit mee met het aantal tabs */
	letter-spacing:.2px;
	line-height:1;
	white-space:nowrap;
	text-shadow: 0 1px #000, 0 -1px #000, 1px 0 #000, -1px 0 #000;
}
.shop-rail__tab.is-active
{
	background:
		linear-gradient(180deg, #ffffffa6 0%, #ffffff33 42%, transparent 43%),
		linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	box-shadow: inset 0 1px 0 #fff;
	border-radius:5px;
	position:relative;
	z-index:2;
}
.shop-rail__tab.is-active span
{
	color:#3a1c00;
	text-shadow:none;
}

/* De telling hoort op het ICOON en niet op de tab: op de tab zelf eet hij de
   rechter-padding op en knipt de overflow-x van de rail hem af. De teller
   zelf is de standaard .badge-new (zetBadgeNew, zoals op de zijknoppen);
   alleen de plek en de maat zijn hier op het 23px-icoon afgestemd. */
.shop-rail__icon
{
	position:relative;
	height:23px;
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
}
.shop-rail__icon .badge-new
{
	top:-9px;
	right:-13px;
	z-index:4;   /* boven de glans van de houder; steekt boven de rail uit */
	font-family:'headers';
	font-size:11px;
	min-width:1.1rem;
	min-height:1.1rem;
	line-height:1.1rem;
	color:#fff !important;
}

/* paginabolletjes onder de rail — ceil(tabs / 4) */
.shop-rail__dots
{
	display:flex;
	gap:4px;
	justify-content:center;
	padding:7px 0 0;
}
.shop-rail__dots i
{
	width:16px;
	height:3px;
	border-radius:2px;
	background:#ffffff33;
	transition: background .25s ease;
}
.shop-rail__dots i.is-active
{
	background:#FFC107;
}


/* ══ 2 · GEDEELDE RECEPTEN ═════════════════════════════════════════════════
   De "premium shine" — een lichtstreep over de bovenste 30-43% — zit op elke
   knop, elke kaart en elke donkere tegel. Eén keer opschrijven, overal
   hergebruiken.                                                              */

.shop-shine-knop
{
	background:
		linear-gradient(180deg, #ffffffa6 0%, #ffffff33 42%, transparent 43%),
		linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	box-shadow: inset 0 -5px #0000003d, inset 0 1px 0 #fff;
	color:#3a1c00;
}
.shop-shine-tegel
{
	background:
		linear-gradient(180deg, #ffffff26 0%, #ffffff0a 38%, transparent 39%),
		#00000047;
	box-shadow: inset 0 1px 0 #ffffff40;
}

/* sectiekop: kleine naam · haarlijn · aantal */
.shop-sectie
{
	display:flex;
	align-items:baseline;
	gap:8px;
	padding:30px 14px 0;
}
.shop-sectie h3
{
	margin:0;
	font-family:'headers';
	font-size:22px;
	line-height:1;
	font-weight:normal;
	text-transform:lowercase;
	text-shadow:0 2px #000;
}
.shop-sectie i
{
	flex:1 1 auto;
	height:1px;
	background:#ffffff1a;
}
.shop-sectie b
{
	font-family:'headers';
	font-size:11px;
	font-weight:normal;
	color:#ffffff8a;
}


/* ══ 3 · FEELING LUCKY? ════════════════════════════════════════════════════
   Vervangt de twee dashboardknoppen (gokwiel + streak-cadeaus) die uit de
   rechterrail zijn gehaald. Staat boven "hot deals" op ELKE tab en scrollt
   gewoon mee — het is geen vaste balk.                                       */

.shop-lucky__kop
{
	display:flex;
	align-items:center;
	gap:8px;
	padding:13px 14px 0;
}
.shop-lucky__kop span:first-child
{
	font-family:'headers';
	font-size:14px;
	letter-spacing:.5px;
	color:#ffffff8a;
	text-shadow:0 1px #000;
}
.shop-lucky__kop i
{
	flex:1 1 auto;
	height:1px;
	background:#ffffff14;
}
.shop-lucky__kop b
{
	font-family:'headers';
	font-size:11px;
	font-weight:normal;
	color:#ffffff59;
}
/* zodra er iets te halen valt kleurt de hele kop op */
.shop-lucky.is-klaar .shop-lucky__kop span:first-child
{
	color:#FFC107;
}
.shop-lucky.is-klaar .shop-lucky__kop i
{
	background: linear-gradient(90deg, #FFC10759, #ffffff0d);
}
.shop-lucky.is-klaar .shop-lucky__kop b
{
	color:#ffffff8a;
}

/* de padding-top is de ruimte die beide artworks nodig hebben: ze steken
   allebei boven hun tegel uit */
.shop-lucky__grid
{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:7px;
	padding:52px 14px 0;
}
.shop-lucky__tegel
{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	border:1px solid #ffffff26;
	border-radius:6px;
	text-decoration:none;
	color:#fff;
	cursor:pointer;
	background: linear-gradient(180deg, #2b1a42 0%, #1a1226 100%);
	box-shadow: inset 0 1px 0 #ffffff14;
}
.shop-lucky__tegel.is-klaar
{
	border-color:#FFC107;
	box-shadow: inset 0 1px 0 #ffffff2b, 0 2px 0 #00000059;
}
.shop-lucky__tegel[data-tegel="wheel"].is-klaar
{
	background: linear-gradient(180deg, #40196e 0%, #25073f 100%);
}
.shop-lucky__tegel[data-tegel="gifts"].is-klaar
{
	background: linear-gradient(180deg, #123a52 0%, #0a2233 100%);
}
.shop-lucky__tegel[data-tegel="gifts"]
{
	background: linear-gradient(180deg, #16283a 0%, #111a24 100%);
}

/* het wiel zit in een gouden medaillon dat over de bovenrand steekt */
.shop-lucky__medaille
{
	width:92px;
	height:92px;
	margin:-38px 0 0;
	position:relative;
	z-index:2;
	border-radius:50%;
	padding:3px;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
	background: linear-gradient(160deg, #FFD75E 0%, #e09b00 45%, #8a5a00 100%);
	box-shadow: 0 4px 8px #000000b3, inset 0 1px 0 #fff9;
}
.shop-lucky__medaille img
{
	width:100%;
	height:100%;
	object-fit:contain;
	border-radius:50%;
	box-shadow: inset 0 0 0 1px #00000073;
}
/* uitgeput: grijs medaillon, doffe art */
.shop-lucky__tegel:not(.is-klaar) .shop-lucky__medaille
{
	background: linear-gradient(160deg, #8c8c8c 0%, #5a5a5a 45%, #333 100%);
	box-shadow: 0 4px 8px #00000080, inset 0 1px 0 #ffffff59;
	filter: saturate(.25) brightness(.72);
}

.shop-lucky__pose
{
	width:128px;
	height:128px;
	margin:-48px 0 -18px;
	position:relative;
	z-index:2;
	object-fit:contain;
	filter: drop-shadow(0 4px 6px #000000b3);
}
.shop-lucky__tegel:not(.is-klaar) .shop-lucky__pose
{
	filter: saturate(.25) brightness(.72) drop-shadow(0 4px 6px #00000080);
}

.shop-lucky__titel
{
	font-family:'headers';
	font-size:14px;
	line-height:1;
	padding:6px 0 0;
	text-shadow: 0 2px #000, 0 -1px #000, 1px 0 #000, -1px 0 #000;
}
.shop-lucky__sub
{
	font-family:'p', sans-serif;
	font-size:9.5px;
	line-height:1;
	padding:3px 0 7px;
}
.shop-lucky__tegel[data-tegel="wheel"] .shop-lucky__sub { color:#c9a6ff; }
.shop-lucky__tegel[data-tegel="gifts"] .shop-lucky__sub { color:#9fd6f2; }
.shop-lucky__tegel:not(.is-klaar) .shop-lucky__titel { color:#ffffff8a; text-shadow:none; }
.shop-lucky__tegel:not(.is-klaar) .shop-lucky__sub   { color:#ffffff59; }

/* De standaardstand IS de gouden knop — die vulling ontbrak, waardoor CLAIM en
   FREE SPIN als kale witte tekst op de tegel stonden. Zelfde recept als elke
   andere gouden knop in de app: shine-laag over de bovenste 42%, inset-schaduw
   onderaan, donkerbruine letter. */
.shop-lucky__knop
{
	width:100%;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	padding:11px 0 12px;
	font-family:'headers';
	font-size:17px;
	border-top:1px solid #000;
	border-radius:0 0 5px 5px;
	/* De twee tegels hebben verschillend hoge art (medaillon 92px, pose 128px),
	   dus zonder dit stonden hun knoppen op verschillende hoogtes. */
	margin-top:auto;
	background:
		linear-gradient(180deg, #ffffffa6 0%, #ffffff33 42%, transparent 43%),
		linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	box-shadow: inset 0 -5px #0000003d, inset 0 1px 0 #fff;
	color:#3a1c00;
	text-shadow:none;
}
/* uit: de rondleiding is voorbij, morgen weer */
.shop-lucky__knop.is-uit
{
	background:#ffffff0f;
	box-shadow:none;
	color:#ffffff73;
	font-size:16px;
	border-top:1px solid #00000073;
}
/* geclaimd */
.shop-lucky__knop.is-geclaimd
{
	background:#1d7a3f2b;
	box-shadow:none;
	color:#7fd18f;
	font-size:16px;
	border-top:1px solid #00000073;
}
/* de gratis beurt is op → het is nu een aankoop, dus groen i.p.v. goud */
.shop-lucky__knop.is-koop
{
	background:
		linear-gradient(180deg, #ffffffa6 0%, #ffffff33 42%, transparent 43%),
		linear-gradient(0deg, #1b7a3c 0%, #35c46a 100%);
	box-shadow: inset 0 -5px #0000003d, inset 0 1px 0 #ffffff8a;
	/* wit op groen, zoals elke andere euro-knop in de shop */
	color:#fff;
	text-shadow: 0 2px #0b3a1d;
}
.shop-lucky__knop small
{
	font-size:12px;
}
/* de rode teller staat BINNEN de tegel: de rechterkolom raakt de rand van het
   scrollvlak, en alles daarbuiten wordt door overflow:auto afgeknipt */
/* De teller is dezelfde .badge-new als op de railknoppen — één taal voor
   "hier staat iets nieuws". Alleen de plek verschilt: de standaardpositie
   (right:10px, top:0) valt bij de rechterkolom buiten het scrollvlak en wordt
   dan afgeknipt, dus hier binnen de tegel. */
.shop-lucky__tegel .badge-new
{
	top:4px;
	right:4px;
	font-family:'headers';
	font-size:13px;
}


/* ══ 4 · HOT DEALS — automatisch doorschuivende carrousel ══════════════════ */

.shop-hot
{
	display:flex;
	gap:8px;
	overflow-x:auto;
	scroll-snap-type: x mandatory;
	padding:56px 14px 0;   /* 56px = de ruimte die de mascotte nodig heeft */
	scrollbar-width:none;
}
.shop-hot::-webkit-scrollbar
{
	height:0;
}
.shop-hot__slide
{
	flex:0 0 276px;
	box-sizing:border-box;
	scroll-snap-align:center;
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	border:1px solid #FFC107;
	border-radius:8px;
	text-decoration:none;
	color:#fff;
	cursor:pointer;
	/* de derde schaduw is een gloed in de eigen kleur van de kaart: die tilt
	   hem van de ondergrond en geeft de carrousel z'n etalage-uitstraling */
	box-shadow: inset 0 1px 0 #ffffff4d, 0 3px 0 #00000066, 0 0 20px #9a4dff40;
	/* diagonale drieklank: donker aan de bovenkant, oplichtend naar de
	   onderhoek — de kaart moet zich van de achtergrond lostrekken, anders
	   zweven de items in het niets */
	background: linear-gradient(170deg, #5b17a8 0%, #2a1050 55%, #9a4dff 100%);
}
/* elke volgende kaart een eigen kleur, zodat de carrousel leest als losse
   aanbiedingen en niet als één lange lap */
.shop-hot__slide:nth-child(4n+2)
{
	box-shadow: inset 0 1px 0 #ffffff4d, 0 3px 0 #00000066, 0 0 20px #ff5a2b40;
	background: linear-gradient(170deg, #7a1414 0%, #4a1010 55%, #a83a10 100%);
}
.shop-hot__slide:nth-child(4n+3)
{
	box-shadow: inset 0 1px 0 #ffffff4d, 0 3px 0 #00000066, 0 0 20px #2bb3c940;
	background: linear-gradient(170deg, #0f4c5c 0%, #0a2733 55%, #2bb3c9 100%);
}
.shop-hot__slide:nth-child(4n+4)
{
	box-shadow: inset 0 1px 0 #ffffff4d, 0 3px 0 #00000066, 0 0 20px #35c46a40;
	background: linear-gradient(170deg, #14562c 0%, #0b2d18 55%, #35c46a 100%);
}
/* Glans + glinstering. Twee lagen die alleen maar licht toevoegen, dus ze
   werken op alle vier de kleurvarianten zonder er per stuk aan te rekenen.

   Ze mogen de kaart NIET afsnijden: .shop-hot__pose steekt met een marge van
   -56px over de bovenrand heen, dus overflow:hidden op de kaart is geen optie.
   Vandaar dat de glinstering een verschuivende ACHTERGROND is binnen een vak
   van inset:0 — die blijft vanzelf binnen de kaart — en geen element dat er
   overheen schuift.

   De glinstering staat 45% van de cyclus stil (van 55% tot 100% dezelfde
   waarde). Een background-position-animatie tekent opnieuw en zit niet op de
   compositor; door hem het grootste deel van de tijd op één waarde te houden
   valt er in die periode niets te hertekenen. Dat scheelt op een carrousel die
   zelf ook al scrollt. */
.shop-hot__slide::before
{
	content:'';
	position:absolute;
	left:1px;
	right:1px;
	top:1px;
	height:36%;
	border-radius:7px 7px 0 0;
	background:linear-gradient(#ffffff3d, #ffffff00);
	pointer-events:none;
	z-index:0;
}
.shop-hot__slide::after
{
	content:'';
	position:absolute;
	inset:0;
	border-radius:8px;
	pointer-events:none;
	z-index:0;
	background:linear-gradient(100deg,
		#ffffff00 40%, #ffffff26 46%, #ffffff5c 50%, #ffffff26 54%, #ffffff00 60%);
	background-size:250% 100%;
	background-position:130% 0;
	animation: shopHotGlans 4.5s ease-in-out infinite;
}
/* niet alle vier tegelijk laten flitsen — dat leest als één lap i.p.v. als
   losse aanbiedingen, precies wat de kleurvarianten hieronder voorkomen */
.shop-hot__slide:nth-child(4n+2)::after { animation-delay:.7s; }
.shop-hot__slide:nth-child(4n+3)::after { animation-delay:1.4s; }
.shop-hot__slide:nth-child(4n+4)::after { animation-delay:2.1s; }
@keyframes shopHotGlans
{
	0%   { background-position:130% 0; }
	55%  { background-position:-30% 0; }
	100% { background-position:-30% 0; }
}
@media (prefers-reduced-motion: reduce)
{
	.shop-hot__slide::after { animation:none; background-position:-30% 0; }
}
/* de inhoud bovenop die twee lagen */
.shop-hot__slide > * { position:relative; z-index:1; }

.shop-hot__slide.is-uitverkocht
{
	border-color:#ffffff26;
	filter: saturate(.4) brightness(.8);
}
/* uitverkocht glimt niet mee: dat zou aandacht trekken naar wat niet meer kan */
.shop-hot__slide.is-uitverkocht::after { animation:none; opacity:0; }
.shop-hot__pose
{
	width:150px;
	height:150px;
	margin:-56px 0 0;   /* breekt over de bovenrand van de kaart heen */
	object-fit:contain;
	filter: drop-shadow(0 5px 8px #000000b3);
}
.shop-hot__titel
{
	font-family:'headers';
	font-size:22px;
	line-height:1;
	margin:-6px 0 0;
	text-align:center;
	padding:0 8px;
	text-shadow: 0 2px #000, 0 -1px #000, 1px 0 #000, -1px 0 #000;
}
.shop-hot__meta
{
	display:flex;
	align-items:center;
	gap:6px;
	padding:7px 0 0;
}
.shop-hot__chip
{
	font-family:'headers';
	font-size:9px;
	letter-spacing:1px;
	border:1px solid #000;
	border-radius:3px;
	padding:2px 5px 3px;
	background:#e2231a;
}
.shop-hot__chip.is-eenmalig { background:#1b7a3c; }
.shop-hot__chip.is-op       { background:#5a5a5a; }
.shop-hot__klok
{
	font-family:'headers';
	font-size:12px;
	color:#e0c9ff;
}
/* de strip met wat je krijgt — één tegel per item */
.shop-hot__items
{
	display:flex;
	gap:6px;
	padding:11px 10px 12px;
}
.shop-hot__item
{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:4px;
	width:74px;
	box-sizing:border-box;
	padding:6px 0 7px;
	border:1px solid #00000073;
	border-radius:5px;
}
.shop-hot__item.is-breed
{
	width:112px;
}
.shop-hot__item img
{
	width:38px;
	height:38px;
	object-fit:contain;
}
.shop-hot__item span
{
	position:relative;
	font-family:'headers';
	font-size:14px;
	line-height:1;
	color:#fff;
	padding:2px 3px 3px;
	white-space:nowrap;
	/* zelfde afweging als .shop-card__aantal: plaat eraf, halo eronder */
	text-shadow: 0 2px 0 #000, 0 0 5px #000000cc;
}
.shop-hot__prijs
{
	width:100%;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:8px 0 9px;
	border-top:1px solid #000;
	border-radius:0 0 7px 7px;
	font-family:'headers';
	font-size:17px;
	/* alle slides zijn even hoog (stretch), dus een kortere kaart hield anders
	   een strook eigen achtergrond onder de prijsbalk over */
	margin-top:auto;
}
.shop-hot__prijs img
{
	width:22px;
	height:22px;
}
.shop-hot__prijs s
{
	font-size:13px;
	opacity:.5;
}
/* euro's zijn groen, goud is goud */
.shop-hot__prijs.is-euro
{
	background:
		linear-gradient(180deg, #ffffffa6 0%, #ffffff33 42%, transparent 43%),
		linear-gradient(0deg, #1b7a3c 0%, #35c46a 100%);
	box-shadow: inset 0 -5px #0000003d, inset 0 1px 0 #ffffff8a;
	/* wit op groen — zelfde keuze als op de productkaart */
	color:#fff;
	text-shadow: 0 2px #0b3a1d;
}
.shop-hot__prijs.is-euro s { color:#ffffff8a; text-shadow:none; }
.shop-hot__prijs.is-goud
{
	background:
		linear-gradient(180deg, #ffffffa6 0%, #ffffff33 42%, transparent 43%),
		linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	box-shadow: inset 0 -5px #0000003d, inset 0 1px 0 #fff;
	color:#3a1c00;
}
.shop-hot__prijs.is-goud s { color:#3a1c0080; }


/* paginabolletjes onder de carrousel — één per aanbieding */
.shop-hot__dots
{
	display:flex;
	gap:4px;
	justify-content:center;
	padding:10px 0 0;
}
.shop-hot__dots i
{
	width:16px;
	height:3px;
	border-radius:2px;
	background:#ffffff33;
	transition: background .25s ease;
}
.shop-hot__dots i.is-active
{
	background:#FFC107;
}


/* ══ 5 · PRODUCTKAART ══════════════════════════════════════════════════════ */

.shop-grid
{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:12px;
	padding:14px 14px 0;
	box-sizing:border-box;
}
/* een losse kaart op een oneven laatste rij pakt de volle breedte */
.shop-grid > .shop-card:last-child:nth-child(odd)
{
	grid-column: span 2;
}

.shop-card
{
	position:relative;
	border:1px solid #000;
	border-radius:6px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	cursor:pointer;
	background:
		linear-gradient(177deg, #ffffff30 0%, #ffffff12 30%, transparent 31%),
		linear-gradient(180deg, #2e1450cc 0%, #1a0730e6 100%);
	box-shadow: inset 0 1px 0 #ffffff59, inset 0 -8px 12px #00000040, 0 2px 0 #00000059;
	text-shadow: 0 2px #000, 0 -1px #000, 1px 0 #000, -1px 0 #000;
}
.shop-card.is-featured
{
	border-color:#FFC107;
	background:
		linear-gradient(177deg, #ffffff3d 0%, #ffffff17 30%, transparent 31%),
		linear-gradient(180deg, #4a2170cc 0%, #25093ee6 100%);
	box-shadow: inset 0 1px 0 #ffffff73, inset 0 -8px 12px #00000040, 0 2px 0 #00000059;
}
.shop-card__body
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:7px;
	padding:16px 12px 14px;
	height:100%;
	box-sizing:border-box;
}
.shop-card__titel
{
	font-family:'headers';
	font-size:16px;
	line-height:1.05;
	text-align:center;
}
.shop-grid > .shop-card:last-child:nth-child(odd) .shop-card__titel
{
	font-size:19px;
}
.shop-card__art
{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:auto 0;
}
.shop-card__art img
{
	width:62px;
	height:62px;
	object-fit:contain;
	filter: drop-shadow(0 3px 4px #00000080);
}
/* Het aantal staat als eigen regel ONDER het beeld — gewoon in de flow, geen
   overlay. Het blokje (wit op zwart doorschijnend) blijft, want dat maakt het
   getal leesbaar op elke art. */
.shop-card__aantal
{
	position:relative;
	align-self:center;
	font-family:'headers';
	font-size:19px;
	line-height:1;
	color:#fff;
	padding:3px 4px 4px;
	white-space:nowrap;
	/* Zonder het zwarte plaatje moet de leesbaarheid uit de letter zelf komen:
	   de harde slagschaduw houdt de spelstijl, de zachte halo eronder vangt de
	   drukke plekken op die de plaat eerst afdekte. */
	text-shadow: 0 2px 0 #000, 0 0 6px #000000cc;
}
.shop-card__prijs
{
	width:100%;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	padding:7px;
	margin-top:auto;
	border-top:1px solid #000;
	font-family:'headers';
	font-size:20px;
}
.shop-card__prijs img
{
	width:22px;
	height:22px;
}
.shop-card__prijs.is-euro
{
	background:
		linear-gradient(180deg, #ffffffa6 0%, #ffffff33 42%, transparent 43%),
		linear-gradient(0deg, #1b7a3c 0%, #35c46a 100%);
	box-shadow: inset 0 -5px #0000003d, inset 0 1px 0 #ffffff8a;
	/* wit op groen: het donkere bruin dat op goud werkt verdwijnt hier */
	color:#fff;
	text-shadow: 0 2px #0b3a1d;
}
/* GEEN schaduw op de doorgestreepte prijs: die tekent de streep 2px lager nog
   eens over en dan lijkt het bedrag dubbel doorgehaald */
.shop-card__prijs.is-euro s
{
	color:#ffffff8a;
	text-shadow:none;
}
.shop-card__prijs.is-goud
{
	background:
		linear-gradient(180deg, #ffffffa6 0%, #ffffff33 42%, transparent 43%),
		linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	box-shadow: inset 0 -5px #0000003d, inset 0 1px 0 #fff;
	color:#3a1c00;
	text-shadow:none;
}
/* hoeklint: 10% off / MOST POPULAR / BEST VALUE — gevoed uit .tag */
.shop-card__lint
{
	position:absolute;
	top:0;
	right:0;
	z-index:2;
	background:#e2231a;
	border-radius:0 6px 0 6px;
	padding:3px 7px 4px;
	font-family:'headers';
	font-size:10px;
	line-height:1;
	text-shadow:none;
}


/* ══ 6 · PASSES — het bestaande .ticket-component, kleiner ═════════════════
   De app toont passen al als ticket (goud voor VIP); een platte icoon ernaast
   zou een tweede visuele taal introduceren. Het component meet 265x132 en
   draagt z'n eigen transform, dus die wordt hier overschreven.               */

.ticket-slot
{
	position:relative;
	width:118px;
	height:60px;
	flex:0 0 auto;
}
.ticket-slot .ticket
{
	position:absolute;
	left:0;
	top:0;
	transform: scale(.43) rotate(-2deg);
	transform-origin: top left;
	box-shadow:none;
	filter: drop-shadow(3px 3px 5px #00000059);
}
/* in de itemstrip van een hot deal past hij in een 74px-tegel */
.shop-hot__item .ticket-slot
{
	width:74px;
	height:38px;
}
.shop-hot__item .ticket-slot .ticket
{
	transform: scale(.27) rotate(-2deg);
}
/* de app toont factorypassen in magenta; het ticket kende alleen goud */
.ticket[data-variant="factory"]
{
	background:
		radial-gradient(ellipse farthest-corner at right bottom,
			#f7a8ff 0%, #d94dff 8%, #8b1fb8 30%, #6a1590 40%, transparent 80%),
		radial-gradient(ellipse farthest-corner at left top,
			#ffffff 0%, #f0b3ff 8%, #b455d1 25%, #4a0f66 62.5%, #4a0f66 100%);
}
/* een seizoenspas draagt SEASON in plaats van een maand; die tekst is langer,
   dus de verticale kolommen krijgen een kleinere letter */
.ticket[data-seizoen] p::after,
.ticket[data-seizoen] p::before
{
	font-size:15px;
}


/* ══ 7 · PANE ══════════════════════════════════════════════════════════════
   Het FEELING LUCKY?-blok en hot deals staan ÍN het scrollende tabblad (niet
   erboven): [tabcontent] is het element met overflow:auto, dus alles wat
   boven .tabs geplakt wordt is een vaste balk en duwt de productlijst uit
   beeld. Onderaan ruimte voor de vaste onderbalk.                            */

#shop [tabcontent] > .shop-pane
{
	padding-bottom: calc(90px + env(safe-area-inset-bottom));
}