/*
Theme Name: PokaTheme Child
Template: pokatheme
Version: 1.0.0
*/

/* Add your custom styles here */

/* Mobile menu "back" bar (mmenu-light — vendor/_mmenu.scss). The theme's
   own .mm-spn--navbar rules render a back-chevron + submenu title at the
   top of a drilled-into panel (e.g. "Platforms"), but at opacity:0.4 with
   no background it's effectively invisible on a white panel — users can't
   tell there's a way back, even though the whole bar is already clickable
   (mmenu-light handles the back navigation natively, no JS change needed
   here — this is purely a visibility fix).

   IMPORTANT: background/color must be set on the :before/:after
   PSEUDO-ELEMENTS, not on the .mm-spn.mm-spn--navbar host itself. That host
   selector IS the whole <nav id="header-mobile-menu"> element (100% height,
   wraps the entire menu, not just the top bar). vendor/_mmenu.scss uses
   `background: inherit` on .mm-spn ul/li and `color: inherit` on .mm-spn a,
   so a background/color declared on the host cascades down and recolors
   every submenu list item and link in the whole drawer instead of just
   showing a distinct strip at the top — the "bar" ends up the same colour
   as everything below it, so it never reads as a tappable back button even
   though the tap target was technically still there and functional. Scoping
   the paint to :after (already absolutely positioned to exactly the top
   50px band: top:0/left:0/right:0/height:var(--mm-spn-item-height)) keeps
   it fully self-contained. */
.mm-spn.mm-spn--navbar {
	cursor: pointer;
}
.mm-spn.mm-spn--navbar:before {
	opacity: 1;
	border-color: #1B2A41;
	width: 12px;
	height: 12px;
	border-top-width: 3px;
	border-left-width: 3px;
}
.mm-spn.mm-spn--navbar:after {
	opacity: 1;
	background: #F2F3F5;
	border-bottom: 1px solid #ddd;
	color: #1B2A41;
	font-weight: 700;
}

/* True full-bleed helper for blocks — add "ccp-hero-band" as an Additional
   CSS class in the block editor (Advanced panel) instead of using the
   block's own Wide/Full alignment, which this theme implements as
   margin: 0 calc(-1 * padding) (only cancels the container's own padding,
   not a real 100vw edge-to-edge stretch). This does a genuine full-bleed. */
.ccp-hero-band {
	/* !important needed to beat the theme's own
	   .wp-site-blocks > * { max-width:...; margin-left/right: auto !important; }
	   rule, which otherwise re-centers and caps this block's width since
	   it's a direct child of <main class="wp-site-blocks">. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
	padding: 60px var(--container-pad, 15px);
}
/* Keep the inner content (Columns block etc.) at the site's normal reading
   width, centered — otherwise it stretches edge-to-edge along with the
   background and the heading/paragraph/image get uncomfortably wide. */
.ccp-hero-band > .wp-block-columns,
.ccp-hero-band > .wp-block-group__inner-container {
	max-width: var(--container-width, 1210px);
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Homepage — shared section rhythm
   ========================================================================== */
.ccp-home section {
	margin: 56px 0;
}
.ccp-home section h2 {
	font-size: 1.5em;
	color: #1A1D23;
	margin: 0 0 20px;
}

/* Explora por categoría — fixed 4-column grid (8 categories = 2 clean
   rows), collapsing to 2 then 1 column on smaller screens. */
.ccp-home-categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 28px;
}
@media (max-width: 900px) {
	.ccp-home-categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.ccp-home-categories-grid {
		grid-template-columns: 1fr;
	}
}
.ccp-home-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 22px 16px;
	background: #F2F3F5;
	border-radius: 8px;
	color: #1A1D23;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 2px 10px rgba(26, 29, 35, 0.06);
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ccp-home-category-card:hover {
	box-shadow: 0 6px 16px rgba(26, 29, 35, 0.14);
	transform: translateY(-2px);
}
.ccp-home-category-icon {
	color: #1B2A41;
	transition: color 0.15s ease;
}
.ccp-home-category-card:hover .ccp-home-category-icon {
	color: #FFFFFF;
}
.ccp-home-category-card:hover {
	background: #1B2A41;
	color: #FFFFFF;
}

/* [affiliates_list columns="4"] (native parent-theme shortcode/block,
   used for the homepage's main "Slot Reviews" grid) uses Bootstrap-style
   .col-3/.col-lg-4/.col-md-6/.col-sm-12 wrappers whose breakpoints are
   max-width based (desktop-first) and don't line up cleanly with how wide
   this theme's own .container actually renders — cards were showing 2-3
   per row well above the width where 4 should still fit, reading as
   "too big". Targets the shortcode's own data-columns="4" attribute (see
   affiliates_list_sc() in affiliates-shortcodes.php), so this only
   affects instances that explicitly asked for 4 columns — a 2, 3, or 6
   column instance elsewhere on the site is untouched. Forces a real,
   predictable CSS grid instead of fighting the native breakpoints. */
.jsReviewsList[data-columns="4"] {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px !important;
}
.jsReviewsList[data-columns="4"] > [class*="col-"] {
	max-width: 100% !important;
	flex: none !important;
	width: auto !important;
}
@media (max-width: 900px) {
	.jsReviewsList[data-columns="4"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 480px) {
	.jsReviewsList[data-columns="4"] {
		grid-template-columns: 1fr !important;
	}
}

/* Cursos destacados / Mejor valorados — shared course grid */
.ccp-home-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
	margin-bottom: 20px;
}
/* Bigger featured cards get more room per column than the compact ones. */
.ccp-category-top-courses {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
}
/* Tablet: force exactly 2 columns and let the first card (top result) span
   full width above the other two, instead of leaving a lone card stranded
   next to empty space. */
@media (min-width: 600px) and (max-width: 1023px) {
	.ccp-category-top-courses {
		grid-template-columns: repeat(2, 1fr);
	}
	.ccp-category-top-courses > :first-child {
		grid-column: 1 / -1;
	}
}
/* Phone: the base auto-fill minmax(320px,1fr) floor is wider than the
   available content width on a 320-375px screen (container padding alone
   leaves well under 320px), which would otherwise pin the grid to a
   too-wide single track and push it past the viewport edge. Force an
   explicit single column so cards just stack full-width instead. */
@media (max-width: 599px) {
	.ccp-category-top-courses {
		grid-template-columns: 1fr;
	}
}

/* [top_rated_slots] on the home page — a separate modifier from
   .ccp-category-top-courses (shared with the Category archive template,
   which keeps 3 columns since it still has a sidebar competing for width).
   The home page has no sidebar, so this gets a straight 4-up grid instead
   of the auto-fill/minmax floor. */
.ssv-home-top-rated-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 999px) {
	.ssv-home-top-rated-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 420px) {
	.ssv-home-top-rated-grid {
		grid-template-columns: 1fr;
	}
}

/* Provider (taxonomy-slot-provider.php) and Category
   (taxonomy-product_type.php) archives — shared 4-column variant,
   replacing .ccp-category-top-courses's 3-column auto-fill on both. */
.ssv-taxonomy-archive-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 999px) {
	.ssv-taxonomy-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 420px) {
	.ssv-taxonomy-archive-grid {
		grid-template-columns: 1fr;
	}
}

.ccp-home-see-all {
	display: inline-block;
	color: #D4A72C;
	font-weight: 700;
	text-decoration: underline;
}

/* [filterable_courses] — title (left) + Top Rated/Recent/Free pills (right)
   with an AJAX-swapped grid of compact cards below. */
.ccp-filterable-courses-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}
.ccp-filterable-courses-title {
	margin: 0;
	color: #1A1D23;
}
.ccp-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* [home_tags]: pills sit alone (no title), so they need their own
   bottom margin before the grid — .ccp-filterable-courses-head normally
   provided that, but there's no head wrapper here. */
.ccp-home-tags-pills {
	margin-bottom: 24px;
}
@media (max-width: 600px) {
	.ccp-filterable-courses-head {
		flex-direction: column;
		align-items: flex-start;
	}
}
.ccp-filter-pill {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid #5C6773;
	color: #1B2A41;
	background: #F2F3F5;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ccp-filter-pill:hover {
	border-color: #1B2A41;
	background: #FFFFFF;
}
.ccp-filter-pill.is-active {
	background: #1B2A41;
	border-color: #1B2A41;
	color: #FFFFFF;
}
.ccp-filterable-courses-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	transition: opacity 0.15s ease;
}
@media (max-width: 999px) {
	.ccp-filterable-courses-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 420px) {
	.ccp-filterable-courses-grid {
		grid-template-columns: 1fr;
	}
}
.ccp-filterable-courses-empty {
	color: #5C6773;
}

/* Explora por plataforma — horizontal carousel */
.ccp-platform-carousel {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ccp-platform-carousel-nav {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 1px solid #F2F3F5;
	border-radius: 50%;
	color: #1B2A41;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(26, 29, 35, 0.08);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.ccp-platform-carousel-nav:hover {
	border-color: #1B2A41;
	transform: translateY(-1px);
}
@media (max-width: 600px) {
	.ccp-platform-carousel-nav {
		display: none;
	}
}
.ccp-home-platforms-grid {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 16px;
	/* overflow-x:auto implicitly turns overflow-y into 'auto' too (per the
	   CSS overflow computed-value rule), so this track clips its own
	   children — without this padding, the hover state's translateY(-3px)
	   lift + border get cut off at the top. */
	padding: 6px 2px 10px;
	margin: -6px -2px -10px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ccp-home-platforms-grid::-webkit-scrollbar {
	display: none;
}
/* [all_providers] (the "All Providers" directory page) reuses
   .ccp-home-platform-card's own styling but needs a real wrapping grid
   instead of .ccp-home-platforms-grid's horizontal-scroll carousel
   behavior — a full 29-provider directory should be scannable at a
   glance, not a strip to scroll through. flex/overflow/scroll-snap are
   overridden back off; the card's own `flex: 0 0 ...` (carousel-basis)
   is simply ignored once its parent is a grid, no override needed there. */
.ssv-all-providers-grid {
	display: grid !important;
	flex-wrap: unset !important;
	overflow: visible !important;
	scroll-snap-type: none !important;
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 999px) {
	.ssv-all-providers-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 599px) {
	.ssv-all-providers-grid {
		grid-template-columns: 1fr;
	}
}
.ccp-home-platform-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* 5 cards per view on desktop: subtract the 4 gaps between them (16px
	   each) from the track width, then divide by 5. */
	flex: 0 0 calc((100% - 64px) / 5);
	scroll-snap-align: start;
	padding: 30px 20px;
	background: #FFFFFF;
	border: 1px solid #F2F3F5;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(26, 29, 35, 0.08);
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ccp-home-platform-card:hover {
	border-color: #1B2A41;
	box-shadow: 0 8px 20px rgba(26, 29, 35, 0.16);
	transform: translateY(-3px);
}
@media (max-width: 1023px) {
	.ccp-home-platform-card {
		/* 3 per view: 2 gaps of 16px. */
		flex-basis: calc((100% - 32px) / 3);
	}
}
@media (max-width: 600px) {
	.ccp-home-platform-card {
		/* 2 per view: 1 gap of 16px. */
		flex-basis: calc((100% - 16px) / 2);
		padding: 22px 14px;
	}
}
/* Most provider logos are horizontal wordmarks, not square icons — a
   72x72 square box was shrinking them down to a sliver to fit the width.
   Full card width instead, with a shorter, wider box so a landscape logo
   actually has room to render at a legible size. */
.ccp-home-platform-logo {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.ccp-home-platform-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.ccp-home-platform-logo-fallback {
	/* Fixed square (not 100%/100% of the now-wide parent) so this stays a
	   circle instead of stretching into an oval. */
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #1B2A41;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 1.8em;
}
.ccp-home-platform-name {
	color: #1A1D23;
	font-weight: 700;
	font-size: 1.15em;
}
.ccp-home-platform-badges {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.ccp-home-platform-type {
	color: #5C6773;
	font-size: 0.78em;
}
.ccp-home-platform-pricing {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: #F2F3F5;
	color: #1B2A41;
	font-size: 0.72em;
	font-weight: 700;
}

/* Explora por habilidad — [home_tags]: one course grid per Skill */
/* Cifras del catálogo */
.ccp-home-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 48px;
	text-align: center;
	padding: 56px 0;
	margin-top: 24px;
	border-top: 1px solid #F2F3F5;
	border-bottom: 1px solid #F2F3F5;
}
.ccp-home-stat strong {
	display: block;
	font-size: 3em;
	color: #1B2A41;
	line-height: 1;
	margin-bottom: 8px;
}
.ccp-home-stat span {
	color: #5C6773;
	font-size: 0.9em;
}

/* Dónde jugar — homepage Casino strip. 4 columns since the home page has
   no sidebar competing for width (unlike the Casino Review single template,
   which caps its own games grid at 3 for that reason) — still never
   wrapped in a .ccp-hero-band like [top_rated_slots] gets, so it stays
   visually secondary to the Slots sections by position even at 4-up. */
.ssv-home-casino-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 20px;
}
@media (max-width: 999px) {
	.ssv-home-casino-strip {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 599px) {
	.ssv-home-casino-strip {
		grid-template-columns: 1fr;
	}
}

/* CTA final */
.ccp-home-cta {
	text-align: center;
}
.ccp-home-cta-button {
	display: inline-block;
	padding: 14px 36px;
	background: #D4A72C;
	color: #FFFFFF;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}
.ccp-home-cta-button:hover {
	/* Matches the gold-hover shade already established for
	   .course-review-cta-button:hover elsewhere on the site, not the
	   unrelated brown this was originally ported in with. */
	background: #A6821F;
	color: #FFFFFF;
}

/* ==========================================================================
   [course_search] shortcode
   ========================================================================== */
.ccp-course-search {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 24px auto 0;
	font-family: inherit;
}
/* The theme's mobile breakpoint sets overflow:hidden on this wrapper for
   its slide-down animation, and never resets it when .open is applied —
   which clips our absolutely-positioned results dropdown, making it look
   like search "does nothing" on mobile even though it's actually working.
   Force it visible, at any viewport. */
.header-search-form-wrapper {
	overflow: visible !important;
}
/* The header's own search overlay is a flex container that otherwise
   shrinks our box well below its max-width — give it a fixed target width
   there and stop it from being squeezed. */
.header-search-form-wrapper .ccp-course-search {
	width: 500px;
	max-width: 90vw;
	flex-shrink: 0;
	margin: 0;
}
@media (max-width: 600px) {
	.ccp-cs-input-row {
		padding: 5px 5px 5px 14px;
	}
	.ccp-cs-input {
		font-size: 0.9em;
	}
	.ccp-cs-btn {
		padding: 9px 14px;
		font-size: 0.78em;
	}
	.header-search-form-wrapper .ccp-course-search {
		width: 100%;
		max-width: 100%;
	}
}
.ccp-cs-input-row {
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border: 2px solid #F2F3F5;
	border-radius: 50px;
	padding: 6px 8px 6px 20px;
	box-shadow: 0 4px 18px rgba(26, 29, 35, 0.08);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ccp-cs-input-row:focus-within {
	border-color: #1B2A41;
	box-shadow: 0 4px 22px rgba(26, 29, 35, 0.14);
}
.ccp-cs-icon {
	color: #5C6773;
	margin-right: 10px;
	flex-shrink: 0;
}
.ccp-cs-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 1em;
	padding: 10px 0;
	color: #1A1D23;
	min-width: 0;
}
.ccp-cs-input::placeholder {
	color: #ADA89B;
}
.ccp-cs-btn {
	flex-shrink: 0;
	background: #1B2A41;
	color: #FFFFFF;
	border: none;
	border-radius: 50px;
	padding: 10px 22px;
	font-size: 0.85em;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
	white-space: nowrap;
}
.ccp-cs-btn:hover {
	background: #2f4739;
}
.ccp-cs-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 12px 36px rgba(26, 29, 35, 0.16);
	overflow: hidden;
	z-index: 999;
	text-align: left;
}
.ccp-cs-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid #f2f0e9;
	transition: background 0.15s ease;
}
.ccp-cs-item:last-child {
	border-bottom: none;
}
.ccp-cs-item:hover {
	background: #F2F3F5;
}
.ccp-cs-item-icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	flex-shrink: 0;
	overflow: hidden;
}
/* Slot featured image, when the slot has one (Provider results always
   use the plain icon instead — provider logos come in too many different
   formats/aspect ratios to show consistently at this size). The tinted
   --slot background still shows through around a non-square image. */
.ccp-cs-item-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ccp-cs-item-icon--platform {
	background: rgba(27, 42, 65, 0.12);
	color: #1B2A41;
}
.ccp-cs-item-icon--topic {
	background: rgba(212, 167, 44, 0.12);
	color: #D4A72C;
}
.ccp-cs-item-icon--skill {
	background: rgba(92, 103, 115, 0.15);
	color: #5C6773;
}
.ccp-cs-item-icon--course {
	background: rgba(27, 42, 65, 0.12);
	color: #1B2A41;
}
.ccp-cs-item-icon--slot {
	background: rgba(27, 42, 65, 0.12);
	color: #1B2A41;
}
.ccp-cs-item-icon--provider {
	background: rgba(212, 167, 44, 0.12);
	color: #D4A72C;
}
.ccp-cs-item-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.ccp-cs-item-name {
	font-size: 0.92em;
	font-weight: 700;
	color: #1A1D23;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccp-cs-item-crumb {
	font-size: 0.75em;
	color: #ADA89B;
}
.ccp-cs-empty,
.ccp-cs-loading {
	padding: 16px;
	text-align: center;
	font-size: 0.85em;
	color: #5C6773;
}

/* Price tag — shared across header, archive row, and related card.
   Light pill/badge treatment: pale accent background, accent text. */
.ccp-price-tag {
	display: inline-block;
	font-weight: 700;
	color: #D4A72C;
	background: rgba(212, 167, 44, 0.12);
	border-radius: 999px;
	padding: 4px 14px;
	text-align: center;
}
.ccp-course-row-media .ccp-price-tag {
	margin-top: 10px;
}
.ccp-related-card-body .ccp-price-tag {
	text-align: left;
	margin-top: 10px;
}
.ccp-price-tag--value {
	font-size: 0.85em;
}
.ccp-price-tag--phrase {
	font-size: 0.75em;
}

/* Price inside the header's stats meta line (Duration · Rating · Price) */
.course-review-meta-line--stats .ccp-price-tag {
	padding: 2px 10px;
}
.ccp-price-qualifier {
	font-size: 0.75em;
	color: #5C6773;
	margin-left: 4px;
}

/* Compact Course Review card summary (Reviews archive rows, Related reviews cards) */
.course-card-summary {
	text-align: left;
}
.course-card-title {
	margin: 0 0 6px;
	font-size: 1.05em;
}
.course-card-title a {
	color: #1A1D23;
	text-decoration: none;
}
.course-card-title a:hover {
	color: #1B2A41;
}
.course-card-tagline {
	font-size: 0.9em;
	color: #1A1D23;
	margin: 0 0 10px;
}
.course-card-summary .course-review-meta-line--stats {
	margin-top: 0;
	margin-bottom: 10px;
	gap: 0;
}
.course-card-summary .course-review-badges {
	margin-top: 0;
}

/* Related reviews card — compact, typical-WP-related-posts style.
   Image + body live inside ONE box (overflow:hidden clips the image to
   the box's top corners; the body has no background of its own). */
/* Featured card (bigger) — used by [category_top_courses]. White background
   since it's meant to sit on top of a neutral F2F3F5 section band, unlike
   the compact related-card which IS the neutral surface itself. */
.ccp-featured-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(26, 29, 35, 0.08);
}
.ccp-featured-card-media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
	background: #F2F3F5;
}
.ccp-featured-card-media img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}
.ccp-featured-card-platform-pill {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 24px);
	box-sizing: border-box;
	padding: 5px 12px 5px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #1A1D23;
	font-size: 0.78em;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(26, 29, 35, 0.15);
}
.ccp-featured-card-platform-pill img {
	position: static !important;
	width: 18px !important;
	height: 18px !important;
	object-fit: contain !important;
	border-radius: 50% !important;
}
.ccp-featured-card-body {
	padding: 22px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.ccp-featured-card-title {
	margin: 0 0 8px !important;
	font-size: 1.2em !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
}
.ccp-featured-card-title a {
	color: #1A1D23;
	text-decoration: none;
}
.ccp-featured-card-title a:hover {
	color: #1B2A41;
}
.ccp-featured-card-tagline {
	font-size: 0.95em;
	color: #5C6773;
	margin: 0 0 12px;
}
.ccp-featured-card-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}
.ccp-featured-card-rating .crm-rating-score {
	font-size: 0.9em;
	color: #D4A72C;
	font-weight: 700;
}
.ccp-featured-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.ccp-featured-card-price {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
/* Wraps the Duration/Updated footer + the two bottom links as one unit,
   so the pair always sticks to the card's bottom edge together — even
   when the footer itself is absent (it's conditional on duration/updated
   data existing) — instead of drifting up to wherever a shorter card's
   content happens to end. */
.ccp-featured-card-bottom {
	margin-top: auto;
}
.ccp-featured-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.82em;
	color: #5C6773;
	padding-top: 14px;
	border-top: 1px solid #F2F3F5;
}
.ccp-featured-card-footer-left,
.ccp-featured-card-footer-right {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.ccp-featured-card-body .course-review-cta-link {
	display: inline-block;
	margin-top: 12px;
}
.ccp-featured-card-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #F2F3F5;
}
/* Each link's own icon+text stays on one line (white-space:nowrap below),
   but "View on <Platform>" can run long on a narrow card (this grid gets
   as narrow as ~240px via minmax(240px,1fr)) — letting the row itself wrap
   drops "Read Review" to its own line instead of clipping/overflowing the
   card when both links can't fit side by side. */
.ccp-featured-card-link-external,
.ccp-featured-card-link-internal {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.85em;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.ccp-featured-card-link-external {
	color: #D4A72C;
}
.ccp-featured-card-link-external:hover {
	color: #9c4b22;
}
.ccp-featured-card-link-internal {
	color: #1B2A41;
}
.ccp-featured-card-link-internal:hover {
	color: #1A1D23;
}
.ccp-featured-card-link-internal span {
	transition: transform 0.15s ease;
}
.ccp-featured-card-link-internal:hover span {
	transform: translateX(2px);
}

/* [category_view_all_link] — companion link for a [category_top_courses]
   section title (e.g. in a Columns block's right column). */
.ccp-category-view-all-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	color: #1B2A41;
	font-weight: 700;
	font-size: 0.95em;
	text-decoration: none;
}
.ccp-category-view-all-link:hover {
	color: #D4A72C;
}
.ccp-category-view-all-link span {
	transition: transform 0.15s ease;
}
/* [home_tags]: gray instead of the shared green, matching the pills'
   fully-neutral color scheme. Hover stays orange, same as everywhere
   else — orange is reserved for the "action" moment, not the resting
   state. */
.ccp-skill-view-all-link {
	color: #5C6773;
}
.ccp-skill-view-all-link:hover {
	color: #D4A72C;
}
.ccp-category-view-all-link:hover span {
	transform: translateX(3px);
}

.ccp-related-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #F2F3F5;
	border-radius: 8px;
	overflow: hidden;
}
.ccp-related-card-media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
}
.ccp-related-card-media img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}
.ccp-related-card-body {
	padding: 16px;
	box-sizing: border-box;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.ccp-related-card-title {
	margin: 0 0 8px !important;
	font-size: 1em !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
}
.ccp-related-card-title a {
	color: #1A1D23;
	text-decoration: none;
}
.ccp-related-card-title a:hover {
	color: #1B2A41;
}
.ccp-related-card-badges {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 10px;
}
.ccp-related-card-badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ccp-related-card-footer {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.78em;
	color: #5C6773;
	margin-top: 10px;
	margin-bottom: 10px;
}
/* Pinned to the bottom of the card body (margin-top: auto in a flex
   column) — same trick the RTP/date footer used to use, now freed up
   since that footer moved right under the title instead. Keeps the CTA
   link's baseline aligned across a row of cards even when titles or
   category lists run different lengths. */
.ccp-related-card-cta-row {
	margin-top: auto;
	padding-top: 10px;
}
/* Two rows: RTP + Max Win ("hard numbers") on one line, Volatility (with
   its own text label, so a bare color pill never reads as unlabeled) on
   the line below — plain text throughout, no icons. */
.ccp-related-card-footer-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.ccp-related-card-footer-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.ccp-related-card-footer-label {
	color: #5C6773;
}
/* Only the number carries weight/emphasis — the "RTP"/"Max Win" labels
   stay plain so the accent color reads as "this is the value that
   matters", not just decoration on the whole phrase. */
.ccp-related-card-footer-value {
	font-weight: 700;
	font-size: 1.5em;
	line-height: 1;
	color: #1A1D23;
}
.ccp-related-card-footer-value--accent {
	color: #D4A72C;
}

/* Volatility pill — deliberately off the green/amber/red scale used by the
   rating badge on this same card, since that trio already means "quality"
   here and volatility isn't a quality judgment, just a style-of-play
   trait. Calm-to-intense blue instead (see ssv_get_volatility_pill_class()). */
.ssv-volatility-pill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1.4;
}
.ssv-volatility-pill--calm {
	background: #93C5FD;
	color: #1A1D23;
}
.ssv-volatility-pill--medium {
	background: #3B82F6;
}
.ssv-volatility-pill--intense {
	background: #6D28D9;
}

/* Compact meta line: icons instead of text labels, smaller than title/tagline */
.ccs-compact-meta {
	gap: 0;
}
.ccs-compact-meta .crm-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8em;
}
.ccs-compact-meta .crm-rating {
	gap: 4px;
}
.ccs-icon {
	color: #D4A72C;
	flex-shrink: 0;
}
.ccs-compact-badges {
	gap: 6px;
}
.course-review-badge--sm {
	padding: 2px 7px;
	font-size: 0.62em;
}

/* CTA as a plain link (compact cards) instead of the solid hero button */
.course-review-cta-link {
	display: inline-block;
	color: #1B2A41;
	font-weight: 700;
	font-size: 0.8em;
	text-decoration: underline;
}
.course-review-cta-link:hover {
	color: #3d5578;
}

/* Reviews archive row: two columns (image+actions | info), matching the header */
.review-box--two-col .review-box-wrap {
	align-items: stretch;
}
.ccp-course-row {
	display: flex;
	align-items: stretch;
	gap: 20px;
	background: transparent;
	padding: 0;
}
.review-box.ccp-course-row + .review-box.ccp-course-row {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid #F2F3F5;
}
.ccp-course-row-media {
	flex: 0 0 220px;
	width: 220px;
	background: #F2F3F5;
	border-radius: 8px;
	padding: 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.ccp-course-row-media .course-card-thumbnail {
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
}
.ccp-course-row-media img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	display: block !important;
	border-radius: 4px !important;
	margin: 0 !important;
	max-width: none !important;
}
.ccp-course-row-media .course-review-cta-link {
	display: block;
}
.ccp-course-row-info {
	flex: 1;
	min-width: 0;
	padding: 20px 0;
}
@media (max-width: 782px) {
	.ccp-course-row {
		flex-direction: column;
	}
	.ccp-course-row-media {
		width: 100%;
		max-width: 100%;
	}
}

/* Alternate image side per row (zig-zag) — desktop only, so it doesn't
   fight the mobile column-stack rule above. */
@media (min-width: 783px) {
	.review-box.ccp-course-row:nth-child(even) {
		flex-direction: row-reverse;
	}
}

/* Course Review full-width hero band (wraps h1 + header block) */
.course-review-hero-band {
	background: #F2F3F5;
	padding: 16px 0 28px;
	margin-bottom: 8px;
}
.course-review-hero-band h1 {
	margin-bottom: 0;
	/* Pin an explicit size instead of inheriting the ambient h1 rule —
	   the parent theme gives h1 very different sizes depending on which
	   wrapper class the current <main> happens to carry (e.g. 50px via
	   ".wysiwyg-part h1" on page.php vs. an unstyled ~32px browser
	   default on the "site-content"-only archive templates). Fixing it
	   here keeps every hero-band header the same size regardless of
	   which template renders it. */
	font-size: 2rem !important;
	line-height: 1.25;
}
/* On the generic page.php template, <main> carries "wp-site-blocks" (the
   block-theme root), which the parent theme pads 90px top/bottom and caps
   to container-width via ".wp-site-blocks > * { max-width; margin:auto }" —
   fine for the theme's own hero Group/Cover blocks (which it un-margins via
   a :first-child rule) but our plain <section> matches neither, so it was
   showing capped-width and pushed down from the navbar. Same full-bleed +
   negative-margin-cancel treatment as .ccp-hero-band above, scoped to this
   context only — archive/taxonomy headers render on plain "site-content"
   mains without wp-site-blocks and are unaffected. */
.wp-site-blocks > .course-review-hero-band:first-child {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: -90px !important;
}
@media screen and (max-width: 992px) {
	.wp-site-blocks > .course-review-hero-band:first-child {
		margin-top: -50px !important;
	}
}
.ccp-topic-back-link {
	display: inline-block;
	margin-bottom: 10px;
	color: #5C6773;
	font-size: 0.85em;
	font-weight: 600;
	text-decoration: none;
}
.ccp-topic-back-link:hover {
	color: #1B2A41;
}

/* "No courses match these filters" notice (ccp_render_no_courses_notice) */
.ccp-no-results {
	padding: 48px 24px;
	text-align: center;
	background: #FBFAF8;
	border: 1px solid #F2F3F5;
	border-radius: 10px;
}
.ccp-no-results p {
	margin: 0 0 12px;
	color: #5C6773;
	font-size: 1.05em;
}
.ccp-no-results-clear {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	background: #1B2A41;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 0.9em;
	text-decoration: none;
}
.ccp-no-results-clear:hover {
	background: #2f4739;
	color: #FFFFFF;
}

/* Theme's .section adds a 90px top padding; .section--npb only removes the
   bottom one. Kill the top padding just for the section that immediately
   follows our hero band, without touching .section elsewhere on the site. */
.course-review-hero-band + .container .section-review-content {
	padding-top: 0;
}

/* Course Review hero: two-column row (text left, featured image right).
   stretch (not flex-start) + height:100% on the image box below — no CTA
   button sits under the image anymore, so it fills the row's full height
   instead of sitting in its own fixed-aspect box at the top. */
.course-review-hero-row {
	display: flex;
	align-items: stretch;
	gap: 32px;
}
.course-review-hero-main {
	flex: 1 1 auto;
	min-width: 0;
}
.course-review-hero-image-col {
	flex: 0 0 280px;
	text-align: center;
}
.course-review-hero-image-col .course-review-featured-image {
	position: relative;
	height: 100%;
	min-height: 220px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(26, 29, 35, 0.15);
	background: #FFFFFF;
	padding: 16px;
	box-sizing: border-box;
}
/* object-fit: contain (not cover) — logos and provider art come in all
   sorts of aspect ratios, and cover was center-cropping text off the edges
   of anything that wasn't already a 4:3 rectangle. contain always shows the
   full image, letterboxed on the white background above where needed. */
.course-review-hero-image-col .course-review-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* Rating badge overlay — Metacritic-style corner badge on featured images
   (hero + compact cards). Color is set inline per-post via
   ssv_render_rating_badge(), matched to the same tiers as the site's
   [contento_ratings] Rating Thresholds so a score reads the same color in
   both places. */
.ssv-rating-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border-radius: 10px;
	color: #FFFFFF;
	border: 2px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
	padding: 8px 10px 6px;
}
.ssv-rating-badge__num {
	font-size: 1.3em;
	font-weight: 800;
}
.ssv-rating-badge__denom {
	font-size: 0.62em;
	font-weight: 600;
	opacity: 0.85;
	margin-top: 1px;
}
.ssv-rating-badge--sm {
	top: 8px;
	right: 8px;
	padding: 6px 9px;
	border-radius: 8px;
}
.ssv-rating-badge--sm .ssv-rating-badge__num {
	font-size: 1.15em;
}
.ssv-rating-badge--sm .ssv-rating-badge__denom {
	font-size: 0.58em;
}

/* Provider corner badge — own reserved zone on the left, capped well short
   of the rating badge's corner on the right (~40% of the image width) so
   the two never overlap regardless of how long the provider name is; long
   names ellipsis-truncate instead of colliding. */
.ssv-provider-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	background: #1B2A41;
	color: #FFFFFF;
	font-size: 0.68em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 9px;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
	max-width: calc(58% - 8px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.course-review-cta-button {
	display: block;
	text-align: center;
	margin-top: 18px;
	padding: 10px 20px;
	border-radius: 8px;
	background: #D4A72C;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 0.9em;
	text-decoration: none;
	transition: background 0.15s ease;
}
.course-review-cta-button:hover {
	background: #A6821F;
	color: #FFFFFF;
}

/* [ssv_casino_games_providers] end-of-grid CTA. This shortcode renders
   inside the post's .wysiwyg-part content area, and the parent theme's
   own ".wysiwyg-part p { color: inherit; }" rule (bundle.css) outranks a
   plain single-class selector on specificity (class+element beats
   class-only) — !important on the two text colors below forces this
   component's own colors to win instead of relying on selector-
   specificity games. Everything else here is unmodified from spec. */
.cta-banner {
	background: #0C1B33;
	border-radius: 12px;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 700px;
	width: 100%;
	margin: 24px auto 0;
}

.cta-banner-text {
	flex: 1;
}

.cta-banner-title {
	color: #D4A72C !important;
	font-size: 1.15em !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 2px;
}

.cta-banner-subtitle {
	color: #85B7EB !important;
	font-size: 12px !important;
	line-height: 1.3 !important;
	margin: 0;
}

.cta-banner-button {
	flex-shrink: 0;
	background: #D4A72C;
	color: #FFFFFF;
	font-size: 14px !important;
	font-weight: 700 !important;
	padding: 13px 26px;
	border-radius: 8px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.cta-banner-button:hover {
	background: #A6821F;
}

/* [ssv_slot_where_to_play] — sort-only toolbar (no filters, so just
   right-align the single sort select instead of reusing the
   filters+sort .ccp-platform-toolbar layout). */
.ssv-where-to-play-section {
	margin-top: 40px;
}
/* Heading now lives inside [ssv_slot_where_to_play] itself (not the
   template wrapper), so the shortcode is self-contained and always shows
   what the section is regardless of where it's embedded. Sits in the same
   row as the sort dropdown (not its own line/heading level) — a plain
   <span>, not an <h2>. */
.ssv-swtp-title {
	font-size: 1.15em;
	font-weight: 700;
	color: #1A1D23;
}
.ssv-swtp-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 16px 0 24px;
}
/* Casino card — single unified block (one background, one outer radius,
   one shadow) now that there's no dark name banner splitting it into
   "logo zone" vs "info zone". !important throughout the text pieces:
   these are all <p>/<h3> tags, and a broad theme rule targeting <p>
   margin/color has repeatedly outranked plain single-class selectors
   elsewhere on this site (see the .cta-banner-title/-subtitle fix) —
   cheaper to force it here upfront than debug the same symptom per
   element. */
.ssv-casino-card {
	background: #FFFFFF;
	box-shadow: 0 1px 4px rgba(26, 29, 35, 0.1);
}
/* Asymmetric padding (more top/sides, less bottom) so the logo reads as
   anchored to the card, not floating in its own separate strip — plus a
   hairline border where it meets the info below, replacing the old dark
   bar as the only thing marking "brand" vs "offer details". */
.ssv-casino-card-media {
	padding: 24px 20px 14px;
	box-sizing: border-box;
	border-bottom: 1px solid #E4E7EB;
}
.ssv-casino-card-media img {
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}
/* Gray + slightly smaller than before — the welcome bonus below is meant
   to read as the card's real headline, so the name steps back into a
   secondary label instead of competing with it. */
.ssv-casino-card-title,
.ssv-casino-card-title a {
	font-size: 1.05em !important;
	color: #5C6773 !important;
	text-align: center;
	margin: 0 0 10px !important;
}
.ssv-casino-card-name a:hover {
	color: #D4A72C !important;
}
/* The welcome bonus is the primary hook here, so it gets headline
   treatment — bigger/bolder than any other text in the card body. */
.ssv-casino-card-bonus {
	color: #1A1D23 !important;
	font-size: 1.1em !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-align: center;
	margin: 0 0 10px !important;
}
.ssv-casino-card-stats {
	display: flex;
	justify-content: space-around;
	text-align: center;
	margin: 16px 0 10px !important;
	padding-top: 14px;
	border-top: 1px solid #E4E7EB;
}
.ssv-casino-card-stat__label {
	color: #9AA5B1 !important;
	font-size: 0.72em !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 2px !important;
}
.ssv-casino-card-stat__value {
	color: #1A1D23 !important;
	font-size: 0.95em !important;
	font-weight: 700 !important;
	margin: 0 !important;
}
/* .course-review-cta-button's own margin-top:18px assumes standalone
   hero placement — here it follows the bonus text directly. Also the
   card's one deliberate point of maximum contrast now that there's no
   dark name banner competing for that role — the soft gold glow gives it
   a bit more visual weight than the plain button elsewhere gets. */
.ssv-casino-card-play-btn {
	margin-top: 0 !important;
	width: 100%;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(212, 167, 44, 0.35);
}

/* [ssv_casino_games_providers] "Show More" — centered below the grid,
   outlined primary instead of solid, since it's a secondary "load more
   content" action, not the affiliate conversion CTA. */
.ssv-games-showmore-row {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}
.ssv-games-showmore-btn {
	background: transparent;
	color: #1B2A41;
	border: 1px solid #1B2A41;
	border-radius: 999px;
	padding: 10px 28px;
	font-weight: 700;
	font-size: 0.9em;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.ssv-games-showmore-btn:hover {
	background: #1B2A41;
	color: #FFFFFF;
}
@media (max-width: 782px) {
	.course-review-hero-row {
		flex-direction: column;
	}
	.course-review-hero-image-col {
		flex-basis: auto;
		width: 100%;
	}
}

/* .sticky-col: the theme applies this class to the review sidebar column
   (affiliates-single-style1.php) but never actually defines it anywhere —
   neither the SCSS source nor the compiled bundle has a rule for it, so it
   was a dead class name. The theme's own equivalent for other sticky
   elements (.review-cta-wrapper--sticky) uses `top: 20px` on screens
   ≥992px only, so matching that here rather than inventing a new offset. */
@media screen and (min-width: 992px) {
	.sticky-col {
		position: sticky;
		top: 20px;
	}
}

/* Course Review sidebar shortcodes: [course_sidebar_quickfacts],
   [course_sidebar_topics] */

.ccp-sidebar-quickfacts {
	margin-bottom: 28px;
}
/* [slot_sidebar_quickfacts]-only — the course version has no equivalent
   image row, so this class doesn't come from CoursesArchive like the rest
   of this block. */
.ccp-sidebar-quickfacts-image {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 16px;
}
.ccp-sidebar-quickfacts-image img {
	width: 100%;
	height: auto;
	display: block;
}
.ccp-sidebar-topic-nav {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid #F2F3F5;
}
.ccp-sidebar-skills-nav {
	margin-bottom: 20px;
}
.ccp-sidebar-skills-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ccp-sidebar-quickfacts-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid #F2F3F5;
}
.ccp-sidebar-quickfacts-row:last-of-type {
	border-bottom: none;
}
.ccp-sidebar-quickfacts-row--centered {
	justify-content: center;
}
/* Licensed by can hold more than one term — label on its own line, each
   value on its own line below, instead of the usual label-left/value-
   right single-line row. */
.ccp-sidebar-quickfacts-row--stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.ccp-sidebar-quickfacts-value-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ccp-sidebar-quickfacts-value-list .ccp-sidebar-quickfacts-value {
	font-size: 0.9em;
}
.ccp-sidebar-quickfacts-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.ccp-sidebar-row-icon {
	flex-shrink: 0;
	color: #D4A72C;
}
.ccp-sidebar-quickfacts-label-text {
	color: #5C6773;
	font-size: 0.85em;
	font-weight: 600;
}
/* The value is the thing readers actually scan for, so it gets more
   visual weight than the label next to it — bold and a touch bigger,
   and full-strength text color instead of the muted label gray. */
.ccp-sidebar-quickfacts-value {
	color: #1A1D23;
	font-size: 1.05em;
	font-weight: 700;
}
/* Visually hidden but still available to screen readers/search engines —
   standard clip technique. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.ccp-sidebar-rating-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ccp-sidebar-platform-inline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ccp-sidebar-platform-inline-logo {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ccp-sidebar-platform-inline-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.ccp-sidebar-platform-inline-logo .ccp-home-platform-logo-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #1B2A41;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 0.75em;
}
.ccp-sidebar-platform-inline-name {
	font-weight: 700;
	font-size: 1.05em;
	color: #1A1D23;
}
.ccp-sidebar-quickfacts .course-review-cta-button {
	margin-top: 16px;
}

/* [casino_sidebar_slots] — compact linked row per slot: small thumb,
   name, rating. Reuses .ccp-sidebar-quickfacts as the outer card so it
   matches [casino_sidebar_quickfacts]'s spacing/title when both sit
   stacked in the same sidebar. */
.ccp-sidebar-slots-list .ccp-sidebar-title {
	margin-bottom: 14px;
}
.ccp-sidebar-slot-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #F2F3F5;
	text-decoration: none;
}
.ccp-sidebar-slot-row:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}
/* Shared by both [casino_sidebar_slots] and [slot_sidebar_where_to_play]
   (same .ccp-sidebar-slots-list wrapper class) — a full-width gold
   gradient divider (glows brightest in the center, fades at the edges)
   instead of a plain gray hairline. Equal margin-top/-bottom (10px each)
   on every row means the combined gap between two rows is always 20px,
   and the line at bottom:-10px sits exactly halfway through that gap —
   centered, not offset toward either row. */
.ccp-sidebar-slots-list .ccp-sidebar-slot-row {
	position: relative;
	border-bottom: none;
	margin-bottom: 10px;
}
.ccp-sidebar-slots-list .ccp-sidebar-slot-row:not(:first-of-type) {
	margin-top: 10px;
}
.ccp-sidebar-slots-list .ccp-sidebar-slot-row:last-of-type {
	margin-bottom: 0;
}
.ccp-sidebar-slots-list .ccp-sidebar-slot-row:not(:last-of-type)::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	height: 2px;
	background: linear-gradient(to right, transparent, #D4A72C 50%, transparent);
}
.ccp-sidebar-slot-row-thumb {
	position: relative;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
}
.ccp-sidebar-slot-row-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Casino logos ([slot_sidebar_where_to_play]) aren't square key art like
   slot thumbnails — most brand wordmarks are wide/horizontal, so cover
   inside a 64x64 square was cropping them down to a couple of letters.
   Wider rectangular box (not square) + contain + white background, same
   reasoning as .ssv-casino-card-media. !important since this needs to
   reliably beat the base .ccp-sidebar-slot-row-thumb img rule regardless
   of stylesheet caching. */
.ccp-sidebar-slot-row-thumb--logo {
	width: 90px;
	height: 48px;
	background: #FFFFFF;
	padding: 6px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}
/* max-width/max-height + auto sizing so the full logo is always visible
   (shrinks to fit, never crops) — independent of object-fit. The real
   bug this whole time: flex items get an implicit min-width:auto, which
   for a replaced element like <img> resolves to its natural pixel width
   and OVERRIDES max-width, letting it overflow the flex box regardless
   of any !important on max-width. min-width:0 (and min-height:0) here is
   what actually disables that default and lets max-width/max-height work. */
.ccp-sidebar-slot-row-thumb--logo img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	object-fit: contain !important;
}
.ccp-sidebar-slot-row-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.ccp-sidebar-slot-row-name {
	color: #1A1D23;
	font-size: 0.9em;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccp-sidebar-slot-row-stat {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 5px;
	margin-top: 2px;
}
.ccp-sidebar-slot-row-stat-label {
	color: #9AA5B1;
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	flex-shrink: 0;
	white-space: nowrap;
}
.ccp-sidebar-slot-row-stat-value {
	color: #1A1D23;
	font-size: 0.8em;
	font-weight: 600;
	white-space: nowrap;
}
.ccp-sidebar-slot-row-stat .ssv-volatility-pill {
	font-size: 0.68em;
	white-space: nowrap;
	padding: 1px 7px;
}
.ccp-cta-external-icon {
	margin-left: 6px;
	vertical-align: -2px;
}

.ccp-sidebar-title {
	margin: 0 0 12px;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #5C6773;
}
/* Related Topics / Related Skills headers: smaller + lighter than "Course
   Details" so they read as secondary, lower-priority sections. */
.ccp-sidebar-title--sub {
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.ccp-sidebar-topic-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* :visited explicitly overridden — without it, the browser's default
   visited-link color (often a muted purple/teal) shows through on any
   topic the reader has already clicked, which reads as a random color
   bug rather than intentional design. Orange stays reserved for
   price/CTA, so "current" is shown via weight, not a second accent color. */
.ccp-sidebar-topic-list a,
.ccp-sidebar-topic-list a:visited {
	color: #1A1D23;
	text-decoration: none;
	font-size: 0.88em;
}
.ccp-sidebar-topic-list a:hover {
	color: #1B2A41;
}
.ccp-sidebar-topic-list a.is-current,
.ccp-sidebar-topic-list a.is-current:visited {
	color: #1A1D23;
	font-weight: 700;
}

/* Course Review badge row (Platform / Topic / Skills groups) */
.course-review-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
}
/* Casino Review renders Format and Featured Providers as two stacked
   .course-review-badges rows — the second one sits right under the first,
   so it doesn't need the same large top gap meant to separate the whole
   badge block from the header above it. */
.course-review-badges + .course-review-badges {
	margin-top: 20px;
}
.crb-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.crb-label {
	font-size: 0.75em;
	font-weight: 700;
	color: #5C6773;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.course-review-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.course-review-badge--platform {
	background: #1B2A41;
	color: #FFFFFF;
}
.course-review-badge--topic {
	background: transparent;
	color: #1B2A41;
	border: 1px solid #1B2A41;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}
.course-review-badge--tag,
.course-review-badge--tag:visited {
	background: transparent;
	color: #5C6773;
	border: 1px solid #5C6773;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}
.course-review-badge--pricing {
	background: #D4A72C;
	color: #FFFFFF;
}

/* Platform archive header (ccp_render_platform_archive_header) — reuses
   the course-review-hero-band/-row/-main/-image-col layout, but the image
   column holds a logo box (contain-fit, not cropped) instead of a course
   thumbnail. */
.ccp-platform-header-logo {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ccp-platform-header-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* L1 Course Topic archive: "Browse <Parent> subcategories" — sits right
   below the header band, above the tag/platform pills + course grid, so a
   reader can narrow down before scrolling a mixed grid spanning every L2
   child. Reuses the exact [home_categories] card look. */
.ccp-topic-subcategories {
	padding: 32px 0;
	border-bottom: 1px solid #F2F3F5;
}
.ccp-topic-subcategories-title {
	margin: 0;
	font-size: 1.2em;
	color: #1A1D23;
}
.ccp-topic-subcategories .ccp-home-categories-grid {
	margin-top: 20px;
}
.ccp-topic-skills-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

/* Course Review header block (tagline, meta row) */
.course-review-header {
	margin-top: 16px;
	margin-bottom: 0;
}
.course-review-tagline {
	font-size: 1.15em;
	color: #1A1D23;
	margin: 8px 0 0;
}
.course-review-meta-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin-top: 18px;
}
.course-review-meta-line .crm-item {
	font-size: 0.95em;
	color: #5C6773;
	font-weight: 600;
}
.course-review-meta-line--stats .crm-item:not(:first-child) {
	margin-left: 14px;
	padding-left: 14px;
	border-left: 1px solid #5C6773;
}
.course-review-meta-line .crm-item strong {
	color: #1A1D23;
}
.crm-label {
	font-size: 0.75em;
	font-weight: 700;
	color: #D4A72C;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-right: 4px;
}

/* ==========================================================================
   Neutralize theme's icon-font list bullet (.wysiwyg-part ul > li::before)
   for our own Contento components. Placed here (not in Contento's own CSS
   box) because style.css has an explicit dependency on 'poka-bundle', so it
   always loads after the theme's bundle.css and reliably wins the tie —
   Contento's inline style has no declared dependency, so its load order
   relative to bundle.css isn't guaranteed.
   ========================================================================== */

.contento-section {
	margin-top: 40px;
}

.contento-section .cto-wf-list {
	padding-left: 0;
}

.contento-section .cto-wf-list > li {
	list-style: none;
	position: relative;
	padding-left: 1.2em;
}

.contento-section .cto-wf-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* Same clean-dot treatment for plain <ul><li> prose lists inside Contento
   review/FAQ sections (e.g. "Loyalty" bullets under an accordion answer) —
   these aren't wrapped in .cto-wf-list, so they were still falling back to
   the theme's icon-font triangle glyph (content:"l", font-family:pokatheme)
   from the base ".wysiwyg-part ul > li::before" rule in bundle.css. Only
   overrides content/size/color/shape; left/top/position are inherited
   unchanged from that rule so the existing gutter alignment still lines up. */
.wysiwyg-part ul > li::before {
	content: "";
	width: 6px;
	height: 6px;
	top: 0.5em;
	border-radius: 50%;
	background: #D4A72C;
}


/* Tag pills filter (Course Topic archives) */
.course-tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 24px;
	position: relative;
	z-index: 1;
}
/* affiliates-taxonomy.php's sidebar wrapper uses a negative margin-top
   (.gap-50/.gap-lg-20 grid-gutter trick) that, right after our pills with
   no buffer in between, pulls it up over their bottom half and steals
   clicks. Neutralize just the vertical offset here — leave margin-left
   alone, it's still needed for the row's own horizontal gutter. */
.course-tag-pills + .row.gap-50 {
	margin-top: 0;
}
.course-tag-pill {
	/* Originally only used on <a>, which gets a pointer cursor and no
	   native chrome for free. [home_tags] also uses this class on
	   <button> elements, which need their own browser button styling
	   (background/border/appearance) explicitly reset or it can show
	   through underneath these rules. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	font-family: inherit;
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid #5C6773;
	color: #1B2A41;
	background: #F2F3F5;
	font-size: 0.9em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.course-tag-pill:hover {
	border-color: #1B2A41;
	color: #1B2A41;
	background: #FFFFFF;
}
/* [home_tags] pills: fully neutral gray throughout, no green at all —
   unlike every other filter-pill in the site, whose active/selected
   state is the brand green. Resting matches the Skill/Tag badges shown
   on course cards (.course-review-badge--tag); active is just a solid
   fill of the same gray, not a color swap. */
.ccp-skill-pill {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	font-family: inherit;
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid #5C6773;
	background: transparent;
	color: #5C6773;
	font-weight: 600;
	font-size: 0.9em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ccp-skill-pill:hover {
	border-color: #1A1D23;
	color: #1A1D23;
}
.ccp-skill-pill.is-active {
	background: #5C6773;
	border-color: #5C6773;
	color: #FFFFFF;
}

.course-tag-pill.is-active {
	background: #1B2A41;
	border-color: #1B2A41;
	color: #FFFFFF;
}

/* Platform archive toolbar (Course Topic pills + Sort dropdown) */
.ccp-platform-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	position: relative;
	z-index: 1;
	margin: 16px 0 24px;
}
/* Courses archive toolbar has only the Sort dropdown (no Platform/Topic
   select), so push it to the right instead of the default space-between
   collapsing it to the left with nothing to balance against. */
.ccp-courses-toolbar-selects {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.ccp-platform-toolbar .course-tag-pills {
	margin: 0;
	flex: 1 1 auto;
}
/* Same negative-margin-grid-gutter fix as the tag pills on Course Topic
   archives — here the sidebar row sits right after the whole toolbar. */
.ccp-platform-toolbar + .row.gap-50 {
	margin-top: 0;
}
/* Course Topic filter, styled as a pill even though it's a <select> —
   scales better than a wrapping row of pill links once a platform spans
   a dozen leaf-level topics. */
.ccp-pill-dropdown-form {
	flex: 0 0 auto;
	max-width: 100%;
}
/* A native <select> sizes itself to its currently-selected option text with
   no inherent cap — a longer Course Topic/Platform name (this is a Spanish-
   language site, so names run longer than their English equivalents) can
   render wider than a 320-375px phone viewport and force the whole toolbar
   row past the edge, since flex:0 0 auto above also refuses to shrink it.
   max-width:100% caps it to whatever room the flex-wrap row has left. */
.ccp-pill-dropdown {
	appearance: none;
	-webkit-appearance: none;
	max-width: 100%;
	box-sizing: border-box;
	padding: 6px 32px 6px 16px;
	border-radius: 999px;
	border: 1px solid #5C6773;
	background-color: #F2F3F5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B2A41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	color: #1B2A41;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ccp-pill-dropdown:hover {
	border-color: #1B2A41;
	background-color: #FFFFFF;
}
.ccp-platform-sort-form {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}
.ccp-platform-sort-form label {
	color: #5C6773;
	font-size: 0.9em;
	white-space: nowrap;
}
.ccp-platform-sort-form select {
	max-width: 100%;
	box-sizing: border-box;
	padding: 6px 12px;
	border-radius: 8px;
	border: 1px solid #5C6773;
	background: #FFFFFF;
	color: #1A1D23;
	font-size: 0.9em;
}
/* [ssv_casino_games_providers] AJAX filtering — dims the widget briefly
   while a fetch is in flight, so a slow connection doesn't look frozen. */
.ssv-games-providers-widget.ssv-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

@media (max-width: 600px) {
	.ccp-platform-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}
	/* Complete the stack: the toolbar itself already goes column, but its
	   two children (the Category/Platform select pair and the Sort form)
	   were never told to take the full row width, so on a phone they were
	   left as shrink-to-content pills sitting side by side under each
	   other — cramped and inconsistent widths. Give every direct row here
	   the full width so the whole toolbar reads as one clean stacked list. */
	.ccp-platform-toolbar .course-tag-pills,
	.ccp-courses-toolbar-selects,
	.ccp-pill-dropdown-form,
	.ccp-platform-sort-form {
		width: 100%;
	}
	.ccp-pill-dropdown,
	.ccp-platform-sort-form select {
		width: 100%;
	}
}

/* Estrellas de rating */
.star-rating {
  display: inline-block;
  position: relative;
  font-size: 1.1em;
  line-height: 1;
  letter-spacing: 2px;
  font-family: Arial, sans-serif;
  vertical-align: middle;
  margin-right: 6px;
}
.star-rating::before {
  content: "★★★★★";
  color: #F2F3F5;
  letter-spacing: 2px;
}
.star-rating::after {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rating);
  overflow: hidden;
  color: #D4A72C;
  letter-spacing: 2px;
  white-space: nowrap;
}

/* Header navigation — brand alignment (Musgo & Arcilla) over the
   parent theme's generic .header-menu/.sub-menu markup. Colors are
   redeclared here (not just left to the Customizer) so the header
   always matches the palette regardless of Customizer settings. */
.header-menu li a,
.header-menu > li.menu-item-has-children > a::after {
    color: #1A1D23;
}
.header-menu li a:hover,
.header-menu > li.current-menu-item a {
    color: #1B2A41;
}
.header-menu > li.menu-item-has-children > a::after {
    transition: transform 0.2s ease;
}
.header-menu > li.menu-item-has-children:hover > a::after {
    -webkit-transform: translate(0, -50%) rotate(270deg);
            transform: translate(0, -50%) rotate(270deg);
}
.header-menu .sub-menu {
    background-color: #FFFFFF;
    border-radius: 16px;
    border-top: 3px solid #1B2A41;
    box-shadow: 0 16px 40px rgba(26, 29, 35, 0.14);
    padding: 0.75rem;
}
.header-menu .sub-menu li {
    margin-bottom: 0;
}
.header-menu .sub-menu li a {
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.header-menu .sub-menu li a:hover {
    background-color: #F2F3F5;
    color: #1B2A41;
}

/* Top-level nav: drop the breadcrumb-style "/" separators (odd fit for a
   flat primary nav) in favor of a rounded hover pill per item, matching
   the sub-menu treatment above. Also tightens li padding since the pill's
   own padding now provides the visual spacing that the separators used
   to create. */
.header-menu > li::before {
    content: none;
}
.header-menu > li {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}
.header-menu > li:first-child {
    padding-left: 0;
}
.header-menu > li.menu-item-has-children {
    padding-right: calc(0.35rem + 18px);
}
.header-menu li a {
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
}
.header-menu > li > a:hover {
    background-color: #F2F3F5;
}

/* Header logo: the uploaded logo's own aspect ratio makes it render very
   wide at the theme's default max-height:60px (no max-width was set), so
   it was eating over half the header row. Capping max-width forces it to
   scale down further (height follows automatically, object-fit:contain
   already set by the parent theme) without touching the logo file itself. */
.header-logo img,
.header-logo .custom-logo {
    max-width: 300px;
    width: auto;
    height: auto;
}

/* Give the nav some breathing room before the search button, so the two
   don't feel glued together at the right edge of the header. */
.header-top-flex-part--right .header-menu {
    margin-right: 2.5rem;
}

/* Search toggle: was a near-invisible gray circle (same treatment as the
   mobile hamburger button) — filled in Primary so it reads as an actual
   button instead of blending into the header background. */
.icon-btn.poka-search {
    background-color: #1B2A41;
    color: #FFFFFF;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.icon-btn.poka-search:hover {
    background-color: #2F4A3D;
    opacity: 1;
}

/* All Platforms index page (grid of every Platform's logo/name/count),
   same visual language as .ccp-home-category-card but for a logo image
   instead of an SVG icon. */
.ccp-platform-index-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}
.ccp-platform-index-card {
    flex: 1 1 180px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 16px;
    background: #F2F3F5;
    border-radius: 8px;
    color: #1A1D23;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 2px 10px rgba(26, 29, 35, 0.06);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ccp-platform-index-card img {
    max-height: 40px;
    max-width: 100%;
    object-fit: contain;
}
.ccp-platform-index-card:hover {
    background: #1B2A41;
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(26, 29, 35, 0.14);
    transform: translateY(-2px);
}
.ccp-platform-index-name {
    font-weight: 700;
}
.ccp-platform-index-count {
    font-size: 0.85em;
    opacity: 0.75;
}

/* Footer — same treatment CoursesArchive uses (a real background instead
   of the theme's default transparent-on-white with no boundary), but in
   this site's own navy/gold palette instead of CoursesArchive's cream —
   navy also bookends the page against the header, which is navy too.
   .footer-section--background (the actual wrapper around the widget
   columns) needs its own override since it sets --boxes-background-color
   directly with higher specificity than a plain .site-footer rule would
   beat — that variable is reused all over the site, so it's overridden
   locally here rather than redefined globally. */
.site-footer,
.site-footer .footer-section--background {
    background-color: #1B2A41 !important;
}
.footer-widgets .widget > h3,
.footer-widgets .widget .wp-block-group__inner-container > h3 {
    color: #D4A72C !important;
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.footer-widgets .widget_text .textwidget,
.footer-widgets .widget_text .wp-block-group__inner-container {
    color: rgba(255, 255, 255, 0.7) !important;
}
.footer-widgets .menu li a {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: color 0.15s ease;
}
.footer-widgets .menu li a:hover {
    color: #D4A72C !important;
}
.footer-section--copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-section--copyright p {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 1rem !important;
}
/* Newsletter-area tagline ("Compare online slots...") — a separate
   footer section (.section-newsletter-flex, no .footer-section--background
   class of its own) that still sits on .site-footer's navy background,
   so it needed the same light-text override as everything else here. */
.section-newsletter-flex-part {
    color: rgba(255, 255, 255, 0.75) !important;
}
.section-newsletter-flex-part strong {
    color: #D4A72C !important;
}
/* Footer nav-menu widgets (Features/Categories/Providers/etc.): the
   parent theme gives every widget <li> a small triangle bullet + 1.125rem
   left padding (.widget ul li in bundle.css), which the <h3> title above
   it doesn't share — the title sits flush-left while the items start
   18px further right, reading as misaligned. Scoped to .footer-widgets
   only so sidebar widgets elsewhere on the site keep their bullets. */
.footer-widgets .widget ul li {
    padding-left: 0;
}
.footer-widgets .widget ul li::before {
    content: none;
}

/* Header nav: .header-menu li a uses var(--header-text-color), a dark
   color meant for a light header background — invisible against this
   site's navy header. Scoped to direct children only (.header-menu > li
   > a) so the "Slots" dropdown's own sub-menu links — which sit on a
   light dropdown panel background and are already dark-on-light there —
   aren't affected. Turned out wrong on the live site: the dropdown panel
   itself renders dark navy too (not the light --header-background-secondary
   fallback bundle.css suggests — likely overridden via the Customizer),
   so the sub-menu links needed the same light-text treatment, not an
   exemption from it. */
.header-menu > li > a {
    color: #FFFFFF !important;
}
.header-menu > li > a:hover {
    color: #D4A72C !important;
}
.header-menu .sub-menu li a {
    color: #FFFFFF !important;
}
.header-menu .sub-menu li a:hover {
    color: #D4A72C !important;
}

/* ==========================================================================
   Site-wide type (Slot Review redesign, 2026-09)
   The parent theme prints --main-font-family / --headings-font-family from
   the Customizer (Roboto by default) via the 'poka-css-vars' inline style;
   this sheet is enqueued after it, so redeclaring the variables here wins.
   Fonts are loaded by poka_child_fonts() in functions.php.
   ========================================================================== */
:root,
body {
	--main-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--headings-font-family: 'Sora', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   Casino info page (mockup v2, 2026-09-03): hero ribbon, sidebar casino card,
   sidebar "The casino" facts, "Highest rated here" rating badge. Rendered by
   slotsurvivor-custom-plugin (ssv_render_casino_review_header,
   [casino_sidebar_quickfacts], [casino_sidebar_facts], [casino_sidebar_slots]).
   ========================================================================== */
.ssv-casino-hero .course-review-tagline {
	max-width: 720px;
	line-height: 1.5;
}
.ssv-casino-hero-cta {
	margin-top: 18px;
}
.ssv-casino-hero-cta .ssv-where-to-play {
	margin: 0;
}
.ssv-casino-ribbon {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	margin: 22px 0 0;
	padding: 0;
	background: #FFFFFF;
	border: 1px solid #E6E8EB;
	border-radius: 12px;
	overflow: hidden;
}
.ssv-casino-ribbon > div {
	margin: 0;
	padding: 12px 16px;
	border-left: 1px solid #F2F3F5;
}
.ssv-casino-ribbon > div:first-child {
	border-left: 0;
}
.ssv-casino-ribbon dt {
	margin: 0 0 4px;
	font-size: 0.72em;
	font-weight: 700;
	color: #D4A72C;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ssv-casino-ribbon dd {
	margin: 0;
	font-size: 0.98em;
	font-weight: 700;
	line-height: 1.3;
	color: #1A1D23;
}
.ssv-casino-ribbon dd small {
	display: block;
	margin-top: 2px;
	font-size: 0.82em;
	font-weight: 500;
	color: #5C6773;
}
@media (max-width: 767px) {
	.ssv-casino-ribbon > div {
		border-left: 0;
		border-top: 1px solid #F2F3F5;
	}
	.ssv-casino-ribbon > div:first-child {
		border-top: 0;
	}
}

.ssv-casino-card-identity {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.ssv-casino-card-mark,
.ssv-casino-card-logo {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
}
.ssv-casino-card-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1B2A41;
	color: #D4A72C;
	font-size: 1.2em;
	font-weight: 800;
}
.ssv-casino-card-logo {
	object-fit: contain;
	background: #F7F8FA;
}
.ssv-casino-card-name {
	display: block;
	font-weight: 700;
	color: #1A1D23;
}
.ssv-casino-card-domain {
	display: block;
	font-size: 0.85em;
	color: #5C6773;
}
.ssv-casino-card-fine {
	margin: 10px 0 0;
	font-size: 0.78em;
	color: #5C6773;
}

.ssv-casino-facts-list {
	margin: 0;
}
.ssv-casino-facts-list > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #F2F3F5;
}
.ssv-casino-facts-list > div:last-child {
	border-bottom: 0;
}
.ssv-casino-facts-list dt {
	flex-shrink: 0;
	font-size: 0.85em;
	font-weight: 600;
	color: #5C6773;
}
.ssv-casino-facts-list dd {
	margin: 0;
	font-size: 0.95em;
	font-weight: 700;
	text-align: right;
	color: #1A1D23;
}

.ccp-sidebar-slot-row-provider {
	display: block;
	font-size: 0.82em;
	color: #5C6773;
}
.ccp-sidebar-slot-row-rating {
	flex-shrink: 0;
	margin-left: auto;
	padding: 3px 8px;
	border-radius: 8px;
	background: #1B2A41;
	color: #D4A72C;
	font-size: 0.85em;
	font-weight: 800;
}


/* ==========================================================================
   Site-wide unification (2026-09-03)
   One ground, one page head, one slot card family everywhere except the
   home page (page-templates/home-visual.php), which keeps its own band.
   Tokens mirror slot-review.css / home.css so the three sheets agree.
   ========================================================================== */
:root {
	--container-width: 1320px;
	--ss-navy: #1B2A41;
	--ss-navy-deep: #12203A;
	--ss-navy-soft: #24364F;
	--ss-gold: #D4A72C;
	--ss-gold-deep: #B88E1F;
	--ss-ink: #1A1D23;
	--ss-body: #2E3742;
	--ss-muted: #4A5B68;
	--ss-faint: #7B8794;
	--ss-line: #E3E8EF;
	--ss-mist: #F0F3F7;
	--ss-ground: #F4F6F9;
	--ss-card: #FFFFFF;
	--ss-radius: 16px;
	--ss-radius-sm: 12px;
	--ss-shadow: 0 12px 32px rgba(27, 42, 65, 0.08), 0 1px 2px rgba(27, 42, 65, 0.05);
	--ss-shadow-sm: 0 4px 14px rgba(27, 42, 65, 0.06), 0 1px 2px rgba(27, 42, 65, 0.04);
	--ss-display: 'Sora', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ss-text: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Same ground as the slot review page on every listing / review page. */
body.post-type-archive-affiliates,
body.post-type-archive-casino-review,
body.tax-slot-provider,
body.tax-product_type,
body.single-casino-review,
body.page-id-313 {
	background: var(--ss-ground);
	color: var(--ss-body);
}

/* --------------------------------------------------------------------------
   Page head — archives, taxonomy pages, providers page, casino review.
   Restyles the existing .course-review-hero-band markup to match the slot
   review head: on the ground (no grey band), breadcrumb, Sora title,
   muted tagline, one meta line with hairline separators.
   -------------------------------------------------------------------------- */
.course-review-hero-band {
	background: transparent;
	padding: 22px 0 6px;
	margin-bottom: 26px;
}
.course-review-hero-band h1 {
	margin: 0;
	font-family: var(--ss-display);
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem) !important;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ss-navy);
	max-width: 26ch;
}
.course-review-hero-band .course-review-tagline {
	margin: 12px 0 0;
	font-size: 1.1rem;
	line-height: 1.5;
	color: var(--ss-muted);
	max-width: 62ch;
}
.course-review-hero-band .course-review-meta-line {
	margin-top: 20px;
	font-size: 0.92rem;
	color: var(--ss-muted);
	gap: 0;
}
.course-review-hero-band .course-review-meta-line .crm-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	color: var(--ss-muted);
	font-weight: 600;
}
.course-review-hero-band .course-review-meta-line .crm-item + .crm-item {
	margin-left: 18px;
	padding-left: 18px;
	border-left: 1px solid var(--ss-line);
}
.course-review-hero-band .crm-label {
	margin: 0;
	font-size: inherit;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ss-ink);
}
.course-review-hero-band .course-review-badges {
	margin-top: 14px;
}

/* Breadcrumb (same drawing as .ssvt-crumbs on the slot review page). */
.ssv-crumbs ol {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ss-muted);
}
.ssv-crumbs li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}
.ssv-crumbs li::before {
	content: none !important;
}
.ssv-crumbs li + li::before {
	content: "/" !important;
	position: static !important;
	display: inline-block;
	margin: 0 10px;
	color: #B7C0CB;
	font-weight: 400;
}
.ssv-crumbs a {
	color: var(--ss-muted);
	text-decoration: none;
}
.ssv-crumbs a:hover {
	color: var(--ss-navy);
}
.ssv-crumbs [aria-current] span {
	color: var(--ss-navy);
	border-bottom: 2px solid var(--ss-gold);
	padding-bottom: 1px;
}

/* Filter toolbar sits directly under the head, on the ground. */
.ccp-platform-toolbar {
	margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   Sidebars — a little wider everywhere they exist.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
	.single-casino-review .section-review-content > .row > .col-9 {
		flex: 0 0 68%;
		max-width: 68%;
	}
	.single-casino-review .section-review-content > .row > .col-3 {
		flex: 0 0 32%;
		max-width: 32%;
	}
}

/* --------------------------------------------------------------------------
   Volatility bolts — the one symbol for volatility across the site.
   1–5 bolts lit by level, coloured by tier (calm / medium / intense).
   -------------------------------------------------------------------------- */
.ssv-bolts {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	vertical-align: middle;
}
.ssv-bolts i {
	display: block;
	width: 10px;
	height: 14px;
}
.ssv-bolts i svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: var(--ss-line);
}
.ssv-bolts i.on svg {
	fill: var(--ss-bolt, var(--ss-gold));
}
.ssv-bolts--low  { --ss-bolt: #1F9A55; }
.ssv-bolts--mid  { --ss-bolt: #C9961A; }
.ssv-bolts--high { --ss-bolt: #D9453C; }
.ssv-bolts--lg i { width: 12px; height: 17px; }

/* --------------------------------------------------------------------------
   Slot card, "Poster" — every grid (archive, taxonomy, casino games,
   related reviews). Image never cropped: a blurred copy fills the 4:3
   frame behind the contained art.
   -------------------------------------------------------------------------- */
.ssv-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ss-card);
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	box-shadow: var(--ss-shadow-sm);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ssv-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ss-shadow);
}
.ssv-card__frame {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ss-navy-soft);
}
/* !important: the parent theme's .wysiwyg-part img rules (related
   reviews live inside one) would otherwise reset size and position. */
.ssv-card__frame img {
	display: block !important;
	margin: 0 !important;
	border-radius: 0 !important;
	max-width: none !important;
	opacity: 1 !important;
}
.ssv-card__frame .ssv-card__bg {
	position: absolute !important;
	top: -12% !important;
	left: -12% !important;
	width: 124% !important;
	height: 124% !important;
	object-fit: cover !important;
	filter: blur(18px) saturate(1.2);
	opacity: 0.85 !important;
}
.ssv-card__frame .ssv-card__img {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}
.ssv-card__frame .ssv-rating-badge {
	top: 10px;
	right: 10px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.ssv-card__prov {
	position: absolute;
	left: 10px;
	bottom: 10px;
	max-width: 70%;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(10, 16, 28, 0.72);
	color: #FFFFFF;
	font-size: 0.7rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ssv-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	padding: 14px 16px 16px;
}
.ssv-card__title {
	margin: 0 !important;
	font-family: var(--ss-display);
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em;
}
.ssv-card__title a {
	color: var(--ss-navy);
	text-decoration: none;
}
.ssv-card__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--ss-gold);
	text-underline-offset: 3px;
}
.ssv-card__spec {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ss-line);
	border-bottom: 1px solid var(--ss-line);
}
.ssv-card__spec > div {
	padding: 9px 0 9px 12px;
	border-left: 1px solid var(--ss-line);
}
.ssv-card__spec > div:first-child {
	padding-left: 0;
	border-left: 0;
}
.ssv-card__spec dt {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--ss-faint);
}
.ssv-card__spec dd {
	margin: 2px 0 0;
	font-family: var(--ss-display);
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--ss-navy);
	font-variant-numeric: tabular-nums;
}
.ssv-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}
.ssv-card__more {
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--ss-navy);
	text-decoration: none;
	border-bottom: 2px solid var(--ss-gold);
	padding-bottom: 1px;
	white-space: nowrap;
}
.ssv-card__more:hover {
	color: var(--ss-gold-deep);
}
/* Bootstrap-style columns from the parent theme leave a bottom gap. */
.row.gap-20 > [class*="col-"] > .ssv-card {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Slot row, "Ficha" — rankings and sidebars.
   -------------------------------------------------------------------------- */
.ssv-row {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 11px 0;
	border-bottom: 1px solid var(--ss-line);
	text-decoration: none;
	color: inherit;
}
.ssv-row:last-child {
	border-bottom: 0;
}
.ssv-row--card {
	padding: 12px;
	border: 1px solid var(--ss-line);
	border-radius: 14px;
	background: var(--ss-card);
	box-shadow: var(--ss-shadow-sm);
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 14px;
}
.ssv-row--card:hover {
	border-color: var(--ss-gold);
	box-shadow: var(--ss-shadow);
}
.ssv-row__thumb {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
	background: var(--ss-navy-soft);
}
.ssv-row--card .ssv-row__thumb {
	width: 84px;
	height: 84px;
}
.ssv-row__rank {
	position: absolute;
	left: -4px;
	top: 6px;
	z-index: 1;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--ss-navy);
	color: #FFFFFF;
	font-family: var(--ss-display);
	font-size: 0.68rem;
	font-weight: 700;
}
.ssv-row__main {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.ssv-row__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.ssv-row__name {
	font-family: var(--ss-display);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ss-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ssv-row:hover .ssv-row__name {
	text-decoration: underline;
	text-decoration-color: var(--ss-gold);
	text-underline-offset: 3px;
}
.ssv-row .ssv-rating-badge {
	position: static;
	flex: 0 0 auto;
	padding: 4px 7px;
	border-radius: 7px;
	font-size: 0.8em;
}
.ssv-row .ssv-rating-badge__num {
	font-size: 1em;
}
.ssv-row__prov {
	margin-top: -3px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ss-faint);
}
.ssv-row__rtp {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ssv-row__rtp i {
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: var(--ss-mist);
	position: relative;
	overflow: hidden;
}
.ssv-row__rtp i::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--w, 50%);
	border-radius: 3px;
	background: var(--ss-gold);
}
.ssv-row__rtp b {
	font-family: var(--ss-display);
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--ss-navy);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ssv-row__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ss-muted);
	white-space: nowrap;
}

/* Sidebar wrappers that hold rows: title with the gold lead-in rule. */
.ssv-rows__title {
	position: relative;
	margin: 0 0 6px !important;
	padding-bottom: 10px;
	font-family: var(--ss-display);
	font-size: 1.05rem !important;
	font-weight: 700;
	color: var(--ss-navy);
	border-bottom: 1px solid var(--ss-line);
}
.ssv-rows__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--ss-gold);
}
.ccp-sidebar-slots-list.ssv-rows {
	padding: 16px;
}
.ccp-sidebar-slots-list.ssv-rows::after,
.ccp-sidebar-slots-list.ssv-rows .ssv-row::after {
	content: none;
}

/* --------------------------------------------------------------------------
   Slots archive: facet panel (structure B)
   -------------------------------------------------------------------------- */
.ssv-archive__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 24px;
	padding: 12px 0;
	border-top: 1px solid var(--ss-line);
	border-bottom: 1px solid var(--ss-line);
}
.ssv-archive__count {
	font-family: var(--ss-display);
	font-weight: 700;
	color: var(--ss-navy);
	margin-right: 6px;
}
.ssv-archive__count small {
	font-family: var(--ss-text);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ss-faint);
	margin-left: 6px;
}
.ssv-archive__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--ss-navy);
	color: #FFFFFF;
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
}
.ssv-archive__chip::after {
	content: "\00d7";
	opacity: 0.7;
}
.ssv-archive__chip:hover {
	background: var(--ss-navy-deep);
	color: #FFFFFF;
}
.ssv-archive__clear {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ss-faint);
	text-decoration: none;
}
.ssv-archive__right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ssv-archive__lbl {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ss-faint);
}
.ssv-archive__sort {
	appearance: none;
	-webkit-appearance: none;
	padding: 8px 34px 8px 14px;
	border: 1px solid var(--ss-line);
	border-radius: 10px;
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8794' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 14px;
	font-family: var(--ss-text);
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--ss-navy);
	box-shadow: var(--ss-shadow-sm);
	cursor: pointer;
}
.ssv-archive__toggle {
	display: none;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--ss-line);
	border-radius: 10px;
	background: #FFFFFF;
	font-family: var(--ss-text);
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--ss-navy);
	cursor: pointer;
}
.ssv-archive__toggle b {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ss-gold);
	color: var(--ss-navy-deep);
	font-size: 0.72rem;
	display: inline-grid;
	place-items: center;
}
.ssv-archive__layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.ssv-archive__grid {
	min-width: 0;
}
.ssv-archive__empty {
	padding: 40px 24px;
	text-align: center;
	background: #FFFFFF;
	border: 1px dashed var(--ss-line);
	border-radius: 14px;
	color: var(--ss-muted);
}
.ssv-archive__empty b {
	display: block;
	font-family: var(--ss-display);
	color: var(--ss-navy);
	margin-bottom: 6px;
}
.ssv-archive__empty a {
	font-weight: 700;
	color: var(--ss-navy);
	border-bottom: 2px solid var(--ss-gold);
	text-decoration: none;
}
.ssv-facets {
	position: sticky;
	top: 20px;
	background: #FFFFFF;
	border: 1px solid var(--ss-line);
	border-radius: 14px;
	box-shadow: var(--ss-shadow-sm);
	padding: 16px 18px 18px;
}
.ssv-facets__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ss-line);
}
.ssv-facets__head b {
	font-family: var(--ss-display);
	font-size: 0.98rem;
	color: var(--ss-navy);
}
.ssv-facets__head a {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ss-faint);
	text-decoration: none;
}
.ssv-facets fieldset {
	border: 0;
	border-top: 1px solid var(--ss-line);
	margin: 16px 0 0;
	padding: 16px 0 2px;
	min-width: 0;
}
.ssv-facets fieldset:first-of-type {
	border-top: 0;
	margin-top: 4px;
	padding-top: 12px;
}
.ssv-facets legend {
	float: left;
	width: 100%;
	font-family: var(--ss-display);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--ss-navy);
	padding: 0;
	margin: 0 0 10px;
}
.ssv-facets legend + * {
	clear: both;
}
/* Volatility: one pill per level, bolts lit by level, selectable. */
.ssv-facets__bolts {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ssv-facets__bolt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 7px 10px;
	border: 1px solid var(--ss-line);
	border-radius: 10px;
	background: #FFFFFF;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--ss-body);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ssv-facets__bolt:hover {
	border-color: var(--ss-gold);
}
.ssv-facets__bolt input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.ssv-facets__bolt .ssv-bolts {
	flex: 0 0 auto;
}
.ssv-facets__bolt span {
	flex: 1 1 auto;
}
.ssv-facets__bolt small {
	font-weight: 700;
	color: var(--ss-faint);
	font-variant-numeric: tabular-nums;
}
.ssv-facets__bolt.is-on {
	background: var(--ss-navy);
	border-color: var(--ss-navy);
	color: #FFFFFF;
}
.ssv-facets__bolt.is-on small {
	color: rgba(255, 255, 255, 0.7);
}
.ssv-facets__bolt.is-on .ssv-bolts i svg {
	fill: rgba(255, 255, 255, 0.25);
}
.ssv-facets__bolt.is-on .ssv-bolts--low i.on svg { fill: #4ED08A; }
.ssv-facets__bolt.is-on .ssv-bolts--mid i.on svg { fill: #F0CB6A; }
.ssv-facets__bolt.is-on .ssv-bolts--high i.on svg { fill: #FF7B72; }
.ssv-facets__bolt.is-empty {
	opacity: 0.45;
	cursor: default;
}
.ssv-facets__bolt:has(input:focus-visible) {
	outline: 2px solid var(--ss-gold);
	outline-offset: 2px;
}
.ssv-facets__rest[hidden] {
	display: none;
}
.ssv-facets__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--ss-text);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ss-navy);
	border-bottom: 2px solid var(--ss-gold);
	cursor: pointer;
}
.ssv-facets__toggle::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid var(--ss-faint);
	border-bottom: 2px solid var(--ss-faint);
	transform: rotate(45deg) translateY(-2px);
}
.ssv-facets__toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg) translateY(-2px);
}
.ssv-facets__opt {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 4px 0;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ss-body);
	cursor: pointer;
	margin: 0;
}
.ssv-facets__opt.is-empty {
	opacity: 0.45;
	cursor: default;
}
.ssv-facets__opt span {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ssv-facets__opt small {
	font-weight: 700;
	color: var(--ss-faint);
	font-variant-numeric: tabular-nums;
}
.ssv-facets input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid #C3C9D1;
	border-radius: 4px;
	background: #FFFFFF;
	position: relative;
	flex: 0 0 auto;
	cursor: pointer;
}
.ssv-facets input[type="checkbox"]:checked {
	background: var(--ss-navy);
	border-color: var(--ss-navy);
}
.ssv-facets input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 1.5px;
	width: 4px;
	height: 8px;
	border: solid #FFFFFF;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ssv-facets input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ss-gold);
	outline-offset: 2px;
}
.ssv-facets__range {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0 2px;
}
.ssv-facets__range input {
	flex: 1 1 auto;
	accent-color: var(--ss-navy);
	margin: 0;
}
.ssv-facets__rtp-out {
	min-width: 52px;
	text-align: right;
	font-family: var(--ss-display);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ss-navy);
	font-variant-numeric: tabular-nums;
}
.ssv-archive__apply {
	margin-top: 14px;
	width: 100%;
	padding: 10px;
	border: 0;
	border-radius: 999px;
	background: var(--ss-navy);
	color: #FFFFFF;
	font-weight: 700;
}
@media (max-width: 992px) {
	.ssv-archive__layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.ssv-archive__toggle {
		display: inline-flex;
	}
	.ssv-facets {
		display: none;
		position: static;
	}
	.ssv-facets.is-open {
		display: block;
	}
}
@media (max-width: 560px) {
	.ssv-archive__right {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
	}
	.ssv-archive__lbl {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Casino card (no bonus) + casinos archive bar (structure A)
   -------------------------------------------------------------------------- */
.ssv-archive__select {
	appearance: none;
	-webkit-appearance: none;
	max-width: 190px;
	padding: 8px 32px 8px 12px;
	border: 1px solid var(--ss-line);
	border-radius: 10px;
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8794' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
	font-family: var(--ss-text);
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--ss-navy);
	box-shadow: var(--ss-shadow-sm);
	cursor: pointer;
}
.ssv-archive--bar .ssv-archive__right {
	flex-wrap: wrap;
	row-gap: 8px;
}
/* Three per row with generous gaps, so each card reads as its own object. */
.ssv-cgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
.ssv-ccard {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ss-card);
	border: 1px solid var(--ss-line);
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(27, 42, 65, 0.10), 0 2px 4px rgba(27, 42, 65, 0.06);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ssv-ccard:hover {
	transform: translateY(-4px);
	border-color: var(--ss-gold);
	box-shadow: 0 22px 48px rgba(27, 42, 65, 0.16), 0 2px 4px rgba(27, 42, 65, 0.06);
}
.ssv-ccard__logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	padding: 40px 32px 20px;
	background: linear-gradient(180deg, #F7F8FA 0%, var(--ss-mist) 100%);
	border-bottom: 1px solid var(--ss-line);
}
.ssv-ccard__logo img {
	width: 72% !important;
	height: 68px !important;
	max-width: none !important;
	object-fit: contain !important;
	margin: 0 !important;
	border-radius: 0 !important;
	display: block !important;
}
.ssv-ccard__mark {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	background: var(--ss-navy);
	color: var(--ss-gold);
	font-family: var(--ss-display);
	font-size: 1.5rem;
	font-weight: 700;
}
.ssv-ccard__lic,
.ssv-ccard__slots {
	position: absolute;
	top: 10px;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 0.7rem;
	font-weight: 700;
	white-space: nowrap;
}
.ssv-ccard__lic {
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #FFFFFF;
	color: var(--ss-navy);
}
.ssv-ccard__lic::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #1F9A55;
}
.ssv-ccard__lic--na {
	color: var(--ss-faint);
}
.ssv-ccard__lic--na::before {
	background: #C3C9D1;
}
.ssv-ccard__slots {
	right: 10px;
	background: rgba(10, 16, 28, 0.72);
	color: #FFFFFF;
}
.ssv-ccard__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
	padding: 18px 20px 20px;
}
.ssv-ccard__title {
	margin: 0 !important;
	font-family: var(--ss-display);
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em;
}
.ssv-ccard__title a {
	color: var(--ss-navy);
	text-decoration: none;
}
.ssv-ccard__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--ss-gold);
	text-underline-offset: 3px;
}
.ssv-ccard__title small {
	display: block;
	margin-top: 3px;
	font-family: var(--ss-text);
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--ss-faint);
}
.ssv-ccard__spec {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ss-line);
	border-bottom: 1px solid var(--ss-line);
}
.ssv-ccard__spec > div {
	padding: 8px 0 8px 10px;
	border-left: 1px solid var(--ss-line);
	min-width: 0;
}
.ssv-ccard__spec > div:first-child {
	padding-left: 0;
	border-left: 0;
}
.ssv-ccard__spec dt {
	margin: 0;
	font-size: 0.66rem;
	font-weight: 700;
	color: var(--ss-faint);
}
.ssv-ccard__spec dd {
	margin: 2px 0 0;
	font-family: var(--ss-display);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--ss-navy);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ssv-ccard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}
.ssv-ccard__more {
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--ss-navy);
	text-decoration: none;
	border-bottom: 2px solid var(--ss-gold);
	padding-bottom: 1px;
	white-space: nowrap;
}
.ssv-ccard__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--ss-gold);
	color: var(--ss-navy-deep);
	font-size: 0.86rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.ssv-ccard__btn:hover {
	background: var(--ss-gold-deep);
	color: var(--ss-navy-deep);
}
@media (max-width: 992px) {
	.ssv-archive--bar .ssv-archive__right {
		margin-left: 0;
		width: 100%;
	}
	.ssv-archive__select {
		max-width: none;
		flex: 1 1 120px;
	}
}

/* Casino cards on provider pages: four per row, like the casinos archive. */
.ssv-provider-outro-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
@media (max-width: 767px) {
	.ssv-provider-outro-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 480px) {
	.ssv-provider-outro-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 992px) {
	.ssv-cgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}
@media (max-width: 560px) {
	.ssv-cgrid {
		grid-template-columns: 1fr;
	}
}

/* Breadcrumb inside .wysiwyg-part (Providers page): the parent theme's
   content-list rules (ol padding/counters, li::before icon font, underlined
   links) override .ssv-crumbs. Re-assert the crumb drawing with matching
   specificity. */
.wysiwyg-part .ssv-crumbs ol {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	counter-reset: none;
	font-size: 0.9rem;
	line-height: 1.4;
}
.wysiwyg-part .ssv-crumbs ol > li {
	position: static;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
}
.wysiwyg-part .ssv-crumbs ol > li::before {
	content: none !important;
}
.wysiwyg-part .ssv-crumbs ol > li + li::before {
	content: "/" !important;
	position: static !important;
	display: inline-block;
	margin: 0 10px;
	color: #B7C0CB;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: 400 !important;
}
.wysiwyg-part .ssv-crumbs li a:not(.btn) {
	text-decoration: none;
	color: var(--ss-muted);
}
.wysiwyg-part .ssv-crumbs li a:not(.btn):hover {
	color: var(--ss-navy);
}

/* ==========================================================================
   Archive model (Sept 2026): Providers index in two blocks + Category
   archive context block. Markup in inc/archives-model.php.
   ========================================================================== */

/* --- Providers index ---------------------------------------------------- */
.ssv-pindex {
	margin: 8px 0 40px;
}
.ssv-pindex__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}
.ssv-pindex__head--second {
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid var(--ss-line);
}
.wysiwyg-part .ssv-pindex__head h2 {
	margin: 0;
	font-family: var(--ss-display);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--ss-navy);
	letter-spacing: -0.015em;
}
.wysiwyg-part .ssv-pindex__head p {
	margin: 0;
	color: var(--ss-muted);
	font-size: 0.92rem;
}

.ssv-ptiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.wysiwyg-part .ssv-ptile,
.ssv-ptile {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 18px 16px;
	background: var(--ss-card);
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	box-shadow: var(--ss-shadow-sm);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ssv-ptile:hover {
	transform: translateY(-3px);
	box-shadow: var(--ss-shadow);
}
.ssv-ptile__top {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ssv-ptile__logo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--ss-mist);
	display: grid;
	place-items: center;
	overflow: hidden;
	font-family: var(--ss-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ss-navy);
}
.wysiwyg-part .ssv-ptile__logo img,
.ssv-ptile__logo img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	margin: 0;
	border-radius: 0;
}
.ssv-ptile__name {
	display: block;
	font-family: var(--ss-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ss-navy);
	line-height: 1.2;
}
.ssv-ptile__n {
	display: block;
	margin-top: 2px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ss-faint);
}
.ssv-ptile__thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.ssv-ptile__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	overflow: hidden;
	background: var(--ss-navy-soft);
}
.ssv-ptile__thumb--empty {
	background: var(--ss-mist);
}
.wysiwyg-part .ssv-ptile__thumb img,
.ssv-ptile__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
}
.ssv-ptile__kv {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	padding-top: 12px;
	border-top: 1px solid var(--ss-line);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ss-muted);
}
.ssv-ptile__kv b {
	color: var(--ss-navy);
	font-family: var(--ss-display);
	font-variant-numeric: tabular-nums;
}

.wysiwyg-part .ssv-plist,
.ssv-plist {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wysiwyg-part .ssv-plist li,
.ssv-plist li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--ss-line);
	font-size: 0.92rem;
}
.wysiwyg-part .ssv-plist li::before {
	content: none !important;
}
.wysiwyg-part .ssv-plist li a:not(.btn),
.ssv-plist li a {
	color: var(--ss-navy);
	font-weight: 700;
	text-decoration: none;
}
.ssv-plist li a:hover {
	color: var(--ss-gold-deep);
}
.ssv-plist li small {
	color: var(--ss-faint);
	font-weight: 600;
	font-size: 0.8rem;
	white-space: nowrap;
}

/* --- Category archive: toolbar count + context block -------------------- */
.ssv-toolbar-count {
	align-self: center;
	margin-right: 6px;
	font-family: var(--ss-display);
	font-weight: 700;
	color: var(--ss-navy);
	white-space: nowrap;
}
.ssv-cat-outro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 8px;
}
.ssv-cat-outro h3 {
	margin: 0 0 4px;
	font-family: var(--ss-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ss-navy);
	letter-spacing: -0.015em;
}
.ssv-cat-outro p {
	margin: 0 0 14px;
	color: var(--ss-muted);
	font-size: 0.92rem;
}
.ssv-studios {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.ssv-studio {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--ss-card);
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius-sm);
	box-shadow: var(--ss-shadow-sm);
	text-decoration: none;
	color: inherit;
}
.ssv-studio:hover {
	box-shadow: var(--ss-shadow);
}
.ssv-studio__logo {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 9px;
	background: var(--ss-mist);
	display: grid;
	place-items: center;
	overflow: hidden;
	font-family: var(--ss-display);
	font-weight: 700;
	color: var(--ss-navy);
}
.ssv-studio__logo img {
	width: 34px;
	height: 34px;
	object-fit: contain;
}
.ssv-studio__txt b {
	display: block;
	font-family: var(--ss-display);
	font-size: 0.95rem;
	color: var(--ss-navy);
	line-height: 1.2;
}
.ssv-studio__txt small {
	color: var(--ss-faint);
	font-weight: 600;
	font-size: 0.8rem;
}
.ssv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ssv-chips li {
	margin: 0;
	padding: 0;
}
.ssv-chips li::before {
	content: none !important;
}
.ssv-chips a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--ss-card);
	border: 1px solid var(--ss-line);
	border-radius: 999px;
	box-shadow: var(--ss-shadow-sm);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ss-navy);
	text-decoration: none;
}
.ssv-chips a:hover {
	border-color: var(--ss-gold);
}
.ssv-chips a small {
	color: var(--ss-faint);
	font-weight: 700;
}

@media (max-width: 1100px) {
	.ssv-plist {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.ssv-ptiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ssv-cat-outro {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.ssv-ptiles,
	.ssv-studios {
		grid-template-columns: 1fr;
	}
	.ssv-plist {
		grid-template-columns: 1fr;
	}
}