/* Spellen-stijl voor Bordspellen (body.sd-spellen): het speelse thema van het begin.
   Koraal, zon, turquoise en druif; Fredoka-koppen; dikke inktranden met een "pop"-schaduw.
   Achtergrond blijft koel lichtgrijs (geen crème). Header en footer houden de Lorcana-huisstijl. */

@font-face {
	font-family: "Fredoka";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/fredoka-latin-wght-normal.woff2") format("woff2");
}

.sd-spellen {
	--sp-ink: #22223B;
	--sp-coral: #FF5A5F;
	--sp-sun: #FFC93C;
	--sp-teal: #2EC4B6;
	--sp-grape: #6C4AB6;
	--sp-coral-soft: #FFE1DF;
	--sp-teal-soft: #D5F4F1;
	--sp-grape-soft: #E8E0F7;
	--sp-sky-soft: #DCEBFF;
	--sp-pop: 5px 5px 0 var(--sp-ink);
	--sp-pop-hover: 8px 8px 0 var(--sp-ink);
	--sp-font: Fredoka, "Trebuchet MS", sans-serif;
}

.sd-spellen main :is(h1, h2, h3),
.sd-spellen main .wp-block-query-title,
.sd-spellen main .wp-block-post-title {
	font-family: var(--sp-font) !important;
	font-variant: normal;
	text-transform: none;
	letter-spacing: -.01em;
	font-weight: 600;
}

/* ---------- Banner ---------- */
.sd-spellen .sd-archive-banner {
	position: relative;
	overflow: hidden;
	min-height: 15rem;
	background: var(--sp-teal-soft) !important;
	background-image: radial-gradient(circle at 92% 115%, rgba(255,90,95,.18) 0 22%, transparent 22.2%), radial-gradient(circle at -4% -20%, rgba(108,74,182,.14) 0 20%, transparent 20.2%) !important;
	color: var(--sp-ink) !important;
	border: 3px solid var(--sp-ink);
	border-radius: 22px;
	box-shadow: var(--sp-pop);
}
.sd-spellen .sd-archive-banner .wp-block-query-title { color: var(--sp-ink); font-size: clamp(2.3rem, 5vw, 3.6rem) !important; line-height: 1.05; }
.sd-spellen .sd-archive-banner a { color: var(--sp-ink); text-decoration: underline; text-decoration-color: var(--sp-coral); text-underline-offset: 3px; }
.sd-spellen .sd-archive-banner .wp-block-term-description { color: #4A4866; max-width: 520px; font-size: 1.1rem; }
.sd-spellen .sd-archive-banner > :not(.sd-sp-art) { position: relative; z-index: 1; max-width: 58%; }
.sd-sp-art { position: absolute; right: 3%; top: 50%; width: min(265px, 30%); transform: translateY(-50%); pointer-events: none; }
.sd-sp-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.sd-sp-card, .sd-sp-die, .sd-sp-meeple { transform-box: fill-box; transform-origin: center; }
.sd-sp-card-1 { animation: sd-sp-fan-1 .7s cubic-bezier(.3,1.5,.5,1) both; }
.sd-sp-card-2 { animation: sd-sp-fan-2 .7s .08s cubic-bezier(.3,1.5,.5,1) both; }
.sd-sp-card-3 { animation: sd-sp-fan-3 .7s .16s cubic-bezier(.3,1.5,.5,1) both; }
.sd-sp-die-1 { animation: sd-sp-bob 4.2s ease-in-out infinite; }
.sd-sp-die-2 { animation: sd-sp-bob 3.6s .7s ease-in-out infinite reverse; }
.sd-sp-meeple { animation: sd-sp-hop 2.8s 1s ease-in-out infinite; }
@keyframes sd-sp-fan-1 { from { opacity: 0; transform: translateY(30px) rotate(-30deg); } to { opacity: 1; } }
@keyframes sd-sp-fan-2 { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; } }
@keyframes sd-sp-fan-3 { from { opacity: 0; transform: translateY(30px) rotate(25deg); } to { opacity: 1; } }
@keyframes sd-sp-bob { 50% { transform: translateY(-9px) rotate(6deg); } }
@keyframes sd-sp-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-14px); } 90% { transform: translateY(0) scaleY(.94); } }
@media (prefers-reduced-motion: reduce) {
	.sd-sp-art * { animation: none !important; }
}

/* ---------- Waar heb je zin in? (alleen op Bordspellen) ---------- */
.sd-sp-cats { margin: 0 auto 2.4rem; }
.sd-sp-cats h2 { margin: 0 0 1rem; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--sp-ink); }
.sd-sp-cats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.sd-sp-cat > a, .sd-sp-cat > div {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	height: 100%;
	box-sizing: border-box;
	padding: 1rem 1.1rem 1.1rem;
	border: 3px solid var(--sp-ink);
	border-radius: 18px;
	background: var(--sp-coral-soft);
	color: var(--sp-ink);
	text-decoration: none;
	box-shadow: var(--sp-pop);
	transition: transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s ease;
}
.sd-sp-cat.is-c1 > * { background: var(--sp-teal-soft); }
.sd-sp-cat.is-c2 > * { background: var(--sp-grape-soft); }
.sd-sp-cat.is-c3 > * { background: var(--sp-sky-soft); }
.sd-sp-cat:nth-child(odd) > a:hover { transform: translate(-3px, -3px) rotate(-1.2deg); box-shadow: var(--sp-pop-hover); }
.sd-sp-cat:nth-child(even) > a:hover { transform: translate(-3px, -3px) rotate(1.2deg); box-shadow: var(--sp-pop-hover); }
.sd-sp-cat > a:focus-visible { outline: 3px solid var(--sp-coral); outline-offset: 3px; }
.sd-sp-cat-icon { display: block; line-height: 0; margin-bottom: .35rem; }
.sd-sp-cat-icon .sd-icon { width: 2.6rem; height: 2.6rem; }
.sd-sp-cat > a:hover .sd-icon { animation: sd-sp-wiggle .5s ease; }
@keyframes sd-sp-wiggle { 30% { transform: rotate(-10deg) scale(1.08); } 65% { transform: rotate(7deg); } }
.sd-sp-cat strong { font-family: var(--sp-font); font-weight: 600; font-size: 1.2rem; }
.sd-sp-cat span:not(.sd-sp-cat-icon) { font-size: .9rem; line-height: 1.4; color: #4A4866; }
.sd-sp-cat em { position: absolute; top: .8rem; right: .8rem; padding: .15rem .55rem; border: 2px solid var(--sp-ink); border-radius: 99px; background: #fff; font-style: normal; font-size: .75rem; font-weight: 800; }
.sd-sp-cat.is-soon > div { box-shadow: none; border-style: dashed; opacity: .75; }
.sd-sp-cat.is-soon em { border-style: dashed; color: #5E5C78; }

/* ---------- Producttegels ---------- */
.sd-spellen .wc-block-product {
	border: 3px solid var(--sp-ink) !important;
	border-radius: 18px !important;
	background: #fff;
	box-shadow: var(--sp-pop) !important;
	transition: transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s ease !important;
}
.sd-spellen .wc-block-product:hover { transform: translate(-3px, -3px) rotate(-.8deg); box-shadow: var(--sp-pop-hover) !important; border-color: var(--sp-ink) !important; }
.sd-spellen .wc-block-product:nth-child(even):hover { transform: translate(-3px, -3px) rotate(.8deg); }
.sd-spellen .wc-block-product:not(.product_cat-losse-kaarten) .wc-block-components-product-image {
	background: var(--sp-coral-soft) !important;
	border: 2px solid var(--sp-ink);
	border-radius: 12px;
}
.sd-spellen .wc-block-product:nth-child(4n+2) .wc-block-components-product-image { background: var(--sp-teal-soft) !important; }
.sd-spellen .wc-block-product:nth-child(4n+3) .wc-block-components-product-image { background: var(--sp-grape-soft) !important; }
.sd-spellen .wc-block-product:nth-child(4n+4) .wc-block-components-product-image { background: var(--sp-sky-soft) !important; }
.sd-spellen .wc-block-components-product-image::after { display: none; }
.sd-spellen .wc-block-product .wp-block-post-title { font-size: 1.15rem !important; line-height: 1.2; }
.sd-spellen .wc-block-product .wp-block-post-title a { color: var(--sp-ink); }
.sd-spellen .wc-block-product .wc-block-components-product-price { font-family: var(--sp-font); font-weight: 600; font-size: 1.2rem; color: var(--sp-ink); }

/* Knoppen: koraal met pop-schaduw */
.sd-spellen main .wc-block-components-product-button__button,
.sd-spellen main .wp-block-button__link,
.sd-spellen main .single_add_to_cart_button,
.sd-spellen main .wc-block-components-product-button .add_to_cart_button {
	background: var(--sp-coral) !important;
	color: #fff !important;
	border: 3px solid var(--sp-ink) !important;
	border-radius: 99px !important;
	font-family: var(--sp-font) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	box-shadow: 4px 4px 0 var(--sp-ink) !important;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.sd-spellen main :is(.wc-block-components-product-button__button, .wp-block-button__link, .single_add_to_cart_button, .add_to_cart_button):hover {
	background: #FF7276 !important;
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--sp-ink) !important;
}
.sd-spellen main :is(.wc-block-components-product-button__button, .wp-block-button__link, .single_add_to_cart_button, .add_to_cart_button):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sp-ink) !important; }

/* Sorteren en aantal */
.sd-spellen .woocommerce-ordering select,
.sd-spellen .wc-block-catalog-sorting select,
.sd-spellen .quantity .qty { border: 2px solid var(--sp-ink) !important; border-radius: 12px !important; }
.sd-spellen .wp-block-query-pagination .current { background: var(--sp-coral); color: #fff; border-radius: 50%; }
.sd-spellen .sd-empty { border: 3px dashed var(--sp-ink); border-radius: 18px; background: #fff; }

/* ---------- Productpagina ---------- */
.sd-spellen:not(.sd-single-card) .sd-product-media .woocommerce-product-gallery__image {
	background: var(--sp-coral-soft) !important;
	background-image: radial-gradient(circle at 88% 12%, var(--sp-sun) 0 9%, transparent 9.3%), radial-gradient(circle at 8% 92%, rgba(46,196,182,.55) 0 12%, transparent 12.3%) !important;
	border: 3px solid var(--sp-ink);
	border-radius: 22px !important;
	box-shadow: var(--sp-pop) !important;
}
.sd-spellen .sd-product-media .woocommerce-product-gallery__image img { border-radius: 0 !important; }
.sd-spellen .sd-product-media .flex-control-thumbs img { border: 2px solid var(--sp-ink); border-radius: 10px; }
.sd-spellen .sd-product-cat, .sd-spellen .sd-product-cat a { color: var(--sp-grape); font-family: var(--sp-font); font-weight: 600; letter-spacing: .02em; }
.sd-spellen .sd-product-info .wc-block-components-product-price,
.sd-spellen .sd-product-info .price { font-family: var(--sp-font); font-weight: 600; color: var(--sp-ink) !important; }
.sd-spellen .sd-product-service li::before { background: var(--sp-teal); clip-path: circle(50%); }
.sd-spellen .woocommerce-tabs .wc-tabs li.active a,
.sd-spellen .wc-tabs li.active { border-color: var(--sp-coral) !important; }
.sd-spellen .woocommerce-tabs .wc-tabs li a { font-family: var(--sp-font); font-weight: 600; }

@media (max-width: 900px) {
	.sd-sp-cats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.sd-spellen .sd-archive-banner > :not(.sd-sp-art) { max-width: none; }
	.sd-spellen .sd-archive-banner { padding-bottom: 9.5rem !important; }
	.sd-sp-art { top: auto; bottom: -1.2rem; right: 50%; width: 190px; transform: translateX(50%); }
}
@media (max-width: 420px) {
	.sd-sp-cats ul { gap: .8rem; }
	.sd-sp-cat > a, .sd-sp-cat > div { padding: .85rem .8rem .9rem; }
	.sd-sp-cat em { position: static; align-self: flex-start; margin-top: .4rem; }
}

/* ---------- Speelinfo (productpagina) ---------- */
.sd-speelinfo { display: grid; gap: .9rem; margin: 1.1rem 0 1.3rem; }
.sd-spel-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .8rem; max-width: 520px; }
.sd-spel-stat {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: .55rem;
	align-items: center;
	padding: .6rem .75rem;
	border: 3px solid var(--sp-ink);
	border-radius: 16px;
	background: var(--sp-coral-soft);
	box-shadow: 4px 4px 0 var(--sp-ink);
	color: var(--sp-ink);
	transition: transform .2s cubic-bezier(.3,1.6,.5,1);
}
.sd-spel-stat:hover { transform: translate(-2px, -2px) rotate(-1.5deg); }
.sd-spel-stat.is-speelduur { background: var(--sp-teal-soft); }
.sd-spel-stat.is-leeftijd { background: var(--sp-grape-soft); }
.sd-spel-stat svg { grid-row: 1 / 3; width: 2.4rem; height: 2.4rem; }
.sd-spel-stat strong { font-family: var(--sp-font); font-weight: 600; font-size: 1.45rem; line-height: 1; white-space: nowrap; }
.sd-spel-stat span { font-size: .78rem; font-weight: 700; color: #4A4866; line-height: 1.2; }

.sd-spel-meters { display: grid; gap: .5rem; max-width: 520px; padding: .8rem 1rem; border: 3px solid var(--sp-ink); border-radius: 16px; background: #fff; box-shadow: 4px 4px 0 var(--sp-ink); }
.sd-spel-meter { display: grid; grid-template-columns: 6.2rem auto 1fr; align-items: center; gap: .7rem; }
.sd-spel-meter-label .sd-icon { width: 1.5rem; height: 1.5rem; flex: none; }
.sd-spel-meter-label { display: flex; align-items: center; gap: .35rem; font-family: var(--sp-font); font-weight: 600; font-size: 1.02rem; color: var(--sp-ink); }
.sd-spel-pips { display: flex; gap: .3rem; }
.sd-spel-pips i { width: 1.15rem; height: 1.15rem; border: 2.5px solid var(--sp-ink); border-radius: 50%; background: #fff; }
.sd-spel-meter.is-tactiek .sd-spel-pips i.is-on { background: var(--sp-grape); }
.sd-spel-meter.is-geluk .sd-spel-pips i { border-radius: 5px; }
.sd-spel-meter.is-geluk .sd-spel-pips i.is-on { background: var(--sp-sun); }
.sd-spel-pips i.is-on { animation: sd-sp-pip .35s cubic-bezier(.3,1.8,.5,1) both; }
.sd-spel-pips i:nth-child(2) { animation-delay: .06s; } .sd-spel-pips i:nth-child(3) { animation-delay: .12s; }
.sd-spel-pips i:nth-child(4) { animation-delay: .18s; } .sd-spel-pips i:nth-child(5) { animation-delay: .24s; }
@keyframes sd-sp-pip { from { transform: scale(.3); } }
.sd-spel-meter em { font-style: normal; font-size: .85rem; font-weight: 700; color: #4A4866; }
.sd-spel-balance { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; margin-top: .35rem; padding-top: .6rem; border-top: 2px dashed #D5D3E3; font-size: .8rem; font-weight: 800; color: #4A4866; }
.sd-spel-balance b { position: relative; height: .7rem; border: 2.5px solid var(--sp-ink); border-radius: 99px; background: linear-gradient(90deg, var(--sp-grape), var(--sp-teal) 50%, var(--sp-sun)); }
.sd-spel-balance b i { position: absolute; top: 50%; width: 1.1rem; height: 1.1rem; border: 2.5px solid var(--sp-ink); border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) { .sd-spel-pips i { animation: none !important; } }
@media (max-width: 480px) {
	.sd-spel-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
	.sd-spel-stat { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: .55rem .3rem; }
	.sd-spel-stat svg { grid-row: auto; width: 2rem; height: 2rem; margin-bottom: .2rem; }
	.sd-spel-stat strong { font-size: 1.2rem; }
	.sd-spel-meter { grid-template-columns: 5.4rem auto; }
	.sd-spel-meter em { grid-column: 2; margin-top: -.3rem; }
}

/* ---------- Labels op de producttegels ---------- */
.sd-spel-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .5rem; }
.sd-spel-chips span { padding: .1rem .5rem; border: 2px solid var(--sp-ink); border-radius: 99px; background: var(--sp-coral-soft); font-size: .74rem; font-weight: 800; color: var(--sp-ink); white-space: nowrap; }
.sd-spel-chips .is-speelduur { background: var(--sp-teal-soft); }
.sd-spel-chips .is-leeftijd { background: var(--sp-grape-soft); }
.sd-spel-chips .sd-icon { width: 1.15em; height: 1.15em; margin: 0 .25em 0 -.1em; vertical-align: -.25em; }

/* ---------- Header en footer in het spellendeel ---------- */
.sd-spellen .sd-topbar { background: var(--sp-ink) !important; color: var(--sp-sun) !important; font-family: var(--sp-font); font-weight: 500 !important; letter-spacing: 0; }
.sd-spellen .sd-header { background: #fff !important; color: var(--sp-ink) !important; border-bottom: 3px solid var(--sp-ink); border-image: none; }
.sd-spellen .sd-header :is(a, .wp-block-navigation-item__content, .wp-block-navigation__responsive-container-open, .wp-block-search__button, .wc-block-mini-cart__button, .wc-block-customer-account a) { color: var(--sp-ink) !important; }
.sd-spellen .sd-header .wc-block-mini-cart__icon, .sd-spellen .sd-header .wc-block-customer-account svg { color: var(--sp-ink) !important; fill: currentColor; }
.sd-spellen .sd-header .wc-block-mini-cart__badge { background: var(--sp-coral) !important; color: #fff !important; }
.sd-spellen .sd-brand .wp-block-site-title a { color: var(--sp-ink) !important; font-family: var(--sp-font) !important; font-weight: 600; font-variant: normal; text-transform: none; letter-spacing: -.01em; }
.sd-spellen .sd-brand:hover .sd-logo { transform: rotate(-14deg) scale(1.08); filter: none; }
.sd-spellen .sd-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-family: var(--sp-font); font-weight: 500; font-size: 1.05rem; background-image: linear-gradient(var(--sp-coral), var(--sp-coral)); background-size: 0 3px; }
.sd-spellen .sd-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content { background-size: 100% 3px; color: var(--sp-ink) !important; }
.sd-spellen .sd-nav .wp-block-navigation__submenu-container { background: #fff !important; color: var(--sp-ink) !important; border: 3px solid var(--sp-ink) !important; border-radius: 14px; box-shadow: var(--sp-pop); }
.sd-spellen .sd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover { background: var(--sp-coral-soft); }
.sd-spellen .sd-nav .wp-block-navigation__responsive-container.is-menu-open { background: #fff !important; color: var(--sp-ink) !important; }
.sd-spellen .sd-nav .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { color: var(--sp-coral) !important; font-family: var(--sp-font) !important; font-weight: 600; }
.sd-spellen .sd-nav .is-menu-open .sd-nav-group > .wp-block-navigation-item__content { color: var(--sp-grape) !important; }
.sd-spellen .sd-nav .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; }
.sd-spellen .sd-search .wp-block-search__input { border: 2px solid var(--sp-ink); }

.sd-spellen .sd-footer { position: relative; margin-top: 2.6rem !important; background: var(--sp-ink) !important; background-image: none !important; border: 0; border-image: none; }
.sd-spellen .sd-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 16px; background: radial-gradient(circle at 12px 16px, var(--sp-ink) 11px, transparent 11.5px) 0 0 / 24px 16px repeat-x; }
.sd-spellen .sd-footer :is(h3, .wp-block-site-title, .wp-block-site-title a) { color: var(--sp-sun) !important; font-family: var(--sp-font) !important; font-weight: 600; font-variant: normal; text-transform: none; letter-spacing: 0; }
.sd-spellen .sd-footer-list a:hover { color: var(--sp-sun) !important; }
.sd-spellen .sd-footer-sep { border-color: rgba(255,255,255,.15) !important; }
.sd-spellen .sd-pay li { border: 0; background: #fff; color: var(--sp-ink); border-radius: 8px; }
.sd-spellen .sd-chat-btn { background: var(--sp-coral); color: #fff; border: 3px solid var(--sp-ink); box-shadow: 4px 4px 0 var(--sp-ink); font-family: var(--sp-font); font-weight: 600; }
.sd-spellen .sd-chat-btn svg { color: #fff; }

/* Knop naar de spellenzoeker in de banner */
.sd-sp-zoek { position: relative; z-index: 1; margin: 1.1rem 0 0; }
.sd-spellen .sd-archive-banner a.sd-sp-zoek-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem .6rem .8rem; border: 3px solid var(--sp-ink); border-radius: 99px; background: var(--sp-sun); color: var(--sp-ink); font-family: var(--sp-font); font-weight: 600; font-size: 1.05rem; text-decoration: none; box-shadow: 4px 4px 0 var(--sp-ink); transition: transform .15s ease, box-shadow .15s ease; }
.sd-spellen .sd-archive-banner a.sd-sp-zoek-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sp-ink); }
.sd-sp-zoek-btn .sd-icon { width: 1.6rem; height: 1.6rem; }

/* ---------- Spellenzoeker ---------- */
.sd-spellen main:has(.sd-zk) { margin-top: 0 !important; }
.sd-spellen main:has(.sd-zk) > .wp-block-post-title, .sd-spellen main:has(.sd-zk) .wp-block-post-title:not(.sd-zk *) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sd-zk { margin-top: var(--wp--preset--spacing--30); }
.sd-zk-banner { padding: clamp(1.5rem, 4vw, 2.6rem) clamp(1.3rem, 4vw, 2.6rem); margin-bottom: 2rem; }
.sd-zk-banner h1 { margin: .2rem 0 .5rem; }
.sd-zk-kicker { margin: 0; font-family: var(--sp-font); font-weight: 600; color: var(--sp-coral); }
.sd-zk-layout { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 2rem; align-items: start; }
.sd-zk-form { display: grid; gap: 1rem; position: sticky; top: 7rem; }
.sd-zk-q { margin: 0; padding: .9rem 1rem 1rem; border: 3px solid var(--sp-ink); border-radius: 18px; background: #fff; box-shadow: 4px 4px 0 var(--sp-ink); }
.sd-zk-q legend { float: left; width: 100%; display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; padding: 0; font-family: var(--sp-font); font-weight: 600; font-size: 1.12rem; color: var(--sp-ink); }
.sd-zk-q legend .sd-icon { width: 2.1rem; height: 2.1rem; flex: none; }
.sd-zk-q legend small { display: block; font-family: var(--wp--preset--font-family--nunito); font-weight: 600; font-size: .78rem; color: #5E5C78; }
.sd-zk-opts { clear: both; display: flex; flex-wrap: wrap; gap: .45rem; }
.sd-zk-opts button { display: grid; justify-items: center; min-width: 2.7rem; padding: .45rem .7rem; border: 2.5px solid var(--sp-ink); border-radius: 12px; background: #fff; color: var(--sp-ink); font: 600 1rem/1.1 var(--sp-font); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.sd-zk-opts.is-wide button { flex: 1 1 calc(50% - .45rem); }
.sd-zk-opts button small { font-family: var(--wp--preset--font-family--nunito); font-weight: 700; font-size: .7rem; color: #5E5C78; margin-top: .15rem; }
.sd-zk-opts button:hover { background: var(--sp-coral-soft); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--sp-ink); }
.sd-zk-opts button[aria-pressed="true"] { background: var(--sp-coral); color: #fff; box-shadow: 3px 3px 0 var(--sp-ink); }
.sd-zk-opts button[aria-pressed="true"] small { color: #fff; }
.sd-zk-opts button:focus-visible { outline: 3px solid var(--sp-teal); outline-offset: 2px; }
.sd-zk-reset { margin: 0; }
.sd-zk-reset button { border: 0; background: none; padding: 0; color: var(--sp-ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--sp-coral); text-underline-offset: 3px; cursor: pointer; }
.sd-zk-count { margin: 0 0 1rem; font-size: 1.1rem; }
.sd-zk-count strong { font-family: var(--sp-font); font-size: 1.5rem; color: var(--sp-coral); }
.sd-zk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.1rem; }
.sd-zk-item a { display: flex; flex-direction: column; gap: .35rem; height: 100%; box-sizing: border-box; padding: .7rem .7rem .9rem; border: 3px solid var(--sp-ink); border-radius: 18px; background: #fff; color: var(--sp-ink); text-decoration: none; box-shadow: var(--sp-pop); animation: sd-zk-in .3s ease both; transition: transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s ease; }
.sd-zk-item a:hover { transform: translate(-3px, -3px) rotate(-.8deg); box-shadow: var(--sp-pop-hover); }
@keyframes sd-zk-in { from { opacity: 0; transform: translateY(8px); } }
.sd-zk-img { display: block; border: 2px solid var(--sp-ink); border-radius: 12px; background: var(--sp-coral-soft); }
.sd-zk-item:nth-child(4n+2) .sd-zk-img { background: var(--sp-teal-soft); }
.sd-zk-item:nth-child(4n+3) .sd-zk-img { background: var(--sp-grape-soft); }
.sd-zk-item:nth-child(4n+4) .sd-zk-img { background: var(--sp-sky-soft); }
.sd-zk-img img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8%; box-sizing: border-box; }
.sd-zk-item strong { font-family: var(--sp-font); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.sd-zk-item .sd-spel-chips { margin: 0; }
.sd-zk-price { font-family: var(--sp-font); font-weight: 600; margin-top: auto; }
.sd-zk-unknown, .sd-zk-out { font-style: normal; font-size: .75rem; font-weight: 700; color: #5E5C78; }
.sd-zk-maybe { margin-top: 2.2rem; }
.sd-zk-maybe h2 { margin: 0; font-size: 1.5rem; }
.sd-zk-maybe > p { margin: .2rem 0 1rem; color: #5E5C78; }
.sd-zk-maybe .sd-zk-item a { box-shadow: none; border-style: dashed; }
.sd-zk-none { padding: 1.4rem; border: 3px dashed var(--sp-ink); border-radius: 18px; background: #fff; }
.sd-zk-none p { margin: 0; }
.sd-zk-jump { display: none; }
@media (max-width: 900px) {
	.sd-zk-layout { grid-template-columns: 1fr; }
	.sd-zk-form { position: static; }
	.sd-zk-res { scroll-margin-top: 6rem; }
	.sd-zk-jump:not([hidden]) { display: block; position: fixed; left: 1rem; bottom: 1rem; z-index: 9980; padding: .75rem 1.2rem; border: 3px solid var(--sp-ink); border-radius: 99px; background: var(--sp-sun); color: var(--sp-ink); font: 600 1rem/1 var(--sp-font); box-shadow: 4px 4px 0 var(--sp-ink); cursor: pointer; }
}
@media (max-width: 480px) {
	.sd-zk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
	.sd-zk-item strong { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .sd-zk-item a { animation: none; } }